loading...

Tools I use for front-end dev

pustelto profile image Tomas Pustelnik Updated on ・7 min read

This article was first published at my personal blog.

Front-end development is quite a complex discipline and you will hardly ever need only a browser and code editor (at least for bigger projects). I have decided to post a list of the tools I use for development. I hope this will help others to find some great tools they can use in their workflow.

Basic stuff

Those are the tools I use daily and I couldn't literary produce much of my work without them.

  • VS Code - You need to write your code somewhere. My editor of choice is VS Code from Microsoft. It's free, lightweight (compared to IDEs like WebStorm), has a ton of functionality out of the box and extensions which can give it even more powers.
  • Browsers - I use Firefox as my default browser, sometimes switching to Chrome for development. But I have installed other browsers for testing as well.
  • DevDocs - Web app which aggregates documentation from different projects. It can also work in offline mode. This my go-to page when I need to look for some documentation. Using it mainly for JS and DOM/Browser related stuff. As I really couldn't find anything similar (easy to search and detailed). You should check it out.
  • Google - Yes, I google things very often. Bugs, how to do stuff (sometimes pretty basic) or examples and documentations for packages and libraries (if they aren't on DevDocs).
  • MDN - Greate resource for any web developer. Part of this site can be accessed via DevDocs mentioned earlier, but some pages are only on MDN. I use it mainly when I need to check some a11y related stuff as they have there some good articles about the topic.
  • StackOverflow - Usually get there from Google. If you have some problem, you can probably find a solution there.
  • Github - When I have some issues with a package or just need to know more about it I dig into the source code or issues. You can find here answers to your problems almost as often as on StackOverflow. I'm personally more successful with Github issues if I have problems related to one package (unless it's React or something similar hugely popular). And of course, I use it for version control as well.

CSS

  • CSS-Tricks - Aside from their blog where you can find a ton of interesting articles and tips there is also a guide section with in-depth articles about certain HTML/CSS and JS concepts. I usually go there if I need to refresh my Grid knowledge. But other guides are great as well, so definitely worth checking it out.
  • CSS Reference - If I need to refresh some of my CSS knowledge or use some property I do not know/use very often, this is my go-to resource. It contains an in-depth explanation of every CSS property with clear examples so it's easy to understand and use in your project. Written by excellent Sara Soudain.
  • Can I Use - A must-have tool if you care about browser support and using cutting edge features responsibly (aka progressive enhancement).

Performance and optimizations tools

  • SVGOMG - You will rarely get SVG from designer optimized for the web. In such cases, I will use SVGOMG to optimize and minify the SVG. You would be surprised how much of useless stuff you can get rid of. It's web GUI for SVGO, so you can get the same results from CLI if you want to.
  • Shrinkme.app - Web app when I need to quickly optimize images. It supports batch uploads and provides very good results out of the box.
  • Sqoosh - When I need to squeeze every last drop of performance from images or need to create images in webp format. A lot of options to play with to get the results you need. You can also resize images and convert them to different formats. It's fairly cutting edge (it was done as a demo of what modern browsers can do by Google Chrome team) so you have to use Chrome or another Chromium-based browser (Opera, Brave, etc.). It didn't work properly in Firefox last time I test it.
  • Icomoon app - My go-to tool when I need to create a custom icon set. You can choose from existing icons (free or paid) or upload your own. Then you can either use that to generate icon font or SVG icon set (which is a better solution these days).
  • Google Fonts - When I want some custom web fonts, this is usually my first stop. I usually download the files I need and self-host it myself (for better performance). What is great is that you can select only encoding you need and avoid downloading unnecessary characters. NOTE: You could select encoding on the old Google Fonts page, but I can't fount it anywhere on their new site. If you know where it is (or if it is there at all), let me know, please.
  • Glyphhanger - Decreasing file size is one of the best ways how to improve the performance of the website. Web fonts often use many glyphs we do not need so I use Glyphhanger for font subsetting. You can specify Unicode ranges or characters you want in the font and Glyphanger will create a new font file for you with only specified characters. It can also convert .ttf files to other formats much more suitable for the web. like .woff and .woff2. Take a bit of effort to use it right, but I think it's an option worth considering when font performance is an issue.
  • Lighthouse - I test the webpages before releasing them and one of the tools I use most often is Lighthouse audit in Chrome browser. It checks for the most common issues in several areas and gives you score for each area as well as hints on how to improve. It's great as a first check to see if there are any problems I forgot to address during development.
  • Font style matcher - If you want to make font swap less noticeable after your custom fonts are loaded you can use this great tool to match the styles of your default and custom fonts.

Accessibility (a11y for short)

  • VoiceOver - default screen reader on macOS. It takes little practice to use it (I found this article about it very useful), but I try to regularly use it in the development process. Thanks to that my usage of aria attributes and screen-reader only text has increased significantly. You would be surprised how very little context and information some ordinary webpage components have for the user depending on a screen reader.
  • a11y guidelines - I usually try to find some existing solution with good a11y but that is not always possible. In that case, if I need to create some interactive component with accessibility in mind, I will go to this page. You can find a detailed explanation of what, why and how. Together with example codes, you can often copy and reuse with a little effort.
  • WAI-ARIA specification - I don't ready specifications very often. But when I do, it's usually this one. It contains a lot of valuable information about aria roles and attributes and how to use them. I would say this is mandatory reading for anyone who takes a11y seriously

