Issue #501  (FontFaceSet, JS Libs, JSON/DB, Jamstack)02/23/23

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.

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:

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.

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.

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:

• Angular – Popular JS framework now at version 15+
• Amplication – Node.js dev platform now at version 1+
• SvelteKit – Svelte and Vite framework now at version 1+
• Electron – Cross-platform apps framework now at version 23
• FoalTS – Full-featured TS/Node.js framework now at version 3+
• CASL – Isomorphic authorization JavaScript library now at version 6+

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.

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.

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

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.
   

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 all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris