Package managers, the new todo app?

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

Build-time macros for everyone

#​679 — March 14, 2024

Read on the Web

JavaScript Weekly

Use Parcel Macros in Other Bundlers with unplugin-parcel-macrosMacros, 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.

A new challenger appears

#​678 — March 7, 2024

Read on the Web

JavaScript Weekly

📒  Eloquent JavaScript Goes Fourth — Coming several years after the third edition, the latest version of, perhaps, the best ‘all rounder’ book for learning JavaScript is here: “adjusted to the realities of 2024 and generally touched up.” You can read it on the Web, but it’ll be available in print later on too.

Marijn Haverbeke

Deno Introduces JSR: A New JavaScript Registry — The JavaScript Registry (a.k.a. JSR) is a new TypeScript-first, ESM-only module registry designed for the entire JavaScript ecosystem. This post digs into what it’s all about and how it builds upon the success of npm.

Dahl, Casonato, and Whinnery

Advanced JavaScript Tools to Empower Your Applications — Build better web applications with powerful JavaScript developer tools including: SpreadJS Excel-like spreadsheet components, ActiveReportsJS reporting tools, Wijmo UI component suite, and Document Solutions viewers for PDF, Excel, Image, and more.

MESCIUS inc sponsor

‘Apple Backs Off Killing Web Apps, But The Fight Continues’ — Last week, we linked to an open letter imploring Apple to reverse its moves around breaking PWAs.. and it worked? Whatever the case, Apple continues to seem hostile to developers, and there’s more to be tackled in this area.

Open Web Advocacy

IN BRIEF:

JavaScript is the focus of a WIRED feature where the author ponders if JavaScript Runs the World – Maybe Even Literally.

The OpenJS Foundation says we should care about package metadata interoperability and has put together a ‘collab space’ to focus on it.

📅 This year’s JSHeroes conference takes place in Romania on May 23-24.

Is client side security dead, or a critical part of the future? asks Gal Weizman.

RELEASES:

Node.js v21.7 (Current) – Node gains a built-in way to output colored text, load and parse environment variables, and support multi-line values in .env files.

TypeScript 5.4 – Improved type narrowing, the NoInfer utility type, Object.groupBy, Map.groupBy, and more.

Mermaid 10.9 – Generate diagrams from text.

Bun v1.0.30, Vue Language Tools 2.0, Ember 5.7

Sentry Launch Week: Making Debugging Fun — We’ll be making debugging fun, raffling swag and talking about all things developer, every. single. day. (For one week.)

Sentry sponsor

📒 Articles & Tutorials

Ultimate Guide to Visual Testing with Playwright — ‘Ultimate’ is always a gamble in a title, but this tutorial is pretty thorough and will get you several steps down the road of fetching pages and making comparisons, all from JavaScript.

Mike Stop Continues (BrowserCat)

Streaming HTML Out of Order Without JavaScript? — An interesting, yet short and sweet, demo of a browser feature that enables a technique you may not have imagined possible without JavaScript – note that support is still rather fresh in Firefox.

Chris Haynes

Effortless GraphQL with Hasura and TypeScript Functions — Connect to your data sources, generate a GraphQL API, and deploy globally — instantly. Want to write and use TypesScript functions directly in your GraphQL API? With Hasura, you can. Check it out.

Hasura sponsor

▶  Drizzle ORM Explained in 100 Seconds — The latest bitesize video from the always educational Fireship channel covers Drizzle ORM, a fast, TypeScript-based way to work with a variety of database systems across numerous JavaScript platforms, from Node to Bun, Deno Deploy, Supabase Functions, Cloudflare Workers, and more. If you need more, there’s ▶️ a 13 minute ‘crash course’ to learning Drizzle, too.

Fireship

Fireship has a ▶️ Expo in 100 seconds video out too, providing a rapid explanation of what the React Native-based toolkit is about.

JavaScript Bloat in 2024 — What’s the average size of JavaScript code downloaded per website? Spoiler alert: it’s a lot and will make anyone from the 56k dialup days cry.

Nikita Prokopov

Tiny Predictive Text — Using 2MB of JavaScript with no AI or LLMs in sight (but using a variant of a Markov chain).

Adam Grant

Coroutines and Web Components“We will see how coroutines can be used to model web components in a different way, and why you might like it.”

Laurent Renard

Using Web Bluetooth to Read BBQ Temperature Sensor Data

Rik Schennink

🛠 Code & Tools

Million Lint: A Linter for React PerformanceMillion’s mission is to make React apps faster and the new VS Code extension Million Lint takes a new approach: imagine ESLint but for suggesting performance improvements.

Aiden Bai

Your Google Translate for UI ↔️ Code — Don’t get lost in translation. Build UI with code and copy clean JSX off your design.

UXPin Merge sponsor

BlockNote 0.12: A ‘Notion-Like’ Block-Based Text Editor0.12.0 is a significant release for this ProseMirror and TipTap-based editor that lets you drag and drop blocks, add real-time collaboration, add customizable ‘slash command’ menus, and more. It has an all new homepage, too, along with new examples.

TypeCell

PixiJS v8: Build Striking 2D WebGL ExperiencesPixiJS is a very mature, long standing rendering library that abstracts away all the pain of building fast 2D graphical experiences for the Web. v8 boasts significant performance improvements, a WebGPU-backed renderer, and a variety of API improvements. If you’re new to Pixi, there’s an interactive tutorial to show you the ropes.

PixiJS Team

NSFW JS 4.1: Client-Side Indecent Content Checking — A client-side TensorFlow.js-powered option for detecting potentially indecent images before they even go over the wire. It’s not fool proof but may help as another layer of protection for both you and your users. GitHub repo.

Infinite Red, Inc.

Plotly 2.30: A JavaScript Graphing Library — A high-level, declarative charting library, built on top of D3 and stack.gl, with over 40 chart types, including 3D charts, statistical graphs, and SVG maps.

Plotly, Inc.

ONBOARDING_LIB: A Headless Onboarding Library — An onboarding library for building accessible, customizable and persisted onboarding flows in React apps. The site itself is an example of such a flow.

Neftic Oy

Finder 3.2: CSS Selector Generator — Given an element, it produces the shortest possible, but precise, selector that reaches that element.

Anton Medvedev

Set Your JavaScript Job Hunt on Autopilot — First 2 Apply automatically monitors most popular job sites and sends you instant notifications for new listings. Try it for free.

First2Apply sponsor

Partytown 0.10.0 – Move intensive third-party scripts off the main thread and into a web worker.

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

visx 3.9 – Airbnb’s React-based visualization primitives.

NVM Desktop 3.2 – GUI for Node Version Manager.

melonJS 17.0 – Browser-based 2D game engine.

NodeBB 3.7 – Node.js based forum system.

Choosing the Right Node.js Package Manager in 2024: A Comparative Guide

The year 2024 marks a crucial juncture in the Node.js ecosystem, where developers face different choices when it comes to selecting the right package manager for their projects. npm, Yarn, and pnpm stand out as the frontrunners, as they are the most widely used in the Node.js ecosystem. Each package offers unique features and capabilities tailored to address the challenges of modern development environments.

Let’s examine the differences, advantages and disadvantages between them to help developers make informed decisions about which tool best suits your project needs, and get insights into the evolving trends shaping their usage in 2024.

npm – Node Package Manager

npm is the default package manager for Node.js, known for its extensive package registry and seamless integration with the Node.js ecosystem. It was created to simplify the process of installing, managing, and sharing code dependencies in Node.js projects. npm provides a vast repository of over two million packages, making it a comprehensive ecosystem for JavaScript developers and the largest software registry in the world.

Here’s a closer look at npm:

Advantages:

__Vast Package Repository__: Developers love npm for its unmatched package registry, boasting over two million packages covering a wide range of functionalities and use cases. Developers have access to a rich ecosystem of open-source libraries and modules, enabling them to leverage existing solutions and accelerate development.
__Default Choice for Node.js__: npm comes bundled with Node.js installations, making it the default package manager for Node.js projects. Its seamless integration with the Node.js ecosystem simplifies dependency management and ensures compatibility with the Node.js runtime.
__Mature Ecosystem__: npm has a mature and well-established ecosystem with robust infrastructure and community support. It has been in use for many years and has undergone continuous improvements, resulting in a stable and reliable tool for managing project dependencies.
__Comprehensive CLI__: npm provides a comprehensive command-line interface (CLI) with a wide range of commands and options for managing packages, scripts, and configurations. Developers can perform tasks such as installing, updating, publishing, and scripting with ease using npm’s intuitive CLI.
__Semantic Versioning__: npm follows semantic versioning (SemVer) rules, allowing developers to specify version ranges for dependencies accurately. This ensures compatibility and predictability when updating packages, minimizing the risk of breaking changes in projects.
__Custom Scripts__: npm allows developers to define custom scripts in the “package.json” file, which can be executed using the npm run command. This feature enables automation of various development tasks such as building, testing, and deployment, streamlining the development workflow.
__Integration with npm Registry__: npm seamlessly integrates with the npm registry, a centralized repository where developers can publish and discover packages. This centralized infrastructure fosters collaboration and code sharing within the JavaScript community, contributing to the growth and innovation of the ecosystem.

Overall, npm offers a robust and feature-rich package management solution that addresses the needs of developers building Node.js applications. Its extensive package repository, mature ecosystem, comprehensive CLI, and community support make it a preferred choice for JavaScript developers worldwide.

Disadvantages:

__Performance Issues__: npm can sometimes suffer from performance issues, especially in large-scale projects with many dependencies. Some developers find Yarn and pnpm faster. Slow installation times and high resource consumption may impact developer productivity and build times.
__Versioning Complexity__: Managing package versions and dependency conflicts can be challenging with npm, particularly in projects with complex dependency trees. Resolving version conflicts and ensuring compatibility between packages may require manual intervention and careful oversight.
__Dependency Bloat__: npm’s default behavior of installing packages locally can lead to dependency bloat, where projects accumulate unnecessary dependencies over time. This can increase project size and complexity, potentially impacting performance and maintenance efforts.
__Security Concerns__: npm packages are not immune to security vulnerabilities, and relying on third-party code introduces potential risks to projects. While npm provides tools for auditing packages and detecting vulnerabilities, developers must remain vigilant and proactive in addressing security issues.
__Reliance on Centralized Registry__: npm’s reliance on a centralized registry for package distribution and discovery introduces a single point of failure and potential network bottlenecks. Disruptions or outages in the npm registry can disrupt development workflows and dependency management processes.
__Limited Offline Support__: While npm provides some support for offline installations through local caches, its offline capabilities are not as robust as some other package managers like Yarn. Developers working in environments with limited or intermittent internet connectivity may encounter difficulties when relying on npm.

Overall, while npm is a powerful and widely adopted package manager, developers should be aware of its limitations and consider alternative solutions or best practices to mitigate potential challenges in dependency management and project maintenance.

Yarn:

Yarn is a package manager for Node.js, developed by Facebook. It was created to address some of the limitations and performance issues encountered with npm and it focuses on performance, reliability, and deterministic dependency resolution. Let’s explore its features:

Advantages:

__Improved Performance__: Yarn is known for its faster installation times and more efficient dependency resolution compared to npm. It achieves this through parallel package installations and caching mechanisms, reducing the time and resources required for managing dependencies.
__Deterministic Dependency Resolution__: Yarn ensures deterministic dependency resolution by generating a lockfile (yarn.lock) that captures the exact versions of dependencies used in a project. This helps prevent dependency conflicts and ensures consistency across different development environments.
__Offline Support__: Yarn provides robust support for offline installations, making it suitable for environments with limited or intermittent internet connectivity. It caches packages locally, allowing developers to install dependencies without relying on an active internet connection.
__Intuitive CLI__: Yarn offers an intuitive command-line interface (CLI) with clear and concise commands for managing packages and running scripts. Its CLI is designed to be user-friendly and easy to use, streamlining the development workflow.
__Improved Error Handling__: Yarn provides detailed error messages and diagnostics, making it easier for developers to troubleshoot and resolve issues related to package installation or dependency management.
__Backward Compatibility__: Yarn maintains compatibility with the npm registry and existing npm workflows, allowing developers to transition seamlessly from npm to Yarn without disrupting their projects.

Overall, Yarn is a powerful and efficient package manager for Node.js, offering performance improvements, deterministic dependency resolution, offline support, and an intuitive CLI. It has gained significant adoption within the Node.js community and is widely used in both small and large-scale projects.

Disadvantages:

__Compatibility Issues__: Although Yarn aims for compatibility with npm, there may still be occasional compatibility issues or differences in behavior between the two package managers. This can sometimes lead to unexpected behavior or difficulties when migrating projects between npm and Yarn.
__Resource Consumption__: Yarn’s caching mechanisms and parallel installation processes can consume significant system resources, especially in projects with large dependency trees. This may impact the performance of development environments, particularly on systems with limited resources or older hardware.
__Community Fragmentation__: While Yarn has gained widespread adoption within the Node.js community, its ecosystem and community support may still be smaller and less extensive than npm’s. This can result in fewer third-party plugins, integrations, and community-driven initiatives compared to npm.
__Potential for Lockfile Drift__: Yarn generates a lockfile (yarn.lock) to ensure deterministic dependency resolution. However, if developers manually modify dependencies or update packages without updating the lockfile, it can lead to lockfile drift, where the lockfile becomes out of sync with the actual dependencies installed in the project.
__Limited Configuration Options__: Yarn’s configuration options are more limited compared to npm, which provides more granular control over package installation, registry settings, and other aspects of dependency management. Developers may find themselves lacking certain customization options available in npm.
__Maintenance Overhead__: While Yarn offers benefits such as improved performance and dependency resolution, it also introduces additional maintenance overhead in terms of managing the Yarn-specific configuration, lockfile, and dependencies. This can add complexity to project maintenance and version control.

Overall, while Yarn addresses many of the shortcomings of npm and offers significant improvements in performance and reliability, it’s essential for developers to consider the trade-offs and potential drawbacks when deciding whether to adopt Yarn for their projects.

pnpm

pnpm, short for “Performant npm,” is a package manager for Node.js applications. Unlike traditional package managers like npm and Yarn, pnpm takes a unique approach to dependency management, emphasizing efficiency, disk space optimization, and installation speed.

Advantages:

Key features of pnpm include:

__Shared Dependencies__: pnpm utilizes a shared dependency model, where common dependencies across projects are stored in a single location on disk. This approach minimizes disk space usage by avoiding duplicate copies of dependencies, leading to significant savings in storage resources.
__Efficient Installation__: By leveraging shared dependencies and efficient caching mechanisms, pnpm offers faster installation times compared to traditional package managers. It can dramatically reduce the time required to install dependencies, particularly in projects with large dependency trees.
__Deterministic Dependency Resolution__: Similar to Yarn, pnpm ensures deterministic dependency resolution by generating a lockfile (pnpm-lock.yaml) that captures the exact versions of dependencies used in a project. This helps prevent dependency conflicts and ensures consistency across different development environments.
__Reduced Network Bandwidth__: pnpm optimizes network bandwidth usage by sharing package downloads across projects. When multiple projects require the same dependency, pnpm fetches the package only once and shares it among all projects, reducing the amount of data transferred over the network.
__Improved Cache Efficiency__: pnpm’s caching mechanisms are designed to be highly efficient, reducing the need to re-download packages and improving installation speeds. It maintains a centralized cache of packages and dependencies, enabling faster installations and minimizing redundant downloads.
__Command-Line Interface (CLI)__: pnpm provides an intuitive CLI with commands for installing, updating, and managing packages. Its CLI is designed to be user-friendly and easy to use, with clear and concise syntax for executing common tasks.
__Compatibility with npm__: pnpm maintains compatibility with the npm registry and existing npm workflows, making it easy for developers to transition from npm to pnpm without disrupting their projects. It can install packages from the npm registry and works seamlessly with existing npm packages and configurations.

Overall, pnpm offers significant advantages in terms of disk space optimization, installation speed, and network bandwidth usage, making it an attractive choice for developers looking to streamline dependency management in Node.js projects. Its shared dependency model and efficient caching mechanisms make it well-suited for projects with large dependency trees and resource constraints.

Disadvantages:

__Learning Curve__: Switching from traditional package managers like npm and Yarn to pnpm may require developers to learn new commands, workflows, and concepts specific to pnpm. While pnpm’s CLI is intuitive, there is still a learning curve involved, particularly for developers unfamiliar with its shared dependency model and caching mechanisms.
__Compatibility Issues__: Although pnpm aims for compatibility with npm and Yarn, there may still be occasional compatibility issues or differences in behavior between the package managers. This can sometimes lead to unexpected behavior or difficulties when migrating projects between npm/Yarn and pnpm.
__Resource Consumption__: While pnpm’s shared dependency model reduces disk space usage, it may still consume significant system resources, especially in projects with large dependency trees. Caching dependencies and managing shared packages can require additional memory and processing power, impacting the performance of development environments.
__Lockfile Handling__: pnpm generates a lockfile (pnpm-lock.yaml) to ensure deterministic dependency resolution. However, managing the lockfile and ensuring its consistency across different environments can be challenging. Developers must be careful to avoid lockfile drift, where the lockfile becomes out of sync with the actual dependencies installed in the project.
__Community Support__: While pnpm has gained adoption within the Node.js community, its ecosystem and community support may still be smaller and less extensive than npm and Yarn. This can result in fewer third-party plugins, integrations, fewer documentation resources and tutorials available, and community-driven initiatives, limiting the available resources and support for pnpm users.

