Plus Node 22 and pnpm 9.0 land, the tale of a Bun migration, and the problems with new URL(). |

#​685 — April 25, 2024

Read on the Web

Together with  Frontend Masters logo

JavaScript Weekly

JSR is Not Another Package Manager — When Ryan created Node, JavaScript had no packages or standard module system. npm and CommonJS took off, and tools like Yarn or pnpm extended npm in certain areas, but in today's ES modules era, it’s time for a transformation. JSR is not merely a new npm, but a shift in how packages are distributed, tailored for the modern era.

Ryan Dahl

Node.js v22 (Current) Released — The newest, cutting edge, major version of Node lands with some key enhancements. v22 becomes the new ‘current’ release (becoming active LTS in October). It adds support for require-ing ESM, gets a built-in WebSocket client, upgrades to V8 12.4, and includes a task runner (e.g. node --run task_name). This blog post takes a closer look.

Rafael Gonzaga

💡 If you're a Node developer, be sure to subscribe to Node Weekly as well, where we go into more depth of server-side JavaScript each week.

Lydia Hallie Tests Your JavaScript Knowledge — Challenge your core knowledge with 50 interactive quiz questions covering topics like the event loop, scopes and closures, classes and prototypes, garbage collection, and more. After each question, you'll get an in-depth visual explanation from Lydia to deepen your understanding of fundamental JS concepts.

Frontend Masters sponsor

pnpm 9.0: The Efficiency-Focused Package Managerpnpm has long been a fantastic option for folks looking to save disk space and CPU cycles (or for its great monorepo support) while maintaining most of what makes npm great. v9.0 drops Node 16 and 17 compatibility, honors the packageManager field in package.json, makes some default config changes, and adopts Lockfile v9.

pnpm

IN BRIEF:

  • 🙈 Yesterday was JS Naked Day, a day to go entirely without JavaScript. Sadly we missed it.. 😏

  • 🇫🇷 dotJS 2024 is a JavaScript conference taking place in Paris, France on June 27. The speaker roster so far is pretty compelling.

  • rcompat is an interesting JS interoperability and runtime compatibility layer for servers, so you can avoid the differences between Node, Deno and Bun.

RELEASES:

📒 Articles & Tutorials

A Tale of Migrating a Project to Bun — Eric, an engineer at Render, walks through the steps of how he migrated his Sveld project to Bun (replacing Yarn and Vitest in the process), including some minor gotchas he encountered, and what the speed gains were.

Eric Liu

The Frontend Developer/Engineer Handbook 2024 — A guide to the current webdev landscape, covering how to get up to speed on topics like editors, CSS, UX, UI, the command line, tools and frameworks, perf, accessibility, etc.

Cody Lindley

3 Reasons to Use JavaScript Libraries for Graph Visualization — Easily add network visualization capabilities to your applications, while cutting down on dev time.

Linkurious sponsor

HTML Attributes vs DOM Properties — They’re different, but often coupled. Jake outlines the the difference, and why it matters.

Jake Archibald

▶  A Node.js Streams Masterclass — An hour-long odyssey with the creator of Fastify (and Node.js TSC member) into the world of streams. A stream is like an array over time.. we learn, before going into live coding and demos.

Matteo Collina

How I Fixed My Brutal TTFB (Time to First Byte) — All it took was two small changes to how data is fetched to reduce the p75 TTFB from 3.46s to just 704ms. Learn more.

Sentry sponsor

📄 The Problem with new URL(), and How URL.parse() Fixes That Kilian Valkhof

📄 The Intl.Segmenter Object is Now Part of Baseline – Interoperable, locale-sensitive text segmentation. Rachel Andrew

📄 Event Dispatch in Angular – Under-the-hood of the new event delegation system. Ramanathan and Wilkinson

📄 The Making of a TypeScript Feature: Inferring Type Predicates Dan Vanderkam

📄 Adding ESLint and Auto-Fixing an Existing TypeScript Project Daniel Doubrovkine

📺 Using TC39 Proposed Signals in React and Svelte TodayJack Herrington

📄 Quirks of Escaping JavaScript for a script Tag James Fisher

🛠 Code & Tools

📊 Unovis: A Modular Data Visualization Framework — Works with React, Angular, Svelte, Vue or plain old JS/TS. Handles all sorts of things from Sankey diagrams to maps, graphs, chord diagrams, and traditional line/area charts. The v1.4 release adds support for annotating visualizations in a flexible way. There’s a gallery of examples (with code) if you want to dig in.

F5, Inc.

Transformational Auth & Identity | Userfront — "Compared to our previous experiences in the security/auth space, Userfront is an order of magnitude simpler to use."

Userfront sponsor

ReScript 11.1 Released with Improved JSX SupportReScript is an OCaml-inspired, typed language that compiles to JavaScript and has a JSX transform built into the language. JSX support was previously solely for React use cases, but now works with Vue, Preact, and other approaches too.

The ReScript Project

typed-xlsx: Feature-Rich Type-Safe Excel Reporting — Define a strongly typed spreadsheet schema, then populate and work with the sheets directly from JS/TS, such as for generating reports for users – example code. Wraps around SheetJS. GitHub repo.

Cyprien Thao

Devalue 5.0: Like JSON.stringify, But..“Gets the job done when JSON.stringify can’t.” Namely, it can handle cyclical and repeated references, regular expressions, Map and Set, custom types, and more.

Rich Harris

imask.js 7.6.0: A Vanilla JavaScript Input Mask — Prevent users from entering invalid values. Has plugins for Vue, Angular, React, Svelte, and Solid, as needed.

imaskjs

browser-or-node 3.0: Figure Out Where Your Code is Running — Provides a simple way to tell if your code is currently running in a browser, in Node, in a Web Worker, or in Deno. Works with both ESM and CJS imports.

Dinesh Pandiyan

n