Issue #492  (The Top Tools of 2022 (Part 1))12/22/22

We've just about reached the end of the year. I hope all of you are doing your best to stay happy and healthy and hopefully you'll get some time to spend with family or friends during the next few weeks.

For this week and next week I'm featuring the Top 60 Tools of 2022, based on unique clicks in this newsletter. Not all of these tools were released in 2022, but some of them are tools I discovered in the past year. There's quite a variety of tools here so there should be lots for you to revisit!

In the meantime, I just wanted to thank everyone for their loyalty and support over the past year. If you'd like to offer a little extra support to the newsletter, here are some ways you can do that:

• I just released a brand new JavaScript E-book based on content I've published here and on my blog over the past few years: JS & DOM Tips Volume 4. If you want the best possible value when purchasing it, you can buy all 4 volumes as a bundle.
• I have two other smaller newsletters that you might be interested in: Tech Productivity (featuring productivity-related tools, tips, and articles) and VSCode.Email, which covers all things IDE (mostly VS Code).
• If you just want to straight-up donate, you can use this PayPal.me link.
• Do you run a startup or some kind of SaaS? All of my newsletters reach a tech audience with good open and CTRs, with ad prices for all budgets. If you want to advertise, visit Lazarpress, my primary newsletter portal, click on the newsletter you want and use the "Sponsor" page to get details.
• At the bottom of this week's issue, I have some affiliate links for web development courses by Wes Bos. If you buy through one those links, I get a small cut.

Top Tools #60 – #51

Build Faster by Actually Using Your Components 🚀
Hot out the oven! Omlet is a code-based component analytics product to help frontend dev teams drive component adoption, make confident updates, and prove the value of your design system.      SPONSORED  

WebGi Camera Landing Page
A template for building scrollable landing pages with GSAP, ScrollTrigger, and WebGI, with TypeScript and Parcel built in. The demo is pretty cool, albeit very resource intensive.

CSS Fingerprint
A resource for understanding and learning how to track users via CSS. You can click to view your own browser's CSS-only fingerprint.

PostSrc Tailwind Components
A collection of 50+ Tailwind components divided into about 19 categories of UI elements (cards, alerts, buttons, badges, etc).

Almond.CSS
A collection of class-less CSS styles to make simple websites look better. It normalizes styles for better cross-browser behaviour along with some extra styles that can be customized.

Piling.js
A JavaScript library for interactive visual piling of small multiples (i.e. like a grid-based chart). Includes lots of interactive demos you can try out.

Virgo
A free HTML, CSS, and JavaScript landing template with 42 components, 6 pages, and no third-party plugins.

Onion
This tool is based on an article that I wrote demonstrating how to animate from display: none to display: block (which you can't do in CSS). The author has put the solution into a little JavaScript utility.

MingCute
A set of 1,800+ open-source icons, searchable, available in SVG or PNG format, and the online app lets you add icons to collections before downloading.

Lightning Builder
A free browser-based drag-and-drop website design tool that helps you create professional website mockups in minutes.

Scroll Btween
A native JavaScript scroll library with no dependencies that lets you easily tween CSS values on a DOM element depending on its position in the viewport.
 

Top Tools #50 – #41

Reactive: Instant Live Selling for Your Shopify Site
Our app turns your website into a live selling channel. Use gamified engagement tools to increase sales and average order value. Download and go live in just 90 seconds. Bring the retail experience to your customers.   SPONSORED  

Text Cleaner
An all-in-one text cleaning and text formatting tool that can perform numerous simple and complex text operations including formatting, removing line breaks, stripping HTML, converting case,  etc.

uiverse
A gallery of community-built HTML and CSS components that includes buttons, loaders, custom checkboxes, toggles, and inputs.

Fonoster
An open-source alternative to Twilio, the popular web service that enables programmable communication tools for making and receiving phone calls, text messages, etc.

Zag
A collection of framework-agnostic UI component patterns like accordion, menu, and dialog that can be used to build design systems for React, Vue, and Solid.js.

Allinone.tools
A one-stop resource with tons of little utilities for formatting, editing, generating, minifying, and so on. This might be the largest of such collections I've seen.

Martian Mono
A monospace typeface family consisting of a variable font and 28 styles. Currently includes basic Latin, figures, punctuation, and essential symbols, with other features in the works.

AnimatiSS
A collection of drop-in CSS animations, each testable on the page, categorized under 10 styles, with multiple variations on each of the styles.

HTMLShell
An online tool to generate a basic HTML template. Use various toggles and options to include or exclude different meta tags and other features.

Formation
20+ open-source and customizable interactive components, written in TypeScript and WCAG 2.0 compatible.

Vanta.js
A gallery of customizable, animated 3D backgrounds you can add to any project. Use with care, if at all, as these would cause performance issues.
 

Top Tools #40 – #31

Reactive: Instant Live Selling for Your Shopify Site
Our app turns your website into a live selling channel. Use gamified engagement tools to increase sales and average order value. Download and go live in just 90 seconds. Bring the retail experience to your customers.   SPONSORED  

Kumiko Creator
Online tool to generate "kumiko" patterns based on any image you upload. Kumiko is an ancient Japanese woodworking technique.

Atomico
A micro library of modern syntax created that simplifies component creation by replacing the use of classes with functions to manage everything.

mmmotif
An SVG generator for creating 3D-like isometric patterns that can be customized via settings for angle, scale, translate, skew, and a selected shape for the repeating pattern.

DevToys
A native Windows app that's a "Swiss army knife" for developers. Works offline and includes 20+ tools – encoders, decoders, converters, hash generation, text diffing, and more.

mediaquery.style
A quick reference for looking up the syntax for some of the most common media queries with code and explanations for each.

Lyra
A fast, in-memory, typo-tolerant, full-text search engine written in TypeScript and works both on client and server.

W3.CSS
A CSS framework from W3Schools that's described as a quality alternative to Bootstrap.

Animatize
A really cool little animation builder that lets you create simple animations by just dragging your an object around a canvas. Select the background and object to animate, then drag the object and generate the CSS.

MetaliCSS
A tiny, dependency-free JavaScript library that gives your elements a shiny, metallic look. You can try it out interactively on the page.

Paper Prototype CSS
A CSS framework designed to make components on a page appear like a paper prototype.

Affiliate Links and Classifieds

A Tweet for Thought

A perfect video illustration demonstrating why front-end developers get all the credit.
   

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

If you want ideas for movies or shows to watch in the next few weeks, check out A Good Movie To Watch. Includes lots of ways to discover via genre, category and so on but the key point, as they explain: "Everything you see here will have at least a 70% user score (7/10 on IMDb for example), combined with a 70% critic approval score (on Rotten Tomatoes)."

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris