Author:

#​686 — May 2, 2024

Read on the Web

JavaScript Weekly

React 19 Now in Beta — While designed to get library developers prepared for the eventual React 19 release, this is nonetheless a huge step, with full support for Custom Elements (Custom Element support has long been a thorn in React’s side), all the latest React Server Components goodies, Actions, use, and more besides.

The React Team

💡 If you want to upgrade ASAP, there’s a thorough upgrade guide available, but consider upgrading via React 18.3 first.

▶  Let Me Be: “const … Is Stupid and You’re Using It Wrong” — An entertaining 12-minute talk on misunderstandings around the use of const vs let. This was bound to provoke some strong reactions (see the Twitter thread) but let him make his point!

Ryan Florence

Start Coding for Free! Build Real-Time Chat Messaging in Days — Looking to quickly integrate your desired combination of low-level API access and pre-built Stream libraries and components? Find out how to get started with Stream today.

Stream sponsor

Announcing TypeScript 5.5 Beta — It’s not even the final release (expect that in a month or two) but 5.5 has many people excited as it has many major enhancements, including inferred type predicates, the ability to import types in JSDoc via comments, regex syntax checking, isolated declarations, and more. If you want more practical examples, Matt Pocock 🐦 wrote a good Twitter thread.

Microsoft

IN BRIEF:

The New Stack has a feature on Ryan Dahl and his opinions on packaging, JSR, and even TypeScript.

MoonBit is a WebAssembly driven cloud platform and it now has a JavaScript backend too that claims to be very fast.

If you noticed the JSDelivr CDN went down earlier, here’s why.

Zachary Lee has a quick guide to React 19 Beta taking more of a code-led approach than the release notes.

RELEASES:

⭐️ Svelte 5 Release Candidate – “no anticipated breaking changes between now and the stable release.” In a quick talk, ▶️ Rich Harris explains what’s new.

React 18.3 – The beta of 19 may be more exciting, but 18.3 will help your app’s transition by not breaking anything that works on 18.2 while providing more deprecation warnings.

Bun 1.1.6 – Now supports UDP sockets, Array#sort gets a lot faster, and 1.1.5 introduced cross-compilation for standalone executables.

Astro 4.7 – There’s also a roundup of what’s new with the project overall.

Node.js 22.1 (Current) and Deno 1.43

📒 Articles & Tutorials

‘I Reviewed 1,000s of Opinions on HTMX’ — htmx is an increasingly popular way to use modern, dynamic browser features through creative use of HTML attributes, rather than hand writing JS for everything. Dylan looks at the pros and cons through the lens of community sentiment.

Dylan Huang

Maybe MOAR Is Not the Answer 🫠 — Turns out a relentless push for MOAR features and developers was wrong. Leaders could do with some reflection on less.

Test Double sponsor

Native Support for CJS/ESM Interoperability Begins in Node 22 — An overview of a new era for Node developers when working with both CommonJS and ECMAScript modules.

Zachary Lee

Finally Understanding How Array.sort(comparator) Works — “After 13 years of JavaScript, I finally have a way to remember how the comparator function in Array.sort() works..”

James Kerr

Detecting JavaScript Support in CSS — A way to provide alternative CSS rules depending on whether or not JavaScript is available in the user’s browser.

Ryan Mulligan

Build Advanced Interactive Experiences with the StackBlitz SDK — Join our live stream on programmatically embedding interactive dev environments on your site.

StackBlitz sponsor

📄 Digging Tunnels out of a JS Sandbox – “.. the journey of unearthing a few different vulnerabilities in Deno.” Secfault Security

📄 How to Build Well-Documented and Authenticated APIs with Node and Fastify Julían Duque (Heroku)

📄 Using Vite to Rebuild Local Dependencies in an NPM Workspace Prosopo

📄 What is Vite (and Why is it So Popular)? – Eric Simons

📄 Cheat Sheet for Moving from jQuery to Vanilla JavaScript Tobias Ahlin

📄 When to Use Bun Instead of Node.js Antonello Zanini

🛠 Code & Tools

extension.js: Zero-Config, Cross Browser Extension Dev Starter — The goal is to make it as simple as a npx extension create my-extension to get started with building your own browser extensions. GitHub repo.

Cezar Augusto

Layer Cake: A Graphics Framework for Svelte — This library gives you a baseline for creating responsive web graphics via common elements (e.g. a coordinate system and scales). See numerous example components here.

Layer Cake

Happy World Password Day! Curious About How We Got Here? — Learn about the history of passwords in this timeline that spans millenniums, and find out why passwords are history.

FusionAuth sponsor

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

Yair Even-Or

Journey.js: No-Dependency Library to Create Interactive Guided Tours — The live examples are basic, but the focus on accessibility and built-in support for 51 languages are pluses.

William Troup

📺 YouTube.js: Unofficial YouTube API Client Library — ‘InnerTube’ is an API used by YouTube’s clients, and you can use it too, although they might not like it. It runs on Node.js, Deno, and modern browsers.

LuanRT

😀 Emoji Mart 5.6 – Emoji selection component for the Web (above).

✍️ Atrament 4.2 – Elegant drawing and handwriting on Canvas.

📄 React-PDF 8.0 – React component to display PDFs. Now supports React 19.

TanStack Virtual 3.5 – Headless UI for virtualizing scrollable elements.

TestCafe 3.6 – Automated end-to-end web testing framework.

Preact 10.21 – The 3KB React compatible alternative.

jQuery UI 1.13.3 – Yes!

🎁 And one for fun..

Virtual x86: x86 Virtualization with JS and WASM — Run Linux, numerous older versions of Windows, BSD, MS-DOS, and other systems right in the browser (and quickly, too). Not a new project, but I’m always impressed how it’s constantly getting updates. GitHub repo.

Fabian Hemmer

The BASIC programming language has just turned 60 years old, so why not fire up the MS-DOS image (above) and have some fun in QBasic? 😉

#​685 — April 25, 2024

Read on the Web

JavaScript Weekly

JSR is Not Another Package Manager — When Ryan created Node, JavaScript had no packages or standard module system. npm and CommonJS took off, and tools like Yarn or pnpm extended npm in certain areas, but in today’s ES modules era, it’s time for a transformation. JSR is not merely a new npm, but a shift in how packages are distributed, tailored for the modern era.

Ryan Dahl

Node.js v22 (Current) Released — The newest, cutting edge, major version of Node lands with some key enhancements. v22 becomes the new ‘current’ release (becoming active LTS in October). It adds support for require-ing ESM, gets a built-in WebSocket client, upgrades to V8 12.4, and includes a task runner (e.g. node –run task_name). This blog post takes a closer look.

Rafael Gonzaga

💡 If you’re a Node developer, be sure to subscribe to Node Weekly as well, where we go into more depth of server-side JavaScript each week.

Lydia Hallie Tests Your JavaScript Knowledge — Challenge your core knowledge with 50 interactive quiz questions covering topics like the event loop, scopes and closures, classes and prototypes, garbage collection, and more. After each question, you’ll get an in-depth visual explanation from Lydia to deepen your understanding of fundamental JS concepts.

Frontend Masters sponsor

pnpm 9.0: The Efficiency-Focused Package Manager — pnpm has long been a fantastic option for folks looking to save disk space and CPU cycles (or for its great monorepo support) while maintaining most of what makes npm great. v9.0 drops Node 16 and 17 compatibility, honors the packageManager field in package.json, makes some default config changes, and adopts Lockfile v9.

pnpm

IN BRIEF:

🙈 Yesterday was JS Naked Day, a day to go entirely without JavaScript. Sadly we missed it.. 😏

🇫🇷 dotJS 2024 is a JavaScript conference taking place in Paris, France on June 27. The speaker roster so far is pretty compelling.

rcompat is an interesting JS interoperability and runtime compatibility layer for servers, so you can avoid the differences between Node, Deno and Bun.

RELEASES:

React Native 0.74

Electron 30.0 – Now with Chromium 124, V8 12.4, and Node.js 20.11.1.

Hexo 7.2 – Static site generator for blogging.

Ember 5.8, Ionic 8, SWC 1.5, Knip 5.10.0

📒 Articles & Tutorials

A Tale of Migrating a Project to Bun — Eric, an engineer at Render, walks through the steps of how he migrated his Sveld project to Bun (replacing Yarn and Vitest in the process), including some minor gotchas he encountered, and what the speed gains were.

Eric Liu

The Frontend Developer/Engineer Handbook 2024 — A guide to the current webdev landscape, covering how to get up to speed on topics like editors, CSS, UX, UI, the command line, tools and frameworks, perf, accessibility, etc.

Cody Lindley

3 Reasons to Use JavaScript Libraries for Graph Visualization — Easily add network visualization capabilities to your applications, while cutting down on dev time.

Linkurious sponsor

HTML Attributes vs DOM Properties — They’re different, but often coupled. Jake outlines the the difference, and why it matters.

Jake Archibald

▶  A Node.js Streams Masterclass — An hour-long odyssey with the creator of Fastify (and Node.js TSC member) into the world of streams. A stream is like an array over time.. we learn, before going into live coding and demos.

Matteo Collina

How I Fixed My Brutal TTFB (Time to First Byte) — All it took was two small changes to how data is fetched to reduce the p75 TTFB from 3.46s to just 704ms. Learn more.

Sentry sponsor

📄 The Problem with new URL(), and How URL.parse() Fixes That Kilian Valkhof

📄 The Intl.Segmenter Object is Now Part of Baseline – Interoperable, locale-sensitive text segmentation. Rachel Andrew

📄 Event Dispatch in Angular – Under-the-hood of the new event delegation system. Ramanathan and Wilkinson

📄 The Making of a TypeScript Feature: Inferring Type Predicates Dan Vanderkam

📄 Adding ESLint and Auto-Fixing an Existing TypeScript Project Daniel Doubrovkine

📺 Using TC39 Proposed Signals in React and Svelte Today – Jack Herrington

📄 Quirks of Escaping JavaScript for a script Tag James Fisher

🛠 Code & Tools

📊 Unovis: A Modular Data Visualization Framework — Works with React, Angular, Svelte, Vue or plain old JS/TS. Handles all sorts of things from Sankey diagrams to maps, graphs, chord diagrams, and traditional line/area charts. The v1.4 release adds support for annotating visualizations in a flexible way. There’s a gallery of examples (with code) if you want to dig in.

F5, Inc.

Transformational Auth & Identity | Userfront — “Compared to our previous experiences in the security/auth space, Userfront is an order of magnitude simpler to use.”

Userfront sponsor

ReScript 11.1 Released with Improved JSX Support — ReScript is an OCaml-inspired, typed language that compiles to JavaScript and has a JSX transform built into the language. JSX support was previously solely for React use cases, but now works with Vue, Preact, and other approaches too.

The ReScript Project

typed-xlsx: Feature-Rich Type-Safe Excel Reporting — Define a strongly typed spreadsheet schema, then populate and work with the sheets directly from JS/TS, such as for generating reports for users – example code. Wraps around SheetJS. GitHub repo.

Cyprien Thao

Devalue 5.0: Like JSON.stringify, But.. — “Gets the job done when JSON.stringify can’t.” Namely, it can handle cyclical and repeated references, regular expressions, Map and Set, custom types, and more.

Rich Harris

imask.js 7.6.0: A Vanilla JavaScript Input Mask — Prevent users from entering invalid values. Has plugins for Vue, Angular, React, Svelte, and Solid, as needed.

imaskjs

browser-or-node 3.0: Figure Out Where Your Code is Running — Provides a simple way to tell if your code is currently running in a browser, in Node, in a Web Worker, or in Deno. Works with both ESM and CJS imports.

Dinesh Pandiyan

MistCSS 0.4 – Create components using only CSS, i.e. JS-from-CSS. v0.4 adds Hono and CSS variable support.

Accessible Autocomplete 3.0 – The UK government’s very own autocompleting input component. (Examples.)

