#​694 — June 27, 2024

Read on the Web

Together with  Frontend Masters logo

JavaScript Weekly

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

Brian Smith (MDN)

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

Dr. Axel Rauschmayer

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

Frontend Masters sponsor

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




📒 Articles & Tutorials

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

Fotis Adamakis

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

Tony Alicea

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

PowerSync sponsor

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

Juan Diego Rodríguez

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

Ben Nadel

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

Userfront sponsor

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

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

📄 Morphing Arbitrary Paths in SVG Alexandru-Gabriel Ică

🛠 Code & Tools

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

OpenJS Foundation

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

François Zaninotto

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

AWS Amplify sponsor

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


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


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

Vancho Stojkov