Tools of the trade: 10 front end development tools I can’t live without

As a front end developer, creating the pixel perfect designs, maintaining codebase standards and ensuring they work across devices are only a few of the tasks I’m responsible for on a day to day basis.

One thing that helps me save time and focus on the tasks I enjoy is my developer tool set. Choosing the right tools has made my job much easier by making my workflow more efficient. I find myself doing more of the tasks I enjoy because I’m more organized in my workflow.

In this article I’d like to share the best front end development tools that I use on a day to day basis. I’ll start with my favourite design tools, then which tools I prefer to use for automation, and finally how I monitor my code’s performance.

The best front end development tools

Sketch

Pixel perfection is always desired when translating a design into code but being able to produce efficiently and meet those deadlines is a constant issue.

Spending unnecessary time figuring out font-sizes or font-weights, like wondering if it’s 20 or 24 pixel padding, can quickly add up when creating a page. Sketch is a wonderful tool in this regard when it comes to web development. You can easily get the dimensions of elements, relative spacing between them and much more.

In addition, if you are sick or having to remember those pesky numbers you can install the Sketch Measure plugin to have the numbers displayed on the artboard as a new layer.

Can I use

With most modern browsers updating every six weeks it can be tricky to know which feature to  use in a project. Just using a feature without knowing how it will affect your lower end users is an easy way to destroy user experience, making them not return to your site.

Can I use, whilst perhaps not strictly a tool, is an invaluable website which tracks the browser support for every front end feature you would like to use.

Displaying usage stats for each version, this website enables you to be more confident with your use of that latest feature.

SASS

Featuring key -> value pairs, writing CSS is easy. Writing maintainable CSS that won’t make you want to develop a time machine to blame your past self is the trick.

SASS is an extension language for CSS which brings a number of features allowing you to write more maintainable code. The import feature allows you to separate your CSS into smaller, more manageable files without the HTTP request overhead. Mixins allow you to reuse common code. Operators enabling you to be more expressive with your values and much more.

AutoPrefixer

Browsers being the large beasts that they are, generally support CSS features before long before supporting the standard syntax. While this is great for browsers (enabling them to test features thoroughly before releasing them into the wild) it can easily make our code very bloated, very quickly.

AutoPrefixer is a tool which automatically adds vendor prefixes and fallbacks to your code based on set conditions. For example, if you want to use flexbox but require IE 10 support then in the configuration you can set IE >= 10 and then anytime it spot’s a use of display:flex it will add in the vendor prefix for that browser.

Real User Monitoring

When working with a large website it’s easy for the best practices to slip through the cracks since you’re not the only developer on the team and the codebase has been iterated on a number of times prior.

End users don’t know this and they still want a fast browsing experience. But where do you start? Which best practices should you follow? Real User Monitoring  is a tool designed specifically to help front end developers by providing actionable tasks into UX improvement on large projects.

TinyPNG and SVGO

Ensuring end users are able to view our website as quickly as possible is the foundation for having good user experience, especially since many users won’t come back if your website takes longer than 3 seconds to load. (Source)

The first thing you should do is ensure your images are as compressed as they can be. Photoshop, Sketch and the like are great tools for creating designs. Here’s where TinyPNG and SVGO come in handy.

TinyPNG is a tool which features smart lossy compression techniques to reduce the file size of PNG or JPG graphics beyond what design tools commonly export.

SVGO is a similar tool which removes redundant and useless information from SVG files to further reduce the size of these files. This is accomplished by removing metadata, comments, hidden elements and other things which can be safely removed without affecting the SVG rendering result.

Grunt

After reading about all of the above tools it can quickly become overwhelming thinking about integrating them into your project. Remembering to launch X tool to compile your SASS, running it through a lint tool, compressing the code, plus more are common, repetitive steps required before you can even test.

Grunt is task runner which allows you to configure and automate repetitive tasks. This saves so much time by removing those mundane tasks.

Grunt Contrib Watch

Jumping into the command line each time you want to compile your SASS, JavaScript or execute a particular task isn’t much of a chore initially. However, often when working on something you will be jumping back and forward between the code and the implementation. Removing the additional step of having to execute a command can help make the process faster.

Grunt Contrib Watch allows you to execute predefined tasks whenever a file matching a defined file pattern has been added, modified or deleted. This means you can update your SASS files, and the moment you hit that CTRL + S shortcut on the keyboard your CSS will start compiling!

You won’t even have to execute the task.

Git Extensions

Utilizing version control is a must have for projects of any size now. They are easy to set up and will save you headaches when you and a fellow developer finds out you both have been working on the same file.

While learning the command line is still recommended since at the very least you will gain an understand of what happens under the hood, using one for day to day development can take valuable time. Especially if you make an accidental commit to the wrong branch.

Enter Git Extensions, which is a graphical user interface for Git.

Not only does it allow you to control Git without using the CLI,  but you can view the commit history in a graph structure, view the history of files, use a rebase workflow, and much more.

Chrome Developer Tools

You are going to run into issues when developing a new feature, adding a new page or fixing an existing issue (whether that is a variable not being defined in a JavaScript file, a stylesheet that isn’t loading, or that site looks broken at a breakpoint.) The Chrome Developer Tools are a set of debugging tools built into Chrome. These tools allow you to do a wide variety of development testing in your browser, which has saved me a ton of development time.

I use the ‘Device mode’ to test how responsive the website I’m building will be. ‘Sources panel’ is used to debug your JavaScript using breakpoints. ‘Timeline’ helps you identify run-time performance issues.

Final thoughts on a great developer workflow

I’ve found in my day to day life as a front end developer, utilizing the best front end development tools to craft a more efficient workflow can save so much valuable time. The tools above are a few of the ones I use on a day to day basis which makes my job much easier so I can focus more on the tasks I enjoy.