---
title: "A variety of JS hacks and creative coding"
publication: "JavaScript Weekly"
issue: 690
published_at: "2024-05-30"
canonical_url: "https://javascriptweekly.com/issues/690"
---

Plus modern Node features to try, using symbols as WeakMap keys, and a helpful way to visualize regexes. |        

#​690 — May 30, 2024 

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

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/everything-git/?utm_source=email&utm_medium=javascriptweekly&utm_content=everythinggit)   

JavaScript Weekly 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/ldkxapzrw5xv3wyknkyw.jpg)](https://blog.1password.com/new-extension-build-system/)  

[How 1Password Used esbuild to Cut Browser Extension Build Times](https://blog.1password.com/new-extension-build-system/) — 1Password is a popular password management tool that relies upon a browser extension to fill out passwords on the Web. At over a minute for a single build, things were starting to drag for the devs. Could [esbuild](https://esbuild.github.io/) help? A fun story with plenty of technical details. 

Jarek Samic   

[Next.js 15 Release Candidate](https://nextjs.org/blog/next-15-rc) — The popular React meta framework gets ready for a major new release with a RC giving you an opportunity to experiment with React 19 (and React Compiler) support, executing code _after_ a response with `next/after`, and a few potentially breaking changes. 

Delba de Oliveira and Zack Tanner   [![\](https://copm.s3.amazonaws.com/c1efb842.png)](https://frontendmasters.com/courses/everything-git/?utm_source=email&utm_medium=javascriptweekly&utm_content=everythinggit) 

[Everything You Need to Know About Git](https://frontendmasters.com/courses/everything-git/?utm_source=email&utm_medium=javascriptweekly&utm_content=everythinggit) — Join ThePrimeagen for this extensive video course and ensure you never run into an unsolvable Git problem again. You'll learn advanced git abilities like interactive rebasing, bisecting, worktrees, the reflog, and more. 

Frontend Masters sponsor   

[aem1k: A Variety of JS Hacks and Creative Coding](https://aem1k.com/) — This is a fun one. Martin really captures the joy and expressiveness of JavaScript and the Web with his collection of projects, whether it’s offering a [NSFW-named tool](https://jsfuck.com/) to convert your JavaScript into just six characters, rendering [a spinning globe in 1KB of JS](https://aem1k.com/world/), the [Game of Life in 176 bytes](https://aem1k.com/life/), and _many more_ such experiments. 

Martin Kleppe   

**IN BRIEF:** 

- The folks behind the long standing [Gulp](https://gulpjs.com/) build tool [are running a survey](https://www.surveyhero.com/c/dbdqqnrp) to help make Gulp better and suit modern needs. It closes tomorrow.
- 🫠 JavaScript's creator Brendan Eich [popped up on Twitter/X](https://x.com/BrendanEich/status/1795865137317908739) to refute a claim that JS is "the most slop" by saying it's only 50% so.. I don't get it either.
- If you haven't gone down the [JSR](https://jsr.io/) rabbit hole yet, let [▶️ Ryan Dahl convince you](https://www.youtube.com/watch?v=MFCn4ce5dVc) through his DevWorld 2024 talk. _(29 minutes.)_
- Three.js introduces [its own 'TSL' shader language](https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language) as a way to write WebGPU shaders with JavaScript rather than the WebGPU Shading Language.   

**RELEASES:** 

- [Astro 4.9](https://astro.build/blog/astro-490/) – The framework that does everything now does even more, gaining React 19 enhancements, plus a Container API for rendering Astro components _outside_ of Astro apps.
- [Node.js v18.20.3 (LTS)](https://nodejs.org/en/blog/release/v18.20.3) and [v20.14.0 (LTS).](https://nodejs.org/en/blog/release/v20.14.0)
- [Rspack 0.7](https://www.rspack.dev/blog/announcing-0-7) – Fast Rust-based web bundler.
- [Storybook 8.1](https://storybook.js.org/blog/storybook-8-1/) – The frontend component workshop.
- [Deno 1.44](https://deno.com/blog/v1.44)  

📒 Articles & Tutorials  

[10 Modern Node.js Runtime Features to Start Using in 2024](https://snyk.io/blog/10-modern-node-js-runtime-features/) — If it ever feels like the new feature spotlight shines too much on [Bun](https://bun.sh/) or [Deno](https://deno.com/blog), never fear - Node.js has been taking huge strides forward too. Liran looks at lots of what’s new. 

Liran Tal   

[ECMAScript 2023 Feature: Symbols as WeakMap keys](https://2ality.com/2024/05/proposal-symbols-as-weakmap-keys.html) — Dr. Axel continues his look at language features by explaining what WeakMaps are for and why using symbols for keys has added benefits. 

Dr. Axel Rauschmayer   

[Introducing a New Fullstack TypeScript DX from AWS](https://aws.amazon.com/blogs/mobile/amplify-gen2-ga/?trk=96f619c1-2925-4ec6-899c-1533efd93305&sc_channel=em) — Build every part of your app’s cloud backend with TypeScript: auth? TypeScript. Data? TypeScript. Storage? TypeScript. 

AWS Amplify sponsor   

▶[uBlock Origin: Let's Read the Code](https://www.youtube.com/watch?v=L8wGnaFM_Kw) — A prolific code reader spends some time digging into the popular ad blocker that’s almost entirely built in JavaScript. 

Ants Are Everywhere   

[Why We Need a Standard JavaScript ORM for SQL Databases](https://thenewstack.io/why-we-need-a-standard-javascript-orm-for-sql-databases/) — ..and is it [Drizzle?](https://orm.drizzle.team/) 

Paul Scanlon (The New Stack)   

[Want Out of React Complexity? Try Vue](https://thenewstack.io/want-out-of-react-complexity-try-vues-progressive-framework/) — A high level piece that may provide some context if you haven’t dabbled with Vue yet. 

Richard MacManus (The New Stack)   

[Stale Thinking Causes Teams to Thrash — You Need a Breath of Fresh Air ☀️](https://link.testdouble.com/dxd) — Get fresh perspective from product managers who’ve been-there-done-that across tons of domains, use cases, and problems. 

Test Double sponsor   

📄 [Why We Don't Have a Laravel For JavaScript... Yet](https://wasp-lang.dev/blog/2024/05/29/why-we-dont-have-laravel-for-javascript-yet) Vince Canger (Wasp) 

📄 [It’s Not Just You, Next.js is Getting Harder to Use](https://www.propelauth.com/post/nextjs-challenges) Andrew Israel 

📄 [How to Create a Modal in React with HTML's `<dialog>`](https://spacejelly.dev/posts/how-to-create-a-modal-in-react-with-html-dialog) Colby Fayock 

📄 [What's New in Angular 18](https://www.angularaddicts.com/p/whats-new-in-angular-18) Gergely Szerovay  

🛠 Code & Tools 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/aboahlfwziq2t9nrhjko.jpg)](https://regexper.com/)  

[Regexper: Display JavaScript Regular Expressions as Railroad Diagrams](https://regexper.com/) — Might come in handy for learning regular expressions or if you have a complex regular expression and you don’t know what it does (not an uncommon situation..!) 

Jeff Avallone   

[Hono 4.4: The Standards-Based JS Web App Framework for Everywhere](https://github.com/honojs/hono/releases/tag/v4.4.0) — [Hono](https://hono.dev/) is a small, fast web framework with a straightforward API, middleware support, and that runs pretty much on anything (Deno, Bun, Node, Cloudflare, and more). v4.4 brings it [to JSR](https://jsr.io/@hono/hono), adds timeout middleware, and a helper to get information about connected clients. 

Yusuke Wada and Contributors   

[Your Fastest Path to Production](https://render.com?utm_source=coopeprpress&utm_medium=cooperpress) — Build, deploy, and scale your apps with unparalleled ease – from your first user to your billionth. 

Render sponsor   

[Inertia.js 1.1: Build SPAs for Any Backend](https://inertiajs.com/) — Inertia acts as ‘glue’ between various frontend libraries (React, Vue, or Svelte, say) and server-side frameworks (e.g. Rails or Laravel). 

Jonathan Reinink   

[ShareDB 5.0: Realtime Database Backend Based on Operational Transformation](https://github.com/share/sharedb) — For when you need real time synchronization of JSON documents (such as for behind a real time collaboration app). 

ShareJS   

- [PyMiniRacer v0.12.2](https://bpcreech.com/post/mini-racer-v0.12.2/) – Call your Python from your JavaScript from your Python.
- [Knip 5.17.0](https://knip.dev/) – Finds and removes unused files, dependencies and exports. Now [with_more._](https://x.com/webprolific/status/1794995970561704446)
- [PM2 5.4](https://pm2.keymetrics.io/) – Popular Node.js-based process manager for production.
- [Melange 4.0](https://melange.re/blog/posts/melange-4-is-here) – OCaml compiler for JavaScript developers.
- [Neutralinojs 5.2](https://neutralino.js.org/docs/release-notes/framework#v520) – Lightweight cross-platform desktop app framework.
- [Billboard.js 3.12](https://netil.medium.com/billboard-js-3-12-release-new-funnel-chart-a66368804ce4) – The popular chart library gets funnel charts.
- [Peaks.js 3.4](https://github.com/bbc/peaks.js) – BBC-created audio waveform UI component.
- [Happy DOM 14.12](https://github.com/capricorn86/happy-dom/releases/tag/v14.12.0) – JS implementation of a web browser _sans_UI.
- [Retire.js 5.0](https://github.com/RetireJS/retire.js) – Scans for JS libraries with known vulnerabilities.
- [React Native Boilerplate 4.2](https://github.com/thecodingmachine/react-native-boilerplate) – A starter template for RN apps.
- [RE:DOM 4.1](https://github.com/redom/redom) – Tiny library for creating user interfaces.
- [AlaSQL.js 4.4](https://github.com/AlaSQL/alasql) – Isomorphic JavaScript SQL database.
- [is-what 5.0](https://github.com/mesqueeb/is-what) – Simple, small JS type check functions.
- [FxTS 1.0](https://fxts.dev/) – Functional programming library.  

⏰ And one for fun.. 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/x8znymhmqow4frmvxhjg.jpg)](https://aem1k.com/qlock/)  

[Qlock: A JavaScript Quine Clock](https://aem1k.com/qlock/) — We linked to Martin's array of creative JavaScript experiments earlier, but why not finish with one that particularly tickled us? A [quine](https://en.wikipedia.org/wiki/Quine_%28computing%29) is a program that takes no input but manages to produce, as output, its own source code. Here’s a fun JavaScript example that isn’t merely a quine, but a clock too. 

Martin Kleppe         

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
