7 Front-End Tools For Productivity

When you’re repeating similar front-end tasks daily, let tools be your friend. Here are seven essential front-end development tools that are time-saving and a pleasure to use. Cogworks have even created one from scratch.

I’d like to present to you a couple of front-end tools that we use daily in our work. 

You may know some of them, but hopefully, you can find something new. These seven tools have gone a long way to help our productivity as front-end developers at Cogworks.

1. ESLint

ESLint@2x.pngESLint is the first “must-have” on my list. I’m a big fan of all Linters (like Linters for JavaScript, CSS or even for Git Commits).

ESLint is a Linter for JavaScript. It analyzes your code and warns you of potential errors. Many of them are automatically fixed and can be built-in in your IDE or be a part of the integration pipeline. You can configure ESLint with a specific set of rules that are custom or predefined. The most popular set of rules is from Airbnb and StandardJS

I recommend you to configure your IDE to fix errors on file save automatically. It saves a lot of time during development and also during code reviews.

 

2. Stylelint

Stylelint@2x.pngStylelint is similar to ESLint, but it’s for CSS. It understands syntaxes like SCSS, Sass, Less, etc.

Like ESLint, it helps you avoid errors and enforce conventions in your code.

 

3. Prettier

Prettier@2x.pngPrettier is another excellent tool that helps us to save a lot of time. It works like a charm with ESLint and Stylint. It’s a code formatter that works with JavaScript, CSS, but also with HTML, Markdown and many others. Prettier is a great tool as it helps to keep the same code conventions across all projects and teams, saving a lot of time during Code Reviews.

 

4. PixelSnap 2

pixel Snap 2@2x.pngI love PixelSnap 2! The tool allows you to measure everything (such as distance and dimensions) of any element on your screen. In general, I use it to measure spacing and sizes on the page that I’m currently developing in my browser. No more rulers and other awful browser extensions. I highly recommend PixelSnap2!

 

5. Makalu 

Makalu@2x.pngBrowsers dedicated to developers are great when you work a lot with styling and differing screen sizes. The key feature of this type of tool is to show multiple screen sizes in the same window. It might not sound like rocket science, but it works and saves valuable minutes that add up when switching screen sizes within a typical browser.

We have even created our own Cogworks browser dedicated solely for developers, Makalu. Our development team have been working away on this during our fortnightly Freedom Fridays; Cogworks' day for self-development and work on internal tasks that help to improve our processes.

 

If you are interested to learn more about Cogworks Makalu, keep your eyes peeled on our social channels for more information on releases. There are, of course, a couple of other popular browsers dedicated to developers on the market, like f.e. Polypane or Sizzy which you can check out!

 


6. Bracket Pair Colorizer 2

Bracket Pair 2@2x.pngBracket Pair Colorizer 2 is an extension for VS Code. It’s simple but beneficial. As the name suggests, it colours brackets in your code and nests the code making it much clearer and easy to read! 

 

7. CrossBrowserTesting

Crossbrowser testing@2x.pngCrossBrowserTesting is another useful application that we use all the time as developers and in our Cogworks QA team.

Thanks to this one we are able to test websites on various desktop and mobile browsers. The big advantage is that you can use dev tools to inspect the code of the page directly on the device. It helps a lot when you have to fix an issue on an old version of mobile Safari (or something similar).

Another similar tool is Browserstack (in my opinion this is actually a little faster and better as debugging code). 


That’s a wrap.

We hope you find these tools as useful as we do. 

The extra few minutes you can save across areas of front-end development can bring you a little more time for those miscellaneous tasks you might like to get to, like blog writing, research or just having an extra coffee!

Why not give these time-saving tools a go? Feel free to reach out to us on socials with your reviews or own recommendations.

  • Image for Generate Free SSL Certificates and Bind It to Azure Webapp With Devops Build

    Generate Free SSL Certificates and Bind It to Azure Webapp With Devops

  • Image for Do one thing. Managing your mind in the workplace. Strategy

    Do one thing. Managing your mind in the workplace.

  • Image for Umbraco v8: How to Pick a Block Style Editor Build

    Umbraco v8: How to Pick a Block Style Editor

  • Image for How to Simplify Azure Search Implementations Build

    How to Simplify Azure Search Implementations

Ready to collaborate ?

Get in touch to see how we can transform your digital presence.

Send us a message