Silvestar Bistrovićhttps://www.silvestar.codes/
Silvestar's personal website.Mon, 18 Mar 2019 06:22:20 GMThttp://hexo.io/Custom WordPress Theme Development with SPROhttps://www.silvestar.codes/articles/custom-wordpress-theme-development-with-spro/
https://www.silvestar.codes/articles/custom-wordpress-theme-development-with-spro/Tue, 05 Mar 2019 10:13:42 GMT
SPRO is a boilerplate of predefined Gulp tasks. The mission is to set up the development environment for your project without writing Gulp tasks again and again. In this article, I am going to show you how to configure SPRO for custom WordPress theme development.
SPRO is a boilerplate of predefined Gulp tasks. The mission is to set up the development environment for your project without writing Gulp tasks again and again. In this article, I am going to show you how to configure SPRO for custom WordPress theme development.

The Video Lesson

If you prefer watching a video over reading an article, you could proceed to the Skillshare lesson that I recorded for this occasion.

The project structure

I am going to use a default WordPress installation as my starting point. I am using Local by FlyWheel as my WordPress development tool.

The aim is to add Gulp tasks to TwentyNineteen default theme for Sass, JavaScript, BrowserSync, and Critical CSS.

I have reorganized the code in the theme. First, I have created a new folder called css and moved all Sass files and sass folder in it. Next, I have created a new folder called src, and moved newly created css folder and existing js folder in the src folder.

SPRO installation

To install SPRO, run npm install starter-project-cli -s command, and then run SPRO by executing node_modules/.bin/spro start command. SPRO is also available for global installation. Now you should be prompted to answer questions about the project architecture and Gulp tasks.

Here are my (shortened) answers:

12345678910111213141516171819202122232425262728293031

GENERAL | Do you want to override the project? YesGENERAL | What is the root folder of the project? ./GENERAL | Whereis the folder with the source code of the project? srcGENERAL | Wheredo you want tostorecompiled code of the project? buildGENERAL | Are you sure that you want to override the project? YesBROWSERSYNC | Do you want to run BrowserSync to preview changes in the browser? Yes HTML | Do you want to run HTML tasks? No CSS | Do you want to run CSS tasks? Yes CSS | Are you using Sass? Yes CSS | Whereis the folder with CSS source code? css CSS | Wheredo you want tostorecompiled CSS code? css CSS | Do you want to minify CSS code? Yes CSS | Do you want to autoprefix CSS code? Yes CSS | Do you want toadd sourcemaps for CSS code? No CSS | Do you want to lint CSS code? No JS | Do you want to run JavaScript (es6) tasks? Yes JS | Whereis the folder with JavaScript source code? js JS | Wheredo you want tostorecompiled JavaScript code? js JS | Do you want to minify JavaScript code? Yes JS | Do you want toadd sourcemaps for JavaScript code? No JS | Do you want to lint JavaScript code? No IMAGES | Do you want to run image optimization tasks? No FONTS | Do you uselocal fonts? Do you want to run font tasks? No FAVICON | Do you want to run favicon tasks? NoCRITICAL | Do you want toextractCritical CSS? YesCOMPRESS | Do you want tocompress (gzip) all assets? No KSS | Do you want toadd KSS style guide? No SASSDOC | Do you want toadd documentation for the SASS code (SassDoc)? No JSDOC | Do you want toadd documentation for the JS code (JSDoc)? No SEMVER | Do you want toadd semver versioning tasks? No YARN | Do you use Yarn as your default dependency manager? Yes

After the installation, SPRO would copy Gulp tasks and configuration files in the gulpfile.js folder.

To be able to run Gulp tasks, we should install all required dependencies. You could find the installation command in your terminal, right after the questions. Paste the command in your terminal, and hit Enter.

SPRO configuration

Now that we have all required Gulp tasks and dependencies, we could configure SPRO.

Let’s start with BrowserSync. I want to use the BrowserSync to preview the changes in the browser. Local by FlyWheel tool have configured the local site domain for me. In my case, it is spro-wp.v. I am going to use the local domain as a proxy for BrowserSync.

123

{"proxy": "http://spro-wp.v"}

Next, we should update the URL for extracting Critical CSS to match our development domain in the .critical.json file.

There are other options here, but the most important ones are src and out options. src option tells which file to use as our source file for extracting Critical CSS, and out option tells in which file should Penthouse store the extracted Critical CSS code. To learn more about Penthouse, visit the official Penthouse site.

Also, we should create a new Sass file in the sass folder called style.critical.scss.

Running the tasks

To view the list of available Gulp tasks, run gulp --tasks command. We have four tasks:

clean for cleaning the compiled code, and

three tasks for development: dev, build, and default.

If you run default Gulp task, the site should open in the browser.

PHP updates

Since our compiled code is stored in the build folder, we should update the path for CSS and JavaScript files. In the functions.php file, update the twentynineteen_scripts function:

If you followed the instructions correctly, you should be able to run gulp command in your terminal. Gulp should compile the code, then open the site in the browser, then extract the Critical CSS and then refresh the browser.

Conclusion

As you could see, I have never touched any of the Gulp tasks, just configuration file. This is exactly what SPRO is all about.

If you have any feedback, it would be appreciated. SPRO is in its early stages, and more features could be added soon.

Please spread the word. More lessons are coming soon! 📣

]]>https://www.silvestar.codes/articles/custom-wordpress-theme-development-with-spro/#disqus_threadIntroducing SPROhttps://www.silvestar.codes/articles/introducing-spro/
https://www.silvestar.codes/articles/introducing-spro/Thu, 28 Feb 2019 09:22:07 GMT
SPRO, or Starter Project CLI, is the best starting point for your next project. SPRO aims to set up a perfect development environment by learning about your project architecture and then setting up Gulp tasks for all your needs.
SPRO(pronounces /es-pro/), or Starter Project CLI, is the best starting point for your next project. SPRO aims to set up a perfect development environment by learning about your project architecture and then setting up Gulp tasks for all your needs.

It is very flexible, and it could save you a vast amount of time that you usually spend on configuring your project.

👉 SPRO is in its early stages, and every suggestion, feedback or help would be appreciated!

Why Gulp

There has been a great discussion about the build tools in the Frontend Developers Slack group (now deprecated, moved to Discord). Some developers prefer Parcel because it is fast and it just works (so they say), some developers like to write npm scripts to avoid new levels of the abstraction, and some developers like to use CodeKit or Makefiles, which I didn’t even know of before.

In another excellent article Why npm scripts, Damon Bauer says it very nicely:

“…if you are happy with your current build system and it accomplishes all that you need it to do, you can keep using it!”

Amongst other great build tools, like Grunt, Webpack, Parcel or even npm scripts, my favorite is Gulp because I am most familiar with this fantastic tool. I like the idea that every task could be isolated, and project files could be used as separated entities. Switching to npm scripts is something to consider, though.

About SPRO

About a year ago I started working on my side project, Starter Project. Starter Project is conceived as a boilerplate of the latest best practices packed in Gulp tasks. Instead of copy-pasting code from one project to another, why not have a single package that could be reused on various projects with a single configuration file that could be easily updated.

…why not have a single package that could be reused on various projects with a single configuration file that could be easily updated.

Read more about the idea and possible problems that Starter Project package it is trying to solve in the introduction article from the last year.

How it works

SPRO is conceived a bit differently. Instead of manually tweaking the configuration file, I have built a command that would start a questionary about the project structure.

When you answer all questions, SPRO will store information to the .starter-project.json file. It would also prepare a command to install all dependencies based on your answers.

Besides the main configuration file, SPRO would add Gulp task files and other configuration files in the gulpfile.js directory.

“Node’s module resolution allows you to replace your gulpfile.js file with a directory named gulpfile.js that contains an index.js file which is treated as a gulpfile.js. This directory could then contain your individual modules for tasks.”

Tasks that are defined in the SPRO could process your HTML, CSS, JavaScript, font, favicon, and graphics files. Gulp tasks would handle all files based on the configuration files in the gulpfile.js directory.

SPRO has a lot of features in one place, so you don’t forget to add something to your project. The features include extracting Critical CSS, add BrowserSync for easier development, linting your HTML, Sass and JavaScript files, as well as adding sourcemaps and pug template engine.

There is a good chance that Gulp tasks would work for you in the first attempt. But if you are unlucky, don’t hesitate: most errors could be resolved within a few minutes by debugging the problem and updating individual configuration files. You could watch videos and learn how SPRO works.

Installation

SPRO is available as an npm module, and you could install it locally or globally.

Now you should be able to run the command from the terminal that would save you a significant amount of time in the future.

The command

To check if the command is available, try running the following commands: spro --version and node_modules/.bin/spro --version for global and local installation, respectively. You should see the version number in your terminal.

The command that you want to run is spro start. You should be prompted to answer the questions about the project structure, as mentioned earlier.

Dependencies

Once you answer all questions, SPRO would display (and copy to clipboard) the command for installing dependencies for your project.

My initial idea was to include every possible dependency on the SPRO package. After thinking about it more thoroughly, I came to a conclusion that is not the right way. This approach was not optimized. Instead, you would install only dependencies that are required to run the tasks you selected.

Tasks

There are three primary Gulp tasks available for different development types:

gulp default for running all tasks (useful for more thorough development process),

gulp build for running all tasks with the exit process (useful for Netlify builds, for example), and

gulp dev for running only essential tasks (useful for basic development process).

These tasks are sets of many other subtasks. Subtasks will run depending on the global configuration option. If you choose not to run CSS tasks, the CSS based subtasks will be skipped (and Gulp dependencies would be omitted).

All subtasks are divided by the file type and primary function. Subtasks related to CSS could be found in the gulpfile.js/css.js file, and subtasks associated with extracting Critical CSS could be found in the gulpfile.js/critical.js file.

Each subtask has its own configuration file. CSS specific configuration could be found in the gulpfile.js/.css.json file, and Critical CSS relevant configuration could be found in the gulpfile.js/.critical.json file.

👉 You could edit every individual configuration file manually. However, the main configuration file, .starter-project.json file, should not be manually edited. There is a good chance that your project wouldn’t have all the dependencies for running Gulp tasks. Instead, start the spro command again.

The Course

The course is free, but you need to have a Skillshare account to view all lessons. Be sure to complete the class project and to rate the course. 🆓

Conclusion

I encourage everyone to try SPRO. I would appreciate any feedback, even if SPRO is not a good match for your project.

If SPRO is useful for you and your project, we could introduce more options or tasks that would create an even better experience for any developer. For example, I am currently considering adding siteaudit setting to the package.

Please show your support by starring the project on Github, or by sharing on Twitter. 🙏

]]>https://www.silvestar.codes/articles/introducing-spro/#disqus_threadJust My Routine As A Remote Workerhttps://www.silvestar.codes/articles/remote-worker-routine/
https://www.silvestar.codes/articles/remote-worker-routine/Thu, 14 Feb 2019 17:32:42 GMT
As a remote worker, having a routine and self-discipline is critical. Keeping up with multiple clients, personal projects, and continually improving your skills is a challenging task. Here's my recipe on how to stay sane and be a more successful remote worker.
As a remote worker, having a routine and self-discipline is critical. Keeping up with multiple clients, personal projects, and continually improving your skills is a challenging task. Here’s my recipe on how to stay sane and be a more successful remote worker.

The Office

Moving from the home office to an actual office changed my daily routine the most. Getting up, dressing, driving/cycling to work makes me feel like I have a regular job. Not to mention that working from actual office makes me more productive and focused. There are no distractions, just the working environment set up for delivering the best possible work.

In-office Hours

As a remote worker, it could be challenging to have strict work hours. If you are your own boss, you could arrange work hours by your preference. The important part is to stick with it. I noticed that having a clear schedule when I begin and finish with the work helped me tremendously to organize my workday.

I am a morning person, and I like to start working as soon as possible in the morning. I get up every day at the same time, and I am so used to it that my body already knows when to wake up without even setting up an alarm. I wake up early even over the weekends. When I come to the office, I often start with a simpler task, and then gradually progress to the most complex ones. After a couple of hours, I like to take a break that involves walking, usually to my favorite coffee shop or bakery.

After the break, I tend to work in a single long sequence where I could intensely concentrate on resolving most of my daily tasks. I try to avoid any distractions that could occur during this period.

Distractions

When you are your own boss, there is nobody who makes you work, and you could spend time on non-related things. Having strict self-discipline is really tough, especially if you working on a computer. Scrolling social media, reading the latest news or articles could lead to a severe situation with deadlines.

I don’t have any particular method of how to handle those distractions. When I feel like taking a short break to check my Fantasy team or to watch Snooker World video, I stop working and that’s it. I usually don’t get caught in opening more than two or three links/tabs.

Every Friday I start my workday by reading newsletters and saved articles.

But I do have a routine for keeping up with the latest technologies. Every Friday I start my workday by reading newsletters and saved articles. I feel perfectly fine if I don’t read the most recent news immediately. What matters is that I read it eventually. New CSS specs probably couldn’t help me at the moment anyway.

Out-of-office Hours

There are situations when I work from home. Sometimes I just don’t feel like leaving home (usually when it is rainy). I know I would struggle to get the job done, but these days I don’t have complicated tasks anyway. Working without my 2 external screens could take much more time, too. It is essential to have an understanding with your household members to be left alone during that time.

There are exceptions when interruptions ok, like when I am writing a draft for my new blog post, or when I am playing with a CodePen demo. If the situation doesn’t require my full attention, I like to “watch and work.” Sometimes it is my favorite TV show, and sometimes it is just sport (any sport, really) that is playing in the background while I am working. And there are situations when I like to talk to my wife or watch my daughter play while I work.

Away-from-computer Hours

When I feel especially exhausted, I just leave my MacBook in the office. Actually, I prefer to leave it there for most of the time. I realized that I cannot entirely rest if I use my computer at home, even just for fun. I relax best when I am bored. Boredom is underrated—you should appreciate the time when you don’t have to do anything.

Boredom is underrated—you should appreciate the time when you don’t have to do anything.

Health

Health is an essential topic when working remotely. I like to ride a bike during warm days. I play recreational football for a couple of times per week. I am not in the best possible shape, but I do feel comfortable in my body.

Mental health is important, too, if not the most important. I think you couldn’t produce the best work if you are having constant struggles. What keeps me sane is my wacky family, my super understanding wife, my hilarious daughter, and my friends.

I go to a pub with my friends regularly. All my work problems magically disappear when I am with my friends watching sports, bowling, playing darts or cards, or just drinking beer and enjoying the conversation. Most of my friends are not developers, so talking about work is rarely an issue.

Fighting the Loneliness

Working alone in the office could lead to some issues, too. That’s why I try to keep in touch with my friends by going to coffee in the middle of work hours (preferably in the morning). I also like to have a quick video call with my wife and daughter just to see what they are up to. I don’t like any sort of messaging, but I could see how that could be helpful, too.

Find a Hobby

You could improve your mental health by having a hobby. I like to work around the house as some sort of handymen. I enjoy fixing and improving my home while my dog keeps me entertained. A simple fix of squeaky doors or loose screw could do wonders for me. I also like to watch a lot of sports. I don’t consider this as an actual hobby, but it keeps me relaxed, and I do it daily.

Go to Fresh Air

Approximately once a month my family is taking a trip to the countryside to see the family. I often go there to help with some domestic chores, and that usually implies physical work. Spending time on fresh air is precious. It feels so rewarding to go to bed after a day-long physical job.

Alternatively, you could walk, run, bike, hike, or climb, as long as you are away from technologies. It doesn’t matter what you do, it matters that your mind would be away from projects, tasks, issues or bugs. I often have “aha” moments while I am away from my computer. Seeing things from another perspective is always a good idea.

Rest

Getting enough sleep is common sense. I have scheduled my mobile device to turn off notifications from 10 pm until 7 am. I couldn’t possibly imagine what could be so important that I have to respond to anything in the middle of the night. All of my clients are very aware of my working schedule, and they respect my time, the same as I appreciate theirs. It is imperative to bring this conversation at the beginning of the engagement to avoid unpleasant situations.

Tools

During my daily routine, I use several applications that help me get the job done more quickly and more efficiently. These are not productivity applications in the full sense of that word.

Station

The first one is the Station application. I use it mostly for my Google Mail, Google Drive, Google Calendar, Zoho Mail, Trello, Asana, and Slack. Jumping between applications is quite easy. Plus, I don’t have a lot of open browser tabs that clutter my browser. Another thing I noticed is that I spend way less time on Slack since I docket it inside the Station. Not seeing the “unread” dot makes me less stressed and I don’t feel guilty for not reading the latest messages. If I want to get distracted, I just turn on the volume on my mobile device.

Workona

The second one is the Workona extension for my browser. My browser workspace is a lot cleaner when I could group related tabs in a meaningful entity. For example, my “Knowledge Base” workspace contains articles and tutorials that I would want to read later, and my “Blogging” workspace contains links for tracking and sharing my blog. I also like the sync option that allows me to open my links on a different device.

Unroll.me

Unroll.me is a service for email management. I have set up a significant number of not-so-important emails that I could read daily. In my case, I get the Unroll.me email every morning, and I could quickly glance through emails and see the latest highlights. Important emails are not going through Unroll.me, so I still get those at the time.

Conclusion

I hope this information could help you become a happier remote worker. If you have any advice you want to share, I would like to hear them. After all, some of my routines were adopted from articles I read before.

]]>https://www.silvestar.codes/articles/remote-worker-routine/#disqus_thread2018 Lookbackhttps://www.silvestar.codes/articles/2018-lookback/
https://www.silvestar.codes/articles/2018-lookback/Sat, 05 Jan 2019 15:06:38 GMT
It is the beginning of the new year, and it is time to look back to 2018, but from a technology perspective. I have learned a lot, here are my findings.
It is the beginning of the new year, and it is time to look back to 2018, but from a technology perspective. I have learned a lot, here are my findings.

WordPress

I am a freelance developer. Most of my engagements come via Toptal, and most of the engagements were WordPress projects, and only a few were UI specific projects.

Those WordPress projects are mostly hosted on WPEngine or Pantheon. Both hosting providers support different environments for WordPress projects, like development, staging or testing environments, and versioning control like Git, which is excellent.

I noticed that clients prefer to buy finished WordPress themes. Often themes don’t have features that are suited for the client’s needs, so the subject should be updated or adjusted. Some of the clients like to develop a custom theme, but I only produced a couple of custom themes. I have used Underscores as a starting point for custom theme development.

I was mostly hired to finish the theme or to optimize a website for page speed. I don’t mind it; I just realized that some developers are not familiar with modern technologies or the latest best practices. In this case, I usually apply my knowledge to remove unused code from the codebase or to remove large libraries, like jQuery from the project. Also, I typically introduce Gulp to speed up the process, or CSS Grid or Flexbox to resolve layout issues.

Last year I discovered Local by Flywheel, “the #1 local WordPress development tool”, as their website says. This fantastic software made my life easier. Starting new WordPress site, adding custom domains, and enabling Live Link are my favorite features. Deployment to production is also a powerful feature, but unfortunately, neither of my clients used Flywheel hosting.

CSS

What an excellent year for CSS developers last year was. I enjoyed solving problems using Flexbox, CSS Grid, and CSS variables.

In the time when more than 50% of the developers didn’t know how to solve the famous Twitter puzzle, I wanted to write about the importance of the cascade.

Only 43% of the 13,000 people who answered know CSS well!

The right answer: both will be blue! 🤯

The class order on the element does not matter. These two classes have the same specificity, so CSS falls back to source order. Today y'all learned!

The point is, you cannot solve problems like centering the content or creating a classic “header-main-sidebar-footer” layout without knowing the essentials. I mean, you could, but in the long term, you will most likely have a problem that you won’t be able to solve quickly.

I will use this occasion to comment about CSS-in-JS approach. I didn’t learn much about it, but from what I read, some developers would like to remove the cascade from CSS. That is just wrong. We need the cascade. The cascade is the essential part of the CSS. I am not even going to say that CSS has cascade in its name. I would just like to encourage anyone to take their time to learn about CSS basics if they are writing CSS code.

JavaScript

JavaScript is everywhere. Every single project that I was working on this year used JavaScript. Only a few of them still use jQuery, mostly WordPress projects.

I have learned a lot about es6 this year, but I am still not proficient enough to remember all of the features without Google.

What I did notice is that React is a top requirement, even for jobs that don’t use React at all. I have never learned React framework, but I do have some basic knowledge about it. I was working with Angular for a couple of years, and I have read a significant number of articles about React. I just never had the opportunity to learn it on an actual project. Same goes for new Angular versions or Vue.js.

Having that said, I think this year showed us that frontend role is separating in two directions: engineering and user interface. The problem is that some employers don’t know the difference. Therefore developers who didn’t know the answer to Max’s question try to solve the problem by introducing CSS-in-JS techniques.

I am generalizing here, but I do think the CSS is underrated.

I also didn’t see much HTML/CSS roles, besides quick roles for converting designs to pages. What I did see are roles for UX/UI designers where you need to know how to design and how to translate designs to HTML/CSS code. From my experience, there aren’t many designers who know how to code and vice versa. I mean, I know how to use Photoshop, Sketch, and InVision, but I am not a designer.

I am a user interface developer, and I know how to change the layout or how to style a component in almost any environment, including WordPress, Angular, or React. I know how to get the highest scores on Lighthouse. I know how to handle cross-browser inconsistencies. I know how to use many different templating engines and JSX is just another one. I don’t need to know how Redux work to make the site appear consistently on every browser, do I?

Static Page Generators

I started to use Hexo for my website a couple of years ago. I learned how to use it, and I wrote about it. This year I had the opportunity to work with other static page generators. I have developed websites using Middleman, Jekyll, and Hugo.

Although Jekyll is the most popular, Hugo is my favorite. It is blazing fast, simple, yet powerful. You don’t need any plugins to build a sophisticated solution in Hugo.

All static sites were hosted on Netlify. Netlify is a game-changing platform with powerful features like SSL support, AB testing, form handling, to name just a few.

Another trend that is common when talking about static sites is CMS. Although I am familiar with Contentful, all of my clients use Netlify CMS. Being able to create, update, and deploy site within seconds from Netlify CMS without knowing how to code is just brilliant.

I have developed a couple of custom solutions for static sites, like integrating third-party software, creating Lambda functions, and adding custom build hooks. Static sites might not be so “static.”

It is interesting that every client that needed static site approached me directly. I haven’t seen many job posts about static sites, too. I guess finding a developer for the static site is not that easy yet.

Blogging

I have reached almost 2,5k followers on the dev.to platform. I have more than 700 followers on Twitter. I have a modest reputation on Reddit, Hacker News, and Lobsters.

Around 35,000 readers visited my blog with almost 50,000 pageviews. On dev.to, I have more than 17,000 post views, and nearly 700 reactions. On medium.com, I had around 10k post views, and on codementor.io, I had around 4,5k.

I have redesigned my site this year (with a little help from my friends). I am finally happy and I don’t think I will be redesigning it again this year. But I may move it to Hugo, it time allows. 🥇

Conclusion

I could easily say that 2018 was a great year for me. I hope the next one will be even better. Let’s make the web even better place! 2⃣0⃣1⃣9⃣

]]>https://www.silvestar.codes/articles/2018-lookback/#disqus_threadBuilding an Animated Sticky Header With Custom Offsethttps://www.silvestar.codes/articles/building-an-animated-sticky-header-with-custom-offset/
https://www.silvestar.codes/articles/building-an-animated-sticky-header-with-custom-offset/Fri, 07 Dec 2018 17:08:55 GMT
With the appearance of the position: sticky property, we could create sticky elements without JavaScript plugins. But creating sticky elements with animations couldn't be achieved without a little bit of JavaScript.
Sticky elements are used all across the web. With the appearance of the position: sticky property, we could create sticky elements without JavaScript plugins. But creating sticky elements with animations couldn’t be achieved without a little bit of JavaScript.

The specifications

The task is to build a sticky header that appears when the user scrolls past the static header or on a custom offset position. When scrolling down, the static header should stay at its place, while the sticky header should roll down. When scrolling up, the sticky header should disappear, and the static header should roll down. Note that the content of the static header and the sticky header differs.

The solution

To make it easier to understand the specifications, see this pen that contains the full solution:

The breakdown

For a better understanding of how this code works, we should examine the HTML structure.

.header--alpha, our static header is visible by default. When the user scrolls past the offset, and the wrapper header element becomes sticky, it will be translated outside of the wrapper element instantaneously without any transition effect. Note that element will be transitioned when it goes to the original position when sticky effect won’t be active.

.header--beta, our sticky header is positioned absolutely and translated outside of the wrapper header element. When the sticky effect is activated, it will be translated and transitioned in the original position.

JavaScript

You might have noticed the .fake-header element.

1234

.fake-header {height: 1px;position: relative;}

This element serves as an offset for the scroll. When it reaches the top of the viewport, the header becomes sticky. And when the header becomes sticky, the fake element will be pushed up by the height of the header plus one extra pixel. When the user scrolls up and reaches the fake element in its new position, the sticky effect will be turned off.

Conclusion

I am really excited to see how fast CSS is moving. Brand new properties, like position: sticky and pointer-events allows us to create better experience for the end user more easily and natively. And support is getting better and better every day. 🏆

]]>https://www.silvestar.codes/articles/building-an-animated-sticky-header-with-custom-offset/#disqus_threadAlpha, Beta, Gamma naming conventionhttps://www.silvestar.codes/articles/alpha-beta-gamma-naming-convention/
https://www.silvestar.codes/articles/alpha-beta-gamma-naming-convention/Tue, 06 Nov 2018 20:39:00 GMT
A few months ago I started using Alpha, Beta, Gamma naming convention. It began as a temporary thing, but it stuck eventually, and now I am using it all the time.
A few months ago I started using Alpha, Beta, Gamma naming convention. It began as a temporary thing, but it stuck eventually, and now I am using it all the time.

Alpha, Beta, Gamma

I am using BEM on a daily basis. M stands for modifiers. A modifier represents a variation of an element, generally speaking.

One day, I had a great programming problem: how to name a thing, in my case, a modifier. I could not think of anything constructive, so I just wrote alpha. Then I created a new element modification, and named the new modifier beta.

When I got back to that particular code to update the names of the modifiers, I realized I like it this way. The names are clean and straightforward, and I knew which class I had to apply to modify the original element. The new naming convention was born.

Naming variables

After a while, I started using the same with Sass variables. Here is how color variables for my site look:

Why it works

What is great about using Alpha, Beta, Gamma naming convention is that it separates the context from an element. Also, the Greek alphabet is widely used, so the chances that you already know some characters are pretty high.

Let’s say we have a list component with modifiers list--red,list--green, and list--blue for a list with red, green, and blue elements respectively. At some point, our designer decided to change the brand color from red to pink. Now we need to update the red color to pink, which means our modifier class name list--red wouldn’t make sense anymore. We need to update the class name to list-pink. This situation is a classic problem in the world of CSS.

If we use Alpha, Beta, Gamma convention, we would have these three classes:

list--alpha,

list--beta, and

list--gamma.

Now we could modify the style as we please and our classes wouldn’t lose meaning anymore.

Don’t overuse it

There is a potential brain processing overhead here because you have to remember which letter stands for which version of an element. Try to reduce your brain usage by documenting your variables and modifiers and not using too many variations for a single component.

Use psi and omega to name different or completely distinct variables or modifiers.

Here’s a tip for you: use psi and omega letters (last two letters of the alphabet) to name different or completely distinct variables or modifiers. For example, I am using color-psi for text color, and color-omega for white color. These are opposites of color-alpha,color-beta, and color-gamma which serves as theme/brand colors in my case.

Conclusion

Alpha, Beta, Gamma naming convention works for me, and I am using it on all new projects. I am quite sure I haven’t invented it, I just wanted to share this approach with you and see what do you think about it.

Do you like this approach? Do you have a different naming convention that you want to share with the community? I would like to hear more about it. 💬

]]>https://www.silvestar.codes/articles/alpha-beta-gamma-naming-convention/#disqus_threadIf you are starting a new website, consider using Hugohttps://www.silvestar.codes/articles/making-a-website-with-hugo/
https://www.silvestar.codes/articles/making-a-website-with-hugo/Wed, 24 Oct 2018 10:23:45 GMT
Other than it is “the world’s fastest framework for building websites,” Hugo is packed with powerful features that would make the website development process more pleasable.
If you are starting a new website, consider using Hugo. Other than it is “the world’s fastest framework for building websites,” it is packed with powerful features that would make the website development process more pleasable.

CLI

Once you install Hugo on your computer, you should have access to Hugo’s command line interface. You could start a local web server within a millisecond. Not to mention that live reloading is working by default.

Themes

If you don’t want or don’t know how to build a custom theme, you could use one of the hundreds of themes available for Hugo. However, if you like to be unique, and if you want to challenge your creative side, you could create a custom style for your new project. You could even use built-in pipes to process your Sass or Scss files or to minify your final CSS file.

Templates

One of the critical features you should understand when starting with Hugo is lookup order. Hugo’s mechanism for searching the correct template is well thought and designed to satisfy every project structure, even ones that are not trivial and straightforward.

Inside the templates, you could use variables, functions, logic, pipes, and other useful features. If you have a code snippet that you want to reuse in a different template, then you should extract that reusable code to a separate file called a partial.

The context

Another critical feature that you should understand is the context. The context, or “the dot,” depends on the environment. If you are inside the loop, then the context is the current item. If you are in the base template, then the context is the current page with all of its parameters.

Hugo allows you to define variables that don’t depend on the context. This variable could be instrumental when comparing the current item parameter inside the loop, for example.

There is the global context, too. You could access the global context from every template file or partial in any time.

Support and Community

Hugo has a great community. On their community website, you could search for an answer for almost your problem. If you cannot find the solution, you could open a new discussion and someone would help you.

Conclusion

I have highlighted only five features that make the process of developing a new website so enjoyable, but that is just a small part of what Hugo could offer to you.

If you are interested in making a website with Hugo by now, I encourage you to take a look at my Skillshare course.

The fastest twenty users would get the course for free. 🙌

]]>https://www.silvestar.codes/articles/making-a-website-with-hugo/#disqus_threadRoadmap, September 2018.https://www.silvestar.codes/articles/roadmap-september-2018/
https://www.silvestar.codes/articles/roadmap-september-2018/Thu, 27 Sep 2018 10:11:55 GMT
I have built this roadmap to remind myself how important is to have a plan for a career. It doesn't matter if I don't fulfill every objective, as long as I am keeping track of the vision.
The inspiration for creating a roadmap for myself came from C. Todd Lombardo and his talk on Smashing TV about roadmaps: Roadmaps are dead! Long live roadmaps!. I have built this roadmap to remind myself how important is to have a plan for a career. It doesn’t matter if I don’t fulfill every objective, as long as I am keeping track of the vision.

Roadmap

According to Lombardo, there are five primary components of a roadmap:

vision,

objectives,

timeframes,

themes, and

disclaimer.

Disclaimer

Making a roadmap disclaimer is essential.

Therefore you should consider yourself informed that this roadmap is prone to changes. The content communicates information that is relevant only to me. Also, a person cannot be a project. ❗

Having that said, you are free to be inspired and make your own career plan and decisions.

Vision

Vision should answer questions like where are you going, or how the future should look for you, or where do you see yourself in a certain period of time. It doesn’t have to be a single thought, it could be a whole document or a blog post or something else.

My current visions are:

to build more performant, reliable and accessible website for every client,

to be better in delivering pixel-perfect, responsive and semantic user interface solutions,

to become a more respectful and acknowledged developer, and

to start a consulting agency.

Objectives

Objectives are outcomes that you could measure or compare. When setting your objectives, you should ask questions like what are you trying to accomplish, or what results you are expecting.

My current objectives are:

devote to all projects equally and with full attention,

learn more about web tools, techniques, and principles,

write more technical posts,

write more career posts,

attract more visitors to my website,

build a bigger audience on social networks,

land more challenging projects,

increase the hourly rate,

make a product of my own, and

sell consulting services.

I am aware that my objectives sound very idealistic, but that is precisely the purpose. Objectives should help you follow the vision. In my case, the ultimate aim is to help clients build better software by making decisions based on my expertise and experience without coding necessarily—to consult.

Timeframes

Timeframes are periods of time in which you expect to accomplish your objectives. Timeframe could be a particular unit, like a day, a month or a year, or it could be an imprecise unit, like now, soon, next or in the future.

Themes

Themes are organizing principles how you should work. First, you have a problem, then you define what you need to fix the problem, then you set an objective.

Let’s create a theme. The problem is high bounce rate—visitors on my website often bounce after they read or don’t read an article. What I need is more quality content and/or call-to-action buttons. The objective is to engage visitors more and decrease the bounce rate.

Lombardo talks about asking “why” repeatedly for a problem that you are trying to solve until you find a root cause of the problem:

Why do I need more quality content? Because I want more visitors getting back to read more content.

Why are visitors not coming back? Because visitors mainly come from social networks after I share an article.

Why don’t visitors come from Google? Because the website is not on the first page on search results.

Why isn’t the site on the first page? Because the SEO is not optimized.

My current themes are:

Improve SEO to get higher Google ranking

Add more content on the homepage to make a unique user experience

Update portfolio to make potential clients want to hire you

Publish an article for Smashing Magazine

Publish a course about static page generators

I have created a Trello board with the complete roadmap. You could see that I have added the labels “Now,” “Next” and “Later” to define timeframes.

Conclusion

Looking back at what you achieved might be a great inspiration and it could make you think what you want to do next in your career. Writing your visions and goals to a paper, or typing it on a computer, might make you see things from a different perspective.

While I was creating the roadmap for myself, I felt like my career was moving in the right direction. It also made me think that I will never be where I want, but that is an entirely different topic. 🤔

]]>https://www.silvestar.codes/articles/roadmap-september-2018/#disqus_threadUsing CSS Grid where appropriate (revisited)https://www.silvestar.codes/articles/using-css-grid-where-appropriate-revisited/
https://www.silvestar.codes/articles/using-css-grid-where-appropriate-revisited/Wed, 05 Sep 2018 09:01:11 GMT
This solution is a follow-up post on my last year's article "Using CSS Grid where appropriate." The goal is to find a solution for navigation with an unknown number of items.
This solution is a follow-up post on my last year’s article “Using CSS Grid where appropriate”. The goal is to find a solution for navigation with an unknown number of items.

Recap

Creating navigation with CSS Grid is arguably not the best solution. However, if one wants to use CSS Grid, two options were suggested:

Using grid-auto-flow: row; and placing each item in the grid, like this:

123

.nav__item:nth-child(1) {grid-area: 1 / 1 / 2 / 2;}

Defining a definite grid using keyword auto for setting width of the rows and columns:

minmax()

minmax() function defines a size as a range between minimum and maximum value. It allows defining a dynamic size of columns and rows.

We could use this property to define a minimum and a maximum width of navigation item. In our example, we are using the following minmax definition:

minmax(60px, auto)

We are saying that column should be at least 60px wide, and it should be as wide as the maximum content width. See auto keyword for more details.

auto-fit

auto-fit should be used as a repetition number—a number used in repeat() function. It says that the grid should place as many items as possible like when items are empty (I think 🤔).

grid-auto-flow

grid-auto-flow is a property that controls how the grid algorithm for placing items works. In our example, we are using dense keyword. It says that the grid should fill holes that could be left when larger grid items occur.

justify-content

justify-content property aligns the content of the box. We are using justify-content: center to align the content of the items to the center.

Bonus: No media queries

As you could see, we haven’t used media queries. Media queries are useful and without them, and there wouldn’t be a responsive web design, but it feels so satisfying when we able to build responsive behavior without using one.

Final thoughts

CSS Grid still may not be the best approach for navigation element, but it works. Always try using CSS Grid where appropriate, even if it solves your problem. If you are a rebel, ignore this thought and use it nevertheless—there are no rules when building web solutions as long as your users are happy. 😎

]]>https://www.silvestar.codes/articles/using-css-grid-where-appropriate-revisited/#disqus_threadOverview of Popular Static Site Generatorshttps://www.silvestar.codes/articles/overviev-of-popular-static-site-generators/
https://www.silvestar.codes/articles/overviev-of-popular-static-site-generators/Tue, 07 Aug 2018 11:00:33 GMT
There are many obvious benefits to serving a static HTML file, such as easier caching, faster load times, and a more secure environment overall. Each static page generator produces the HTML output differently.
This article was originally published on Toptal Blog.

All static page generators have a single and seemingly straightforward task: to produce a static HTML file and all its assets.

There are many obvious benefits to serving a static HTML file, such as easier caching, faster load times, and a more secure environment overall. Each static page generator produces the HTML output differently.

However, the purpose of this post is not to dive in and discuss the intricacies of their mechanism, but to compare the feature set each framework offers and highlight the unique aspects and features of every framework.

Overview of Popular Static Page Frameworks

In this post, we will take a closer look at the following static page frameworks: Jekyll, Middleman, Hugo, and Hexo. These are by no means the only generators out there, but they are the most commonly used ones, backed by large communities and lots of useful resources.

Let’s take a closer look at each of them and compare their basic features:

Jekyll

written in Ruby,

supports the Liquid template engine out of the box;

Middleman

written in Ruby,

supports ERB and Haml template engines out of the box;

Hugo

written in Go,

supports Go template engine out of the box;

Hexo

written in JavaScript,

supports EJS and Pug out of the box.

Note: It is worth pointing out that each of these static page generators can be customized and extended using plugins and extensions, allowing you to cover most or all of your needs.

Setting up Static Site Generators

The documentation for each of these frameworks is comprehensive and nothing short of excellent and you can grab it here:

If you simply follow the installation guides, you should have the development environment ready within a matter of minutes. Once installed, you can start a new project by running commands from the terminal.

For example, this is how you start a new project in different frameworks:

Jekyll

1

jekyll new my_website

Middleman

1

middleman init my_website

Hugo

1

hugo new my_website

Hexo

1

hexo init my_website

Configuration

Configuration is usually stored in a single file. Each static website generator has its specifics, but many settings are the same across all four.

You could specify where are source files stored or where to output built sources. It is always useful to skip data that will not be used in the build process by setting exclude or skip_render option. You could also use the config file to store global settings like project title or the author.

Migrating to a Static Generator

If you already have a WordPress project ready to go, you can migrate it to a static page generator with relative ease.

The principle is nearly identical and quite straightforward—first export all content to a suitable format, and then include it in the right folder.

Content

Static page generators use Markdown for the main content. Markdown is powerful and one can learn it quickly. Writing content in Markdown feels natural because of its simple syntax. The document looks clean and organized.

You should place articles in a folder specified in the global configuration file. Article names should follow convention specified by the generator.

In Jekyll, you should place an article in the _posts directory. Article name should have the following format: YEAR-MONTH-DAY-title.MARKUP. Other generators have similar rules, and they provide a command for creating a new article.

Here are the commands for creating a new article in Middleman, Hugo, and Hexo:

Middleman

1

middleman article my_article

Hugo

1

hugo new posts/my_article.md

Hexo

1

hexo new post my_article

In Markdown, you are limited to a particular set of syntax. Luckily for us, all generators can process raw HTML as well. For example, if you want to add an anchor with a specific class, you could add it as you would in a regular HTML file:

1

This is atextwith <a class="my-class" href="#">a link</a>.

Front Matter

Front matter is a block of data on top of the Markdown file. You could set custom variables to store the data you need to create better content. Instead of writing HTML in Markdown, which could lead to a cluttered and ugly document structure, you could define a variable in the front matter.

For example, this is how you could add tags to your article.

1234

tags: - web - dev - featured

Templates in Static Page Generators

Static page generators use a templating language to process templates. To insert data into a template, you need to use tags. For example, to display the page title in Jekyll, you could write:

1

{{ page.title }}

Let’s try to display a list of tags from the front matter in our post in Jekyll. You need to check if a variable is available. Then, you need to loop through tags and display them in an unordered list.

Note: It is a good practice to check if a variable exists to prevent a build process from failing. It could save you hours of debugging and testing.

Using Variables

A static page generator provides global variables available for handing in templates. Different variable type holds different information. For example, a global variable site in Hexo holds information about posts, pages, categories, and tags of a site.

Knowing the available variables and how to use them could make a developer’s life easier. Hugo uses Go’s template libraries for templating. Working with variables in Hugo could be a problem if you are not familiar with the context, or “the dot” how they call it.

Middleman doesn’t have global variables. However, you could turn on the middleman-blog extension that would allow you to get access to some variables, like a list of articles. If you want to add global variables, you could do that by extracting data to data files.

Data Files

When you want to store data that are not available in Markdown files, you should use data files. For example, if you need to save the list of your social links that you want to display in the footer of your site. All static page generators support YAML and JSON files. Additionally, Jekyll supports CSV files, and Hugo supports TOML files.

Let’s store those social links in our data file. Since all generators support YAML format, let’s save the data in the social.yml file:

SASS

Jekyll supports Sass out of the box, but you should follow some rules. Middleman also supports Sass out of the box. Hugo compiles Sass through Hugo Pipes for Sass. Hexo does it via plugin.

ES6

If you want to use modern JavaScript features of es6, then you should install a plugin. There might be more than one version of a similar plugin, so you might want to check the code or see open issues or latest commit to finding the best one.

Images

Image optimization is not supported by default either. Also, like es6 plugins, there is more than one plugin to optimize images. Do your homework and try to find the best plugin for the job. Alternatively, you could use a third party solution. In my blog that is build with Hexo, I am using Cloudinary free plan. I developed a cloudinary tag, and I am providing responsive and optimized images via Cloudinary transformations.

Plugins, Extensions

Static page generators have potent libraries that allow you to customize your website. Each plugin serves a different purpose. You could find a wide range of plugins, from LiveReload for a better development environment to generating Sitemap or RSS feed.

Shortcodes in Markdown

Shortcodes are code snippets that you could place in Markdown documents. Those snippets output HTML code. Hugo and Hexo support shortcodes. There are built-in shortcodes, like figure in Hugo:

1

{{< figuresrc="/lint/to/image.jpg"title="My image" >}}

Hexo youtube shortcode:

1

{% youtube video_id %}

If you cannot find a proper shortcode, you could create a new one. For example, Hexo doesn’t support CanIUse embeds, and I developed a new tag that supports CanIUse embedding. Don’t forget to publish your plugin on npm or official generator site. The community will be grateful if you do.

CMS

Static page generators could be overhead for a non-technical person. Learning how to use commands or Markdown is not something that is easy for everybody. In that case, a user could benefit from Content Management System for JAMstack sites. In this list, you could find a system that best suits your needs. Know that it takes some time to configure the CMS, but longterm you and other users could benefit from publishing content more efficiently.

Bonus: JAMstack Templates

If you don’t want to spend too much time on configuring your project, you could benefit from JAMstack templates. Some of these templates are already preconfigured with CMS which could save you much time.

You could also learn a lot by examining the code. Try to install a template, compare it to others and choose the best one for you.

Wrapping Up

Static page generators are a fast and reliable way to build a website. You can even build non-trivial and highly customized websites with a generator nowadays.

For example, Smashing Magazine moved to JAMstack last year, and they managed to speed up their site significantly. There are other successful examples of static websites and they all share the same principle—to produce static resources and deliver them over Content Delivery Networks for faster loading and a superior user experience.

There is much more you could do with your static website: from using WordPress REST API as a backend to using Lambda functions. There are excellent solutions even for simple websites, like using HTTPS out of the box or handling form submissions.

I hope this overview of static page frameworks helped you realize their potential and consider using them next time you think of a new project.

]]>https://www.silvestar.codes/articles/overviev-of-popular-static-site-generators/#disqus_threadThe essential skill of a developerhttps://www.silvestar.codes/articles/modern-frontend-developer-skills-and-tools/
https://www.silvestar.codes/articles/modern-frontend-developer-skills-and-tools/Tue, 26 Jun 2018 11:01:32 GMT
Being a developer requires specific skills and tools. I realized what the essential skill for one developer is.
Being a developer requires specific skills and tools. I have put an effort to make a list of all the skills, tools, and techniques that I acquired during my career, and I was surprised by the number of them. During this process, I realized what the essential skill for one developer is.

I am writing this article from a frontend developer perspective, but it could be applied to every modern development branch.

