Web Tools #501 - FontFaceSet, JS Libraries, Databases, Jamstack

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #501 • February 23, 2023

Advertisement

Build Internal Tools, Remarkably Fast
If you or your team are spending more time on boilerplate code and other redundant work than you do on solving problems, you should check out Retool – a new approach to building apps. Retool moves the starting line with a platform that makes it much faster to connect to any data source, design and develop at the same time, and deploy software securely.

Retool

Companies like Amazon and Plaid use Retool to build apps and workflows that help teams work faster. Retool is free for teams of up to 5, and early-stage startups can get $25,000 in free credits for paid plans.

Try Retool Free Today

In case you weren't aware, there's an entire API that's not exactly new that allows you to deal with font loading on any web page. It's called the FontFaceSet API and it's part of the CSS Font Loading Module.

I can't possibly cover it well in a short intro like this, but I thought this would be a good place to introduce some of its features, should you want to look more into it.

As soon as any page loads, you have access to a number of different properties and methods of this API by simply calling document.fonts. You can try this right inside your browser's console, which will allow you to see all the exposed properties and methods.

The document.fonts API

You'll get something like the above if you enter that line in your console, which shows the properties available. This object returns a font set that belongs to the page, and you can query the following properties:

  • status – Will return either loaded or loading to indicate if the font set has finished loading.
  • ready – A promise that resolves once the document has completed loading fonts, layout operations are completed, and no further font loads are needed.
  • size – Returns a number indicating how many fonts are in the font set. Note that even if you only load two fonts, this number might be considerably higher because each font's weight will count as a single font.

The API also includes a FontFace constructor that allows you to create a new font object and load fonts on the fly, on demand. Once a font is created, code the following can be used:

// Create a font object
const font = new FontFace("myfont", "url(myfont.woff)");

// Add to document.fonts (FontFaceSet)
document.fonts.add(font);

// Load the font
font.load();

// Do something when fonts are all loaded
document.fonts.ready.then(() => { // do something... });

When examining any font set in the console, you can drill down even further into its prototype to see all the methods available, as the image below shows.

The document.fonts API methods

So feel free to mess around with some of those inside the console on any page.

That's just a brief introduction to this interesting API, but you can check out this MDN article for a more in-depth discussion of the ways to use it and all the different features.

Now on to this week's tools!
 

JavaScript Libraries and Frameworks

Ramen
A micro framework for creating REST APIs in Node.js, inspired by Express.js.

Egg
A library for building better enterprise frameworks and apps with Node.js and Koa (the popular HTTP middleware framework for Node.js).

Retool
A platform of 100+ expertly crafted UI components along with an app-building framework, for developers and teams to build internal tools faster than ever.   SPONSORED  

Hono
A small, simple, and ultrafast web framework that works on Cloudflare Workers, Fastly Compute@Edge, Deno, Bun, Vercel, Lagon, Node.js, and others.

EverShop
A modular and fully customizable Node.js e-commerce platform with essential commerce features, built with React and GraphQL.

EverShop

Foi
A language that pragmatically balances functional programming and imperative programming techniques and pulls inspiration for various syntax and behaviors from JS, Scala, Haskell, F#, Go, Clojure, Scheme, and more.

Mars
An all-in-one developer platform with a full-stack IDE to build apps in JavaScript/TypeScript with options to build with a no-code UI or code-based.

CortexJS
A suite of modern tools for scientific computing, including a web component for beautifully typeset math equations and an engine to perform symbolic computing and numeric evaluations in JavaScript environments.

Acorn
A small, fast, JavaScript-based JavaScript parser that includes three different types of parsers (main, error tolerant, and a syntax tree walker).

On the Release Radar:

Databases, JSON Tools, etc.

Drizzle ORM
A TypeScript ORM for SQL databases designed with maximum type safety in mind and comes with a drizzle-kit CLI companion for automatic SQL migrations generation.

TEXT2SQL.AI
An online AI-based tool that converts a plain English phrase to SQL syntax, and vice versa.

TEXT2SQL.AI

Suretype
A JSON validator targeting TypeScript and JSON Schema that's type safe when used in TypeScript.

Data is the Lifeblood of Modern Businesses
What are the most common mistakes companies make when it comes to managing and protecting sensitive user data? Read the guide now to learn how to move fast without breaking privacy.   SPONSORED  

yq
A lightweight and portable command-line YAML, JSON, and XML processor that uses jq-like syntax but works with YAML files as well as JSON, XML, CSV, and TSV.

DriftDB
A real-time data backend that runs on the edge. Clients connect to it directly over a WebSocket and it supports a number of messaging primitives.

Sequelize
A modern TypeScript and Node.js ORM for Oracle, Postgres, MySQL, MariaDB, SQLite, SQL Server, and more, that features solid transaction support, relations, eager and lazy loading, read replication, etc.

Kysely
A type-safe and autocompletion-friendly typescript SQL query builder, developed for Node.js, but also runs on Deno and in the browser.

Zapatos
Zero-abstraction Postgres for TypeScript that includes a CLI tool, building blocks for writing SQL, shortcut functions to produce CRUD queries, JOINs as nested JSON, and more.

PRQL
Pipelined Relational Query Language, pronounced “Prequel”, a modern language for transforming data that's a simple, powerful, pipelined SQL replacement.

Litestream
A standalone disaster recovery tool for SQLite that runs as a background process and safely replicates changes incrementally to another file or S3.
 

Jamstack, CMS's, etc.

dodai
A small static site generator written in TypeScript and React, that includes routing, a dev server, and more.

microfeed
A lightweight CMS, self-hosted on Cloudflare, for podcasts, blogs, photos, videos, documents, and curated URLs.

Congo
A powerful, lightweight theme for Hugo built with Tailwind CSS, and can be used for static content or a traditional blog.

Data is the Lifeblood of Modern Businesses
What are the most common mistakes companies make when it comes to managing and protecting sensitive user data? Read the guide now to learn how to move fast without breaking privacy.   SPONSORED  

Outstatic
A static CMS for Next.js that includes a full-featured dashboard, fast setup, no database, and free hosting.

Outstatic

Free Hugo Themes
A small gallery of free themes for use with Hugo, Jekyll, and more.

Alinea
A modern CMS (still in Alpha stage) where content is stored in flat files and committed to your Git repository, can easily be queried through an in-memory SQLite database, and is fully typed.

Rocket
A modern web setup for static sites that allows you to add JavaScript and/or Web Components only on pages where needed.

KeyPress
A simple, keyboard-first blogging platform based on Nuxt, Supabase, and Vercel, that lets you write blog posts using only the keyboard.

MyJekyllBlog
A multi-user CMS and hosting platform for Jekyll blogs that's self-hostable, and the author also has a paid platform that you can sign up for.

Humanizer
A minimal privacy-friendly, static site generator that uses Markdown, has no dependencies, and no database.
 

Commercial Apps and Classifieds

These are commercial apps, affiliate links, PPC ads, and paid classifieds. Submit yours!
Quick API – Turn your CSV file, Google Sheet, or Airtable into an API.
Bytes – A JavaScript newsletter that's entertaining and informative for all levels of developers.   AD
Uvodo – A fully customizable plug-and-play e-commerce platform for online sellers, devs, and more.
InstaWP – A platform to quickly spin up a WordPress sandbox for testing, prototyping, etc., with templates and Git integration.
Emerging Tech Brew – A 3-times-a-week newsletter with the latest tech news impacting you and your future. AD
Medis – A modern Redis GUI designed for Mac that's trustworthy in critical situations.
Docswrite.com – Platform to convert Google Docs to Wordpress, HTML, or Markdown.

A Tweet for Thought

Maybe I'm wrong for giving this more attention, but this Tweet on backlogs seemed to cause a bit of a stir. Some interesting discussion in the thread that I think is worth a read.
 
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...

This is a cool project: Literature Clock will display a quote from a book that contains the exact current time that you view the page and it will update to a new quote each minute. It has more than 1,000 entries so far according to the GitHub repo.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly
PayPal.me/WebToolsWeekly

Older messages

Web Tools #500 - assert(), Frameworks, JS Utils, Uncats

Friday, February 17, 2023

Web Tools Weekly WEB VERSION Issue #500 • February 16, 2023 Advertisement The New Tab Page You'll Actually Use Ah, the hyperlink. It's the single coolest thing on the web. There wouldn't

Web Tools #499 - JS Libraries, Git/CLI Tools, React

Thursday, February 9, 2023

Web Tools Weekly WEB VERSION Issue #499 • February 9, 2023 Advertisement Practical, No-nonsense UI Design Tips 🔥 If you do any design work, you might struggle to find actually practical UI advice that

Web Tools #498 - CSS Tools, Testing, SVG/Media

Thursday, February 2, 2023

Web Tools Weekly WEB VERSION Issue #498 • February 2, 2023 Advertisement Nothing Beats the Hyperlink Old school hyperlinks are the best. They were born with the web, and they will always be here. A

Web Tools #497 - JS Utilities, Git/CLI Tools, Uncats

Thursday, January 26, 2023

Web Tools Weekly WEB VERSION Issue #497 • January 26, 2023 Advertisement The Fast Way for Developers to Build Mobile Apps Build native iOS and Android apps with no mobile expertise—all you need is JS

Web Tools #495 - CodePen, CSS, Bundlers, Media (SVG, etc.)

Friday, January 20, 2023

Web Tools Weekly WEB VERSION Issue #495 • January 12, 2023 Advertisement JavaScript & DOM Tips E-Books Bundle My JavaScript E-Books bundle now includes a new volume! Get all 4 e-books containing

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