#694 — June 27, 2024
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.
Microsoft
IN BRIEF:
📊 Socket’s Sarah Gooding has put together a good, easily-skimmed roundup of the State of JS 2023 survey results.
🧊 Someone’s created an ASCII 3D renderer in JavaScript. Why? Why not! There’s a live demo here.
RELEASES:
Playwright 1.45.0 – Microsoft’s browser/Web automation library now has a clock API for manipulating time within tests to verify time-related behavior.
Bun v1.1.16 – The fast JavaScript runtime and toolkit.
Astro 4.11, Electron 31.1, PouchDB 9.0, Node.js v20.15.0 (LTS)
📒 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 — A look at some ‘under-the-radar web features, such as the Screen Orientation API and Device Orientation API, and how they can be used to create user friendly, robust 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 Released — Node-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.
katspaugh
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.
Mapbox
📄 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
Ky 1.4 – Simple HTTP client based upon Fetch for browsers, Node & Deno.
React Awesome Query Builder 6.6 – Logical query builder control. (Demo.)
Matter.js 0.20 – A 2D rigid body physics engine.
ka-table 11.0 – Lightweight React table component. (Demos.)
OverlayScrollbars 2.9 – JS custom scrollbar plugin.
Wouter 3.3 – Minimalist router for React & Preact.