Mindmap

I have created a mindmap of the skills and tools I acquired during my career. It was inspired by Kamran Ahmed‘s Web Developer Roadmap. Kamran’s roadmap made me think what did I learned, how many skills do I have, and are those skills still valid and required. I have used my Toptal profile as a reference of skills and tools because I am trying to keep my profile up to date there.

Once I reviewed all skills, I decided to divide my career into three parts, depending on my employment status.

Unemployed years

When I was starting, I didn’t know what I want from my career. I was learning about web fundamentals because I was given the opportunity to land a job as a PHP developer once I master the basics. Mastering loops, forms, templates, and AJAX seemed impossible to me. After a few months of sleepless nights and no incomes, I finally felt like I understand the basics.

Although I was at the very beginning, I learned I wanted to become a web developer. Solving problems using code was painful, but satisfying at the same time. Soon I would find out that the effort invested in learning and gaining new skills was worth it.

Organization years

So it began, I started working as a PHP developer. With my basic knowledge, I finally got the chance to work on an actual project. I wanted to build shiny websites and formidable applications, but I didn’t know how to do any of that. I don’t know about you, but I felt like the world was falling apart. I learned that I knew nothing. How to set up a project? How to start? Where to start?

After endless consultations with my mentor, and about billion bugs and issues, I finally started to produce the code that works. During this period the most important skill I have acquired was learning how to find an answer to the specific problem. I obtained a new set of skills, too, like setting up IDE to help me spend more time coding and less time finding typos, and how to use Composer, for example.

I learned something new everytime I succeeded. I learned even more everytime I failed.

After I have worked on different projects for a few years, I was getting comfortable making decisions on my own. I was exploring different approaches how to solve problems. I learned something new everytime I succeeded. I learned even more everytime I failed.

Suddenly knowing how to produce code was not enough. Using tools like Redmine, Git, and Bower was required to increase productivity. Sometimes learning how to use a tool felt worse than debugging Internet Explorer bugs. Moreover, it was time-consuming, too. I had to spend our precious time in learning instead of making money.

At this point in my career, I knew I wanted to become better in frontend development. Soon I switched my job, and I started to work as a frontend developer for the more prominent organization. This organization encouraged proactivity, so learning new techniques and tools, and sharing the knowledge with the team was part of the job.

It was a great time to learn. More tools were introduced monthly, if not on a weekly basis. Choosing what to learn, and what to use was not an easy decision. Investing time in something that wouldn’t be a benefit for a project or a team was not in anybody’s interest.

I learned how to present obtained knowledge to the rest of the team, too. Speaking in public, even in front of a team that you know is not easy. I am still not comfortable when I have to present something to others. We had team buildings, meetings, and workshops, and I worked hard to be as professional as possible. Again I had to spend our time in other aspects, than in producing the code. This time was different because I knew it was time invested, not wasted.

Freelance years

Last year I started a freelance career. It was a great year for me, I worked with extraordinary professionals on exceptional projects. Working remotely, and juggling projects continuously mean adapting to new surroundings and environments. That is where spending hours, days and months of learning about new tools come in beneficial.

Learning and using new tools and applications are part of the job.

In my opinion, I learned more techniques, and tools in the past year than in all previous jobs. I didn’t enjoy learning about all of them, but I didn’t mind either. Learning and using new tools and applications is part of the job.

Being able to adapt to the new environment is vital for me. I am not ashamed to say that I never used a particular technology or technique before. It is important not to be afraid to learn it. Most people I have collaborated with were flexible and understanding when this was the case.

Conclusion

I learned a valuable lesson that learning was part of the job — a developer could never know it all, it is impossible. Never stop learning and improving yourself. 📚

]]>https://www.silvestar.codes/articles/modern-frontend-developer-skills-and-tools/#disqus_threadMy first year of freelancinghttps://www.silvestar.codes/articles/my-first-year-of-freelancing/
https://www.silvestar.codes/articles/my-first-year-of-freelancing/Mon, 21 May 2018 11:53:01 GMT
About a year ago, I started with a freelance career. This experience has changed me as a professional, but also as a person.
I am writing this article from a frontend developer perspective, as I am one. I have specialized in User Interface, Static Page Generators, WordPress, and page speed optimization.

About a year ago, I started with a freelance career. This experience has changed me as a professional, but also as a person.

Clients

I am a member of Toptal talent network, and most of my clients are part of this formidable networks as well. I worked with seven Toptal clients. I also worked with a couple of Upwork clients. Two of my clients engaged me via my website. I worked as a mentor on Codementor. I also worked on a couple of projects with my friends, pro bono.

Toptal is a private, elite talent network with thousands of members across 100+ countries. Of the hundreds of thousands who apply each year, fewer than 3% gain admission to the network.

In total, I worked with thirteen clients and seventeen mentees.

Clients came from all over the world: United States, Canada, United Kingdom, Germany, Denmark, Romania, and Croatia. Most of them were agencies, but I also worked with designers and developers, too.

In my opinion, investing in the relationship with a client is the most critical part. Earning trust from a remote position is not easy. Being kind could take you a long way with your client, and it doesn’t cost you a thing.

During my first year of freelancing, I didn’t have a single negative experience with any client. ❤️

Getting the job done is also important. Never promise what you cannot deliver. It is okay to say that you need a couple of hours to do research. It is okay to say that you are not the right person for that task. It depends on a project type and the team.

Problems

Not everything is perfect. Freelancing comes with difficulties. Searching for a job is one of the biggest I came across.

Last summer I had a difficult time to find a client. I created new profiles on different hiring networks. I searched on LinkedIn, Twitter, Facebook, AngelList, newsletters, everywhere.

I found out that biding all over the place is a time-consuming and counter-effective process. I caught myself getting responses (negative ones) from clients that I didn’t even remember sending. I became nervous and felt terrible about myself. I was feeling more tired of bidding than when I worked on an actual project.

Eventually, I learned that it is better to bid on a couple of places and invest more time in a more quality cover-letter or application. There is enough job for everybody. The key is to find a proper way to get one.

Lessons

Working as a freelancer is hard, and it isn’t for everyone. Many obstacles are on that way. Here is what I have learned in the last year:

how to manage time more efficiently,

how to become more productive,

how to get away from a computer,

how to decline a job offer, especially if I am not fully qualified for the position,

that saying “I don’t know” is OK,

it takes time to find a client,

it takes time to land a client,

it takes time to get paid, and

to be kind to others.

Summary

I am happy to be able to share my experience as a freelance developer. Successful freelancing takes time and patience. Luckily that is something that could be learned along the way.

]]>https://www.silvestar.codes/articles/my-first-year-of-freelancing/#disqus_threadStarter Project - Gulp tasks for CSShttps://www.silvestar.codes/articles/starter-project-gulp-tasks-for-css/
https://www.silvestar.codes/articles/starter-project-gulp-tasks-for-css/Sun, 22 Apr 2018 09:28:37 GMT
This article is part of a series about Starter Project, and this time I will explain all about Gulp tasks for CSS.
This article is part of a series about Starter Project, and this time I will explain all about Gulp tasks for CSS.

Settings

The idea of Starter Project is to have a single config file for all Gulp tasks. If you open config.json file, you could see a section for CSS.

The first option is run. If set to true, CSS Gulp tasks will be executed. There are three other mandatory options for CSS:

src - a path to a folder with Sass files,

dest - a path to a folder where compiled CSS files will be saved, and

clean - a path to a folder which will be cleaned before Gulp execution (almost always the same as dest option).

Sass

Starter Project uses Sass as a preprocessor for CSS. As it’s official website says, Sass is “CSS with superpowers.” A significant number of developers are supporters and users of this robust program. It has useful features like variables, functions, and mixins.

Imports

gulp-cssimport is a plugin that allows import of linked files by including content to CSS file. This means you cannot use native CSS @import implementation, but it is considered a bad practice in most cases anyway.

Sass Libraries

If your website looks inconsistent across different browsers, you probably want to use CSS technique to reset browser behavior. In Starter Project, Normalize.css is used for this task.

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

Nicolas Gallagher

Modular Scale helps with font size consistency. modularscale-sass is a list of values that are used to size type and create a sense of harmony in design.

sass-mq is a Sass mixin that helps a developer in composing media queries in an elegant way.

Autoprefix

Starter Project uses gulp-autoprefixer plugin to add vendor prefixes to CSS files. This plugin is handy as developers don’t have to add these prefixes manually. In config.json, you could add Autoprefixer options to autoprefixedConfig settings.

Source maps

Source maps allow developers to see the source code for compressed assets. In Starter Project, gulp-sourcemaps plugin is used to create source maps for CSS and JavaScript files. If your environment doesn’t require source maps, you could disable it by setting run option to false in sourcemapsConfig.

123

"sourcemapsConfig":{ "run":true}

Minifying

gulp-clean-css is a Gulp plugin that acts as a wrapper for clean-css. In Starter Project, this plugin is used for CSS minification. To create less confusion with file names, gulp-rename plugin is used to rename minified assets by adding prefix or suffix to the file name.

123

"renameConfig": {"suffix": ".min"}

Linting

Linting is the process of running a program that will analyze code for potential errors.

Bonus

For all the VS Code users, here is the tip how to use Stylelint inside the editor. First, install stylefmt and Run On Save extensions for VS Code. Then call command palette by pressing cmd + shift + p, and type open workspace settings.

This should run stylelint when you save .scss files. If it doesn’t work, contact me for help.

Conclusion

In the previous article, I was trying to explain the idea for this project. This article should help you understand how Gulp could be used to optimize, lint and deliver best possible CSS output.

Starter Project is conceived as a boilerplate with latest best practices for generating the best possible outcome. If you have any idea or suggestion how this project could be better and more interesting, please contact me, open an issue, or create a pull request on GitHub.

Please share! 🙏

]]>https://www.silvestar.codes/articles/starter-project-gulp-tasks-for-css/#disqus_threadStarter Project - A set of latest best practices packed in Gulp taskshttps://www.silvestar.codes/articles/starter-project-a-set-of-latest-best-practices-packed-in-gulp-tasks/
https://www.silvestar.codes/articles/starter-project-a-set-of-latest-best-practices-packed-in-gulp-tasks/Fri, 23 Mar 2018 10:20:00 GMT
This article is the very first article in a series about Starter Project, a set of latest best practices packed in Gulp tasks. In this article, I am going to explain the idea behind this project, how it could help you on your project and how to use it.
This article is the very first article in a series about Starter Project, a set of latest best practices packed in Gulp tasks. In this article, I am going to explain the idea behind this project, how it could help you on your project and how to use it.

First Scenario

Every project has its environment. Switching between projects means switching environments. Switching environments means remembering commands for running project tasks, like Gulp or webpack. But too often commands are forgotten. This scenario happens to me daily, even when working on similar projects.

Second Scenario

Consider two different projects. First is custom WordPress theme development, second is Middleman blog. Both projects use Gulp task runner to compile and optimize assets. Setting up Gulp tasks for either project is time-consuming work. And every project has its architecture which disables a developer to copy Gulp tasks from one project to another without spending the time to reconfigure every Gulp task individually.

Third Scenario

Working on a project without a coding convention could be a nightmare. Git conflicts on every merge, endless discussion about tabs versus spaces, ugly and inconsistent code are just some of the problems that could emerge as a consequence.

The idea

I am sure these scenarios sound familiar. These happened to me a lot of times. I cannot even remember how many times I created a Sass mixin or a JavaScript function on a project that I wanted to use on another project but I was too lazy to search for the code, and eventually, I started from the beginning.

Starter Project is an effort of mine to fix these problems. It is a collection of Gulp tasks with the latest best practices in front-end development. But not only Gulp tasks. It contains every asset for building a successful project, from HTML and CSS to JavaScript and images.

The Package

The package is available on npm. You could find instructions for the installation in official documentation. Once installed, you will have the copy of the package’s website for the Starter project. It could be a good starting point for your new project.

Starter Package is also a static page generator, a very rudimental one. The original website is built using Starter Project and hosted on Netlify. It is very fast, see the PageSpeed Insights and WebPageTest scores.

The package should be used as a development dependency. That will allow you to update the package and maintain your project more efficiently.

The Usage

Starter project has three different Gulp commands for different environments:

You could find all assets in new_src folder. Once you run one of the build commands, new_dist folder will be created with compiled static contents. Learn more about structure here.

The Config file

Starter Project is configurable and should be able to run in every project, no matter the architecture. The main configuration file could be found in the root of the project, config.json. For every task, there is an option run. If set to true, the task will run. For example, you could turn off penthouse, a library for generating Critical CSS.

Starter Project supports ES6 via babel plugin. You will find scripts for deferred loading of CSS files (use it in combination with Critical CSS) and for loading fonts with Critical FOFT method.

If you are not using a third-party service for hosting images, then Starter Project could optimize your images. Starter Project supports.gif, .png, .jpg, and .svg files.

Documentation is an integral part of every project. You can generate excellent documentation using Starter Project. SassDoc will parse Sass comments and create Sass documentation. JSDoc will parse JavaScript comments and create JavaScript documentation. You could even create living styleguide. Starter Project uses KSS to parse Sass comment for that purpose.

There are other goodies, like Browser-sync, Favicons, Sourcemaps, Gzip, Linters, Standards, editorconfig, and more. I will try to document everything and write new articles about these, too. Stay tuned!

Websites

I have used Starter Project on several different projects so far.

Han Han Xue website - a website with a blog for Han Han Xue, a Designer and FX Technical Director from Montreal, Canada. The site runs on Middleman.

Irina & Matej website - a website for Irina and Matej, wedding and portrait photographers based in Croatia. The site runs on WordPress.

Conclusion

Starter Project is not conceived as a strict set of rules. This package should be configured to fulfill every project specification; you could propose new features, fork the repository or turn off some of the tasks in the config file.

]]>https://www.silvestar.codes/articles/starter-project-a-set-of-latest-best-practices-packed-in-gulp-tasks/#disqus_threadClassily.js - Toggling classes more classilyhttps://www.silvestar.codes/articles/classily-js-toggling-classes-more-classily/
https://www.silvestar.codes/articles/classily-js-toggling-classes-more-classily/Tue, 28 Nov 2017 09:28:28 GMT
I created a JavaScript plugin for toggling classes more classily, and I called it Classily.js. The plugin is simple yet powerful, and, if used correctly, it could solve tasks that are not so simple.
I created a JavaScript plugin for toggling classes more classily, and I called it Classily.js. The plugin is simple yet powerful, and, if used correctly, it could solve tasks that are not so simple.

What is Classily.js?

Classily.js is a Javascript plugin built to solve a single problem—toggle a CSS class on an HTML element. The current version of Classily.js has more features, including toggling multiple classes and targeting multiple elements.

Before we see the plugin in action, let’s see how to install it.

How to install Classily.js?

You could install Classily.js by cloning a repository from GitHub:

1

