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.
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.
Stylelint 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.
4. PixelSnap 2
I 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!
Browsers 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 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!
CrossBrowserTesting 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.