#687 — May 9, 2024
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:
Ben Hong presents a helpful look at the Vue ecosystem as of 2024.
📅 React Conf 2024 takes place next week. No tickets, but you can register for the free livestream to enjoy it from afar.
The Node.js core invites you to take part in the latest Node.js Next 10 survey to help them make decisions about where to take Node next.
Last week we featured a fun ▶️ talk about the use of let vs const, but it seems Jack Herrington wasn’t a big fan of the approach, so he ▶️ spent 10 minutes analyzing the talk and its claims.
The Bun folks are seeking a systems engineer to join their team, as part of their push into making Bun 🐦 even more production-friendly.
RELEASES:
⭐️ esbuild 0.21.0 – A more significant release than the version number lets on, as it introduces support for the decorators proposal (so extra testing is recommended when you upgrade).
Docusaurus 3.3 – The React powered site builder.
Ionic 8.1 – Cross-platform UI toolkit for building native-quality apps.
pnpm 9.1, AdonisJS 6.9, Playwright 1.44.0, Bun 1.1.7
📒 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
MSW (Mock Service Worker) 2.3 – API mocking library.
Mantine 7.9 – Popular React components library.
node-oracledb 6.5 – Oracle’s own official Node.js database driver, now with support for Oracle’s latest vector search functionality.
js-bson 6.7 – MongoDB BSON parser for Node and browsers.
d3-graphviz 5.4 – Render SVGs from Graphviz DOT graphs.
validator.js 13.12.0 – String validation functions.