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.

Modern shell scripting with JavaScript

#​672 — January 25, 2024

Read on the Web

JavaScript Weekly

Better JavaScript Shell Scripting with Bun Shell — Performance-focused server-side runtime Bun continues its rapid evolution with a side quest into the world of shell scripting by making it easier, cross-platform friendly, and less verbose. zx offers similar (but less integrated and focused) functionality to Node users, if you should prefer.

Jarred Sumner (Bun)

Announcing AdonisJS v6 — If you want a backend Web framework with amazing docs and packed with features, Adonis is a good choice. v6 is a big step forward moving to ESM by default, with more type safety overall (including for routes and middleware references), a new validation library, and more.

Harminder Virk

Learn Vite, The Fast Build Tool for Modern Web Projects — Join Steve Kinney for this video course tour of Vite’s capabilities, including a look at bundling, optimizing static assets, hot module reloading, and its plugin ecosystem. You’ll come away proficient at using Vite to build scalable, performant apps.

Frontend Masters sponsor

QuickJS: The Small, Embeddable JavaScript Engine — Several years ago, Fabrice Bellard, the genius behind FFMPEG and JSLinux, built a tiny and complete JavaScript engine in C. It now supports ES2023 and its latest release adds top-level await in modules and its REPL, as well as support for some cutting edge JS features (changelog).

Fabrice Bellard

IN BRIEF:

@npm_malware on Twitter/X shares malicious packages detected in real time.

JetBrains has opened up its Early Access Program for WebStorm 2024.1, its commercial JS/TS IDE.

📅 React Conf 2024 takes place this May 15-16 online and at Lake Las Vegas.

RELEASES:

Astro 4.2 – The framework that never ceases to amaze.

Node.js 21.6.1 (Current) – A bug fix for Undici.

Puppeteer 21.9 – Now using Chromium 121.

Next.js 14.1, Qwik 1.4, Expo Router v3, Redux Toolkit 2.1

📒 Articles & Tutorials

Web Components in Earnest — This is.. epic! If you want to really get a walk through the journey of building an entire app using Web Components and JavaScript, this is it. The app in this case is simple, but complete, and the author shows off the realities of going all in with Web Components here.

David Bryant Copeland

▶  An Alpine, HTMX, and Astro-Based Wordle App — Popular dev YouTuber Jack demonstrates building a Wordle clone with a modern Alpine, HTMX and Astro-based stack. Or you can go straight to the code, if you prefer.

Jack Herrington

Complete Your AI Coding Experience with Wallaby.js — Get instant test feedback and powerful debugging for AI code suggestions.

Wallaby Team sponsor

How to Start a React Project in 2024 — Robin explains the pros and cons of a few common approaches, including using Vite, Astro, and Next.js.

Robin Wieruch

Build a Next.js App in Storybook with React Server Components and Mock Service Worker — How to develop, document, and test RSC apps in isolation, while using MSW to mock network requests.

Michael Shilman

Reversing and Tooling a Signed Request Hash in Obfuscated JS

Brett Buerhaus

Create a Currency Converter with HTML, CSS, and Vanilla JavaScript

Esther Vaati

🛠 Code & Tools

Jint 3.0: A JavaScript Interpreter for .NET — Run JavaScript within a .NET app and expose .NET objects and functions to JavaScript code. v3 arrives after seven years of work and is the most standards-compliant JS engine running entirely within .NET.

Sébastien Ros

Mutative: A Library for Efficient Immutable Updates — A library for efficient immutable updates, boasting being 2-6x faster than naive handcrafted reducers, and even more than 10x faster than Immer. GitHub repo.

Michael Lin

Auth Without Complexity — Authentication in a Straightforward Platform — Userfront streamlines authentication & access control so engineers can focus on their core business. Read the docs now.

Userfront sponsor

React Email 2.0: Build Better Emails with ReactReact Email is a collection of unstyled components for creating emails using JSX and React (this example shows you the basic idea).

Gabriel Miranda (Resend)

workerpool 9.1: Offload Tasks to a Pool of Workers — A long established thread pool library that works not only on Node but also in the browser.

Jos de Jong

Microsoft TypeSpec: A TypeScript-Inspired Way to Define APIs — A language for concisely describing cloud service APIs and generating other API description languages (e.g. OpenAPI), client and service code, docs, and more. Formerly known as CADL.GitHub repo.

Microsoft

Receive, Authenticate, Transform, Filter, Route, and Deliver Webhooks — The Hookdeck Event Gateway is a reliable platform to support event-driven application development across the full development lifecycle.

Hookdeck sponsor

Partytown 0.9: Run Third Party Scripts in a Web Worker — A way to run resource intensive scripts on a separate thread (in a web worker) to let the main thread remain responsive. GitHub repo.

Partytown

pretty-ms 9.0: Convert Milliseconds to Readable Strings — 1337000000 → 15d 11h 23m 20s

Sindre Sorhus

nmea.js: A Library to Parse Maritime Electronics Data — I’d never even heard of NMEA till now, but if you work with sonars, gyrocompasses, and similar marine electronics, this is for you.

Bruno Vieira

Zustand 4.5 – Barebones flux-y state management.

Mongoose 8.1 – MongoDB object modelling approach.

EverShop 1.0 – Node.js-based ecommerce platform.

pretty-quick 4.0 – Run Prettier on changed files.

wavesurfer.js 7.7 – Waveform rendering and playback.

Flatbush 4.3 – Fast spatial index for 2D points/rectangles.

Culori 4.0 – Comprehensive color library.

Astro + htmx + Alpine.js == AHA

#​671 — January 18, 2024

Read on the Web

JavaScript Weekly

console.delight — You use console.log to output text, but did you know that in the browser console it can be used to render other things, like SVGs and HTML? This post is packed with examples and goes deeper into the creative options opened up by the technique than you’ll probably ever need 😅

Zach Saucier

The AHA Stack: Another Way to Build Modern Webapps — The AHA Stack is a full-stack webapp approach that brings together Astro, htmx, and Alpine.js, and where you send HTML over the wire. This is a fantastic showcase site that sells the idea well, complete with explanations and examples.

Flavio Copes

Transform the Way You Handle Forms with SurveyJS Form Libraries — With SurveyJS UI components you can set up a powerful form management system fully integrated into your IT. Effortlessly build, edit and style dynamic JSON-based forms in the drag & drop form builder with an integrated CSS-based theme editor.

SurveyJS sponsor

React Libraries for 2024 — The latest update of a popular, opinionated, annual guide to libraries and tools suitable for various tasks when building React apps, covering areas like state management, UI libraries, authentication, and testing.

Robin Wieruch

IN BRIEF:

htmx has just become 0 clause BSD-licensed. It was 2 clause BSD before – the main change being attribution is no longer required on redistribution.

Yagiz Nizipli ▶️ went on the Syntax․fm podcast to talk about all things JS performance related.

A showcase of what PWAs can do today.

A look at how to compile a standalone executable using modern JavaScript runtimes.

RELEASES:

Prettier 3.2 – The popular code formatter gains support for JSONC and Angular ICU expressions.

Knip 4.0 – Find and remove unused files and dependencies.

ReScript 11.0 – OCaml-inspired, typed ‘compile to JS’ language.

Node.js v21.6.0 (Current)

Node.js v20.11.0 (LTS) – Now with import.meta.dirname and import.meta.filename

📒 Articles & Tutorials

The Golden Rule of Assertions — Artem shares a tip that helps him write better tests or, as he calls it, the ‘Golden Rule of Assertions’: “A test must fail if, and only if, the intention behind the system is not met.”

Artem Zakharchenko

▶  Let’s Code Minesweeper in JavaScript — Ania is back with another of her fantastic step-by-step walkthrough videos. Now you can actually implement Minesweeper, rather than waste time playing it.. 😁

Ania Kubów

JavaScript Frontend Error Monitoring 101 — Take a crash (pun intended) course on JavaScript error monitoring and debugging with Sentry. Read on.

Sentry sponsor

5 CSS Snippets Every Frontend Developer Should Know in 2024 — Adam did a similar roundup last year, now he’s back with more toolbelt-worthy, powerful, CSS tips worth knowing.

