#​685 — April 25, 2024
JavaScript Weekly
JSR is Not Another Package Manager — When Ryan created Node, JavaScript had no packages or standard module system. npm and CommonJS took off, and tools like Yarn or pnpm extended npm in certain areas, but in today’s ES modules era, it’s time for a transformation. JSR is not merely a new npm, but a shift in how packages are distributed, tailored for the modern era.
Ryan Dahl
Node.js v22 (Current) Released — The newest, cutting edge, major version of Node lands with some key enhancements. v22 becomes the new ‘current’ release (becoming active LTS in October). It adds support for require-ing ESM, gets a built-in WebSocket client, upgrades to V8 12.4, and includes a task runner (e.g. node –run task_name). This blog post takes a closer look.
Rafael Gonzaga
💡 If you’re a Node developer, be sure to subscribe to Node Weekly as well, where we go into more depth of server-side JavaScript each week.
Lydia Hallie Tests Your JavaScript Knowledge — Challenge your core knowledge with 50 interactive quiz questions covering topics like the event loop, scopes and closures, classes and prototypes, garbage collection, and more. After each question, you’ll get an in-depth visual explanation from Lydia to deepen your understanding of fundamental JS concepts.
Frontend Masters sponsor
pnpm 9.0: The Efficiency-Focused Package Manager — pnpm has long been a fantastic option for folks looking to save disk space and CPU cycles (or for its great monorepo support) while maintaining most of what makes npm great. v9.0 drops Node 16 and 17 compatibility, honors the packageManager field in package.json, makes some default config changes, and adopts Lockfile v9.
pnpm
IN BRIEF:
🙈 Yesterday was JS Naked Day, a day to go entirely without JavaScript. Sadly we missed it.. ðŸ˜
🇫🇷 dotJS 2024 is a JavaScript conference taking place in Paris, France on June 27. The speaker roster so far is pretty compelling.
rcompat is an interesting JS interoperability and runtime compatibility layer for servers, so you can avoid the differences between Node, Deno and Bun.
RELEASES:
Electron 30.0 – Now with Chromium 124, V8 12.4, and Node.js 20.11.1.
Hexo 7.2 – Static site generator for blogging.
Ember 5.8, Ionic 8, SWC 1.5, Knip 5.10.0
📒 Articles & Tutorials
A Tale of Migrating a Project to Bun — Eric, an engineer at Render, walks through the steps of how he migrated his Sveld project to Bun (replacing Yarn and Vitest in the process), including some minor gotchas he encountered, and what the speed gains were.
Eric Liu
The Frontend Developer/Engineer Handbook 2024 — A guide to the current webdev landscape, covering how to get up to speed on topics like editors, CSS, UX, UI, the command line, tools and frameworks, perf, accessibility, etc.
Cody Lindley
3 Reasons to Use JavaScript Libraries for Graph Visualization — Easily add network visualization capabilities to your applications, while cutting down on dev time.
Linkurious sponsor
HTML Attributes vs DOM Properties — They’re different, but often coupled. Jake outlines the the difference, and why it matters.
Jake Archibald
▶  A Node.js Streams Masterclass — An hour-long odyssey with the creator of Fastify (and Node.js TSC member) into the world of streams. A stream is like an array over time.. we learn, before going into live coding and demos.
Matteo Collina
How I Fixed My Brutal TTFB (Time to First Byte) — All it took was two small changes to how data is fetched to reduce the p75 TTFB from 3.46s to just 704ms. Learn more.
Sentry sponsor
📄 The Problem with new URL(), and How URL.parse() Fixes That Kilian Valkhof
📄 The Intl.Segmenter Object is Now Part of Baseline – Interoperable, locale-sensitive text segmentation. Rachel Andrew
📄 Event Dispatch in Angular – Under-the-hood of the new event delegation system. Ramanathan and Wilkinson
📄 The Making of a TypeScript Feature: Inferring Type Predicates Dan Vanderkam
📄 Adding ESLint and Auto-Fixing an Existing TypeScript Project Daniel Doubrovkine
📺 Using TC39 Proposed Signals in React and Svelte Today – Jack Herrington
📄 Quirks of Escaping JavaScript for a script Tag James Fisher
🛠 Code & Tools
📊 Unovis: A Modular Data Visualization Framework — Works with React, Angular, Svelte, Vue or plain old JS/TS. Handles all sorts of things from Sankey diagrams to maps, graphs, chord diagrams, and traditional line/area charts. The v1.4 release adds support for annotating visualizations in a flexible way. There’s a gallery of examples (with code) if you want to dig in.
F5, Inc.
Transformational Auth & Identity | Userfront — “Compared to our previous experiences in the security/auth space, Userfront is an order of magnitude simpler to use.”
Userfront sponsor
ReScript 11.1 Released with Improved JSX Support — ReScript is an OCaml-inspired, typed language that compiles to JavaScript and has a JSX transform built into the language. JSX support was previously solely for React use cases, but now works with Vue, Preact, and other approaches too.
The ReScript Project
typed-xlsx: Feature-Rich Type-Safe Excel Reporting — Define a strongly typed spreadsheet schema, then populate and work with the sheets directly from JS/TS, such as for generating reports for users – example code. Wraps around SheetJS. GitHub repo.
Cyprien Thao
Devalue 5.0: Like JSON.stringify, But.. — “Gets the job done when JSON.stringify can’t.†Namely, it can handle cyclical and repeated references, regular expressions, Map and Set, custom types, and more.
Rich Harris
imask.js 7.6.0: A Vanilla JavaScript Input Mask — Prevent users from entering invalid values. Has plugins for Vue, Angular, React, Svelte, and Solid, as needed.
imaskjs
browser-or-node 3.0: Figure Out Where Your Code is Running — Provides a simple way to tell if your code is currently running in a browser, in Node, in a Web Worker, or in Deno. Works with both ESM and CJS imports.
Dinesh Pandiyan
MistCSS 0.4 – Create components using only CSS, i.e. JS-from-CSS. v0.4 adds Hono and CSS variable support.
Accessible Autocomplete 3.0 – The UK government’s very own autocompleting input component. (Examples.)
Mercurius 14.1 – Implement GraphQL servers and gateways on Fastify.
Vision Camera 4.0 – Advanced camera control for React Native.
webdav-client 5.6 – WebDAV client library for Node & browsers.
ðŸ JSPyBridge 1.2 – Run Python from Node or vice versa.
MUI X 7.3 – Popular React component suite.
Source: Read MoreÂ
