What’s new for us in ECMAScript 2024

#​698 — July 25, 2024

Read on the Web

JavaScript Weekly

Astro 4.12: Say Hello to Server Islands — The flexible Astro framework for building modern content-based sites continues to go from strength to strength. v4.12 includes a new concept of server islands, a way to integrate static HTML and server-side generated components together.

Erika and Phillips (Astro)

What’s New for JavaScript Developers in ECMAScript 2024 — High level analysis of developments in the ECMAScript spec, with insights from Ecma vice president Daniel Ehrenberg, TC39 co-chair Rob Palmer, and developer Ashley Claymore. A good, thorough roundup of the state of play.

Mary Branscombe (The New Stack)

💡 If you want to go a step further with what’s coming up next, Igalia presents a summary of the recent TC39 meeting in Helsinki with which language proposals were advanced and discussed.

Level Up Your Next.js Skills — Join Scott Moss for this detailed video course on intermediate Next.js. Learn how to build production-ready apps by diving into concepts such as server actions, data fetching, protected routes, form authentication, performance caching, and more.

Frontend Masters sponsor

A Post Mortem of What Broke Node v22.5.0 — Node’s ‘Current’ release line gives access to the latest Node has to offer, at the risk of encountering troublesome bugs too – v22.5 included two, alas, with Node v22.5.1 quickly following to resolve them.

Yagiz Nizipli et al.

IN BRIEF:

Rich Harris provides some details about the forthcoming Svelte 5 and shares his opinions on React Server Components (he thinks they’re “pretty phenomenal”).

Node.js has added an experimental feature to strip TypeScript types from the code it runs.

📊 The results of the State of React 2023 survey have been released including insights from over 13,000 respondents, as have the results of Stack Overflow’s 2024 developer survey.

RELEASES:

Mikro ORM 6.3 – Popular ORM for Node.js and TypeScript, now with an optional ‘schema-first’ approach.

Uppy 4.0 – Powerful, modular JavaScript file uploader.

Preact 10.23 – The 3KB React compatible alternative.

Node.js v20.16.0 (LTS), Storybook 8.2, pnpm 9.6, Meteor.js 3

📒 Articles & Tutorials

So You Think You Know Box Shadows? — The author indulges his creative side with some fun experiments into what he calls “some of the worst possible things” you can do with box shadows on a DIV element, coupled with JavaScript.

David Gerrells

▶  Don’t Use JS for That: Moving Features to CSS and HTML — Packed with code and examples. Some techniques aren’t universally supported yet, but there’s a lot that the browser can offer that you don’t need to reimplement yourself, like color picking, modals, and animations.

Kilian Valkhof

😘 Kiss Bugs Goodbye — Get 80% automated E2E test coverage in just 4 months with QA Wolf. With QA cycles complete in minutes (not days), bugs don’t stand a chance. Schedule a demo.

QA Wolf sponsor

How to Choose the Best Rendering Strategy for Your App — The differences between Static Site Generation (SSG), Server-Side Rendering (SSR), Client-Side Rendering (CSR), Incremental Static Regeneration (ISR), and Partial Prerendering (PPR).

Alice Alexandra Moore (Vercel)

A Practical Guide to Not Blocking the Event Loop — A look at the core principles of synchronous and asynchronous work in a single-threaded environment, stressing the importance of non-blocking code for efficient event loop utilization.

Slava Knyazev

Why is Spawning a New Process in Node So Slow? — The developers of the Val Town platform noticed that Node couldn’t spawn more than 40 external processes per second, whereas Deno and Bun could do a lot more..

Max McDonnell

Debugging Your Node.js Project with Sentry — Join us live today to learn all the basics to monitoring and debugging your Node.js projects with Sentry.

Sentry sponsor

📺 How to Engineer Your Developer Blog Posts to Have Bigger Impact – From a Postgres community perspective, but the advice is universal and well explained. Claire Giordano

📄 Bring Your Own API Key: Supporting User-Provided OpenAI Keys and Prompts in Browser Extensions Stephen Siegert

📄 How to Review Code Effectively: A GitHub Staff Engineer’s Philosophy Sarah Vessels (GitHub)

📄 How Airbnb Smoothly Upgrades React – It was no small task. Andre Wiggins (Airbnb)

🛠 Code & Tools

Ky: Tiny, Elegant Fetch-Based HTTP Client for Browsers — Makes the Fetch API tidier to use as shown here. If you want to tighten up your fetch calls, it’s worth a look.

Sindre Sorhus

React Native Filament: A 3D Rendering Engine for React Native — Fast, native 3D rendering with a React touch. Rendering takes place on a separate thread for efficiency. GitHub repo and pretty good docs, too.

Marc Rousavy

Tests Are Dead. Meticulous Is Here — Automatically creates & maintains e2e UI tests. Zero flakes. Backed by YC, CTO of GitHub, CPO of Adobe, CEO of Vercel.

Meticulous sponsor

Git Granary: A Personal Git LFS Server — A Deno-powered (but can run under Bun and Node) Git Large File Storage (LFS) server implementation written in TypeScript for self-hosted personal use cases.

David Bushell

litegraph.js: A Graph Node Engine and Editor — Useful if you need to create a system for users to create and manipulate graphs or interconnecting ‘nodes’ for things like graphics, audio or data pipelines. Demo.

Javi Agenjo

🤖 OpenAI Node v4.53.0 – The official Node library for OpenAI’s API adds support for their newest gpt-4o-mini model.

Rollup 4.19 – The ES module bundler gains support for decorators.

eslint-plugin-unicorn 55.0 – 100+ useful ESLint rules in one place.

eslint-plugin-promise 7.0 – Enforce best practices for promises.

pretty-ms 9.1 – Convert milliseconds to a human readable string.

Tinybase 5.1 – Powerful reactive data store for local‑first apps.

MiniSearch 7.1 – In-memory fulltext search engine. (Demo.)

swup 4.7 – Page transition library for server-rendered sites.

Jasmine 5.2 – Testing framework for browsers & Node.

Exploring JavaScript (ES2024 Edition)

#​697 — July 18, 2024

Read on the Web

JavaScript Weekly

Exploring JS: JavaScript Books for Programmers — You’ll know Dr. Axel from his fantastic blog posts over the years, or his once tenure as JavaScript Weekly’s editor, but he also has an impressive array of no-nonsense books that you can mostly read for free online, including the newly updated Exploring JavaScript (ES2024 Edition), Deep JavaScript, and Tackling TypeScript.

Dr. Axel Rauschmayer

Node.js v22.5.0 (Current) Released — A notable release for two reasons: first, the WebSocket feature in node:http is now exposed, but second, Node is embedding SQLite and now offers direct access to it via node:sqlite.

Antoine du Hamel

WorkOS: The Modern Identity Platform for B2B SaaS — Start selling to enterprise customers with just a few lines of code. WorkOS provides flexible, easy-to-use APIs to integrate SSO, SCIM, and RBAC in minutes. It’s used by hundreds of high-growth startups including Perplexity, Vercel, Drata, & Webflow.

WorkOS sponsor

▶  The Talks from dotJS 2024dotJS 2024 took place in Paris a few months ago, and now all the talks are available on YouTube. Highlights include Lea Verou talking about the parallels between API and UI design, David Flanagan on advancements in WebAssembly, and Minko Gechev on convergence of features in modern frameworks The talks are all short, so the takeaways are quick to get.

YouTube

IN BRIEF:

The annual JS1024 JavaScript golfing competition is currently running with submissions due tomorrow. You have to build a JavaScript demo in just 1KB and there are lots of links to tools and tutorials there to help.

The first beta of TypeScript 5.6 is expected next week – here’s the TypeScript 5.6 iteration plan if you want to get ahead on the features and schedule.

RELEASES:

ESLint v9.7.0 – Supports ES2025 duplicate capturing groups in regexes. Duy Ng also shares some tips on migrating to ESLint 9+.

Boa 0.19 – A JS engine written in Rust for embedding in other projects.

Meteor 3.0 – Full-stack framework for real-time apps.

jQuery 4.0 Beta 2, htmx 2.0.1, swc 1.7

📒 Articles & Tutorials

How to Make Complex Chrome Extensions — Spinning up a quick, simple browser extension isn’t that big of a deal nowadays, especially with tools like Extension to kick off a project. Larger extensions are a different story, so it’s neat to learn from the experiences of a team that’s built one.

Nina Torgunakova

Build a Task Manager with Next.js, Neon, & Clerk that Isolates Tasks to Specific Teams — Learn to build a multi-tenant task manager that solves team isolation, user role management, and authentication challenges.

Clerk sponsor

A TypeScripter’s Take on Zig — Rust might be the cool systems language on the block right now, but Zig has a lot going for it too (Bun, notably, is implemented in it.) A good primer from a TypeScript perspective.

Dan Vanderkam

How Fast is JavaScript? Simulating 20 Million Particles“The challenge: simulate 1,000,000 particles in plain JavaScript at 60 FPS on a phone using only the CPU. Let’s go.” The sort of fun, detailed experimentation I’ll always support.

David Gerrells

A Guide to Reading and Writing Node.js Streams — Matteo reminds us of the benefits of using Node’s powerful streaming data features, where they make sense, and how to handle back-pressure and error management.

Matteo Collina

ViteConf Is Back! — ViteConf will be returning to the virtual stage on October 3rd. Get your tickets now.

StackBlitz sponsor

What React Devs Need to Know About React Native — While React and React Native share many similarities, they’re different under the hood. Here’s some of what you need to know to make the transition.

Kadi Kraman (Expo)

📄 NPM Supply Chain Security: Why We Can Be Optimistic About the Future Robat William

📄 How to Create Distortion and Grain Effects on Scroll with Shaders in Three.js Jan Kohlbach

📄 How to Build a JavaScript UI Component-First DevTool Startup in 2024 Corbado

🛠 Code & Tools

Poku 2.0: A Cross-Platform Test Runner for JSPoku’s philosophy is to ‘bring the JavaScript essence back to testing.’ It runs the same way across Node, Bun and Deno, and auto-detects ESM, CommonJS and TypeScript.

Weslley Araújo

InfiniteGrid 4.12: Arrange Card Elements Infinitely in a Grid Layout — A mature and established way to create grids formed of card elements of varying sizes. Happy on both desktop and mobile and has integrations for React, Vue, Angular, Svelte, and others. GitHub repo.

NAVER

🤖 Micro Agent: An AI Agent That Writes Code for You — A Node.js-based tool that takes the approach of writing a test case first and then iterates upon a solution until the tests pass.

Builder․io

Your Fastest Path to Production — Build, deploy, and scale your apps with unparalleled ease – from your first user to your billionth.

Render sponsor

Hyphenopoly 6.0: A Polyfill for Client-Side Hyphenation — Hyphenates text if the user agent or language doesn’t support CSS hyphenation (a feature that’s part of Baseline but with widely varying support). An interesting use of WebAssembly.

Mathias Nater

simplex-noise.js: A Fast Simplex Noise Implementation — Small, self contained, and fast, and you can use it in cool demos like this or for applying convincing grain/noise to images or other data, say.

Jonas Wagner

Maska 3.0: Zero-Dependency Input Mask Library — Several demos on the homepage. Lightweight and framework independent but offers Vue 2/3, Alpine.js and Svelte integrations. GitHub repo.

Form․io

Wasp 0.14Wasp is a Rails-like framework for React, Node.js and Prisma.

PKI.js 3.2 – Pure JS library for working with public key oriented systems. Certificates, signing, etc.

📷 Vision Camera 4.5 – Advanced camera control for React Native.

AlaSQL.js 4.5 – Isomorphic JavaScript SQL database.

Eruda 3.2 – A console/devtools for mobile browsers.

MUI X 7.10 – Popular React component suite.

Do the (ESLint) Evolution

#​696 — July 11, 2024

Read on the Web

JavaScript Weekly

es-toolkit: A Modern JavaScript Utility Library — Think Lodash but newer, faster, smaller, and with tree shaking and built-in TypeScript support. The reference guide shows off the supported functions so far – it’s not quite as extensive as Lodash, but it’s getting there with the goal being “to achieve full feature parity with Lodash.”

Viva Republica, Inc

What’s Coming Next for ESLint — At eleven years old, ESLint is preparing itself for another eleven years by continuing to evolve into a language-agnostic linter that anyone can write plugins for. The new configuration system introduced in ESLint 9.0 is “just the beginning of significant changes” on the way.

Nicholas C. Zakas

Cut Code Review Time & Bugs in Half with AI — AI-first pull request reviewer that offers context-aware, line-by-line feedback, and smart chat. Trusted by 1000’s of developers, it’s the most installed AI app on GitHub and GitLab marketplaces. Start your seven-day free trial today! It’s forever free for open-source projects.

CodeRabbit sponsor

Speeding up the JavaScript Ecosystem: Isolated Declarations“TypeScript’s new isolated declaration feature is a game changer for sharing code among developers.” The latest in Marvin’s fantastic series about finding performance wins in how we do things in the JS world.

Marvin Hagemeister

IN BRIEF:

▶️ A side-by-side comparison of publishing a module to npm vs JSR.

🎙️ Vue creator Evan You went on the DejaVue podcast to talk about the last ten years of Vue.

🗣️ JavaScript-powered text-to-speech in the browser is getting very good.

Efforts are being made to integrate SQLite into Node.js.

RELEASES:

pnpm 9.5 – The efficiency-focused package manager introduces Catalogs, a way to have shareable dependency version specifiers.

Node.js v22.4.1 (Current), v20.15.1 (LTS) and v18.20.4 (LTS)

Deno 1.45, Angular 18.1

📒 Articles & Tutorials

Recreating the THX ‘Deep Note’ in JavaScript — A fun bit of sound generation with Tone.js. Note that people have reported mixed results on different browsers, but it works for me. Just be careful it doesn’t ▶️ explode your teeth.

Alexander Keliris

Introducing @let in Angular — The new @let syntax extends Angular’s built-in template syntax with a better way to define variables inside component templates.

Mark Thompson and Kristiyan Kostadinov

Building a Hybrid Sign-Up/Subscribe Form with Stripe Elements — A practical guide on how to use custom flows, webhooks, and user metadata to build a single form that automatically subscribes new users using Stripe Elements.

Clerk sponsor

Sneaky React Memory Leaks: How the React Compiler Won’t Save You — While the new and exciting React Compiler can tackle a lot of issues and make most codebases more performant, it pays to be aware of tricky edge cases.

Kevin Schiener

📄 Resizing and Transferring ArrayBuffers – Dr. Axel continues his exploration of ECMAScript 2024. Dr. Axel Rauschmayer

📄 Protecting Against Third Party Code Changes with Script Integrity Chris Coyier

📄 How to Create a Chrome Extension with Vanilla JavaScript Esther Vaati

📄 Learn React Suspense by Building a Suspense-Enabled Library Slava Knyazev

📄 Running a Successful Meetup – From the team behind Remix. Bob Ziroll

📄 Moving from Express to Fastify Tom MacWright (Val Town)

🛠 Code & Tools

React Flow 12: Create Node-Based Editors & Interactive Diagrams — Part of xyflow, this makes it easy to create node-based UIs where you have interactive components wired together however you choose. There’s a Svelte version too.

Moritz Klack and John Robb

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

Wallaby Team sponsor

Croner 8.1: ‘Cron’ Triggering and Evaluation — Trigger functions to the schedule of your choice using cron syntax. It can also evaluate cron expressions to give you a list of upcoming times.

Hexagon

TinyBase 5.0: A Reactive Data Store for Local-First Apps — A data store that acts as a reactive backend to your apps if you want less headache building out backends. v5.0 includes a new mergeableStore type that can wrap your data as a Conflict-Free Replicated Data Type (CRDT). Homepage.

James Pearce

PLV8: Use JavaScript Functions in PostgreSQL — Did you know you can use JavaScript within Postgres for things like stored procedures and triggers? PLV8 is the extension that makes it happen. PLV8ify adds an extra layer by converting JS/TS files into PLV8 ready SQL.

PLV8JS Development Group

😘 Kiss Bugs Goodbye — Get 80% automated E2E coverage in just 4 months with QA Wolf. With QA cycles complete in minutes (not days), bugs don’t stand a chance. Schedule a demo.

QA Wolf sponsor

file-type 19.1 – Detect file type from a Buffer, Uint8Array, or ArrayBuffer. It can now read from web streams too.

🗓️ Schedule-X 1.50 – Material Design event calendar and date picker.

getJS 2.0 – Go-powered tool to grab Javascript sources/files from a site.

wa-sqlite 1.0 – WebAssembly SQLite with support for browser storage extensions.

QuickJS 1.2 – Execute JavaScript code in a WebAssembly QuickJS sandbox.

True Myth 7.4 – Safe, idiomatic null and error handling in TypeScript.

tinyqueue 3.0 – Small and simple priority queue in JavaScript.

MiniSearch 7.0 – In-memory fulltext search engine. (Demo.)

Jotai 2.9 – Simple, flexible state management for React.

Eruda 3.1 – A console/devtools for mobile browsers.

Breaking a promise

#​695 — July 4, 2024

Read on the Web

JavaScript Weekly

How to Annul Promises in JavaScript — You can ‘cancel’ XHR and fetch requests, but can you cancel regular promises? Currently, no, but Zachary looks into doing the next best thing: telling a promise the game’s up, and discarding/ignoring its eventual results.

Zachary Lee

regex 2.1: Turn JavaScript’s Regular Expression Support Up to Eleven — From the co-author of O’Reilly’s High Performance JavaScript and Regular Expressions Cookbook comes an enhancement for JavaScript’s regex support. Supporting all of ES2024’s regex functionality, it adds support for free spacing and comments, atomic groups, regex subroutines, context-aware interpolation of RegExp instances, and more.

Steven Levithan

💡 The author also tells us a Babel plugin for regex is expected to be released later today.

✂️ Cut Your QA Cycles Down to Minutes with Automated Testing — Are slow test cycles bottlenecking your dev teams’ release velocity? With QA Wolf
, your organization can run entire test suites in minutes, not days. Plus, get to 80% automated E2E coverage in just 4 months (zero flakes, guaranteed). Schedule a demo.

QA Wolf sponsor

IN BRIEF:

Nicholas C. Zakas writes about different JavaScript runtimes and how you can preserve the ability to switch runtimes easily.

The React Native team says developers building modern React Native apps should be using a framework to do so, such as Expo.

Web pioneer Marc Andreessen tells ▶️ the origin story of Mosaic and Netscape.

🤦 If you can’t get your Lighthouse scores to 100%, you could always pretend.. A trick to keep an eye out for..

There are at least 535 ways to reload a page with JavaScript.

RELEASES:

Backbone.js 1.6 – The classic library gets a little update.

Qwik 1.6Qwik 2 is coming soon, though.

A raft of Node.js Security Releases are due on July 8.

ESLint 9.6, PrimeVue 4.0, Bun 1.1.18

📒 Articles & Tutorials

Enhancing The New York Times‘ Web Performance with React 18 — Last year, The New York Times set out to take full advantage of React 18 on its flagship news site. This is a tour of the challenges faced in upgrading, coupled with the significant benefits they managed to take advantage of.

Ilya Gurevich (NYT)

How to Use a Go(lang) Library from JavaScript with WebAssembly — Compiling Go code to WebAssembly opens up some interesting opportunities in the browser.

Thomas Derflinger

Inside Look: How Sentry Debugs with Sentry — Join Sentry engineer Yagiz Nizipli to learn how he optimizes tasks with Sentry, saving $160K/yr. RSVP for tips & tricks!

Sentry sponsor

How We Tamed Node.js Event Loop Lag — Node famously uses very few threads yet can handle a large number of clients performantly, as long as the work associated with each client is ‘small.’ When that work isn’t ‘small’, as here, things can go off the rails quickly.

Eric Allam

How People with Disabilities Use the Web — Describes tools and approaches that disabled people use to interact with the Web and the barriers these people face. Of interest are the user personas that show the range of specific people’s experiences.

W3C

A Set of Modern Web Performance Guides — A helpful collection of guides, covering things such as working with the different core web vitals, JavaScript optimization, metrics, and more.

SpeedCurve

📄 Why Google Sheets Ported Its Calculation Worker from JS to WasmGC Thomas and Steiner (Google)

📄 Working with Pasted Content in JavaScript Raymond Camden

📄 How to Parse HTML Programatically in JavaScript Brian Wachira

📄 TypeScript 5.5: A Blockbuster Release Dan Vanderkam

🛠 Code & Tools

BWIP-JS: A Barcode Writer in Pure JavaScript — A library that can generate barcodes using over 100 different barcode types and standards, both single and two dimensional. There is, of course, a live demo where you, too, can discover far more types of barcodes exist than you ever imagined.

Mark Warren

Superstruct 2.0: Define Interfaces to Validate Data at Runtime — Designed for validating data at runtime with an annotation API inspired by TypeScript, Flow, Go and GraphQL. GitHub repo.

Ian Storm Taylor

Software Consultants Your Team Actually Wants to Work with 🥳 — Test Double solves tough problems from strategy to execution. Weekly rates. Open contracts. No management required.

Test Double sponsor

Termino.js 2.0: Create Terminal-Like Experiences in the Browser — No dependencies, customizable, and you can create multiple terminal instances on a single page. Demos.

Marketing Pipeline

Fabric.js 6.0: A SVG-to-Canvas and Canvas-to-SVG Library — Provides an interactive object model on top of the HTML5 canvas to make it easier to work with multiple visual elements there. The homepage is a complete live demo.

Fabric.js

Flitter: A Flutter-Like JavaScript Data Visualization Framework — Boasts a declarative syntax and support for both SVG and Canvas to allow you to build high-performance data visualizations, interactive charts, diagrams, and more. It’s also easy to integrates with React, Svelte, etc.

Flitter

SquirrellyJS 9: A Powerful Template Engine — A modern, configurable, and fast template engine promising “the power of Nunjucks” and “the simplicity of EJS”. There’s an online playground if you want to see it in action. GitHub repo.

Ben Gubler

Hexo 7.3 – Popular Node.js blog framework / generator.

gridstack.js 10.3 – Build responsive interactive dashboards quickly.

React-PDF 9.1 – React component to display PDFs.

MUI X 7.8 – Popular React component suite.

🎁 And one for fun

Sliderland: A Minimalist Coding Playground — A slider control based visualization you can code with simple formulas. We last linked to this a few years ago, but it’s still a fun way to do some quick, visual JS math experimentation. Tixy.land is along similar lines, but based on a 2D grid.

blinry

OpenTelemetry in N|Solid

Introduction

N|Solid Runtime, the OSS runtime that powers N|Solid Pro, is an innovative, lightweight runtime for Node.js applications. It offers real-time insights into performance, memory usage, and CPU consumption, giving developers unparalleled visibility into their code without requiring any modifications. In today’s software landscape, understanding your application’s production behavior is crucial. With cloud-native architectures, microservices, and distributed systems, pinpointing issues is challenging. This is where OpenTelemetry, a widely-adopted, open-source standard for collecting telemetry data, comes in. Leveraging OpenTelemetry with N|Solid, developers gain deep insights into application behavior, identify bottlenecks early, and optimize performance and reliability.