Honorable mentions

And last but not least there is a list of other tools I found useful, but not using them that often.

  • Responsive breakpoints generator - Manually creating responsive images with a lot of variants is a pain. This is a great tool to lessen that pain.
  • HTML Arrows - List of special characters together with Unicode code (in different contexts like CSS, JS, plain Unicode) and HTML entity to use them safely on a web. I use it now and then when I want to have good typography.
  • Char reference - Similar to the tool above, but contains less information. It shows mainly HTML entities, so if that is what you need this may be a better option.
  • Typography cheatsheet - Explains common typography rules and issues. If you want to improve your typesetting on the web, this is a good starting point.
  • Modular scale - When I work on a design I usually pick some modular scale using this tool. It helps you create a harmonical vertical rhythm. To learn more about it I recommend reading this article on A List Appart or this recording of Tim Brown talk from Build Conf 2010.
  • CSS gradient generetor
  • Smooth shadow generator - When you want to have great looking shadows on your web.
  • Bezier curve generator - Custom timing function for your animation
  • Easing functions - Library of different easing functions ready to use in your CSS animations and transitions.
  • ngrok - I use it when I need to show some of my work running on localhost to someone else or if I need to test on different devices. Sometimes using it with Browserstack when their localhost extension refuses to work.
  • sharing buttons - This is a jewell if you need simple sharing buttons without all the JS and tracking mess around them.
  • Unix timestamp converter
  • CSS to JS converter - This may be handy when you work with CSS-in-JS library and need to convert from CSS to JS or vice versa.
  • Browser default styles - List of default styles for common browsers.

The end

That's it. Those are the tools I used for my work and which help me to be productive and provide high-quality work. I hope you will find some of them useful. If yes please let me know on Twitter or in the comments. Or if you have some other great suggestions I would love to hear about them as well.

Posted on by:

pustelto profile

Tomas Pustelnik

@pustelto

I'm frontend developer currently building React and React Native stuff at Webscope.io. Founder of Qjub. Fan of great and clever design, tooling addict and neverending learner.

Discussion

pic
Editor guide
 

This is a great list of front end tools! I'm excited to try DevDocs.io, I hadn't heard of it before and it looks like it will cut down on my googling considerably.

I can second VS code as an IDE, MDN/CSS-Tricks for explanations of CSS attributes, and caniuse as the place to check any time I hear about a new feature that sounds almost too good to be true.

For Lighthouse reports I like to use web.dev/measure/ which gives you a shareable HTML report link after running the audit.

 

Definitely try Devdocs. Having all documentation in one place and offline is super helpful for me.

 

Great list Tomas, thank you for sharing!
Looking forward to try them out on my next project.
Regarding the search engine check Ecosia, it is a search engine that plants tree! 🌱🌱
So you reforesting while solving tech issues ! 😉

 

Thanks for the tip, Will have a look

 

Awesome list! I'd like to translate it to Chinese. Can you give me the permission? The translated text will be published on nextfe.com. Thanks in advance.

 

Hi, sure, go ahead. It's great you want to do it. And thanks for asking. Could you send me a link once it's done? Would like to see how it looks in Chinese :-).

 

Just published the Chinese translation: nextfe.com/tools-i-use-for-front-e...

You could select encoding on the old Google Fonts page, but I can't fount it anywhere on their new site.

I did not find the option either. The Google Font API offers text and subset query parameter, I guess Google removed the subsetting UI to encourage users to use their web font service instead.

Yeah too bad they removed it (Google Fonts), I prefer to host web fonts myself to get a better control over it and slightly better performance. Guess I will have to subset it manually in the future.

And thanks for the link the translated article and for the effort you put into it. It's so short in chinese 😆. And the hero image is great 👌. Hope it will help some more people.

 

Great list, thanks for sharing!

I'd add this fantastic tool rocketvalidator.com/ to perform automatic validations

 

Thanks that looks interesting, will definitely check it out

 

Very useful, thanks Tomas!

 

Great list Tomas. I have just started learning web dev and I'll keep this list as my standard reference of tools. Thank you

 

Hi Rahul. Good luck with the web dev and keep learning 💪. I hope those tools will help you as they help me.

 

Amazing list. Thank you for sharing

 

great list. that DevDocs one is massive. Thanks a lot for sharing this?
also, interested to know what else do you use in terms of css like SCSS and build tools like node/npm etc?
Thanks

 

Hi Amit, good to hear it was useful to you. As for other dev tools I usually use npm scripts. We pack on some occasions. In terms of CSS I used to use sass but these days I usually go with postCSS. There is plenty of plugins to suit most of my needs. I have also experience with CSS in JS but I still don't how to feel about them. But in general I try to always pick a tools based on the project needs.

 

Great post Tomas and sure some tools I never heard of before.
Going to check them on my next project, thanks!

 

Thanks, I'm glad it was helpful. Take care.

 
 

Thanks, glad you like it. I hope it will help you in some way. 👍

 

Great list Tomas, I'm saving most of these resources to have it on my toolchain.
Thanks!

 

Thanks, glad it helped.

 

Great post! By the way, CSS-Tricks link seem to point to the wrong website (caniuse.com/).

 

Oh my. Thanks for the good catch. I will fix it.