Web Tools Weekly - Web Tools #493 - Top 30 Tools of 2022

Advertisement

As I mentioned last week, this is another year-end issue, the last issue of 2022. This one includes a roundup of the 30 most-clicked tools in this newsletter over the past 12 months.

Once again, the list of tools is quite unique and diverse, demonstrating what seem to be the areas of most interest among the Web Tools Weekly audience.

I'll be back with a regular intro next week but as I did last week, below is a list of ways you can support this newsletter and my work on it for 2023:

• 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.
• Subscribe to one of my other tech-related newsletters: Tech Productivity (featuring productivity-related tools, tips, and articles) and VSCode.Email, which covers all things IDE (sorry about the incorrect link last week!).

• Jumbo JavaScript Bundle – 7 JavaScript courses, 42 hours of material, for one low price.
• Learn to Code with React Bundle –  9 React courses, 53 total hours on building apps in React.
• Graphic Design Bundle – 4 fully accredited courses on InDesign, Lightroom, & Illustrator.
• Fullstack Web Dev Bundle – 11 courses, 64 hours to learn React, Vue, Git, Docker, and more.
• Web3 Programming Bundle – 8 courses, 463 lessons, covering blockchain, Web3.js, and more.

All the course links above are affiliate links, so I'll get a cut if you buy something. I've included the same links at the bottom of this issue, in the "Commercial Apps & Classifieds" section. Next week that section will be back to normal with commercial hand-picked links along with two ads.

At last, here's the Top 30 Tools of 2022, enjoy!
 

Top Tools #30 – #21

Measure the Success of 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  

Ava Maker
Online avatar builder to build your own character by customizing just about every part of the facial features, then export as PNG or SVG.

Hope UI
An open source, enterprise grade multi-purpose admin template with 100+ ready-to-use components and elements and includes light, dark, and RTL modes.

Amigo CSS
A simple, custom-first and intuitive CSS framework tailored for beginners. Based on some interesting concepts explained on the site.

Hibiki HTML
A powerful web framework for creating modern, dynamic, front-end applications without JavaScript, that can be fully scripted and controlled by back-end code.

Stylo
A JavaScript rich text editor with no dependencies that adds interactive editing to page elements via a toolbar that appears when you select text in an editable component.

CSS.GUI
A visual builder to create, style, and customize components directly on a page before exporting the raw HTML and CSS.

Simple.css
A classless CSS framework that makes semantic HTML look good by means of some sensible and attractive defaults for all the different HTML elements.

Reasonable Colors
An open-source color system, based on CSS variables, for building accessible and appealing color palettes.

PlainAdmin
A free dashboard admin template with 100+ UI components and 15+ HTML files.

Meshy
Online tool to generate "mesh" gradients. You can randomize the mesh pattern or customize your own colors then download in PNG format.
 

Top Tools #20 – #11

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  

Bunny Fonts
An open-source privacy-friendly and GDPR-compliant drop-in alternative to Google Fonts. Currently includes 1400+ font families.

Stylify
A library that generates utility-first CSS dynamically based on what you write. Interesting because the class names basically look almost exactly like real CSS, so this seems to be the next step after something like Tailwind.

Wanda
An open-source design system from AI company Wonderflow, with a focus on principles of accessibility and 'form follows function'.

Symbols to Copy
A database of copy-paste HTML symbols, entities, characters, and codes in different formats including ASCII, HEX, CSS and Unicode.

Open UI
Not exactly a framework but an industry standard set of guidelines to define how developers can style and extend built-in web UI controls, such as select dropdowns, checkboxes, radio buttons, etc.

State of California Design System
A design system for digital teams in California, in the USA, to build accessible, consistent, and performant services and products for California-based users.

Bamboo CSS
A classless CSS library that adds attractive default styles for all HTML elements. Useful to add simple styles to HTML landing pages or demos.

IT Tools
A set of handy little online tools for web developers including converters, generators, some cheat sheets, and more.

Qwik
A new kind of web framework that uses less than 1kb of JavaScript that can deliver instant loading web applications at any size or complexity.

Siimple
An open source and fully customizable CSS toolkit that provides a responsive and minimalistic starting point for your projects. Includes UI elements, helpers, CSS icons, and more.
 

Top Tools #10 – #1

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  

Lorem Faces
AI-generated photos of people's faces to use in mockups. Guaranteed to creep you the hell out and if you see yourself here that's purely a coincidence and has nothing to do with the government or the CIA or anything.

HTTP Status Dogs
HTTP status codes represented by appropriate dog photos. Similar to an old project, but this one has more codes represented and the images are available in various formats should you want to use them for your own project.

clay.css
A CSS utility class for applying inflated fluffy 3D "claymorphism" styles to elements. Fully customizable and extensible with CSS variables or via a Sass mixin.

john-doe
A website in a single HTML file. It uses #hashes in the URL along with the :target pseudo-class to show and hide pages/content.

Mdash
Billed as "a new kind of UI library" that's 100% standards-based and has a small footprint, no dependencies, and no build-step.

Preline
An open-source set of 250+ prebuilt UI components based on Tailwind CSS and compatible with React and Vue.

UI Buttons
100 modern CSS buttons featuring unique and interesting styles and mouseover effects.

AgnosticUI
A set of framework-agnostic UI components that work in React, Vue, Angular, Svelte, or vanilla JavaScript.

TimelineJS
Build a rich, interactive timeline component that you can embed on a page. You can build via a Google Sheet or use code for a more customized look.

JSON Crack
This was the #1 most-clicked tool of the year (270+ unique clicks). When I included it, it was called "JSON Visio". It's a simple visualization tool and formatter for your JSON data with no forced structure. Paste your JSON and view it visually using various flow-chart formats.
 

Affiliate Links and Classifieds

A Tweet for Thought

This guy public speaks. That's how you engage your audience.
   

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

Infinite Mac is another one of those OS-in-the-browser demonstrations, this one nicely mimicking what it was like to use a Mac in the mid-1990s.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly
PayPal.me/WebToolsWeekly