|
Issue #501 • February 23, 2023
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.
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.
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.
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:
|
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
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.
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
|
|
