--- title: "An introduction to building live collaborative JS apps" publication: "JavaScript Weekly" issue: 719 published_at: "2025-01-17" canonical_url: "https://javascriptweekly.com/issues/719" --- Plus Bun adds on-demand bundling to Bun.serve(), a checklist for tsconfig.json, and accessibility essentials. | #​719 — January 17, 2025 [Read on the Web](https://javascriptweekly.com/issues/719) Together with [![WorkOS\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_514,h_98/e_make_transparent/co_white,e_outline:9/tdfxwgk852ui9leli4wm.png)](https://workos.com/radar?utm_source=cpjs&utm_medium=newsletter&utm_campaign=q12025) JavaScript Weekly [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/prup5p5zbwtxenpcrpye.jpg)](https://learn.yjs.dev/) [Learn Yjs and Building Realtime Collaborative Apps in JavaScript](https://learn.yjs.dev/) — [Yjs](https://github.com/yjs/yjs) is a CRDT ([Conflict-free replicated data type](https://en.wikipedia.org/wiki/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](https://bun.sh/blog/bun-v1.1.44) — 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.](https://bun.sh/docs/bundler/fullstack#html-imports-are-routes) Ben Grant [![\](https://res.cloudinary.com/cpress/image/upload/c_limit,w_480,h_480,q_auto/copm/6cb88255.png)](https://workos.com/radar?utm_source=cpjs&utm_medium=newsletter&utm_campaign=q12025) [Protect Against Bots, Fraud, and Abuse in Real Time](https://workos.com/radar?utm_source=cpjs&utm_medium=newsletter&utm_campaign=q12025) — 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`](https://2ality.com/2025/01/tsconfig-json.html) — 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](https://blog.angular.dev/angular-2025-strategy-9ca333dfc334) on how they're working on Angular's strategy for 2025. - 👽 [Alien Signals](https://github.com/stackblitz/alien-signals/releases/tag/v1.0.0) 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.](https://daverupert.com/2025/01/like-this-and-like-that-and-like-this-and-uh/) **RELEASES:** - [Electron 34](https://www.electronjs.org/blog/electron-34-0) – 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](https://pptr.dev/) – Popular high-level API to control Chrome or Firefox. - [Cypress 14](https://www.cypress.io/blog/cypress-14-is-here-see-whats-new) – 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](https://github.com/storybookjs/storybook/releases/tag/v8.5.0), [ESLint 9.18.0](https://eslint.org/blog/2025/01/eslint-v9.18.0-released/), [ESLint Config Inspector 1.0](https://github.com/eslint/config-inspector), [AngularFire 19.0](https://github.com/angular/angularfire/releases/tag/19.0.0) 📒 Articles & Tutorials [A Look at Regular Expression Pattern Modifiers](https://2ality.com/2025/01/regexp-modifiers.html) — You may be familiar with using _flags_ to change the behavior of regexes, but Dr. Axel looks at [a proposal](https://github.com/tc39/proposal-regexp-modifiers) 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](https://martijnhols.nl/blog/accessibility-essentials-every-front-end-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](https://www.coderabbit.ai/?utm_source=jsweekly&utm_medium=email_sponsorship&utm_campaign=jsweekly_jan_2025) — 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](https://shopify.engineering/five-years-of-react-native-at-shopify) — Five years ago, Shopify said [React Native](https://shopify.engineering/react-native-future-mobile-shopify) 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](https://motion.dev/blog/reacts-experimental-view-transition-api) — `` is based on the browser's [View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/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](https://blog.duvallj.pw/posts/2025-01-10-all-javascript-keyboard-shortcut-libraries-are-broken.html) – Reflections on long standing complexities with the myriad ways of detecting keypresses. Jack Duvall 📄 [JavaScript Hashing Speed Comparison: MD5 vs. SHA-256](https://lemire.me/blog/2025/01/11/javascript-hashing-speed-comparison-md5-versus-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](https://thenewstack.io/5-technical-javascript-trends-you-need-to-know-about-in-2025/) Alexander T. Williams 📄 [Creating a Generative Artwork with Three.js](https://tympanus.net/codrops/2025/01/15/creating-generative-artwork-with-three-js/) Eduard Fossas 📄 [JavaScript’s `Promise.race` and `Promise.all` Are Not “Fair”](https://v5.chriskrycho.com/notes/javascript-promise-race-and-promise-all-are-not-fair/) Chris Krycho 📄 [Node.js's Type Stripping Explained](https://satanacchio.hashnode.dev/everything-you-need-to-know-about-nodejs-type-stripping) Marco Ippolito 🛠 Code & Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/rgqwik69edog5ozhkale.jpg)](https://github.com/jhlywa/chess.js) ♟️ [Chess.js: A Library to Manage a Chess Game](https://github.com/jhlywa/chess.js) — Provides move generation, validation, piece placement, check/checkmate/stalemate detection – _"everything but the AI!"_ [v1.0](https://github.com/jhlywa/chess.js/releases/tag/v1.0.0) offers a rewrite to TypeScript and a variety of enhancements. Jeff Hlywa 💡 [Chess Engines: A Zero to One](https://chessengines.super.site/) is a neat article digging into the technicalities of implementing a chess engine. [react-nil 2.0: A React 'Null Renderer'](https://github.com/pmndrs/react-nil) — 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](https://codesandbox.io/s/react-nil-mvpry) will provoke some ideas. Poimandres 🔎 [file-type 20.0: Detect the File Type of a File, Stream or Data](https://github.com/sindresorhus/file-type) — 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](https://github.com/sindresorhus/file-type/releases/tag/v20.0.0) 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](https://github.com/ircam-ismm/node-web-audio-api) — 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](https://megaarmos.douxcode.com/vue-spring-bottom-sheet/) – A lightweight, flexible solution for bottom sheets in Vue apps. megaarmos ⚙️ [Act](https://github.com/nektos/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](https://svar.dev/) – A new suite of open source UI components for Svelte, React, and Vue. XB Software 📰 Classifieds [Optimize Your Next.js App's Metadata](https://go.clerk.com/9IpQOwQ) - Discover practical ways to boost your site's SEO and visibility by customizing metadata in Next.js. --- 🎹 [STRICH](https://strich.io/?ref=js-weekly): Add blazing fast and reliable 1D/2D Barcode Scanning to your web apps. Free demo app and 30-day trial available. --- [Meticulous automatically creates and maintains an E2E UI test suite with zero developer effort](https://www.meticulous.ai?utm_source=javascript_weekly&utm_campaign=january17th). Relied on by Lattice, Bilt Rewards, etc. - [Perspective 3.3](https://github.com/finos/perspective) – Streaming data viz and analytics component. The core is written in C++ and compiled to WebAssembly. The [homepage](https://perspective.finos.org/) shows it off well. - [eslint-plugin-functional 8.0](https://github.com/eslint-functional/eslint-plugin-functional) – ESLint rules to disable mutation and promote functional approaches. - [React Testing Library 16.2](https://github.com/testing-library/react-testing-library) – DOM testing utils that encourage good practices. - [Happy DOM 16.6](https://github.com/capricorn86/happy-dom) – Cross-runtime JS implementation of a web browser _sans_UI. - [PowerGlitch 2.4](https://github.com/7PH/powerglitch) – Tiny library to add a 'glitch' effect to images on the Web. - 🤖 [node-llama-cpp 3.4](https://github.com/withcatai/node-llama-cpp) – Run LLMs locally with bindings to`llama.cpp`. - [Faker 9.4](https://github.com/faker-js/faker) – Generate fabricated data to your heart's content. - [Gridstack.js 11.3](https://gridstackjs.com/) – Build responsive interactive dashboards quickly. - [Mineflayer 4.25](https://github.com/PrismarineJS/mineflayer) – Create Minecraft bots in JavaScript. Published by [Cooperpress](https://cooperpress.com/) and edited by [Peter Cooper](https://twitter.com/cooperx86) 'JavaScript' is a trademark of Oracle Corporation in the US We are not endorsed by or affiliated with Oracle. [Change your email address](https://javascriptweekly.com/edit_subscription/*|UID|*) or [stop getting this newsletter](https://javascriptweekly.com/leave/*|UID|*). © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom