Category: News

#​706 — September 26, 2024

Read on the Web

JavaScript Weekly

Deno 2.0 Release Candidate — Deno started life as a manifestation of ideas that Node’s original creator, Ryan Dahl, had after his experiences with Node. Deno 2 is the next step: how the Deno team thinks Deno should ultimately be. Many changes await: window is gone and Node’s process appears, dependency management has been improved, numerous APIs have gone stable (e.g. WebGPU), and both Node.js API and CommonJS support have continued to improve.

Bartek Iwańczuk and Andy Jiang

Don’t Sleep on AbortController — AbortController is a broadly available mechanism for, originally, aborting Web requests on demand, but you can use it for a lot more than that (or ‘anything!’, as Artem explains).

Artem Zakharchenko

Learn to Build Feature-Rich, Native Mobile Apps Using React Native and Expo — Join Kadi Kraman for a video course designed to hone your React skills. Whether a beginner, or looking to further refine your skill set, you’ll learn to create practical iOS and Android apps, covering components, styling, UX, linting, async storage, animation, and much more.

Frontend Masters sponsor

How Josh W. Comeau Rebuilt His Blog, App Router Style — We’re huge fans of Josh’s blog and he’s just rebuilt it entirely using Next.js, MDX, Sandpack, and an array of other technologies. Here, he goes into great depth about what’s involved. A good look behind the scenes of a modern React-driven project.

Josh W Comeau

IN BRIEF:

🇪🇺 NodeConf EU is back. It takes place in Ireland this November 3-6.

🟨 It also appears JSConf is coming back under the care of the OpenJS Foundation.

📊 Minification Benchmarks is a frequently updated set of benchmarks for a suite of popular JavaScript minifiers.

🕹️ The most recent JS13kGames gamedev contest just ended. If you want to play the entries (or do some judging yourself) they’re all here. I particularly liked The Way of the Dodo and Deep13.

RELEASES:

Bun v1.1.29 – Its C compilation feature gets N-API support, but is otherwise largely a bugfix release.

Storybook 8.3 – A popular frontend component workshop is now using Vitest to rapidly speed up its component testing features.

Strapi 5 – Popular open source headless CMS.

Solid 1.9 – Declarative and performant reactivity for building UIs.

PostgreSQL 17 – The popular database isn’t a JavaScript project, but a lot of you will be using it. Psst! We have a Postgres newsletter too!

📒 Articles & Tutorials

A Guide to Destructuring in JavaScript — The destructuring assignment syntax appeared in ES6 almost ten years ago and has become a central part of modern JavaScript development. This is a good primer/reminder of the potential.

Mat Marquis

The Nine Node Pillars: Principles for Doing Node Right — A group of prolific and productive Node.js contributors have put together a checklist to identify gaps in your current Node development practices, particularly when building large-scale apps.

Snell, Venditto, Dawson, Collina, et al.

A Complete Guide to Session Management in Next.js — Learn how integrating session management into your app provides robust security and enhances user experience.

Clerk sponsor

What Are Durable Functions? A Visual JavaScript Primer — This is rather dependent on what Inngest, a durable function service, offers, but is a good primer to the general idea which may well suit your use cases.

Lydia Hallie (Inngest)

What’s New in Express.js 5.0 — Express.js 5.0 landed recently with rather brief release notes, so here’s a deeper look at what it has to offer. The updates are largely incremental, but set the stage for Express’s future.

Trevor I. Lasn

Angular Routing Essentials: Everything in One Post — A bold claim, but it does a pretty good job.

Oleksandr Kocherhin

Using Reddit’s JSON API from a JavaScript App — How to pull data from Reddit’s API and display it in a simple web application built with Parcel.

Muhammed Ali

📺 Create a Donkey Kong Country-ish Platformer in JS – We don’t see the DKC resemblance, but it’s a solid 4 hour screencast. Chris Courses

📄 Implementing a ‘Like’ Button without Authentication Abhishek Saha

🛠 Code & Tools

Schedule-X 2: A Modern Event Calendar Component — Available in the form of React/Preact, Vue, Svelte, Angular, or plain JS components. Open source but with a premium version with extra features. GitHub repo.

Tom Österlund

🧹 Vue Mess Detector: Code and Quality Analysis for Vue Projects — A static analysis tool that can catch various bugs and code quality issues in Vue-based projects, built atop rules from the Vue.js Style Guide and others. GitHub repo.

Various Contributors

✂️ Cut Your QA Cycles Down from Hours to Minutes — QA Wolf’s AI-native approach gets engineering teams to 80% automated end-to-end test coverage and helps them ship 2x faster by reducing QA cycles from hours to minutes.

QA Wolf sponsor

Tesseract.js: Pure JS OCR for 100+ Languages — A port of the C++-based Tesseract library commonly used for extract text from images. The homepage has a live demo where you can drop your own images. GitHub repo.

Tesseract Team

HumanifyJS: Deobfuscate JavaScript Code using ChatGPT — There’s an in-depth explainer here. The primary feature is its ability to reverse the loss of meaningful variable and function names based on the context of the code.

Jesse Luoto

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

React Snap Carousel: DOM-First, Headless Carousel — Uses native browser scrolling and CSS scroll snap points for performance. Try out some of its features in its Storybook. The latest version adds support for infinite carousels.

Richard Scarrott

💡 For more React projects, check out our latest React newsletter.

Perspective 3.1 – Streaming data viz and analytics component. The core is written in C++ and compiled to WebAssembly. The homepage shows it off well.

NeutralinoJS 5.4 – Lightweight cross-platform desktop app framework.

websocket-as-promised 3.0 – A Promise-based API for WebSockets.

Verdaccio 6.0 – Lightweight local private npm registry.

Rspack 1.0.7 – Fast Rust-based web bundler.

esbuild 0.24

#​705 — September 19, 2024

Read on the Web

JavaScript™? Weekly

‘Oracle, It’s Time to Free JavaScript.’ — It’s long been a bone of contention that Oracle owns the trademark for ‘JavaScript’ (we put out a call two years ago) but this marks the first serious effort to try and change that, including petitioning the USPTO, if necessary. You can support the effort by signing this open letter, joining a vast array of JavaScript luminaries.

The JavaScript Community

Now You Can Compile and Run C in JavaScript — Well, if you’re using Bun, at least. Bun v1.1.28 lands experimental support for compiling and native C code and then running its functions from JavaScript. It’s easier than it sounds..

Jarred Sumner (Bun)

😅 Bun’s creator said this is “an unplanned feature I worked on mostly a month ago on a Saturday for fun” – that’s our kinda fun!

✂️ Cut Your QA Cycles Down from Hours to Minutes with QA Wolf — If slow QA processes bottleneck your software engineering team and you’re releasing slower because of it, you must check out QA Wolf. QA Wolf gets engineering teams to 80% automated end-to-end test coverage and helps them ship 2x faster by reducing QA cycles from hours to minutes. Learn more.

QA Wolf sponsor

ts-blank-space: Fast Type-Stripping TypeScript to JS Compiler — It’s job is simple: be the fastest TS to JS compiler written in JS (it’s 5.6x faster than tsc.) Types are simply replaced with whitespace preserving the coordinates of the JS code which eliminates the need for sourcemaps entirely.

Ashley Claymore / Bloomberg

IN BRIEF:

🏆 Developer analyst firm RedMonk has put out a Q3 2024 ranking of programming languages with JavaScript happily in first place.

📺 Honeypot has released a nine minute documentary where Ryan Dahl (the original creator of Node.js) and Bert Belder ▶️ tell the story of how Deno began.

Talking of Deno, Deno 2.0 is expected to be released tomorrow.

🧭 Alongside new releases of macOS, iOS, and iPadOS, Safari 18 has been released. Alongside numerous Web API enhancements, its JS regex support has been enhanced when it comes to Unicode.

🔥 David Bushell tried JSR – he didn’t like it.

RELEASES:

Fastify v5 – Fastify is a popular, perf-focused web framework for Node.js, inspired by Express (which recently reached v5.0 too!)

Astro 5 Beta – Astro helps keep the run of v5.0 releases going..

Node.js v22.9 (Current) – Adds a util.getCallSite function to obtain the stacktrace of the current execution. V8’s Maglev JIT is also disabled for reliability reasons due to outstanding issues in V8.

Hono 4.6 – The nifty ‘any runtime’ webapp framework gains context storage middleware.

ViteConf is October 3rd! — StackBlitz is r(ai)sing the bar in the ViteConf ’24 keynote. You won’t want to miss it 👀.

StackBlitz sponsor

📒 Articles & Tutorials

Mathematical Symbols and JavaScript Equivalents — We’re not just talking the obvious like + and – but things like ⁿ√, Σ, Π, ∃, and set notation.

Joshua Nussbaum

A React 19 Cheat Sheet — From Kent C Dodds, of Epic React fame, comes this part cheat sheet, part succinct reminder of some of the new things you can do in React 19, along with (very) brief code examples.

Kent C. Dodds

[Workshop] Fix Your Front-End 101: JavaScript Edition — Learn practical tips to debug JavaScript end to end. Join our JavaScript team live on Sept 24.

Sentry sponsor

From Parcel to Vite: A Short Story of a 100K LOC Migration — “We’ve migrated our frontend projects from Parcel to Vite, and the process was… smooth.”

Gao / Logto

How to Create a Chrome Extension with React, TypeScript, Tailwind CSS and Vite — Covers everything you need to know right through to publishing in the Chrome Web Store.

Lokman Musliu

📺 Building a React-Powered TODO App in 9 Steps – A 54 second video showing off the key stages, all without any libraries except React. Danny Thompson

📄 12 Ways to Better Vue Components with TypeScript Fotis Adamakis

📄 Why We Switched from Cypress to Playwright S Varun (BigBinary)

📄 Bitwise Operators in JavaScript and When to Use Them 8 Hobbies

📄 An Introduction to TanStack Router Adam Rackis

🛠 Code & Tools

date-fns v4.0 Released with First-Class Time Zones Support — date-fns is a hugely popular and comprehensive suite of 200+ functions for working with dates in JavaScript, and now there’s first-class time zone support too.

Sasha Koss

ts-remove-unused: Remove Unused Code from TypeScript Projects — A tool that can auto-fix unused exports (removing export from the declaration or the whole declaration based on its usage) and delete modules that have no referenced exports. Knip is another mature tool in this space, though focused more on detecting the things you can remove.

LINE

Amplify the Benefits of JWTs and Session Tokens — Learn how leveraging the benefits of both session token authentication and JWTs results in the best of both approaches.

Clerk sponsor

Next.js SaaS Starter: A Next.js Template for SaaS Webapps — A starter template for building a SaaS-style webapp using Next.js with authentication, Stripe integration, and a dashboard for users. It uses Postgres and Drizzle for the database and UI elements based on shadcn/ui and Tailwind.

Lee Robinson (Vercel)

nano-spawn: Tiny Execa-Inspired Process Execution for Node.js — If you’re familiar with Sindre’s Execa for running commands from a Node app in a reliable manner, nano-spawn offers its core functionality in a smaller package.

Sindre Sorhus and ehmicky

DECK.GL: GPU-Powered Large-Scale Data Visualization Framework — Well suited to geospatial data visualization use cases that go beyond typical 2D views. There are plenty of examples to show it off. Can be used through both vanilla JS and React interfaces.

OpenJS Foundation

Vue-Multiselect 3.1: A Complete ‘Selecting Solution’ for Vue.js — There’s a lot on offer here, complete with SSR support, Vuex support, strong test coverage, and with no dependencies.

Damian Dulisz et al.

Chokidar 4.0: Efficient Cross-Platform File Watching Node.js Library — Wraps around fs.watch / fs.watchFile and normalizes the events received, applies best practices, and presents an API that works the same across platforms.

Paul Miller

Express.js 4.21 – We featured Express.js 5.0 last week, but the widely deployed 4.x branch continues to get updates.

⭐ Starlight 0.28 – Astro’s official, all-in-one docs site builder.

Material UI 6.1 – Independent React components using Material Design.

Varlet 3.5 – Material Design-inspired component library for Vue 3.

Preact 10.24 – The 3KB React-compatible alternative.

NodeBB 3.9 – Node.js based forum system.

#​704 — September 12, 2024

Read on the Web

JavaScript Weekly

The State of ES5 on the Web — Some of the earlier JavaScript build tools focused on allowing developers to write modern JavaScript code that could still run on the browsers of the time by compiling code down to ES5. Time has moved on, but have the tools or popular libraries? Philip investigates, and shares some recommendations.

Philip Walton

📊  The Top 5000 npm Packages by Size, Downloads, and Traffic — An interesting Google Sheets spreadsheet listing the top 5000 npm packages by package size, weekly downloads, and weekly traffic. One package is responsible for 278 terabytes of traffic per week, but the top 5000 add up to several petabytes.

Google Sheets / danhorus

Run GitHub Actions Up to 2x Faster at Half the Cost — Blacksmith runs your GitHub Actions substantially faster by running them on modern gaming CPUs. Integrating Blacksmith is a one-line code change. 100+ companies like Ashby, Superblocks, and Slope use Blacksmith to help developers merge code faster.

Blacksmith sponsor

Announcing TypeScript 5.6 — The latest TypeScript has landed with full support for iterator helpers, support for arbitrary module identifiers, –noUncheckedSideEffectImports to import modules without importing any values, and more — all covered in the always thorough release post.

Daniel Rosenwasser (Microsoft)

Is PHP the New JavaScript? — I’m no real fan of PHP, but there’s been a lot of discussion on social media around increased interest in PHP by developers who’d usually steer clear of it, largely thanks to Laravel. This post tells the basic story and explains what Laravel brings to the table.

Dave Kiss (Mux)

IN BRIEF:

Cloudflare Workers has greatly improved its npm package support. The popular serverless platform now supports a lot more Node.js APIs.

🎉 They don’t happen often, but Frontend Masters is currently running a sale on its courses, which now includes a JS performance learning path.

The ESLint project has announced its latest version support policy with ESLint v8.x going into end of life next month.

📅 Vercel’s Next.js Conf 2024 is taking place this October 24, both in person in San Francisco, as well as online.

RELEASES:

Storybook 8.3 – Frontend component and UI workshop. Now with first class Vitest support.

ESLint 9.10 – Now with types included.

pnpm 9.10, Jasmine 5.3, Relay 18.0

📒 Articles & Tutorials

The Web’s Clipboard, and How It Stores Data of Different Types — An interesting exploration of how things currently work with copy and pasting on the web, how different data types are treated, and what the Web Custom Formats proposal is putting forward.

Alex Harri Jónsson

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. Just added support for Node.js built-in node:test framework!

Wallaby Team sponsor

Building the Same App Using Various Web Frameworks — A scientist at Amazon who usually works in Python with a minimum of JavaScript on the frontend wondered if a more modern web framework would suit him better in 2024. To try this out, he tried Next.js, SvelteKit, and the Python-flavored FastHTML.

Eugene Yan

Brand New Performance Features in Chrome DevTools — A helpful look into Chrome’s updated Performance Panel and all the different metrics it shows off to help you improve the performance of your site.

Umar Hansa (DebugBear)

React and FormData — FormData is ironically both the ‘newest and yet oldest’ standard for accessing form data. Here are some practical ways for using it with TypeScript.

Brad Westfall

Automate Neon Schema Changes with Drizzle and GitHub Actions — Learn about schema migrations and how they can be applied to a Neon database with Drizzle and GitHub Actions.

Clerk sponsor

📄 The Secrets of JavaScript’s delete Operator Zachary Lee

📄 Deploying a Next.js App to Production on Any Server Kurta Payjama

📄 How to Create a Weekly Google Analytics Report That Posts to Slack Paul Scanlon

📄 Top 10 Angular Architecture Mistakes You Really Want To Avoid Tomas Trajan

📄 How to Fix ESLint Violations with AI Assistance Docker Labs

📺 Why You Should Use Redux in 2024 Mark Erikson

🛠 Code & Tools

Biome v1.9 Released; Turns One Year Old — Biome started life as a fork of Rome, a bold attempt to create an all-in-one ‘frontend toolchain’. As of v1.9, Biome can format and lint CSS, GraphQL, and JavaScript, does it very quickly, yet has 97% compatibility with Prettier.

Victorien Elvinger & Biome Core Team

Express.js 5.0 Released — The seminal Node.js webapp library seemed to take a nap for a few years, but development was reinvigorated earlier this year. v5.0 brings a variety of modern tweaks and dependency updates, though it’s still tagged next at the npm registry. (Official homepage and v5.x API docs.)

Wesley Todd

✂️ Cut Your QA Cycles Down from Hours to Minutes — QA Wolf’s AI-native approach gets engineering teams to 80% automated end-to-end test coverage and helps them ship 2x faster by reducing QA cycles from hours to minutes.

QA Wolf sponsor

Jimp 1.6: Manipulate Images without Native Dependencies — Most image libraries, such as Sharp, use native dependencies to do the heavy lifting, but Jimp can handle numerous formats directly for blurring, color tweaks, resizing, rotation, etc. Originally for Node, Jimp now works in the browser too – GitHub repo.

jimp Contributors

Valtio 2.0: Proxy State Made Simple — Turns objects into self-aware proxies so you can access state and subscribe to changes outside of components, add computed properties and more. Designed for React and compatible with Suspense, but can also be used with vanilla JS. – GitHub repo.

Daishi Kato

Violentmonkey: A Way to Run Userscripts in the Browser — There have been many extensions to run your own custom JavaScript automatically on certain Web pages over the years, but Violentmonkey seems to currently be one of the better and well maintained open source ones. GitHub repo.

Violentmonkey Team

🔎 Orama 2.1 – Dependency-free, full-text and vector search engine for all JS runtimes, with typo tolerance, filters, facets, stemming, and more.

create-fastify 5.0 – Rapidly generate a Fastify project. It just takes npm init fastify app_name to get started.

file-type 19.5 – Detect the file type of a file, stream, or data. Now with WebVTT support.

