[28] Top 10 Web Dev Tools in 2021
Tags: codenewbie, beginners, productivity, webdev
Published: 2021-12-26 09:00:57

This time I would like to present you some of the most memorable tools I've talked about this year. Personally, for me, this year was a year of intensive learning and big changes in my professional life. Anyway, I'm not going to make this blog post too personal. For this purpose, there will be a separate post in January. So, let me finish my [blog post series](https://www.create-react-app.com/tags/top) - Top 10 Best Web Dev Tools. Every month I tried to pick the most intriguing and handy instruments that, I believe, are must-haves for every web developer. Summarizing the results of the year, there are:

## 1). 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.).

[[18] March 2021](https://www.create-react-app.com/posts/2021-03-08-18-top-10-web-dev-tools-03-2021/)

![squoosh](https://reverent-carson-67c52e.netlify.app/static/img/images/18/Screenshot-2021-03-07-at-21.44.16.png)

[https://squoosh.app/](https://squoosh.app/)

## 2). Daily Dev

The best coding news aggregator I have seen so far (yes, including [Hacker News](https://www.create-react-app.com/posts/2020-12-05-15-best-developer-resources-in-2020/)). Available both as a [web app](https://app.daily.dev/) and [extension](https://r.daily.dev/chrome).

[[19] April 2021](https://www.create-react-app.com/posts/2021-04-06-top-10-web-dev-tools-04-2021/)

![daily dev](https://reverent-carson-67c52e.netlify.app/static/img/images/19/Screenshot-2021-04-06-at-16.30.36.png)

[https://daily.dev/](https://daily.dev/)

## 3). Vercel

A very impressive and easy-to-use deployment and collaboration platform for front-end developers from creators of [NextJS](https://nextjs.org/). 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](https://heroku.com/) or [Netlify](https://www.netlify.com/) on steroids.

[[21] May 2021](https://www.create-react-app.com/posts/2021-05-10-top-10-web-dev-tools-05-2021/)

![Top 10 Must-Have Web Dev Tools](https://reverent-carson-67c52e.netlify.app/static/img/images/21/Screenshot-2021-05-10-at-11.11.06.png)

[https://vercel.com](https://vercel.com/dashboard)

## 4). Eleventy

Eleventy is a well-known and gaining momentum [static site generator](https://jamstack.org/generators/). I have recently moved [my blog](https://www.create-react-app.com/) from WordPress to Eleventy, and it was the best decision to make in terms of performance and accessibility. Here is the [latest Lighthouse score](https://crappblog.netlify.app/blog-on-vercel/) as confirmation of my words.

[[22] June 2021](https://www.create-react-app.com/posts/2021-06-15-top-10-web-dev-tools-06-2021/)

![eleventy](https://reverent-carson-67c52e.netlify.app/static/img/images/22/11ty.webp)

[https://www.11ty.dev/](https://www.11ty.dev/)

## 5). Haikei

Haikei is a very inspiring web tool for generating unique SVG shapes, backgrounds, and patterns.

[[23] July 2021](https://www.create-react-app.com/posts/2021-07-12-top-10-web-dev-tools-07-2021/)

![haikei](https://www.create-react-app.com/static/img/images/23/haikei.webp)

[https://app.haikei.app/](https://app.haikei.app/)

## 6). Vite

Vite is a blazing fast and easy to configure build tool. It uses [esbuild](https://esbuild.github.io/) for bundling, which is written in Go and pre-bundles dependencies 10-100x faster than JavaScript-based bundlers. I recently used Vite in one of my latest [projects](https://vaccine2021.vercel.app/), and I'm currently planning to move my [site](https://villivald.com) to it (from create-react-app incl. webpack).

[[23] July 2021](https://www.create-react-app.com/posts/2021-07-12-top-10-web-dev-tools-07-2021/)

![vite](https://www.create-react-app.com/static/img/images/23/vite.webp)

[https://vitejs.dev/](https://vitejs.dev/)

## 7). GitHub Copilot

Copilot is an AI tool developed by GitHub to assist users of VS Code. It is still in a Technical Preview state and requires joining the waitlist, but from my experience, I would say that Copilot has all prerequisites to become the Next Big Thing.

[[24] August 2021](https://www.create-react-app.com/posts/2021-08-17-top-10-web-dev-tools-08-2021/)

![copilot](https://www.create-react-app.com/static/img/images/24/copilot.webp)

[https://copilot.github.com/](https://copilot.github.com/)

## 8). Hackr.io

Hackr.io is a platform providing access to a curated collection of different programming courses. It is a great tool to learn overall, as well as get started with web development. Feel free to submit a course or tutorial you like the most (I also plan on doing it sometime soon).

[[25] September 2021](https://www.create-react-app.com/posts/2021-09-16-top-10-web-dev-tools-09-2021/)

![hackr io](https://www.create-react-app.com/static/img/images/25/hackr.webp)

[https://hackr.io/](https://hackr.io/)

## 9). OpenMoji

An open-source emoji library made by 60+ students and 3 professors of the [HfG Schwäbisch Gmünd](https://www.hfg-gmuend.de/) and 20+ external contributors. I already use some of their brilliant emojis in my [basketball-related project](https://koripallopaikat.com/). They seem like a great alternative to the standard ones.

[[26] October 2021](https://www.create-react-app.com/posts/2021-10-19-top-10-web-dev-tools-10-2021/)

![Open source emojis library](https://www.create-react-app.com/static/img/images/26/openmoji.webp)

[https://openmoji.org/](https://openmoji.org/)

## 10). cht.sh

This tool is one of my latest findings from [Frontend Masters course](https://frontendmasters.com/courses/developer-productivity/). A very useful terminal cheatsheet with a CLI interface.

[[27] November 2021](https://www.create-react-app.com/posts/2021-11-29-top-10-web-dev-tools-11-2021/)

![terminal cheatsheet](https://www.create-react-app.com/static/img/images/27/cheat.webp)

[https://cht.sh/](https://cht.sh/)

---

[Original post @ create-react-app.com](https://www.create-react-app.com/posts/2021-12-26-top-10-web-dev-tools-2021/)

My Site https://villivald.com/
GitHub https://github.com/villivald
Twitter https://twitter.com/crapp_blog