Web Tools Weekly
Tools for Web Developers

Issue #565  (Chris Coyier, CSS/HTML, AI Tools, JS Utils)05/16/24


Support Web Tools Weekly via GitHub Sponsors
It's getting harder and harder to find viable advertising options for a small- to medium-sized newsletter like this one. If approximately 2,000 of my subscribers contributed $1 per month, it would be enough to keep things afloat without the need to seek out new commercial sponsors.

You can contribute to Web Tools Weekly by sponsoring me on GitHub with a one-time donation or a monthly sponsorship.

Sponsor Web Tools Weekly on GitHub

If I could fund the newsletter primarily on contributions from readers, then I wouldn't have to ever seek out advertising and I could remove advertising from the newsletter completely.

All three newsletters I produce are basically a one-man operation, so my expenses can be covered with about 10% of the audience contributing at least $1 per month.

Sponsor Web Tools Weekly on GitHub →

A short while ago I reported that CSS-Tricks was kinda-sorta back with some recent updates. There doesn't seem to be a lot of new stuff there, but some of the "new" posts are updates to older posts. Besides that, new posts still seem to be rare.

But in case you didn't know, Chris Coyier, the original CSS-Tricks founder, is still fairly active in writing about front-end technologies:

  • Chris's personal blog where he writes about and links to all sorts of things including some front-end stuff.
  • Chris's author page on the Frontend Masters blog where he's been contributing since about November, with lots of stuff in the same vein as he posted regularly on CSS-Tricks before it was sold to Digital Ocean.
  • The CodePen blog where there's more of a focus on the CodePen platform, but still lots to help those interested in learning about the latest in front-end technologies.

So if you haven't yet added those to your RSS feed, be sure to do so. And while I'm on the topic of RSS feeds, I continue to sporadically update my Frontend Feeds GitHub repository, though it does probably need a larger overhaul at the moment. Feel free to submit a PR if you want anything added.

Now on to this week's tools!

CSS and HTML Tools

go-masonry-gallery — A Go-based CLI program that scans a local directory for images and generates a simple HTML gallery using the experimental CSS Masonry layout.

Color Picker — An online tool that lets you upload any image and then use an eyedropper tool to "click" to generate colors for a color palette from the image.

FormSubmit — A service that provides easy form endpoints for your HTML forms so you can connect your form to our form endpoint to receive an email with the submissions, no JavaScript or backend code required.

Support This Newsletter — This newsletter is a one-man operation and finding viable sponsors is getting more difficult in the current market. You can support the newsletter with a one-time donation via PayPal.    SPONSORED 

CSS Shape — A huge collection of shapes made with a single HTML element and pure CSS, and you can click to view any shape to customize and/or view and copy the code.

CSS Shape

The Good Colors — A tool that creates a color palette using OKLCH, which ensures consistent perceptual changes in lightness and chroma, and supports wide gamut displays and checks contrast ratios using APAC.

WyW-in-JS — Short for "Whatever-you-want-in-JS," this is a toolkit for creating zero-runtime CSS-in-JS libraries, so you can build your own solutions with arbitrary syntax, functionality, and independent from specific implementations.

Signals for Tailwind CSS — A Tailwind plugin that relies on the new Style Queries CSS feature to reactively enable a custom state, which can then be consumed by any of its descendants in the DOM.

Ninja Backgrounds — A gallery of plug and play modern backgrounds made with Bootstrap, CSS variables, and plain CSS.

Tailblocks — An online tool to auto-convert Tailwind HTML to WordPress Block code with editable Gutenberg styles.

ChatGPT and AI Tools

Spec API — A JavaScript package to quickly spec your APIs for the Swagger / OpenAPI interface, using sleeksky/alt-schema for specifying JSON schema.

Rispose — Embed a free AI assistant on your website that's trained on your data, with up to 10,000 files permitted for training.

unstock.ai — AI-generated logos, icons, illustrations, and stock photography, available in SVG and PNG formats, with ability to custom create your own with a prompt.


Perplexica — An AI-powered search engine that's an open-source alternative to Perplexity AI.

Anytime Mailbox — Business starters, are you in need of a business address separate from your home? Anytime Mailbox provides a seamless solution, securing a private, professional address with added benefits like mail forwarding and scanning for ultimate convenience.     SPONSORED 

FireCrawl — An API service that takes a URL, crawls it, and converts it into clean LLM-ready markdown, no sitemap required.

Open WebUI — An extensible, feature-rich, and user-friendly self-hosted WebUI designed to operate entirely offline, with support for various LLM runners, including Ollama and OpenAI-compatible APIs.

Morphic — An AI-powered search engine with a generative UI, built with Next.js, shadcn/ui, Radix, etc.

FreeGPT35 — A Node.js package that lets you utilize the unlimited free GPT-3.5-Turbo API service provided by the login-free ChatGPT Web.

Scalar — A platform to build open-source tools (a testing client, docs, mock server, etc.) with first class OpenAPI support.

The Morning Paper for Hacker News Readers
Want a byte-sized version of Hacker News that takes just a few minutes to read? 

Try TLDR's free daily newsletter.

TLDR covers the most interesting tech, startup, and programming stories in under 5 minutes.


No sports. No politics. No weather.

TLDR is read by 1,250,000 software engineers, founders, and tech workers.

Subscribe for Free →


JavaScript Utilities

Google Indexing Script — A Node.js script to get your website indexed on Google in less than 48 hours using the Google API (within the limits that the API allows).

gpu-curtains — A small, lightweight WebGPU rendering engine that can be used as a genuine 3D engine by turning HTML elements into textured planes, allowing you to animate them via WGSL shaders.

CrossWS — An elegant, typed, and simple interface to implement platform-agnostic WebSocket servers.

Anytime Mailbox — Business starters, are you in need of a business address separate from your home? Anytime Mailbox provides a seamless solution, securing a private, professional address with added benefits like mail forwarding and scanning for ultimate convenience.     SPONSORED 

Sloth Pipe — A tiny library for TypeScript and JavaScript that lets you create lazy, chainable, and reusable pipes for data transformation and processing.

Sloth Pipe

abort-utils — A set of utility functions that enable you to use and combine `AbortSignal` and `AbortController` with Promises.

@epic-web/invariant — A set of type safe utilities for throwing errors (and responses) in exceptional situations in a declarative way.

RE2JS — A JavaScript port of RE2 (a popular C++ library by Google), a regular expression engine that provides linear time matching.

znv — Type-safe environment parsing and validation for Node.js with Zod schemas.

chardet — A character detection module written in pure JavaScript/TypeScript that uses occurrence analysis to determine the most probable encoding.

Commercial Apps & Classifieds

These are commercial apps, affiliate links, PPC ads, and paid classifieds. Buy a Classified here.
PromptStart – An AI starter toolkit to build useful and engaging everyday tools, powered by AI.
TLDR – A byte-sized version of Hacker News that takes just a few minutes to read.   AD 
ShipAIFast – Skip weeks of development with prebuilt AI-ready apps using Next.js and Supabase.
Edge Store – A service with CDN and storage to implement file uploads in your app.
Techpresso – Join 100,000+ free daily readers for the latest AI and tech news, tools, and insights.    AD 
NewOaks AI – A service to add a chatbot to your website to help convert leads and inquiries.
Tailwind Animations – A suite of beautiful, copy/paste, prebuilt CSS animations made with Tailwind.

An X Post for Thought

It's pretty wild to think that Google was using advanced Ajax functionality inside Gmail, which launched in 2004, about a year before Jesse James Garrett's famous article on Ajax. Google certainly have their flaws and controversies, but they have innovated as much as anyone on the web.
An X Post for Thought

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

NoteQuiz is a simple way to test your knowledge of music notation, useful for beginners learning to sight read.

Thanks to all for subscribing and reading!

Keep tooling,