TWGL.js 6.1 – Helpers for working with low-level WebGL from JS.

🎨 Chroma.js 3.1 – JavaScript color manipulation library.

Pixi.js 8.4 – Fast, flexible 2D WebGL renderer.

#​703 — September 5, 2024

Read on the Web

JavaScript Weekly

An SSR Performance Showdown — Fastify’s Matteo Collina set out to find the current state of server-side rendering performance across today’s most popular libraries. The first attempt faced negative feedback due to implementation issues, but the showdown has been improved and re-run.

Matteo Collina

Announcing Vue 3.5 — While v3.5 is a minor release, it’s one Vue users will love, with big performance and memory usage improvements in its reactivity system. With no breaking changes, upgrade and watch memory consumption drop.

Evan You

WorkOS: The Modern Identity Platform for B2B SaaS — WorkOS is a modern identity platform for B2B SaaS, offering flexible and easy-to-use APIs to integrate SSO, SCIM, and RBAC in minutes instead of months. It’s trusted by hundreds of high-growth startups such as Perplexity, Vercel, Drata, and Webflow.

WorkOS sponsor

Reverse Engineering Minified JavaScript with ChatGPT — Writing new code with AI is one thing, but could it be even better at understanding existing code that you’re struggling to grok? Yes, it seems.

Frank Fiegel

Inside ECMAScript: JavaScript Standards Get an Extra Stage — After nine years of annual updates, TC39 has tweaked the process to make rolling out new features faster and smoother. The so-called ‘Stage 2.7’ has been around for a while, but this is a neat primer to what it represents.

Mary Branscombe (The New Stack)

IN BRIEF:

⭐ Vercel goes deep into what’s new in React 19.

💰 Alpine.js creator Caleb Porzio shares his tale of passing $1m on GitHub Sponsors.

Bye NgModules, the future of Angular is standalone! Angular v19 will make standalone: true the default for components, directives, and pipes. This is already the recommended best practice, however.

Angular’s product lead, Minko Gechev, has also shared a little about what it means to mange the Angular project.

OpenAI has switched ChatGPT from Next.js to a Remix-based app, according to Remix’s Ryan Florence on X.

🇵🇱 Poland’s WarsawJS community is holding a 10th anniversary meetup on September 11. They invite you to ▶️ watch live on YouTube.

🤖 Lee Robinson shows off ▶️ the latest enhancements to Vercel’s v0, an AI-based tool for creating apps and components from prompts you supply.

[Workshop] Fix Your Front-End: JavaScript Edition — Learn practical tips to make debugging more tolerable. Join our JavaScript team live for a masterclass on Sept 24.

Sentry sponsor

RELEASES:

Node.js v22.8.0 (Current) – Adds a new API for enabling on-disk code caching at runtime, as well as options to set thresholds for code coverage success.

Astro 4.15 – The popular content site framework stabilizes Astro Actions, a solution for fully type-safe backend functions.

Jimp 1.3 – Pure JS image processing library for Node.

Turborepo 2.1, Puppeteer 23.3, Mermaid 11.1

📒 Articles & Tutorials

▶  Behind the Scenes: The Making of VS Code — A detailed conversation with two of the popular editor’s principal engineers on what makes it tick. VS Code is surely one of the world’s most widely distributed JavaScript-powered apps.

Holland, Rieken and Pasero (Microsoft)

How I Created a 3.78MB Docker Image for a JavaScript Service — The smallest JavaScript app container images tend to run into tens of megabytes, but tailoring your app to run on a lighter runtime like llrt can yield striking results.

Shenzilong

Leave Forms to SurveyJS and Get Back to What You Love Coding — Extensible JavaScript libraries for form management. Drag-and-drop UI, JSON form definitions, and seamless integration with any backend for full data control.

SurveyJS sponsor

Exploring Goja: A Go-Powered JavaScript Runtime — Goja is a pure Go(lang) JS runtime that makes it possible to embed JS into Go apps.

JT Archie

How to Use React Compiler — The compiler feature in React 19 is generating a lot of buzz — this “complete guide”, as described by this author, covers much of what you’ll need to get started.

Tapas Adhikary

Multithreaded Programming in Node.js using Atomics — Worker threads enable you to write multi-threaded Node apps, but sharing resources across them can quickly become tricky. Atomics can help avoid some of the pain.

Pavel Romanov

📄 A Complete Guide to Beginning with JavaScript – A rather epic article packed with background knowledge, context, and third party resources for starting a modern JavaScript learning journey. Cody Lindley

📄 Implementing Filtered Semantic Search Using pgvector and JavaScript Team Timescale

📄 How to Quickly (and Weightlessly) Convert Chrome Extensions to Safari Nina Torgunakova (Evil Martians)

📄 How Sentry Uses Mutation Testing on its JavaScript SDKs Lukas Stracke (Sentry)

🎤 Talking Deno 2 with Ryan Dahl Syntax․fm Podcast

🛠 Code & Tools

jsdiff 6.0: A JavaScript Text Diffing Implementation — Can compare strings for differences in various ways including creating patches. There’s an online demo. (Don’t worry – we’re not going monthly ;-))

Kevin Decker

Redwood v8.0 Released — A long standing, opinionated React & GraphQL (and/or RSC) full-stack framework that covers all the bases for professional dev teams with best-in-class tool support. v8.0 introduces a background jobs system, Docker support, and easier SSR and RSC setup.

Redwood Team

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

🇬🇧 GOV.UK Vue 1.0: Build Vue Apps, the British Way — The UK government is known for having an effective, well-designed site where Brits can complete various official tasks. Now you can get all of their components in Vue 3 form.

UK Government

👀 style-observer: A Mutation Observer for CSS — Attach JavaScript callbacks to changes in computed values of CSS properties.

Bramus Van Damme

Goxygen: Quickly Generate a Go Backend for a JS Project — A tool that sets up a new Go-based project with Angular, React, or Vue in the front-end, and Docker and Docker Compose files to make it all work.

Sasha Shpota

Typist 7.0: Tiptap-Based Rich Text Editor Component — Simple and opinionated. You can try several examples in the sidebar. Well suited for basic rich text situations like writing comments or messages and has a single-line mode.

Doist

Belt: A New Tool for Starting React Native Apps — A CLI tool for starting a new React Native app that takes various mundane decisions away from you and uses tooling and conventions established by a productive app development team.

Thoughtbot

Tinybase 5.2 – Powerful reactive data store for local‑first apps. Now with Postgres support (which can even work in-browser!)

jsdoc-to-markdown 9.0 – Generate Markdown docs from JSDoc-annotated code.

LogTape 0.5 – No-dependency logging lib for Deno, Node, Bun & browsers.

Plasmo 0.89 – Imagine Next.js but for building browser extensions.

JsonTree.js 3.0 – Customizable tree views for JSON data.

Poku 2.6 – Cross-platform JavaScript test runner.

Faker 9.0 – Generate large amounts of fake data.

#​702 — August 29, 2024

Read on the Web

JavaScript Weekly

Rspack 1.0: The Rust-Powered JavaScript Bundler — Far from being ‘yet another bundler’ with its own approach and terminology to learn, Rspack prides itself on being webpack API and ecosystem compatible, while offering many times the performance. The team now considers it production ready and encourages you to try your webpack-based projects on it.

Rspack Contributors

💡 Rspack also has a family of ancillary tools worth checking out, such as Rsdoctor, a tool for analyzing and visualizing your build process (for both Rspack and webpack!)

Front-End System Design — Learn to create scalable, efficient user interfaces in this extensive video course by Evgennii Ray. Explore the box model, browser rendering, DOM manipulation, state management, performance and much more.

Frontend Masters sponsor

How to Create an NPM Package in 2024 — Sounds simple, but there are a lot of steps involved if you want to follow best practices, introduce useful tools, and get things just right. Matt Pocock walks through the process here, and there’s a 14-minute screencast too, if you’d prefer to watch along.

Matt Pocock

IN BRIEF:

🤖 v0 is an AI-powered tool from Vercel for, originally, generating shadcn/ui-powered React components based upon prompts you supply. Now, however, it has basic Vue.js support too.

Deno 1.46 has been released and promises to be the final 1.x release before the much awaited Deno 2.0. Deno’s Node compatibility improves even more (it now supports Playwright and many more things) and ships with V8 12.9.

📊 IEEE has published its latest annual list of top programming languages. JavaScript takes third place, but TypeScript has leapt up several places to fourth.

RELEASES:

Prisma 5.19 – The popular ORM for Node.js and TypeScript adds ‘TypedSQL’, a way to write raw SQL queries in a type-safe way.

📈 billboard.js 3.13 – Popular D3 chart library adds area-step-range charts.

pnpm 9.9 – Fast, space efficient package manager.

React Email 3.0, Ember 5.11, Bun v1.1.26

📒 Articles & Tutorials

JS Dates are About to Be Fixed — Handling dates and times is famously a painful area for programmers and JavaScript hasn’t done a lot to make it easier. Libraries like Moment.js help a lot, but Iago looks at how the Temporal proposal and its features will begin to help a lot more over time.

Iago Lastra

Weekly Chats on the Art and Practice of Programming — Your home for weekly conversations with fascinating guests about how technology is made and where it’s headed.

The Stack Overflow Podcast sponsor

JavaScript Generators Explained — Jan was frustrated by the quality of documentation and articles explaining generators in JavaScript, and set out to explain things in a way that a more advanced developer could appreciate.

Jan Hesters

Implementing a React-a-Like from Scratch — While it’s unlikely you’ll actually want to do this, at least thinking about it can prove instructive as to what’s going on in React’s engine room.

Robby Pruzan

▶  How to Implement the 2048 Game in JavaScript — Ania is back with one of her usual easy to follow walkthroughs of implementing a complete game in JavaScript. This time it’s the 2048 sliding puzzle game. (Two weeks ago she did Tic-Tac-Toe as well.)

Ania Kubów

Learn Role-Based Access Control and Simplify Permissions Management — Enhance security and streamline access by managing user roles with Clerk Organizations.

Clerk sponsor

📄 The Only Widely Recognized JS Feature Ever Deprecated – Spoiler: It’s with. Trevor Lasn

📄 Generating Unique Random Numbers in JavaScript Using Sets Amejimaobari

📺 21 Talks from the Chain React 2024 Conference – A React Native event. YouTube

📄 Exposing Internal Methods on Vue Custom Elements Jaime Jones

📄 The Interface Segregation Principle in React Alex Kondov

🛠 Code & Tools

TypeScript 5.6 Release Candidate — As always, Daniel presents an epic roundup of what’s new. We’ll focus more on it next week though, as the final release is anticipated to land next Tuesday (September 3).

Daniel Rosenwasser (Microsoft)

Vuestic UI 1.10: A Vue.js 3.0 UI Framework — Features 60 customizable and responsive components and with the v1.10 release it’s gained a significant bundle size optimization, a custom compiler that improves build time performance, and other minor enhancements. GitHub repo.

Vuestic UI

✅ Bye Bye Bugs — Get 80% automated E2E test coverage for mobile and web apps in under 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

Material UI v6: The Popular React UI Design/Component System — At ten years old, the popular design system has its latest major release. There’s a focus on improved theming, color scheme management, container queries, and React 19 support. There are revamped templates to be inspired by, too.

García, Bittu, Andai, et al.

npm-check-updates 17.0: Update package.json Dependencies to Latest Versions — That is, as opposed to the specified versions. It includes a handy -i interactive mode so you can look at potential upgrades and then opt in to them one by one.

Raine Revere

Code Hike 1.0: Turn Markdown into Rich Interactive Experiences — Aimed at use cases like code walkthroughs and interactive docs, Code Hike bridges the gap between Markdown and React when creating technical content that takes full advantage of the modern web.

Rodrigo Pombo

Calendar.js: A Calendar Control with Drag and Drop — A responsive calendar with no dependencies, full drag and drop support (even between calendars), and many ways to manage events with recurring events, exporting, holidays, and more.

William Troup

📊 Perspective 3.0 – Data visualization and analytics component. The core is written in C++ and compiled to WebAssembly where it can be used from JavaScript. Their homepage shows it off well with a live example.

json-viewer 3.5 – Display JSON data in a readable, user-friendly way.

♟️ Stockfish.js 16.1 – A JavaScript chess engine.

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

Marked 14.1 – Fast Markdown compiler / parser.

Javet 3.1.5 – Java + V8. Embed JS into Java.

Pixi.js 8.3.4 – Fast 2D on WebGL engine.

#​701 — August 22, 2024

Read on the Web

JavaScript Weekly

Regexes Got Good: The History (and Future) of Regular Expressions in JavaScript — Regular expression support was always a little underwhelming in JS, but things have improved. Steven takes us on a tour to refresh our knowledge, as well as show off his ‘regex’ library that boosts JS regexes to a true A++ rating. Steven was co-author of O’Reilly’s Regular Expressions Cookbook and High Performance JavaScript so knows his stuff.

Steven Levithan

WorkOS: The Modern Identity Platform for B2B SaaS — WorkOS is a modern identity platform for B2B SaaS, offering flexible and easy-to-use APIs to integrate SSO, SCIM, and RBAC in minutes instead of months. It’s trusted by hundreds of high-growth startups such as Perplexity, Vercel, Drata, and Webflow.

WorkOS sponsor

Node v22.7.0 (Current) Released — Node 22.6 let you strip types from source code, but now with –experimental-transform-types you can transform TypeScript-only syntax into JavaScript before running it too. Module syntax detection is now also enabled by default.

Rafael Gonzaga

Bun v1.1.25: Now Running at 1.29 Million Requests per Second — I’m having a little fun with the title, but the latest version of the JavaScriptCore-based JS runtime has added node:cluster support and uses this to demo a high level of HTTP throughput on a ‘Hello World’ example. Support for V8’s C++ API has also landed – notable because Bun isn’t V8-based.

Ashcon Partovi

IN BRIEF:

We’ve mentioned ECMASCript 2024 a bit recently, but Pawel Grzybek has a neat and tidy overview of what’s new in the ES2024 spec.

🐝 Could Wasp be ‘the JavaScript answer to Django’ for full-stack webdev? The Wasp team certainly thinks so.

🎙️ Ryan Dahl, creator of both Node.js and Deno, went on the Stack Overflow podcast to talk about Deno’s current limitations and what’s coming in Deno 2.0.

RELEASES:

PlayCanvas Engine 2.0 – A powerful JS-based Web graphics platform.

Node v20.17.0 (LTS) – The LTS release of Node adds support for require-ing synchronous ESM graphs.

Astro 4.14 – The popular agnostic content site framework now includes an experimental API for managing site content.

pnpm 9.8, Vuetify 3.7, Neo.mjs 7.0

Join Us for ViteConf on October 3rd — Learn how the best teams are building the next generation of the web with Vite!

StackBlitz sponsor

📒 Articles & Tutorials

50 TypeScript F⁕⁕k Ups — An admittedly colorfully-titled book digging into lots of subtle mistakes you might run into with TypeScript. It’s available on Leanpub in PDF, iPad, and Kindle forms, or you can read it all directly on its GitHub repo. At least worth a skim in case you’re running into any of its points..

Azat Mardan

The Official Redux Essentials Tutorial, Redux — The long standing guide to how to use the popular Redux state container the right way with best practices has undergone a big reworking with TypeScript used throughout, new concepts added, and more coverage of RTK/React Toolkit features.

Redux Team

React is (Becoming) a Full-Stack Framework — Is React merely a frontend library? How does the backend fit in? The author shares his thoughts on what led him to start considering React as more of a full-stack solution.

Robin Wieruch

📄 Using JavaScript Generators to Visualize Algorithms Alexander G. Covic

📄 Optimizing SPA Load Times with Async Chunks Preloading Matteo Mazzarolo

📄 Using isolatedModules in Angular 18.2 Thompson and Lyding (Angular Team)

📄 How to Generate a PDF in a JavaScript App Colby Fayock

🛠 Code & Tools

Milkdown: Plugin-Driven WYSIWYG Markdown Editor Framework — A lightweight WYSIWYG Markdown editor based around a plugin system that enables a significant level of customization. It’s neat to see the docs are rendered by the editor itself. GitHub repo.

Mirone

Fuite 5.0: A Tool for Finding Memory Leaks in Web Apps — A CLI tool that you can point at a URL to analyze for memory leaks. Here’s how it works. There’s also a video tutorial.

Nolan Lawson

✂️ Cut Your QA Cycles Down to Minutes with Automated Testing — Are slow test cycles limiting your dev teams’ release velocity? QA Wolf provides high-volume, high-speed test coverage for web and mobile apps — reducing your test cycles to minutes. Learn more.

QA Wolf sponsor

LogTape: Simple Logging Library with Zero Dependencies — I’m digging this new style of library that promises support across all the main runtimes (Node, Deno, Bun) as well as edge functions and the browser devtools.

Hong Minhee

📊 Chart.js 4.4: Canvas-Based Charts for the Web — One of those libraries that feels like it’s been around forever but still looks fresh and gets good updates. Bar, line, area, bubble, pie, donut, scatter, and radar charts are all a piece of cake to render. Samples and GitHub repo.

Chart.js Contributors

Legend State: A Tiny, Fast and Modern React State System — A year ago, Jack Herrington wondered if Legend State could be ▶️ ‘the ultimate state manager’ and things have progressed a lot since, with it now boasting being the fastest React state library in town.

Jay Meistrich

Tagger: Zero Dependency, Vanilla JavaScript Tagging Library — You can play with a live demo here.

Jakub T. Jankiewicz

tinykeys 3.0: A Keybindings Library in ~650 Bytes — Keeps things as simple and sweet as possible.

Jamie Kyle

heic-to: Convert HEIC/HEIF Images to JPEG or PNG in the Browser

Hopper Gee

Cheerio 1.0 – HTML/XML manipulation library for Node.

🎨 Chroma.js 3.0 – JavaScript color manipulation library.

eta (η) 3.5 – Embedded JS template engine for Node, Deno, and browsers.

