Blog

A Front-End Developer's Favorite Tools

Every career discipline has their own set of tools that they consider indispensable assets for their work whether it’s a carpenter, teacher, surgeon, or any other field. A developer is no different. As a front-end developer, I rely on my own set of tools that help me work efficiently and effectively. These tools range from compilers, to plugins, to code editors, to task runners, and small useful software.

Grunt

When it comes to running multiple assignments and procedures, Grunt is looked at as the leader in the field. We primarily use Grunt to combine all of our developer-friendly files into much fewer production ready files. This guarantees that the user will receive the smallest file possible thus saving valuable download time and greatly speeding up the websites they visit. 

By leveraging all that Grunt can do, we are able to organize our files and code essentially anyway we desire. We do not have to worry about harming the final product, and we can still set apart our code in a templated format, allowing for faster builds and less maintenance. With grunt everything is automated and our workflow is streamlined; whether it’s joining files, condensing code, or processing our SASS into CSS.

SASS
SASS allows developers to be more expressive and more powerful than vanilla CSS, whether they decide to use all of SASS’ features or just a select few. One of the more simple yet powerful features in SASS is variables, where information can be stored in one spot and echoed throughout several documents. These come in handy for items like colors, where a value can be stored and changed in one spot without worrying about remembering a hex code or running find and replace commands throughout an entire project. When more advanced functions are needed, mixins can be utilized to group several CSS declarations together, providing convenient and reusable chunks of code.

 

In conjunction with Grunt, SASS files are able to be organized and included without any penalty on the front-end. It is important to use SASS appropriately, because projects can become more complicated and less performant when not used correctly. Though there are many features to SASS, these areas are some of the more prominently used and most effective ways to enhance CSS. 

Sublime Text 
Although a task runner and a powerful scripting language are great assets for building web solutions, few things are as helpful as a good code editor. Sublime Text is my editor of choice for several reasons. For one, it is extremely fast and simple right out of the box. Not having to wait for processes to be completed or simply for the program to open is a huge plus. Sublime Text is also very customizable with a large community backing it up. If I want a certain feature added to Sublime, chances are someone has developed just that. Things are even made easier with the Package Manager which allows quick installs through a couple of keystrokes.

One of the most useful features is the ability to have multiple cursors. I can select a name that appears on a page several times and start typing with the cursor staying at each point and following suit with every keystroke. This is incredibly useful for tasks like wrapping a group of anchor tags in paragraph elements or by editing several list items at once. 

There are several simple yet powerful techniques and shortcuts that Sublime lets the user take advantage of, we only have to do a little research or testing for ourselves.

This is not a completely comprehensive list of the tools I use, but each one of these makes my life simpler and my projects better.

Enjoy what you’re reading? Sign up for the AYC Media newsletter and receive updates on our posts.