Web Tools #441 - The Top Tools of 2021 (part 2)

Advertisement

As mentioned last week, for the final issue of 2021 I'm counting down the top 30 tools of 2021. These are the tools that received the most unique clicks in the emails sent throughout the year.

Last week was the start of the countdown with tools 60 through 31. This week you'll see what the hottest tools of the year were.

As is the case every year, just about all the links in the top 60 are useful libraries, frameworks, and other practical tools that many of you have likely bookmarked. But note that in some cases, a tool makes this list because it got a lot of clicks due to sheer curiosity.

As a final note, I'd like to thank everyone for their support this past year. I hope you all will stay healthy into 2022 and have exciting new projects to work on.

Top Tools #30 – #21

Best ETL Tools in 2021
ETL tools allow you to gather all of your data in one organized place for better analysis. Learn about the best tools, including Mozart Data’s tool that can be set up in just hours.  sponsored 

Theme Builder
Design accessible color systems, responsive type scales, and more. Export as JavaScript, CSS, JSON, or CSS/Sass Variables.

Unicode Arrows
A one-stop location for copying and pasting Unicode arrows along with their code equivalents. You can even purchase Unicode arrow jewelry!

Type Scale Clamp Generator
Interactive tool that generates CSS using the clamp() function, for producing a type scale for your headings and other common page elements.

AnimXYZ
A composable CSS animation toolkit to help you create and customize animations powered by CSS variables. Built for Vue, React, SCSS, and CSS.

Frontend Toolkit
A whole slew of tools for recurring front-end tasks. Color conversion, image and SVG optimization, JSON formatting, and lots more.

colorpalettes.earth
Color palettes for inspiration on new projects where the palettes are sourced from the colors found in images from nature.

Uncut
A catalogue of open-source typefaces with a focus on contemporary type.

Lowdefy
An open-source low-code framework to build web apps, admin panels, business intelligence dashboards, workflows, and CRUD apps with ease.

JavaScript Booster
A popular VS Code extension to boost your productivity with advanced JavaScript or TypeScript refactorings and commands.

Layout Patterns
From Google Developers' web.dev, a collection of layout patterns built using modern CSS APIs that will help you build common interfaces such as cards, dynamic grid areas, and full-page layouts.
 

Top Tools #20 – #11

Find, Visualize and Apply the Hidden Gems in Your Spam Inbox
Checkmate is the first tool ever built to sort, visualize and apply the deals from your spam inbox while you shop, finding hidden gems and saving early users an average of $40 per checkout. It’s completely free! Try Checkmate today!  sponsored 

Baseline Background Remover
Online tool to delete backgrounds from an image using AI with a single click.

Theatre.js
A JavaScript animation library with a GUI that that animates the DOM, WebGL, and any other JavaScript variable. Includes some nice examples on the home page.

Transition.css
A collection of 45+ drop-in CSS animations that you can test out directly on the page.

The Component Gallery
An up-to-date repository of interface components based on examples from the world of design systems.

party.js
A JavaScript library to brighten up a user's experience with visual effects (e.g animated confetti, sparkles, hearts, etc).
 
Headless UI
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS, compatible with React and Vue.

Turbo
The speed of a single-page web application without having to write any JavaScript. Uses a number of different techniques, including asynchronous link loading, lazy loading, and more.

tidy.js
Includes a slew of functions for tidying up your data. Sort of like Underscore.js for data wrangling.

Tailwind UI Kit
250+ free components and templates based on Tailwind CSS 2.0 and compatible with React, Vue, and Angular apps.

Tailwind Components
A repository of community-built open source Tailwind UI components and templates to bootstrap your new apps, projects or landing pages.
 

Top Tools #10 – #1

Find, Visualize and Apply the Hidden Gems in Your Spam Inbox
Checkmate is the first tool ever built to sort, visualize and apply the deals from your spam inbox while you shop, finding hidden gems and saving early users an average of $40 per checkout. It’s completely free! Try Checkmate today!  sponsored 

Pikaday
A refreshing JavaScript date picker – lightweight, no dependencies, and modular CSS.

HTML Boilerplates
Online tool to start a web project by generating and downloading a custom HTML boilerplate. Just flip the switches you want and the code is added for those items automatically.

Whirl
A whole slew of unique pure CSS loading animations, most of which you probably haven't seen elsewhere so they might not work for just any project.

Riju
A fast online playground for every programming language. This literally has just about everything.
 
DevUI
An open-source front-end component library, icon set, admin template, and more, suitable for enterprise-level apps.

Pollen
A library of CSS variables, heavily inspired by Tailwind, for rapid prototyping, consistent styling, and as a zero-runtime utility-first foundation for your own design systems.

AlterNight
A modern, dark VS Code theme, marketed for developers who code at night.

UIsual
Free landing page templates in grayscale (so they're ready to customize), built with plain HTML and CSS, no JavaScript.

Supabase UI
An open-source UI component library inspired by Tailwind and Ant Design and suitable for use with Tailwind's utility classes.

CSS Layout Generator
This was the most-clicked tool of 2021 coming in at 293 unique clicks (and over 400 overall). It's a multi-featured layout generator for producing all sorts of custom layouts using either Grid Layout or Flexbox syntax. Includes lots of options for fine-grained control over the output.
   

Affiliate Links

ICYMI, Wes Bos is having his usual end-of-year sale on all his excellent web development courses. Here's a list of what he offers:

Master Gatsby - Build modern websites with React, Gatsby and friends. Learn to use a headless CMS, Scoped CSS, and Serverless Functions.

Beginner JavaScript - A fun, exercise heavy approach to learning Modern JavaScript from scratch. This one is for absolute beginners to intermediate devs who want to absolutely nail their JS Fundamentals.

Advanced React and GraphQL - Build a full-stack online store in React.js, Keystone.js, Apollo, GraphQL, Next.js and Stripe with server-side rendering and JWT based authentication.

React For Beginners - A premium step-by-step training course to get you building real world React.js + Firebase apps and website components.

ES6+ For Everyone - Recently updated to include Async + Await. An update for anyone familiar with JavaScript but looking to update to the modern syntax and features.

Learn Node - Build a Server Side application and learn the ins-and-outs of Express, Routing, Middlewares, session-based auth, and MongoDB.
 

A Tweet for Thought

The Tweet in this section of the newsletter that received the most clicks in 2021 was the one shown below from the popular Internal Tech Emails Twitter account. This Tweet features a screen grab of an email Steve Jobs sent to Bill Gates in 1998.

 

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

One of the most popular links this year was a video I shared in the intro called 25 VS Code Productivity Tips and Speed Hacks. It had well over 300 unique clicks. And on a related note...

I'm launching a brand new newsletter called vscode.email that will feature tools, articles, tips, and news on VS Code, the popular code editor. You can subscribe today but the first issue probably won't go out until late January or February.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  /  Patreon / GitHub Sponsors  /  E-Books / Buy Me a Coffee