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.
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.
▶ 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.
📊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.
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.
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.
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.)
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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!
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.
Dexie.js is a popular wrapper for IndexedDB and its creator has launched Dexie Cloud, a platform to store and synchronize data between apps.
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 isjs.org if you want something vaguely similar.
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.
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.
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.