[16] The 15 Best Developer Resources in 2020 - Part II
Tags: codenewbie, webdev, productivity, beginners
Published: 2020-12-25 10:49:28

<!-- wp:paragraph -->
<p>Today I will keep up my <a href="https://create-react-app.com/tag/top/">Top 15 series</a> for the last time this year. This post will be the second part of <a href="https://create-react-app.com/15-best-developer-resources-in-2020/">one of my previous posts</a>, which was also related to Best Developer Resources. I wasn't originally planning any "sequels". Anyway, the reason for writing the second part is simple enough - there are just so many great resources that I want to share. This time, I will go with a bit less obvious ones, and, despite the lack of big names, I believe that there are enough noteworthy hidden gems here.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>1). this vs that</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>It is a website with a simply genius approach. Explains the difference between things like :active vs :focus (CSS), class vs id (HTML), for ... in vs for ... of (JS), and so on. </p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":371,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2020/12/Screenshot-2020-12-25-at-10.59.34-1024x689.png" alt="" class="wp-image-371"/></figure>
<!-- /wp:image -->

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

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

<!-- wp:paragraph -->
<p>Stylish and informative software-related magazine. Articles by well-known experts such as Chris Coyier, Lea Verou, Dan Abramov, etc.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":372,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2020/12/Screenshot-2020-12-25-at-11.10.02-1024x549.png" alt="" class="wp-image-372"/></figure>
<!-- /wp:image -->

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

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

<!-- wp:paragraph -->
<p>A great place to share and search for components. WebComponents provides articles, presentations, podcasts, tools, and more to help web professionals. All the content on this site is totally free.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":373,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2020/12/Screenshot-2020-12-25-at-11.20.27-1024x630.png" alt="" class="wp-image-373"/></figure>
<!-- /wp:image -->

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

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

<!-- wp:paragraph -->
<p>A very clever and simple tool for picking a new brand color for your project. It displays the colors with the color codes - HEX, RGB, HSL. Made by <a href="https://github.com/scriptype">Mustafa Enes Ertarhanaci</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":374,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2020/12/Screenshot-2020-12-25-at-11.25.47-945x1024.png" alt="" class="wp-image-374"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://enes.in/sorted-colors/">https://enes.in/sorted-colors/</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>5). Noun Project</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A free collection of icons and photos for almost everything.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":375,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2020/12/Screenshot-2020-12-25-at-11.28.58-1024x510.png" alt="" class="wp-image-375"/></figure>
<!-- /wp:image -->

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

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

<!-- wp:paragraph -->
<p>The AI-powered color tool. Khroma learns from your input and generates combos of color palettes.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":376,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2020/12/Screenshot-2020-12-25-at-11.38.44-1024x499.png" alt="" class="wp-image-376"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="http://khroma.co/train/">http://khroma.co/</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>7). Grid By Example</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>An ultimate tool for creating a Grid Layout. Pretty much everything you need to know about Grid.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":377,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2020/12/Screenshot-2020-12-25-at-11.49.01-1024x543.png" alt="" class="wp-image-377"/></figure>
<!-- /wp:image -->

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

<!-- wp:heading -->
<h2>8). Houdini Worklet Library</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The community-driven resource library of CSS Houdini worklets. The first time I heard about it from <a href="https://twitter.com/una">Una Kravets</a> @ <a href="https://developer.chrome.com/devsummit/">Chrome Dev Summit</a>. Great place to dive deeper into learning Houdini.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":378,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2020/12/Screenshot-2020-12-25-at-11.56.11-1024x644.png" alt="" class="wp-image-378"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://houdini.how/">https://houdini.how/</a></p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph -->
<p>A very easy to use and completely free online tool for making a professional tech resume.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":379,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2020/12/Screenshot-2020-12-25-at-11.58.52-1024x536.png" alt="" class="wp-image-379"/></figure>
<!-- /wp:image -->

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

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

<!-- wp:paragraph -->
<p>A super useful tool for adjusting the color accessibility of your project.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":380,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2020/12/Screenshot-2020-12-25-at-12.03.42-1024x621.png" alt="" class="wp-image-380"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://color.review/">https://color.review/</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>11). Webdevscom</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>An open-source web developers community. An awesome collection of design resources, app ideas, developer portfolios, public APIs, youtube channels, etc.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":381,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2020/12/Screenshot-2020-12-25-at-12.09.14-1024x507.png" alt="" class="wp-image-381"/></figure>
<!-- /wp:image -->

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

<!-- wp:heading -->
<h2>12). Interviews.school</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>An interview preparation guide for software engineers.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":382,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2020/12/Screenshot-2020-12-25-at-12.12.39-1024x502.png" alt="" class="wp-image-382"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://interviews.school/">https://interviews.school/</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>13). Web Desktops</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A very funny and inspiring collection of websites that resemble desktop graphical user interfaces. A place to be spaced out.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":383,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2020/12/Screenshot-2020-12-25-at-12.15.02-1024x725.png" alt="" class="wp-image-383"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://simone.computer/#/webdesktops">https://simone.computer/#/webdesktops</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>14). Tint &amp; Shade Generator</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A useful tool for producing tints and shades of a given hex color in 10% increments.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":384,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2020/12/Screenshot-2020-12-25-at-12.22.30-1024x746.png" alt="" class="wp-image-384"/></figure>
<!-- /wp:image -->

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

<!-- wp:heading -->
<h2>15). Frontend Horse</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A newsletter for frontend developers.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":385,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2020/12/Screenshot-2020-12-25-at-12.25.47-1024x513.png" alt="" class="wp-image-385"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://frontend.horse/">https://frontend.horse/</a></p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph -->
<p>P.P.S. Also, please, reply if you would like me to continue with posts like this, or, otherwise, just tell me that it was pretty enough 🙂.</p>
<!-- /wp:paragraph -->

***

[Original post @ create-react-app.com](https://create-react-app.com/top-15-best-developer-resources-part2/)

My Site https://proj.create-react-app.com/
GitHub https://github.com/villivald