Adam Argyle

Migrating from Zod to Valibot: A Comparative Experience — Zod and Valibot both provide a mechanism to validate data using types, and Matthew looks at how he found Valibot better for validating his contact form.

Matthew Kwong

A Difference Between getElementByID and querySelector — IDs with leading digits pose problems when it comes to CSS selectors.

Kiru from Switzerland

Kind of Annoyed at React“Just a little ranty rant about my fave JS library”

Cassidy Williams

The Building Blocks of a Greenfield Vue App in 2024

Fotis Adamakis

Manually Dispatching an Event to a Target

Chris Coyier

🛠 Code & Tools

Heat.js: A Heat Map Visualization Library — It has no dependencies, and is small, responsive, and themeable. GitHub repo.

William Troup

Some Top Frontend Tools of 2023 — Louis walks through a collection of tools that he found useful in the past year. It’s a rather eclectic selection – I certainly hadn’t heard of many of them – and you’re sure to find some that could help in your day-to-day work.

Louis Lazaris

Drop-In Authentication & User Management for Next.js — Add auth in minutes with Clerk’s prebuilt components, hooks, and helpers for Next.js 14.

Clerk sponsor

Tinybench: A Tiny, Simple Benchmarking Library — No dependencies – it uses whatever timing capabilities are available (e.g. process.hrtime or peformance.now). You can then benchmark whatever functions you want, specify how long/how many times to benchmark, and get a variety of stats back.

Tinylibs

🛰  Orbital Object Toolkit: Orbital Mechanics Made Easier — This is miles above my paygrade (about 100 miles in fact) but if determining the positions of satellites and terms like ‘SGP4 propagation’ and ‘TLE parsing’ make sense to you..

Theodore Kruczek

worker-timers: setInterval/setTimeout for Unfocused Windows — When a tab loses focus, any timers used within can be throttled. A workaround is to use a Web Worker.

Christoph Guttandin

A Reliable Event Gateway for Asynchronous Applications — Receive, send, and route messages across your event-driven architecture with Hookdeck’s platform for engineering teams.

Hookdeck sponsor

Sutra.js: A Behavior Tree Library for Managing Behavior Patterns — Primarily targeting game development use cases, Sutra lets you define and model complex behavior patterns in code.

Yantra

🗓 Schedule-X 1.9 – Event calendar/date picker (above).

🤖 LangChain 0.1.0 – A popular LLM app framework available in both Python and JavaScript variants.

Frappe 15.10 – Low code Python + JavaScript web framework.

React Redux 9.1 – Adds a new syntax for pre-typing hooks.

NanoPop 2.4 – Fast, minimal positioning engine.

🧊 d3-3d 1.0 – D3-powered visualizations, but 3D.

Angular 17.1🐦 More context here.

Is htmx Just Another JS Framework?

#​670 — January 11, 2024

Read on the Web

JavaScript Weekly

Is htmx Just Another JavaScript Framework? — Despite being four years old, htmx has seen a surge in popularity recently, parly due to fatigue with ‘big frameworks’ and also because its simple HTML-based approach to adding functionality to a page appeals to an increasingly diverse group. But is it just another framework itself? Yes. And no.

Alexander Petros

▶  HTMX for React Developers in 10 Minutes — You’re not interested in discussions about semantics.. you just want to get something done with htmx? Here, Jack takes ten minutes to show off the essentials.

Jack Herrington

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

SpreadJS from MESCIUS inc sponsor

33 JavaScript Concepts Every Developer Should Know — A curated collection of links to tutorials on 33 different areas worth understanding well, including: types, closures, equality, scope, and different engines. We linked this two years ago, but it remains frequently updated.

Leonardo Maldonado

Introducing fsx: A Modern Filesystem API for JavaScript — Filesystem APIs in JavaScript runtimes haven’t been great for a long time. This is one prominent JavaScript expert’s attempt to make a better one.

Nicholas C. Zakas

IN BRIEF:

CodePen shares its top 100 ‘pens’ of 2023. Lots of fantastic bits and pieces to look through and learn from here.

Bored? The Deno team is running a little hackathon over the next week.