Overall, while pnpm offers compelling advantages in terms of disk space optimization and installation speed, developers should carefully weigh the trade-offs and consider the potential drawbacks when deciding whether to adopt pnpm for their projects.

Structure of the projects:

__npm__: When using npm install, the package-lock.json is created, and generates the node_modules folder. You can manually place a .npmrc configuration file at the root level.

__Yarn__: Similarly, Yarn generates both a yarn.lock file and a node_modules folder. You can also configure your yarn with a .yarnrc file; Yarn also acknowledges .npmrc files.

One problem with the npm and yarn approach, is that packages were copied several times to satisfy multiple dependencies. pnpm solved this issue without flattening the dependency tree. Each package’s dependencies are grouped in a node_modules folder and symlinks are used to group dependencies together, so the directory tree is flat.

__pnpm__: In contrast, pnpm diverges and doesn’t create a flattened dependency tree.
Upon installing dependencies with pnpm i, a package.json file is generated alongside a node_modules folder. However, the structure of the node_modules directory differs significantly from that of npm and Yarn due to pnpm’s content-addressable storage approach.

Which one should you choose?

Ultimately, the best package manager for your project depends on your specific requirements, preferences, and willingness to adapt to new workflows. Experimentation and careful consideration of the trade-offs involved will help you make an informed decision that aligns with your project’s goals and constraints.

According to some advantages and disadvantages previously mentioned, some further research and personal opinion, we can see a comparative chart below, number 1 meaning the lowest score and number 3 the highest score:

Even though npm and yarn are more popular, pnpm seems to have a promising future. Let’s check some benchmarks of JavaScript Package Managers:

Speed: pnpm is three times faster and more efficient than npm, and with both cold and hot cache, pnpm is faster than Yarn.

Source: Benchmarks of JavaScript Package Managers

Security: Pnpm, like yarn, has a special file with the checksum of all the installed packages. This ensures the integrity of all the installed packages before their code is executed. Regarding npm, there have been some security vulnerabilities that have directly affected many projects due to the way npm handles bad packages.
Disk space efficiency: pnpm employs a content-addressable file system to store packages and dependencies on disk. This means that identical packages are not duplicated. Even with varying versions of the same package, pnpm intelligently maximizes code reuse. For instance, if version 1 of a package consists of 500 files and version 2 adds just one more file, pnpm will not duplicate the original 500 files for version 2. Instead, it will establish a hard link to the existing 500 files and only write the new file. In contrast, npm would duplicate the original 500 files for version 2. This distinction becomes significant in large monorepo projects where a package is utilized by numerous others, potentially saving substantial disk space when using pnpm.
Lock files: Yarn generates a yarn.lock file to ensure that all team members are using the same package versions. This helps prevent “works on my machine” issues. Like Yarn, pnpm uses a pnpm-lock.yaml file to ensure consistent dependency versions. npm can present inconsistencies in package-lock.json which can be annoying and present issues for developers.

Migrating from npm/Yarn to pnpm:

If your projects use npm or yarn, then migrating to pnpm will not be very difficult. Here is a comparison of commands between npm, yarn, and pnpm.

npm command
Yarn command
pnpm equivalent

npm install
yarn
pnpm install

npm install [pkg]
yarn add [pkg]
pnpm add [pkg]

npm uninstall [pkg]
yarn remove [pkg]
pnpm remove [pkg]

npm update
yarn upgrade
pnpm update

npm list
yarn list
pnpm list

npm run [scriptName]
yarn [scriptName]
pnpm [scriptName]

npx [command]
yarn dlx [command]
pnpm dlx [command]

npm exec
yarn exec [commandName]
pnpm exec [commandName]

npm init [initializer]
yarn create [initializer]
pnpm create [initializer]

Source: Why you should prefer using pnpm over npm and yarn?

Real Time Monitoring with N|Solid

Which package do you use? Let us know on Twitter @NodeSource!

Using N|Solid, you can get real time insights and keep your apps secure, providing developers the tools to optimize their Node.js applications and enhance efficiency. You can also check the performance of your projects with different package managers.

Connect with us on Twitter @NodeSource, LinkedIn, and to stay updated with the latest from N|Solid.

Postgres in TypeScript

#​677 — February 29, 2024

Read on the Web

JavaScript Weekly

PGlite: PostgreSQL in WebAssembly (and TypeScript) — People have brought Postgres into the browser before, albeit atop a Linux VM WASM layer. PGlite, however, packages a WASM build of Postgres into a TypeScript library that can be run in the browser or on Node.js or Bun and is only 3.7MB gzipped. You can play with a live deployment here.

ElectricSQL / Neon

JSR: What We Know So Far About Deno’s New JS Package Registry — The Deno team is cooking up JSR (still behind a waitlist), a new JavaScript package registry (not merely a package management tool, like pnpm or Yarn) to address various npm limitations, including for Node users who don’t even plan to use Deno.

Sarah Gooding (Socket)

Practice Your JavaScript through Vanilla JS Projects — Join Anjana Vakil for this extensive video course on vanilla JavaScript projects. Tackle real-world tasks and learn how to use asynchronous JS, Browser APIs, the DOM, Node.js, GitHub Actions, and more.

Frontend Masters sponsor

Parcel v2.12.0: Now with Bun-Style Macros — The popular zero-config build tool introduces support for bundle-time macros, such as those offered in Bun. The value returned by a macro is inlined into the bundle in place of the original call. There’s also a new online REPL where you can play with Parcel in the browser with support for most of Parcel’s features.

Parcel.js

IN BRIEF:

TypeScript 5.4 RC has been released, packing lots of small changes, as well as Object.groupBy, Map.groupBy, and type narrowing enhancements.

Christopher Chedeau (aka Vjeux) has written about his 12 years at Meta, including being involved in the early days of both React and React Native.

A summary of recent updates to the V8 JavaScript engine.

🇪🇺 Fed up with Apple’s nonsense around removing PWA support in the European Union? Open Web Advocacy has an open letter you can co-sign.

RELEASES:

Express.js 4.18.3 – The first release in sixteen months. 😁

Deno 1.41 – Now with much smaller deno compile binary sizes, official Linux ARM64 binaries, and improvements to Node.js compatibility.

Playwright 1.42 – Browser remote control and runner toolkit.

Babel 7.24.0 – Supports importing JSON modules and updates its Decorators implementation.

TinyMCE 7.0 – Rich text editor component – now GPL licensed.

Frontend Developer 🔝 (Fully Remote 🌐 Or In Our Office In Stockholm, Sweden 🇸🇪) — Do you get excited when you hear Next.js, Supabase, GraphQL? Let’s talk.

ZCO Stockholm job

📒 Articles & Tutorials

Reporting Core Web Vitals with the Performance API — The Performance API provides an interface to ways to measure and evaluate Web performance metrics from JavaScript. Geoff demonstrates how to use its capabilities to do your own performance reporting.

Geoff Graham

A Fun Line of JavaScript Code — Namely, using Promise.race to search through audio files forwards and backwards at the same time and stop as soon as the relevant metadata is found.

David Bushell

How StackBlitz Built a T-Shirt That Renders Itself — How we designed a t-shirt using valid JavaScript that is also the source code of the image itself (and how you can get one).

StackBlitz sponsor

Next.js vs. Remix: A Developer’s Dilemma — Compares a variety of areas, from how various techniques are implemented through to deployment, support, and popularity.

Chetan Gawai

Why Does is-number Have 70+ Million Weekly Downloads? — In part, it’s included in a chain of dependencies used by a very popular project.

Shubham Jain

17 Equations That Changed the World – Rewritten in JavaScript — This is quite neat if you enjoy a bit of math.

RunJS

How to Create Sidebar Navigation with Astro, Tailwind CSS and Alpine.js

Michael Andreuzza

▶  Use AWS Amplify Gen 2 to Create a Full Stack App with Type Safety

Erik Hanchett (AWS)

A Look into JSDoc as an Alternative TypeScript Syntax

Alex Harri

🛠 Code & Tools

PrimeVue 3.49.0: Vue UI Component Library — A mature, rich set of open source UI components for Vue developers we first mentioned a few years ago. This new release includes components to enter one time passwords and a ‘stepper’ for wizard-style workflows. There’s also a new optional declarative syntax for using components that makes their code easier to read and write.

PrimeTek

Authentication & User Management for the Modern Web — Add authentication & user management easily with Clerk using our Quickstart guides. Purpose-built for React & Next.js.

Clerk sponsor

Waku: A Minimal Server-Side React Framework — From the maintainer of Jotai, Valtio, and Zustand, Waku is a lighter alternative to something like Next.js but that still opens up the potential of server components, shared components, and elegant routing, in a simpler, easier to apply way.

Daishi Kato

Embla Carousel 8: Carousel with Fluid Motion and ‘Swipe Precision’ — Carousels are a popular, though often maligned, UI element, but the examples work pretty well for us. Library agnostic, but has easy integrations for React, Solid, and Angular, if you need them. The v8.0 release notes touch on many new features.

David Jerleke

Readability.js: Extract the Readable Content from an HTML Document — A standalone version of the library used to power Firefox’s Reader View. It’s been a few years since we’ve linked to this, but it continues to be improved.

Mozilla

Viz.js: Work with Graphviz in the BrowserGraphviz is a suite of open source graph drawing tools of some 30+ years’ vintage. Viz.js is a WebAssembly Graphviz build that brings some of its functionality into the browser, as seen in the homepage’s live demo (above). GitHub repo.

Michael Daines

🎨 Vue Color Wheel: A Wheel-Style Color Picker for Vue 3 — Far from a new idea, but elegantly demonstrated on its homepage. Coloris is a nice, vanilla alternative in this space, if the wheel view isn’t a necessity.

Robert Shaw

Neon is Postgres from the Future — Scales to zero when idle, autoscales based on load, provisions instantly. Generous free tier – no credit card required.

Neon Serverless Postgres sponsor

WXT: Next-Gen Web Extension Framework — A framework for creating cross-browser extensions. You can target Chrome, Firefox, Edge and Safari. Plasmo is another option in this space.

WXT

React Strict DOM (RSD) – An experimental integration of React DOM and StyleX to standardize the development of styled React components, both web and native.

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

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

Jotai 2.7 – Simple, flexible state management for React.

🎹 JZZ 1.8 – MIDI library for Node and browsers.

RxDB 15.10 – Offline-first, reactive database.

Bun 1.0.29 – Minor enhancements.

A big update for ECharts

#​676 — February 22, 2024

Read on the Web

JavaScript Weekly

📊 Apache ECharts 5.5: The Powerful Visualization LibraryECharts’ big selling point, beyond being a well supported Apache-backed project, is its balance of power and simplicity. You can do a lot with it (check out the many examples here) without the code becoming complex. v5.5 enhances its ESM support, adds server-side rendering support, and lets you make incomplete pie charts.

Apache Software Foundation

💌 If you need to be convinced further, check out Alice GG’s Love Letter to Apache ECharts.

📣 The React Team Shares What It’s Been Working On — Work on React Compiler has progressed with it now powering Instagram’s prod site (‘React 19 Will Be Compiled’ goes into depth on what the compiler means for most React devs). We also learn React 19 is on the way and will include breaking changes to support things like Web Components.

The React.js Core Team

Register for POST/CON 24! Coming April 30-May 1 — Join hundreds of developers in San Francisco on April 30 and May 1 for hands-on API workshops, presentations from industry leaders, and a big reveal of Postman product updates.

Postman sponsor

Redwood v7.0: The React + GraphQL App FrameworkRedwood is a full-stack Web framework that takes an opinionated approach, bringing together React, GraphQL, Prisma, and TypeScript, with a focus on building complete apps rapidly. v7 includes a new observability tool called Redwood Studio, realtime GraphQL features, and more.

RedwoodJS Community

Node.js’s 2023 Summarized — Rafael, of the Node.js TSC and Fastify core team, shares a useful update on the evolution of Node.js over the past year, how the team ensures Node is well tested and reliable, changes to Node’s vendor dependencies (of which it gained three in 2023), as well as enhancements to Node’s security and Web presence.

Rafael Gonzaga

IN BRIEF:

🐢 The Node.js project has unveiled Rocket Turtle, its new mascot!

1 in 5 of the most popular, ‘high impact‘ packages on npm now include ESM.

👾 A ‘Frogger’ game in 256 bytes? Yes, really. Be sure to View Source.

A visualization of Math.random() distributions of various kinds.

The Deno team has revamped its onboarding tutorials for Deno Deploy, if you want to experiment with JavaScript at the edge.

RELEASES:

Bun 1.0.28 – Mostly a bugfix/stability release.

Puppeteer 22.2 – Control Chrome with Node.js. Now on Chrome 122.

Deno 1.41, Rollup 4.12.0, Jest Puppeteer 10.0

📒 Articles & Tutorials

A Guide to Using localStorage in Modern Apps — localStorage has been supported in most browsers for fifteen years plus now, so it’s a reliable way to store data client-side, though there are still situations where you wouldn’t want to use it. A good primer, but with a focus on alternative options.

RxDB Project

How to Set Up a Basic Node Server App with TypeScript in 2024 — Popular dev educator Jason with a quick tutorial on how to set up a modern Node project with TypeScript, live reloading, and loading in environment variables.

Jason Lengstorf

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

Userfront sponsor

▶  Pac-Man in JavaScript in 1 Hour — I felt old when Ania said “if you’ve never played Pac-Man before..” 😅 – nonetheless, she’s back with another of her fantastic, thorough walkthroughs.

Ania Kubów

HTMX vs React: A Complete Comparison — It strikes me as tricky to compare two very different approaches to what will often be distinct use cases, but undoubtedly people will want to weigh them up against each other, so here you go.

Antonello Zanini and Dan Ackerson

How Qwik Differs From React HydrationQwik works quite differently to the React approach.

Paul Scanlon (The New Stack)

An Ultimate Vim Vue Setup — How to set up Vue/Nuxt autocompletion for Vim/Neovim.

Nikola Đuza

🛠 Code & Tools

Perspective 2.8: Fast Streaming Data Visualization via WebAssembly — A data visualization component, well-suited for large and/or streaming datasets, that can be used from both JavaScript and Python. It’s been fun watching this library improve over the past couple of years. The docs have been improved a lot. GitHub repo.

Perspective Authors

Hookdeck: The Amazon EventBridge Alternative — Receive, send, and route messages across your event-driven applications with an event gateway for engineering teams.

Hookdeck sponsor

Vuestic Admin: A Vue 3 Admin Template — A recently redesigned, modern admin template using Vue 3, Vite, Pinia, and Tailwind CSS. Check out the live demo or GitHub repo.

Epicmax LLC

🗓 Tommy’s Inclusive Datepicker: A Human-Friendly Date Picker — Try out this Web Component on the homepage itself. The user can type natural language phrases like “Next Friday” or “in 30 days” and the picker will move to the correct date. GitHub repo.

Tommy Feldt

Skeleton: Reactive, Accessible Svelte UI Toolkit — A cool feature of the homepage is you can try out the different built-in themes, including dark and light modes, using a drop-down at the top.

Skeleton Labs

Dax: Cross-Platform Shell Tools for Node — Similar to Google’s zx but uses a cross-platform shell with common built-in commands so more code will work across platforms. Dax was originally written for Deno but now supports Node too.

David Sherret

js-tokens 9.0: A Tiny JavaScript Tokenizer — A regex-powered ‘almost spec-compliant’ JavaScript tokenizer.

Simon Lydell

A Sudoku Solver Implemented in the TypeScript Type System? — An appropriate use of the 🤯 emoji here, I think!

Roy Li

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

Forge 7.3 – Quickly scaffold an Electron project with full build pipeline.

eslint-plugin-check-file 2.7 – Enforce consistent file/folder naming.

React Native Boilerplate 4.1 – A starter template for RN apps.

React Uploady 1.8 – Components and hooks for file uploading.

d3-graphviz 5.3 – Graphviz DOT rendering and animated transitions.

📱 React Native Vision Camera 3.9 – Powerful camera control.

Peaks.js 3.3 – BBC-created audio waveform UI component.

AdminJS 7.6 – Automatic admin interface for Node apps.

Node.js 2023 Year in Review

Two months into 2024, I’ve decided to summarize the achievements in the Node.js space from 2023. As always, this list is curated by me, so I may overlook some pull requests due to the vast amount of work completed by Node.js collaborators and areas where I need more context, such as WASI.

Node.js is rapidly evolving, and it can be challenging for regular users to stay updated with the latest changes. Even as someone who works on the project, it’s possible to overlook certain commits. Therefore, this article aims to spotlight major changes and discussions occurring within the Node.js landscape in 2023.

For reference, 2641 commits were made to nodejs/node#main in 2023. Although this information might seem more trivial than crucial, I find it interesting to compare historical data. For instance, this is the commit count on main for the past 10 years.