Mercurius 14.1 – Implement GraphQL servers and gateways on Fastify.

Vision Camera 4.0 – Advanced camera control for React Native.

webdav-client 5.6 – WebDAV client library for Node & browsers.

🐍 JSPyBridge 1.2 – Run Python from Node or vice versa.

MUI X 7.3 – Popular React component suite.

#​684 — April 18, 2024

Read on the Web

JavaScript Weekly

Quill 2.0: A Powerful Rich Text Editor for the Web — A major release and significant modernization for the open source WYSIWYG editor. In Announcing Quill 2.0, we learn about Quill’s transition to TypeScript and improved use of modern browser features, but there’s more going on too, such as its ESM packaging. Want to play with some code? There’s a playground.

Slab Inc.

Airbnb’s Extensive JavaScript Style Guide — It’s been years since we mentioned this popular, opinionated style guide, but it keeps getting little tweaks and repairs and remains a handy resource nonetheless.

Airbnb

WorkOS: Enterprise-Grade Auth for Modern SaaS Apps — WorkOS supports both the foundational auth and complex enterprise features like SSO. It provides flexible and easy-to-use APIs, helping companies like Vercel, Loom, and Webflow become Enterprise Ready. Best of all, WorkOS User Management supports up to 1 million MAUs for free.

WorkOS sponsor

Upgrading jQuery: Working Towards a Healthy Web — jQuery remains all over the Web, and the jQuery team and OpenJS Foundation have joined forces to make sure sites get up to date. Their ‘Healthy Web Checkup’ tool can tell you if the version of jQuery on a site is outdated (.. most likely ‘yes’ 😅).

Timmy Willison (jQuery)

Biome v1.7: Faster Formatting and Linting, Now Even Easier to Migrate To — Biome is an increasingly compelling, all-in-one JavaScript, TypeScript and JSX Prettier-compatible formatter and linter. v1.7 makes it easier to migrate to from ESLint and Prettier, can emit machine-readable JSON reports, and has some rule updates.

Biome Core Team

IN BRIEF:

🤡 ▶️ Interview with Senior JS Developer 2024 is a satirical(?) take on the state of modern development and increasingly complex ecosystems. Watch to either laugh or cry. (6 minutes.)

📺 Bartek Szwej has put together a list of 300 JavaScript-related videos from the past year, ordered by their YouTube view count.

f(x) (a.k.a. fx) is a great CLI tool for viewing JSON data. It now includes a JS engine so you can process JSON with JavaScript one-liners at the terminal, too.

Joyee Cheung shares a trip report from Node.js’s latest collaboration summit, touching on the topics the Node team is thinking about lately.

The folks at Deno go into depth about how they built JSR, the newest JavaScript registry, and how it can operate at scale.

“Much faster JSX element creation” is on the way for React developers.

📒 Articles & Tutorials

Building a CLI from Scratch with TypeScript and oclif — oclif is a mature CLI tool development framework maintained by Salesforce. This tutorial goes from zero to something that works.

Josh Cunningham

Qwik vs. Next.js: Which is Right for Your Next Web Project? — A point by point faceoff between Qwik vs Next.js and why the author thinks Qwik takes the gold medal.

Samuel Mendenhall (Cisco)

RAG to Riches Developer Quest — Interact with AI-enhanced bots and learn to build your own RAG chatbot with Atlas Vector Search and Node.js.

MongoDB sponsor

CSS in React Server Components — An exploration of compatibility issues between React Server Components and CSS-in-JS libraries like styled-components.

Josh W Comeau

Profiling Node.js Performance with Chrome’s Performance Panel — Learn how to profile Node performance with Chrome’s Performance panel. (The JS Profiler is going away in Chrome 124, so you’ll need to become familiar with the newer approach.)

Chrome for Developers

📄 Keeping Up with the Node-ish Ecosystem – How Mux updated its legacy Node SDK to work with new JS runtimes. Dylan Jhaveri (Mux)

📄 Building an Interactive 3D Event Badge with React Three Fiber Paul Henschel (Vercel)

📄 A Deep Dive into Rspack and Webpack Tree Shaking hardfist

📄 Things I Like Better in Vue Than in React Jaydev Mahadevan

📄 Converting Plain Text To Encoded HTML With Vanilla JS Alexis Kypridemos

🛠 Code & Tools

TresJS: Build 3D Experiences with Vue.js — Create 3D scenes with Vue components and Three.js. Think React-three-fiber but more.. Vue flavored. There’s an online playground if you want to give it a quick spin (literally).

Alvaro Sabu

Next.js 14.2 Released — Approaching its eighth birthday, Next.js has passed 1 million monthly active developers and landed a release with support for using Turbopack to improve local development, memory usage, CSS and caching optimizations, improved error messages, and more.

Delba de Oliveira and Tim Neutkens

Porkbun — The Best Domain Registrar for JavaScript Developers — JavaScript developers choose Porkbun to register their domains. Get .dev, .app, or .foo for just $5 from Porkbun now.

Porkbun sponsor

Otto 0.4: A JavaScript Parser and Interpreter in Go — A JavaScript parser and interpreter written natively in Go (yes, we have a newsletter for that) which could be of interest if you want to add scripting to Go apps.

Robert Krimen

Wedges: A Collection of UI Components for React — Built and used by the folks at Lemon Squeezy, this is a well thought, aesthetically pleasing set of Radix UI and Tailwind CSS based components. You can also download a Figma file of them to use when mocking up layouts. GitHub repo.

Lemon Squeezy

HyperFormula: A Headless Spreadsheet System — A headless spreadsheet system – it provides the parsing, evaluation and representation of a spreadsheet, with you providing the UI, if you need one. Boasts ‘nearly full compatibility’ with Excel. Note the dual GPLv3 and commercial licensing.

Handsoncode

svelte-dnd-action: An Action-Based Drag and Drop Container for Svelte — Makes the bold claim that it “supports almost every imaginable drag and drop use-case, any input device and is fully accessible.”

Isaac Hagoel

⚙️ Zoompinch: A Natural Feeling ‘Pinch to Zoom’ for Vue 3 – Expected to come in React and Web Component variants in time. Maurice Conrad

⚙️ Craft.js – A React framework for building drag and drop page editors. Prev Wong

⚙️ Kotekan – A simple React framework built on Bun and supporting React Server Components. Benedikt Müller

⚙️ Cytoscape.js 3.29 – Graph theory/network visualization and analysis library.

⚙️ Tailwind Next.js Starter Blog 2.2 – A blogging starter template.

⚙️ RxDB 15.18 – Offline-first, reactive database for JS apps.

⚙️ JZZ 1.8.2 – MIDI library for Node and browsers.

⚙️ Ember.js 5.8

⏳ A Blast from the Past

Visualizing Algorithms — This fantastic post is now ten years old, but I revisited it recently and it’s such a joy. Mike Bostock (of D3.js fame) visually guides us through some algorithms using both demos and code.

Mike Bostock

#​683 — April 11, 2024

Read on the Web

JavaScript Weekly

Frontend Development Beyond React: Svelte — A surprisingly thorough article going deep into one developer’s research into using Svelte to build modern front-end apps. If you’ve never experimented with Svelte, this is a good primer to the key concepts, tradeoffs, and techniques involved.

Héla Ben Khalfallah

🛠 A JS Bin to Play with the TC39 Signals Proposal — Last week, we featured the proposal to add signals to JavaScript and by way of a polyfill, you can get experimenting with it right now.

NullVoxPopuli

Add Excel-Like Spreadsheet Functionality to Your JavaScript Apps — SpreadJS is the industry-leading JavaScript spreadsheet for adding advanced spreadsheet features to your enterprise apps. Build finance, analysis, budget, and other apps. Excel I/O, 500+ calc functions, tables, charts, and more. View demos now.

SpreadJS from MESCIUS inc sponsor

zx v8.0: Write Better Shell Scripts with Node — A popular way to make shell scripting a more pleasant experience in Node with useful wrappers around child_process, argument escaping, and sensible defaults. v8.0 makes zx 20x smaller, faster, makes it easier to kill processes, pass input to commands & more.

Google

IN BRIEF:

Val Town is a fantastic online platform for writing and deploying TypeScript functions right from the browser and has just raised $5.5m in funding.

The set methods proposal advanced to stage 4 at TC39 this week. Promise.try and Math.sumPrecise have advanced to stage 2.7.

🚗 What happens if 𝕏 you hack a car with JavaScript?

Cloudflare has added a JS-native RPC to Cloudflare Workers.

A recap of Angular developments at the recent ngConf 2024 event.

RELEASES:

ESLint 9.0 – A significant release with lots of cleanups, a new no-useless-assignment rule, and numerous tweaks and changes.

VitePress 1.1 – Vite & Vue-powered static site generator.

npm 10.5.2 – It’s now 𝕏 faster to run scripts, though we’re talking milliseconds nowadays.

Node.js April 10 Security Releases – Including v18.20.2 (LTS), v20.12.1 (LTS), and v21.7.3 (Current).

We mentioned Gulp 5’s release last week, but missed the announcing Gulp v5 post explaining why it’s a big deal.

📒 Articles & Tutorials

On Developing Figma Plugins — Some interesting observations on the experience of creating Figma plugins in JavaScript, including how they’re sandboxed and some implementation details of the author’s own plugin.

Tom MacWright

React Server Components in a Nutshell — A quick overview of RSCs not all about Next.js, comparing the approach taken by several frameworks before sharing thoughts on the tech and why the smaller Waku framework is worth a look.

Paul Scanlon (The New Stack)

Using AI-Powered Autofix to Fix Your Broken Code — Join Sentry live on April 25th, to preview Autofix and learn how we are using ML to prioritize issues and alerts.

Sentry sponsor

Some DevTools Tips and Tricks — Most developers barely scratch the surface of what DevTools can accomplish, says the author, who shares ten tips here.

Pankaj Parashar

📄 Object Structure in JavaScript Engines – You rarely need to know how objects are internally represented in JavaScript engines, but if you want to.. Frontend Almanac

📄 The Easiest Way to Build Reactive Local-First Apps, with TinyBase and PowerSync Benedikt Müller

📄 Building an Article Recommendation System with Upstash, Fly and OpenAI Rishi Raj Jain

📄 Browser Security Bugs That Aren’t: JavaScript in PDFs ericlaw

📄 Exploring Authentication in Next.js Robin Wieruch

🛠 Code & Tools

Madge 7.0: Create Graphs From Your Module Dependencies — A tool for generating a visual graph of module dependencies, finding circular dependencies, and discovering other useful info.

Patrik Henningsson

PythonMonkey: A JavaScript Engine in the Python VM — If you need to use Python but also want to run JavaScript, this gives you a way to do it with the Mozilla SpiderMonkey JS engine embedded into the Python runtime with Python providing the host environment.

Distributive

❤️ Loving console.log Is Easy, but Hate 😡 Losing Context to View Messy Output — Developer productivity tools Wallaby.js, Quokka.js and Console Ninja show console.log values and errors right next to your code.

Wallaby Team sponsor

Faces.js: A Library for Generating Vector-Based Cartoon Faces — The end results are somewhat reminiscent of how the Nintendo Wii generates random Miis. Faces are drawn as SVGs with each also represented by a JavaScript object so you can draw them again later.

ZenGM

Color.js 0.5: ‘Let’s Get Serious About Color’ — A fantastic library for working with colors in the browser, following the latest specs. It’s even been used by browsers to test their CSS Color 4/5 implementations.

Lea Verou and Chris Lilley

Preview.js: Preview UI Components Instantly in Your IDE — Namely, VS Code or JetBrain IDEs, out of the box. Compatible with components built for React, Vue, Svelte and Solid.

Zenc Labs Pty

Kosko: Organize Kubernetes Manifests in JavaScript — Version 4.1 has just been released with a new plugin system.

Tommy Chen

Transformational Auth & Identity | Userfront — “Compared to our previous experiences in the security/auth space, Userfront is an order of magnitude simpler to use.”

Userfront sponsor

Mikro ORM 6.2 – TypeScript ORM for Node.js based on Data Mapper. SQL Server and libSQL/Turso join the list of supported databases.

Rspack 0.6 – Fast Rust-based web bundler.

Pixi.js 8.1 – The fast WebGL and WebGPU 2D graphics engine switches back to WebGL by default due to immature browser support.

Jotai 2.8 – Simple, flexible state management for React.

DOMPurify 2.5 – Fast, tolerant XSS sanitizer for HTML and SVG.

Reveal.js 5.1 – Framework for building presentations in HTML.

Xterm.js 5.5 – Create terminal experiences on the Web.

TIFF 6.0 – Pure JS TIFF image decoder.

Shiki 1.3 – Powerful syntax highlighter.

🛞 It’s wheely good..

Remember the iPod’s click wheel? It’s back. In JavaScript form!

#​682 — April 4, 2024

Read on the Web

JavaScript Weekly

A Proposal to Add Signals to JavaScript — A (very) early stage proposal for bringing a new feature to ECMAScript/JavaScript: signals! The proposal brings aboard ideas from a swathe of popular frameworks and aims to align everyone and get us on the same page when it comes to working with state and making updates based upon changes to state. Rob writes more about the proposal here.

Rob Eisenberg and Daniel Ehrenberg

Build a RAG Chatbot App with MongoDB and Node.js — Embark on the RAG to Riches Developer Quest — a month of innovation, learning, and exclusive rewards awaits you. You’ll interact with AI-enhanced bots and learn how to build your own with Atlas Vector Search and Node.js. Register now!

MongoDB sponsor

JS-Torch: A PyTorch-Like Library for JavaScript — Python’s PyTorch is one of the gold standards amongst machine learning libraries but this project brings some of its features directly into the JavaScript world. Here’s a live browser-based demo. Early days but this could become a big deal.

Eduardo Leao

Bun 1.1 Released: Now Supports Windows Too — With the lighthearted codename of Bundows, the alternative server side runtime now runs directly on Windows 10 and up (plus WSL, macOS and Linux, of course). This is a key step in its adoption, with even features like Bun Shell happy on Windows out of the box. Node compatibility continues to improve with support for node:http2 and IPC support between Bun and Node processes.

The Entire Bun Team

IN BRIEF:

Samuel Groß of the V8 team explains the V8 Sandbox, a security mechanism designed to prevent memory corruption in the V8 engine impacting other memory in the process.

Svelte’s Rich Harris is ‘shaken up’ after a misunderstanding around ‘self-closing’ HTML tags and their effect on Svelte.

🤡 There was a curious JS-themed April Fools prank where a .js TLD for domain names was ‘announced’. Sadly, it’s not true, but there is js.org if you want something vaguely similar.

An official update on the merging of Angular and Wiz.

RELEASES:

Deno 1.42 – The alternative JS runtime adds first class support for JSR and improves Node.js compatibility further.

Babylon.js 7 (homepage) – Key release of the popular rendering engine.

Node.js April 3 Security Releases – Includes 18.20.1, 20.12.1 & 21.7.2.

Docusaurus 3.2 – Popular content/docs site generator.

Gulp 5.0

📒 Articles & Tutorials

What Even Is a JSON Number? — Despite the presence of standards around JSON, the answer is more complicated than you’d think, particularly when it comes to interfacing with other ecosystems and languages that aren’t JavaScript.

Brian Terlson

The History of JS Interop in Dart — About twelve years ago, Google introduced Dart, a language which initially seemed set to take over a lot of JavaScript’s use cases, but which eventually found its own niche (notably with Flutter). JS interoperability has remained important, though, and with Dart 3.3 has gotten significantly better.

Sigmund Cherem (Google)

Everything I’ve Learned About Scaling Designs Systems (With Examples) — I’ve learned a lot about what it takes to build, maintain, and scale design systems initiatives at large companies.

StackBlitz sponsor

The BFCache Explained — The back/forward cache (‘bfcache’) is a browser optimization that makes going back and forward in the browser a faster experience – it’s been present for years and usually leaves you alone as a JavaScript developer, but there are things worth being aware of.

Sabatino Masala

Running OCR Against PDFs and Images Directly in the Browser — A look behind the scenes at creating a simple tool using JavaScript to perform OCR against images and PDFs dragged on to the page.

Simon Willison

The Easy Way to Access the Last Array Element

Ignace Maes

A Comparison of JavaScript CRDTs

Alexis Métaireau

🛠 Code & Tools

Cally: Small, Feature-Rich Calendar Components — A collection of open-source calendar components for selecting single dates or date ranges. Framework-agnostic, themeable, localizable, and accessible (it even has an accessibility statement showing its commitment to this area).

Nick Williams

📊 Counterscale: Scalable Web Analytics You Can Run on Cloudflare — A simple web analytics tracker and dashboard that’s designed to be easy to deploy and maintain by hosting it on Cloudflare (for free too, up to a certain level).

Ben Vinegar

Product for Engineers: A Newsletter Helping Flex Your Product Muscle — Subscribe for free to get curated advice on building great products and best practices of top startups.

PostHog sponsor

🎵 Tonal.js: A Music Theory Library — Packed with functions to manipulate tonal elements of music like notes, intervals, chords, scales, modes, and keys, and used as the basis of other music related projects. GitHub repo.

danigb

Fancy-ANSI: Convert ANSI Text to HTML — If, for some reason, you want to convert text with ANSI escape codes into HTML.. Lots of examples on the homepage. GitHub repo.

Andres Morey

Dioma: Dependency Injection Container for Vanilla JS and TS — No decorators, no annotations, no magic, no dependencies – you just add the static scope property to your class and use inject to get an instance.

Eugene Daragan

svelte-zoomable-circles: Svelte Component for Browsing Hierarchical Data — A Svelte component for displaying and browsing hierarchical data using zoomable circles. Live demo.

Tyler Berbert

VineJS 2.0 – Form data validation library for Node.js.

