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

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #460 • May 12, 2022

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

Get Started For Free Today
Retool

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:

let url = new URL('https://webtoolsweekly.com/?view=archive&Issue=450');

console.log(url.searchParams.get('view')); // "archive"
console.log(url.searchParams.get('Issue')); // "450"
console.log(url.searchParams.get('issue')); // null

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.

IT Tools

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

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:

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

@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?

A Tweet for Thought
 

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

Older messages

Web Tools #459 - JS Utilities, Build Tools, React

Thursday, May 5, 2022

Web Tools Weekly WEB VERSION Issue #459 • May 5, 2022 Advertisement Stepsize – Issue Tracking Made for Engineers Create and view code issues directly from your VSCode and JetBrains editors. Add

Web Tools #458 - async/await, CSS Tools, SVG, Uncats

Thursday, April 28, 2022

Web Tools Weekly WEB VERSION Issue #458 • April 28, 2022 Advertisement Retool is the Fast Way to Build an Interface for any Database Custom dashboards, admin panels, CRUD apps—build any internal tool

Web Tools #457 - Front-end Frameworks, SVG, React Native

Thursday, April 21, 2022

Web Tools Weekly WEB VERSION Issue #457 • April 21, 2022 Advertisement Retool is the Fast Way to Build an Interface for any Database Custom dashboards, admin panels, CRUD apps—build any internal tool

Web Tools #455 - CSS/HTML, JSON, Databases, Vue

Thursday, April 7, 2022

Web Tools Weekly WEB VERSION Issue #455 • April 7, 2022 Advertisement Retool is the Fast Way to Build an Interface for any Database Custom dashboards, admin panels, CRUD apps—build any internal tool

Web Tools #454 - Array.at, React, Git/CLI, Uncats

Thursday, March 31, 2022

Web Tools Weekly WEB VERSION Issue #454 • March 31, 2022 Advertisement Mojeek: A Crawler-Index Search Engine Most alternative search engines just source results from Google or Bing, not Mojeek! We have

You Might Also Like

Import AI 399: 1,000 samples to make a reasoning model; DeepSeek proliferation; Apple's self-driving car simulator

Friday, February 14, 2025

What came before the golem? ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Defining Your Paranoia Level: Navigating Change Without the Overkill

Friday, February 14, 2025

We've all been there: trying to learn something new, only to find our old habits holding us back. We discussed today how our gut feelings about solving problems can sometimes be our own worst enemy

5 ways AI can help with taxes 🪄

Friday, February 14, 2025

Remotely control an iPhone; 💸 50+ early Presidents' Day deals -- ZDNET ZDNET Tech Today - US February 10, 2025 5 ways AI can help you with your taxes (and what not to use it for) 5 ways AI can help

Recurring Automations + Secret Updates

Friday, February 14, 2025

Smarter automations, better templates, and hidden updates to explore 👀 ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

The First Provable AI-Proof Game: Introducing Butterfly Wings 4

Friday, February 14, 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? undefined The Market Today #01 Instagram (Meta) 714.52 -0.32%

GCP Newsletter #437

Friday, February 14, 2025

Welcome to issue #437 February 10th, 2025 News BigQuery Cloud Marketplace Official Blog Partners BigQuery datasets now available on Google Cloud Marketplace - Google Cloud Marketplace now offers

Charted | The 1%'s Share of U.S. Wealth Over Time (1989-2024) 💰

Friday, February 14, 2025

Discover how the share of US wealth held by the top 1% has evolved from 1989 to 2024 in this infographic. View Online | Subscribe | Download Our App Download our app to see thousands of new charts from

The Great Social Media Diaspora & Tapestry is here

Friday, February 14, 2025

Apple introduces new app called 'Apple Invites', The Iconfactory launches Tapestry, beyond the traditional portfolio, and more in this week's issue of Creativerly. Creativerly The Great

Daily Coding Problem: Problem #1689 [Medium]

Friday, February 14, 2025

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Google. Given a linked list, sort it in O(n log n) time and constant space. For example,

📧 Stop Conflating CQRS and MediatR

Friday, February 14, 2025

​ Stop Conflating CQRS and MediatR Read on: m​y website / Read time: 4 minutes The .NET Weekly is brought to you by: Step right up to the Generative AI Use Cases Repository! See how MongoDB powers your