Issue #509  (createTextNode(), CSS/HTML, JSON/DB, Uncats)04/20/23

In most cases when injecting content into the DOM with JavaScript, you'll likely use something like createElement(), insertElement(), or similar. There's one that may come in handy in specific use cases that you'll want to make a note of: document.createTextNode().

Just like createElement(), this method can be used along with a method like appendChild() to add content to a specific part of the page. Except you're not adding an element but a plain text node.

The above line of code shows how it would work along with appendChild(), assuming "el" is a reference to a DOM element. I've created an interactive CodePen demo where you can use the text field and buttons on the page to add nodes to an element and count how many nodes are in the element after the additions are made. The console in CodePen shows the count.

Some things to take note of about this method:

• Each text node that gets added using this method is its own separate node, which is why the childNodes.length value increases with each addition. You can see this if you inject multiple nodes then inspect the element in your browser's developer tools.
• If you want to merge all nodes in a DOM element, you can use the element.normalize() method to merge them to one text node.
• You can insert any characters you want, including HTML tags and things like ">" that would normally be interpreted as HTML, but they will always insert as plain text.
• Special characters like emojis and UTF-8 characters will display exactly as expected, assuming the document itself allows them.
• The one parameter is a string value or a reference to a string value. If it happens to be an element or object, the text node inserted will be a string representation of the object, similar to what you would see in your console when logging an object (e.g. "[object HTMLDocument]").

CSS and HTML Tools

CSS Components
Billed as "not another styling system", but rather a lightweight utility to compose CSS styles into standard React components.

Easy Email
A React.js drag-and-drop email editor based on MJML, the popular HTML email framework, that lets you transform structured JSON data into HTML compatible with major email clients.

ThumbHash
A  compact representation of a placeholder for an image that you can store inline with your data and show it while the real image is loading for a smoother loading experience.

HEX to LCH Color Converter
An online tool to convert colors between formats, with support for HEX, RGB, HSL, and LCH.

cva
Meaning "Class Variance Authority", a library that aims to take away the pain points of CSS-in-JS solutions, namely having more control over your stylesheet output.

Sharpen Your Math, CS and Data Skills in 15 minutes a Day
For professionals and lifelong learners alike, Brilliant is one of the best ways to learn. The deets: Bite-sized interactive lessons make it easy to level up in everything from math and data science to AI and beyond. Join 10+ million people building skills every day.  SPONSORED  

rollup-plugin-native-css-modules
A JavaScript utility that allows you to use native CSS modules with import assertions in Rollup, without transforming CSS to JS.

Gradient Picker
A simple online tool that lets you customize and copy the code for a CSS linear or radial gradient interactively on the page.

Tailwind Current Hue
A Tailwind plugin that provides current hue styles to allow adding tint hues to a subtree, without needing to do this using Tailwind's verbose class extraction.

clamp() Calculator
An online tool that utilizes rem units for calculating viewport-based clamped values (i.e. using the new clamp() value syntax).

Tachyon
A byte-sized script that improves the user experience of your website by making navigation between pages significantly quicker.

glyphhanger
A web font utility belt that can subset web fonts that can show you what unicode-ranges are used on a web site and can subset web fonts automatically using the unicode-ranges found.
 

JSON Tools, Databases, etc.

tbls
A CI-friendly tool, written in Go, to document a database in GitHub-flavoured Markdown format, with support for PostgreSQL, MySQL, MariaDB, SQLite, MongoDB, JSON, and more.

We scour 100+ Patents to Predict the Future of Tech
Meet Patent Drop — a publisher with expert analysis on how patents are shaping multiple domains — think future of healthcare, electric vehicles, and AI. Delivered twice weekly, this free newsletter is the source of truth for over 25,000 thought leaders across industries.    SPONSORED  

Mathesar
An open-source and web-based interface that works on top of your database that lets you enter, slice, filter, and structure your data in minutes.

micro-graphql-svelte
A lightweight (2.8kb min+gzip) and simple solution for painlessly connecting your Svelte components to a GraphQL endpoint.

Plato
An admin panel for your Postgres or MySQL database, free to use for up to 5 users and unlimited databases, tables, and more.

ArrayCat
An online tool for converting a data list into an array or MySQL query. For example, you can convert CSV into a PHP, JavaScript, or Python array or even into an SQL insert statement.

QwikQL
A GraphQL client for Qwik, the popular framework that allows you to improve app performance at scale.

sqlean
A set of "missing" SQLite extensions neatly packaged into domain modules, documented, tested, and available for Windows, Mac, and Linux.

StackQL
An open-source project built with Go that allows you to create, modify, and query the state of services and resources across different cloud and SaaS providers (Google, AWS, Azure, Okta, GitHub, etc.) using SQL semantics.

SvelteFire
An experimental and minimal, yet powerful library that puts real-time Firebase data into Svelte stores.
 

The Uncategorizables

redirect.pizza
A service that handles redirecting domains with speed, full HTTPS support, and API compatibility. Includes a decent free tier.

Supaglue
An open-source unified API for CRM integrations, and handles authentication, caches, and normalizes data from multiple CRM platforms, so you can ship native, customer-facing CRM integrations quickly.

Nango
Pre-built OAuth flows and secure token management for 70+ APIs, 100% open source.

.envless
A secure, open source, and frictionless way to share and manage app secrets across teams. Includes e2e encryption, version control, CLI support, and more.

Windmill
An open-source developer platform to turn scripts into workflows and UIs, an alternative to other internal tools solutions.

We scour 100+ Patents to Predict the Future of Tech
Meet Patent Drop — a publisher with expert analysis on how patents are shaping multiple domains — think future of healthcare, electric vehicles, and AI. Delivered twice weekly, this free newsletter is the source of truth for over 25,000 thought leaders across industries.   SPONSORED  

Devfile
A Kubernetes-native API for cloud development workspaces specification. An open standard defining containerized development environments.

Hyperswitch
An open-source financial switch to connect with multiple payment processors with a single API to improve payment conversions and reduce costs and operations.

crul
A mashup of "crawl" (as in web crawling), and "curl", a query language that lest you access, crawl, enrich, and clean data from anywhere to anywhere.

Wavebox
A web browser for work that features tidy tabs, multi-account login, unified search, flexible workspaces, split-screen, built-in extensions, and more.
 
peppermint.sh
An open-source FreshDesk alternative that provides a central hub for your help desk, for tracking, prioritizing, and solving customer support tickets.
 

Commercial Apps and Classifieds

A Tweet for Thought

In case you missed it, here's the video of the guy who found a frog living in his fence, so he used a 3D printer to build him a tiny frog paradise.
   

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

Tippy Coco is a neat and fun little game made with HTML Canvas, apparently inspired by an old game from 1999 called Slime Volleyball that was created as a Java applet. I think that's the first time I've used the word "applet" in at least 10 years.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris