Web Tools #460 - CSS Tools, JS Utilities, JSON, Databases

Advertisement

In a previous issue I briefly covered the different properties available when you use the Location object (either Window.location or Document.location). It's also useful to know about the existence of the URL API, which is similar but seems to be a more modern upgrade on what the Location object was doing.

With URL, you have access to a few other features that aren't available on the Location object. Once a URL is generated (e.g. using the URL() constructor), you'll have the following extra features:

• URL.username - This was also formerly available on Location but is now deprecated. This allows you to include a username as part of the URL, for a private login.
• URL.password - Same as URL.username, now deprecated on Location but available on the URL object.
• URL.searchParams - This is probably the most useful property that's not available on the Location object. This allows you to access individual parameters in a query string, as opposed to the URL.search property that gives you the entire query string.
• URL.toJSON() - This new method returns a string containing a serialized version of the URL. MDN's references says that it's not clear how this differs from URL.toString(), so there might be something in the future that changes for this one.
• URL.createObjectURL() - Creates a string containing a URL representing the object given in the parameter.
• URL.revokeObjectURL() - Releases an existing object URL previously created with URL.createObjectURL().

As mentioned, the URL.searchParams property is likely the most practical of these new additions. Here's some example code that demonstrates how to use it:

The above code first creates the URL using the URL() constructor, then the individual query string parameters are available using searchPrams.get(). As you can see, the query string selected is case sensitive, thus the last line returns a value of null.

This CodePen has an interactive demonstration of this feature. In this case it's only requesting the specific query strings shown but you can adjust the code to use other names if needed.
 

Now on to this week's tools!
 

CSS and HTML Tools

Retool is the Fast Way to Build an Interface for any Database
Custom dashboards, admin panels, CRUD apps—build any internal tool faster in Retool. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time. SPONSORED

Dopely Colors
Platform with a whole slew of color management and generator tools for gradients, palettes, contrast checking, color blending/mixing, color extractor, and lots more.

highlighted-code
A script that automatically provides code highlighting in a textarea element based on languages available via highlight.js.

Text Cleaner
An all-in-one text cleaning and text formatting tool that can perform numerous simple and complex text operations including formatting, removing line breaks, stripping HTML, converting case,  etc.

IT Tools
A set of handy little online tools for web developers including converters, generators, some cheat sheets, and more.

Open Source Color System
A carefully curated system of colors for using on various UI elements, based on the authors' experience in building interfaces.

Huemint
Online tool that uses machine learning to create unique color schemes for your brand, website, graphic, etc.

Animate CSS Grid
An older project that's a script that makes it easy to transition your CSS grid gracefully from one state to another when items are added, removed, etc.

SmallDev.tools
Here's another collection of online tools for doing various tasks: JSON formatting, Base64 encode/decode, SQL formatter, string utilities, and lots more.

prettier-plugin-tailwindcss
A Prettier plugin for Tailwind CSS that automatically sorts classes based on a recommended class order.

iColorpalette
A platform for creating and sharing color schemes, including tools to generate palettes from Pixabay images, a custom image, and more.

JSON Tools, Databases, etc.

Find, Visualize and Apply the Hidden Gems in Your Spam Inbox
Checkmate is the first tool ever built to sort, visualize and apply the deals from your spam inbox while you shop, finding hidden gems and saving early users an average of $40 per checkout. It’s completely free! Try Checkmate today!   SPONSORED

JSONT
A simple online tool to view, format, parse, and examine JSON code using various settings for nodes, line numbers, etc.

RisingWave
A cloud-native streaming database that uses SQL as the interface language, designed to reduce the complexity and cost of building real-time applications.

RonDB
A fast cloud-based key/value store with SQL capabilities.

JSON Hero
An online tool to let you view large JSON files (URL or direct) in column, tree, or plain JSON view.
 
SQL Online IDE
An online SQL editor and viewer that lets you connect to various types of databases including MariaDB, PostgreSQL, Oracle, SQLite, and more.

jsonGist.io
Service that lets you use GitHub Gists as JSON storage via a dashboard or API with public or private options.

Postgres.js
A fast, full-featured PostgreSQL client for Node.js and Deno with ES6 tagged template strings at the core and a simple surface API.

react-json-reconciler
Script that leverages react-reconciler to allow users to serialize JSX trees into JSON objects.

react-jsonschema-form
A simple React component capable of using JSON Schema to declaratively build and customize web forms.

MySQL-wtsp
A program that allows you to manage a MySQL database from WhatsApp. Now you've seen everything.

Sqitch
Sensible database-native change management for framework-free development and dependable deployment.

On the Release Radar:

• Danfo.js – Data structures JS library now at version 1+
• SQL Notebook – Native SQL exploration app now at version 1+
• Directus – API and app dashboard for SQL at version 9+

JavaScript Utilities

Find, Visualize and Apply the Hidden Gems in Your Spam Inbox
Checkmate is the first tool ever built to sort, visualize and apply the deals from your spam inbox while you shop, finding hidden gems and saving early users an average of $40 per checkout. It’s completely free! Try Checkmate today!   SPONSORED

Facile Validator
Laravel-inspired validation for HTML forms, built for simplicity of use.

perfect-cursors
Perfect interpolation for building collaborative apps with animated multiplayer cursors.

YouTube.js
A full-featured wrapper around YouTube's private API (called Innertube), providing a simple and efficient way to interact with YouTube programmatically.

@antfu/utils
An opinionated collection of common JavaScript / TypeScript utilities.

Scrollex
Build beautiful scroll experiences using minimal code. Explained in the interactive docs and some neat examples on the demo page.
 
@gar/promisify
A module that leverages ES6 Proxy and Reflect to promisify every function in an object or class instance.

[Array Builder]
A simple, free tool to visualize the returned values of array transformations and computations made from Array.map, Array.filter, and Array.reduce.

Epub.js
A JavaScript library for rendering EPUB documents in the browser, across many devices.

bignumber.js
A JavaScript library for arbitrary-precision decimal and non-decimal arithmetic.

lwder.js
An easy-to-use and lightweight script to build custom loading animations in vanilla JavaScript.

ajquery.js
A fast and tiny jQuery selector alternative with CSS4-compatible query selection.

Stockfish.js
A WebAssembly implementation of Stockfish, a popular chess engine built in C++.

Commercial Tools and Classifieds

These are affiliate links, paid classifieds, and curated commercial apps (i.e. not free, not open source, limited free plan, etc).

EarlyPing – All-in-one IT infrastructure monitoring and downtime service.

Coming Soon Kit – 50+ unique "coming soon" templates made with Tailwind.

Tailwind Weekly – Newsletter that levels up your Tailwind CSS skills.  AD 

Knock – A flexible, reliable cross-channel notifications infrastructure.

Bytes – A JavaScript newsletter that's informative and entertaining.  AD 

Sizze – Build native mobile apps with connected data and no code.

Ezfire – A collaborative database client for modern applications.
 

A Tweet for Thought

Is this an accurate description of TypeScript? Or JavaScript, for that matter?

 

Send Me Your Tools!

Made something? Send links via Direct Message on Twitter @WebToolsWeekly (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're wondering if you should add a particular feature to your app and aren't sure, you might want to try Don't build (or build) that feature, a simple little online questionnaire that can help you determine if you should or shouldn't build something.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  /  Patreon  /  GitHub Sponsors  /  E-Books  /  $5 Tip  /  $1 Tip