Embla Carousel 8.2 – Carousel library with fluid motion and good swipe precision.

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

Alpine AJAX 0.9 – Alpine.js plugin for building server-powered frontends.

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

Elliptic 6.5.7 – Elliptic curve cryptography in plain JS.

Poku 2.5 – Cross-platform JavaScript test runner.

💚 Use Node? Check out the latest issue of Node Weekly, our sibling email about all things relating to Node.js — from tutorials and screencasts to news and releases. We do include some Node related items here in JavaScript Weekly, but we save most of it for there.

→ Check out Node Weekly

#​700 — August 15, 2024

Read on the Web

👋 Wow, issue 700! We’re back after a week away. Technically I’m still on vacation, but I didn’t want to leave you in the lurch for too long.. 😉
__
Peter Cooper, your editor

JavaScript Weekly

ECMAScript Safe Assignment Operator Proposal — We often feature ECMAScript proposals that are in their later stages, but how about a brand new one you could get involved with? This one proposes an interesting additional bit of language syntax (?=) that returns a [error, value] tuple from an assignment.

Arthur Fiorette

Crafting a 13KB Game: The Story of Space Huggers — We always love Frank’s dives into how he produces neat JavaScript experiments and, in this case, a complete game in just 13KB — and if it inspires you, the latest js13kGames game development competition has just started.

Frank Force

WorkOS: The Modern Identity Platform for B2B SaaS — WorkOS is a modern identity platform for B2B SaaS, offering flexible and easy-to-use APIs to integrate SSO, SCIM, and RBAC in minutes instead of months. It’s trusted by hundreds of high-growth startups such as Perplexity, Vercel, Drata, and Webflow.

WorkOS sponsor

Google’s Angular Lead Sees Convergence in JavaScript Frameworks — “When picking a framework, don’t overthink it. It will end up being the same technology anyway with a different facade.” Minko Gechev talks about leading the way in converging Google’s Angular and Wiz frameworks.

Loraine Lawson (The New Stack)

Announcing Official Puppeteer Support for Firefox — As of version 23, Google’s originally Chrome-only Puppeteer browser automation library now has first-class support for Firefox too.

Mozilla Hacks

IN BRIEF:

⭐ If you’ve wondered why so many new npm packages are spam these days, it may be because of ‘Tea’. Though not the drinking kind..

Brendan Eich has expressed his support for the currently stage 1 Decimal draft proposal for bringing a more precise decimal number representation to JavaScript.

There’s an early technical preview of React Native WebGPU. William Candillon shows it off in ▶️ this 9-minute screencast.

RELEASES:

jQuery UI 1.14.0 – The legacy effects and widgets library reduces support for older browsers.

Madge 8.0 – Create graphs of module dependencies.

React Native 0.75, Angular 18.2, Bun 1.1.23, ESLint 9.9

📒 Articles & Tutorials

Patterns for Memory Efficient DOM Manipulation — Marc shares a solid look at the best practices to employ in order to avoid excess memory usage when managing/updating the DOM, all with a hope to make your apps faster. A good overview of the core principles behind DOM manipulation and optimization.

Marc Grabanski

‘How I Won $2,750 using JavaScript, AI, and a Can of WD-40’ — This is far from a technical JavaScript article, but it’s a fun story, involves some code and statistics, and ultimately might make you laugh.

Dave Kiss

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, node:test, and more. Huge changes are coming in Wallaby 2.0! Stay tuned. 🚀

Wallaby Team sponsor

Common Causes of Memory Leaks in JavaScript — Filled with basic examples oriented around V8-based runtimes like Node.js and Deno.

Trevor Indrek Lasn

Learn Web Components — If you’re looking to scrub on your Web Components know-how, this road map should prove useful. It’s a collection of good third party articles covering a wide range of knowledge.

Andrico Karoulla

A Tale of Evading JavaScript Anti-Debugging Techniques — When debugging code written by a third party, there could be some traps thrown in your way to prevent your usual debugging techniques. What to do? Revisiting a popular article from 2023.

Veritas

Fine-Grained Reactivity in Svelte 5 — Taking a close look at Svelte’s new so-called fine-grained reactivity.

Adam Rackis

📄 Tips for Using React Testing Library to Write Unit Tests Pavan Policherla

📄 45 VS Code Shortcuts for Boosting Your Productivity Shahed Nasser

🛠 Code & Tools

Volta 2.0: Install and Run JavaScript Tools Quickly — A long-standing Rust powered tool for installing and switching JavaScript related tools (like Node, TypeScript, Yarn, etc.) … “no matter the package manager, Node runtime, or OS.” GitHub repo.

Volta

Floating UI: Positioning for Tooltips, Popovers, Dropdowns, etc. — A library to create ‘floating’ elements such as tooltips, popovers, and dropdowns. Essentially a next-gen Popper which it now officially succeeds.

atomiks

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

QA Wolf sponsor

React Figma: Use Components as a Source for Figma Designs — A lot of folks use Figma to mock up designs for their React components, but what about the other way around? Use React components as a source for your designs in Figma! GitHub repo.

Ilya Lesik

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

True Myth 8.0 – Safe, idiomatic null and error handling in TypeScript with Maybe and Result types.

Protobuf-ES 2.0 – Fully compliant Protobuf implementation for JS/TS.

🕹️ Kontra 10.0 – Lightweight gaming micro-library, optimized for js13kGames.

React Tooltip 5.28 – A tooltip component, surprisingly. (Demo.)

express-validator 7.2 – Express.js middleware for validator.js.

jscodeshift 17.0 – JavaScript codemod toolkit from Facebook.

🌍 Turf.js 7.1 – Modular geospatial analysis engine.

Marked 14.0 – Fast Markdown compiler / parser.

#​699 — August 1, 2024

Read on the Web

🏖️ Hi! Just a quick note to say that we’re taking next week off for a brief summer break. We’ll be back with our next issue on August 15.
__
Peter Cooper, your editor

JavaScript Weekly

How Google Handles JavaScript In Its Indexing Process — Once, if you wanted Google to index your content, it needed to be right in the HTML and not dynamically rendered with JavaScript. Things have changed, but how much? MERJ and Vercel analyzed over 100,000 Googlebot fetches in an attempt to empirically demystify Google’s approach.

