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.
Innerworks is coming soon...
This blog was originally published on our previous Cogworks blog page. The Cogworks Blog is in the process of evolving into Innerworks, our new community-driven tech blog. With Innerworks, we aim to provide a space for collaboration, knowledge-sharing, and connection within the wider tech community. Watch this space for Innerworks updates, but don't worry - you'll still be able to access content from the original Cogworks Blog if you want.
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 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 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 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
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!
5. Makalu
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!
7. CrossBrowserTesting
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.