Web Tools #544 - The Top Tools of 2023 (Part 1)

Advertisement

This is the next-to-last issue of 2023 so, as is customary each year in this newsletter, I've put together the Top 60 Tools of the Year, based on click-through rates and open rates for issues sent over the past 12 months.

As always, the list includes a wide variety of tools in different categories including some that are just plain unique but not necessarily the most practical.

This week's issue has tools #60 through #31 in the countdown and next week will cover #30 down to the #1 tool of the year.

I hope everyone has a healthy and safe holiday break (assuming you're taking some time off) and if you'd like to offer your support for this newsletter, below are some ways you can do that:

• Make a one-time donation via PayPal
• Buy my JavaScript E-Books bundle that includes 250+ unique JavaScript and DOM tips
• Buy a web dev course through the affiliate links found near the bottom of this newsletter (see "...Classifieds" section)
• If you have an app, service, or other commercial tool to promote, you can buy an ad in this newsletter for 2024 Q1
• Subscribe to my other newsletters: Tech Productivity and VSCode.Email

Thanks to all for your loyalty and readership!

Now on to part 1 of the Top 60 Tools of 2023!
 

Top Tools of 2023 (#60 – #51)

Kuma UI
Described as "the future of CSS-in-JS", this is a headless, utility-first, and zero-runtime UI component library and toolkit.

Boxslider
A small library with zero dependencies that provides a light-weight, responsive content slider with various slide transition effects for modern browsers.

Effect
A powerful TypeScript library designed to help developers easily create complex, synchronous, and asynchronous programs.

Have You Heard? ClickUp AI Has Officially Launched
Two million teams use ClickUp, the top productivity platform for team collaboration. Now, with ClickUp AI, save time on project updates, shorten meetings, and cut redundant work—what took 30 minutes now takes seconds!     SPONSORED 

HatTip
Instead of writing server code that only works with Express.js, write server code that can be deployed anywhere: AWS, Cloudflare Workers, Vercel, VPS, etc.

LiveViewJS
A simple yet powerful framework for LiveViews in Node.js and Deno that allows you to build single-page app experiences with real-time and multi-player functionality.

Scrollbar.app
A unique CSS generator for producing the code needed for all the parts of a custom scrollbar solution with CSS. The page itself is a live interactive demo that changes the scrollbar values on the fly.

OpenGpt
An open-source AI platform that allows all users to use and create ChatGPT applications in seconds.

Free Icons
A collection of over 22,000 freely available icons in SVG format, and searchable by keyword.

Materialize
A responsive front-end component library, based on Google's Material Design, that's a fork of a similar project that's no longer maintained.

qr-code
A dependency-free, SVG-based web component that generates an animatable and customizable QR code.
 

Top Tools of 2023 (#50 – #41)

GradientGenerator
An interactive gradient builder that allows you to build advanced layered gradients, with the option to save gradients to your library or import community-built gradients.

iDraw.js
A simple Canvas-based JavaScript framework for creating apps that allow drawing on web pages. Includes a live playground to try it out.

VanJS
An ultra-lightweight, zero-dependency, and unopinionated reactive UI framework based on pure vanilla JavaScript and DOM, similar to React but without JSX.

ServerAvatar – A Smart Cloud Hosting Solution
Experience the actual power of cloud hosting. Host, manage and secure your PHP based sites on your own virtual machines from Google Cloud, AWS, DigitalOcean or any other provider with our easy, efficient and centralised control panel.    SPONSORED 

Mamba UI
A free, open-source collection of 100+ UI components and templates based on Tailwind CSS, with code examples for HTML, Vue, and JSX-based apps.

Termino.js
A dependency-free JavaScript component that lets you add embedded terminal animations, games, and apps to web pages.

SVG Chart Generator
A nicely designed and easy-to-use online tool to generate customized SVG-based charts and graphs.

PeepsLab
An interactive tool to create your own "peep" (i.e. profile avatar). You can generate a random avatar or randomize the different parts of the "peep" (hair, face, body, etc).

Ribbon Shapes
A gallery of 100+ copy-pasteable pure CSS ribbons, with just about any ribbon style you can imagine included here.

big-AGI
A responsive personal AI application powered by GPT-4 and beyond, with AI personas, AGI functions, text-to-image, voice, response streaming, code highlighting and execution, PDF import, and more.

Easy Email
A React.js drag-and-drop email editor based on MJML, the popular HTML email framework, that lets you transform structured JSON data into HTML compatible with major email clients.
 

Top Tools of 2023 (#40 – #31)

CSS Components
Billed as "not another styling system", but rather a lightweight utility to compose CSS styles into standard React components.

Toaster
An impressive pure CSS 3D editor that looks like Canvas or WebGL where the elements are built with nothing but HTML and 3D transforms.

Fontpair
A one-stop resource for finding fonts that match well together for use as headings and accompanying body text.

Breadit
A modern full-stack Reddit clone built with the Next.js app router, TypeScript, and Tailwind.

Mimic.css
An older project that apparently is getting updated soon, it's a CSS animation library with lots of unique and interesting animations you can add via class names in HTML.

ServerAvatar – A Smart Cloud Hosting Solution
Experience the actual power of cloud hosting. Host, manage and secure your PHP based sites on your own virtual machines from Google Cloud, AWS, DigitalOcean or any other provider with our easy, efficient and centralised control panel.    SPONSORED 

TW Elements
A set of 500+ Bootstrap components recreated with Tailwind CSS, but with better design and more functionality.

Autocomplete
An open-source, production-ready JavaScript library for building customizable autocomplete experiences for form inputs and search fields.

CSS Loaders
A huge collection of 500+ unique, colorful, and interesting pure CSS loading animations, divided into 25+ categories.

Flectofy
An interactive tool to create a very specific kind of custom blob shape using rounded squares and rectangles, which you can download as PNG or SVG.

Picyard
An online tool to generate attractive backgrounds for screenshots, code snippets, device mockups, social media posts, and more.
 

Affiliate Links and Classifieds

An X Post for Thought

If you're starting the new year looking for a new position, here's your comforting reminder that you're not alone in your fear of the job interview process for software engineers.
   

Send Me Your Tools!

Made something? Reply to this email or send links via Direct Message on X @LouisLazaris (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're planning on doing some handy work around the house during the holidays, you might enjoy checking out the Periodic Table of Tools. Click to view any of the tools in the table to show different variations of each and you can even discuss any of the tools in a comments section for each tools page.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@LouisLazaris
PayPal.me/WebToolsWeekly