Web Tools #577 - CSS Tools, AI Tools, JS Library Plugins

Advertisement

CSS and HTML Tools

Batman-Comic.CSS — Here's something different and niche: A utility-class library that allows to easily create Batman and Robin comics, with CSS classes that define the character and his facial expressions.

Slab — A programmable markup language, similar to solutions like Pug, that simplifies the creation of HTML, combining concise notation with standard programming constructs to create reusable web content more efficiently.

TailwindMerge for Laravel — A PHP/Laravel plugin that allows you to merge multiple Tailwind classes and automatically resolves conflicts by removing classes conflicting with a class defined later.

Tailwind Color Palette — A simple one-page reference displaying all the colors available in Tailwind's default config (242 in all), with an option to switch format to hex, RGB, HSL, or Tailwind classes.

Master Dev Skills at Visual Studio Live! — Join top developers for 200+ sessions and 10+ hands-on labs at Live! 360 this November in Orlando. Customize your learning experience in .NET, AI, Cloud Computing, and more!   SPONSORED 

Sendune Designer — An open-source, drag-and-drop HTML email editor with responsive live preview, email testing, and media uploads.

CSS Gradient Generator — A nicely designed interactive CSS gradient generator that allows you to easily add/remove color stops and choose a radial or linear gradient.

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.

Mastodon Embed Timeline — A responsive, accessible, and customizable script and stylesheet to allow you to embed a timeline from the Mastodon social network (Twitter/X alternative).

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

ChatGPT and AI Tools

Meta AI — Facebook's version of ChatGPT, allowing you to ask the AI anything, save conversations, generate images, and more.

OpenSearch GPT — A personalized AI search engine that learns about you and your interests as you browse the web, like a Perplexity or SearchGPT clone, but for you.

DOM to Semantic Markdown — A JS/TS library that converts HTML DOM to a semantic Markdown format optimized for use with LLMs.

HackerPulse – The Ultimate Dev Profile — Bring together your GitHub, Stack Overflow, and LinkedIn profiles into a single HackerPulse dev profile. Perfect for job applications and networking, HackerPulse gives a complete picture of your skills and projects, all in one place.   SPONSORED 

Skeleton Fingers — A web app for AI-powered audio transcriptions via URL, file upload, or direct via voice/microphone.

screenshot-to-code — A simple but ambitious tool to convert screenshots, mockups and Figma designs into clean, functional code using AI.

KitOps — An open-source MLOps tool that packages and versions your AI model, datasets, code, and configuration into a ModelKit that data scientists and developers can use with their preferred tools.

ai-utils — A developer toolkit that makes it simple to build with the Workers AI platform and includes support for embedded function calling.

Generista — A Figma plugin that helps create generative artwork with a simple, easy-to-use interface.

LLM Datasets — A GitHub repository that's a resource high-quality datasets, tools, and concepts for LLM fine-tuning.

Advertisement

JavaScript Library Plugins

Tree.js — A procedural tree generator (that is, nature's trees, not like a chart) built with Three.js, with over 30 tunable parameters and support for exporting to .glb (a 3D model file format).

@sebastianwessel / quickjs — A TypeScript package to safely execute JavaScript and TypeScript code within a WebAssembly sandbox using the QuickJS engine.

Nano Stores Router — A tiny URL router for the Nano Stores state manager that's small, has good TypeScript support, and can be used with any framework or just vanilla JavaScript.

HackerPulse – The Ultimate Dev Profile — Bring together your GitHub, Stack Overflow, and LinkedIn profiles into a single HackerPulse dev profile. Perfect for job applications and networking, HackerPulse gives a complete picture of your skills and projects, all in one place.   SPONSORED 

Express-Ts-Auth-Service — A pre-built authentication server that uses JSON Web Tokens (JWT) for authentication, built using Express.js, TypeScript, and MySQL.

LayerChart — A large collection of visualization components and utilities for Svelte, built on the Layer Cake framework.

threejs-procedural-planets — A procedural 3D planet generator built with Three.js, with lots of interactive options to customize the planet that's generated.

zustand-slices — A utility that allows you to use 'slice patterns' with Zustand, the minimalist JavaScript state library.

Middle Class Text Editor — An appropriately named Svelte component that implements limited rich text behaviour for Slack-style mentions in a plain text area.

ThreePipe — A 3D viewer framework built on top of Three.js in TypeScript with a focus on rendering quality, modularity, and extensibility.

Commercial Apps & Classifieds