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

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #389 • December 31, 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:
  • 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.
 
Pixel Lite

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.
 
Screenshot.Rocks

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.
 
FAST

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!

A Tweet for Thought
 

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

Older messages

Web Tools #388 - Top Tools of 2020 (Pt. 1)

Thursday, December 24, 2020

Web Tools Weekly WEB VERSION Issue #388 • December 24, 2020 This week and next week are down weeks work-wise for many of you, so these two issues will feature this newsletter's 60 most clicked

Web Tools #387 - ES6 Generators, React Tools, Git/CLI, Uncats

Thursday, December 17, 2020

Web Tools Weekly WEB VERSION Issue #387 • December 17, 2020 Advertisement Cubbit Personal Cloud Sync store and share your files with Cubbit Cloud. Enjoy the highest security standards and stop paying

Web Tools #386 - Frontend Frameworks, SVG, Build Tools

Thursday, December 10, 2020

Web Tools Weekly WEB VERSION Issue #386 • December 10, 2020 The following intro is a paid product review for Preflect, a microsurvey and navigation tool that helps visitors stay engaged on your website

Web Tools #383 - Black Friday, CSS Tools, SVG, CMS's

Friday, December 4, 2020

Web Tools Weekly WEB VERSION Issue #384 • November 26, 2020 Advertisement Cubbit Personal Cloud Sync, store, and share your files with Cubbit Cloud. Enjoy the highest security standards of zero-

Web Tools #385 - JS Utilities, VS Code, React Tools

Friday, December 4, 2020

Web Tools Weekly WEB VERSION Issue #385 • December 3, 2020 Advertisement JavaScript Speed Coding Challenge Are you ready to put your JavaScript skills to the test? Enter our JavaScript Speed Coding

You Might Also Like

Import AI 399: 1,000 samples to make a reasoning model; DeepSeek proliferation; Apple's self-driving car simulator

Friday, February 14, 2025

What came before the golem? ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Defining Your Paranoia Level: Navigating Change Without the Overkill

Friday, February 14, 2025

We've all been there: trying to learn something new, only to find our old habits holding us back. We discussed today how our gut feelings about solving problems can sometimes be our own worst enemy

5 ways AI can help with taxes 🪄

Friday, February 14, 2025

Remotely control an iPhone; 💸 50+ early Presidents' Day deals -- ZDNET ZDNET Tech Today - US February 10, 2025 5 ways AI can help you with your taxes (and what not to use it for) 5 ways AI can help

Recurring Automations + Secret Updates

Friday, February 14, 2025

Smarter automations, better templates, and hidden updates to explore 👀 ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

The First Provable AI-Proof Game: Introducing Butterfly Wings 4

Friday, February 14, 2025

Top Tech Content sent at Noon! Boost Your Article on HackerNoon for $159.99! Read this email in your browser How are you, @newsletterest1? undefined The Market Today #01 Instagram (Meta) 714.52 -0.32%

GCP Newsletter #437

Friday, February 14, 2025

Welcome to issue #437 February 10th, 2025 News BigQuery Cloud Marketplace Official Blog Partners BigQuery datasets now available on Google Cloud Marketplace - Google Cloud Marketplace now offers

Charted | The 1%'s Share of U.S. Wealth Over Time (1989-2024) 💰

Friday, February 14, 2025

Discover how the share of US wealth held by the top 1% has evolved from 1989 to 2024 in this infographic. View Online | Subscribe | Download Our App Download our app to see thousands of new charts from

The Great Social Media Diaspora & Tapestry is here

Friday, February 14, 2025

Apple introduces new app called 'Apple Invites', The Iconfactory launches Tapestry, beyond the traditional portfolio, and more in this week's issue of Creativerly. Creativerly The Great

Daily Coding Problem: Problem #1689 [Medium]

Friday, February 14, 2025

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Google. Given a linked list, sort it in O(n log n) time and constant space. For example,

📧 Stop Conflating CQRS and MediatR

Friday, February 14, 2025

​ Stop Conflating CQRS and MediatR Read on: m​y website / Read time: 4 minutes The .NET Weekly is brought to you by: Step right up to the Generative AI Use Cases Repository! See how MongoDB powers your