#​681 — March 28, 2024

Read on the Web

JavaScript Visualized: Promise Execution — A helpful diagrammed and animated article, coupled with an (optional) 8-minute video, that goes into how promises work and are scheduled behind the scenes. It’s useful to have a good mental model of these mechanics, given promises form the basis of asynchronous functions in JavaScript.

Lydia Hallie

▶  Node.js: A Documentary of Its Origin Story — It's an hour long, but this documentary covers the history of Node particularly well, including how everything brewed up to the io.js fork of 2014. Easter weekend watching, perhaps?

Honeypot

Learn Advanced JavaScript Performance Optimization — Garbage collection, memory profiling, data structures like sets and arrays, and event loop management. Learn performance-driven programming, preparing you to write blazingly fast and efficient code!

Frontend Masters sponsor

IN BRIEF:

• The Node.js Technical Steering Committee has confirmed there's no intention to remove npm from the main Node distribution.

• Is Bun Windows Yet? No, but Bun 1.1, which will support Windows, is supposedly just four days away..

• An example of a simple, yet useful, Web Component in a single GitHub Gist.

• The RedwoodJS framework now supports React Server Components too, as an alternative to its traditional GraphQL-based approach.

• RunJS Play is a neat Web-based JavaScript playground that shows instant live feedback alongside each line.

• Vercel now fully supports Node.js 20 for both builds and functions.

RELEASES:

• VitePress 1.0 – Powerful static site generator.

• Neutralinojs 5.1 – Alternative cross-platform desktop app framework.

• Babylon.js 7.0 – Powerful game & 3D rendering engine. No official release post yet, but expected later today.

• Radix Themes 3.0 – Powerful frontend component library.

• Node.js v20.12.0 (LTS) and Node v18.20.0 (LTS).

• Deno 1.42.0, Vite 5.2, TypeChat 0.1, Chromatic 3.

📒 Articles & Tutorials

A Look at ECMAScript's Iterator Helper Methods — The proposal is several years old, but now at stage 3 in TC39, Iterator Helpers are being implemented and ship with V8 12.2/Chrome 122. The helpers are functions like .map, .filter, .take and .forEach and are made available to any object with Iterator.prototype in its prototype chain.

Rezvan Mahdavi Hezaveh (V8)

Introducing Waku's “Pages Router” — Waku is an interesting minimal server-side React framework and it’s now also bringing a minimal API to the modern React server components era: “Making a Waku site is now as simple as making a few files and folders in the ./src/pages directory”..

Sophia Andren

Transformational Auth & Identity | Userfront — Userfront is an auth & identity platform that transforms your business to serve free, freemium and enterprise customers.

Userfront sponsor

What You Need to Know About Modern CSS — A guide with a list of the newest additions to CSS (think nesting, view transitions, :has(), etc). JS plays an occasional role too, whether by enhancing or polyfilling modern CSS features.

Chris Coyier

Building a Micro HTMX SSR Framework — Matteo builds on an earlier tutorial about creating a ‘movie quotes’ app by exploring an alternative backend stack to use, based upon Fastify, Vite and HTMX.

Matteo Collina

Meet Angular’s New output() API — Outputs allow component authors to emit values to parent components.
Paul Gschwendtner (Google)

We Rewrote our React App in Svelte in Three Weeks
Dusty Phillips

How to Use the Web Bluetooth API
Confidence Okoghenun

🛠 Code & Tools

Trix 2.1: A Clean, Rich WYSIWYG Editor for the Web — A WYSIWYG editor developed by the folks at 37signals (known as the birthplace of Ruby on Rails). It’s used in their Basecamp and HEY apps, so is about as stress tested as you can get. GitHub repo.

37signals

Meet the Future of Data Delivery with Hasura DDN — Join us April 16 for the unveiling of Hasura DDN. Create a unified, composable API, instantly and with no maintenance.

Hasura sponsor

Atlassian's Pragmatic Drag and Drop Framework — A performance-focused drag-and-drop library that can be used to power experiences on any frontend stack. There’s a live demo on the page along with a recording of a talk by Alex Reardon walking through the motivations for creating it and how it works.

Atlassian

Create Vue3 App: A New Vue App Scaffolding Tool — Taking inspiration from tools like Create React App, this uses Vite to help you spin up a new Vue-based app using tools based upon answers you give to a number of questions.

Selemon Brahanu

<relative-time> 4.4: Format Timestamps as Localized Relative Times — Supply this web component with a standard formatted date and time and it’ll render the right text to suit. It's actually used all over GitHub itself (use Inspect Element on commit times). Demo.

GitHub

DOM3D.js: 3D DOM Viewer in a GitHub Gist — Some code you can copy and paste into your browser console to get a 3D view of the DOM, sort of.. (move your pointer to navigate the.. thing it creates). The effect is odd but fun to play with.

Orion Reed

Free Auth for 1 Million MAUs — WorkOS provides easy-to-use APIs for authentication, user identity, and complex enterprise features like SSO and SCIM.

WorkOS sponsor

• PGlite 0.1 – Lightweight Postgres packaged as WASM into a TypeScript library for the browser, Node.js, Bun and Deno.

• npm-publish 3.1 – GitHub Action to publish packages to npm.

• AdminJS 7.8 – Automatic admin interface for Node.js apps.

• Slonik 39.3 – Node.js Postgres client with type safety.

• react-three-fiber 8.16 – React renderer for Three.js.