jsfree.org is a new effort to catalog web services that can work without JavaScript.

🌼 Enjoy the drawing.garden.

RELEASES:

Docusaurus 3.1 – Popular site generator/framework.

Rspack 0.5 – Fast Rust-based web bundler.

MikroORM 6 – TypeScript ORM for Node.js.

Node.js v20.11.0 (LTS), Bun 1.0.22, npm 10.3 and Astro 4.1.

📒 Articles & Tutorials

The Website vs. Web App Dichotomy Doesn’t Exist — An interesting think piece that will help you flesh out your own opinions on the matter: “If there’s one takeaway from all this, it’s that the web is a flexible medium where any number of technologies can be combined in all sorts of interesting ways.

Jake Lazaroff

Rust-Based JavaScript Linters: Fast, But No Typed Linting Right Now — An explanation of why the speed gains from Rust-powered linters aren’t comparable to the full feature set of typescript-eslint.

Josh Goldberg

Reduce 80%+ Latency with Vercel Edge Functions — Learn how TiDB Serverless + Vercel Edge Functions can significantly reduce latency for global users. Read now!

TiDB sponsor

The State of Benchmarking in Node.js — While Node has always been fast (thanks largely to its V8 underpinnings), there’s a renewed focus on performance in the face of benchmarks and claims from alternatives like Deno and Bun. Lars looks at the ecosystem of benchmarking options in the space.

Lars Kappert

A CSS Media Query for Scripting Support — A new media query (e.g. @media (scripting: none)) was just added to Chrome (and Edge) to let you to define styles upon whether scripting languages are available. It’s supported in all major browsers now – a rare case of Chromium playing catch-up!

Stephanie Stimac

▶  What is Remix Exactly? — As in Remix, the full-stack web framework.

Alem Tuzlak

🛠 Code & Tools

zip.js: Library to Zip and Unzip Files — Sounds simple, and it is, but it supports a couple of different formats and can generate password protected ZIPs. There are a few demos, but the simplest one sold me on its own. GitHub repo.

Gildas Lormeau

Element Plus: Vue 3 Component Library — Out of the box you get a large variety of clean components with a minimal vibe. You can see them in action here.

Element Plus Team

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

RE2JS: Linear Time Matching for Regular Expressions — RE2 is a regex engine built by Google designed to operate in time proportional to the size of the input, in order to avoid so-called ‘ReDoS’ problems backtracking can cause. There are bindings for Node.js, but this version works in the browser.

Oleksii Vasyliev

Penrose: Beautiful Math Diagrams by Writing Plain Text — It might sound a little like Mermaid (indeed, their homepages are strikingly similar) but its scope feels somewhat more math-focused – there are many examples.

Penrose Contributors

DOMPurify 3.0.8: A Fast, Tolerant XSS Sanitizer for HTML — Supports all modern browsers and is heavily tested. There’s a live demo here.

Cure53

remoteStorage: Cross Browser/Device Persistence — Combines the localStorage API with a remote server to persist data across browsers and devices – so basically, imagine localStorage but remote. Here’s the server part.

Frigade

eslint-plugin-vue 9.20.0 – The official ESLint plugin for Vue.js now supports Vue 3.4. Homepage.

file-type 19.0 – Detect file type from a Buffer, Uint8Array, or ArrayBuffer.

React Unity WebGL 9.5 – Embed Unity WebGL builds in React apps.

htmlparser2 9.1 – A fast and forgiving HTML/XML parser.

YouTube.js 8.2 – Wrapper around YouTube’s internal API.

React-PDF 7.7 – React component to display PDFs.

HLS.js 1.5 – HTTP Live Streaming client library.

React Icons 5.0 – Easily use popular icons in React apps.

Chai 5.0 – BDD / TDD assertion library.

JavaScript’s rising stars

#​669 — January 4, 2024

Read on the Web

JavaScript Weekly

🌟 The 2023 JavaScript Rising Stars — At the start of each year, Michael rounds up the projects that gained the most popularity on GitHub in the prior year. Rocketing to #1 is the shadcn/ui suite of React components, but there are a lot of fresh entries. Bun and Next.js stay on the list, while htmx and Drizzle ORM make their first appearances in the top ten.

Michael Rambeau et al.

10 Interview Questions Every JS Developer Should Know in 2024 — I’d usually shy away from a list-based post on Medium, but this is a good exception. As a rare example of a top-notch developer who’s also involved in hiring other developers, Eric provides useful advice.

Eric Elliott

Authentication & User Management for the Modern WebClerk is the easiest way to add authentication and user management to your app.
With prebuilt UI components and feature-rich SDKs & APIs, Clerk is purpose-built for React, Next.js, and the modern web. Get started with Clerk for free.

Clerk sponsor

Vue 3.4 Released — Vue 2 went ‘end of life’ last week, but never fear, we got a new version of Vue 3 to make up for it, complete with a rewritten, faster template parser, and a more efficient reactivity system. If you prefer a screencast tour, ▶️ Erik Hanchett has one for you.

Evan You

😢 If the loss of Vue 2 stings, you might enjoy Fotis Adamakis’ tribute.

IN BRIEF:

Oracle is introducing JavaScript support in MySQL.

Some 2024 predictions from JS framework maintainers.

While I was still busy eating turkey, someone created an ‘everything‘ npm package (complete with an 80MB package.json) that turned every public package into a dependency, preventing any of them from being unpublished. Unsurprisingly, this resulted in much drama. 😅

Minko Gechev walks through the results of the Angular Developer Survey 2023.

A look at both the current and future state of Storybook in 2024.

RELEASES:

Dependency Cruiser 16.0 – Validate and visualize dependencies.

VueFire – A first-class Vue + Firebase experience.

Effection 3.0 – Structured concurrency and effects.

Parcel 2.11 – The zero config build tool.

Node.js v21.5.0 (Current)

📒 Articles & Tutorials

Let’s Bring Back JavaScript’s with Statement..? — Famously roasted in JavaScript: The Good Parts before its deprecation, with isn’t a popular language feature at all, so Alex’s appeal here is partly tongue in cheek. Nonetheless, with has some potentially interesting uses in modern JavaScript.

Alex MacArthur

Session Replay Basics – Debug Web App Issues Faster — Join us on Jan 11 to learn how Session Replay can help find and resolve the most difficult-to-reproduce issues in JavaScript.

Sentry sponsor

Making Sense of ‘Senseless’ JavaScript Features — We’ve tackled with (above), now Juan Diego Rodriguez looks at several other seemingly “absurd” JS eccentricities, explains how they came into existence, and tries to help you avoid the problems they cause.

Juan Diego Rodriguez

A Look at 2023’s New Array Methods — A look at toReversed(), toSplice(), toSorted(), and with() (no, not that with.. 😆)

Chris Ferdinandi

What the Heck is a Homomorphic Mapped Type?“Let’s try to understand what the TypeScript guys mean when they talk about homomorphic mapped types.”

Andrea Simone Costa

React Server Components: The Good, The Bad, and The Ugly“I’d argue that adding server capabilities to React is much less important than fixing its many existing issues.”

Mayank

Try a Lightning-Fast Pairing Tool Built with You in Mind — Tuple will change the way you think about pair programming. Try it with your team free for 14 days, no card required.

Tuple sponsor

Introduction to HTMXhtmx is an interesting library for imbuing your HTML with dynamic functionality in a lightweight, dependency-free way.

Refine

🔥 Simulating Fluids, Fire, and Smoke in Real-Time — Only tangentially JavaScript related, but a fantastic article nonetheless.

Andrew Chan

The Complete Playwright Cheatsheet

Mohan Ganesan

🛠 Code & Tools

React Aria 1.0: 40+ Accessible Components, Your Way — Anyone who follows Devon Govett (also of Parcel fame) on social media will know just how much he’s put into this suite of components, and v1.0 is now here. If you’re building your own components and want to get accessibility right, this is for you. Devon explains a little more here.

Adobe

📆  Schedule-X: A Material Design Calendar and Date Picker — Available in the form of React, Vue or plain JS components. GitHub repo.

Tom Österlund

