Issue #598 (Top Tools of 2024 (Part 2))01/02/25
Save Yourself From Intoxicated Sleep
Did you know that EMF exposure from your phone, Wi-Fi, and other electronic devices can significantly disrupt your sleep?
Studies have shown that EMFs interfere with the body’s natural circadian rhythms, leading to difficulty falling asleep, staying asleep, and achieving deep, restorative rest.
Aires Tech offers a scientifically-backed solution designed to neutralize harmful EMFs and support optimal sleep quality.
Start sleeping better and wake up feeling more refreshed with Aires Tech’s advanced EMF protection solutions.
Learn More →
|
As mentioned last week, this week's issue features the top 30 tools of 2024, as determined by clicks in this newsletter. If you missed last week's issue, that one began the top 60 countdown with the 30 runner-up tools. Next week I'll be back with a brand new set of tools for 2025!
As another end-of-year reminder, if you'd like to offer some support to the work I do, here are a few ways you can do that:
- Subscribe to one of my other two newsletters:
- Support me with a small monthly contribution via GitHub Sponsors
- Support me with a one-time end-of-year contribution via PayPal
- Add my email address to your contacts list, to ensure this newsletter never goes into your spam folder. You can also do this by simply hitting reply and saying hi (which tends to "whitelist" a sender)
- Follow me on X or Bluesky
Thanks to all those who have provided support in the past and to those who continue to support the newsletter by subscribing and taking an interest in the content.
Now on to the top 30 tools of 2024!
|
Top Tools of 2024 (#30 – #21)
BriCSS — A simple and customizable low-level CSS library generator, similar to Tailwind, that produces optimizes CSS output and automated interactive documentation.
CSS Grid Generator — A simple interactive tool to help developers create custom CSS grid layouts using the CSS Grid specification, with ability to define columns, rows, gutter size, and cell spanning across rows/columns.
VTable — A high-performance, multidimensional data analysis table component with supports for fast computation and rendering of millions of data points, with flexible and powerful graphic capabilities.
TargetJ — A powerful JavaScript UI framework designed to simplify development and animation, based on a concept called 'targets', used as the building blocks for components.
Start the New Year Right – Stay Hydrated — Kick off your New Year’s health goals with NativePath Hydrate! This powerful electrolyte mix helps reduce dehydration, boost energy, and support muscle recovery. Packed with amino acids and electrolytes, it’s the smart way to stay hydrated in winter without excess sodium or sugars. SPONSORED
Z.Js — Referred to as a "literally low mental overhead" JavaScript framework, as a response to many of the everything-but-the-kitchen-sink solutions that are common, opting instead for simplicity and ease of use.
CSS Variables Editor — Formerly "Design GUI", a multi-featured browser extension that allows you to manage colors using CSS variables, generate color palettes with AI, test for accessibility, and more.
Buttons.cool — A repository of CSS buttons sourced from various creators on CodePen, with options to search by predefined tags, keywords, creator, or keyword. There's also a Tailwind-based button generator if you want to go custom.
EHTML — Meaning "Extended HTML", this is a set of custom elements that helps projects eliminate unnecessary JavaScript by providing custom solutions for some basic and routine tasks in your apps.
Mielo UI — A library of UI components, inspired by a GNOME GUI framework, for quickly creating interfaces on the web similar to those found on desktop.
CSS Triggers — An interactive info site, inspired by an older project, that helps you understand how to write more performant CSS with explanations on which properties affect layout shift, repaints, and composites.
|
Top Tools of 2024 (#20 – #11)
Ninja Backgrounds — A gallery of plug and play modern backgrounds made with Bootstrap, CSS variables, and plain CSS.
Khoshnus — A library that lets you animate SVG-based text with a handwritten effect, with multiple font styles, and the animations are fully configurable and customizable.
Tini — A small, fast, and interoperable framework for building Single Page Apps, Progressive Web Apps, or Desktop or Mobile Apps.
Drag & Drop — A tiny data-first drag-and-drop library for modern apps with lots of features and plugins for extended functionality and customizability and can be used with any JavaScript framework (React, Solid, Vue, Svelte, etc).
Neptune — A table component that allows you to build HTML tables with multiple interactive features, to build grids and data tables.
JavaScript & DOM E-Books Bundle — New to JavaScript? This bundle includes 4 e-books (EPUB, PDF) covering 250+ tips with hundreds of live demos across more than 450 pages of content (PDF version). SPONSORED
MSHR — A collection of 200+ CSS mesh gradients, with the option to create your own custom mesh gradients using an online playground.
Web-Check — An online tool that provides insight into the inner workings of a given website, including potential attack vectors, server architecture, security configurations, and what technologies a site is using.
FlyonUI — An open-source Tailwind components library with semantic classes and powerful JS plugins, with more than 75 components compatible with React, Vue, Svelte, and more.
Reshot — A collection of thousands of SVG icons, icon packs, and illustrations, categorized and available for use in commercial projects, no attribution required.
SVG.io — An AI-based text-to-SVG generator that lets you effortlessly convert your text prompts into stunning SVG images using advanced AI technology.
|
Master a New Language in 2025
Whether you’re planning a winter getaway, setting bold New Year’s resolutions, or exploring something new, Babbel is here to help you start speaking a new language. With just 10 minutes a day, you can begin having real conversations in as little as 3 weeks.
Babbel’s expert-designed lessons and innovative AI Conversation Partner make learning fun, easy, and effective. For a limited time, Web Tools Weekly readers can save up to 67% during Babbel’s New Year Sale—don’t wait! It’s their biggest sale of the year, and it won’t last long.
Save 67% and Start Learning Today! →
|
Top Tools of 2024 (#10 – #1)
Beer CSS — A CSS framework and component library based on Material Design 3, to help you build Material Design UIs fast, with access to 30+ components, example templates, theming, light/dark modes, and more.
EasyFrontend — A huge library of 700+ free UI components, templates, blocks, and sections, for building websites with HTML, React, Bootstrap, and Tailwind.
Imagehover.css — A lightweight CSS library (~19kb) allowing you to easily implement scalable image hover effects, with over 40 hover effect classes to choose from.
Tailwind Generator — A collection of useful tools and generators for Tailwind to create, design, and customize all kinds of UI components using a graphical editor.
Books & Biceps — Get your next book and weekly gym motivation. Join the 20,000+ strong meathead community helping dudes read more, lift more, and live awesome. SPONSORED
AI CSS Animations — A neat little AI-based tool that allows you to generate complex CSS animations using a prompt. Just describe the animation to apply to an element and this will generate the keyframes code (limited free features).
CartoSVG — An online tool to easily design interactive and beautiful SVG maps using a number of different geo-related settings along with customizations for the look of the maps.
|
skellyCSS — A lightweight CSS framework to quickly implement "skeletons" (i.e. grey loading boxes) into your projects.
FastBootstrap — A beautiful and free Bootstrap theme with fully responsive, expertly crafted components, built with Atlassian Design.
Franken UI — An accessible, HTML-first, framework-agnostic, beautifully designed component library, inspired by shadcn/ui, and based on Tailwind and compatible with Uikit 3.
Batman-Comic.CSS — Not too surprisingly, due to curiosity/novelty clicks, this was the #1 clicked tool in this newsletter in 2024! And it wasn't all that close. This one had about 50 unique clicks more than the 2nd place tool above. This one is a niche utility-class library that allows you to easily create Batman and Robin comics using CSS classes that define the character and his facial expressions.
|
Commercial Apps & Classifieds
AI Mastery – A newsletter covering simple, practical career tips to prepare for our AI present. AD
|
CartHustle – Essential insights for e-commerce leaders and marketers, to fuel your online business. AD
|
|
5-Bullet Friday – Every Friday, Tim Ferris sends out an exclusive email with 5 cool things of the week. AD
|
Techpresso – Join 100,000+ free daily readers for the latest AI and tech news, tools, and insights. AD
|
|
FryAI – Hear about the latest AI news before anyone else in this 5-minute email each weekday. AD
|
The SaaS CFO – Learn SaaS metrics and finance to scale your business and career. AD
|
|
|
A Social Post for Thought
A big highlight in the world of CSS this year is the fact that Tailwind recently surpassed 1 billion downloads. Congrats to Adam and the Tailwind team!
Send Me Your Tools!
Made something? Reply to this email or send links via Direct Message on X or via chat on Bluesky (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...
Jamstart is a cool platform for musicians that hooks into your Spotify account, providing song info, chord charts, key, BPM, and more, so you can "Jam along with your Spotify playlists."
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|