fidzu : JavaScript

#​736 - May 16, 2025

Read on the Web

JavaScript Weekly

'I Think the Ergonomics of Generators is Growing on Me' - The author notes generator functions have been widely available in JavaScript for a long time, yet "their practicality hasn't exactly caught on." This is a great look at what they are and where they can be useful.

Alex MacArthur

JavaScript's New Superpower? Explicit Resource Management - V8 v13.8 introduces the idea of deterministic resource cleanup. Among a range of new symbols and objects for the task, the basic idea is you can wrap any file handle, stream or connection in a using/await using block and the runtime will handle any cleanup once resources go out of scope.

Rezvan Mahdavi Hezaveh (V8)

Write CSS Like a Pro - Kevin Powell shares how to create a responsive website from scratch using modern CSS features (such as nesting, utility classes, custom properties, and more). This detailed video course also dives into adding additional polish via animations, view transitions, and more.

Frontend Masters sponsor

Basecoat: shadcn/ui's Magic, But Minus React - shadcn/ui is a popular suite of well designed React components, but if you'd like to use them in other contexts too, Basecoat is for you. Basecoat ports the components to a more vanilla form you can use with your framework (or not) of choice.

Ronan Berder

IN BRIEF:

• Did you know that console.log supports format strings? I didn't!

• The Deno team shares an update on the Fresh framework.

• The Angular team is teasing the release of Angular 20 to be on May 29, but we might learn a lot more at Google I/O next week. I'm going to be there, say hi if you see me! :-)

• Microsoft announced a round of layoffs this week and, much to the community's disappointment, Ron Buckton, a key TypeScript contributor, was among those affected.

• Brian Clark shares some best practices for creating a modern npm package.

RELEASES:

• May 14 Security Releases of Node.js - Including v24.0.2 (Current), v23.11.1 (Current), v22.15.1 (LTS), and v20.19.2 (LTS).

• Nuxt 3.17 - The full-stack Vue.js-based framework.

• Parcel v2.15.0 - The popular build tool gets a new transformer and minifier for HTML and SVG that also supports converting SVGs to JSX for use in React components.

• React Router 7.6, MUI X 8.3, Mithril.js 2.3

📖 Articles

JavaScript, When (and What) is this? - Dives into the complexities of the this keyword, explaining how its value is ultimately determined by the context in which a function is called, rather than where it's defined. It's been many years since we've covered this elementary topic, but this is a fantastic, fresh two-part take.

Mat 'Wilto' Marquis

How We Debugged a Broken Checkout Flow in Flask + React - Dropped carts = lost revenue. See how Sentry tracing can catch a full-stack bug in a Flask + React checkout flow-before it can become a support fire drill.

Sentry sponsor

Building a React App with GitHub Copilot - A good walkthrough, complete with video, if you prefer, of bringing together several of GitHub Copilot's features for building a modern JavaScript app quickly.

Kedasha Kerr (GitHub)

Regular Expressions in JavaScript - Powerful but often misunderstood, many will benefit from this roundup of the potential regexes offer to JavaScript developers.

Adebayo Adams

📄 Robust Data Fetching Architecture for Complex React/Next.js Apps Trevor I. Lasn

▶️ Native and RxJS Observables: A Direct Comparison Rainer Hahnekamp

📄 Angular's httpResource in the Wild - A modern way to make HTTP requests in Angular. DrDreo

📄 Node.js 24 is Here: What You Need to Know Lizz Parody

📄 Building the Bridge: Running JavaScript Modules from Dart Chima Precious

🛠 Code & Tools

ANSIS 4.0: ANSI Color Library for Everywhere - A library to use the power of ANSI escape sequences for coloring and styling text in many environments including the terminal, Chromium-based browsers, Node, Bun, Deno, and even Next.js. v4.0 is a big upgrade with enough breaking changes to warrant a migration guide for existing users.

webdiscus

TanStack DB: A Reactive Client Store with Fast Real-Time Sync - A new entry to the TanStack family of libraries that extends TanStack Query with collections, live queries and optimistic mutations.

TanStack

Introducing Clerk Billing - Set up subscriptions in your B2B or B2C app without writing custom payment code or building your own UI.

Clerk sponsor

