fidzu : JavaScript

#​723 - February 14, 2025

Read on the Web

JavaScript Weekly

Style Observer: A Library to Observe CSS Property Changes - Lea Verou is a developer who's easy to admire because whenever she sets out to solve a problem, the results are always fully formed with no cut corners. So it goes with this 'exhaustively tested' JS library for observing changes to CSS properties which deftly handles lots of browser quirks. See the project homepage for more. (TIL there's a .style TLD!)

Lea Verou

💡 Lea has many other projects to check out, including Color.js which similarly nails the whole process of handling and manipulating colors in JS and the browser.

Build Better with AWS, Using Tips and Tools from the Developer Center - Get hands-on with DevOps, Data & ML, and Generative AI. Use any language, level up your skills. Connect with like-minded devs all over the world on AWS Communities. The AWS Developer Center has everything you need in one place. Don't miss out!

AWS sponsor

Why to Move On to 'ESM-Only' - The march to using ES modules has been going on for years, but if you're still holding out, there's probably a good reason why? However, while you can maintain packages supporting both ESM and CommonJS, Anthony thinks it's time to go 'ESM only' and explains why.

Anthony Fu

💡 On that topic, Sarah Gooding writes about require(esm) being backported and stable on Node.js 20 which makes the transition even easier to justify.

IN BRIEF:

• 🤔 Developer industry analyst Kate Holterhoff asks "Is npm enough?" and questions why there are so many attempts to replace or extend npm in the JS package registry space.

• 📱 The React Native team has a roundup of what happened at the most recent contributor summit. Must read for React Native devs.

• The Popover API is now considered a 'baseline' browser feature with broad support across all major browsers.