In this blog post, we will explore how to instrument your Node.js processes with OpenTelemetry within the N|Solid runtime. You’ll learn how these powerful tools work together to provide comprehensive observability, ensuring your applications run smoothly and efficiently in production environments.

What is OpenTelemetry?

As defined in the official OpenTelemetry documentation

__”OpenTelemetry__ is an Observability framework and toolkit designed to create and manage telemetry data such as traces, metrics, and logs. Crucially, OpenTelemetry is vendor- and tool-agnostic, meaning that it can be used with a broad variety of Observability backends, including open source tools like Jaeger and Prometheus, as well as commercial offerings. […]
OpenTelemetry is focused on the generation, collection, management, and export of telemetry. A major goal of OpenTelemetry is that you can easily instrument your applications or systems, no matter their language, infrastructure, or runtime environment.”

By providing a standardized, open-source approach to collecting telemetry data, OpenTelemetry helps bridge the gap between different monitoring and logging tools. This allows developers and operations teams to use their preferred tools and platforms without worrying about compatibility or integration issues. For example, with OpenTelemetry, you can collect metrics and logs from your application using one tool, such as Prometheus or the ELK Stack, while still using another tool for visualization, like Grafana or Kibana. This flexibility enables a more tailored approach to monitoring and logging, allowing teams to choose the best tools for their specific needs.

Moreover, OpenTelemetry’s instrumentation allows you to collect telemetry data from multiple sources, including applications, services, and infrastructure components. This provides a comprehensive view of your entire architecture, enabling you to identify correlations between different components and better understand how they impact overall performance.

By standardizing the way telemetry data is collected and exported, OpenTelemetry facilitates integration with various monitoring and logging tools, making it easier to:

Collect metrics from multiple sources
Visualize complex system behavior
Detect anomalies and alert on issues
Retain and analyze historical data

This standardization ensures that regardless of the tools or platforms you use, OpenTelemetry can help you achieve a consistent and comprehensive observability strategy.

OpenTelemetry in N|Solid

To enhance observability through N|Solid, we’ve integrated robust OpenTelemetry support, offering several key features:

Automatic Instrumentation: N|Solid automatically instruments specific Node.js core modules, capturing critical telemetry data for deeper insights into application behavior.
OTLP Exporter: An OpenTelemetry Protocol (OTLP) exporter sends traces and metrics directly to tools like Prometheus or Jaeger.
Seamless Ecosystem Integration: Leveraging the OpenTelemetry ecosystem, N|Solid taps into extensive libraries and tools, enhancing your application’s observability with community-driven innovation.

In the following sections, we’ll delve deeper into how you can configure N|Solid to utilize these OpenTelemetry features and start collecting valuable telemetry data about your application’s behavior.

Automatic Instrumentation

N|Solid automatically collects process-wide and thread-specific metrics at intervals, adjustable via the NSOLID_INTERVAL environment variable (default: 3 seconds). Tracing, which is off by default due to performance concerns, can be activated by setting the NSOLID_TRACING_ENABLED environment variable. By default, N|Solid instruments node:http and node:dns modules, generating spans for every HTTP and DNS transaction. To exclude these modules, use the NSOLID_TRACING_MODULES_BLACKLIST variable. This automatic instrumentation ensures accurate and detailed metrics and traces with minimal configuration.

Try N|Solid’s powerful observability features by signing up for our free SaaS tier. Run your application with the following command:

$ NSOLID_SAAS=your_nsolid_saas_token nsolid app.js

Log in to the N|Solid Console to view the collected metrics on the Application Dashboard, and experience enhanced observability and performance optimization for your Node.js applications.

Fig 1. N|Solid Application Dashboard

OTLP Exporter

When using N|Solid SaaS, the runtime exports collected telemetry data using the ZeroMQ protocol. For those who prefer sending the data to a different backend, N|Solid provides the option to export metrics and traces using OTLP over either HTTP or GRPC.

OTLP configuration in N|Solid is simple. We need to use the NSOLID_OTLP environment variable to enable the OTLP Exporter. Once it’s done, N|Solid will handle the OTEL_* environment variables defined by the OTLP Exporter specification.

Let’s showcase this with an example.

The following code implements the most basic Node.js HTTP server:

‘use strict’;

const port = process.env.PORT || 9999;

const http = require(‘node:http’);

const server = http.createServer((req, res) => {
res.end(‘ok’);
});

server.listen({port}, () => {
console.log(‘listening on port: ‘ + port);
});

We want to run this server with N|Solid so it collects and exports metrics and traces to a Prometheus and Jaeger server respectively using OTLP over HTTP. We can set up the 3 services (__prometheus__, jaeger and __http_server__) very easily with Docker Compose.

version: ‘3.7’
services:
prometheus:
image: prom/prometheus:latest
expose:

9090
ports:
9090:9090
volumes:
./prometheus.yml:/etc/prometheus/prometheus.yml
command:
“–config.file=/etc/prometheus/prometheus.yml”
“–storage.tsdb.path=/prometheus”
“–web.console.libraries=/usr/share/prometheus/console_libraries”
“–web.console.templates=/usr/share/prometheus/consoles”
“–enable-feature=otlp-write-receiver”
jaeger:
image: jaegertracing/all-in-one:latest
environment:
COLLECTOR_OTLP_ENABLED=true
JAEGER_DISABLED=true
expose:
4318
ports:
16686:16686
4318:4318
http_server:
image: “nodesource/nsolid:iron-latest”
user: “nsolid”
working_dir: /home/nsolid/app
environment:
NSOLID_APPNAME=http_server
NSOLID_TRACING_ENABLED=1
NSOLID_OTLP=otlp
OTEL_EXPORTER_OTLP_METRICS_ENDPOINT=http://prometheus:9090/api/v1/otlp/v1/metrics
OTEL_EXPORTER_OTLP_TRACES_ENDPOINT=http://jaeger:4318/v1/traces
ports:
9000:8080
volumes:
./api:/home/nsolid/app
command: “nsolid test.js”

Let’s take a brief look on how every service is configured:

The prometheus service will listen on port 9090 with the feature otlp-write-receiver enabled, consuming metrics in OTLP at the following url: http://prometheus:9090/api/v1/otlp/v1/metrics.
The jaeger service with COLLECTOR_OTLP_ENABLED will consume traces in OTLP at the following URL: http://jaeger:4318/v1/traces.
The http_server service runs with N|Solid and has the OTLP Exporter enabled by setting NSOLID_OTLP to “otlp”__. To configure the metrics and traces endpoints the OTEL_EXPORTER_OTLP_METRICS_ENDPOINT and OTEL_EXPORTER_OTLP_TRACES_ENDPOINT environment variables are set pointing to __prometheus and jaeger urls. The rest of the config values for the OTLP Exporter are set to its default values as defined in https://opentelemetry.io/docs/specs/otel/protocol/exporter/, so for example, we don’t need to actually define the protocol to be used, as it defaults to OTLP over HTTP.

As a final step, we spin up the services by running:

$ docker-compose up

Next we can send an HTTP request to the server:

$ wget http://localhost:9000

We can check in the Prometheus and Jaeger UI’s that telemetry data is being consumed.

Fig 2. Process cpu and cpu_user time as shown in Prometheus

Fig 3. HTTP server transaction span as shown in Jaeger

OpenTelemetry ecosystem integration

Integrating N|Solid with the OpenTelemetry JavaScript ecosystem is straightforward, allowing us to take full advantage of the wide range of available modules.

We’re going to modify our existing http_server code to incorporate some @opentelemetry modules which will allow us to showcase some new functionality. The new code looks like this:

‘use strict’;

const port = process.env.PORT || 9999;

