Web Tools #533 - MDN RegExp, CSS Tools, ChatGPT, JSON/DB

Advertisement

Over on MDN, which is probably the most popular resource for looking up code, syntax, and browser compatibility for various web platform features, they've made a number of improvements to their documentation on Regular Expresions.

If you're like me, regular expressions are always a bit of a foreign language and most of the time you're probably just copying and pasting stuff. Even after using regular expression syntax for years, you might still have trouble remembering most of it.

I'm guessing the changes they've made won't improve things drastically, but it does appear that the different parts of the regular expression syntax are not more nicely organized and easier to find.

You can read about this in a blog post from back in May of this year: New reference pages on MDN for JavaScript regular expressions.

Some highlights of the new docs include:

• 18 new pages for individual features
• Deprecated information has been removed
• A section called "Atom" in the main reference page is where you'll likely spend much time looking for common features
• Browser compatibility information is up to date for each individual feature of regular expression syntax

CSS and HTML Tools

Linear Easing Generator
An online tool that generates code for easing functions such as bounce, spring, or elastic, using CSS's new linear() syntax, something previously only possible using JS or SVG.

Strada
Part of the Hotwired library of tools, this one enabling you to create native controls using web components in your hybrid mobile apps.

playhtml
A library to let you easily build interactive multi-player experiences using HTML attributes. Try the examples on the page in multiple windows to see the interaction live.

Kuma UI
Described as "the future of CSS-in-JS", this is a headless, utility-first, and zero-runtime UI component library and toolkit.

Toastalia
A fully-featured, intuitive app to create and integrate optimized popups or modals with countless options to customize them.

Webflow, the Only Visual Development Platform Designed for Agencies
Be the one clients can’t stop talking about. Build custom websites visually, manage projects in a shared dashboard and collaborate with your colleagues all with Webflow.     SPONSORED 

Mimic.css
An older project that I've never shared in this newsletter, it's a CSS animation library with lots of unique and interesting animations you can add via class names in HTML.

Media-Card-Web-Component
A web component that taps into various public APIs to display details on various media, namely movies, TV shows, books, and songs.

CSS Loaders
A huge collection of 500+ unique, colorful, and interesting pure CSS loading animations, divided into 25+ categories.

CSS Text Portrait Builder
A toolkit and build system that lets you generate CSS-based text illustrations from photographs.

Styled2Tailwind
A handy codemod to transform your styled-components into equivalent Tailwind CSS elements.
 

AI and ChatGPT Tools

OpenCopilot
An open-source AI copilot for your own product that lets your users chat with your product instead of getting lost in the UI.

qrGPT
An AI-based QR code generator that includes prompts and options that allow you to customize how the QR code image appears.

Rapidpages
A prompt-first IDE for building great-looking pages. You simply describe the UI you desire and it will generate the code for that component using

Hal9: Chat with Your Data, Get Insights in Seconds
A tool that allows you to chat with your enterprise databases using secure generative AI, empowering business users on your team to do their own data analyses in seconds.    SPONSORED 

Onboard AI
An AI-based tool that lets you ask questions on any GitHub repository, to help you navigate unfamiliar code bases.

chatgpt.js
A feature-rich and lightweight JavaScript library for working with ChatGPT's DOM that includes an API to interact with ChatGPT for use in Chrome extensions, Tampermonkey scripts, and more.

Spirals
A small AI-based app that lets you type into a prompt to generate spiral art. I typed "an elephant in a bag of chips" and now I regret all my life decisions.

AI Colors
An online tool to generate and customize color palettes from a text prompt, with options to save and browse public palettes and you can view the colors in use in a realistic UI on the page.

Fine
A native app for Mac, Windows, and Linux to deploy, manage, and run AI agents that serve as your virtual teammates, to help 10x your development productivity.

EnhanceAI
Add AI autocomplete to any website in minutes, with AI powered forms, surveys, text inputs, and more. Includes a React wrapper as well.
 

JSON Tools, Databases, etc.

json-object-keys
A TypeScript based utility that lets you manage complex object keys in depth. Still in early development.

Undb
A private-first, unified, self-hosted, customizable, no-code database that you can access via a visual UI that's built with SvelteKit, Tailwind, Vite, Nest.js, and more.

jsontt
A CLI tool that lets you translate your JSON files or objects into different languages, with support for Google Translate, Bing, Libre Translate, and Argos. Node.js utility supports only Google Translate.

ElectricSQL
A local-first sync layer for web and mobile apps to build reactive, real-time, local-first apps directly on Postgres.

Hal9: Chat with Your Data, Get Insights in Seconds
Chat with your enterprise databases using secure generative AI and empower business users in your team to do their own data analyses in seconds.    SPONSORED 

dto-classes
A TypeScript library for modelling data transfer objects in HTTP JSON APIs that provides a number of features missing in TypeScript/Node.js.

Graphweaver
A library that speeds up your GraphQL development by securely connecting all your data sources in one place.

Database Diagram
A free online privacy-focused database diagramming tool that generates a visual diagram of your database by entering code.

Deno KV
A key-value database built directly into the Deno runtime, available in the Deno.Kv namespace, useful for various kinds of data storage use cases.

D1 Manager
A web UI and API for Cloudflare D1 (a serverless SQL database) that provides a user-friendly interface for managing databases, tables, and records, as well as an API for performing operations programmatically.

sqlite-lines
An SQLite extension for reading lines from a file or blob, available for Node.js, Deno, Ruby, Python, and more.

Commercial Apps and Classifieds

An X Post for Thought

Interestingly, I've felt this same way about the thumbs up reaction lately. Do you agree?
   

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

This is neat for recipe collectors: yums.email. Send an email to this service with links to any recipes you want to save, and you'll get a formatted email with the recipe in an email.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@LouisLazaris
PayPal.me/WebToolsWeekly