[26] Top 10 Must-Have Web Dev Tools – October 2021
Tags: codenewbie, productivity, beginners, webdev
Published: 2021-10-19 05:14:07

There is an October 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). 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.

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

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

## 2). Accessible Palette

Accessible Palette allows you to create entire color systems. It is a tool for designers and developers who want to create color systems that are accessible to everyone. To generate color ranges, they are using [chroma.js](https://gka.github.io/chroma.js/) library, which I mentioned in my [previous post](https://www.create-react-app.com/posts/2021-09-16-top-10-web-dev-tools-09-2021/).

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

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

## 3). Basic Pattern Repository

Basic Pattern Repository is a collection of SVG patterns for your next side project. See also [Hero Patterns](https://www.heropatterns.com/).

![basic patterns collection, svg](https://www.create-react-app.com/static/img/images/26/patterns.webp)

[https://patterns.helloyes.dev/](https://patterns.helloyes.dev/)

## 4). blobbb fun

It is an easy-to-use generator for creating unique SVG forms. I also recommend you to check [another generator](https://app.haikei.app/) made by Haikei, which I already mentioned in [an earlier post](https://www.create-react-app.com/posts/2021-07-12-top-10-web-dev-tools-07-2021/).

![blobb svg generator](https://www.create-react-app.com/static/img/images/26/blobb.webp)

[https://www.blobbb.fun/](https://www.blobbb.fun/)

## 5). Motion One

A new animation library with small size and fast performance. Can't wait to try it in my projects.

![js motion library](https://www.create-react-app.com/static/img/images/26/motion.webp)

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

## 6). Theatre.js

What? Yes, it is another JavaScript animation library. Seems very intriguing to me as well.

![js animation library](https://www.create-react-app.com/static/img/images/26/theatre.webp)

[https://www.theatrejs.com/](https://www.theatrejs.com/)

## 7). huey

Since this post, in general, is more focused on visual things, there is another tool for creating accessible color palettes. Huey has an option to simulate the different types of color blindness, which can be very useful.

![accessible color palette generator](https://www.create-react-app.com/static/img/images/26/huey.webp)

[https://huey.design/](https://huey.design/)

## 8). Huetone

Huetone is the tool you need to create and fine-tune your color system. The main difference from the previous ones is that Huetone uses [LCH color space](https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/).

![color palette generator](https://www.create-react-app.com/static/img/images/26/huetone.webp)

[https://huetone.ardov.me/](https://huetone.ardov.me/)

## 9). Buttons Generator

Buttons Generator by [Marko Denic](https://twitter.com/denicmarko) seems like it's already been in every top and newsletter, so I also wanted to share it with you 🤓.

![buttons generator](https://www.create-react-app.com/static/img/images/26/buttons.webp)

[https://markodenic.com/tools/buttons-generator/](https://markodenic.com/tools/buttons-generator/)

## 10). heroicons

Beautiful hand-crafted SVG icons, by the makers of [Tailwind](https://tailwindcss.com/) (the worst thing to happen to CSS, you know 💁‍♂️). Versions for React and Vue [are available](https://github.com/tailwindlabs/heroicons#react).

![collection of svg icons](https://www.create-react-app.com/static/img/images/26/heroicons.webp)

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

---

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

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