Web Tools Weekly - Web Tools #389 - Top 30 Tools of 2020

As mentioned last week, this issue is the second part in the countdown of most clicked tools. This week features the 30 most-clicked tools in this newsletter in 2020, in reverse order.

Once again, thank you all for your support this past year, even though it's been a rough one. If you'd like to offer some support to the newsletter, here's a quick list of ways you can do that:

• Open every issue and click the stuff that genuinely interests you. This really does help!
• Make sure you add this newsletter to your email client's whitelist (or add to your contacts) to ensure it doesn't get into your spam folder.
• Contribute to the newsletter:
  • PayPal.me
  • Patreon
  • GitHub Sponsors
• Subscribe to my other newsletter: Tech Productivity
• Buy my JavaScript/DOM E-books bundle

Now on to the top 30 tools of 2020!
 

Top Tools #30 – #21

calcolor.co
Provides a dedicated page for every color code. Use it to find matching color variants, learn more about color properties, or convert color values.

tailblocks
A set of Tailwind UI components divided into 15 categories and ready to use.

Good Email Code
A small library (with description) of best practices HTML email components including a template, preheader, container, columns, button, and more.

Pixel Lite
A beautifully crafted, responsive UI kit based on Bootstrap 4 that includes  80 components, 3 sections, 4 example pages and an optional premium version.
 
Coded Mails
Hassle free responsive HTML email templates. 60+ templates divided into 6 categories for easy lookup and usage.

Big Heads
Randomly generated characters for your apps and games. You can customize expressions, skin color, clothing, hair, etc., then grab the React or HTML code or download as SVG.

Codemap
Mac, Windows, or Linux app that lets you navigate code with a graph, visualizing function calls in an intuitive way.

signature.email
A powerful visual drag and drop editor for email signatures, to help with consistent branding across teams.

Leaf PHP
Not a front-end tool, but useful for full stack: Create clean, simple, and powerful web applications and APIs quickly.

Blunt
A CSS framework that helps with layouts and leaves your styling alone.  It only provides helper classes to make positioning and responsive design easier.
 

Top Tools #20 – #11

Arwes
Futuristic sci-fi and cyberpunk-inspired graphical UI framework for web apps. Includes some neat animations and audio.

Free Illustrations
This is a directory of various free illustration sites, allowing you to filter by file type (AI, SVG, GIF, SKETCH, PNG, EPS, etc).

MoreToggles.css
A pure CSS library of dozens of nice looking and stylish toggles.

PatternFly
An open source design system with dozens of components and layouts to choose from, built for teams to build consistent UIs.

Screenshot.Rocks
Create beautiful browser and mobile mockups in seconds. Lets you customize the device, background canvas, then download as PNG, SVG, or JPEG.
 
Kickstand UI
A UI framework with lots of components, built with accessibility as a focus.

NoDesign.dev
A collection of tools for developers who have little to no artistic talent.

Aeon
A lightweight date time picker built with web components that can be used anywhere.

Frontendor
A library of reusable HTML blocks and templates to help you build beautiful and professional landing pages quickly and easily by copy-paste.

Wireflow
Free online and open source tool for creating beautiful user flow prototypes.

The Top 10 Tools of 2020

Remake
A framework to build web apps and prototypes using nothing but HTML. Editable areas, sortable items, sign-up/log in functionality, and more.

CSS Scan Pro
An extension to "Inspect Element" for Chrome, Firefox, and Safari that lets you instantly get styles, font info, dimensions, animations, and selector for any element on the page.

Web Code Tools
A large set of code generators: CSS effects (gradients, animation, shadows, etc.), HTML tools (audio, video, etc.), Microdata, Twitter Cards, and more.

Shadows
Online tool to make box shadows look smoother using layered shadows.

FAST
From Microsoft, a suite of tools to build enterprise-grade websites, applications, components, design systems, and more.
 
CSS Scroll Shadows
Online tool to create shadows to make scrollable page areas more obvious that they're scrollable.

CSS Layout
A collection of popular components, layouts, and patterns made with CSS.

Exoteric
Make components from cross-browser web standards without thinking too hard. No JSX, no Shadow DOM, no fancy frameworks.

css.gg
This was the 2nd-most clicked tool, originally a CSS-only icon set. Now 700+ open-source CSS, SVG, and Figma UI Icons. Available in SVG sprite, styled-components, and more.

Hacker UI
And here is the number one clicked tool of 2020 (close to 500 total clicks). A design system not associated with any brand, so you can easily integrate it with your own project.
 

A Tweet for Thought

No surprise that the most popular "Tweet for Thought" in this newsletter over the past year was this one from the Twitter account of the Dick King-Smith estate (a children's book author who passed away in 2011). I think we can all agree that this year we just wanted some relief from all the stress!

 

Send Me Your Tools!

Made something? Send links via Direct Message on Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
 

Before I Go...

That's it for 2020. To close out the year, here's a Harvard Health article on How to Boost Your Immune System. Stay healthy!

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

PayPal.me/WebToolsWeekly | Support Me on Patreon | Sponsor Me on GitHub