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

Key phrases

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

Data Science Weekly - Issue 540

Friday, March 29, 2024

Curated news, articles and jobs related to Data Science, AI, & Machine Learning ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

This Week in Rust #540

Friday, March 29, 2024

Email isn't displaying correctly? Read this e-mail on the Web This Week in Rust issue 540 — 27 MAR 2024 Hello and welcome to another issue of This Week in Rust! Rust is a programming language

The Value Of A Promise 🤞

Friday, March 29, 2024

How much is a promise from a tech company really worth, anyway? Here's a version for your browser. Hunting for the end of the long tail • March 28, 2024 The Value Of A Promise When you hear a

New Elastic Security for SIEM Training Course

Friday, March 29, 2024

Detect and respond to evolving threats ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ elastic | Search. Observe. Protect Detect anomalies and malicious behavior March

SBF gets 25 years 

Thursday, March 28, 2024

Sam Bankman-Fried is sentenced View this email online in your browser By Christine Hall Thursday, March 28, 2024 Welcome back to TechCrunch PM! The editorial team spent a chunk of the day discussing

💎 Issue 410 - Being laid off in 2023-2024 as an early-career developer

Thursday, March 28, 2024

This week's Awesome Ruby Newsletter Read this email on the Web The Awesome Ruby Newsletter Issue » 410 Release Date Mar 28, 2024 Your weekly report of the most popular Ruby news, articles and

💻 Issue 403 - Microsoft defends .NET 9 features competing with open source ecosystem

Thursday, March 28, 2024

This week's Awesome .NET Weekly Read this email on the Web The Awesome .NET Weekly Issue » 403 Release Date Mar 28, 2024 Your weekly report of the most popular .NET news, articles and projects

💻 Issue 410 - Node.js TSC Confirms: No Intention to Remove npm from Distribution

Thursday, March 28, 2024

This week's Awesome Node.js Weekly Read this email on the Web The Awesome Node.js Weekly Issue » 410 Release Date Mar 28, 2024 Your weekly report of the most popular Node.js news, articles and

💻 Issue 410 - JSDoc as an alternative TypeScript syntax

Thursday, March 28, 2024

This week's Awesome JavaScript Weekly Read this email on the Web The Awesome JavaScript Weekly Issue » 410 Release Date Mar 28, 2024 Your weekly report of the most popular JavaScript news, articles

📱 Issue 404 - Dependency Injection for Modern Swift Applications Part II

Thursday, March 28, 2024

This week's Awesome iOS Weekly Read this email on the Web The Awesome iOS Weekly Issue » 404 Release Date Mar 28, 2024 Your weekly report of the most popular iOS news, articles and projects Popular