Original Tomas Pustelnik, translated by New Frontend.

Front-end development is a pretty complicated direction, at least for large projects, and it’s hard to get things done with just a browser and an editor. Here is a list of the tools I used during the development process. I hope this list helps others find some good tools to use in their workflows.

Essential tool

These are the tools I use every day, and I can’t be productive without them.

  • VS Code – My editor of choice is VS Code from Microsoft. Free, lightweight (compared to ides like WebStorm), lots of features out of the box, rich extensions.
  • Browser – My default browser is Firefox and I sometimes switch to Chrome for development. I also installed other browsers for testing purposes.
  • DevDocs – This web application brings together documents for various projects and supports offline use. When I need to query documents, I usually visit this site. I mainly use it to query JS and DOM/ browser documents. I can’t really find anything quite like it (exhaustive and easily searchable). You should take a look.
  • Google – Yes, I do a lot of Internet searches. I search the Web for information on a bug, how to do something (sometimes very basic), sample code and documentation for software packages and libraries (if DevDocs isn’t included).
  • MDN – this is a great resource for any Web developer. Parts of the site can be found on DevDocs, as mentioned earlier, but some pages are only available on MDN. I mainly use it to query for accessibility content, and there are a number of articles on this topic.
  • StackOverflow – Google it often. If you have a question, you’ll probably find the answer on it.
  • GitHub – IF I have a question about a package, or want to know more about it, I’ll go to its GitHub repository and look through its issues and code, and usually find the answer to the question, like StackOverflow. In my experience, if there’s a question about a particular package, you’re more likely to find the issue on GitHub than on StackOverflow (with the exception of particularly popular libraries like React). Of course, I also use GitHub’s version control feature.

CSS

  • Css-tricks — you’ll find plenty of interesting articles and tips on csS-Tricks. The site also has a Guides section that provides in-depth explanations of specific HTML, CSS, and JS concepts. I visit this site frequently to update my knowledge of grid layouts. But other guides are great too. This site is definitely worth checking out.
  • CSS Reference – This is a site I visit if I need to update my CSS knowledge or look up unfamiliar and uncommon properties. The descriptions of each CSS property are in depth and the examples are clear enough for you to understand them and apply them to your own projects. The author of the site is Sara Soudain.
  • Can I Use – An indispensable tool if you care about browser compatibility and want to Use cutting-edge features (progressive enhancement) responsibly.

Performance optimization

  • SVGOMG – It’s rare to receive an SVG file optimized for the Web from a designer. So I optimized SVG with SVGOMG, and the results were amazing. This is the web version of SVGO, so you can compress SVG using the corresponding command-line tools as well.
  • Shrinkme.app — Optimize image files quickly and easily with this web app. Out of the box, support batch upload, the effect is quite good.
  • Sqoosh – I use this site when I need to compress images to the hilt, or when I need to create webP image files. You can use the large number of options it provides to call up satisfactory results. You can also use it to scale and format images. It uses a lot of cutting-edge technology (the Google Chrome team did it to demonstrate what modern browsers can do), so you’ll need Chrome or a Chromium-based browser (Opera, Brave, etc.). Last time I tried, the site didn’t work in Firefox.
  • Icomoon App – I use this tool when I need to create custom icon sets. You can select existing ICONS (free and paid) or upload your own. You can then generate the corresponding icon font or SVG icon file (the latter is a better choice these days).
  • Google Fonts – When I need to create custom Web Fonts, I go to Google Fonts first. I usually download the required files and host them myself for better performance. Google Fonts has a nice feature that allows you to encode only the characters you need.
  • GlyphhangerReducing file sizes is one of the best ways to improve website performance. Web fonts often contain a lot of glyphs that we don’t need, so I use themGlyphhangerSubset fonts. You can specify the Unicode sections and characters you want, and Glyphanger will create a font file containing only those characters. It can also be.ttfFiles are converted to other more web-friendly formats, such as.woff 和 .woff2. It takes a bit of work to use this tool correctly, but I think it’s an option worth considering when there are font performance issues.
  • Lighthouse – I test before PUBLISHING a web page, and Lighthouse for Chrome is one of the most commonly used tools. It checks common problems in various areas and gives a score, as well as hints for improvement. This is a great tool to initially check if I’ve missed something while developing.
  • Font Style matcher — Custom fonts will switch fonts when loaded. If you want the switch to be subtle, you can use this Font style matcher to find a default Font that is similar to the custom Font.

accessibility

  • VoiceOver — The default screen reader for macOS. It takes a while to get used to the tool (I recommend this introductory article), but I try to use VoiceOver from time to time during development. Thanks to this, the use of aria attributes and text for screen readers in my project has increased significantly. After using VoiceOver, you’ll be surprised at how little context some of the everyday web components provide screen reader users.
  • A11y Guidelines – I usually try to find a solution that is accessible, but sometimes I have to do it myself and I refer to this page. This accessibility Guideline explains in detail what accessibility is, why it is important, and how to achieve it. In many cases, you can copy the sample code and apply it to real projects with a few tweaks.
  • Wai-aria Specification — I don’t read the specification very often. If I’m reading the spec, it’s usually this one. It contains a lot of valuable information on how to use ARIA roles and attributes. I would say that any developer who is serious about accessibility needs to read this specification.

It is worth mentioning

Finally, list the tools that I find useful but don’t use that often.

  • Responsive breakpoints Generator – Manually creating multiple variants of Responsive images is a pain. It’s very convenient to use this tool.
  • HTML Arrows — Unicode codes for various symbols, HTML hexadecimal codes, HTML entity codes, HTML entities.
  • Char Reference — Similar to the previous tool, but with less information, showing mostly HTML entities.
  • Typography cheatsheet — Explains common Typography rules and issues.
  • Modular Scale — I usually use this tool when designing web pages to select Modular scaling schemes. If you are interested in learning more about this topic, please refer to this article on A List Appart and Tim Brown’s talk at Build Conf 2010.
  • CSS Gradient Generetor – An online tool for creating gradient backgrounds.
  • Smooth Shadow Generator – Add beautiful shadows to your website.
  • Bezier Curve Generator — A cubic Bezier curve timing function for custom CSS.
  • Easing Functions – Various Easing functions that can be used for CSS animations and transformations.
  • Ngrok — I use Ngrok when I need to show my work to others or test it on different devices. Ngrok can expose locally running services to the public network. But sometimes it doesn’t work with Browserstack’s localhost extension.
  • Sharing Buttons – This tool is especially useful if you just need a simple share button, don’t want to use JS, and don’t want to mess with the complicated logic of tracking users.
  • Unix TIMESTAMP Converter – Unix timestamp Converter
  • CSS to JS Converter – You can convert CSS to JS and JS back to CSS. This tool comes in handy when developing based on the CSS-in-JS library.
  • Browser Default styles – Default styles for common browsers.

conclusion

These are the productivity tools I use at work, and I hope to help you find some useful ones. Feel free to give me feedback on Twitter, including suggestions of other useful tools.