[19] Top 10 Must-Have Web Dev Tools – April 2021
Tags: codenewbie, webdev, beginners, productivity
Published: 2021-04-07 05:49:59

<!-- wp:paragraph -->
<p>It is time to continue my new blog post series - Top 10 Best Web Dev Tools, which I <a href="https://create-react-app.com/18-top-10-web-dev-tools-03-2021/">started</a> almost one month ago. Every month I will try to pick the most intriguing and handy tools that I believe are must-haves for every web developer.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>1). Daily Dev</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The best coding news aggregator I have seen so far (yes, including <a href="https://create-react-app.com/15-best-developer-resources-in-2020/">Hacker News</a>). Available both as a <a href="https://app.daily.dev/">web app</a> and <a href="https://r.daily.dev/chrome">extension</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":426,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2021/04/Screenshot-2021-04-06-at-16.30.36-1024x535.png" alt="daily dev" class="wp-image-426"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://daily.dev/">https://daily.dev/</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>2). HTTP Cats</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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 <a href="https://httpstatusdogs.com/">dog version</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":427,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2021/04/Screenshot-2021-04-06-at-16.27.26-1024x597.png" alt="http cats" class="wp-image-427"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://http.cat/">https://http.cat/</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>3). Ray.so</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":428,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2021/04/Screenshot-2021-04-06-at-16.28.20-1024x517.png" alt="ray.so" class="wp-image-428"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://ray.so/">https://ray.so/</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>4). JSitor</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><a href="https://create-react-app.com/18-top-10-web-dev-tools-03-2021/">Last month</a> 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.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":429,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2021/04/Screenshot-2021-04-06-at-16.29.28-1024x541.png" alt="jsitor" class="wp-image-429"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://jsitor.com/">https://jsitor.com/</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>5). Can  I use...</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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...</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":430,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2021/04/Screenshot-2021-04-06-at-16.30.23-1024x502.png" alt="can i use" class="wp-image-430"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://caniuse.com/">https://caniuse.com/</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>6). VIM Adventures</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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 <a href="https://frontendmasters.com/workshops/vim-fundamentals/">Vim Fundamentals</a> course by Frontend Masters.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":431,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2021/04/Screenshot-2021-04-06-at-16.29.00-1024x519.png" alt="vim adventures" class="wp-image-431"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://vim-adventures.com/">https://vim-adventures.com/</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>7). 30 seconds of code</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>An extensive collection of code snippets for all occasions and all skill levels.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":432,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2021/04/Screenshot-2021-04-06-at-16.20.02-1024x595.png" alt="30 seconds of code" class="wp-image-432"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://www.30secondsofcode.org/">https://www.30secondsofcode.org/</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>8). Cool Backgrounds</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A curated selection of cool backgrounds that you can add to blogs and websites. It also provides a broad scope for modification.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":433,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2021/04/Screenshot-2021-04-06-at-16.26.57-1024x541.png" alt="cool backgrounds" class="wp-image-433"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://coolbackgrounds.io/">https://coolbackgrounds.io/</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>9). Grid Cheatsheet</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>It is another useful cheat sheet, presented in visual and easy to interpret form. From the authors of <a href="https://create-react-app.com/18-top-10-web-dev-tools-03-2021/">Flex cheatsheet</a> (pick number 10). </p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":434,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2021/04/Screenshot-2021-04-06-at-16.31.41-1024x542.png" alt="grid cheatsheet" class="wp-image-434"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://yoksel.github.io/grid-cheatsheet/">https://yoksel.github.io/grid-cheatsheet/</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>10). uiGradients</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A handpicked collection of beautiful color gradients for all kinds of designers and developers.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":435,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2021/04/IMG_0180-1024x598.jpg" alt="ui gradients" class="wp-image-435"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://uigradients.com/#Lizard">https://uigradients.com/</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>P.S. Please feel free to complete the list by replying to this post. Which web dev tools do you like best?</p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator" id="block-28599ce6-3974-4815-b803-5825a11d85c2"/>
<!-- /wp:separator -->

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

My Site https://villivald.com/
GitHub https://github.com/villivald