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

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.

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.

Advertisement

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.

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