#​719 — January 17, 2025

Read on the Web

JavaScript Weekly

Learn Yjs and Building Realtime Collaborative Apps in JavaScript — Yjs is a CRDT (Conflict-free replicated data type) library for building collaborative and local-first apps. CDRTs are powerful but can be tricky to ‘get’ which is why this new interactive Yjs tutorial is so valuable. A great way to learn about building collaborative, syncing webapps from the ground up.

Jamsocket

Bun v1.1.44: The Fast JS Runtime Adds On-Demand Frontend Bundling — The popular, high-performance alternative JavaScript runtime has extended its Bun.serve() HTTP handler with support for bundling frontend apps on demand using HTML imports.

Ben Grant

Protect Against Bots, Fraud, and Abuse in Real Time — With WorkOS Radar you can detect, verify and block harmful behaviour, protecting your app with advanced device fingerprinting. Stop fake signups, stop free tier abuse, and stop bot attacks and brute force attempts today.

WorkOS sponsor

A Checklist for Your tsconfig.json — What I love about Dr. Axel is when he’s done the hard work of figuring something out for himself, he writes it down. So it goes here, with his journey to set up a good tsconfig.json for his projects.

Dr. Axel Rauschmayer

IN BRIEF:

• 
  

  The Angular team shares a brief update on how they're working on Angular's strategy for 2025.

  
  


• 
  

  👽 Alien Signals are coming to Vue 3.6... (it's basically a really fast way to handle signals.)

  
  


• 
  

  Tired of seeing this everywhere in your code? Dave Rupert has a fun way to turn it into a single glyph in VS Code.

  
  

RELEASES:

• 
  

  Electron 34 – The JS, HTML and CSS desktop app framework updates to Chromium 132, Node 20.18.1, and adds a way to access the JavaScript call stack of unresponsive renderers.

  
  


• 
  

  Puppeteer 24 – Popular high-level API to control Chrome or Firefox.

  
  


• 
  

  Cypress 14 – Easy testing for anything that runs in a browser. Now supporting the latest versions of React, Angular, Svelte & Vite for component testing.

  
  


• 
  

  Storybook 8.5, ESLint 9.18.0, ESLint Config Inspector 1.0, AngularFire 19.0

  
  

📒 Articles & Tutorials

A Look at Regular Expression Pattern Modifiers — You may be familiar with using flags to change the behavior of regexes, but Dr. Axel looks at a proposal bringing a way to change regex flags within subexpressions (e.g. /^[a-z](?-i:[a-z])$/i;). It’s at stage 4 and should land in ECMAScript 2025.

Dr. Axel Rauschmayer

Accessibility Essentials Every React JS Developer Should Know — If you’re an experienced frontend developer, these might be second nature to you by now, but this is a good roundup of the entry level ‘table stakes’ for frontend accessibility, whether using React or not.

Martijn Hols

Write More Maintainable JavaScript with AI Code Reviews — CodeRabbit is your AI-powered code review companion that deeply understands the JavaScript codebase. Free for open source.

CodeRabbit sponsor

Five Years of React Native at Shopify — Five years ago, Shopify said React Native was the future for mobile development at their company and they meant it, with every mobile app moving to RN over time. Here’s what they learnt along the way and why they’re sticking with it.

Mustafa Ali (Shopify)

Revealed: React's Experimental Animations API — <ViewTransition /> is based on the browser's View Transition API. It’s only in pre-release versions of React, but Matt is armed with examples for you to get a feel for the potential.

Matt Perry (Motion)

📄 All JavaScript Keyboard Shortcut Libraries are Broken – Reflections on long standing complexities with the myriad ways of detecting keypresses. Jack Duvall

📄 JavaScript Hashing Speed Comparison: MD5 vs. SHA-256 – You shouldn’t be using MD5 anyway, but you especially shouldn’t be using it with the misconception that it’s faster. Daniel Lemire

📄 5 Technical JavaScript Trends You Need To Know About in 2025 Alexander T. Williams

📄 Creating a Generative Artwork with Three.js Eduard Fossas

📄 JavaScript’s Promise.race and Promise.all Are Not “Fair” Chris Krycho

📄 Node.js's Type Stripping Explained Marco Ippolito

🛠 Code & Tools

♟️ Chess.js: A Library to Manage a Chess Game — Provides move generation, validation, piece placement, check/checkmate/stalemate detection – "everything but the AI!" v1.0 offers a rewrite to TypeScript and a variety of enhancements.

Jeff Hlywa

💡 Chess Engines: A Zero to One is a neat article digging into the technicalities of implementing a chess engine.

react-nil 2.0: A React 'Null Renderer' — An interesting experiment to use React in situations where you don’t need it to render anything, but you want to use hooks, suspense, context, and other bits of the React lifecycle. Like in, say, a Node app. Maybe this CodeSandbox example will provoke some ideas.

Poimandres

🔎 file-type 20.0: Detect the File Type of a File, Stream or Data — For example, give it the raw data from a PNG file, and it’ll tell you it’s a PNG. Uses a ‘magic number’ approach so is targeted at non text-based formats. v20 adds support for yet more formats, including JARs, Word/Excel templates, and now supports ZIP decompression.

Sindre Sorhus

Node Web Audio API 1.0: A Web Audio API Implementation for Node — More accurately, it’s a set of Node bindings for a Rust-powered non-browser implementation of the Web Audio API.

IRCAM – Centre Pompidou

⚙️ Vue Spring Bottom Sheet – A lightweight, flexible solution for bottom sheets in Vue apps. megaarmos

⚙️ Act – A Go-powered tool that looks at your repo's GitHub Actions, uses Docker to grab the necessary images, and runs the tasks locally. Nektos

⚙️ Svar – A new suite of open source UI components for Svelte, React, and Vue. XB Software

• 
  

  Perspective 3.3 – Streaming data viz and analytics component. The core is written in C++ and compiled to WebAssembly. The homepage shows it off well.

  
  


• 
  

  eslint-plugin-functional 8.0 – ESLint rules to disable mutation and promote functional approaches.

  
  


• 
  

  React Testing Library 16.2 – DOM testing utils that encourage good practices.

  
  


• 
  

  Happy DOM 16.6 – Cross-runtime JS implementation of a web browser sans UI.

  
  


• 
  

  PowerGlitch 2.4 – Tiny library to add a 'glitch' effect to images on the Web.

  
  


• 
  

  🤖 node-llama-cpp 3.4 – Run LLMs locally with bindings to llama.cpp.

  
  


• 
  

  Faker 9.4 – Generate fabricated data to your heart's content.

  
  


• 
  

  Gridstack.js 11.3 – Build responsive interactive dashboards quickly.

  
  


• 
  

  Mineflayer 4.25 – Create Minecraft bots in JavaScript.

  
  

#​718 — January 10, 2025

Read on the Web

🗓️ Friday is the new Thursday! If you were a JavaScript Weekly reader several years ago, you might remember it always landed on Fridays and after getting caught out by a variety of big news items landing on Thursdays in recent years, we're back ;-)
__
Your editor, Peter Cooper

JavaScript Weekly

⭐ 2024's JavaScript Rising Stars — It’s time to fully wave goodbye to 2024, but not before Michael Rambeau’s annual analysis of which JavaScript projects fared best on GitHub over the past year. Even if you dislike GitHub stars as a metric for anything, this remains a great way to get a feel for the JavaScript ecosystem and see what libraries and tools have mindshare in a variety of niches. A fantastic roundup as always.

Michael Rambeau

A Look at Import Attributes — It’s always a pleasure to see Dr. Axel blogging about JavaScript again, and he’s back with one of his typical deep dives into a newer ECMAScript feature: import attributes. This feature provides an inline syntax for attaching metadata to module imports such as for importing non-JavaScript modules (e.g. JSON, WASM or CSS).

Dr. Axel Rauschmayer

How to Enable End-to-End Testing with Synthetic Monitoring — Synthetic Monitoring helps you launch new features with confidence and speed. Learn how you can create robust end-to-end test suites, spend less time on false positives, and proactively catch errors before they get to production.

Datadog sponsor

Node’s New Built-in Support for TypeScript — Node.js v23.6.0 (Current) has just been released and makes Node’s new type-stripping features work by default, so you can just run node file.ts and it Should Just Work™. Dr. Axel explains how it works and what the limitations are.

Dr. Axel Rauschmayer

IN BRIEF:

• 
  

  🥊 The Deno vs Oracle fight over the JavaScript™ trademark continues as Oracle has informed Deno they're not going to voluntarily relinquish the mark. Deno's job now is to show how JavaScript has long been used as a generic term and hasn't been controlled by Oracle.

  
  


• 
  

  The Express.js team has posted about the project's recent revival and its plans to push Express.js forward in 2025.

  
  


• 
  

  ❄️ The 'WinterCG' Web Interoperable Runtimes Community Group, an effort to promote standards around runtime interoperability of JavaScript runtimes, has moved to Ecma International and is now known as WinterTC (TC55).

  
  


• 
  

  📺 Node.js creator Ryan Dahl gave a talk at GOTO Chicago 2024 about Deno 2, covering Deno's differences to Node and what Deno 2.0 (and JSR) has to offer JavaScript developers, complete with live demos.

  
  

RELEASES:

• 
  

  pnpm 10 – The efficient npm alternative no longer runs lifecycle scripts of dependencies for security reasons, hashing algorithms have been upgraded to SHA256, and lots of minor tweaks.

  
  


• 
  

  Bun v1.1.43 – The high-performance runtime gets first class S3 support, an HTML bundler, and can output V8 heap snapshots (which is quite something as Bun uses JavaScriptCore, not V8).

  
  


• 
  

  🔠 Tesseract.js 6.0 – The popular pure JS multilingual OCR library has resolved a variety of memory leak issues.

  
  


• 
  

  Docusaurus 3.7 – The popular docs-oriented site generator goes full React 19.

  
  


• 
  

  Node.js v22.13.0 (LTS) – The permission model system is now stable.

  
  


• 
  

  Puppeteer 24.0, RxDB 16.0, Ember 6.1, QuickJS 0.8

  
  

📒 Articles & Tutorials

The Future of htmx — htmx is an increasingly popular way to enhance HTML and actually write less JavaScript on the frontend. This post reflects on how htmx would like to be ‘the new jQuery’, not least in the sense that one of the project’s goals is to push the ideas of htmx into the HTML standard itself, as in this set of proposals.

Gross and Petros

You Don't Need Next.js — As much as Next.js is considered the React meta-framework of choice, if your requirements are modest, simply going with plain React offers numerous benefits in terms of simplicity and speed, as seen here.

Benny Kok

Introducing Clerk SDKs for Vue and Nuxt — Official @clerk/vue & @clerk/nuxt SDKs for authentication integration with pre-built UI components in Vue/Nuxt apps.

Clerk sponsor

Using TypeScript Without Build Tools — Chris Coyier enjoys the benefits of TypeScript while developing, but actually compiling it to JavaScript in various scenarios is less endearing. We’ve learnt (above) that Node can now run .ts files directly, but what other projects support the use of TypeScript without build tools?

Chris Coyier

📄 Using a JavaScript Component Inside a Haskell App – Did you know Haskell’s main compiler supports integrating with JavaScript? Mateusz Goślinowski

📄 Crafting a Dreamy Particle Effect with Three.js and GPGPU Dominik Fojcik

📄 Build Your Own Site Speed Testing Tool with Puppeteer Henry Price

📄 Sharing a Variable Across HTML, CSS, and JavaScript Chris Coyier

📄 Benchmarking GraphQL Solutions in the JS/TS Landscape Tomasz Nieżurawski

📄 Shallow Clones vs Structured Clones Phil Nash

🛠 Code & Tools

PostalMime: A Universal Email Parsing Library — An email parsing library happy in most JS runtimes. Takes the raw source of emails and parses them into their constituent parts.

Postal Systems

trimMiddle(): The Missing String Trim Method? — If you’ve got a long string and want to keep the start and end and truncate in the middle, this is for you. There’s a live demo here and GitHub repo.

Christian Heilmann

Fully Customizable Form Builder that Blends Seamlessly with Your JS App — Need a survey solution you control? With SurveyJS, customize your form builder’s look and functionality. Try it for free.

SurveyJS sponsor

Introducing @smoores/epub: A Package for Working with EPUB Files — EPUB is a popular e-book file format and this new library provides a way to both read and write them. npm package link.

Shane Friedman

Tipex: An Advanced Rich Text Editor for Svelte — Based on the popular Tiptap editor framework, it’s customizable, has theming support, and is Svelte 5-ready. Here’s a live example.

Friend of Svelte

React-Toastify 11: In-Page Notifications Made Easy — There’s an elaborate demo page here but essentially it’s a flexible, easy to style ‘toast’ style notifications system with many years under its belt. GitHub repo.

Fadi Khadra

Electrobun: A New JS Cross-Platform Desktop App Toolkit — A fresh take on the concept covered by Electron and Neutralinojs, except based around Bun. It’s early days, though, with only ARM-based Macs supported for now.

Blackboard Technologies inc.

Tagify 4.33: An Elegant Input Component for Tags — The polished demos show a lot of effort has been put in here. GitHub repo.

Yair Even-Or

• 
  

  📊 Recharts v2.15.0 – D3-powered React chart library now with React 19 support.

  
  


• 
  

  Discordeno 21.0 – Discord API library for Node, Deno and Bun.

  
  


• 
  

  htmlparser2 10.0 – Fast and forgiving HTML and XML parser.

  
  


• 
  

  Ts.ED 8.4 – Node + TypeScript framework on top of Express.

  
  


• 
  

  📊 ApexCharts 4.3 – Popular JS charting library. (Demos.)

  
  


• 
  

  zx 8.3 – Google's tool for better Node.js shell scripting.

  
  


• 
  

  Octokit.js 4.1 – 'Batteries-included' GitHub SDK.

  
  

🎁 And one for fun?

📄 Play Tetris in a PDF File — (direct link to PDF)

I'll let you decide if this one is fun or frightening! Whether or not this will work depends on your PDF reader or browser support, but it works with Chrome and Firefox, at least.

The PDF document format supports embedded JavaScript and this experiment uses it to implement a game of Tetris. The developer, Thomas Rinsma, has used Python to output the PostScript that includes the game's JavaScript. Couple that with the fact many browser PDF renderers are themselves implemented in JavaScript (e.g. PDF.js) and you have a veritable Matryoshka doll of technologies at play here.