Svelte Sonner: A Toast Notification Component for Svelte - You may be familiar with the fantastic Sonner in the React world - now there's a Svelte version.

Robert Soriano

tscircuit: Use React for Building Electronics Projects - An interesting way to design and lay out electronic circuit boards using a JSX-based approach. GitHub repo.

tscircuit Inc.

jsdiff 8.0: A JavaScript Text Diffing Implementation - Can compare strings for differences in various ways including creating patches. There's an online demo.

Kevin Decker

Feedsmith: A Fresh New Web Feed Parser and Generator - A new, modern way to both parse and generate RSS, Atom, JSON Feed, OPML, and RDF feeds with support for common namespaces as used in podcast, media, and other niche types of feed.

Maciej Lamberski

• Faker 9.8 - Generate fabricated data to your heart's content.

• ngx-vflow 1.8 - Angular library to create node-based apps.

• 🎨 color-convert 3.1 - Plain color conversion functions.

👀 This could be useful..

Fx 36.0: A Command-Line JSON Viewer & Processing Tool - It's written in Go, but if you've got some files full of JSON that you want to slice and dice, Fx is for you (it's easy to install). This week's v36 release adds support for streaming JSON and tailing such streams, it's also much faster and less memory hungry when parsing large JSON files. A solid update for a handy tool.

Anton Medvedev

P.S. If you're into React or Node.js, we focus more directly on those in React Status and Node Weekly respectively, so check out the latest issues of those too :-)

#​735 - May 9, 2025

Read on the Web

JavaScript Weekly

k6 1.0: Go-Powered Load Testing with JavaScript - A full-featured, configurable load generation tool that uses the Sobek Go-powered JavaScript engine to support writing test scripts in JavaScript. v1.0 promises stability, first-class TypeScript support, and better extensibility.

Grafana Labs

JSON-Powered White-Label Form Builder for Your JavaScript App - Build dynamic JSON-driven forms in your JavaScript application with SurveyJS - a fully customizable, drag-and-drop form-building UI component. It integrates seamlessly with React, Angular, and Vue 3, and has no backend limitations. Perfect for form-heavy apps.

SurveyJS sponsor

Node 24 (Current) Released - Node's release lines are shifting a little lately - v18 has gone EOL and now v23 gives way to v24 as the 'Current' release for when you need the cutting edge features. It comes with npm 11, V8 13.6 (hello RegExp.escape, Float16Array, and Error.isError), the URLPattern API exposed by default, plus Undici 7.

Node.js Team

💡 Technically, Node v24.0.1 is the latest version temporarily reintroducing an EOL feature due to breakages in popular dependencies.

Visual Studio Code Version 1.100 - Not to be confused with a 1.1 release, this update to VS Code has quite a few goodies for JavaScript developers with improved 'Next Edit Suggestions' that will suggest adding missing imports, support for Node's enhanced network debugging capabilities, improved visibility of type information, remote MCP server support, GPT 4.1 as the new default base model, and more.

Microsoft

IN BRIEF:

• The Node.js team is keen for you to take the latest Node.js Next 10 survey to help guide Node's future priorities.

• Polycompiler uses a cute trick to let you merge Python and JavaScript into the same source file.

• The OpenJS Foundation has announced its new board of directors.

RELEASES:

• 🤖 ESLint v9.26.0 - An interesting release for the popular static analysis tool as it adds support for MCP as a way for ESLint to be used directly by AI models and coding agents.

• 🗾 Mapbox GL JS 3.12 - Interactive, customizable vector maps in the browser, rendered with WebGL.

• Relay v19 - Facebook's declarative React/GraphQL framework.

• Material UI 7.1 - React components using Material Design. Now Tailwind CSS 4 compatible

• Rspack 1.3.9, Babylon.js 8.7, Electron 36 (official blog post)

📖 Articles

The Power of the Spread and Rest Syntax - A quick run through the opportunities opened up with just three little dots ...

Matt Smith

React Server Components for Astro Developers - Astro's 'island' architecture and React Server Components share a strikingly similar mental model. Dan compares the two, digs into some of the quirks, and suggests Astro offers a 'gentler onramp' to some of RSC's ideas if you're struggling with them.

Dan Abramov

Wallaby MCP: Deep Runtime Context for Your AI Agent - Wallaby gives your AI agent live execution data, dynamic coverage, and real-time insights to fix and generate tests, and write code with confidence.

Wallaby Team sponsor

Migrating a Project from Prettier and ESLint to Biome - Prettier and ESLint are staples in many JavaScript build processes, but Biome offers an interesting 'one stop shop' alternative.

Damilola Olatunji

📄 'Electron Ain't Bad, Actually' - Worth re-reading next time you see the clichéd criticisms of Electron. Vaxry

📺 The React Compiler Explained in Three Minutes Better Stack

📄 You're Misunderstanding DDD in Angular Tomasz Ducin

📄 The Story of Fastify + Vue Jonas Galvez

🛠 Code & Tools

HelloCSV: A Drop-In, CSV Importing Workflow for JS Apps - If you or your users have CSV files to import, here's a complete CSV importing workflow for the frontend that you can drop into your app. Basic docs.

HelloCSV

PptxGenJS 4.0: Build PowerPoint Presentations with JavaScript - A mature library that outputs standards-compliant Open Office XML files compatible with PowerPoint, Apple Keynote, and other common presentation tools. Supports graphics, text, tables, and other typical slide objects. Lots of demos.

Brent Ely

Introducing Clerk Billing - Clerk Billing lets you add B2C/B2B subscriptions with no payment code or UI work-just drop in components and go.

Clerk sponsor

Mantine 8.0: The Full Featured React Components Library - Mantine is one of the most celebrated React components libraries, and for good reason: it's full featured, modern, and looks great. v8.0 ups its chart game with a little Recharts magic, adds over twenty new components (including a GitHub-style Heatmap, Tree and SemiCircleProgress), submenus, and much more.

Vitaly Rtishchev et al.

Hyparquet: Parquet File Parser for JavaScript - Parquet is a popular column-oriented data file format frequently used for storing large datasets for analysis. Hyparquet is a dependency-free JavaScript library for working with Parquet files, even in the browser (as in this demo).

Hyperparam

🔊 react-sounds: Add Sound Effects to React Apps - Having sound effects on the Web might sound like your idea of a nightmare, but this is a well put together project with delicate, well thought out examples that strike the right tone.

Aedilic Inc.

mono-jsx: <html> as a Response - A server-side JSX runtime that renders <html> to a Response with no build step needed and works across numerous server-side JS runtimes.

Je Xia

• Prisma v6.7 - The popular ORM's attempts to move away from Rust to TypeScript are picking up pace.

• Slack Send GitHub Action 2.1 - Send data into Slack from GitHub Actions.

• openid-client 6.5 - OAuth 2/OpenID Connect client API for JS runtimes.

• 📄 DOCX 9.5 - Generate Word documents from JavaScript.

• eslint-plugin-prettier 5.4 - Runs Prettier as an ESLint rule.

👀 Elsewhere..

Here's a selection of things from the broader ecosystem we've noticed this week:

• The CSS Overflow 5 spec enables the creation of pure CSS scroll and 'carousel' experiences on the Web, and Sara Soueidan has dug in deep and done an accessibility and usability analysis of the feature. Is it time to give up your JavaScript-based approach? Not yet, says Sara.

• Sam Rose is back with another fantastic visual essay - this time looking at 'reservoir sampling.' As well as getting to learn a useful programming technique in a visual way, you can also check out all the JavaScript code he built that powers the article.

• One team decided to move away from Next.js and migrate to Ruby on Rails, while still maintaining a React frontend - here's their tale of why and how.

• Postgres 18 Beta 1 was released. IO performance on Linux is a big focus. The final release is due in September or October.

• 🤖 Google has updated its Gemini 2.5 Pro model - they claim it's now far better at building frontend apps in particular with 'a real taste for aesthetic web development'.

P.S. If you're into React or Node.js, we focus more directly on those in React Status and Node Weekly respectively, so check out the latest issues of those too :-)

#​734 - May 2, 2025

Read on the Web

JavaScript Weekly

GSAP v3.13: JavaScript Animation Set Free - Last year the popular GSAP (a.k.a. GreenSock) animation library was acquired by Webflow and as of this new version the entire GSAP toolkit is freely available (including formerly paid addons like MorphSVG and SplitText) even for commercial use. If you're unfamiliar with GSAP and want to see some of what it can do, they have a showcase, lots of code demos, and amazing docs.

Cassie Evans and Jack Doyle

💡 Take care with the license though. GSAP is not formally 'open source' but has a 'no charge' license that prevents you using it to directly compete with Webflow.

AG Charts: The Best JavaScript Charting Library in the World - Create beautiful JavaScript Charts in minutes with our open-source library. Built by AG Grid, AG Charts has an intuitive, flexible API, 20+ series types and advanced features, including Financial Charts. Supports React, Angular & Vue. Try for free.

AG Charts sponsor

Converting Values to Strings in JavaScript - When Dr. Axel says "converting values to strings in JavaScript is more complicated than it might seem", I'm inclined to believe him. An interesting poke about into something seemingly simple you might not think about very much.

Dr. Axel Rauschmayer

📉 Giving V8 a Heads-Up: Faster Startup with Explicit Compile Hints - A look at a V8 optimization that lets you direct V8 to eagerly compile specific files as a way to speed up startup. It ships with Chrome 136 and the performance gains are more compelling than you might expect.

Marja Hölttä

IN BRIEF:

• Node.js's releases are currently shifting around a little. v18 has just gone 'end of life', v23 has entered 'maintenance' mode and v24 is soon to land as the new 'current' release.

• 🤠 jQuery was first released in 2006 and to celebrate its 20th anniversary, there's a jQuery Reunion event in Texas on January 16-17, 2026.

• The Svelte team has a look at what's new in Svelte lately, and the Astro team has a similar update for Astro too.

• You can now install JSR packages with pnpm and Yarn.

• Learn about JavaScript's numerous operators with a handy online reference.

RELEASES:

• Deno 2.3 - The alternative JavaScript runtime improves its single binary compilation feature to support FFI and Node native addons.

• Prisma 6.7 - Popular ORM for Node.js and TypeScript.

• Bun v1.2.11, Electron 36, pnpm 10.10

📖 Articles

Export Google Analytics Data to Google Sheets via Apps Script - Google Apps Script is a JavaScript-based platform for dynamically automating tasks in all sorts of Google apps. Here's how to use it to bring Google Analytics data into a Google Sheet.

Kayce Basques

Building an Offline-Friendly Image Upload System - How to leverage PWA tech such as IndexedDB, service workers, and the Background Sync API to help improve the reliability of web apps for users, particularly those with unreliable internet connectivity.

Amejimaobari Ollornwi

How to Take Clerk to Production - How to take a Clerk app to production with custom domains, OAuth credentials, and DNS setup.

Clerk sponsor

What Does React's 'use client' Do? - Dan Abramov takes a practical look at how to think about the use client and use server directives React Server Components introduced and how they let you elegantly structure a client/server app as "a single program spanning two environments" - a concept that Dan thinks could be more widely used, even outside of React.

Dan Abramov

📄 Deno's Decline? - A critical view of Deno's Deno Deploy edge platform which has been steadily dropping regions. David Bushell

📺 How to Detect Memory Leaks in Your Web App Decoded Frontend

📄 Pwning the Ladybird Browser - The vector is Ladybird's LibJS JavaScript engine. Jess

🛠 Code & Tools

PDFSlick 3.0: View and Interact with PDF Documents in JS Apps - A full-featured PDF viewer for React, Solid, Svelte and vanilla JS apps. Built on top of PDF.js, it offers a wide array of features from simple PDF viewing to working with multiple and large documents with annotations. Demo. v3.0 bumps up to PDF.js v5 with ICC profile support, better JPEG 2000 support, and improved rendering of large pages.

Vancho Stojkov

Koa 3.0: The Expressive HTTP Middleware Framework - Koa first appeared a decade ago as a 'next-generation' Web framework that shared some of the lineage of Express.js, but leaning on more modern JS features. While Express has been making a comeback, Koa remains a compelling alternative.

Koa contributors

Your Terminal, Evolved - The new agentic CLI from AWS works with you to write files locally, run bash commands, or call AWS APIs. Start for free!

Amazon sponsor

Seyfert: A Framework for Building Discord Bots - Create bots for the popular chat system starting from bots that respond to simple commands up to creating components and getting user input. Supports Deno, Bun, and Node.

socram03

Storybook 9 Beta - A strong step forward for the UI 'frontend workshop' with several experimental features from Storybook 8 becoming stable. v9 has a strong focus on component testing, plus React Native support.

Michael Shilman

PGlite 0.3: Postgres but in WebAssembly - A WebAssembly-based build of the Postgres SQL database meaning you can run it wherever WebAssembly can be run (such as in the browser as in this demo).

ElectricSQL

• pretty-bytes 7.0 - Convert a size in bytes into a human readable equivalent (e.g. 1337 → 1.34 kB).

• QuickJS 2.2 - Execute JavaScript code in a WebAssembly QuickJS sandbox.

• Piscina 5.0 - Popular Node.js worker thread pool.

• Jira.js 5.0 - A wrapper for Jira's numerous APIs.

• NodeBB 4.3 - Node.js-powered forum system.

📢 Elsewhere

A quick roundup of other interesting updates and useful resources from across the broader developer landscape:

• Redis is open source again! The popular Redis in-memory data store ran into a bit of drama in recent years with a license change following its acquisition. The good news is that an AGPL license is now an option for the new Redis 8 release making Redis truly 'open source again.'

• TypeScript ←→ C#: I've been dabbling with a little C# recently (it's the main language used in Unity game development) and enjoyed this TypeScript is Like C# guide oriented largely around showing TypeScript/JavaScript vs C# examples of doing the same things.

• ❤️ JS + HTML: It's a simple thing, but Simon Willison reminds us that static HTML enriched with JavaScript and served up on GitHub Pages is one of the best ways you can give software freely for the world to use.

• Emulators-a-plenty: Tiny Emus is a showcase of almost 200 emulators that run in the browser, largely for 8 bit platforms, games, and even some visual CPU demos.

• CSS shapes: Did you know CSS now has a shape() function for drawing complex shapes for clipping paths?

#​733 - April 25, 2025

Read on the Web

JavaScript Weekly

p5.js 2.0: The JavaScript Library for Creative Coding - A popular Processing-inspired creative coding library that makes it easy to create interactive, visual experiences (examples). v2.0 improves its font support, adds more ways to draw and manipulate text, adds a way to write shaders in JavaScript, and much more. p5.js 2.0: You Are Here has more details on the release and where the project is headed next.

p5.js Team

💡 p5.js is simultaneously useful and fun. It provides a great abstraction for interactive, visual experiences and is easy to play with using its online editor. A pastime of mine is asking AI models to create demos. For example, load this p5.js sketch and hit play to see a JS logo glitch experiment OpenAI's o3 just made for me.

Unbork Your Laravel App (Live) - Laravel is so in right now. Join us for a hands-on debugging session using a demo app, Unborked. We'll track errors, replay sessions, trace slowdowns, and maybe even let the robots help. Bring your bugs.

Sentry sponsor

Big Updates in the React World - You know it's been a big week in the React world when the React Compiler hitting Release Candidate is the second most important story. In this latest React Labs post, we learn about two new features ready to try out today in react@experimental: View Transitions and the <Activity> component.

Ricky Hanlon

IN BRIEF:

• SolidJS creator Ryan Carniato reflects on a decade running the SolidJS project, four years after hitting v1.0.

• Back in March, the Node.js project suffered a security incident relating to its CI/testing setup. They've now written up the details of what happened.

• With Deno 2.3 just around the corner, the Deno team shares a few updates on recent improvements.

RELEASES:

• ⭐ pnpm 10.9 - The alternative, efficient package manager. It can now be used to install JSR packages.

• jsvu 3.0 - Tool to install versions of various JavaScript engines.

• SmallJS 1.6 - A Smalltalk-80 implementation that runs in JavaScript.

• Bun v1.2.10, Node.js v22.15.0 (LTS), Next.js 15.4 Canary

📖 Articles

Creating a 3D Split-Flap Display with JavaScript - A split-flap display is a electro-mechanical display commonly associated with live timetable displays and it makes for a neat effect on the Web too. Jhey breaks down how to replicate it, or you can hit up this live demo.

Jhey Tompkins

Impossible Components - Dan Abramov digs into the idea of so-called 'impossible' components that mix server-only and client-only features and how React Server Components can help bridge the divide, culminating in an example you can experiment with for yourself.

Dan Abramov

How to Build a Multi-Tenant App Using Clerk + Supabase - Clerk and Supabase empower you to build B2B apps with only a few small changes to your codebase. Learn how in this guide.

Clerk sponsor

Optimizing Node Performance with V8 GC Optimization - Matteo recently ▶️ gave a talk about Node's memory usage and has written it up into this blog post. He notes that high memory usage doesn't necessarily mean you have a memory leak, explains how V8's garbage collection works, and how to tune things for your own use case.

Matteo Collina

Abusing DuckDB-WASM by Making SQL Draw 3D Graphics (Sort Of) - Oh, this is a fun experiment. DuckDB is a small and powerful in-process SQL database (think SQLite but for analytical tasks) and has a native WebAssembly build. Couple that with some JavaScript, and you too could do some rather bizarre things..

Patrick Trainer

💡 Lest you think this is just a fun item, you could use the techniques learnt here to integrate DuckDB more seriously into other Web projects.

📄 A Decade of Impact: How Our npm Packages Hit 1 Billion Downloads and Shaped JavaScript - A bold title for sure, but with a neat story behind it. Forward Email

📄 Float16Array in JavaScript - Understanding the 16-bit floating point array type. Trevor I. Lasn

📄 When to Use map() vs. forEach() Matt Smith

📄 Zero-Config Debugging with Deno and OpenTelemetry Casonato and Jiang (Deno)

🛠 Code & Tools

JavaScript Font Picker - A surprisingly featureful control for letting users pick fonts from a range of system fonts, Google fonts, and custom fonts of your choice. You can play with a code demo here or go to the GitHub repo.

Zygomatic

🎨 The folks behind this project have also built JS Color Picker.

Scala.js 1.19.0: A Way to Bring Scala and JavaScript Together - Scala is a powerful language that never quite seemed to make it big to me, but it has a devoted fanbase and has grown beyond its JVM roots to also have JavaScript and native runtimes. Scala.js is a Scala to JavaScript compiler and the homepage has some neat code and feature comparisons.

Scala.js Team

Penpot Launches Native Design Tokens! - Simplify your design & code collaboration with Penpot design tokens: the key to consistency and scalability.

Penpot sponsor

Spectacle: Create Sleek React-Powered Presentations - A React-based library for creating sleek presentations using JSX syntax that gives you the ability to live demo your code, add interactive elements, scrollable code blocks, graphics effects, and more.

Nearform

Frimousse: A Lightweight, Unstyled, and Composable Emoji Picker for React - The picker is accessible and won't display any emojis that aren't supported on the device. You can explore some demos here.

liveblocks

• c15t (Consent Management) - A React approach to transforming privacy consent from a mere checkbox into a fully observable system.

• bignumber.js 9.3 - Arbitrary-precision decimal and non-decimal arithmetic.

• Milkdown 7.9 - Plugin-driven WYSIWYG Markdown editor framework.

• Koota 0.4 - Performant real-time ECS-based state management.

• tablesort 5.6 - Plain JS table row sorting mechanism.

• 📺 React Lite YouTube Embed 2.5

• ESLint v9.25.1

📢 Elsewhere

A quick roundup of other interesting updates and useful resources from across the broader developer landscape:

• 🤔 The Microsoft Edge team is looking for feedback on a new console.context() method to enable "helpful contextual logging" within the devtools.

• 🔭 David Cummings of the Jet Propulsion Laboratory gave a talk about ▶️ how they diagnosed and fixed a problem on the Voyager 1 space probe while it was 15 billion miles away. If you ever think debugging a local app is difficult, this is next level.

• 🔐 The maximum lifetime of TLS certificates is set to be reduced to 47 days in a gradual process between early 2026 and 2029.

• 🤯 Google may be forced to sell Chrome, and guess who's interested in buying it? OpenAI, among others.

• TIL you can interact with GitHub's GraphQL API with the GitHub CLI tool.