git clone https://github.com/maliMirkec/Classily.js.git

or by installing using npm:

1

npm install classily.js

or using yarn:

1

yarn add classily.js

or using Bower:

1

bower install classily.js

How to initialize Classily.js?

To initialize Classily.js, add script tag to your HTML document with path to Classily.js.Next, make new Classily instance and you are good to go!

123

new Classily ({ selector: '.my-selector'})

where selector: ".my-classily-element" is a trigger selector—an element which will trigger class toggle action—usually an anchor or a button. Default selector is .js-classily.

Once you installed and initialized the plugin, you are ready to use the plugin and discover many new ways how the plugin could be helpful.

Which options does Classily.js have?

Two main options could be passed to Classily.js:

data-target and

data-class.

data-target option is used for targeting elements. We target elements by providing selectors for querySelectorAll() function.

data-class option is used to pass class names that will be toggled on targeted elements.

We can provide multiple targets and classes by separating them with comma character. Using these two options, and depending on how the options are passed, we could achieve four different scenarios:

toggling a single class on a single selector,

toggling a single class on multiple selectors,

toggling multiple classes on a single selector and

toggling multiple classes on multiple selectors.

When a number of selectors and classes are equal, then each selector could be toggled with a different set of classes. For example, if we pass two selectors separated with comma character and two classes separated with comma character, the first class will be toggled on elements targeted with the first selector, and the second class will be toggled on elements targeted with the second selector.

When a number of selectors and classes are not equal, then all provided classes will be toggled on every element targeted by every selector. For example, if we pass two selectors separated with comma character and three classes separated with comma character, all three classes will be toggled on every element targeted by two selectors.

By adding the same class .my-class on target elements we are targeting both headings at the same time. That is because Classily.js uses querySelectorAll() function.

There is another way how we could achieve the same effect—we could provide a comma-separated list of selectors.

How to toggle multiple classes on multiple elements?

In the example below, we are toggling two different classes on two separate elements.

The number of comma-separated selectors must match the number of comma-separated classes. Notice that second element is toggling two different classes, hidden and blue—we could provide more that one class by using space as separator.

First, we are targeting .my-class element with .red class. If there is no such element, Classily.js will skip this step. If the element exists, then we remove .red class. Repeat the same for the .gold class. Then, we are targeting .my-class element that doesn’t contain .blue class. If the element exists, then add .blue class. The heading is now in “blue” state. The same is for “red” and “gold” states.

The method above could be applied to create tab section, feature seen on many websites, for example. When the user clicks on a tab, different content appears.

Does Classily.js have special features?

Often there is a need to switch the state of the element itself, like the button in this example.

To avoid usage of complicated selectors, we could use the keyword this.

In this example, we used anchor tag as a button. There is another feature that is useful—we could prevent default behavior, like opening a link. To do that, we should use data-prevent="default" option.

Conclusion

Classily.js is helping me with my everyday job. I no longer have to jump from template file to script file to execute simple tasks like class toggling. And I’m able to achieve some pretty nifty tricks with it.

Links

]]>https://www.silvestar.codes/articles/classily-js-toggling-classes-more-classily/#disqus_threadFrom WordPress to Hexohttps://www.silvestar.codes/articles/a-guide-to-static-site-generators-using-hexo-and-wordpress/
https://www.silvestar.codes/articles/a-guide-to-static-site-generators-using-hexo-and-wordpress/Thu, 19 Oct 2017 06:53:11 GMT
Static site generators are systems that compile templates into static HTML pages. If that sounds efficient—yes, it is. There is no server processing or rendering, so static websites tend to be very fast and lightweight.
This article was originally published on Toptal Blog.

Static site generators are systems that compile templates into static HTML pages. If that sounds efficient—yes, it is. There is no server processing or rendering, so static websites tend to be very fast and lightweight, saving you and your users precious time and bandwidth. This increased efficiency is reflected in lower costs and, potentially, higher revenues.

From Optimizing WordPress to Going Static

Speaking of efficient revenue generators, WordPress comes to mind. It powers 28 percent of the internet and is a potent platform with lots of great features, including extensive user and content management backed by an array of plugins, themes, APIs, etc.

Even big players in our industry use WordPress. Websites like Smashing Magazine and CSS-Tricks use WordPress, albeit significantly customized instances in both cases. However, working with WordPress can be a tedious task, especially when customizing and optimizing for performance.

I started a small blog back in 2015. My first instinct was to use WordPress. It gave me a jumpstart, as I was working with WordPress already. I created a new droplet on DigitalOcean as a server, established Vesta as Hosting Control Panel, and installed WordPress as a blog platform. Ultimately, I designed and developed a brand new WordPress theme. The only thing missing was the content.

I knew I wanted to share some tips about Atom, as I was using this great editor at that time. I published a few articles about it and shared them with the community.

At first, I wasn’t paying that much attention to performance because I was too focused on the content. After a while, I noticed some performance issues. The score on Google PageSpeed Insights was lousy, so I worked hard to fix and optimize my website, attaining an almost perfect score of 99/100:

I switched from Nginx+Apache to Nginx+PHP-FPM.

I used CloudFlare for speed and protection.

I used Cloudinary to host images.

I tweaked my theme and used Critical CSS.

The only warning was for a Google Analytics caching issue which I didn’t know how to fix at the time.

But what if 99/100 or 100/100 still don’t get you the desired performance? That’s where static page generators enter the fray.

Enter Static Page Generators and Hexo

So what is a static site generator?

As the name implies, a static website generator is a system that generates static HTML files. Serving static HTML files is much faster than creating pages on the fly. There is no server rendering or compiling, which often causes a delay in page loading.

When talking about performance, one must think about caching. Although there are multiple techniques for caching WordPress, this is not usually a straightforward task, unlike caching static files. Serving cached files is more performant than serving actual files from the server and it can save time when loading websites.

In June of this year, Vitaly Friedman of Smashing Magazine introduced JAMstack in a workshop in my city. I’d never heard of it, and I was very intrigued. After the seminar finished, I studied this new concept for a bit, and I realized how awesome it is. I realized that my website doesn’t need a WordPress.

The first step was to decide which static page generator to use. I wasn’t aware how many there are. I decided to give the Hexo blog framework a try. It is deployable to Netlify, has a plugin to migrate from WordPress, and uses Node.js, which I’m familiar with, unlike Jekyll and Hugo, which are based on Ruby and Go, respectively. And, as I discovered later, it is blazing fast.

Migrating WordPress to Hexo

Hexo installation is as simple as it could be. Install hexo-cli globally using npm, run the hexo init command, install npm dependencies, and voilà:

1234

npm i -g hexo-clihexo init <blog-name>cd<blog-name>npm install

To make the migration, install the hexo-migrator-wordpress plugin. This plugin expects XML files as a source. XML files could be exported via the WordPress export tool, which can be found in administration panel under Tools -> Export -> WordPress. Finally, type the hexo migrate command to finish the import.

1

hexo migrate wordpress <source>

The only thing left to do is to check the result. Run the hexo server command to start the server and open the browser at given address.

1

hexo server

Markdown and Its Limitations

Hexo supports Markdown out of the box. Markdown is a markup language that many use to format README files, comments, and posts. But it could be used for writing your article as well. Its syntax is intuitive and easy to learn.

Another advantage for Markdown is that it generates clean and valid HTML. That allows developers to create clean and maintainable CSS rules for styling blog articles and pages.

A developer’s life is never easy. We often run into problems that could cause us to spend time on unexpected things. If we learn something along the way, then we didn’t waste this time, and that is a good thing. The same happened to me. I thought everything went well because there was no compiling error, but then I noticed that some things didn’t work as expected.

For example, Codepen demos didn’t load. I searched for a Hexo plugin, and found one. Unfortunately, this plugin wasn’t official, and it generated HTML errors that were unacceptable. I wanted to contribute and fix the problems, but the latest pull request was unresolved for more than a year and a half. I decided it would be easier to fork the repository, fix the problems, and publish the plugin on the Hexo page so that anyone could use it. The plugin was accepted, I updated the content, and Codepen demos worked like a charm.

Similar problems occurred with CanIUse embeds. Now that I knew how to create a Hexo plugin, there was no excuse not to do so. My hexo-caniuse plugin was also published, as was my hexo-cloudinary plugin for responsive images loaded from Cloudinary CDN.

Redesign and Optimization

The design of the website is rather fundamental. Hexo offers a handful of themes for free on the official website, but I wanted a unique theme for my Hexo site. After I read the documentation and learned how to customize Hexo, I started to develop an original theme from scratch.

To create new templates, I decided to use EJS for templating. Having never worked with EJS, I saw it as a chance to learn the new template syntax. If you don’t like EJS, Hexo provides you with Swig, Haml or pug support via plugins.

During the redesign process, I was paying close attention to performance. By following best practices, we can speed up our static website even more. Placing JavaScript files at the bottom of the document and using the Critical CSS technique creates the best experience for your audience.

SEO optimization is crucial for blog visibility on search engines like Google. Hexo has a built-in helper for inserting Open Graph data. Hexo uses YAML files to store site and theme configuration. I used the theme configuration file to configure the site name, description, and various social IDs.

Adding Gulp or Webpack to your build process is always helpful and recommended. I used Gulp to minify and compress CSS and JavaScript files, and everything was ready. I could deploy it.

Netlify

Netlify is a platform that provides hosting for websites and apps with blazing fast performance. It markets itself as a unified platform that automates code to create performant and easy to maintain websites.

CloudFlare

Despite the excellent scores, I wanted to try CloudFlare, just to see how much it would speed up the website additionally. CloudFlare can be overwhelming at first, but learning how to use it is fundamental. After I configured CloudFlare, I reran the tests and the results were even better.

How Much Does It Cost?

Hexo is an open-source platform, so it’s free no matter how you decide to use it. It has a large community, and is the third most popular open source static page generator according to StaticGen.

Netlify has an open plan which provides us with great options for our hosting. Images are hosted on Cloudinary’s open plan as well. CloudFlare’s free plan allows us to configure a high number of rules which can speed up your already fast website. It also allows us to fix the Google Analytics browser caching issue. I didn’t pay for the domain either, since I used a free personal domain provided by the government.

This project setup reduced my budget to a minimum. If you need more advanced features for your project, a static page generator may still save you a few bucks.

Serving cached files means CPU and bandwidth usage is reduced, which in turn means you can use cheaper hosting plans with less powerful hardware. Not only that, your website will be much faster, meaning your users will enjoy browsing on both mobile and desktop devices. And, because page load speed can impact Google Search rankings, your website will rank higher, gaining even more visitors.

All this means that you could spend part of your budget elsewhere—for example, on promoting your website or creating additional content, which will help gain a tad more revenue.

The Case for Static Site Generators

Migrating from WordPress to a static page generator is no simple task, and it’s definitely not something every WordPress user should do. However, Hexo made this transition relatively painless, thanks to its plugins, excellent documentation, and a simple API.

Before deciding whether or not you want to migrate your product to a static solution, you need to be aware of the limitations that come with static page generators, such as content restrictions, Markdown learning curve, and version control.

You should also be aware that Hexo is a blog framework. It is perfect for developers and tech people that know how to use a text editor and terminal. If you like using a web interface to manage your content, there is a plugin that provides that functionality as well. It’s called hexo-admin and it’s quite popular.

If you’re already using WordPress, you should stop and think which features of WordPress you are using right now, and which are indispensable. Do you have a complicated content structure? Are you using user management? Are you using a lot of plugins on your instance of WordPress and are they all necessary? Are you satisfied with performance of your site?

If the answer to most or all of these question is no, than you are ready to supercharge your website with a static page generator. Depending on the use case and your requirements, static pages could help maximize efficiency while minimizing cost. If, on the other hand, you demand WordPress flexibility, you’re probably not even considering such a move.

]]>https://www.silvestar.codes/articles/a-guide-to-static-site-generators-using-hexo-and-wordpress/#disqus_threadFixing Google Analytics caching issuehttps://www.silvestar.codes/articles/fixing-google-analytics-caching-issue/
https://www.silvestar.codes/articles/fixing-google-analytics-caching-issue/Thu, 07 Sep 2017 14:20:04 GMT
Getting the perfect score from Google PageSpeed Insights could be a tedious task, especially if Google Analytics is present on the website. You end up thinking that 99/100 is the perfect score. My friend, the solution is here.
Getting the perfect score from Google PageSpeed Insights could be a tedious task, especially if Google Analytics is present on the website. You end up thinking that 99/100 is the perfect score. What does that one point mean anyway? And you go to sleep every night knowing that one point is still missing. My friend, the solution is here.

The solution

The answer is pretty simple—use CloudFlare Google Analytics app. As simple as that! For those of you who are unfamiliar with CloudFlare, I’ll to guide you how to do this.

The setup

CloudFlare is awesome service that makes your project faster and safer. I’m using the free plan which provides you with plenty of options. The first step is to add the website to CloudFlare. You will have to scan the site, add DNS records, and update the nameservers. Don’t worry; your domain will be available the whole time, no downtime during the transition.

Once when your website is added to CloudFlare, you will be notified, and you could get started with configuration. There is a significant number of configuration settings out there that are out of the scope of this article. Every option is well documented, take your time and set up every option carefully. Don’t forget to check if your website is working after every change because it could be hard to debug the problems afterward. Believe me; I have learned that the hard way.

The Google Analytics app

The first step is to remove the currently installed Google Analytics tracking code. To install the Google Analytics app, go to Apps tab and search for it. Click “Preview”, add the tracking code and choose the pages on which to install the Google Analytics. Don’t forget to click on “Install” button to finish the installation. Now go to Google PageSpeed Insights and test your website if it’s working.

]]>https://www.silvestar.codes/articles/fixing-google-analytics-caching-issue/#disqus_threadUsing CSS Grid where appropriatehttps://www.silvestar.codes/articles/using-css-grid-where-appropriate/
https://www.silvestar.codes/articles/using-css-grid-where-appropriate/Sun, 30 Jul 2017 20:17:48 GMT
Recently I've redesigned my blog, as some of you could notice. During this process, I decided it is time to learn more about CSS Grid and actually use it. Here's what I learned.
Recently I’ve redesigned my blog, as some of you could notice. During this process, I decided it is time to learn more about CSS Grid and actually use it. Here’s what I learned.

Using CSS Grid

Every time I’m doing a new (re)design, I usually start with the header. The first component in a header is navigation. My website architecture is not complicated, just a few pages, blog category and posts.

I wanted to try CSS Grid here, so I started by adding display: grid on my ul element. At first, I wasn’t sure how many elements will be in the menu, 4 or 5. But I had to know that information in order to define my grid-template-columns. Or do I?

I discovered there’s a property that could help me in this specific situation. And it is called grid-auto-flow.

The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.

I’ll set this property to column and grid will be smart enough to add new columns as necessary.

To create a responsive menu, I’ve added a media query for a smaller screen and stacked items one below other using grid-auto-flow: row. Now I could use either 4 or 5 elements in my navigation. Everything works.

Using CSS Grid items

In order to do that, I wanted to provide developers with an option to add as many menu elements as needed. And then things started to get complicated.

I thought it would be a good idea to allow a maximum of 4 elements per row in the header navigation. If there are more than 4 elements, place them in the new row.

I was playing around with various CSS Grid properties to achieve desired behavior but nothing worked with grid-auto-flow.

Then I’ve tried a different approach: instead of trying to define a grid, I’ll try to position grid items individually. I’ll place first grid item in the first column of the first row and then second grid item in the second column of the first row and so on.

Using flexbox as fallback

Can I Use css-grid? Data on support for the css-grid feature across the major browsers from caniuse.com.

I needed a decent fallback for CSS grid. Because I’m a huge fan of Flexbox and because the support for Flexbox is pretty good, it was natural to create a fallback to Flexbox.

Can I Use flexbox? Data on support for the flexbox feature across the major browsers from caniuse.com.

I first heard about this method when Vitaly Friedman from Smashing Magazine had a workshop in Osijek earlier this year. The principle is that we should first define Flexbox and than add CSS Grid using @supports rule.

To prevent Edge from using CSS Grid, I’ve added grid-auto-flow: row rule. This property has no support in Edge.

The result is still the same, with an exception of cross browser support.

A lesson learned

I’ve learned a lot by building a navigation using CSS Grid. The biggest lesson here is to use CSS Grid where appropriate. And building navigation using CSS Grid is certainly not appropriate, in my opinion.

Final thoughts

I really enjoyed building a navigation component using many different techniques. There are many ways how components could be built and there is no correct or wrong solution, as long as it works. That’s why I love CSS.

]]>https://www.silvestar.codes/articles/using-css-grid-where-appropriate/#disqus_threadHow to create crooked shadowhttps://www.silvestar.codes/articles/how-to-create-crooked-shadow/
https://www.silvestar.codes/articles/how-to-create-crooked-shadow/Tue, 25 Jul 2017 14:10:31 GMT
Recently I was working on a very interesting and challenging project. That was actually the first time I've heard someone says those words and my heart was full of joy. One of the most challenging features to build was to add a shadow on a crooked border.
Recently I was working on a very interesting and challenging project. I was told to use CSS wherever possible. That was actually the first time I’ve heard someone says those words and my heart was full of joy. One of the most challenging features to build was to add a shadow on a crooked border. I know it doesn’t sound either glamorous or complicated, but it kinda is.

Crooked border

Here’s the desired design for the hero section with crooked border (notice the crooked shadow at the bottom):

Let’s break this into smaller modules:

hero block

hero title

hero icon

crooked border

inner shadow

First three are easy to create, especially if using flexbox to center the content.

Crooked shadow

To create an inset shadow, we usually use a box-shadow property. Every box could have a shadow, including our :after pseudo element. But we cannot apply box-shadow here because we have a box, although it looks like a triangle and shadow is not crooked.

To solve this problem, I’ve even tried to rotate another pseudo element with a shadow and place it under an existing triangle. It worked, but not at every viewport size. I wasn’t happy with that solution.

Then it hit me—I should use a crooked transparent gradient on a box that is as tall as :after pseudo element. Wait, what? I’ll try to explain this step by step.

First, we should create an element that is as tall as :after pseudo element. We could use :before pseudo element for this purpose. Then we should add linear gradient at the correct angle and percentage. In our case, linear gradient should go to the top left corner until 50%. Finally, we should scale and translate element to make it visible.

In order to make this work, don’t forget to add position: relative and overflow: hidden on .hero element.

And here’s the final solution:

Final thoughts

I really enjoyed solving this problem and I’m quite happy with the solution. And it is a fully responsive solution, which is great.

If you like this article or you have a different solution, let me know in the comments or on twitter.

Update

After I posted the article on Reddit, Martijn Hermans provided alternative and perhaps even more elegant solution using skew and a single pseudo element:

The border and the shadow look sharper now.

]]>https://www.silvestar.codes/articles/how-to-create-crooked-shadow/#disqus_thread_bem - WordPress theme with BEM methodologyhttps://www.silvestar.codes/articles/bem-wordpress-theme/
https://www.silvestar.codes/articles/bem-wordpress-theme/Sat, 27 May 2017 05:39:05 GMT
This is a post about building custom WordPress theme with BEM naming methodology.
BEM is great. It is simple, yet powerful. If you’re not familiar with it, I highly recommend reading this article by Harry Roberts.

In short, it is a CSS naming convention methodology. It stands for: block, element, modifier. Blocks are parent components, elements are child components and modifiers are different states of components.

WordPress is great, too. It is an open source blog tool and a publishing platform and content management system.

This is a post about building custom WordPress theme with BEM naming methodology. Check it out!

Starter template

A few years ago, I was looking for a tool that could help me build WordPress themes more easily. I’ve stumbled upon Underscores, a starter theme for WordPress. I was amazed by the simplicity of it.

You enter a template name (and some other options, if you want) and you generate plain theme. It contains the following:

simple templates,

default styling,

translations and

few custom functions.

Swell! From this step, I could easily dive into developing beautiful custom themes.

BEM

Right about that time, I was learning about BEM. I was trying to implement it on the project I was working on. BEM really simplified my final CSS.

From the start, I saw great benefits of BEM:

clean HTML templates and

clean CSS code.

Not only that. If used with SASS or any other preprocessing tool, you could really organize your code. And debugging and fixing style was a piece of cake.

Starter template with BEM methodology

An idea was born—why don’t I build a WordPress starter template with BEM methodology?

Great! I should fork Underscores starter template and start customizing it. Like everything else in life, it was easier said than done.

Problems

I knew it will be a daunting project to deal with. Going through all the templates and SASS files was hard enough, for sure. But adding classes and styling on some parts of WordPress was just impossible.

For example, comments. WordPress provides you with a commenting system out of the box. It is a great feature used by many people out there. But adding custom classes to comment components could not be done easily. As I found out later, it should be done by using callback of wp_list_comments function and writing custom callback function. Here is an example code:

There are still some WordPress parts where I couldn’t find the solution how to add classes to HTML components, like WordPress widgets. If you know how to do this, please let me know.

Fancy stuff

BEM is big deal, but there is more stuff that I’ve implemented in this starter template:

cita-flex,

System fonts,

Gutenberg,

Sass MQ,

CSS locks and

Critical CSS

cita-flex

cita-flex is a flexbox grid system built by me. It is a set of SASS mixins and CSS classes that could help you build grid system. Although it is not perfect, it works in most cases, especially with simple templates, like ones that are used by this starter theme.

System fonts

Using system fonts are awesome and beautiful. And they don’t cost a dime—they are part of an operating system on your device. There is no extra request. Yaay!

Gutenberg

Web typography is hard. That’s why I’m using Gutenberg by Matej Latin, a meaningful web typography starter kit. It comes with a bunch of great stuff, such as modular scale and vertical rhythm. Now typography is not so hard. Double yaay!

Sass MQ

Writing media queries could be a tedious and boring task. And it could lead to many inconsistencies in a code. To avoid all that, I’m using Sass MQ, a Sass mixin with configuration for media queries. Usage is pretty simple, but if you want to make it even simpler, create a snippet for your favorite text editor. This is how it looks in Atom:

CSS locks

When I first read about CSS locks, I wasn’t sure what is going on here. But after reading and reading some more, I realized how powerful this technique is. After playing around for a while with it, I decided that it could be a great addition to this project. Check it out, resize the browser (this website is built using _bem starter theme, too) and see it in action.

Critical CSS

This is a tough one. And frankly, it needs more work.

Critical CSS as a technique is valid and it comes with great intentions. But man, to make it work out of the box was a real pain in the ass, pardon my french. For months I was trying to make it work using different tools. Finally, I end up using gulp-critical-css, a Gulp task that extracts critical CSS into a separate stylesheet. But that also didn’t work at first, so I forked the project, made some tweaks and it’s working now.

Final thoughts

There you have it, a WordPress starter theme. All you need to do is download the project and start developing new shiny WordPress theme.

]]>https://www.silvestar.codes/articles/bem-wordpress-theme/#disqus_threadCSS sidebar togglehttps://www.silvestar.codes/articles/css-sidebar-toggle/
https://www.silvestar.codes/articles/css-sidebar-toggle/Mon, 20 Feb 2017 10:43:48 GMT
CSS sidebar toggle presented in this post is made with CSS only. These days accessibility is pretty important stuff and, because changing the state of the elements cannot be done without JavaScript, I've added a small snippet for this feature.
CSS sidebar toggle presented in this post is made with CSS only. These days accessibility is pretty important stuff and, because changing the state of the elements cannot be done without JavaScript, I’ve added a small snippet for this feature.

Preparation

As I was preparing this post, I’ve created a CSS sidebar toggle demo on Codepen. Suddenly the pen received a large number of visitors. The pen was listed in “Picked Pens” section on Codepen home page as I discovered later. Apparently, it was a great inspiration for the community, ending up with many hearts and many forks. At this point, I knew that I was doing something good. But what I did not expect was a post about this technique.

Jorge C.S. Cardoso published a post based on this demo. It was listed in the Codepen newsletter. Well done, Mr. Cardoso, and thank you for saving me some time to write this post.

In this post, I’ll try to explain CSS sidebar toggle technique in general and focus on accessibility.

Concept

In order to trigger the sidebar overlay, we’ll need the following components:

a label,

a checkbox and

a sidebar.

We’ll use checkbox’s :checked pseudo class to determine whether to show or to hide the sidebar.

Menu icon

For a menu toggle indicator, we could use well know hamburger menu. There are manysimple and awesome ways how we could do it. I’ve decided to use pure CSS solution, well, because this is a pure CSS sidebar toggle solution.

Using CSS variables we could define menu icon size, the number of lines, top offset, left offset and background color.

_Note: I didn’t find an efficient way how to convert a CSS variable into a SASS variable. If you know how to do this, please let me know._

The number of lines could vary. If we want 3 hamburger lines, we should add 3 span elements: <span class="menu-toggler__line"></span>. We should also set CSS variables --toggler-line-number and $total to 3.

I’ve tested this code with 3 and 4 hamburger lines and the code is working pretty good.

For deeper understanding how this hamburger menu is working, check the source code. If you don’t get it, leave a comment below or ask a question on Twitter.

The logic is straightforward:

if not checked, display hamburger icon;

if checked, display close icon.

We are using transitions and transforms to animate the icon.

Sidebar

There are many ways how a sidebar could be displayed. I’ve decided to go with a full-width sidebar containing just a menu list.

Demo

HTML

In order to create CSS sidebar toggle, we should use the following HTML structure:

The idea is to hide a sidebar by translating it out of viewport using translateX property. Then, when menu icon is clicked and :checked stated is active, translate sidebar back to the viewport.

CSS sidebar toggle accessibility

Last time I’ve published a post about pure CSS tabs solution, I’ve received a lot of comments about missing accessibility. As a result, I’ve updated a demo with accessibility and published a new article. This time I’ve decided to implement accessibility right away.

The first step is adding wai-aria attributes. We want our label to act as a button. We should add role="button" attribute. Button role supports 2 states, pressed and expanded. Let’s add those too: aria-pressed="false" and aria-expanded="false". Finally, we should add aria-label="Navigation button" because there is no text element inside the label.

Next, we should add wai-aria attributes on navigation. On nav element we should add these attributes: role="navigation", aria-labelledby="menuTogglerLabel" and aria-hidden="true". The role is navigation, an element is labeled by navigation button and it is hidden by default.

The final element is a menubar with 2 wai-aria attributes: role="menubar" and aria-orientation="vertical". First attribute defines the role this element has and the second attribute describes how the element is oriented—in our case vertically. Every menubar should have menu items. They are usually links and we define them as follows: role="menuitem". Because the navigation is hidden by default, we’re adding tabindex="-1" to skip tabbing through invisible elements.

Finally, we should add JavaScript snippet to change states of this elements:

Conclusion

There are many ways how we could build UI components and there are no right way to do so. Some will disagree that the pure CSS solutions are usable in production environment, but that depends on project type and many other factors. I love to experiment with CSS because it gives me a new opportunity to learn and use the latest techniques out there. I don’t know if you noticed, but beside CSS variables, I’ve used CSS locks and system fonts techniques in this demo. Pretty awesome, right?

And there is accessibility, which is always hard. But hard doesn’t mean we should avoid learning it and using it. I encourage every developer to read this document and then try to implement any part of accessibility in their newest project. Let’s make Internet a better place.

I’m always opened for discussion so leave a comment or ping me on Twitter.

I’ve been searching for a similar solution, including JavaScript libraries, jQuery plugins or Angular directives. I’ve tested various solutions, but nothing worked as expected. So I decided to create brand new directive.

Angular dragtable events

Angular dragtable uses drag events. Drag events are around for a while and have a pretty good support. There are some issues, but nothing that cannot be solved. It should be noted that the drag events do not work on mobile devices. Although I thought about implementing mobile support using touch events or excellent jQuery UI Touch Punch plugin, I give up at the end. This feature is not crucial on mobile devices. Even if I did provide mobile implementation, it could be really hard to use this feature.

The main idea of Angular dragtable directive is to reorder the table columns by dragging table header cell. We have to listen when drag event starts and when it ends. When dragging occurs we should display ghost floating table column as a current position indicator. Angular dragtable actually contains 2 directives, one for draggable elements and one for droppable elements. A full code could be found here.

Dragging

If we want to enable draggable events on header cell, we should add drag-me directive by providing it via attribute name. There are 3 main drag events:

dragstart - fires when a drag event start;

drag - fires during drag event;

dragend - fires when a drag event ends.

On dragstart event, we want to remove every ghost elements that are left behind and create new ghost elements for current column.Actual dragging fires drag event on which we want to move ghost column when we move the mouse. It is always a great idea to set the timeout on events that occur every few hundred milliseconds.And finally, we will use dragend event to remove ghost column.

Dropping

Dropping events allow us to reorder columns by listening when ghost column is over the current column. To enable droppable events on header cell, we should add drop-me directive. For this purpose, we should use dragover event. This event fires when draggable element is over droppable element.

On dragover event, we want to determine a direction of dragging event and append ghost column before or after current column. This means that we don’t need to listen to drop event because we are responding with a live action on dragover event. That is desirable effect as we want to avoid unnecessary events. Again, we should set timeout here, just like we did on drag event.

Usage

To install Angular dragtable, clone the repository from Github or use bower installer: bower install **angular-dragtable**.

To make Angular dragtable more performant, especially when using a large table, we should use data-limit option. When this option is provided, a number of ghost column elements are limited. That means less iteration during drag event.

1

<thdrag-medrop-medata-limit="50"><th>

Conclusion

