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

The 4 easiest ways to test Linux

Thursday, December 19, 2024

🚫 TP-Link ban; Favorite wearables of 2024; Gemini 2.0 Flash -- ZDNET ZDNET Tech Today - US December 19, 2024 VirtualBox running OpenMandriva as a guest OS. The 4 easiest ways to test Linux on your old

⚙️ AI startup secures $300 million

Thursday, December 19, 2024

Plus: Medical AI assistants ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Post from Syncfusion Blogs on 12/19/2024

Thursday, December 19, 2024

New blogs from Syncfusion Vite.js: Build Faster Frontends By Nishani Dissanayake Learn how Vite.js can speed up your frontend development process with its instant server start and lightning-fast HMR.

Better Than the Apple Watch?

Thursday, December 19, 2024

Introducing ScanWatch Nova Brilliant Edition: Watchmaking excellence coupled with powerful health scans and phenomenal battery life. Effortlessly tracking your every move, ScanWatch Nova Brilliant

Fortinet Warns of Critical FortiWLM Flaw: Update Required to Prevent Exploitation

Thursday, December 19, 2024

THN Daily Updates Newsletter cover Microsoft 365 Excel ($14.99 Value) FREE for a Limited Time Unlock the full potential of Microsoft 365 Excel with this extensive guide, crafted for both beginners and

Edge 458: From Pre-training to Post-training. Inside the Amazing Tülu 3 Framework

Thursday, December 19, 2024

A major release by AI2, includes the major components to build post-training pipelines. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

🎂 Celebrating One Year of Our App!

Thursday, December 19, 2024

From over 300k active users to millions of views, dive into the numbers that made this year on our data storytelling app unforgettable. View Online | Subscribe | Download Our App CELEBRATING A YEAR OF

Spyglass Dispatch: iOS 18.2 • Google v. OpenAI/Microsoft • New FTC Head • GM Crashes Cruise • Sora Slaps

Thursday, December 19, 2024

iOS 18.2 • Google v. OpenAI/Microsoft • New FTC Head • GM Crashes Cruise • Sora Slaps The Spyglass Dispatch is a newsletter sent on weekdays featuring links and commentary on timely topics found around

Daily Coding Problem: Problem #1634 [Medium]

Thursday, December 19, 2024

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Facebook. Given a start word, an end word, and a dictionary of valid words, find the

Charted | The Top Performing S&P 500 Stocks in the Last Two Decades 📈

Thursday, December 19, 2024

This infographic ranks the top performing S&P 500 stocks over four different time periods, providing unique historical insight. View Online | Subscribe | Download Our App Presented by: Defiance