• 🤖 Reader Ishan Anand has been working on implementing GPT2 (a precursor to OpenAI's current offerings) entirely in the browser to power some interesting browser-based spreadsheet data processing experiments.

RELEASES:

• Node.js v23.8.0 (Current) and Node.js v22.14.0 (LTS)

• Node.js v20.18.3 (LTS) - The backporting of import attributes and JSON modules is now stable.

• pnpm 10.3 - The fast, efficiency-focused package manager adds a strict-dep-builds option to exit with a non-zero exit code if any dependencies have unreviewed build scripts.

• Pixi.js 8.8 - Fast, flexible 2D WebGL renderer.

• Astro 5.3, Prettier 3.5, Electron 34.2

📒 Articles & Tutorials

How and Why to Build 'Copy Code' Buttons - A commonly encountered way to give readers easier access to source shared on the Web. David Bushell has an interesting followup reflecting on his own experiences implementing the same feature.

Salma Alam-Naylor

The RegExp Escaping ECMAScript Proposal - RegExp.escape() is a function to create an escaped version of a supplied text that matches itself when used as, or in, a regular expression. Axel has also written an implementation in plain JS to get a feel for how it works.

Dr. Axel Rauschmayer

Build a Next.js Sign-Up Form with React Hook Form - Features progressive enhancement, dynamic validation, and secure password handling with Argon2.

Clerk sponsor

How to Start a React Project in 2025 - While there are many ways to start a React project, Robin examines the pros and cons of a few popular approaches.

Robin Wieruch

Learning How to Build Modern Web Extensions - It's easy to run into outdated docs when building extensions. Lucky for us, Hui has been through the process and shares some tips.

Hui Jing

Testing 10 JavaScript Frameworks on Their HTML Defaults - Using a JavaScript framework is now 'the way' for many Web site developers, but how do the popular options fare at producing valid, error free HTML?

Jens Oliver Meiert

📄 Using Intl.DurationFormat for Localized Durations Raymond Camden

📄 How to Refactor Code with GitHub Copilot Anthony Grutta (GitHub)

📄 Using RxDB as a Database in a Vue.js Application RxDB

📄 Supporting Pasting Files into the Browser Fileber

🛠 Code & Tools

Ohm: A Parsing Toolkit for JavaScript and TypeScript - It's been a few years since we covered this project and it's come along a lot. It's a library for building PEG-based parsers you can use in interpreter, compilers, analysis tools, etc. and you can even play with its grammar online.

Warth, Dubroy, et al.

Start Selling to Enterprise Faster with WorkOS - Add SSO, SCIM, and RBAC to your B2B SaaS app in minutes-not months.

WorkOS sponsor

Human Regex: Human-Friendly Regular Expression Builder with English Syntax - After 8 years of Perl, regexes are my friend, but most developers aren't big fans? This library offers a natural, fluent approach. Magic Regexp and Super Expressive are alternatives to consider.

Ridwan Ajibola

Svader: Create GPU-Rendered Svelte Components - The examples are a good way to get a feel for what this offers.

Holger Dal Mogensen

web-worker 1.5: Consistent Web Workers for the Browser and Node - Want to publish npm modules that use Web Workers and that work in both Node and client-side? In Node, it works as a web-compatible Worker implementation atop worker_threads. In the browser, it's an alias for Worker.

Jason Miller

The React Data Table I Always Wanted - A look into a particularly fast and clean shadcn/ui-based data table component (GitHub repo). See a live demo.

Maximilian Kaske

• Kaluma 1.2 - Tiny JavaScript runtime for the RP2040 (Raspberry Pi Pico).

• bcrypt.js 3.0 - Optimized bcrypt in pure JS. Even in the browser.

• Jasmine 5.6 - Testing framework for browsers & Node.

• 🤖 Midscene.js 0.11 - Let AI be your browser operator.

🔠 And a little typography bonus

GitHub Extends Its Monaspace Font Family - Monaspace is a fantastic set of monospaced fonts from GitHub targeted at coding use cases. Its new v1.2 release ups the ante by including Nerd Fonts support and symbols, new box drawing glyphs, characters, character variants, ligatures, and more.

GitHub

#​722 - February 7, 2025

Read on the Web

JavaScript Weekly

Oracle Claims 'JavaScript' Isn't a Generic Term, and More - In this 'motion to dismiss' Oracle has responded to Deno's attempt to prove Oracle shouldn't hold the JavaScript™ trademark with the argument that "relevant consumers do not perceive JAVASCRIPT as a generic term" (does Oracle only consider people who give it money to be relevant?) among other comedic insights.

Ryan Dahl

There Are a Lot of Ways to Break Up Long Tasks in JavaScript - Due to how browsers and the event loop work, letting a single task hog the main thread is a quick way to freeze up your site's UI. Alex explains the problem and uses a simple example to walk through the pros and cons of different solutions from basic use of setTimeout() to requestAnimationFrame(), channel messaging, and Web Workers.

Alex MacArthur

Debugging Shopping Cart Issues Faster - Vue/Nuxt devs: Get full insight into your shopping cart errors! Capture Pinia State wherever errors occur. Learn how on the Sentry blog ».

Sentry sponsor

▶ Angular: The Documentary - From the creators of the fantastic ▶️ Node.js and ▶️ Ruby on Rails documentaries comes this fresh story covering the ups and downs of the popular Angular (née AngularJS) framework starring a cast of veritable JavaScript luminaries.

Honeypot

IN BRIEF:

• Chrome is shipping a new moveBefore DOM method for moving elements around a DOM tree without resetting the element's state. React is already working on using it.

• Would you like to write PHP inside Vue or React components? You might if you're a Laravel user, and Aaron Francis shows off a way to do it. It's not open source yet, but his demo is pretty cool.

• Nx user? Nx has a whole new experience for Nx workspaces that's faster, more efficient, and solves a variety of issues with TypeScript editor support for large monorepos.

• Josh Goldberg explains the differences between ESLint and TypeScript, beyond the obvious.

RELEASES:

• ES Module Shims 2.0 - Polyfills import maps and other ES Modules features on top of the baseline native ESM support in browsers.

• pnpm 10.2 - The alternative, efficient package manager.

• Turborepo 2.4

📒 Articles & Tutorials

Which Rich Text Editor Framework Should You Choose in 2025? - A round-up of actively developed WYSIWYG editor options you can drop into your apps along with the pros and cons of each.

Dexemple and Rowny (Liveblocks)

How to Publish ESM-Based npm Packages with TypeScript - Now that you can use the ES modules (almost) everywhere, it's worth understanding how to package them up for use with npm. Axel digs into everything you need to know and shares some useful tools too.

Dr. Axel Rauschmayer

Locate and Resolve JavaScript Errors Instantly with Datadog - Troubleshoot frontend JavaScript errors faster with frontend to backend correlation and automatic error tracking.

Datadog sponsor

An Introduction to WebAssembly in Deno - How to build a simple WASM module and use it to call Rust code from JavaScript.

Jiang and Sherret (Deno)

Vite with TypeScript - If you've created a JavaScript-based React project with Vite and want to get on the TypeScript train, here are the basic steps.

Robin Wieruch

📄 Building a Playful Stop-Motion Crayon Cursor in p5.js Jorge Toloza

📄 Keep Your Node Apps Secure with npx is-my-node-vulnerable Trevor I. Lasn

📄 Read-Only Accessibility in TypeScript - How to use the readonly keyword. Dr. Axel Rauschmayer

📄 How to Set WebGL Shader Colors with CSS and JavaScript Nicolas Mattia

🛠 Code & Tools

RE2JS 1.0: Linear Time Matching for Regular Expressions - RE2 is a regular expression engine built by Google designed to operate in time proportional to the size of the input, in order to avoid so-called 'ReDoS' problems caused by backtracking, and this brings such protection to the browser too.

Oleksii Vasyliev

Fuse.js 7.1: Lightweight Fuzzy-Search with No Dependencies - Want a simple search feature without a dedicated backend? This mature solution could help. Here's a live demo.

Kiro Risk

Start Selling to Enterprise Faster with WorkOS - Add SSO, SCIM, and RBAC to your B2B SaaS app in minutes-not months.

WorkOS sponsor

🎨 tinygradient 2.0: A Gradient Generation Library - Generate color gradients with an unlimited number of color stops and steps in JavaScript to use as you wish. Supports named colors, hex colors, RGV, HSVa, and RGB CSS strings. GitHub repo.

Damien Sorel

parse-duration 2.0: Convert a Human Readable Duration to Milliseconds - You might wonder why a library that converts 1hr 20mins into 4800000 needs a version 2. Well, it now supports more units (mo, mth, microsec, and nanosec), has moved to ESM, and supports locales.

Jake Rosoman

Waveform Renderer - Quickly create a visual waveform from a MP3 or WAV - you can also edit the look. Think of it as a lighter alternative to Wavesurfer.js. GitHub repo.

Andres Felipe Alarcon

• 🍪 CookieConsent 3.1 - A lightweight, pure JS, GDPR-compliant cookie consent mechanism with which to annoy all your users meet regulatory requirements.

• Happy DOM 17.0 - Cross-runtime JS implementation of a web browser sans UI. Now supports ES modules.

• remove-unused-vars 0.0.4 - An experimental new tool for removing unused variables from code.

• get-value 4.0 - Use property paths (a.b.c) get a nested value from an object.

• mp4-muxer 5.2 - MP4 multiplexer in pure TypeScript with support for the WebCodecs API, video and audio.

• 🗺️ react-map-gl 8.0 - React friendly API wrapper around MapboxGL JS. (Demo.)

• 🗓️ Schedule-X 2.17 - Material Design event calendar and date picker.

• Wasp 0.16 - Wasp is a Rails-like framework using Node, React & Prisma.

• web-worker 1.5 - Consistent Web Workers in browser and Node.

• Js_of_ocaml (jsoo) 6.0 - An OCaml to JavaScript compiler.

• RxDB 16.5 - Offline-first, reactive database for JS apps.

🎵 A quick musical number..

A Protracker Module Player in Pure JavaScript - I'm a sucker for 90s tracker music, JavaScript experiments, and cool Web experiences, and this has all three. If you're not familiar with tracker music, it's a way to write music on a grid which triggers the playing of samples. This code manages to parse and play a Protracker file in pure JavaScript. (Note: The image above is of the original Protracker app, this experiment is more minimal and about the code.)

srtuss

#​721 - January 31, 2025

Read on the Web

JavaScript Weekly

Things People Get Wrong About Electron - A long-time maintainer of the wildly successful Electron cross-platform app framework stands by the technical choices Electron has made over the years and defends it against some of the more common criticisms here.

Felix Rieseberg

Standard Schema: A Common Interface to Schema / Validation Libraries - From the creators of Zod, Valibot and ArkType comes a fantastic bit of collaboration to define a common interface to use JavaScript and TypeScript schema libraries.

McDonnell, Hiller, and Blass

JavaScript: The Hard Parts - Take your knowledge to the next level with the most loved JavaScript course in the industry. Deepen your understanding of the most important aspects of JavaScript. This highly rated video course goes under the hood, looking at callbacks, higher-order functions, object-oriented JS, and more.

Frontend Masters sponsor

A WebAssembly Compiler That Fits in a Tweet - Or 192 bytes, if you prefer. This is a look into a fantastic little bit of JavaScript hacking that can compile arithmetic expressions into WebAssembly you can run very easily. You can learn a lot in so little time here.

Mariano Guerra and Patrick Dubroy

Announcing TypeScript 5.8 Beta - It's that time again. What's new? Support for using require() for ES modules in Node 22+, checked returns for conditional and indexed access types, startup and building optimizations & more. While not a huge release overall, it's particularly good for Node devs.

Daniel Rosenwasser

💡 One neat 5.8 feature is --erasableSyntaxOnly, a way to ensure that 'type stripping' techniques still result in runnable code by disallowing TypeScript-exclusive features like enums.

IN BRIEF:

• 🎬 Remember Honeypot's well-received Node.js documentary? (If not, watch it!) Now there's a trailer for an Angular documentary due soon.

• There's been a lot of chatter about Create React App being effectively 'deprecated' due to a lack of updates from Meta. Turns out, it is deprecated, but the process is now being managed gracefully and some basic React 19 support will be merged in.

• A developer came up with an approach to making npm packages 5% smaller using Zopfli compression and asked the npm team to consider it. Ultimately the decision was no for a variety of reasons.

• ⭐ The Syntax YouTube channel presents ▶️ a fun countdown of the top 15 most starred JavaScript projects on GitHub. This is so well put together.

RELEASES:

• Astro 5.2 - The popular framework adds Tailwind CSS 4 support and more niceties.

• pnpm 10.1 - The alternative, efficient package manager.

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

• ⭐ Phaser v4 Beta 5, Node.js 23.7, npm 11.1, Neutralinojs 5.6

📒 Articles & Tutorials

The Modern Way to Write JavaScript Servers - The irony is that while Node popularized JavaScript on the server (though Netscape was doing it in the 90s) this modern, standardized cross-runtime approach doesn't work on Node ...yet ;-)

Marvin Hagemeister

Introducing Mentoss: The fetch Mocker - A new approach to mocking global fetch() calls (in both browsers and server-side runtimes) inspired by previous attempts like Nock and MSW.

Nicholas C. Zakas

Wish Your AI Co-Pilot Actually Knew Your Codebase? - Try the most context-aware Developer AI. Augment deeply understands your codebase, documentation, and dependencies.

Augment Code sponsor

Lessons from Scaling WebSockets for a JavaScript App - Scaling WebSockets for real-time apps presents hidden complexities. Compose shares some lessons learnt the hard way.

Atul Jalan

📄 Computing with Tuples in TypeScript - A way to bring objects of different types together but in a lighter way than keyed objects. Dr. Axel Rauschmayer

📄 How Long is a Second in JavaScript? - What may seem like a straightforward query is actually one of surprising complexity. Iago Lastra

📄 Adding Maps to Your Pages with Leaflet.js - Quick, easy, and open source to boot. Raymond Camden

📄 How to Use Node's fs in the Browser for Custom Playgrounds Ivan Chebykin

📄 Building a QR Code HTML Web Component Scott Jehl

📄 How to Build a CMS with React Admin Thibault Barrat

🛠 Code & Tools

docxtemplater: Generate docx and pptx Documents from Templates - Generate Word and PowerPoint files dynamically by merging against templates (ideal for invoices, contracts, certificates, etc.) It's open source (MIT or GPLv3), but the creator has a commercial version with more extensions (e.g. to work with Excel). GitHub repo and feature demos.

Edgar Hipp

📊 Plotly 3.0: A JavaScript Graphing Library - A high-level, declarative charting library, built on top of D3 and stack.gl, with over 40 chart types, including 3D charts, statistical graphs, and SVG maps. v3 is largely to remove deprecations, fix bugs, and a switch to esbuild.

Plotly, Inc.

Using Clerk SSO to Access Google Calendar and Other Service Data - Leverage Clerk's social sign in providers to easily access service data on behalf of your users.

Clerk sponsor

Emittery 1.1: A Simple, Modern Async Event Emitter - A small, async event emitter for Node and the browser, and now with support for AbortController.

Sindre Sorhus

jsontr.ee: Visualize JSON Structures as Dynamic SVG Diagrams - You can try it out on this playground, which provides the option to download the diagram as PNG, or use it in an app with customizable styles.

Lou Alcalá

DBOS Transact v2: Lightweight Durable Execution in TypeScript - Durable execution means persisting the execution state of your program while it runs, so if it's interrupted or crashes, it resumes from where it left off - ideal for long-running or business-critical workflows. Docs.

DBOS, Inc.

jscanify 1.3: JavaScript Document Scanning Library - Given raw photos of documents, this can do paper detection (along with glare suppression), distortion correction, highlighting and extracting. See some visual examples or try it out here.

ColonelParrot

Ruck 9.0: A React Webapp Framework for Deno - A lean React-based way to build modern React apps with Deno using features like ESM, dynamic imports, HTTP imports, and import maps with no transpilation or bundling.

Jayden Seric

• OpenPGP.js 6.1 - OpenPGP implementation for JavaScript.

• wavesurfer.js 7.9 - Waveform rendering and playback.

• Poku 3.0 - Cross-platform JavaScript test runner.

#​720 - January 24, 2025

Read on the Web

JavaScript Weekly

Bun 1.2: A Big Step Forward for the Fast JS/TS Runtime - The JavaScriptCore-based Bun continues to up its server-side runtime game with strides forward in Node.js compatibility, performance boosts, and new APIs for interacting with S3 and S3-like object stores as well as Postgres. If you'd prefer to be ▶️ introduced to Bun 1.2 with a keynote-style video, it's a good watch.

Ashcon Partovi and the Bun Team

🦖 ..and by no means should we forget Deno whose team have published a roundup of all of Deno's progress in the past year.

FlexGrid by Wijmo: The Industry-Leading JavaScript Datagrid - A fast and flexible DataGrid for building modern web apps. Key features and virtualized rendering are included in the core grid module. Pick & choose special features to keep your app small. Built for JavaScript, extended to Angular, React, and Vue.

Wijmo From MESCIUS inc. sponsor

🤖 Transformers.js v3.3: Machine Learning and AI for the Web - This is a dry release announcement but I wanted to highlight the rapid pace that this exciting library is making for browser-based NLP, speech recognition, vision, and now text-to-speech use cases (live TTS demo here - it takes a while to load though). It's also being used in Firefox for various enhancements (see below).

Hugging Face

IN BRIEF:

• The creator of SolidJS says that Angular and Vue are the frameworks to watch in 2025, while reflecting on JS framework progress generally.

• A year ago, Kelly Sutton wrote about his company's move away from React but how did it pan out? In Moving On from React, a Year Later he explains how things have gone since.

• JSON Query is a neat, flexible JSON querying language. The demos really sell it IMHO.

• The ESLint project takes a look back at ESLint's 2024 year in review.

• GitHub has unveiled sub-issues, issue types, and advanced search for issues.

RELEASES:

• Rspack v1.2 - Fast Rust-based Web bundler adds a peristent cache feature that improves hot start performance by up to 250%.

• Node v23.6.1 (Current), v22.13.1 (LTS), v20.18.2 (LTS), v18.20.6 (LTS) to resolve some security vulnerabilities.

• Capacitor 7.0 - Build cross-platform native apps/PWAs with web technologies.

• React Native 0.77 - Now with enhanced styling capabilities.

• Vitest 3.0 - The fast Vite-native testing framework.

• NestJS 11, Storybook 8.5, Unpic 1.0, Inferno 9.0

📒 Articles & Tutorials

🕒 JavaScript Temporal is Coming (For Real!) - We first mentioned the Temporal API proposal providing a better way to handle dates and times in JavaScript almost five years ago (in issue 496!) but now it really is almost here. Brian explains its basic concepts and where initial support is starting to appear.

Brian Smith

Avoiding anys with Linting and TypeScript - any is TypeScript's famous type fallback/safety hatch but if you can avoid it, you can benefit more from TypeScript's type-checking features. Josh shares some tips to do just that.

Josh Goldberg

[Workshop] How to Build Testing Culture on Your Team - Join our live session to learn strategies for gaining buy-in, balancing testing, and integrating it into daily workflows.

Sentry sponsor

🤖 Running Inference in Web Extensions - Firefox Nightly is shipping with a new API that can let you use their AI runtime for offline machine learning tasks in Web extensions you create. It uses the previously mentioned Transformers.js and is already used in Firefox 133 to provide alt text for images in PDFs.

Tarek Ziadé (Mozilla)

📄 Generating Test Values using JavaScript Generators Peter Leonov

📄 TypeScript Enums: Use Cases and Alternatives Dr. Axel Rauschmayer

📄 Fetch and HTTP/2 Support in Node, Bun and Deno Georges Haidar

📊 A Deep Dive into Initial Load Performance Nadia Makarevich

📄 Improving UI Performance by Optimizing Our Debouncer Atul Jalan (Compose)

📄 Angular Clean Coding Fundamentals Jonathan Gamble

🛠 Code & Tools

deck.gl 9.1: GPU-Powered Large Scale Data Visualization - deck.gl provides a way to create complex yet high performance data visualizations composed of multiple layers (examples). It can be used in a vanilla JS way or through React components and it's ready for WebGPU.

OpenJS Foundation

Breakpoints and console.log Is the Past, Time Travel Is the Future - Next-level testing in any editor, 15x faster with Interactive Time Travel Debugger, real-time insights & advanced coverage in a new UI.

Wallaby Team sponsor

ArkType 2.0: Runtime Validation Library - An easy-to-deploy solution for schema validation that can infer TypeScript definitions 1:1 and use them as optimized validators for your data, both at runtime and for immediate type-level feedback in your editor.

ArkType

NodeBB v4.0.0 Released: Node.js Powered Forums - Offers a classic forum experience in a modern Node.js-shaped guise. v4 adds support for federation between instances and the wider 'fediverse.'

NodeBB, Inc.

SRCL: Build React Apps with 'Terminal Aesthetics' - The homepage is a live demonstration of what SRCL has to offer. It's a suite of React components and styling to recreate a monospaced, terminal-like atmosphere

Internet Development Studio Company

🎶 Chiptune.js: Module / Tracker File Player - A library for playing 'module' music files like MOD, XM and S3M. (Demo.)

Chiptune Contributors

• GoReleaser v2.6 - A popular 'release engineering' tool in the Go world has just added support for Bun and Deno.

• React Admin 5.5 - Framework for building B2B frontend interfaces. Now with React 19 and React Router 7 support.

• React Scan 0.1 - Automatically scan for performance issues and eliminate slow renders in your app.

• 🎵 ChordSheetJS 12.0 - Library for parsing and formatting chords and chord sheets. (Demo.)

• Fortune Sheet 1.0 - Drop-in Excel-like spreadsheet control.

• ApexCharts 4.4 - Popular JS charting library. (Demos.)

• YouTube.js 13.0 - JS client for YouTube's private API.

• BlockNote 0.23 - 'Notion-style' block-based editor.