In this article, I wanted to provide detailed insight of the creation process of this Angular directive.

]]>https://www.silvestar.codes/articles/angular-dragtable/#disqus_threadRecursively includible Angular directivehttps://www.silvestar.codes/articles/recursively-includible-angular-directive/
https://www.silvestar.codes/articles/recursively-includible-angular-directive/Sat, 07 Jan 2017 20:54:57 GMT
I've been working on a complex Angular CRUD-ish project recently and one of the requirements was to create a form based on an MVC model. I've created a directive that could generate a form for every complex model.
I’ve been working on a complex Angular CRUD-ish project recently and one of the requirements was to create a form based on an MVC model. This model was not definite and could vary depending on many parameters in the application. As a result, I’ve created a directive that could generate a form for every complex model. Final code is available on Github repository and it’s called angular-repeater. Demo is available here.

Digression

Sometimes the amount of new frontend technologies feels really overwhelming to me. Everybody is writing about these shinny new frameworks, but there are plenty of applications that are still using “old” technologies (that are not that old). Nobody is writing about them anymore. This is a solution for Angular 1.

Angular Model

Let’s go back to the code. Even better, let’s consider model examples for this task:

These models contain typical types of data:

strings,

integers,

floats,

arrays and

objects.

Recursion problem

Since we need to iterate through these models to display labels and inputs, we should create at least 3 templates for them because they are formatted differently. That seems like a lot of work. Therefore that doesn’t sound like the correct solution. Finally, if we try to iterate a model using ng-repeat directive and display every property as an input, we would repeat the code for every property. As a result we’ll end up with a bloated and very ugly code.

The solution lies in recursion. It is a programming principle when a function calls itself. In our case, we’ll use a recursive-repeater directive that will call itself.

For now, ignore IsObject() and IsNumber() functions.

If we run this code, we’ll get an error. This is because Angular 1 doesn’t support recursively included directives out of the box. But there is a solution.

Recursion helper

I’ve already included this awesome service in recursive-repeater directive, like this:

As you could see, we’re not using link property when defining directive, we are using compile instead.

This directive works only when jsonData is provided via json-data attribute. label attribute is optional and is used to display label for every input. You could see an example in a previous section.

In addition, there are 2 helper functions in a directive:

IsObject() - used to check model property type and

IsNumber() - used to check if model property key is a number.

Important notice

The last one is used to decide whether an object property is a regular array. If so, then the name of the input will end with ‘[]’ characters resulting with correctly submitted form. If not, object is provided and the name of the input will be formatted like this: label[objectKey]. This is very important when submitting data to server, as many programming languages cannot read form data that is not formatted in fore-mentioned fashion.

Final thought

There you have it, recursively includible Angular directive.

This particular directive is used to display label and input for every model property. I’m considering to extend this functionality and allow user to define any other output.

I’m also considering to compare this technique with other popular frameworks, like Vue.js, Angular 2 and React.

Please let me know what do you think, leave a comment bellow or tweet me.

]]>https://www.silvestar.codes/articles/recursively-includible-angular-directive/#disqus_threadHow to automate development with Atomhttps://www.silvestar.codes/articles/how-to-automate-development-with-atom/
https://www.silvestar.codes/articles/how-to-automate-development-with-atom/Wed, 30 Nov 2016 19:33:06 GMT
We should automate our development process whenever possible. But there are so many tools available and new ones are published every week. Even though these tools help us, it could be very time consuming to learn and to handle all of these tools.
We should automate our development process whenever possible. But there are so many tools available and new ones are published every week. Even though these tools help us, it could be very time consuming to learn and to handle all of these tools.

In this post I’ll show you how to automate development process using only Atom packages.

Manual tasks

Let’s say we’re starting a new project. It’s an open source project, a JavaScript plugin, which anyone could contribute. Developers who wants to contribute need source code, beautiful and easy to read. Developers who just want to use the plugin need minified and compressed files.

Beautiful source code

Beautiful source code is a must. Nobody wants to work on a code that is not properly aligned or formatted. But not every developer could produce beautiful code. Most of the times this is not intentional, because when we are in a process of development, we’re not focused on beautiful code, we’re focused on functional code.

To make our source code beautiful, we could go manually through every line and apply proper formatting and alignment. We are not gonna do this, though, because there are online tools which could help us, like Online JavaScript beautifier.

But that doesn’t feel right, too. Who has the time to copy-paste code back and forth.

editorconfig

We should use editorconfig, a set of rules which define how our code should be formatted. These rules should be written in .editorconfig file which should be placed in a root folder of our project. editorconfig provides plugins for almost every popular text editor. That’s awesome, because our plugin will be beautiful no matter who works on it. Yaay!

This won’t work unless we install Atom package for csscomb. There are several packages available, but my favorite is atom-css-comb.

Now our CSS files are beautiful, too.

pretty-json

We should publish our plugin on package manager, like bower or npm. That means we should create and configure JSON files: bower.json and package.json. JSON files should be pretty, too. That’s where pretty-json package steps in.

This very popular plugin formats JSON files on command. As a bonus, this plugin could warn us if our JSON files are not properly formatted.

Minification and uglification

Our source code is beautiful, now’s the time to compress our files. Compressed files are usually used in production. Final user doesn’t need beautiful file, user doesn’t even care about the file, user just want a super fast and fluid experience. Every byte matters, because smaller files equals faster load.

CSS files are minified and JS files are uglified. We don’t want to use online tools, like JavaScript Compression Tool or CSS Minifier. We don’t want to use Atom packages either. The main reason is because we want to make a separate file that is compressed and that couldn’t be achieved easily inside Atom.

What we want is a tool which creates compressed versions of our source code files in a separate files automatically. And for that task we should use tools like Gulp. Gulp is a task runner based on Node.js. Gulp community created and shared quite a large number of plugins. For our tasks to compress our files, let’s use gulp-cssmin and gulp-uglify.

After we installed Gulp and defined Gulp tasks, we should run it from console by typing “gulp” and the name of our task. For example, gulp cssmin. When Gulp finishes with a task, our CSS file should be compressed. The same is with JS files, run gulp uglify inside console.

Although this is very easy, it is also a little bit clumsy, switching from Atom to console all the time. Fortunately, we could run these tasks from Atom using gulp-manager.

gulp-manager

gulp-manager is a package that could run Gulp tasks from Atom. This package doesn’t work without bottom-dock, therefore we should install this package, too. After installation, we should run it through default keybinding for gulp-manager: alt-shift-D.

We should see a new dock with 3 main sections:

task list,

input field and

console output.

If we want to run a task, we could click it from task list. On the right side we could see a console output for these task. It is very useful when debugging invalid or failed task. Alternatively, we could write the name of the task inside input field and then press Enter.

Our files are now compressed and tasks are run from Atom. We don’t need a console anymore.

Conclusion

Most of this tools are available as a standalone solutions. But why use them separately, when we could run them from inside Atom editor.

Once when you get comfortable with this kind of automation, you won’t think of manual tasks again.

Which Atom packages are you using to automate your development process? Do you like ones mentioned in this article?

]]>https://www.silvestar.codes/articles/how-to-automate-development-with-atom/#disqus_threadCSS tabs, part II: Accessibilityhttps://www.silvestar.codes/articles/css-tabs-part-ii-accessibility/
https://www.silvestar.codes/articles/css-tabs-part-ii-accessibility/Tue, 01 Nov 2016 07:39:30 GMT
Recently I've been writing about CSS tabs. Topic was surprisingly popular, gaining several thousand users to my page. What was even more surprising were comments about accessibility. I decided to investigate a little bit more and add accessibility to my solution.
Recently I’ve been writing about CSS tabs. Topic was surprisingly popular, gaining several thousand users to my page.

What was even more surprising were comments about accessibility. Although my initial idea was to present just a CSS technique for tabs, I decided to investigate a little bit more and add accessibility to my solution.

If you have an article that is not in the list, please add it by making a pull request.

Accessibility

Reading all this articles made me realize that accessibility is a major issue nowadays. And accessibility is hard. But that doesn’t mean that we should ignore it. Quite the contrary, we should learn it and apply it.

WAVE

We need to find a tool to test our tabs for accessibility. Web Accessibility Initiative provides us with the list of tools here. I prefer WAVE, web accessibility evaluation tool, because it is available from Firefox Web Developer Toolbar, under section Tools > “Validate Accessibility”.

ngrok

Since I was developing locally, WAVE couldn’t access my localhost. I found solution in ngrok, a tool that makes tunnels for localhost. To create a tunnel for your localhost, download ngrok executable file, place it in project root, open Command Prompt and start it using ngrok http 9000 command. Last number is the port number of your application which is 9000 in my case. Then open 127.0.0.1:4040 page, copy tunnel URL and paste it in WAVE application. Here’s how it looks in action (and yes, that’s Pokemon theme for Firefox):

Contrast

WAVE detected a couple of contrast errors. That’s the easy part. We should use stronger colors for text and lighter colors for background. Visually impaired people shouldn’t have problems with reading tabs labels and content now. And there’s no errors from WAVE, too.

aria attributes

Our tabs are not yet accessible. To make it accessible for every user, device and tool, we should add aria attributes. aria attributes are used to add context for elements. That way tools and devices are able to read the content and reproduce it in a way that every user could understand it.

Screen readers

We should test our tabs in some of the assistive technology tools, because results could help us start adding accessibility. I decided to use Jaws and NVDA, both available for free on Windows platform. First thing I noticed, after running these tools, was that HTML structure is not suitable for accessibility. We need to add div wrappers for tab labels and tab content.

aria roles

Every role could have required and optional attributes. Required attributes are easy, because we know we should add it to an element. Optional attributes are problem: how can we know which ones work and which ones don’t? Ideally, every attribute should work. But as I discovered, they don’t.

Trial and error

Because there are so many tools and devices and documentation is overwhelming, I decided to use trial and error method this time. After few hours, I came up with final solution. You could see it in this pen:

Radio buttons

In previous article, radio inputs were hidden. I decided to use them as a part of design for tabs. Most users should be familiar with radio buttons, as they are widely used on the web.

To position every radio input, we could use absolute position with top and left offsets. Tricky part was to make it responsive. nth-of-type selector is used to adjust position for every radio button.

Interaction

To add some interaction, we should add a little bit of JavaScript. It is mostly used for changing states, like aria-activedescendant, aria-selected and aria-expanded. HTML and CSS are still used for handling tabs.

Navigation

Now that radio buttons are visible, user could navigate through tab labels more intuitively using left and right arrow keys.

Also, we should add trigger to help users jump to content from tabs. If a user press “Enter” while on the tab label, matching tab content will be focused.

Final thought

Accessibility is hard to implement, but non accessible content is even harder to interpret for impaired users. We should try our best and make our content accessible.

But on the other hand, if you’re making a solution for targeted audience and there are no special request for accessibility, aria attributes may not be necessary. They are hard to implement and very time consuming.

]]>https://www.silvestar.codes/articles/css-tabs-part-ii-accessibility/#disqus_threadHow to handle keybindings in Atomhttps://www.silvestar.codes/articles/how-to-handle-keybindings-in-atom/
https://www.silvestar.codes/articles/how-to-handle-keybindings-in-atom/Sat, 15 Oct 2016 14:41:54 GMT
In recent articles about Atom, I've talked about different packages that could help us make our daily jobs easier. Many of those packages have different keybindings. But what happens when a keybinding is already used by some other package?
In recent articles about Atom, I’ve talked about different packages that could help us make our daily jobs easier. Many of those packages have different keybindings. But what happens when a keybinding is already used by some other package?

In this tutorial I’ll show you how you could fix this.

Windows based shortcuts will be used but the same analogy could be applied for other operating systems.

What are keybindings?

Keybindings, or keyboard shortcuts, are combinations of different keys which, when pressed together, invoke certain action. For example, if you press ctrl-shift-p in Atom, command palette will show up.

How to detect keybindings?

In this tutorial, we’ll try to remove and customize **ctrl-up** keybinding for moving a line up and then set this keybinding to increment number by 1.

To increment number by 1, we should install emmet plugin, one of the best plugins for fuzzy coding. Once you’ve installed emmet package, open any file containing numbers. Move cursor to any number and press ctrl-up. According to emmet, this command should increment a number by 1, but sadly it’s not. Instead, current line is moved up.

We need to fix this. First step is to find out which command is currently used. Open the Keybindings page in settings to see the list of all keybindings. You could do this by pressing ctrl-, and then click on “Keybindings” or open command palette, type in “keybindings” and select “Settings View: Show keybindings”.

Go on and search ctrl-up to see all related commands.

Let say we couldn’t determine which command should we remove or update. What to do then?

In this case you should use keybinding-resolver, a package which shows what command resolves to. This package is a part of Atom core, no additional installation is required. To see it in action, open any file, open command palette, search “keybinding resolver” and select “Key Binding Resolver: Toggle”. Keybinding for keybinding-resolver is ctrl-..

Now try to press ctrl-up and see what happens. keybinding-resolver shows us which command is used in what order. In our case, we could see that editor:move-line-up command is the first in line. We’ll should remove it.

How to remove keybindings?

When multiple commands for the same keybinding exist, we need to remove ones that we don’t need somehow. First we should copy keybinding that we don’t need by clicking on the copy icon at left. Then we need to open the custom keymap file where we’ll add a command for removing unnecessary keybinding. Call command palette ctrl-shift-p, type “keymap” and select “Application: Open Your Keymap” or open file manually: ~/.atom/keymap.cson. Here you could see all your custom keybindings, if any exist.

Paste the copied keybinding command. You should see the command selector and keybinding command.

To remove the keybinding, use “unset!” command.

How to use custom keybindings?

So far we’ve managed to remove keybinding. To replace it, we need to copy the emmet command in Keybindings settings. Copy that command and replace current command, like this:

]]>https://www.silvestar.codes/articles/how-to-handle-keybindings-in-atom/#disqus_threadHow to make tabs using only CSShttps://www.silvestar.codes/articles/how-to-make-tabs-using-only-css/
https://www.silvestar.codes/articles/how-to-make-tabs-using-only-css/Fri, 07 Oct 2016 17:01:40 GMT
I know there are more than a few articles about this topic. And there are 2 basic approaches: using target pseudo selector and using list with checked pseudo selector.
I know there are more than a few articles about this topic. And there are 2 basic approaches: using :target pseudo selector and using list with :checked pseudo selector.

I prefer the second approach, but without list or nested div structure.

To make sure every input type="radio" element is a part of the same block, we’ll add name attribute with same value on it like this:

1

`<inputclass="tabs__radio"name="myTabs" />`

Labels are generally used to define an input element. If for attribute is provided with matching id of an input, they will be bound together. If you click on a label that is related to input type="radio", checked state of an element will be toggled. This will be used as a trigger for changing tabs.

With that clarified, we’ll add unique id attributes on every input type="radio" and matching for attributes to every label like this:

Finally, we’ll add value attribute for every input type="radio" element and checked attribute on an element which should be active.

CSS code

To create styling for tabs, SCSS and cita-flex will be used. This is the final code:

