Top 30 Must-Have Web Dev Tools
Top 10 Best Web Dev Tools. Every month I am trying to pick the most intriguing and handy instruments that, I believe, are must-haves for every web developer. This time there are::
1). Vercel
A very impressive and easy-to-use deployment and collaboration platform for front-end developers from creators of NextJS. Vercel enables developers to host websites and web services that deploy instantly and scale automatically — all without any configuration. So far, I have been using it for a couple of weeks, and it really feels like a Heroku or Netlify on steroids.
2). Color Leap
Color Leap is a very beautiful and well-designed resource on the history of colors. It is perfect for looking for inspiration, so choose your favorite era and dig into its colors.
3). HTML DOM
A handy DOM-related knowledge database from creators of this vs that which I mentioned last year.
4). Keyframes
A couple of very user-friendly and simple visual tools to help you generate CSS (animations, shadows, colors) for your projects.
5). GRID
A simple visual cheatsheet for CSS Grid Layout.
6). CSS Stats
CSS Stats provides a report with deep analytics and visualizations for your stylesheets.
7). Yellow Lab Tools
Yellow Lab Tools is a free online page speed audit tool and a web performance analyzer.
8). Figma Crash
Actually, this pick is not a tool but a study resource. It helps you to dive deep into powerful Figma features. The course is totally free.
https://www.figmacrashcourse.com/
9). CSS Hell
I could not describe this resource better than their official site does — The collection of common CSS mistakes and how to fix them.
10). Readme.so
This resource provides you the easiest way to create a brilliant README for your next project.
readme.so — Easiest Way to Create A README
11). Daily Dev
The best coding news aggregator I have seen so far (yes, including Hacker News). Available both as a web app and extension.
12). HTTP Cats
A hilarious API that you can use in your website to show funny error messages. For those who are not in the team cat, there is also a dog version.
13). Ray.so
A super cool tool that helps you create some good-looking content for your blog or social media. I will definitely use it the future posts.
14). JSitor
Last month I mentioned Stackblitz, which is a great online code editor for web apps. This time I would like to present a tool with a bit narrower application, which is nevertheless very useful when working with JavaScript.
15). Can I use…
I suppose there must be at least one pick from captain obvious every month. This time it is a widely known resource — Can I use…
16). VIM Adventures
In fact, this is not a tool but an online environment that allows you to learn VIM in a game-like manner. As for this topic, I may as well recommend the Vim Fundamentals course by Frontend Masters.
17). 30 seconds of code
An extensive collection of code snippets for all occasions and all skill levels.
https://www.30secondsofcode.org/
18). Cool Backgrounds
A curated selection of cool backgrounds that you can add to blogs and websites. It also provides a broad scope for modification.
19). Grid Cheatsheet
It is another useful cheat sheet, presented in visual and easy to interpret form. From the authors of Flex cheatsheet (pick number 10).
https://yoksel.github.io/grid-cheatsheet/
20). uiGradients
A handpicked collection of beautiful color gradients for all kinds of designers and developers.
21). Squoosh
Squoosh is the most intuitive and good-looking image compression web app I have ever seen. It works very fast and supports many formats (AVIF, WebP, JPEG XL, etc.).
22). Glassmorphism
This tool helps you to create web design elements inspired by the popular Frosted Glass aesthetic.
23). VisuAlgo
A VisuAlgo is the ultimate tool to learn data structures and algorithms visually.
24). EStimator
The EStimator will help if you want to reduce the size of your JS bundle. It allows calculating the size and performance impact of switching to modern JavaScript syntax.
25). Netlify
Perhaps the most obvious, but nonetheless very useful pick. Netlify is an amazing platform allowing you to deploy in just a few clicks straight from your git repository.
26). Hoppscotch
A free, fast, and beautiful API request builder. A noteworthy alternative to Postman.
27). Stackblitz
The online code editor for web apps. A wonderful VS Code-like alternative to other online IDE’s like Repl, CodePen, etc.
28). Buttonbuddy
A simple and easy-to-use tool for creating accessible buttons. It helps you to ensure that your buttons have accessible contrasts.
https://buttonbuddy.dev/#generator
29). Refactoring Guru
This resource could be a great starting point for someone interested in refactoring and design patterns.
https://refactoring.guru/refactoring
30). Flex Cheatsheet
A great visual cheat sheet for CSS Flex layout in a form of an interactive playground.
P.S. Please feel free to complete the list by replying to this post. Which web dev tools do you like best?
