---
title: "Say hi to ECMAScript 2024"
publication: "JavaScript Weekly"
issue: 694
published_at: "2024-06-27"
canonical_url: "https://javascriptweekly.com/issues/694"
---

Plus TypeScript 5.5, Node-RED 4.0, and surfing the audio waves. |        

#​694 — June 27, 2024 

[Read on the Web](https://javascriptweekly.com/issues/694)  

Together with [![Frontend Masters logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_300,h_70/e_make_transparent/co_white,e_outline:5/nk0tfdvalivacz8rw7rt.png)](https://frontendmasters.com/courses/design-systems-v2/?utm_source=email&utm_medium=javascriptweekly&utm_content=dsv2)   

JavaScript Weekly 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/ubg2dhxbamr59bvob1t6.jpg)](https://developer.mozilla.org/en-US/blog/javascript-set-methods/)  

[A Look at JavaScript's New `Set` Methods](https://developer.mozilla.org/en-US/blog/javascript-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](https://web.dev/blog/set-methods). 

Brian Smith (MDN)   

[Ecma International Approves ECMAScript 2024: What’s New?](https://2ality.com/2024/06/ecmascript-2024.html) — 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   [![\](https://copm.s3.amazonaws.com/c9c75543.png)](https://frontendmasters.com/courses/design-systems-v2/?utm_source=email&utm_medium=javascriptweekly&utm_content=dsv2) 

[Create Consistent UIs with Storybook](https://frontendmasters.com/courses/design-systems-v2/?utm_source=email&utm_medium=javascriptweekly&utm_content=dsv2) — 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](https://devblogs.microsoft.com/typescript/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](https://socket.dev/blog/2023-state-of-javascript-survey-highlights).
- 🧊 Someone's created an [ASCII 3D renderer](https://github.com/kciter/ascii-3d-renderer.js) in JavaScript. Why? Why not! There's a [live demo here.](https://6637eb83d047d2bb1b3cfe67-nhlvitxryq.chromatic.com/?path=/story/example-ascii3drenderer--default)   

**RELEASES:** 

- [Playwright 1.45.0](https://github.com/microsoft/playwright/releases/tag/v1.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](https://bun.sh/blog/bun-v1.1.16) – The fast JavaScript runtime and toolkit.
- [Astro 4.11](https://astro.build/blog/astro-4110/), [Electron 31.1](https://github.com/electron/electron/releases/tag/v31.1.0), [PouchDB 9.0](https://github.com/pouchdb/pouchdb/releases/tag/9.0.0), [Node.js v20.15.0 (LTS)](https://nodejs.org/en/blog/release/v20.15.0)  

📒 Articles & Tutorials 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/knvzgg1kadwatzill0bw.jpg)](https://fadamakis.com/recreating-queens-game-in-vue-d7e3b3013ccb)  

👑 [Recreating the _Queens_ Game in Vue](https://fadamakis.com/recreating-queens-game-in-vue-d7e3b3013ccb) — Queens is a puzzle game that combines elements of Minesweeper, chess, and Sudoku. 

Fotis Adamakis   

[Understanding React Compiler](https://tonyalicea.dev/blog/understanding-react-compiler/) — The [new, experimental tool from the React team](https://react.dev/learn/react-compiler) 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](https://www.powersync.com/?utm_source=newsletter&utm_medium=sponsorship&utm_campaign=javascript-weekly-selfhost) — 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](https://www.smashingmagazine.com/2024/06/uniting-web-native-apps-unknown-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](https://www.bennadel.com/blog/4669-exploring-randomness-in-javascript.htm) — Specifically, `Math.random()` versus `Crypto.getRandomValues()`. 

Ben Nadel   

[Drawing the Auth Owl at Userfront | Transformational Auth & Identity](https://userfront.com/blog/why-i-love-building-userfront?&utm_source=javascriptweekly-com&utm_medium=newsletter_sponsored_link&utm_campaign=launch&utm_content=auth_owl) — 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](https://slack.engineering/balancing-old-tricks-with-new-feats-ai-powered-conversion-from-enzyme-to-react-testing-library-at-slack/) – 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](https://spin.atomicobject.com/mock-child-component-angular/) Casey Falkowski 

📄 [Morphing Arbitrary Paths in SVG](https://minus-ze.ro/posts/morphing-arbitrary-paths-in-svg/) Alexandru-Gabriel Ică  

🛠 Code & Tools 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/guto0m5fek6lgbrkggru.jpg)](https://nodered.org/blog/2024/06/20/version-4-0-released)  

[Node-RED 4.0 Released](https://nodered.org/blog/2024/06/20/version-4-0-released) — [Node-RED](https://nodered.org/) 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](https://marmelab.com/blog/2024/06/20/react-admin-v5.html) — 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.](https://github.com/marmelab/react-admin) 

François Zaninotto   

[Deploy Your SSR Apps on AWS, Fast](https://docs.aws.amazon.com/amplify/latest/userguide/getting-started.html?trk=bec4c7bf-ae77-42ed-a39a-0f6d9a82a945&sc_channel=em) — Deploy any frontend framework quickly with AWS Amplify hosting. Scale to millions? ✅ Branch deployment? ✅ PR previews? ✅ 

AWS Amplify sponsor   [![\](https://res.cloudinary.com/cpress/image/upload/w_240,e_sharpen:60,q_auto/isbuoj4tvknanb1nocwd.jpg)](https://wavesurfer.xyz/) 

[wavesurfer.js: Audio Waveform Player Library](https://wavesurfer.xyz/) — 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](https://wavesurfer.xyz/examples/). 

katspaugh   

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/yvx8iestukqpobnhyqhh.jpg)](https://github.com/mapbox/pixelmatch)  

[PixelMatch 6.0: A Fast Pixel-Level Image Comparison Library](https://github.com/mapbox/pixelmatch) — Give it two images, it’ll highlight the differences. Now distributed as a ES module. 

Mapbox   

📄 [PDFSlick: View and Interact with PDFs](https://github.com/pdfslick/pdfslick) — 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.](https://pdfslick.dev/examples) 

Vancho Stojkov   

- [Ky 1.4](https://github.com/sindresorhus/ky) – Simple HTTP client based upon Fetch for browsers, Node & Deno.
- [React Awesome Query Builder 6.6](https://github.com/ukrbublik/react-awesome-query-builder) – Logical query builder control. ([Demo.](https://ukrbublik.github.io/react-awesome-query-builder/))
- [Matter.js 0.20](https://brm.io/matter-js/) – A 2D rigid body physics engine.
- [ka-table 11.0](https://github.com/komarovalexander/ka-table) – Lightweight React table component. ([Demos.](https://komarovalexander.github.io/ka-table/#/overview))
- [OverlayScrollbars 2.9](https://github.com/KingSora/OverlayScrollbars) – JS custom scrollbar plugin.
- [Wouter 3.3](https://github.com/molefrog/wouter/releases/tag/v3.3.0) – Minimalist router for React & Preact.         

Published by [Cooperpress](https://cooperpress.com/) and edited by [Peter Cooper](https://twitter.com/cooperx86) 

'JavaScript' is a trademark of Oracle Corporation in the US
We are not endorsed by or affiliated with Oracle. 

[Change your email address](https://javascriptweekly.com/edit_subscription/*|UID|*) or [stop getting this newsletter](https://javascriptweekly.com/leave/*|UID|*). 

© Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom