Plus esbuild introduces decorators, a look at the modern Vue ecosystem, and some rather epic draggin' and droppin'. |

#​687 — May 9, 2024

Read on the Web

Together with  Mescius

JavaScript Weekly

Development Notes from xkcd's 'Machine' — I bet many of you are fans of xkcd! For this year’s April Fools’ joke, they published ‘Machine’, a giant Rube Goldberg machine of sorts (explained here). With a lot of TypeScript up front and Haskell in the back, here’s how it works at a technical level. (GitHub repo.)

Max Goodhart

Figma’s Journey to TypeScript — How the team at Figma automatically migrated code written in their own Skew programming language over to TypeScript — without disrupting a single day of development.

Brandon Lin (Figma)

Advanced JavaScript Tools to Empower Your Applications — Build better web applications with powerful JavaScript developer tools including: SpreadJS Excel-like spreadsheet components, ActiveReportsJS reporting tools, Wijmo UI component suite, and Document Solutions viewers for PDF, Excel, Image, and more.

MESCIUS inc sponsor

Gulp Never Went Away; Take the Gulp Developer Survey? — It’s easy to forget many great tools that got a lot of press years ago are still going and doing well. So it goes for Gulp, a build system and toolkit first released in 2013. Gulp 5.0 came out last month and the team is on a mission to make it even better. If you want to help, you can take their survey here.

Clarissa Abidog

IN BRIEF:

RELEASES:

📒 Articles & Tutorials

▶  Seamless Drag and Drop Between Applications — A fantastic demonstration of using browser APIs to create more elegant drag and drop experiences that even work across different browser windows or IFRAMEs, with Atlassian’s Pragmatic Drag and Drop library doing the heavy lifting.

Alex Reardon

Why Patching Globals is Harmful — Modifying global APIs to extend their features is common, but not particularly desirable if readability, maintenance, and predictability are qualities you enjoy.

Artem Zakharchenko

Your Background Images Might Be Causing CLS by Salma Alam-Naylor — In this post, learn how to to avoid unexpected cumulative layout shift (CLS) with tried and tested solutions.

Sentry sponsor

Five Node Version Managers Compared — Ideally, we could use the latest LTS version of Node for everything, but in reality we often need to switch versions. Numerous tools let you do this. NVM is the best known, but N, FNM, Volta, or even pnpm could suit you better?

Pavel Romanov

'At Some Point, JavaScript Got Good' — The author notes JavaScript got a “big ‘boost’” with ES6, and commends the continuous improvements made since. Perhaps unsurprisingly, an associated lively discussion on Hacker News highlighted some lingering overall disdain.

Jonathan Beebe

📺 Exploring What's New in Node 22 – 90-minutes for true completionists. Matteo Collina

📄 How to Securely Send a Request When Closing Tabs – The oft-forgotten sendBeacon() to the rescue. Zachary Lee

📄 Exploring a 3D Text Distortion Effect with React Three Fiber Nine / Codrops

📄 Autogenerating Podcast Show Notes with yt-dlp, Whisper.cpp, and Node Anthony Campolo

📄 A React Developer's Guide to Learning SolidJS Tristan Dyer

📄 Why React Query? UI․dev

🛠 Code & Tools

Pintora: An Extensible Text-to-Diagram Rendering Library — A similar idea to Mermaid but with a different attitude to extensibility as well as no requirement for a headless browser server-side. The intro docs have both visual and code examples.

Hikerpig

Headless UI v2.0 for React — From the Tailwind folks, Headless UI is a suite of unstyled, accessible UI React (and Vue, though at a lower version for now) components, designed to integrate well with Tailwind CSS.

Wathan and Reinink

Make Your Dev Experience Even Faster — 🥷 Console Ninja now logs network requests (fetch, XMLHttpRequest) for your app! Visually linking network activity directly to your code provides immediate insights into network behavior.

Wallaby Team sponsor

jQuery to JavaScript Converter — A browser-based tool to quickly convert jQuery scripts over to, well, non-jQuery-using code. Repo here.

lightGallery

DerbyJS 4: The Mature MVC Web Framework — Derby has lived through most of Node.js’s history and remains a viable option for building realtime, collaborative apps in particular. GitHub repo.

Nate Smith et al.

graphql-request 7.0: Minimal GraphQL Client — Now a pure ESM package with first class TypeScript support for both client and server-side.

Jason Kuhrt

Fabric.js: SVG-to-Canvas and Canvas-to-SVG Library — Provides an interactive object model on top of the HTML canvas to make it easier to work with multiple visual elements. A long standing project, v6 has been in the pipeline for a while and the first release candidate recently dropped.

Fabric.js

n