PGlite 0.1.1 – Lightweight Postgres packaged as WASM into a TypeScript library for the browser, Node.js, Bun and Deno. Now supports Postgres array types.

TS-Pattern 5.1 – Pattern matching library with smart type inference.

ical.js 2.0 – Parser for ICS (RFC5545) and vCard (RFC6350) data.

Minimatch 9.0.4 – Glob matching function – used by npm itself.

vue-tel-input 9.0 – Telephone number input for Vue. (Demo.)

OverlayScrollbars 2.7 – JS custom scrollbar plugin.

Octokit.js 3.2 – ‘Batteries-included’ GitHub SDK.

#​681 — March 28, 2024

Read on the Web

JavaScript Weekly

JavaScript Visualized: Promise Execution — A helpful diagrammed and animated article, coupled with an (optional) 8-minute video, that goes into how promises work and are scheduled behind the scenes. It’s useful to have a good mental model of these mechanics, given promises form the basis of asynchronous functions in JavaScript.

Lydia Hallie

▶  Node.js: A Documentary of Its Origin Story — It’s an hour long, but this documentary covers the history of Node particularly well, including how everything brewed up to the io.js fork of 2014. Easter weekend watching, perhaps?

Honeypot

Learn Advanced JavaScript Performance Optimization — Garbage collection, memory profiling, data structures like sets and arrays, and event loop management. Learn performance-driven programming, preparing you to write blazingly fast and efficient code!

Frontend Masters sponsor

IN BRIEF:

The Node.js Technical Steering Committee has confirmed there’s no intention to remove npm from the main Node distribution.

Is Bun Windows Yet? No, but Bun 1.1, which will support Windows, is supposedly just four days away..

An example of a simple, yet useful, Web Component in a single GitHub Gist.

The RedwoodJS framework now supports React Server Components too, as an alternative to its traditional GraphQL-based approach.

RunJS Play is a neat Web-based JavaScript playground that shows instant live feedback alongside each line.

Vercel now fully supports Node.js 20 for both builds and functions.

RELEASES:

VitePress 1.0 – Powerful static site generator.

Neutralinojs 5.1 – Alternative cross-platform desktop app framework.

Babylon.js 7.0 – Powerful game & 3D rendering engine. No official release post yet, but expected later today.

Radix Themes 3.0 – Powerful frontend component library.

Node.js v20.12.0 (LTS) and Node v18.20.0 (LTS).

Deno 1.42.0, Vite 5.2, TypeChat 0.1, Chromatic 3.

📒 Articles & Tutorials

A Look at ECMAScript’s Iterator Helper Methods — The proposal is several years old, but now at stage 3 in TC39, Iterator Helpers are being implemented and ship with V8 12.2/Chrome 122. The helpers are functions like .map, .filter, .take and .forEach and are made available to any object with Iterator.prototype in its prototype chain.

Rezvan Mahdavi Hezaveh (V8)

Introducing Waku’s “Pages Router” — Waku is an interesting minimal server-side React framework and it’s now also bringing a minimal API to the modern React server components era: “Making a Waku site is now as simple as making a few files and folders in the ./src/pages directory”..

Sophia Andren

Transformational Auth & Identity | Userfront — Userfront is an auth & identity platform that transforms your business to serve free, freemium and enterprise customers.

Userfront sponsor

What You Need to Know About Modern CSS — A guide with a list of the newest additions to CSS (think nesting, view transitions, :has(), etc). JS plays an occasional role too, whether by enhancing or polyfilling modern CSS features.

Chris Coyier

Building a Micro HTMX SSR Framework — Matteo builds on an earlier tutorial about creating a ‘movie quotes’ app by exploring an alternative backend stack to use, based upon Fastify, Vite and HTMX.

Matteo Collina

Meet Angular’s New output() API — Outputs allow component authors to emit values to parent components.

Paul Gschwendtner (Google)

We Rewrote our React App in Svelte in Three Weeks

Dusty Phillips

How to Use the Web Bluetooth API

Confidence Okoghenun

🛠 Code & Tools

Trix 2.1: A Clean, Rich WYSIWYG Editor for the Web — A WYSIWYG editor developed by the folks at 37signals (known as the birthplace of Ruby on Rails). It’s used in their Basecamp and HEY apps, so is about as stress tested as you can get. GitHub repo.

37signals

Meet the Future of Data Delivery with Hasura DDN — Join us April 16 for the unveiling of Hasura DDN. Create a unified, composable API, instantly and with no maintenance.

Hasura sponsor

Atlassian’s Pragmatic Drag and Drop Framework — A performance-focused drag-and-drop library that can be used to power experiences on any frontend stack. There’s a live demo on the page along with a recording of a talk by Alex Reardon walking through the motivations for creating it and how it works.

Atlassian

Create Vue3 App: A New Vue App Scaffolding Tool — Taking inspiration from tools like Create React App, this uses Vite to help you spin up a new Vue-based app using tools based upon answers you give to a number of questions.

Selemon Brahanu

<relative-time> 4.4: Format Timestamps as Localized Relative Times — Supply this web component with a standard formatted date and time and it’ll render the right text to suit. It’s actually used all over GitHub itself (use Inspect Element on commit times). Demo.

GitHub

DOM3D.js: 3D DOM Viewer in a GitHub Gist — Some code you can copy and paste into your browser console to get a 3D view of the DOM, sort of.. (move your pointer to navigate the.. thing it creates). The effect is odd but fun to play with.

Orion Reed

Free Auth for 1 Million MAUs — WorkOS provides easy-to-use APIs for authentication, user identity, and complex enterprise features like SSO and SCIM.

WorkOS sponsor

PGlite 0.1 – Lightweight Postgres packaged as WASM into a TypeScript library for the browser, Node.js, Bun and Deno.

npm-publish 3.1 – GitHub Action to publish packages to npm.

AdminJS 7.8 – Automatic admin interface for Node.js apps.

Slonik 39.3 – Node.js Postgres client with type safety.

react-three-fiber 8.16 – React renderer for Three.js.

#​680 — March 21, 2024