First we will import cita-flex mixins in our file. It is a small library which could help you create layouts using flexbox built by me. cita-flex is available through bower and you could install it using command bower install cita-flex.

After that we should define default variables which will help us write more consistent code. There are 6 variables:

$size - default size for padding,

$background - default background color for tabs,

$background--active - default background color for active tab,

$color - text color for tabs,

$color--disabled - text color for disabled tabs and

$breakpoint - width which will define our tabs layout.

I really like BEM naming convention and I use it for defining CSS variables, too.

Wrapper element should be displayed as a wrapped flex.

input type="radio" elements should be hidden. Here we hide them using position: absolute technique and push the elements outside of the viewport.

Tabs, or label elements in this case, are flex items. They are aligned in a row and have fluid width controlled by flex-basis.

Tab’s content is an element which takes 100% of the wrapper’s width. This is achieved by setting flex-basis to 100%. By default, content is hidden unless matching input type="radio" is checked.

Now for the fun part, using CSS to control the tabs. We will take advantage of 3 powerful CSS selectors:

nth-of-type - selects the nth child of the same elements,

:checked - check if input is checked and

~ - selects siblings selector.

If the first child of a input type="radio" is checked, the first tab should be active and the content of the first tab should be displayed.

Easy, we’ll use .input__radio:nth-of-type(1) to select the first input type="radio". Then we’ll check if input is checked: .input__radio:nth-of-type(1):checked and find the first tab using siblings selector: .input__radio:nth-of-type(1):checked ~ .tabs__label:nth-of-type(1). Finally, we’ll find the content of the first tab: .input__radio:nth-of-type(1):checked ~ .tabs__content:nth-of-type(1).

Now that we know how to do this for first tab, we could use @for loop and repeat this for every tab. And that’s it!

Bonus: disabled state

I’ve had situations where tabs should be disabled. It is legit situation and for this purpose I’ve added disabled state of tab.

We’ll use :disabled pseudo selector and hide-if-disabled class for elements that should be hidden.

The principle is the the same: we’ll find disabled input element and matching tab and content: .tab__radio:nth-of-type(1):disabled ~ .hide-if-disabled:nth-of-type(1).

Now we could repeat this for every tab using @for loop and we’re finished.

Below you could see the full solution with disabled tabs 2 and 10.

Final thought

Full demo is available on Github and via bower: bower install csstabs.

Do you find this solution usable, because I really like how we could do even more complex things with CSS only nowdays?

Make sure you follow me on Twitter and Medium, more posts are coming soon.

]]>https://www.silvestar.codes/articles/how-to-make-tabs-using-only-css/#disqus_threadHow to lint inside Atomhttps://www.silvestar.codes/articles/how-to-lint-inside-atom/
https://www.silvestar.codes/articles/how-to-lint-inside-atom/Sun, 02 Oct 2016 05:14:39 GMT
Lint, linter, linting? What is it and why you should use it? I'll try to show you how Atom linter packages could save you a lot of development time.
Lint, linter, linting? What is it and why you should use it? I’ll try to show you how Atom linter packages could save you a lot of development time.

What is linter?

Linter is a program which analyses your code during coding process.

Imagine yourself working on a new JavaScript widget. You write a hundreds of lines of code, but in a hurry, you forget to add a couple of semicolons here and there. When you open the widget in a browser to test it, it’s not working. Open developer tools, open console tab, inspect errors, go back to Atom, fix the errors, go back to browser again and see if it runs now. Very annoying and time consuming process.

That’s where linter could help you save precious time.

How it works?

linter works while you’re typing and checks if there are any syntax errors. Let’s look at example from previous section. If you forget to put semicolon at the end of a line, linter will immediately show you the error. It will save you a lot of time. Not only that, it will force you to write code more carefully.

How to install it?

You could use linter inside Atom. Go ahead and install it from Atom package manager. After that, open linter package settings. There are plenty of options. I encourage you to take your time to understand each one them.

The most important options are:

Lint As You Type - turn on

Highlight Error Lines in Gutter - turn on

Show Inline Error Tooltips - turn on

Display Linter Info in the Status Bar - turn on

Display Linter Status Info in Status Bar - turn on

This settings should turn on linter errors in Atom, so you could fix the problems more easily.

You can see full configuration of my linter package here:

Basic linter is installed and configured, now we need actual linter plugins for specific programming languages. There are many plugins available, full list is available here. Because I’m a frontend developer, I’ll show you how to install linters for CSS and JavaScript.

JavaScript linter

One of the most popular JavaScript linters for Atom is linter-jshint. It is an interface for JSHint, a tool that helps to detect errors and potential problems in your JavaScript code. Installation could be done via Atom package manager. There are few configuration options. The most important is to provide of executable jshint node script. Here are my settings:

CSS linter

linter-stylelint is an interface for stylelint, CSS linter that helps you enforce consistent conventions and avoid errors in your stylesheets. It is available on Atom package manager and it has only 3 configuration options. Here you can see my linter-stylelint configuration:

How to use it?

To see linter-jshint in action, open any JavaScript file and see if any errors exists. You could see errors in different places, depending on your main linter package configuration.

You could see CSS lint errors by opening and CSS file.

In the examples above you could see that errors are displayed on 4 different places:

in a status bar,

in a gutter,

as a status info and

in a minimap.

This depends on your main linter settings, but you should see at least on of them.

To see errors in a minimap, you should install minimap-linter package. You could learn more about minimap packages here.

You could use more advanced configuration options for each linters which are out of scope for this article. I encourage you to read full documentation for both stylelint and jshint, as they could be really useful for you.

Final thought

Linters are very useful and simple solution for basic syntax checking. Linters will not only save you time, but will also make you write better code.

]]>https://www.silvestar.codes/articles/how-to-lint-inside-atom/#disqus_threadPerfect local server with Atomhttps://www.silvestar.codes/articles/perfect-local-server-with-atom/
https://www.silvestar.codes/articles/perfect-local-server-with-atom/Mon, 05 Sep 2016 15:11:14 GMT
Even now, that I'm experienced developer, I don't need complicated solutions for more than half of my tasks, so I decided to find simpler solution for development inside my Atom.
I’ve been using all kind of local server solutions back in a day, from WampServer to Vagrant. I noticed that I had to spend large amount of time on learning and configuration. That was, not only time consuming, but also very frustrating, especially when you’re a newby and you don’t understand half of the instructions and problems.

Even now, that I’m experienced developer, I don’t need complicated solutions for more than half of my tasks, so I decided to find simpler solution for development inside my Atom.

Bitnami WAMP Stack

First things first—you’ll need an actual local server. I’ve tried more than few solutions and finally decided to go with Bitnami WAMP Stack for Windows. Installation is pretty straightforward, but let’s go through step by step.

During installation setup, select if you want to install any PHP framework. I didn’t, because I don’t actually need any.

Then select where you want to install Bitnami WAMP Stack. After that Setup will create root user for database. Enter password and remember it, maybe you’ll need it in the future for some more complicated development.

Next steps are to select Apache web server port, SSL port and MySQL Server port. Port 80 is the standard Apache web server port, but it may not be available on you machine. In that case, select another port or make sure port 80 is not in use. Port 443 is the standard SSL port, try to set it up. If in use, use another one. Do the same with MySQL Server port, the standard port is 3306. Remember this settings, maybe you’ll need it some day.

If any port is available, Setup will automatically assign standard port and skip steps.

That’s it, proceed with a installation, wait for process to finish and violà—you got yourself a local web server.

php-server for Atom

If you managed to install Bitnami WAMP Stack, you could use it as your development environment. You could even install WordPress or any other module for Bitnami WAMP Stack for even quicker and simpler development environment. With a little knowledge of hosting, you could event add a local domains. I’ll write about this topic in the future, so stay tuned.

But often I find myself in a situation where I don’t need the whole environment, I just need to develop and test a single feature. This is where php-server for Atom comes in.

php-server allows you to run PHP server from any folder or file. You don’t have to be a PHP developer to use it, because this package allows you to see static HTML pages, too. And this is where php-server has saved me a great amount of time.

Imagine you need to create a form or a jQuery plugin. It is part of some complicated project written in C# or Ruby. There is no need run the project for this job, all you need is a page, a static demo page where you could fake real project page and quickly complete a task. Easy! Create new folder, create index.html or index.php file, add some markup and styling or a script and start developing.

php-server is available on Atom package manager. After installation, you’ll have to configure package. The most important settings are Path to PHP executable and Default port to bind to. This is why we had to install Bitnami WAMP Stack (or any other local server). In the installation folder of Bitnami WAMP Stack, find php folder. You should find executable PHP file there, php.exe. This is your path. Default port cannot be the same as Bitnami’s, so use another one, like 9000. There are other advanced options, but they are out of scope of this article.

There are no shortcuts for this package, you’ll have to call commands from command palette. The most common commands are Php server: Start and Php server: stop. For all available commands, please refer to php-server package page.

When you start php-server, your browser will start automatically and try to open index.php or index.html file. If necessary, you could use different filename, but then you have to add that file to the URL. For example, if you create file with named form.php, then your URL should look like this: http://localhost:9000/form.php.

When you run your php-server for the first time, Firewall window could pop out asking you to allow access to this feature. You should allow it. This depends of your system settings.

That’s it! If you’re more familiar with PHP, you could even create more advanced architecture for your development.

Pro tip: by default, PHP opcache is turned on. This means that you’ll have to wait for new changes in PHP file to propagate every time. To turn off this feature, go to php folder in your Bitnami installation folder and open file named php.ini. Search for opcache.enable and set it to 0. Now every change in PHP file should be immediately propagated to your browser.

livereload

So far we managed to set up our local PHP server. Now let’s get fancy.

Back in the day every developer dreamed about live reloading in browser on file change in editor. Today there are more than few solutions for that. Since we’re using Atom, let’s make it work in Atom.

Go ahead and install livereload package from Atom package manager. After installation, you should configure package. There nothing much here, this is how my configuration looks like:

To start livereload server, you could use command palette or shortcut ctrl + shift + R.

Nothing happens in your browser yet, because we need to install browser extension as well. Go to the LiveReload extension’s website and install it. It works both on Chrome and Firefox.

I prefer Atom solution for LiveReload because native solution didn’t work well on my machine. Plus, I could use it directly from Atom and that is pretty awesome, if you ask me.

Assuming that you’ve started livereload server in Atom, now you could turn on your browser extension. Go ahead and save changes in CSS or JavaScript or PHP file and enjoy the magic.

Pro tip: if you’re using Gulp or Grunt or any other task runner, don’t worry, it will work. More about that in the following articles.

Final thought

There you have it—a perfect local server. It may not be adequate for complicated architectures, but it’s perfect for quick and simple development. All you need to do is turn on your Atom, start php-server and livereload and start digging in. Isn’t that just prefect?

]]>https://www.silvestar.codes/articles/perfect-local-server-with-atom/#disqus_threadGithub Atom minimap packageshttps://www.silvestar.codes/articles/github-atom-minimap-packages/
https://www.silvestar.codes/articles/github-atom-minimap-packages/Tue, 30 Aug 2016 16:00:19 GMT
One of the most popular features for Atom out there is a minimap. It's a code preview in a small sidebar window.
One of the most popular features for Atom out there is a minimap. It’s a code preview in a small sidebar window.

minimap

minimap is a basic package for code preview and it’s available on Atom’s package manager. Settings let’s you configure the minimap and here’s my settings:

minimap-autohide automatically hides the minimap when not in focus and shows the minimap when a file is scrolled. It provides less distraction for a coder.

minimap-cursorline displays Atom cursorline in the minimap. It is very useful when you need to scan your current position in the file quickly.

minimap-selection and minimap-highlight-selected are very similar minimap extensions. minimap-selection displays buffer’s selection on the minimap. minimap-highlight-selected is a minimap binding for the highlight-selected package. What it does is display highlighted sections of text in the minimap.

There’s even a package that highlights search result occurrences in the minimap. It is called minimap-find-and-replace and could be very useful when finding in the text.

In the previous post, my favorite Git packages for Atom where presented. Beside community packages, there are packages that are part of the Atom’s core. One of them is git-diff. git-diff allows user to see Git changes directly in the file. minimap binding for that package is called minimap-git-diff. It shows git-diff status in the minimap. It could be pretty useful when searching for changes in a large file.

minimap-linter displays linter errors on the minimap. Linters are separate topic and I will be writing about them in the future articles.

minimap-pigments is Atom plugin to display pigments colors in the minimap. In the earlier releases, this package caused my Atom to crash so I had to disable it. Use carefully.

This is my minimap in action:

Final thoughts

Although not crucial, minimap packages could be great benefit for developer as they allow quick scan of the file. It sure did help me a lot. How about you?

]]>https://www.silvestar.codes/articles/github-atom-minimap-packages/#disqus_threadGithub Atom Git packageshttps://www.silvestar.codes/articles/github-atom-git-packages/
https://www.silvestar.codes/articles/github-atom-git-packages/Mon, 22 Aug 2016 18:21:37 GMT
Developers often rely on a version control system and one of the most popular is Git.
Developers often rely on a version control system and one of the most popular is Git.

Atom community provides us with plenty of Git packages and these are my favorites:

To configure git-plus package, Git path should be provided. Make sure to enter the path with actual Git file executable, like this C:Program FilesGitbingit.exe. You could configure other options as per your preferences.

Final thought

]]>https://www.silvestar.codes/articles/github-atom-git-packages/#disqus_threadFirst steps with Github Atomhttps://www.silvestar.codes/articles/github-atom-first-steps/
https://www.silvestar.codes/articles/github-atom-first-steps/Fri, 19 Aug 2016 14:14:04 GMT
This is the first article in a series about my perfect Atom setup. First topic is installation and initial setup.
This is the first article in a series about my perfect Atom setup. First topic is installation and initial setup.

Github Atom installation

Github Atom is my first choice text editor. I know that there are faster and more stable text editor out there, but I prefer open source solutions.

To install Github Atom, go to https://atom.io/ and download the installer. If you’re like me and you prefer latest features, you could use beta version by visiting https://atom.io/beta.

First package

After you’ve installed Atom, you should install your first package—sync-settings.

sync-settings is used to synchronize almost all of your editor’s settings. It is a very good starting point when you’re reinstalling Atom or installing Atom on a different device. It saved me plenty of time back in the day.

sync-settings installation

First, open Atom settings. I’m a Windows user and default shortcut for Windows is ctrl-,. Go to Install, make sure you’re on Packages tab, type in “sync-settings” and press Enter.

To install sync-settings, find package in a list (should be first on the list) and then click Install button.

sync-settings configuration

To configure sync-settings, you should have Github account. If you don’t have one already, create a new one, it’s free.

After you’ve installed sync-settings package, click on Settings. In order to make your first backup, you should fill Personal Access Token and Gist Id. If you’re not familiar with this terms, please refer to sync-settings Setup section.