Between Jan 1 2023 ~ Jan 1 2024 = 2641
Between Jan 1 2022 ~ Jan 1 2023 = 2629
Between Jan 1 2021 ~ Jan 1 2022 = 2683
Between Jan 1 2020 ~ Jan 1 2021 = 3390
Between Jan 1 2019 ~ Jan 1 2020 = 3953
Between Jan 1 2018 ~ Jan 1 2019 = 4720
Between Jan 1 2017 ~ Jan 1 2018 = 4609
Between Jan 1 2016 ~ Jan 1 2017 = 3081
Between Jan 1 2015 ~ Jan 1 2016 = 2261
Between Jan 1 2014 ~ Jan 1 2015 = 1052

💡 I use a tiny project I created called nodejs-stats to retrieve such information.

It’s quite impressive to see that a mature project such as Node.js keeps evolving significantly over the years. Unfortunately, I don’t have historical data, but I strongly suspect Node.js welcomed a significant number of first-time contributors this year. This is possibly due to initiatives like Grace Hopper’s Day and various workshops. For instance, the ‘Your First Node.js Contribution’ workshop was conducted by my team at NodeConfEU 2023. I’m confident other members also consistently assist new contributors to the project — If you are looking forward to giving your first contribution to the Node.js project, feel free to contact me. I’m doing live streams assisting people through the Node.js codebase.

Node.js Release

In 2023, 102 releases from different release lines were made (including security releases)

$ git log –all –grep=’, Version’ –pretty=format:”%cs,%aN,%s” –since=’Jan 1 2023′ –before=’Jan 1 2024′ | wc -l
102

The year started with 4 active release lines:

Node.js 14
Node.js 16
Node.js 18
Node.js 19

Node.js 14, 16 and Node.js 19 are now End-of-Life(EOL) and Node.js 18 is under Maintenance Mode, meaning there are no more regular releases to this version.

The year finalized with the following active release lines:

Node.js 18 (Maintenance)
Node.js 20 (LTS)
Node.js 21 (Current)

Hence, if you aren’t using any of these versions, please, upgrade.

During the Node.js Collaborator Summit in Dublin (NodeConfEU), we analyzed the download stats of Node.js binaries and it illustrates our opinion that users don’t update their binaries as fast as they must.

As the graph shows, even an EOL version still receives a significant number of downloads and this is dangerous to Node.js users as they will use a vulnerable version at some point. Hence, one theory that comes to our mind is that our release schedule is too fast. A new proposal is under discussion and still needs to be evaluated by the releasers team, but it suggests reducing the major release to one per year instead of two per year.

When examining the graph above, particularly focusing on the y-axis, one might infer that Node.js downloads reached a peak of approximately 60 million on March 23. However, this interpretation is misleading as it does not account for NodeSource distribution statistics, which primarily consist of production binaries and do not include downloads from inactive release lines, such as Node.js 8, 10, 12, and so on. To gain a deeper understanding of Node.js distribution mechanisms, I encourage you to explore the intricacies outlined in the “Node By Numbers 2021~2022“ article, as delving into this topic exceeds the scope of this article.

Active work on the Canary-In-The-Gold-Mine (CITGM)

@nodejs/releasers play one of the most crucial roles in the Node.js space. They ensure the reliability of the versions you receive on your machine. To achieve this goal, we utilize a comprehensive suite of tests across all supported architectures, and we run specific tests depending on the changes, such as V8. Additionally, for each release, we execute CITGM (Canary-In-The-Gold-Mine), which essentially fetches all modules listed in lookup.json and runs their test suite with the new binary prospect. If any issues arise, we investigate them, and sometimes, we reach out to the module author for guidance.

CITGM, however, requires a powerful set of machines to run all tests properly. Unfortunately, we are a bit limited in that regard, leading to some concurrency errors between tests. This is because certain tests need to run in parallel; otherwise, CITGM would take years to finish. Another challenge is ensuring that the modules listed inside lookup.json are up-to-date. Occasionally, a module becomes archived or may never support newer versions of Node.js, or they may simply be unreliable (which is quite common).

Therefore, it’s not uncommon to see initiatives like:

Declaring bankruptcy of CITGM modules
Drop skipped modules

Otherwise, we might find ourselves dealing with an unreliable CITGM, thus leaving us blind to potential breaking changes.

The new direction of the Node.js project

To clarify, I want to emphasize that I am not speaking on behalf of the project; this article represents solely my perspective.

Having been a member of the project for quite some time, and since 2022, a member of the Technical Steering Committee (TSC), I’ve observed that the project is now more susceptible to major changes than ever before. As a result — not so related — new dependencies are being integrated into the core, and new built-in modules are being developed. This broadens the scope of Node.js as a platform. However, in my view, this new approach may lead to concerns regarding maintenance and potential attack vectors. On the flip side, it also empowers developers and diminishes the risk of using malicious libraries, despite the performance implications of executing operations on the native side. For your reference, I’ve been closely monitoring the binary size of Node.js across various versions, and it’s evident that the addition of new dependencies and features directly impacts the binary size.

Unless you’re operating within an exceptionally constrained environment, 100MiB shouldn’t raise significant concerns.

New Dependencies

Node.js vendor dependencies into its binary:

{
node: ‘21.6.0’,
acorn: ‘8.11.3’,
ada: ‘2.7.4’,
ares: ‘1.20.1’,
base64: ‘0.5.1’,
brotli: ‘1.1.0’,
cjs_module_lexer: ‘1.2.2’,
cldr: ‘44.0’,
icu: ‘74.1’,
llhttp: ‘9.1.3’,
modules: ‘120’,
napi: ‘9’,
nghttp2: ‘1.58.0’,
nghttp3: ‘0.7.0’,
ngtcp2: ‘0.8.1’,
openssl: ‘3.0.12+quic’,
simdjson: ‘3.6.3’,
simdutf: ‘4.0.8’,
tz: ‘2023c’,
undici: ‘5.28.2’,
unicode: ‘15.1’,
uv: ‘1.47.0’,
uvwasi: ‘0.0.19’,
v8: ‘11.8.172.17-node.19’,
zlib: ‘1.3.0.1-motley-40e35a7’
}

In 2023, 3 new dependencies were released to Node.js:

Ada – A WHATWG-compliant and fast URL parser written in modern C++”

simdutf – Unicode routines (UTF8, UTF16, UTF32) parser

simdjson – A library that uses commonly available SIMD instructions and micro parallel algorithms to parse JSON efficiently

All these libraries are focused on performance, enabling Node.js to reach new peaks of improvements as you will see in the “State of Node.js Performance 2024”.

The cost of OpenSSL 3.0.x over QUIC

Since version 16, Node.js uses a fork of openssl from quictls team. This was required as an initial step to bring QUIC protocol to Node.js. However, OpenSSL version 3.0.x is significantly slower than OpenSSL 3.2.x. There are two points where moving to OpenSSL 3.2.x will be difficult from a Node.js perspective:

It doesn’t fully support QUIC — Although Node.js doesn’t ship QUIC support (yet).

OpenSSL 3.2.x isn’t a Long-Term-Support (LTS) line — Having a release line that might contain a vulnerability after its End-of-Life is a no-go for LTS lines in Node.js.

If want some context, check #51152. In terms of performance, you can use my repository nodejs-bench-operations as a reference for crypto operations:

Node.js 16.20.2 – OpenSSL 3.x ops/sec samples
crypto.createVerify(‘RSA-SHA256’) 30,337 98
crypto.verify(‘RSA-SHA256’) 29,001 94

Node.js 18.18.2 – OpenSSL 1.x ops/sec samples
crypto.createVerify(‘RSA-SHA256’) 3,599 86
crypto.verify(‘RSA-SHA256’) 3,638 87

Constantly Performance Evolution

As mentioned in the “State of Node.js Performance 2023”, Node.js continues to evolve steadily in terms of performance. This section will not delve into specific numerical data (which will be provided in detail in the State of Node.js Performance 2024), but rather highlight initiatives and PRs that have demonstrated clear advancements in the performance realm.

One notable improvement is the upgrade of libuv to version 1.45.0. In this release, IO_URING was enabled on Linux, resulting in an 8x throughput increase for file system operations such as read, write, fsync, fdatasync, stat, fstat, and lstat. More details can be found in the corresponding pull request: libuv/libuv#3952.

Additionally, in 2023, we introduced Ada as a new URL parser for Node.js, which is now available in all active release lines (18, 20, and 21). Further information can be found in the pull request: nodejs/node#46410.

Two important regressions were identified over 2023:

AsyncHooks
WebStreams

These features are crucial for certain use cases in Node.js. For example, if you utilize fetch(), you might rely on WebStreams, or if you employ any Application Performance Monitoring (APM) tool, you should be leveraging AsyncHooks via AsyncLocalStorage.

An initiative that started in January, documented in issue #46265, proposes an alternative implementation of AsyncLocalStorage without relying on AsyncHooks, which was identified as a bottleneck at the time. Some related work has been carried out in pull requests #46387 and #48528.

WebStreams were identified as a bottleneck in the fetch function in 2022, as highlighted in this issue comment. Since then, we’ve been consistently enhancing its usage in undici through several PRs, such as:

nodejs/node#46086
nodejs/node#47956

For those interested in monitoring the performance of Node.js, I highly recommend keeping an eye on the nodejs/performance repository and attending their meetings. Be sure to follow the performance label to stay updated on PRs like nodejs/node#49745 and nodejs/node#49834, which aim to enhance the performance of regular Node.js streams.

A native benchmark module to Node.js

In 2023, Node.js almost got a built-in benchmark module. I wrote a pull request with a colleague (Vinicius Lourenco) that adds an experimental benchmark module to Node.js: require(‘node:benchmark’)

While this pull request got significant traction, we didn’t pursue the work for some reasons:

Benchmarks are hard, and micro-benchmarks are even harder. They are hard to evaluate, and hard to prove their accuracy since there are different strategies to measure them — See my Preparing and Evaluating Benchmarks article for more context — At the time I had limited bandwidth to work on different areas of Node.js and I couldn’t extend the research on this topic.
Some Node.js collaborators shared some concerns and as I said previously, at the time, I didn’t have much bandwidth to elaborate and jump into a deep conversation.

However, it doesn’t mean we gave up! We’ve published the module as bench-node on npmjs — I know, we didn’t find a better name yet. Check it out and give a star ⭐
https://github.com/RafaelGSS/bench-node/.

Enhancing Node.js Security

Security is the area I have spent most of my time in 2023. I had a contract with OpenSSF to work full-time on the development and improvement of the security of Node.js. In this section, I will show briefly all the topics we’ve discussed, features implemented, workflows and so on. It’s really important to say a big thank you to everyone on the Node.js Security Team for helping out with past and current projects. And a shutout to the Node.js Triage team for helping me go through all the HackerOne reports. A special thank you goes to Tobias Nießen for working so hard to find and fix problems in the core of Node.js.

The Node.js Permission Model

Let’s start with probably the major security achievement of 2023 in my — completely biased — opinion. The Node.js Permission Model. This initiative started a long time ago with Anna Henningsen and James Snell, but it wasn’t ready yet and I’ve re-implemented it in 2022/2023. If want to understand the intrinsic behind this feature, I gave a talk at NodeConf EU about it: The Journey of the Node.js Permission Model.

Technically, this experimental feature allows you to restrict access to environment resources such as:

File system (more specifically, fs module) – read/write
Inspector protocol
Worker threads
Child process and
Native add-ons

The usage is quite simple, start the Node.js process with –experimental-permission and pass the –allow-* flags. For example, I want to give read-only access to the entry point of my application

$ node –experimental-permission –allow-fs-read=./index.js index.js

Hence, if you attempt to read/write from other paths it should throw an error:

// index.js
const fs = require(‘fs’)
const data = fs.readFileSync(‘/etc/passwd’)
console.log(data.toString())

node:fs:581
return binding.open(
^

Error: Access to this API has been restricted

at Object.openSync (node:fs:581:18)
at Object.readFileSync (node:fs:460:35)
at Object. (/home/rafaelgss/index.js:3:17)
at Module._compile (node:internal/modules/cjs/loader:1378:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1437:10)
at Module.load (node:internal/modules/cjs/loader:1212:32)
at Module._load (node:internal/modules/cjs/loader:1028:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:142:12)
at node:internal/main/run_main_module:28:49 {
code: ‘ERR_ACCESS_DENIED’,
permission: ‘FileSystemRead’,
resource: ‘/etc/passwd’
}

Node.js v21.6.1

Furthermore can be found in the official documentation.

Handling more Security Releases

In 2023, we’ve released more security releases, mostly due to the fact we are more proactive in terms of third-party CVEs. In 2022, several initiatives were created by the Security Team as described by Alpha-Omega Node.js Report 2022 and the result of these initiatives are shown in 2023. Initiatives such as automation of updates, and automation of Node.js release impacts our team’s time-to-action.

With the recent addition of the Permission Model, we have noticed people also discovered another experimental security feature that has existed in Node.js since version 11.8.0. The policy mechanism. This feature fits in what we call: module-based permission and we have fixed several vulnerabilities in this feature over 2023.

February 2024 Security Release
October 2023 Security Release
August 2023 Security Release
June 2023 Security Release

Still, on the reports side, some clarifications were made in our Threat Model. Experimental features such as the Permission Model and Policy can attach severity at the same level as any stable feature. Therefore, when reviewing a Node.js Security Release, check if the vulnerability affects you. Very often we are patching a ‘High’ vulnerability that affects only users of that feature.

Website Update

In 2023, there was talk about giving the Node.js website a fresh look, as discussed here. We talked about it a few times in TSC meetings and also shared the idea at Node.js Collab Summits. It’s a big job that involves many steps, and I want to give a big shout-out to the whole @nodejs/website for their hard work on this. See below:

Upcoming Download page:

Draft PR: nodejs/nodejs.org#6353

Features

Several features were released in 2023. It’s quite difficult to iterate and elaborate on each one of them in a single article. Therefore, this article will list some important features that have arrived and feel free to dig into it more!

Single Executable Apps (experimental) – This feature has landed on Node.js 19 but got more eyes after Node.js 20.0.0 release. This feature allows the distribution of a Node.js application conveniently to a system that does not have Node.js installed. It’s important to mention, that we are still developing it, so it’s also an experimental feature that I highly suggest you try out!
Built-in .env support (experimental) – Released with Node.js 20.6.0, this feature aims to provide an official mechanism to read environment variables from a configuration file. It was a common approach to rely on the dotenv package or similar. After this version, you can use it directly on Node.js without the need to install a new package for that. Furthermore can be found in the —env-file docs.
WebSocket Client (experimental) – The Node.js 21.0.0 release included another experimental feature. A built-in WebSocket Client (behind a flag) arises with this release. This is enabled through the flag: –experimental-websocket and follows the WHATWG WebSocket Spec.
Test runner (stable) – Although this feature wasn’t released in 2023, in the last year several features were included in this API. Including marking this module as stable.
Support to function mocking was added in #45326.
Support for time (MockTimers API) mocking was added in #47775.
Test runner reports in #45712.
Support to shards in #48639.
And more! Check the API documentation to discover this feature capability.
In the diagnostics field, some important PRs were added to the core:
Support to GC Profile (#46255). With this PR you can use the v8.GCProfiler to retrieve metrics of the Garbage Collector (GC). This was available only through perf_hooks, this API provides a direct way to retrieve this information.
New Tracing Channel API through dianostics_channel (#44943) – It provides a new API to trace operations (sync/promises) through a collection of channels to express a single traceable action. This is a long-term initiative that aims to provide necessary observability to Node.js applications without sacrificing performance and reliability by monkey-patching internals.
Support to V8 Maglev Compiler (Reference: #50690) – V8 released a new compiler called Maglev between 2022 and 2023. This was first supported in Node.js through a build flag (—v8-enable-maglev) in #50692, then we enabled it by default on January 24 (#51350). However, it’s a semver-major PR, which implies you only will receive this PR that enables it by default in Node.js 22 – Scheduled for 2024-04-23.
Some important updates were made to HTTP and WHATWG Spec :
We have moved fetch stability to: ‘stable’.
We have enabled the autoSelectFamily by default and it caused some systems to break (semver-major). Reference: https://github.com/nodejs/node/pull/46790
Duplex.from() now supports WebStreams. See: https://github.com/nodejs/node/pull/46190
finished() was implemented in Readable and Writable Streams. See: https://github.com/nodejs/node/pull/46205
In 2022, after a Performance analysis on why fetch is slow, we have identified WebStreams as one of the major bottlenecks of this HTTP Client. In 2023, several updates were made to make WebStreams more efficient. Including the re-usage of state errors, which improved the performance of fetch by 23% (in a specific benchmark). See https://github.com/nodejs/node/pull/46086

TC39 adds a new stage for ECMAScript proposals

#​675 — February 15, 2024

Read on the Web

JavaScript Weekly

Tempo: An Easier Way to Work with Dates — We think they nailed their own summary: “A collection of utilities for working with the native Date object — an important distinction from other libraries that provide custom date primitives. Under the hood, Tempo mines Intl.DateTimeFormat to extract complex data like timezones offsets and locale aware date formats, giving you a simple API to format, parse, and manipulate dates.” Fantastic docs, too.

FormKit

LLRT (Low Latency Runtime): Amazon’s New JS Runtime — Amazon has open sourced a runtime entirely focused on fast startups – something that’s useful for ephemeral use cases like serverless (*cough* AWS Lambda). It uses Fabrice Bellard’s QuickJS as the underlying engine, so has almost full ES2023 spec support out of the box.

Amazon Web Services Labs

Effortless GraphQL with Hasura and TypeScript Functions — Hasura connects to your data sources, generates a GraphQL API, and deploys it globally — instantly. But, what if you could also write and use TypesScript functions directly in your GraphQL API? With Hasura, you can. Check it out on GitHub.

Hasura sponsor

The Node.js Valentine’s Day Security Releases — Security releases had been expected to land in the past week for Node and they’re now here as v21.6.2 (Current), v20.11.1 (LTS), and v18.19.1 (LTS). They include fixes for a variety of vulnerabilities, including some high severity ones involving HTTP-based DoS attacks and privilege escalation.

Rafael Gonzaga and Marco Ippolito

IN BRIEF:

You know how features and proposals for the ECMAScript language pass through a multi-stage process with the TC39 committee? There’s a new stage: stage 2.7! The new stage is what 3 used to be with 3 now having extra testing requirements.

Talking of TC39, here’s the latest state of different proposals covered at the recent 100th TC39 meeting.

There have been some updates on the state of Express and suggested plans for Express 5.0, 6.0 and 7.0.

Google has unveiled the newest version of its Gemini AI model. Of particular note is its support for 1 million tokens of context, as shown in ▶️ this example working upon the entirety of three.js’s source code (~820k tokens).

A new JavaScript registry is on the way called jsr. Waitlist only, for now.

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

RELEASES:

Vue.js DevTools 6.6 – Now with a new UI.

Hono 4.0 – The lightweight, runs-anywhere Web framework takes a big step forward.

JointJS 4.0 – The powerful interactive diagramming/flowchart library now has no external dependencies.

Astro 4.4, Angular 17.2, Billboard.js 3.11

📒 Articles & Tutorials

Union, Intersection, Difference, and More Coming to JavaScript SetsSet was introduced back in ECMAScript 2015 (a.k.a. ES6) but only had some basic methods built-in. Phil looks at what sets can do and what new features are on the way.

Phil Nash

Immutable Array Updates with Array.prototype.with — How to use this new, widely supported method to update an array without mutating the original array.

Jad Joubran

Intro to Error and Performance Monitoring with Sentry — Track, trace, debug and resolve JavaScript errors across platforms. Are your releases that easy? Join us live.

Sentry sponsor

▶  So You Think You Know Git.. — GitHub co-founder Scott Chacon gave a spirited talk at FOSDEM 2024 digging into many interesting parts of git, as well as a few GitHub bits. If you’d prefer to read rather than watch, he has some blog posts covering it all too.

Scott Chacon

An Example of Creating a React App with Google Sheets as a Backend — Not as unorthodox an approach as you might think.

Musthaq Ahamad

Safely Accessing the DOM with Angular SSR — Learn how to safely use the DOM together with SSR in Angular.

Gerald Monaco (Google)

🛠 Code & Tools

Peggy 4.0: A Parser Generator for JavaScript — Produces fast parsers with good error reporting. Use it to process complex data or computer languages and build transformers, interpreters, compilers, and similar tools. The online demo is pretty effective. The official successor to PEG.js.

Majda, Hildebrand, and Contributors

vue-metamorph 1.0: A Codemod Framework for Vue.js Projects — A developer needed to make a large number of small changes to a variety of Vue components and built this tool to help. GitHub repo.

UnrefinedBrain

canvas-size 2.0: Determine Max Area, Height, Width, and Custom Dimensions of HTML Canvases — The Canvas element is broadly supported across browsers but there are differences in its size limitations, which this library can determine for you. GitHub repo.

John Hildenbiddle

Securing Your APIs: Verifying API Keys And Using Scopes — You have APIs. You need to make sure you know who is calling them and what they can do. What are your options?

FusionAuth sponsor

txiki.js: A Small Yet Powerful JavaScript Runtime — Standing on the shoulders of QuickJS and libuv.

Saúl Ibarra Corretgé

Svelte Stepper: Build Animated Stepped Flows with Svelte — You can add and customize props on the component to adjust the number of steps and transition duration, among other features. See a simple but neat demo here.

Jason Efstathiou

🙈 NSFW.js 3.0 – Client-side NSFW image detection via TensorFlow.js.

🗓 React Big Calendar 1.10 – GCal/Outlook-like calendar component.

Tedious 17.0 – TDS module for connecting to Microsoft SQL Server.

Inspire Tree 7.0 – Perf-driven headless tree component.

Heat.js 2.1 – Render customizable heat maps.

Mineflayer 4.19 – Create Minecraft bots in JavaScript.

Spacetime 7.6 – Lightweight timezone library.

React Tags 6.9 – Tagging component.

Gorillas

#​674 — February 8, 2024

Read on the Web

JavaScript Weekly

jQuery 4.0.0 Beta — I recently looked at issue #1 of JavaScript Weekly and the top two items were jQuery, so it’s nice to feature it 🙂 You might not be using jQuery, but it’s still everywhere, including WordPress. v4 says goodbye to IE 10 support, removes lots of deprecated APIs, and steps into the modern world just a tad (it even migrated to ESM).

jQuery Foundation

🎉 jQuery isn’t the only blast from the past to get an update this week – Backbone.js 1.6 is out too! Let’s party like it’s 2014? (Also, 🐦 Vue.js has just turned ten years old!)

▶  Reimplementing GORILLAS.BAS in JavaScript — My first experience of publishing programming content was in the DOS QBasic era, so I have a soft spot for the Gorillas game that came with QBasic. Hunor has recorded a spectacular screencast on reimplementing it in JavaScript, but if you don’t like videos, there’s a detailed written tutorial, too.

Hunor Márton Borbély

POST/CON 2024 Is Coming! April 30th-May 1st — Postman’s biggest API conference ever is coming, and early registration is now open! Hear from industry leaders and level up your skills in hands-on workshops with Postman experts. Register by February 13, 2024, to get a 50% discount on your ticket.

Postman sponsor

Node.js Developers Debate Enabling Corepack by Default and Potentially Unbundling npm — Node developers are wrestling with the decision to enable Corepack (a tool for managing package managers) by default, which has sparked a debate about the possibility of removing npm from the Node.js binary.

Sarah Gooding (Socket)

▶  How to Make A Great Framework Better? – Svelte 5 with Rich Harris — A sit-down interview with Rich Harris, creator of Svelte and SvelteKit. Dives into the philosophy, features, and future of Svelte, and covers how it aims to simplify web dev and make apps faster through its build time compilation approach. (78 minutes)

Prismic

🤔 If you haven’t got time for the interview (above), enjoy Tenets, Rich’s attempt to articulate Svelte’s philosophy.

IN BRIEF:

Andy Jiang and Ryan Dahl of the Deno project bring us up to speed with how Deno developed in 2023 and hint at the next steps to Deno 2.

The New Stack‘s Richard MacManus caught up with Remix CEO Michael Jackson to talk about the role of Remix and Next.js in the context of the React framework ecosystem.

🎙 Dan Abramov was recently interviewed on the PodRocket podcast, if you want to catch up with what he’s thinking.

Some Node.js security releases are expected to land today, including fixes for four high-severity issues. 🤞

📊 The results of the latest State of React Native survey are out.

RELEASES:

Capacitor 5.7 – Build cross-platform native apps with JS.

Commander.js 12.0 – Node.js CLI app framework.

Million 3.0 – Optimizing compiler for React.

Vite 5.1, Bun 1.0.26, Mermaid 10.8, Quill 2.0-rc0

Save 50% on Your POST/CON Ticket — Gain new skills through hands-on workshops, in-depth presentations, and conversations at POST/CON 2024.

Postman sponsor

📒 Articles & Tutorials

Static Roots: Objects with Compile-Time Constant Addresses — The V8 blog never disappoints when it comes to deep, technical posts! Olivier Flückiger of the V8 team explains how fundamental, base objects like undefined and true are made more efficient and live in their own read-only heap. A brief look at the sort of thing that makes V8 fast!

Olivier Flückiger (V8)

From Many to One: Moving Our JavaScript Code Into a Monorepo — A story of trying to reduce complexity, by way of Nx, pnpm workspaces and, eventually, Turborepo. “It just works!”

José Guerrero (Aha!)

Intro to JavaScript Error and Performance Monitoring with Sentry — Track, trace, debug and resolve JavaScript errors across platforms. Are your releases that easy? Join us live.

Sentry sponsor

Creating an Animated 3D Starfield / ‘Warp Speed’ Effect — It’s always fun to get into some simple visual stuff like this every now and then. (This whole site is filled with interesting little tutorials, like this.)

Kirupa Chinnathambi

▶  A Deep Dive into htmx — Covers the fundamentals, digging into htmx’s codebase – plus it’s an unlisted video so you can feel like you’re in a secret club.

Carson Gross

Detecting Caps Lock from JavaScript

David Walsh

Just Enough CORS to Not Get Stuck

Abin Simon

🛠 Code & Tools

Tabulator: An Interactive Table and Data Grid Library — Supports all major browsers and can be used with Angular, Vue, and React if you wish. Been around for several years now, but continues to be maintained.

Oli Folkerd

🥽  React Native for Apple Vision Pro“Unlike compatibility mode, this approach allows immersive experiences and XR features on visionOS.” Now you just need to find $3500+ to buy the Vision Pro.. 😉

Oskar Kwaśniewski (Callstack)

Open-Source JavaScript UI Components to Create Forms and Convert Them to PDF — Create and edit dynamic JSON-based forms with a self-hosted drag-and-drop form builder. Render them as editable PDFs directly in your browser.

SurveyJS sponsor

React Native TypeScript Boilerplate — Unsurprisingly, this is an all-in-one starter/boilerplate React Native app that uses TypeScript. It also includes a theming system, icons, Husky integration, and more, to help you get started fast.

FreakyCoder

Marked.js 12.0: Fast Markdown Parsing and Compiling — A low-level Markdown compiler built for speed and available as a client-side library, server-side library, or CLI. v12 brings it in line with recent CommonMark updates.

Christopher Jeffrey

Storybook 8 Beta — The latest update to the popular UI component workshop has improvements a-plenty including faster startup times, React Server Components support, as well as support for Vite 5 and Lit 3.

Michael Shilman (Storybook)

react-native-live-markdown: A Cross-Platform Markdown Editor — A drop-in replacement for React Native’s TextInput component but with Markdown formatting.

Expensify, Inc

Vue Currency Input: Currency Formatted Number Inputs for Vue.js — Based on Intl.NumberFormat and sitting atop the Vue Composition API, you can use this to decorate any input component with currency formatting capabilities.

Matthias Stiller

✂️ Knip 4.5 – Cut unused files and exports from JS/TS projects.

NVM Desktop 3.0 – Desktop UI for Node Version Manager.

Puppeteer Replay 3.0 – Replay recordings from Chrome DevTools Recorder.

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

📊 gridstack.js 10.1 – Build responsive interactive dashboards quickly.

query-string 8.2 – Parse and stringify URL query strings.

ml.js 7.0 – Machine learning tools for JavaScript.

SWC 1.4 – Rust-based tooling for the Web.

A Qwik break from React?

#​673 — February 1, 2024

Read on the Web

JavaScript Weekly

Cytoscape.js: Graph/Network Visualization and Analysis Library — Handy if you need to model and/or visualize relational data, like biological data or social networks. There are many demos to enjoy here. GitHub repo.

Max Franz

Announcing TypeScript 5.4 Beta — TypeScript gains Object.groupBy and Map.groupBy, a new NoInfer<T> utility type is introduced to stop TypeScript from digging in to match against inner types during inference, and lots of smaller bits and pieces covered in this lengthy post. The final release is expected in March.

Daniel Rosenwasser

FlexGrid by Wijmo: The Industry-Leading JavaScript DataGrid — A fast and flexible DataGrid for building modern web apps. Key features and virtualized rendering are included in the grid module. Pick and choose special features to keep your app small. Built for JavaScript, extended to Angular, React, and Vue.

Wijmo from MESCIUS inc sponsor

Deno 1.40: Now with the Temporal API — Most releases of the Deno JS runtime seem significant lately, but 1.40’s implementation of the Temporal API, decorators, and more WebGPU features ups the ante on the path to v2.

The Deno Team

IN BRIEF:

Some Node.js security releases are anticipated next Tuesday (Feb 6.)

TIL: The pnpm project maintains a frequently updated benchmark of package managers (well, npm, pnpm and Yarn, anyway.)

🏀 Bouncy Ball shows a live comparison of 22 ways to animate a bouncing ball in the browser. Most are JS-based and show the code.

Porffor is an experimental, ahead-of-time JS to WASM compiler.

RELEASES:

htmx 2.0.0-alpha1 – There’s a draft 1.x→2.x migration guide showing what will be affected (not a lot).

Puppeteer 21.10.0 – Node.js API for Chrome – now with experimental browser.debugInfo.

Neutralinojs 5.0 – Lightweight cross platform desktop app framework.

Primate 0.28, Prisma 5.9, Ember 5.6, Pixi.js 7.4

📒 Articles & Tutorials

Take a Qwik Break from React with Astro — Paul Scanlon compares React to Qwik using several examples and concludes that Qwik is at least worth exploring as a React alternative.

Paul Scanlon

Import Assertions and Import Attributes — Shu-yu Guo, of both TC39 and the V8 team at Google, explains how import assertions matured into import attributes and are enabled by default in V8 v12.3.

Shu-yu Guo (V8)

A Next.js App Router Migration: The Good, Bad, and Ugly — A team rebuilt their main dashboard from scratch using a modern Next.js approach and here’s some of what they encountered, good and bad, before concluding that they wish they’d considered Remix instead.

Brandon Bayer (Flightcontrol)

Improving Enterprise Design Systems — Live stream for design system builders and users: How can we make working with design systems more seamless?

StackBlitz sponsor

Squeezing the Last Bit of JS Performance for my Automation Game — The author is building CivIdle, a casual ‘idle’ civilization building game, using Pixi.JS. As an idle game, it needs to simulate time that passed behind the scenes which meant a lot of optimization was in order.

Ruoyu Sun

Starting and Publishing a Library: The Modern Way — A walk through the steps involved in creating and packaging a library, publishing a package, adding testing, and automatically publishing it all to the NPM registry.

Tamás Sallai

How to Test Web Bluetooth with Puppeteer — Use Puppeteer to test features that use the Web Bluetooth API in Chrome.

Masso and Beaufort

The Absolute Minimum Every Software Developer Must Know About Unicode — A modern extension to a classic 2003 article by Joel Spolsky.

Nikita Prokopov

Tackling Flaky Tests with Cypress and Playwright through Network Synchronization

Shreya Kurian

Why I’m Excited for Biome’s Type Inference

Arend van Beelen jr.

🛠 Code & Tools

Labyrinthos.js: A Procedural Generator for Mazes, Etc. — The interactive demo on the homepage will give you the basic idea, but the library implements a variety of algorithms for creating mazes and terrain, including the use of Perlin noise, growing trees, spiral backtracking, and more. GitHub repo.

Yantra Works

The Most Comprehensive User Management Platform — Clerk offers drop-in auth & user management with prebuilt UI components, feature-rich SDKs & APIs for the modern web.

Clerk sponsor

React Resizable Panels: Components for Resizable Panels — If you want users to be able to resize content panels with dividers, try this. The site has many code-based examples showing off the features. v2 supports resizing multiple intersecting panels at once. GitHub repo.

Brian Vaughn

Husky 9: Git Hooks Made EasierHusky provides a structured way to use git hooks to do things like auto-lint your commit messages or code, and run tests upon committing or pushing. v9 makes setting it up and adding hooks much easier.

typicode

David UI Angular 1.0: Tailwind + Angular Components Libary — There are seventeen components so far, covering things like sliders, buttons, notification alerts, and common form elements. GitHub repo.

Creative Tim

React Datepicker 6.0: A Simple Date Picker Component — I can’t remember the last time I saw so many code examples on a homepage 🙂

HackerOne

🎹 Fast, Reliable, Multi-Format Barcode Scanning for Web Apps with STRICH — Reliably scan barcodes in your web app! Easy integration, free demo app and free 30-day trial.

Pixelverse sponsor

goja: An ECMAScript/JavaScript Engine in Pure Go(lang) — A way to add JavaScript-based scripting functionality to apps written in the Go language that doesn’t involve integrating a larger, external JavaScript engine.

Dmitry Panov

🎨 chroma.js: Zero Dependency Color Conversion Library — I love the simple but suitably colorful documentation this library has. GitHub repo.

Gregor Aisch

Faker 8.4 – Generate fake/dummy data, at scale and on demand.

jquery.terminal 2.38 – Create Web based terminal experiences. (Demo.)

Polished 4.3 – A lightweight way to write styles in JavaScript.

Dependency Cruiser 16.1 – Tool to visualize dependencies.

Nightwatch.js 3.4 – Node.js end-to-end testing framework.

OverlayScrollbars 2.5 – JS custom scrollbar plugin.