Read on the Web

JavaScript Weekly

Runtime Compatibility Across JavaScript Runtimes — Several developers have come together to build this convenient way to visualize the compatibility of different Web APIs and JavaScript features across the ever increasing number of different runtimes (e.g. Bun, Deno, Node, LLRT..)

Tom Lienard et al.

✅ The item above reminds me of node.green, a visualization of JS feature support across versions of Node / V8, though it is nearly entirely green/Yes these days!

Introducing the Vlt (/vōlt/) Team — Last summer, Darcy Clarke (who used to work on the npm CLI team) wrote about a massive bug at the heart of the npm ecosystem around the security of manifests. Now, he’s teamed up with npm creator Isaac Z. Schlueter and fellow npm CLI team alumnus Ruy Adorno to work on… a new package manager and registry. (Yes, Brenda, ▶️ another one!)

vlt /vōlt/

Register for POST/CON 24! (April 30 – May 1, 2024) — Postman’s annual user conference will be one of 2024’s biggest developer events and a chance to network while growing your API skills! Connect with the global API community, hear from industry leaders, and take part in hands-on workshops.

Postman sponsor

IN BRIEF:

Angular’s ngConf 2024 is taking place right now and some interesting announcements have been coming out, including some AI integrations and a merger with another Google framework called Wiz.

As of Chrome 123, WebAssembly JSPI is entering origin trial. JSPI (JavaScript Promise Integration) allows WebAssembly code to directly use asynchronous Web APIs (via promises).

▶️ The Stack Overflow podcast interviewed Node’s creator Ryan Dahl about why he moved on to creating Deno, as well as JSR, edge functions, and the future of JavaScript generally.

sh.mhs / shorthand javascript is a cute example of some JavaScript golfing using some well considered, but still readable, aliases.

▶️ Honeypot’s Node.js documentary premieres on YouTube later today (but just after we go to press).

Last week we featured the v1.0 release of WinterJS, a SpiderMonkey-based JS runtime, but how fast it compared to the alternatives?

🤖 The W3C is working on a Web Neural Network API.

RELEASES:

Nuxt 3.11 – The full-stack Vue framework, and the last release before 4.0, but a significant release nonetheless.

Angular 17.3 landed last week, but here’s what’s new.

Preact 10.20.0, Express.js 4.19.0.

Save 30% on Your POST/CON Ticket! — Time is running out to save 30% on POST/CON 24. Don’t miss out on Postman’s biggest user conference ever.

Postman sponsor

📒 Articles & Tutorials

📉 Optimizing JavaScript for Fun and for Profit — A tour of several things to avoid to keep your code running fast and smooth, complete with examples. While the performance ground upon which we walk is often shifting, many of these things are good, common sense practices.

Rom Grk

Bringing require(esm) to Node.js — Joyee writes about landing experimental support for require()-ing synchronous ES modules in Node, a feature that has been a long time coming.

Joyee Cheung

FusionAuth’s New Vue, React And Angular SDKs — These JavaScript SDKs simplify authentication integration into React, Angular, or Vue apps, allowing you to focus on user features while ensuring top-tier security.

FusionAuth sponsor

How Figma Built a Custom Permissions DSL — Figma has a complex permissions setup, the implementation of which was causing tech debt, bugs, and delays. After not finding any open source answers, they built a DSL that isolated policies and data while also being cross-platform (Ruby and TypeScript.)

Jorge Silva (Figma)

Building a Node App with TypeScript — How to set up a seamless TypeScript development experience for bundling modern Node apps with pnpm and ES modules, by someone who certainly knows a few things about TypeScript.

Matt Pocock

Type Predicate Inference: The TS 5.5 Feature No One Expected — And another from Matt, who’s getting excited about the forthcoming inclusion of type predicate inference from function bodies in TypeScript 5.5.

Matt Pocock

WebSockets vs Server Sent Events vs Long-Polling vs WebRTC vs WebTransport

RxDB Docs

🛠 Code & Tools

Atrament 4.0: Library for Smooth Canvas Drawing and Handwriting — A small library for beautiful drawing and handwriting on canvas elements. It’s been around for several years but v4.0 is almost a complete rewrite. GitHub repo.

Jakub Fiala

MistCSS: Write React Components with Just CSS — Forget about CSS-in-JS.. what about JS-from-CSS? This approach provides a way to compile CSS-only React components into a TypeScript equivalent. (Code example.)

Typicode

MicroDiff: No Dependency Object and Array Comparison Library — Given two objects or arrays, it returns the differences (think diff but for JavaScript objects). Boasts high performance and TypeScript support. There’s also an article from 2022 about how it works.

AsyncBanana

Transformational Auth & Identity | Userfront — Userfront is an auth & identity platform that transforms your business to serve free, freemium and enterprise customers.

Userfront sponsor

oneRepo 1.0: A New Suite of Monorepo Tools for Teams — There always seems to be discontent when JS monorepo management tools get discussed, but maybe Paul’s approach could win you over?

Paul Armstrong

Eta 3.4: Embedded JS Template Engine for Node, Deno, & Browsers — Boasts being lighter and faster than EJS but with many of the same features (it looks a lot like Ruby’s ERB, if you like that vibe). GitHub repo.

Ben Gubler

TanStack Virtual 3.2: Headless UI for Virtualizing Large Element Lists — Supporting TS/JS, React, Solid, Svelte and Vue, this is a way to build 60 fps experiences even with large numbers of elements while retaining full control over markup and style.

Tanner Linsley

React Data Grid: A Fast Excel-Style Data Grid Component — A fantastic live demo shows off all of this component’s unique features, from grouping rows and columns to handling a million cells without slowdowns. Works with React 18+. GitHub repo.

Adazzle

VanJS 1.5 – The small but sweet reactive UI framework. (Homepage.)

Mercurius 14.0 – Implement GraphQL servers and gateways on Fastify.

Happy DOM 14.2 – JS implementation of a web browser sans UI.

Encoding.js 2.1 – Character encoding conversion and detection.

Javet 3.1 – Embed Node and V8 into Java apps.

#​679 — March 14, 2024

Read on the Web

JavaScript Weekly

Use Parcel Macros in Other Bundlers with unplugin-parcel-macros — Macros, as implemented in Parcel (and Bun!), are JS functions that run at build time whose results are inlined into a bundle in place of the original call. You can now use this feature with webpack, Vite, Rollup, esbuild, etc. Here’s a quick example of how handy this can be.

Devon Govett

𝕏 Devon goes into extra detail 🐦 in this Twitter/X thread. You can also revisit the release of Parcel 2.12.0 to learn more.

How to Add an Onboarding Flow for your Application — Learn to enhance onboarding for your app with Clerk and Next.js: add custom session tokens, configure Next.js middleware for session data, and auto-update user metadata for a streamlined, code-efficient user experience with minimal code.

Clerk sponsor

Speedometer 3.0: The Best Way Yet to Measure Browser Performance — Speedometer has been around since 2014, but this new release is the first with a full collaborative approach involving each major browser engine (Blink, Gecko, WebKit). You can run the test yourself here.

Apple, Google, Microsoft, and Mozilla

WinterJS 1.0: A Fast WinterCG and WASM-Compatible JS Runtime — WinterJS initially pitched itself as a Rust and SpiderMonkey-powered ‘Service Workers server’ but now simply boasts being the fastest WinterCG-compatible JavaScript web server full stop. The ability to run JITed JS workloads entirely under WebAssembly is next on their radar.

Wasmer

IN BRIEF:

Last week we linked to JSR, Deno’s attempt at a new JavaScript registry. If that post was too much to digest, they now have ▶️ a 6-minute video introduction covering the key motivations and features.

The Astro folks have unveiled Astro DB, a fully managed SQL database designed exclusively for Astro.

📊 Benchmarking Node vs LLRT/QuickJS.

f(x) is a fantastic terminal-based JSON viewer app (written in Go, but it can integrate with JS functions) – its latest version supports YAML too.

RELEASES:

Biome 1.6 – The toolchain gets partial support for Astro, Svelte & Vue files.

D3.js 7.9 – Popular data visualization library. They launched a fantastic new homepage several months ago too, if you haven’t checked in for a while.

React Native Skia 1.0 – Complete with ▶️ a launch video.

Node.js v21.7.1, Cypress 13.7, Angular 17.3, Ember 5.7

📒 Articles & Tutorials

Comparing JavaScript Frameworks: Templates — A thorough comparison of the template languages used by React, Vue, Angular and Svelte. Interesting analysis and this looks set to turn into a great series.

Maarten Hus

▶  Setting up an Express.js App with TypeScript in 2024 — This hour-long video isn’t about building an entire app, but getting everything set up and working in a clear, easy to follow way, including a variety of modern DX niceties.

Anson the Developer

5 Lessons Design Systems Teams Can Learn from Open-Source Maintainers — Design system teams must balance evangelism with maintenance and development. Turns out, the same is true of open source.

StackBlitz sponsor

Make Your TypeScript Functions More Reusable with Generics — Matt kicks this off with a challenge for you to consider, before showing how to make a function more flexible and type-safe by using type parameters instead of any.

Matt Pocock

How HEAD Works in Git

Julia Evans

🛠 Code & Tools

Shiki 1.0: A Powerful Syntax Highlighter — A few months ago, we linked to Shikiji, a fork of Shiki that was created to push the project forward. Happily, the creators of both libraries decided to join forces and Shiki 1.0 was born. It’s a syntax highlighter based on TextMate grammar and themes, the same engine as used by VS Code. The docs are good.

Pine Wu, Anthony Fu

Rolldown: A Rust-Powered Bundler for JavaScript — A new entry to an increasingly crowded market, but they explain why they’re building it here – it’s intended to underpin a future bundler to be used in Vite, rather than esbuild and Rollup. GitHub repo.

Rolldown

Breakpoints and console.log Is the Past, Time Travel Is the Future — 15x faster JavaScript debugging than with breakpoints and console.log, supports Vitest, jest, karma, jasmine, and more.

Wallaby Team sponsor

Storybook 8 Released — The popular front-end component workshop introduces built-in visual testing, support for React Server Components, up to 50% faster start times, Vite 5 support, and upgraded Vue and React control auto-generation. There’s also ▶️ a launch video to enjoy.

Michael Shilman (Storybook)

The Playwright Test Generator — I don’t know why I’ve not linked this before, as it’s so useful. Playwright isn’t just a library for controlling browsers from JavaScript, but also includes a tool for generating tests and page navigation code from your own interactions. Hit record, do stuff, and code is written.

Microsoft

Managed Reliability & Observability for Webhooks & Asynchronous Messaging — Send, receive, authenticate, transform, filter, & route events between 3rd-party APIs (Stripe, Shopify, Twilio, etc.) & serverless functions.

Hookdeck sponsor

TinyBase 4.7: A Reactive Data Store for Local-First Apps — If you want a bit more database-esque structure around the management of state in your apps, this is worth a try. The demos show it off well. v4.7 adds support for Turso’s LibSQL (a fork of SQLite).

James Pearce et al.

⌘K 1.0: A Composable, Unstyled ‘Command Menu’ for React Apps — The home page includes some neat examples in a variety of styles. GitHub repo.

Paco Coursey

webtoon/PSD: Zero-Dependency PSD Parser for Browsers and Node — PSD (Photoshop Document) is the format used by Photoshop and this library lets you dig into metadata and pixels on each image layer.

webtoon inc

Knip 5.1 – Find unused files, dependencies and exports.

React Date Picker 6.3 – Simple date picker component. (Demo.)

OverlayScrollbars 2.6 – JavaScript custom scrollbars plugin.

🗓 date-fns 3.4 – Modern JavaScript date utility library.

Slonik 37.3 – Node.js Postgres client with type safety.

MQTT.js 5.4 – MQTT client for Node and browsers.

Perspective 2.9 – Fast visualization of streaming datasets.

Rspack 0.5.7 – Fast Rust-based web bundler.