Zecchini, Moore, Siddle, Ubl (Vercel)

Garbage Collection and Closures — When three JavaScript experts get together and all learn something new about how JavaScript works when they encounter a memory leak, it pays to listen. An interesting quirk to be aware of.

Jake Archibald

Tracing: Frontend Issues with Backend Solutions — As Developers, we often hear complaints like, “This page is taking too long to load. It’s a front-end issue. Fix it.” But what if the problem isn’t on the front end? How do you trace issues through your stack? Watch the step by step guide.

Sentry sponsor

Announcing TypeScript 5.6 Beta — The first beta of the next major version of TypeScript is out. Region-prioritized diagnostics (VS Code only, for now) is a particularly interesting addition.

Daniel Rosenwasser (Microsoft)

IN BRIEF:

Porffor is an experimental ahead-of-time JavaScript compiler/runtime that compiles to either WASM or native. Its developer has just gone full time on the project thanks to support from GitHub co-founder Chris Wanstrath.

React Conf 2024 has shared all the talks from its Las Vegas event back in May.

Ryan Dahl explains what Deno got wrong about HTTP imports and how it’s moving forward.

RELEASES:

Bun 1.1.21 – The JavaScriptCore-based server-side JavaScript runtime improves its Node.js and Remix compatibility.

Node.js v20.16.0 (LTS)

ESLint v9.8.0

📒 Articles & Tutorials

Benchmarking AWS Lambda Cold Starts Across JS Runtimes — It’s from the Deno team so it may not be surprising that Deno was fastest, but they share their methodology and results for Deno, Node, Bun and AWS’s managed Node runtime and they weren’t all that far apart.

Zinkovsky and Jiang (Deno)

Node.js’s Experimental Support for TypeScript — In this pull request, Node merged an experimental ability to transpile TypeScript into JavaScript, ultimately letting Node directly ‘run TypeScript’. No type checking is performed and, as Matt Pocock explains, TypeScript-only features are a no-go.

Sarah Gooding (Socket)

Ever Felt Compelled to Answer with Certainty When You Weren’t Sure? — Don’t stifle innovation with this toxic behavior. Thoughts on how to fix this—as a leader or individual contributor.

Test Double sponsor

A Different Way to Think About TypeScript — “a very expressive way to operate over sets, and using those sets to enforce strict compile time checks”

Robby Pruzan

📄 Reading from the Clipboard in JavaScript Raymond Camden

📄 Why Unknown Types Are Useful – TypeScript’s unknown, specifically. Michael Uloth

📄 Flexible Network Data Preloading in Large SPAs Matteo Mazzarolo

🔈 Why the Creator of jQuery Uses React and TypeScript Syntax․fm

📄 Highlights from Git 2.46 Taylor Blau (GitHub)

🛠 Code & Tools

emoji-picker-element: A Lightweight Emoji Picker — An emoji picking control, packaged as a Web Component. You can also add custom emoji to it. GitHub repo.

Nolan Lawson

STRICH: Fast and Reliable 1D/2D JS Barcode Scanning in Your Browser — You don’t need a native app to scan barcodes! Try the free demo app or sign up for the free, full-featured 30-day trial.

STRICH sponsor

☎︎ International Telephone Input — A very mature option that offers all the trimmings you’d expect: accessibility, type definitions, flags, automatic country selection, automatic formatting, and more. GitHub repo.

Jack O’Connor

PythonMonkey: Embed a JavaScript Engine into the Python VM — If you need to use Python but want to run JS, this gives you a way to do it with Mozilla’s SpiderMonkey engine. It now supports the CommonJS module system too.

Distributive Corp.

📅 Calendar Link: Dynamically Generate Event Links for Calendars — Generate event links for Google Calendar, Yahoo Calendar, Outlook, etc.

Anand Chowdhary

The Only Production-Ready AI-Powered Backend Code Generator — Build new services, extend your existing applications with Amplication AI. Go from idea to production in four minutes.

Amplication sponsor

JS-PyTorch: A PyTorch-Like Library for JavaScript — Recently renamed from JS-Torch, this brings some of the magic from Python’s popular PyTorch library to JavaScript for training and testing neural networks in particular. We linked to it earlier this year, but it has added GPU support thanks to GPU.js.

Eduardo Leao

json-to-csv-export: Generate Downloadable CSV of JSON Data — You’ve got some data in JSON, you want users to be able to download a CSV of that data.. GitHub repo.

Coston Perkins

React Virtuoso 4.8 – Complete React virtualized rendering list/table/grid family of components. Now with horizontal list support.

🎨 Chroma.js 2.6 – Simple color manpiulation library, now with tint and shade functions.

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

YouTube.js 10.2 – Unofficial client for YouTube’s internal API.

tween.js 25.0 – JavaScript/TypeScript animation engine.

ArangoJS 9.0 – Driver for the ArangoDB graph database.

is-online 11.0 – Check if the Internet is reachable.

sql.js 1.11 – SQLite compiled to JavaScript.

🥳 And a bit of fun..

p5.js is a popular ‘creative coding’ library that takes a lot of inspiration from Processing. p5 makes it easy to create digital art and interactive experiences without a lot of boilerplate (check out how simple this ‘smoke particles’ demo is, for example).

p5.js v1.10.0 has just landed, but the reason I wanted to mention it is because of how much fun I’ve had throwing AI generated code at the online p5 editor, and if you have access to tools like ChatGPT, you can do it too.

For example, give ChatGPT a prompt like:

Write some p5.js code that renders the JavaScript “JS” logo.

Copy and paste the result into the editor, and:

It’s not perfect, but it’s pretty good for a first try (and easy to ‘fix’ by hand).

Different LLMs take totally different approaches. Consider what Anthropic’s Claude 3.5 gave me, for example:

Eeek..

Well, anyway, there’s a lot of fun to be had, and you can prompt LLMs to improve the results or customize things as you wish. Have some fun with it, it’s pretty cool what you can produce.

We’re taking a week off now, but will be back on August 15!

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