Web Tools #594 - CSS Tools, Databases/JSON, Vue Tools

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #594 • December 5, 2024

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 →

In this issue, I'm implementing visited link styles for the first time since I first designed this newsletter. This was a request from a user that said it would be easier to keep track of which links were clicked.

As a result, you should see something like the image below if you've clicked one link but haven't clicked another. The regular links are the usual orange and the visited links are dark brown.

Visited Link Styles in Web Tools Weekly
Non-visited link styles vs. visited link styles in this newsletter

This makes sense for a newsletter like this that always features 25 links or more. This should make it easier to track what you've already visited, for example, if you start reading the newsletter but don't finish, then get back to it a few days later.

I hope this doesn't negatively affect your experience in any way. Some of the links in the newsletter (e.g. in the footer) aren't given the visited styles, to keep the more generic stuff consistent. If you notice any bugs, let me know by hitting reply!

Now on to this week's tools!
 

CSS & HTML Tools

BriCSS — A simple and customizable low-level CSS library generator, similar to Tailwind, that produces optimizes CSS output and automated interactive documentation.

just-styled — A dead simple CSS-in-JS library for React 19 or higher that has a familiar styled-components-like API and support for React Server Components.

RustyWind — A Rust-powered CLI for organizing Tailwind classes, with a number of different flags/settings to customize the output.

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 Colors — All the Tailwind CSS colors in a handy cheat sheet with support for hex, HSL, RGB, and the newly-supported OKLCH for Tailwind.

i-html — A drop-in custom element that allows for dynamically importing HTML, inline, similar to an iframe except the HTML gets adopted into the page.

Vue <Transition> with Tailwind CSS — 15 copy/paste Vue snippets to build beautiful transitions with Tailwind, each customizable for settings like duration, direction, mode, shape, etc.

Vue Transition with Tailwind CSS

clean-css — A fast and efficient CSS optimizer for Node.js and modern browsers, with various settings for changing the formatting options, inline options, minify method, level of optimization, etc.

Action Table — A web component for adding sort and filtering functionality to HTML tables that's customizable using a stylesheet rather than making use of the shadow DOM.

ska-tailwind-editor — An online tool to edit Tailwind-based HTML as WordPress blocks, with ability to convert the code to blocks and preview the output, similar to the WordPress editor.

JSON Tools, Databases, etc.

Keuss — An enterprise-grade job queues solution for Node.js, backed by Redis, MongoDB, or PostgreSQL.

Triplit — A full-stack, syncing database that runs on both server and client, supports pluggable storage (IndexedDB, SQLite, Durable Objects), syncs over WebSockets, and works with your favorite framework (React, Vue, etc).

Streamline Your Entire Business with a Free CRM — HubSpot provides a comprehensive customer relationship management platform to help you grow. With powerful features to manage leads and improve customer relationships, HubSpot’s CRM is completely free, with no restrictions on users or data, making it ideal for businesses at any stage.     SPONSORED 

JSON For You — A JSON visualization and processing tool that includes graph and table view modes, structured and text comparisons, validation with error context, nested parsing, support for jq, and more.

Anyquery — A CLI tool to run SQL queries on any data source, no matter if it's a file, an API, logs, or a local app.

Anyquery

jsondiff — A Go-based package to compute the difference between two JSON documents as a series of RFC6902 (JSON Patch) operations.

database.build — An in-browser Postgres sandbox with AI assistance, to instantly spin up an unlimited number of Postgres databases that run directly in your browser.

SlateDB — An embedded database built on object storage that, unlike traditional LSM-tree storage engines, writes data to object storage to provide bottomless storage capacity, high durability, and easy replication.

sqlc — A Go-based package that generates type-safe code from SQL, to help catch failures before they happen, with no need to write any SQL boilerplate code.

Auto-ERD — An online entity-relationship diagram (ERD) generator that allows you to automatically design your database based on your SQL joins.
Advertisement

Gain Visibility into Your React Component Usage
Omlet helps you analyze how and where components are used across your code repositories, so you can reduce front-end tech debt & prove the value of your design system.

See how it works.

Omlet

Measure design system adoption over time, estimate the impact of deprecating components, identify projects using legacy components, and surface similar components for consolidation.

Try Omlet for free and have your component report ready in less than 5 minutes.

Try for Free →


 

Vue Tools

turnstile-vue3 — A Vue3 component for integrating Cloudflare Turnstile (a CAPTCHA alternative) into your application.

reactive-vscode — A Vue solution that allows you to develop VS Code extensions using the Vue Reactivity API.

Vue 3 Signature Pad — A Vue 3-based smooth signature drawing component with 20+ props and events to customize the experience.

vue-tailwindcss-typeahead — An autocomplete component for HTML inputs, built with Vue and Tailwind, and has only a single dependency outside of Vue.

vue-tailwindcss-typeahead

Vaxee — A simple and easy-to-use library for Vue 3 with an intuitive API and TypeScript support, to manage application state.

Nuxt Tailwind — A Tailwind CSS module for Nuxt with zero configuration required, support for CSS nesting, extendable using hooks, and more.

Grow Your Business with HubSpot's Free CRM — HubSpot offers an intuitive customer relationship management platform tailored for small businesses. Manage leads, track sales performance, and understand your customers with ease. Best of all, it’s completely free, with no limits on users or data, allowing you to store and manage up to 1,000,000 contacts.   SPONSORED 

NuxtHub Rate Limit — A solution for NuxtHub that adds rate limits to your NuxtHub API routes to protect your application from abuse and ensure fair usage of your resources.

Kitbag Router — A type-safe router for Vue apps, with support for queries, rejection handling, and better route params.

Nuxt Scripts — Plug-and-play script optimization for Nuxt apps featuring better privacy, performance, and developer experience for third-party scripts.

Commercial Apps & Classifieds

These are commercial apps, affiliate links, PPC ads, and paid classifieds. Buy a Classified here.
KickStart – Generate FormKit from a prompt, image, or text attachment, with optional output as Vue.
AI Mastery – A newsletter covering simple, practical career tips to prepare for our AI present.    AD 
Hover – Interactive, animated UI components for  React,  Tailwind, Framer Motion, and more.
Releem – A monitoring service that automatically detects, tunes, and optimizes MySQL queries.
Techpresso – Join 100,000+ free daily readers for the latest AI and tech news, tools, and insights.    AD 
TailConverter – A Chrome and Firefox extension to convert CSS to Tailwind classes.
Superjoin – Sync data between your favorite tools and Google Sheets without writing any code.

An X Post for Thought

Adam Wathan, creator of Tailwind, recently announced the possibility of a future marketplace for creators building Tailwind-based templates. He encouraged replies that link to templates, so you might find some useful links in the discussion.
 
An X Post for Thought
 

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

If you like YouTube but miss doing more "channel surging" on traditional cable TV, check out YTCH, which basically turns YouTube into a TV with channels that represent specific categories (cooking, fashion, vlogs, baseball, music, etc). There are 39 "channels" in all and you can view the list of them by hitting the spacebar.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
Follow me on X
Follow me on Bluesky
Support me via PayPal

Older messages

Web Tools #593 - Frameworks, React Tools, Uncats

Thursday, November 28, 2024

WEB VERSION Issue #593 • November 28, 2024 Advertisement Power Your Web Projects with Cloudways This BFCM As a developer, designer, or tech professional, you need reliable hosting that adapts to your

Web Tools #592 - JS Libraries, Git/CLI Tools, Media/SVG

Thursday, November 21, 2024

WEB VERSION Issue #592 • November 21, 2024 Advertisement Deploy AMD Instinct™ MI300X on Vultr AMD Instinct MI300X accelerators are now available on the Vultr cloud platform. With thousands of AMD

Web Tools #591 - JS Utilities, Testing Tools, Uncats

Friday, November 15, 2024

WEB VERSION Issue #591 • November 14, 2024 Advertisement Uncover React Component Usage Across Dev Teams Omlet gives you data to inform your dev roadmap by analyzing your React components for you. Omlet

Web Tools #590 - Frameworks, AI Tools, Build/Bundle Tools

Thursday, November 7, 2024

WEB VERSION Issue #590 • November 7, 2024 Advertisement Simple, Pragmatic Authentication for B2B SaaS PropelAuth makes it easy to integrate authentication and user management into your product.

Web Tools #589 - CSS Tools, Git/CLI, Vue Tools

Thursday, October 31, 2024

WEB VERSION Issue #589 • October 31, 2024 Advertisement Introducing a New Approach to Mobile App Security Join Guardsquare's webinar to learn more about our new guided configuration approach to

You Might Also Like

Youre Overthinking It

Wednesday, January 15, 2025

Top Tech Content sent at Noon! Boost Your Article on HackerNoon for $159.99! Read this email in your browser How are you, @newsletterest1? 🪐 What's happening in tech today, January 15, 2025? The

eBook: Software Supply Chain Security for Dummies

Wednesday, January 15, 2025

Free access to this go-to-guide for invaluable insights and practical advice to secure your software supply chain. The Hacker News Software Supply Chain Security for Dummies There is no longer doubt

The 5 biggest AI prompting mistakes

Wednesday, January 15, 2025

✨ Better Pixel photos; How to quit Meta; The next TikTok? -- ZDNET ZDNET Tech Today - US January 15, 2025 ai-prompting-mistakes The five biggest mistakes people make when prompting an AI Ready to

An interactive tour of Go 1.24

Wednesday, January 15, 2025

Plus generating random art, sending emails, and a variety of gopher images you can use. | #​538 — January 15, 2025 Unsub | Web Version Together with Posthog Go Weekly An Interactive Tour of Go 1.24 — A

Spyglass Dispatch: Bromo Sapiens

Wednesday, January 15, 2025

Masculine Startups • The Fall of Xbox • Meta's Misinformation Off Switch • TikTok's Switch Off The Spyglass Dispatch is a newsletter sent on weekdays featuring links and commentary on timely

The $1.9M client

Wednesday, January 15, 2025

Money matters, but this invisible currency matters more. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

⚙️ Federal data centers

Wednesday, January 15, 2025

Plus: Britain's AI roadmap ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Post from Syncfusion Blogs on 01/15/2025

Wednesday, January 15, 2025

New blogs from Syncfusion Introducing the New .NET MAUI Bottom Sheet Control By Naveenkumar Sanjeevirayan This blog explains the features of the Bottom Sheet control introduced in the Syncfusion .NET

The Sequence Engineering #469: Llama.cpp is The Framework for High Performce LLM Inference

Wednesday, January 15, 2025

One of the most popular inference framework for LLM apps that care about performance. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

3 Actively Exploited Zero-Day Flaws Patched in Microsoft's Latest Security Update

Wednesday, January 15, 2025

THN Daily Updates Newsletter cover The Kubernetes Book: Navigate the world of Kubernetes with expertise , Second Edition ($39.99 Value) FREE for a Limited Time Containers transformed how we package and