Web Tools Weekly
Tools for Web Developers

Issue #586  (CSS/HTML, Build Tools, JS Utils)10/10/24


Advertisement

WorkOS: Modern Identity Platform for B2B SaaS
With WorkOS you can start selling to enterprises with just a few lines of code.

  • WorkOS provides a complete user management solution along with SSO, SCIM, RBAC, and Audit Logs. 
  • Modular and easy-to-use APIs allow you to finish integrating in minutes instead of months. 
  • User management is free up to 1 million MAUs and includes bot protection, MFA, roles/permissions, and more.
WorkOS

WorkOS powers some of the fastest growing startups like Perplexity, Vercel, and Webflow.

Start Integrating Today →

 

CSS and HTML Tools

skellyCSS — A lightweight CSS framework to quickly implement "skeletons"  (i.e. grey loading boxes) into your projects.

tailwind-to-inline — An npm package that enables you to automatically convert Tailwind classes to inline styles, for use in HTML email layouts.

SuperHTML — For Zig-based projects, an HTML language server and templating language library, that offers syntax checking and autoformatting features for HTML files.

Add SSO the Easy Way — WorkOS helps you ship SSO and other enterprise features this afternoon. From high-quality documentation to self-serve onboarding for your customers, we remove all the unnecessary complexity for your engineers.   SPONSORED 

Tailwind Prefix Applicator — Enter some HTML with regular Tailwind classes, and this tool will automatically add your own custom prefix to the classes.

ShadeStudio — An online tool to generate and save color palettes that can be exported as CSS variables, Tailwind, or SVG.

ShadeStudio

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.

style-observer —  A library that plugs a gap in MutationObserver (which tracks DOM changes) and allows you to set up an observer that notifies you when the computed value of a tracked CSS property has changed.

Tailwind Grid Generator — An online tool that helps developers create custom Tailwind-based grid layouts, with settings to define the number of columns, rows, the gutter size, and element sizes.

LDRS — A set of 40+ open-source loaders and spinners, built with HTML, CSS and SVG, and powered by web components for maximum compatibility. Each spinner can be customized for size, speed, stroke, color, etc.

Build Tools, Bundlers, etc.

dotenx — Described as a "better" dotenv, which is a zero-dependency module that loads environment variables from a .env file into process.env.

Hot Hook — A simple and lightweight library for adding hot module replacement in Node.js with ES Modules.

babel-plugin-transform-regex — A Babel plugin for the regex package, which is a template tag that extends JavaScript regular expressions, allowing you to transpile tagged regex templates into native RegExp literals.

e18e — Not a tool but a community initiative to provide a space for contributions, ideas, and knowledge sharing around the importance of performance across the JavaScript ecosystem.

e18e

nrr — Minimal, blazing fast npm scripts runner written in Rust that initializes and resolves scripts faster than other package managers and script runners.

Tech Productivity — A brief newsletter for tech workers featuring tools, apps, tips, articles, and other resources on productivity, work culture, remote work, brain science, and lots more.   SPONSORED 

ESLint Config Inspector — A visual tool for inspecting and understanding your ESLint flat config files (which replaced the deprecated eslintrc format).

Sherif — An opinionated, zero-config linter built with Rust for JavaScript monorepos that runs fast in any monorepo and enforces rules to provide a better, standardized developer experience.

@vite-pwa/remix — A feature-rich, zero-config, framework-agnostic, extensible Vite-powered PWA plugin for Remix projects.

garn — A build tool and environment manager that replaces justfiles/makefiles, Docker, and the annoying parts of READMEs.
Advertisement

Make Extra Cash Reselling Tickets with Lysted
Looking for a new side hustle to boost your income? Don't let unused concert tickets go to waste—turn them into cash with Lysted!

Lysted's advanced pricing tools ensure you get top dollar for your tickets, making it easy to maximize your profits.

Lysted

With just one listing, your tickets are available on major platforms like StubHub, Ticketmaster, and Seat Geek, saving you the hassle of managing multiple listings.

Plus, Lysted offers fast payouts, getting your earnings directly into your bank account within weeks. It’s a smart and simple way to make extra cash on the side. Start your ticket reselling side hustle today.

Sign Up For Free! →


 

JavaScript Utilities

Balloons-js — A simple JavaScript utility that adds colorful animated rising balloons to any web page using a simple function call.

UAParser.js — A comprehensive, compact, and up-to-date isomorphic JavaScript library to detecting a user's browser, engine, OS, CPU, and device type/model, and runs in the browser or Node.js.

fetch-in-chunks — A utility for fetching large files in chunks with support for parallel downloads, progress tracking, and request abortion.

Tech Productivity — A brief newsletter for tech workers featuring tools, apps, tips, articles, and other resources on productivity, work culture, remote work, brain science, and lots more.   SPONSORED 

color-bits — A high-performance color library that represents RGBA colors as a single int32 number and avoids allocating memory as much as possible while parsing, handling, and formatting colors, for efficient CPU use.

Maskito — A collection of utilities to create an input mask that ensures the user types a given value according to a predefined format.

Maskito

Oops.js — A utility to implement undo/redo capabilities for your apps, on par with similar functionality in industry-leading software like Figma, Photoshop, and Visual Studio Code.

OctoPalm.js — A lightweight JavaScript library designed to add real-time, customizable search functionality to your web apps, with animated results and custom-styled scrollbars.

littlezipper — A small, fast .zip library that uses the native CompressionStream API, which now has baseline support, for use in the browser or Node.js.

river.ts — A powerful library for handling server-sent events (SSE) in TypeScript, that allows you to build a common interface for events, then use it consistently on both server and client.

Commercial Apps & Classifieds

These are commercial apps, affiliate links, PPC ads, and paid classifieds. Buy a Classified here.
FAQPopup – A platform to create no-code interactive FAQ sections with AI that convert.
Amazon Prime Perks – 10 Amazon Prime perks that Prime members need to be using.    AD 
Metricalp – No-cookie, privacy-focused, event-driven, all-in-one analytics for web, Android, iOS, RN.
Hot Page – A drag-and-drop code editor with visual tools to build a unique design from scratch.
Techpresso – Join 100,000+ free daily readers for the latest AI and tech news, tools, and insights.    AD 
Langbase – A composable AI dev platform to deploy serverless composable AI agents in minutes.
Hanabi.rest – AI-based API building platform to build a REST API from natural language and screenshots.

An X Post for Thought

Even though this was posted back in June long before the recent WordPress vs. WP Engine fiasco, it seems like an appropriate and timely reminder.
 
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...

I don't know why but this is a weird combination of retro and creepy. It's called crowdwave and it's an old-school-themed social network where all the messages are audio messages but they're done in the style of an old physical answering machine, so it just has a weird vibe!

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris