An introduction to building live collaborative JS apps

#​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.