Issue #440  (Top Tools of 2021 (Part 1))12/23/21

As I do every year at this time, this week's and next week's issues will take a look back at the tools you clicked the most in this newsletter. In total, I'll go over the 60 most-clicked tools – 30 this week and 30 next week.

The basis for determining what's 'most clicked' is slightly different than just 'most clicked'. Firstly, I only go with MailChimp's unique clicks in email opens only (no web clicks get counted). Also, some issues have many more 'opens' than others. I calculate the click value by comparing the number of unique clicks to the number of unique opens for that issue. I think this provides a much better overall view of what were the hottest tools.

As an example, a tool that was clicked 200 times in an issue that was opened by 4,200 people would be a click rate of 0.048. On the other hand, a tool that was clicked 180 times in an issue opened by 3,500 would be 0.051, even though it had fewer clicks. So that latter tool would appear higher in the list.

In case you were wondering, the most unique clicks for a single tool in 2021 was 293 – and you'll find out next week what tool that was!

Thanks to everyone who stuck around through this year, I appreciate your support. Near the bottom of this issue, I've included links to web development courses by Wes Bos, all currently discounted. You can support this newsletter by using those links to purchase a course.

Top Tools #60 – #51

Springboard Teaches all of the Web Tools You Need for a High-Paying Job
Self-paced, online bootcamp. Get mentored 1:1 by leading web development experts who work for top companies like Google, Facebook and Airbnb. Be backed by the proven Springboard guarantee: get a job or your money back.  sponsored 

Open Props
Pre-defined components made up of CSS variables that you can drop into a project to build your own components or design system.

NextUI
A beautiful, responsive, open-source, fast, and modern React UI library that's themeable and has light and dark UI modes.

Dopefolio
A blazing fast, responsive, multi-page portfolio template for developers that has strong Lighthouse audit scores out-of-the-box.

Vizzu
A free, open-source JavaScript library for creating static data charts and animated data stories and visualizations.

10015 Tools
An all-in-one toolbox of text, image, coding, color, CSS tools, and more, with Chrome and Firefox extensions available to more easily access the tools.

Snoweb
A beautiful set of optimized SVG icons built with HTML and CSS, many including animated hover effects.

Tails
A drag-and-drop page creator built for Tailwind CSS that includes 220+ components.

MapLibre
A community-governed collection of open source mapping libraries for web and mobile applications (iOS/Android).

SVG Repo
Browse 300,000+ SVG vectors and icons. Each one you select lists the license and it appears most of these are free for commercial use.

Animated Backgrounds
A gallery of animated backgrounds, sourced from various CodePen demos. Not all pure CSS, some use JS.
 

Top Tools #50 – #41

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 

Pico.css
A minimal CSS framework for semantic HTML. Elegant styles for all natives HTML elements without classes, and dark mode automatically enabled.

Coding Fonts
From CSS-Tricks, a one-stop micro site to showcase coding fonts and includes paid and free fonts along with the ability to switch between dark/light modes.

UI-Neumorphism
React component library of 50+ components, designed based on the "new skeuomorphism" or "neumorphism" UI/UX trend.

Beautiful CSS Buttons
A large gallery of 80+ CSS buttons, from simple examples to some more complex, animated, etc.
 
Shaper
An interactive tool to fiddle with various UI settings live on the page, after which you can grab the code (which uses CSS Variables) using the "specs" button.

Prestige
A text-based HTTP client in the browser, an interface-less Postman.

HTML.cafe
A really simple online HTML editor playground with the ability to save demos and share the URLs.

Charts.css
A modern CSS framework that uses CSS utility classes to style HTML elements as charts (area, bar graphs, line charts, 3D charts, animated charts, etc).

Buttons Generator
A gallery of free CSS buttons in a number of different categorized styles, just click a button to copy the CSS.

Doodad Pattern Generator
Generator to create unique, seamless, royalty-free patterns that you can download in SVG, JPEG, PNG, or CSS (using data URI).
 

Top Tools #40 – #31

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 

Kaboom
A fun to use JavaScript game library that helps you make games quickly using an elegant API.

Skuawk
A repository of unique high-quality public domain photos, categorized. Includes some really nice options.

Glassmorphism CSS Generator
An interactive tool to create a semi-transparent 'glass' effect using CSS (that's apparently part of a future CSS UI library).

Kalia
A nice VS Code dark color scheme with pastel colors, contextual syntax-highlighting, balanced contrast, and more.

AdminJS
An auto-generated admin interface that can be plugged into your Node.js app. You provide database models and it generates UI that allows you to manage content.
 
Pancake
A lightweight, fast, and easy-to-use HTML5 2D game framework powered by HTML Canvas.

tailwind-dashboard-template
A free admin dashboard template built on top of Tailwind CSS and fully coded in React.

Iconduck
A search engine of 118,000+ open source icons and illustrations, categorized and indexed via keywords.

Luxa CSS
A lightweight CSS library with predefined component classes along with modifier classes, appropriate for any development context.

Glitter Text
A really neat glitter text generator. Type your text then use the "save" link to grab the SVG that produces the glitter effect.
 

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 - the best way to get up to speed on React fundamentals

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

I don't know why people apparently got offended at Microsoft's over-aggressive marketing of their Edge browser. I mean, isn't this more or less how Chrome became so dominant, through this kind of over-the-top marketing by Google?

 

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

I do not condone this behaviour, but the Busy Simulator is hilarious. Never again appear like you're not getting stuff done.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris