[27] Top 10 Must-Have Web Dev Tools – November 2021
Tags: codenewbie, beginners, productivity, webdev
Published: 2021-11-30 10:09:53

For me, this November was very hectic in all aspects, so I managed to write this post only on the very last day of the month. Nevertheless, let me present you a brand new November 2021 edition of my [blog post series](https://www.create-react-app.com/tags/top) - Top 10 Best Web Dev Tools. Every month I try to pick the most intriguing and handy instruments that, I believe, are must-haves for every web developer. This time there are:

## 1). ssshape

An SVG blob/shape generator with a great UI and intuitive user experience.

![blob/shape generator](https://www.create-react-app.com/static/img/images/27/ssshape.webp)

[https://fffuel.co/ssshape/](https://fffuel.co/ssshape/)

## 2). Doodle Ipsum

The lorem ipsum of illustrations. It gives you the possibility to customize your doodles, grab the code, and use it on your web prototypes, landing pages, etc.

![lorem ipsum of illustrations](https://www.create-react-app.com/static/img/images/27/doodle.webp)

[https://doodleipsum.com/](https://doodleipsum.com/)

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

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

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

## 4). cube awesome tools

An awesome collection of data visualization tools for different occasions.

![data visualization tools](https://www.create-react-app.com/static/img/images/27/cube.webp)

[https://awesome.cube.dev/](https://awesome.cube.dev/)

## 5). couleur

A simple tool to help you create harmonizing color palettes with HSL color values. You should also check an Accessible Palette tool from my [last post](https://www.create-react-app.com/posts/2021-10-19-top-10-web-dev-tools-10-2021/#:~:text=Accessible%20Palette).

![color palettes](https://www.create-react-app.com/static/img/images/27/couleur.webp)

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

## 6). UIUI

Collection of simple elements for UI development you can play around with.

![ui elements](https://www.create-react-app.com/static/img/images/27/uiui.webp)

[https://www.uiui.dev/](https://www.uiui.dev/)

## 7). Shadow Palette Generator

Actually, this one should be number one on this list. An amazing shadow palette generator by [Josh Comeau](https://www.joshwcomeau.com/) who is also a creator of [CSS for JavaScript Developers](https://css-for-js.dev/) course.

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

[https://www.joshwcomeau.com/shadow-palette/](https://www.joshwcomeau.com/shadow-palette/)

## 8). Netlify Drop

Drag and drop tool for deploying your website to Netlify. I do not really know, can it be more simple than this?

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

[https://app.netlify.com/drop](https://app.netlify.com/drop)

## 9). Bundle Scanner

An instrument to scan your bundle and identify all the NPM libraries included. Good addition to [Bundlephobia](https://www.create-react-app.com/posts/2021-07-12-top-10-web-dev-tools-07-2021/#:~:text=Bundlephobia,-Bundlephobia%20is%20a).

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

[https://bundlescanner.com/](https://bundlescanner.com/)

## 10). Remix

A promising full-stack React-based framework focused on web fundamentals and modern UX. Now it's public and completely free.

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

[https://remix.run/](https://remix.run/)

---

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

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