Month: July 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.

#​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 2024 — dotJS 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 JS — Poku’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.14 – Wasp 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.

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

#​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.6 – Qwik 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