InnerWorks Logo
Return to main siteReturn to main site
Blogs

7 Front-End Tools For Productivity

7 Front-End Tools For Productivity

Wojciech Krzysztofik

30 Jun 2020 • 4 min read

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.

Hello, youve stumbled into the old Cogblog archives

We've switched our blogging focus to our new Innerworks content, where tech community members can share inspiring stories, content, and top tips. Because of this, old Cogworks blogs will soon be deleted from the site, so enjoy it while you can. A few of these might refer to images in the text, but those have been deleted already sorry. Some of these subjects will return, some aren't relevant anymore, and some just don't fit the unbiased community initiative of Innerworks.

If you'd like to take on this subject yourself please submit a new blog!

Farewell Cogworks Blog 💚

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.

Community tech aid

Innerworks and Cogworks are proud to partner with Community TechAid who aim to enable sustainable access to technology and skills needed to ensure digital inclusion for all. Any support you can give is hugely appreciated.