const http = require(‘node:http’);
const nsolid = require(‘nsolid’);
const api = require(‘@opentelemetry/api’);
const { FsInstrumentation } = require(‘@opentelemetry/instrumentation-fs’);

// Register Opentelemetry API in N|Solid.
if (!nsolid.otel.register(api)) {
throw new Error(‘Error registering api’);
}

// Register Opentelemetry auto-instrumentation modules.
nsolid.otel.registerInstrumentations([
new FsInstrumentation({})
]);

// Need to require this after registering the instrumentations
const fs = require(‘node:fs’);

const tracer = api.trace.getTracer(‘test’);

const server = http.createServer((req, res) => {
const ctxt = api.context.active();
const span = tracer.startSpan(‘Fibonacci’, { kind: api.SpanKind.INTERNAL }, ctxt);
fs.writeFileSync(‘./output_fib.txt’, ](https://opentelemetry.io/docs/concepts/signals/metrics/);
span.end();
res.end();
})

function fib(n) {
if (n === 0 || n === 1) return n;
return fib(n – 1) + fib(n – 2);
}

server.listen(port, () => {
console.log(‘listening on port: ‘ + port);
});

Let’s describe the newly added functionality:

We have added the @opentelemetry/api interface and registered in N|Solid using the nsolid.otel.register() API. By doing so, we will be able to perform all the operations defined in the Opentelemetry API specification that relate to tracing and they’re handled by the implementation embedded in N|Solid (metrics and logs integration aren’t implemented yet though it’s coming).
We have registered @opentelemetry/instrumentation-fs by using the nsolid.otel.registerInstrumentations() API which will automatically instrument the node:fs core modules.
We have added a custom Span using the api.trace API. Custom spans provide granular visibility into specific parts of your application. In this example, we create a custom span named Fibonacci to monitor the Fibonacci calculation. This span started before the Fibonacci calculation and ended immediately after. By creating this custom span, we can precisely monitor the execution time and performance of the Fibonacci calculation, providing deeper insights into that part of the application.

Finally, we spin up the services again by running:

$ docker-compose up

Next we can send an HTTP request to the server:

$ wget http://localhost:9000

And now we can check in Jaeger how the trace generated by the HTTP differs from the original one.

Fig 4. Full trace with 3 spans as shown in Jaeger

Fig 5. Comparison between traces from Fig 2. and Fig 3.

Conclusion

Integrating OpenTelemetry with N|Solid enhances observability in your Node.js applications by providing comprehensive telemetry data collection and seamless integration with tools like Prometheus and Jaeger. This setup enables deeper insights into application performance, quick issue identification, and efficient optimization.

In this post, we demonstrated how to configure N|Solid for automatic instrumentation and OTLP export, showcasing practical examples. These features simplify the monitoring process, helping ensure your applications run smoothly and efficiently.

With N|Solid and OpenTelemetry, you have powerful tools to maintain high-performance and reliable applications. We encourage you to explore these features to optimize your observability strategy.

Thank you for reading!

Say hi to ECMAScript 2024

#​694 — June 27, 2024

Read on the Web

JavaScript Weekly

A Look at JavaScript’s New Set Methods — Finding the intersection, union, and difference between sets, among other set-related tasks, is now a piece of cake. Available in Node 22+, Chrome/Edge 122+, Firefox 127+, Safari 17+, and now considered a ‘baseline’ feature.

Brian Smith (MDN)

Ecma International Approves ECMAScript 2024: What’s New? — This week, the Ecma General Assembly approved the latest ECMAScript / JavaScript language spec, officially making it a standard. As with ECMAScript 2023, it’s a small step forward, but Dr. Axel looks at what’s new.

Dr. Axel Rauschmayer

Create Consistent UIs with Storybook — Join Steve Kinney for this extensive video course on building scalable, reusable component libraries and design systems with Storybook. Covers set up, styling, documentation, testing, and more.

Frontend Masters sponsor

Announcing TypeScript 5.5 — One of the most significant TypeScript releases in terms of features in a long time. There’s support for the new Set methods (mentioned above), regex syntax checking, isolated declarations, inferred type predicates, and more. A bumper packed release post.

Microsoft

IN BRIEF:

📊 Socket’s Sarah Gooding has put together a good, easily-skimmed roundup of the State of JS 2023 survey results.

🧊 Someone’s created an ASCII 3D renderer in JavaScript. Why? Why not! There’s a live demo here.

RELEASES:

Playwright 1.45.0 – Microsoft’s browser/Web automation library now has a clock API for manipulating time within tests to verify time-related behavior.

Bun v1.1.16 – The fast JavaScript runtime and toolkit.

Astro 4.11, Electron 31.1, PouchDB 9.0, Node.js v20.15.0 (LTS)

📒 Articles & Tutorials

👑 Recreating the Queens Game in Vue — Queens is a puzzle game that combines elements of Minesweeper, chess, and Sudoku.

Fotis Adamakis

Understanding React Compiler — The new, experimental tool from the React team automates your performance tuning by rewriting your code — but should you use it, and how does it work under the hood? Tony takes a look.

Tony Alicea

Local-First Development Will Be Unlocked by Sync Engines — Sync engines are behind the amazing UX of apps like Linear and Figma. PowerSync is a plug-in sync engine for web apps.

PowerSync sponsor

Uniting Web and Native Apps with 4 Lesser-Known JavaScript APIs — A look at some ‘under-the-radar web features, such as the Screen Orientation API and Device Orientation API, and how they can be used to create user friendly, robust PWAs.

Juan Diego Rodríguez

Exploring Randomness in JavaScript — Specifically, Math.random() versus Crypto.getRandomValues().

Ben Nadel

Drawing the Auth Owl at Userfront | Transformational Auth & Identity — Read the story behind Userfront. Including the vision behind the company and what auth should (and shouldn’t) have.

Userfront sponsor

📄 Slack’s AI-Powered Conversion from Enzyme to React Testing Library – If the robots are taking jobs, at least they’re the jobs that we often don’t want to do.. Sergii Gorbachov (Slack)

📄 How to Mock a Child Component When Writing Angular Tests Casey Falkowski

📄 Morphing Arbitrary Paths in SVG Alexandru-Gabriel Ică

🛠 Code & Tools

Node-RED 4.0 ReleasedNode-RED is a popular ‘low code’ event-driven app development environment that uses Node.js behind the scenes. v4.0 requires Node 18 or up, improves its ‘multiplayer’ support (when multiple users are working on the same system), faster deploys, and other all-round improvements.

OpenJS Foundation

React-Admin v5 — A MIT-licensed framework for building React apps on top of REST or GraphQL APIs. You get some added structure and numerous building blocks out of the box. GitHub repo.

François Zaninotto

Deploy Your SSR Apps on AWS, Fast — Deploy any frontend framework quickly with AWS Amplify hosting. Scale to millions? ✅ Branch deployment? ✅ PR previews? ✅

AWS Amplify sponsor

wavesurfer.js: Audio Waveform Player Library — Get responsive and customizable waveforms that provide a visual impression of audio. There are plugins for working with timelines, recording, rendering spectrograms, and more. Many examples here.

katspaugh

PixelMatch 6.0: A Fast Pixel-Level Image Comparison Library — Give it two images, it’ll highlight the differences. Now distributed as a ES module.

Mapbox

📄 PDFSlick: View and Interact with PDFs — An interesting PDF viewer for React, Solid, Svelte and other JavaScript apps. Built on top of PDF.js, it uses Zustand to provide a reactive store for loaded documents. Live demos.

Vancho Stojkov

Ky 1.4 – Simple HTTP client based upon Fetch for browsers, Node & Deno.

React Awesome Query Builder 6.6 – Logical query builder control. (Demo.)

Matter.js 0.20 – A 2D rigid body physics engine.

ka-table 11.0 – Lightweight React table component. (Demos.)

OverlayScrollbars 2.9 – JS custom scrollbar plugin.

Wouter 3.3 – Minimalist router for React & Preact.

The results are in

#​693 — June 20, 2024

Read on the Web

JavaScript Weekly

The Results of the State of JavaScript 2023 Survey — It feels odd including something about 2023 in June 2024, but the results of the major annual JavaScript developer survey are now out. It’s interesting to see what features JS devs do and don’t use, changes in library popularity over time, what build tools people are using, the divide between JavaScript and TypeScript usage, and much more besides.

Devographics

How JavaScript is Finally Improving the Module Experience — Multiple long-term proposals collectively known as “module harmony” will complete the features lost as developers move away from CommonJS.

Mary Branscombe / The New Stack

Simplify Your Data Collection with a Fully Integrated Form Management Platform — SurveyJS is an open-source JavaScript library suite for secure form creation and data collection in your app. Build JSON-driven surveys/forms quickly, without manual coding. Integrate with any backend system, gather and store responses while retaining full control over your data.

SurveyJS sponsor

How React 19 (Almost) Made the Internet Slower — Even changes that are planned in advance can have big effects on the developer experience if people aren’t aware of them. A change to Suspense in React 19 led to much confusion and surprise, but the story has a happy ending with the React team ready to listen to end users more closely.

Henrique Yuji

IN BRIEF:

Evan You, the creator of Vue.js, recently gave ▶️ a talk on 10 years of Vue, covering both its past and future.

Over on Twitter/X, Daniel Lemire showed off a situation where Bun is much faster than Node.js, even when both are using the same underlying library, due to the complexities the V8 engine introduces.

🎵 Did you know TC39 now has its own pop group and a song?

RELEASES:

htmx 2.0 – The popular ‘access lots of JS and Web API features via special HTML attributes’ library gets a new major version mainly to remove deprecations and drop IE support.

Electron 31 – The cross-platform desktop app framework steps up to Chromium 126, Node 20.14, and V8 12.6.

Relay 17 – Facebook’s declaritive GraphQL client for React.

ESLint 9.5, Serverless Framework v4, pnpm 9.4

Your Fastest Path to Production — Build, deploy, and scale your apps with unparalleled ease – from your first user to your billionth.

Render sponsor

📒 Articles & Tutorials

▶  3D in TypeScript with Raycasting — Raycasting is a somewhat old fashioned technique to render 3D environments (you may have seen it in 1992’s Wolfenstein 3D) but it’s easy to understand and worth implementing at least once.

Tsoding Daily

Live Types in a TypeScript Monorepo — Several strategies to make a TypeScript monorepo feel more “alive” in the sense of the propagation of changes.

Colin McDonnell

Intro to Sentry & Codecov: Live Demo — From pre to post-release, learn how Sentry help developers find and fix errors and slowdowns and deploy with confidence.

Sentry sponsor

What Happens When a Major npm Library Goes Commercial? — The ua-parser-js library is commonly used to parse user agent strings and gets over 12 million downloads a month, but it has recently switched to AGPL+commercial licensing.

Matteo Collina

Dual Publishing ESM and CJS Modules with tsup and ‘Are the Types Wrong’tsup makes it easy to bundle TypeScript libraries and ‘Are the Types Wrong?’ analyzes packages for issues with their types.

John Reilly

📄 How to Use Google Sheets as a ‘Database’ from React Paul Scanlon

📺 How Svelte and RSCs are Changing Web Development – A group discussion including Svelte’s Rich Harris, Tracy Lee, Ben Lesh, and Adam Rackis. This Dot Media

📄 Mastering Date Formatting using Intl.DateTimeFormat Rafael Camargo

📄 MobX Memoizes Components (You Don’t Need React Compiler) – If you’re actually using MobX, that is. Mike Johnson

📄 Refactoring a Scroll-Driven Animation from JavaScript to CSS Andrico Karoulla

📄 UUIDv7 Implemented in 20 Languages – Surprisingly short and sweet. Anton Zhiyanov

🛠 Code & Tools

Phoenix: A macOS Window Manager You Can Script with JS — macOS is set to adding more window management features in Sequoia, but how about something you can script entirely with JavaScript right now? GitHub repo.

Kasper Hirvikoski

JSONEditor: A Component for Viewing and Editing JSON — If your app needs to let users work with JSON directly, this is worth a look. It supports both text and tree views and is cross browser compatible. Live demo.

Jos de Jong

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

Userfront sponsor

Rooster v9.6: Microsoft’s Framework-Independent Rich Text Editor — A rich-text editor control neatly nested inside a single div element (demo). Several years old, but still maintained.

Microsoft

NLUX: A Library for Rendering Conversational AI Experiences — If you want to spin up a ChatGPT-style conversational experience on top of your own services or third party AI backends, this provides the pieces needed to get an interface up quickly. GitHub repo.

Salmen Hichri

⚙︎ NodeSwift – Bridges Node.js and Swift so you can write Swift code that talks to Node and vice versa. Kabir Oberai

⚙︎ Vuesion – Boilerplate for Next/Vue app development. Werner-Most Ideen GmbH

⚙︎ Kitbag Router – Type safe router for Vue.js. Craig Harshbarger

QUICK RELEASES:

Electron Store 10.0 – Simple data persistence for Electron apps.

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

Monads 0.7 – Rust-inspired Option, Result, and Either types.

Plasmo 0.88“Like Next.js for browser extensions.”

MUI X 7.7 – Popular React component suite.

React Tag Autocomplete 7.3

🤖 QUICK NOTE

Next week, I’m attending the AI Engineer World’s Fair. If you happen to be there, come and say hi!

It might be a bit late to attend in person unless you’re based in SF, but you can subscribe to the AI Engineer YouTube channel to be notified when the livestreams go live next Wednesday and Thursday if you’d like to see what’s going on.

— Peter Cooper, your editor

The biggest TypeScript release in years?

#​692 — June 13, 2024

Read on the Web

📝 I’ve recently encountered readers who’ve been surprised to learn this isn’t our only JavaScript newsletter. We have Node Weekly and React Status too – check them out if you’re a Node.js or React developer, as we focus more closely on them there! 🙂
__
Your editor, Peter Cooper

JavaScript Weekly

TC39 Meets Again and Advances Key Proposals — The Ecma TC39 group that pushes forward the development of ECMA/JavaScript met again this week and moved several key proposals forward, including Deferred Import Evaluation, Error.isError(), RegExp escaping, and Promise.try.

Sarah Gooding (Socket)

Announcing TypeScript 5.5 RC — This is shaping up to be one of TypeScript’s more significant releases, with popular dev-YouTuber Theo ▶️ dropping a 30 minute video on what he’s calling “the biggest TypeScript release in years.”

Daniel Rosenwasser (Microsoft)

WorkOS: Enterprise-Grade Auth You Can Implement in Minutes — Like an enterprise plan in a box: WorkOS provides flexible, easy-to-use APIs to integrate SSO, SCIM, Audit Logs, User Management, and RBAC. It’s used by some of the hottest startups including Perplexity, Vercel, & Webflow. Future-proof your auth stack with WorkOS.

WorkOS sponsor

How to Compose JS Functions That Take Multiple Parameters“Function composition is beautiful,” says James, who goes on to explain, in his usually elegant way, the use of partial application, currying, composite data structures, and more.

James Sinclair

IN BRIEF:

An industry survey has found while Rust’s popularity is growing rapidly, but ‘JavaScript continues to take the top spot for programming languages’.

The stabilization process of Deno’s Standard Library has begun.

🇮🇪 NodeConf EU is back, taking place in Ireland this November.

RELEASES:

Nuxt 3.12 – The Vue.js meta framework.

Bun 1.1.13 – The one that isn’t Node or Deno.

Node.js v22.3.0 (Current), Ember 5.9, Inertia 1.2, Astro 4.10

State of Frontend 2024 Survey Is Out Now! Hundreds Have Already Joined — Spare a few minutes to fill in the survey and receive a free report on the future of frontend development.

The Software House sponsor

📒 Articles & Tutorials

‘I Tried React Compiler Today, and Guess What..’ — The recently unveiled React Compiler automatically memoizes things – so can we ditch memo, useMemo and useCallback right away? Nadia investigates, finds the rough edges, and helps keep our feet on the ground.

Nadia Makarevich

‘How a Single Vulnerability Can Bring Down the JS Ecosystem’ — A slightly alarmist headline and it’s more about npm, but the issue outlined could have nonetheless posed big problems – luckily, GitHub is on the case.

Roni Carta (Lupin)

Your Fastest Path to Production — Build, deploy, and scale your apps with unparalleled ease – from your first user to your billionth.

Render sponsor

Generating ZIP Files with JavaScriptJSZip makes it easy to dynamically create an archive for users to download.

Josh Martin

Using Node.js’s Test Runner: The Official Guide — A new guide on the official Node site covering the fundamentals of using Node’s new test runner functionality, along with snapshot tests (supported by Node 22.3).

Jacob Smith

📄 Using the Page Visibility API – Set up event listeners to do things when page visiblity changes. Brian Smith

📄 Getting Started with Directus and PreactDirectus is a headless CMS built on top of Node and Vue. Jay Bharadia

📄 Powering Angular with Rust via WebAssembly – How you could start using Rust in your Angular app. Evgeniy Oz

📄 Angular Directives vs. Vue Directives Christian Nwamba

🛠 Code & Tools

DGM.js: Infinite Canvas Library with Smart Shapes — A library for rendering and working with infinitely pannable canvases that contain ‘smart shapes’ that you can script and give various constraints and properties. GPLv3 licensed.

Minkyu Lee

Pastel 3.0: A Framework for Building Ink AppsInk brings the power of JSX and React components to building command line apps. Pastel provides more structure on top of that in a Next.js fashion.

Vadim Demedes

Add Authorization, MFA, Biometrics and More to Your JavaScript App in Just Minutes — It’s about time that somebody talked some sense about OAuth and JavaScript. So we did. You’re welcome.

FusionAuth sponsor

uuid v10: Generate RFC-Compliant UUIDs — Covers all major UUID standards. Works across all major browsers and Node 18+. v10.0 adds support for more types of RFC9562 UUIDs (namely v6, v7 and v8).

Robert Kieffer and contributors

JsonTree.js: Customizable Tree Views for JSON Data — No dependencies, lots of customizations, and it’s easy to theme the trees using CSS variables. Try out some examples on the docs site.

William Troup

Turf.js 7.0: Geospatial Engine for Browsers and Node — A collection of modules for doing spatial analysis, working with GeoJSON data, data classification, and more. GitHub repo.

Morgan Herlocker

Parvus 2.6: Accessible Lightbox with No Dependencies — I love how it says not to use overlays on web pages but if you have to, use this! There’s a CodePen example.

Benjamin de Oostfrees

DON’T OVERLOOK THESE:

⚙︎ Dukpy – A simple JavaScript interpreter for Python. Alessandro Molina

⚙︎ ngx-sonner – An opinionated toast notifications component for Angular, inspired by the React equivalent. Clara Castillo

⚙︎ River.ts – A composable, type-safe Server-Sent Events (SSE) interface. Matthias Tellen

⚙︎ JSVectorMap – Render interactive maps for visualizations. Mustafa Omar

QUICK RELEASES:

Lambda API 1.1 – Zero dependency web framework for serverless JS apps.

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

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

YouTube.js 10.0 – An unofficial way to use YouTube’s internal API.

Starry Night 3.4 – High quality GitHub-like syntax highlighting.

BlockNote 0.14 – ‘Notion-style’ block-based editor.

Marked 13 – Fast Markdown compiler / parser.

🎁 And One for Fun

Bread Jam: Make Variables and Properties Easier to See in VS Code — An interesting new VS Code extension that offers 11 different ways to make variable names stand out more in your editor, with both basic colorization approaches and an interesting emoji-based prefix option.

Ting Wei Jing

The appealing simplicity of htmx

#​691 — June 6, 2024

Read on the Web

JavaScript Weekly

Promises from the Ground Up — Josh notes that in order to truly understand promises, a fundamental part of modern JS development, we need “a surprisingly deep understanding of how JavaScript works and what its limitations are”. Luckily, this tutorial covers all the critical context you need.

Josh W Comeau

💡 If you’re a bit more advanced, you might enjoy Alex MacArthur’s look at controlling promises using Promise.withResolvers().

A Powerful JavaScript Reporting Tool Built for the Web — ActiveReportsJS is the premier JavaScript reporting tool designed for advanced data visualizations in web applications. With many different advanced report builders and viewers, insights can be seamlessly shared with your entire user base.

ActiveReportsJS from MESCIUS inc sponsor

htmx: Simplicity in an Age of Complicated Solutionshtmx provides access to numerous dynamic features, like Ajax requests and page updates, by way of HTML attributes, and has been increasing in popularity recently. Erik looks at why its simplicity is particularly appealing.

Erik Heemskerk

📺 YouTuber DevelopedByEd has a neat ▶️ 15 minute Go + htmx quickstart screencast targeting JavaScript developers keen to explore new approaches.

IN BRIEF:

⚙︎ ESLint has unveiled a new ESLint configuration migrator to help bring your config files up to speed.

Astro’s Starlight documentation site framework has turned one year old – v1.0 is due later this year.

The Val Town bite-size JavaScript deployment platform is really taking off. They’ve added a page of trending Vals to show off what people are up to.

WebAssembly’s JavaScript Promise Integration (JSPI) API has a new API in Chrome 126+.

RELEASES:

Turborepo 2.0 – The high-performance build system.

ESLint 9.4 – Find and fix problems in your JavaScript code.

🦖 Docusaurus 3.4 – The fantastic site / docs site framework.

Prettier 3.3, Biome 1.8, Ember.js 5.9, pnpm 9.2

Revolutionizing UI Development with Chromatic and StackBlitz — In our upcoming live stream, we’ll be speaking with the Chromatic team about actionable strategies to improve your design system workflow.

StackBlitz sponsor

📒 Articles & Tutorials

Data Fetching Patterns in Single-Page Applications — With a level of depth you’d expect from a Martin Fowler production, Atlassian’s Juntao Qiu walks through five different patterns to consider when fetching remote data, using a realistic scenario to show them off.

Juntao Qiu and Martin Fowler

A Brisk VS Code Extension Development Speedrun — Literally a brisk tutorial, but Brisk is also the name of a CI tool the extension in question is being developed for.

Sean Reilly

Tracing: Frontend Issues with Backend Solutions — Join us live to learn how to identify the issues causing poor Core Web Vitals and trace them through your stack.

Sentry sponsor

Full Stack Web Push API Guide — A complete implementation of push notifications in a Remix app. “If you follow the walk through to the end, you’ll have working push notifications.”

Boaz Sender

📄 Node Leaking Memory? setTimeout Could be the Reason Armin Ronacher

📄 Write Your First Chrome Extension: A Guide Lizzie Paris

📄 Goodbye Netlify, Hello Cloudflare – When the bandwidth charges start to sting.. Harrison Broadbent

📺 Effortless Vue.js Forms CDRUC

🛠 Code & Tools

Motion Canvas: Create Dynamic Canvas-Rendered Animations — There’s two parts. A library where you use generator functions to procedurally define animations, and an editor that provides a real-time preview of said animations which you can see in action here.

Motion Canvas

Merge Anything 6.0: Merge Objects and Other Types Recursively — If you’re looking for something that goes a bit deeper than Object.assign(), say.

Luca Ban

TypeScriptToLua: Write Lua with TypeScript — Lua is embedded in all sorts of places (games, Redis, NGINX..) so being able to write JavaScript and have it converted could open up some extra opportunities for you.

TypeScriptToLua Contributors

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

Zigar: Write and Use Zig Code in Node and Electron ProjectsZig is a newish systems language that’s essentially a superset of C/C++. Zigar wants to make using C/C++/Zig code easier in JavaScript projects.

Chung Leong

Wouter 3.2 – Minimalist router for React & Preact. You can now use regular expressions to define custom route patterns too.

PKI.js 3.1 – Pure JS library for working with public key oriented systems. Certificates, signing, etc.

Fontsource – 1700+ open source fonts packaged as npm packages.

tscircuit – Design circuit boards using a React-based approach.

Prisma 5.15 – Popular ORM for Node.js and TypeScript.

melonJS 17.3 – Lightweight HTML5 game engine.

🤖 A quick AI-side

First, a handy library:

KaTeX: The Fastest Math Typesetting Library for the Web — All these AI And machine learning papers and blog posts these days are crammed with mathematical notation, so how about a no dependency, TeX-based approach to rendering them? The sandbox demo page shows off how smooth it is.

Emily Eisenberg and Sophie Alpert

Second, you may recall that last year (in issue 654) I mentioned a new AI engineering event being put on by two JavaScript developers called The AI Engineer Summit. It turned out to be fantastic and it’s back later this month in a much larger form called The AI Engineer World’s Fair (June 25-27 in San Francisco).

The speaker list is a veritable ‘who’s who’ of the ML-leaning development scene with all the main LLM providers present too, so I’ve decided, at the last minute, I need to be there! If you’re interested in going too, they’ve given us a link with 30% off all the ticket prices for you to use.

A variety of JS hacks and creative coding

#​690 — May 30, 2024

Read on the Web

JavaScript Weekly

How 1Password Used esbuild to Cut Browser Extension Build Times — 1Password is a popular password management tool that relies upon a browser extension to fill out passwords on the Web. At over a minute for a single build, things were starting to drag for the devs. Could esbuild help? A fun story with plenty of technical details.

Jarek Samic

Next.js 15 Release Candidate — The popular React meta framework gets ready for a major new release with a RC giving you an opportunity to experiment with React 19 (and React Compiler) support, executing code after a response with next/after, and a few potentially breaking changes.

Delba de Oliveira and Zack Tanner

Everything You Need to Know About Git — Join ThePrimeagen for this extensive video course and ensure you never run into an unsolvable Git problem again. You’ll learn advanced git abilities like interactive rebasing, bisecting, worktrees, the reflog, and more.

Frontend Masters sponsor

aem1k: A Variety of JS Hacks and Creative Coding — This is a fun one. Martin really captures the joy and expressiveness of JavaScript and the Web with his collection of projects, whether it’s offering a NSFW-named tool to convert your JavaScript into just six characters, rendering a spinning globe in 1KB of JS, the Game of Life in 176 bytes, and many more such experiments.

Martin Kleppe

IN BRIEF:

The folks behind the long standing Gulp build tool are running a survey to help make Gulp better and suit modern needs. It closes tomorrow.

🫠 JavaScript’s creator Brendan Eich popped up on Twitter/X to refute a claim that JS is “the most slop” by saying it’s only 50% so.. I don’t get it either.

If you haven’t gone down the JSR rabbit hole yet, let ▶️ Ryan Dahl convince you through his DevWorld 2024 talk. (29 minutes.)

Three.js introduces its own ‘TSL’ shader language as a way to write WebGPU shaders with JavaScript rather than the WebGPU Shading Language.

RELEASES:

Astro 4.9 – The framework that does everything now does even more, gaining React 19 enhancements, plus a Container API for rendering Astro components outside of Astro apps.

Node.js v18.20.3 (LTS) and v20.14.0 (LTS).

Rspack 0.7 – Fast Rust-based web bundler.

Storybook 8.1 – The frontend component workshop.

Deno 1.44

📒 Articles & Tutorials

10 Modern Node.js Runtime Features to Start Using in 2024 — If it ever feels like the new feature spotlight shines too much on Bun or Deno, never fear – Node.js has been taking huge strides forward too. Liran looks at lots of what’s new.

Liran Tal

ECMAScript 2023 Feature: Symbols as WeakMap keys — Dr. Axel continues his look at language features by explaining what WeakMaps are for and why using symbols for keys has added benefits.

Dr. Axel Rauschmayer

Introducing a New Fullstack TypeScript DX from AWS — Build every part of your app’s cloud backend with TypeScript: auth? TypeScript. Data? TypeScript. Storage? TypeScript.

AWS Amplify sponsor

▶  uBlock Origin: Let’s Read the Code — A prolific code reader spends some time digging into the popular ad blocker that’s almost entirely built in JavaScript.

Ants Are Everywhere

Why We Need a Standard JavaScript ORM for SQL Databases — ..and is it Drizzle?

Paul Scanlon (The New Stack)

Want Out of React Complexity? Try Vue — A high level piece that may provide some context if you haven’t dabbled with Vue yet.

Richard MacManus (The New Stack)

Stale Thinking Causes Teams to Thrash — You Need a Breath of Fresh Air ☀️ — Get fresh perspective from product managers who’ve been-there-done-that across tons of domains, use cases, and problems.

Test Double sponsor

📄 Why We Don’t Have a Laravel For JavaScript… Yet Vince Canger (Wasp)

📄 It’s Not Just You, Next.js is Getting Harder to Use Andrew Israel

📄 How to Create a Modal in React with HTML’s <dialog> Colby Fayock

📄 What’s New in Angular 18 Gergely Szerovay

🛠 Code & Tools

Regexper: Display JavaScript Regular Expressions as Railroad Diagrams — Might come in handy for learning regular expressions or if you have a complex regular expression and you don’t know what it does (not an uncommon situation..!)

Jeff Avallone

Hono 4.4: The Standards-Based JS Web App Framework for EverywhereHono is a small, fast web framework with a straightforward API, middleware support, and that runs pretty much on anything (Deno, Bun, Node, Cloudflare, and more). v4.4 brings it to JSR, adds timeout middleware, and a helper to get information about connected clients.

Yusuke Wada and Contributors

Your Fastest Path to Production — Build, deploy, and scale your apps with unparalleled ease – from your first user to your billionth.

Render sponsor

Inertia.js 1.1: Build SPAs for Any Backend — Inertia acts as ‘glue’ between various frontend libraries (React, Vue, or Svelte, say) and server-side frameworks (e.g. Rails or Laravel).

Jonathan Reinink

ShareDB 5.0: Realtime Database Backend Based on Operational Transformation — For when you need real time synchronization of JSON documents (such as for behind a real time collaboration app).

ShareJS

PyMiniRacer v0.12.2 – Call your Python from your JavaScript from your Python.

Knip 5.17.0 – Finds and removes unused files, dependencies and exports. Now with more.

PM2 5.4 – Popular Node.js-based process manager for production.

Melange 4.0 – OCaml compiler for JavaScript developers.

Neutralinojs 5.2 – Lightweight cross-platform desktop app framework.

Billboard.js 3.12 – The popular chart library gets funnel charts.

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

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

Retire.js 5.0 – Scans for JS libraries with known vulnerabilities.

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

RE:DOM 4.1 – Tiny library for creating user interfaces.

AlaSQL.js 4.4 – Isomorphic JavaScript SQL database.

is-what 5.0 – Simple, small JS type check functions.

FxTS 1.0 – Functional programming library.

⏰ And one for fun..

Qlock: A JavaScript Quine Clock — We linked to Martin’s array of creative JavaScript experiments earlier, but why not finish with one that particularly tickled us? A quine is a program that takes no input but manages to produce, as output, its own source code. Here’s a fun JavaScript example that isn’t merely a quine, but a clock too.

Martin Kleppe