Auth Without Complexity — React Auth in a Straightforward Platform — Userfront streamlines authentication & access control so engineers can focus on their core business. Read the docs now.

Userfront sponsor

quick-lint-js 3.0: Tool to Find JavaScript Bugs As You Code — We first linked this two years ago when it hit 1.0. It’s an interesting alternative to tools like ESLint and aims to give you instant feedback while coding. v3.0 introduces TypeScript support.

Matthew Glazar

Plotteus: A JavaScript Library for Data Storytelling — Looks to be a powerful solution not just for creating static visualizations (graphs, plots, etc.) but interactive ones that visualize data changes via scrolling, UI controls, or other user interactions.

Bartosz Prusinowski

LIPS: A Scheme-Style Lisp in JavaScript — A Lisp interpreter written in JavaScript that also has good integration with JavaScript both in the browser or atop Node.js.

Jakub T. Jankiewicz

💡 Prefer Smalltalk to Lisp? Amber might be for you.

vue-concurrency 5.0 – Concurrency ops for Vue and Composition API.

Secretlint 8.1 – Tool to prevent committing credentials/secrets.

Wretch 2.8 – Tiny, fluent wrapper built around fetch.

wavesurfer.js 7.6 – Waveform renderer and player.

DOCX 8.5 – Generate .docx/Word files from JS/TS.

jest-dom 6.2 – Jest matchers to test DOM state.

lowdb 7.0 – Simple, fast JSON database.

Reflecting on a big year for JavaScript

#​668 — December 21, 2023

Read on the Web

🎄 Welcome to the final issue of 2023! We’re taking a week off for Christmas, so this issue focuses on looking back at the past year and the items that intrigued you the most. We’re back at full steam on January 4, 2024 and we hope you have a fantastic holiday season.
__
Peter Cooper and the Cooperpress team

JavaScript Weekly

🎉  V8 is Faster and Safer Than Ever — The V8 team wants to end the year on a high and they’ve certainly pulled it off performance-wise. This post covers the highlights for the V8 engine in 2023, including the new Maglev mid-tier JIT compiler, the faster HTML parser, and support for several new JS features.

Victor Gomes (V8)

Announcing SvelteKit 2 — SvelteKit’s first official release was a year ago, and despite its relative youth, the framework has been quickly embraced by the community. This 2.0 release is an incremental one, adding support for Vite 5, and laying the groundwork for Svelte 5 which is due for release in 2024.

Svelte

Feel the Power of More Than 420,000 Teammates and Work #LikeABosch — At Bosch, we shape the future with high-quality technologies and services to inspire people and improve their lives. And it’s our people who make us remarkable. Our success is your success. Let’s celebrate together. Learn more.

Bosch sponsor

date-fns v3 Released — The hugely popular suite of 200+ functions for working with dates in JavaScript has been rewritten in TypeScript, reintroduces String date arguments, has ESM support on Node, and all functions now export via named exports. GitHub repo.

Sasha Koss

v0: Vercel’s AI-Powered React Component Creator — The AI-powered v0 looked fascinating on its release, but has been stuck behind a waitlist till now. Vercel has dropped that list, opening it to all users. Even Larry David would admit it’s pretty, pretty good.

Vercel Labs

IN BRIEF:

RIP Vue 2.x: If you’re using Vue 2, be prepared: Vue 2 goes ‘End of Life’ (EOL) on December 31st, 2023.

We’ve revisited Robin Wieruch’s 10 Web Development Trends in 2023 from January 2023 – he was on the money with all of them.

Linus Schlumberger took a look back at all the main new JS and TS features of the past three years.

Conversely, The New Stack took to looking at what’s next for JavaScript.

Remote Workshop: Svelte & SvelteKit – Afternoons of Jan 30 to Feb 1

Mainmatter sponsor

▶  TypeScript Origins: The Documentary — Videos don’t tend to do well in JavaScript Weekly, but this was the most popular one, so I wanted to feature it again! I truly enjoyed watching all of this; it’s so well made. It digs into the motivations and process behind TypeScript’s creation and release, and could easily replace Die Hard in your Christmas rotation. Maybe.

OfferZen

26 Web Dev Terms You May Not Have Heard Of

Jens Oliver Meiert

📒 Top Articles & Tutorials of 2023

As determined by their popularity in JavaScript Weekly.

Deep Cloning Objects in JavaScript, The Modern Way — I’m as surprised as you, but this was the top-clicked link in 2023. If you’ve been leaning on something like Lodash for deep cloning, we “finally now have the built-in structuredClone function to make deep cloning objects in JavaScript a breeze.”

Steve Sewell

Web Components Will Outlive Your JavaScript Framework — Web Components have been having ‘quite a moment’ this year and this looks set to continue in 2024. This was a spicy opinion piece but the points raised provoked a lot of discussion and remain highly relevant in the JS zeitgeist.

Jake Lazaroff

What Is Deeper SAST in JavaScript? — Read about the expanded capabilities of Sonar’s SAST to help detect security vulnerabilities in your JavaScript apps.

Sonar sponsor

You’ve Got Options for Removing Event Listeners — A review of some of the most common approaches available to remove event listeners in JavaScript.

Alex MacArthur

Things You Forgot (or Never Knew) Because of ReactThe item that was popular in both this newsletter and our React newsletter and easily one of the ‘classics’ of the year.

Josh Collinsworth

Writing JavaScript Without a Build System — Using a variety of build tools for things like bundling and transpiling is reasonably standard in modern JavaScript development, but what if you want to keep things simple? For simple things, it’s not necessary, says Julia. This led to a lot of discussion on Hacker News.

Julia Evans

Julia didn’t mention them, but 2023 was also the year that import maps became broadly supported in browsers, opening up extra opportunities for build-free JavaScript. The whole topic remains a little up in the air, though, judging by the reaction to DHH’s (he of Ruby on Rails fame) excitement about the ‘no build’ experience.

🛠 Top Code & Tools of 2023

As determined by their popularity in JavaScript Weekly.

UnsuckJS: Comparing Lightweight JavaScript Options — A list of frontend JS libraries in a table on a single, fast page. It remains a handy way to see the relative popularity, file size, and latest versions of libraries as diverse as Preact, Bau, htmx, Hyperapp, and Mithril.

Adam Hill

React Libraries for 2023 — The React ecosystem is so large that there’s often a problem of being spoiled for choice, so opinionated guides to different solutions tend to do well, like this annual list from Robin.

Robin Wieruch

Session Replay Basics – Debug Web App Issues Faster — Join us on Jan 11 to learn how Session Replay can help find and resolve the most difficult-to-repro issues in JavaScript.

Sentry sponsor

A Huge Year for Playwright — The popular Web testing and automation framework took some serious steps forward in 2023, particularly with v1.32.0 (linked above) offering a ‘UI mode’ that lets you explore, run and debug tests in a UI environment, complete with built-in watch mode. ▶️ This video provides a good introduction.

Microsoft

You Don’t (May Not) Need Lodash or Underscore — Inspired by the popular You Might Not Need jQuery, this extensive document provides pure JS alternatives to almost 100 different functions as you’d find in popular utility libraries like Lodash.

You Don’t Need

Driver.js: Tours, Highlights, Contextual Help, and More — A no-dependency library for putting together on-page tours and contextual help. The project is a few years old but was rewritten in TypeScript in 2023, gained numerous enhancements, and got a fresh lick of paint.

Kamran Ahmed

Transformers.js: Running ML Models in Your Browser — Transformers are a type of machine learning model often used in language or visual processing and while running these in the browser remains in its infancy, Transformers.js opens up some ML models to you with some impressive demos here.

Xenova

DeviceScript: Microsoft’s Even-Tinier TypeScript — DeviceScript brings the TypeScript experience to low-resource microcontroller devices. It’s compiled to a custom VM bytecode that can run in such constrained environments (a la Go’s TinyGo.) It’s aimed at VS Code users but there’s a CLI option.

Microsoft

Please note that these are the items that got the most clicks in the newsletter, but as we’ve covered throughout the year, many projects have had significant releases this year, including Deno, Astro, TypeScript, Node.js, Ember and Bun.

That’s all for now, and we’ll see you again in 2024! ❄️