#651 — August 10, 2023
My Experience Modernizing Packages to ESM — What a post! Mark, well known for his work on React, Redux, and much more, details the painful experiences and hard-earned lessons he picked up while migrating the Redux packages to ES modules.
Mark ‘acemarke’ Erikson
Things You Forgot (or Never Knew) Because of React — “I’ve written before about how React is the new default frontend framework, and how I don’t think most people using React on a regular basis realize quite how much it’s fallen behind.” High level thoughts about the React ‘bubble’ and some reasons to look beyond it, including a round up of some of the alternative options.
Build Web Apps in 60 Seconds with Dynaboard AI — Dynaboard’s low-code IDE offers 40+ built-in UI components. Quickly connect to REST & GraphQL APIs, SQL databases, and spreadsheets. Write custom code or use AI to generate any SQL, JS, or CSS.
⚡️ IN BRIEF:
“Svelte 5 is going to be radical,” 🐦 tweets Rich Harris.
Server side JS runtime Deno 1.36 has been released with extended security options, a polyfill for node:test, completion of the node:os polyfill, and many other minor Node.js compatibility improvements.
Google has unveiled a sneak peek of a new IDE it’s developing called Project IDX. It has VS Code at its base but with strong JS framework support, simulators, and lot of ‘AI smarts’ on top, 🐦 says Addy Osmani.
A fun walk through front-end history with a blog post containing every HTML element (well, almost – sorry applet).
Node.js Security Releases – v20.5.1 (Current), v18.17.1 (LTS) and v16.20.2 (LTS) are all part of this set of releases including OpenSSL security updates and fixes, mostly, around permission policies.
📒 Articles & Tutorials
Reduce Tech Debt. UpgradeJS now. sponsor
▶ A Look at HTMX: A ‘Game-Changing’ Alternative to React? — One of Jack’s typically well produced, short tours (just 14-minutes). He likes htmx and thinks it’s worth learning in order to have more options in your toolbox.
📝 Prefer a traditional writeup? James Hibbard has one here.
Andy Jiang (Deno)
Creating a Screen + Camera Recorder with the Document Picture-in-Picture API — This is more powerful than I was expecting. You can basically record a screencast using browser APIs. In Chrome, at least.
Sébastien Jalliffier Verne
▶ Build and Deploy a Full Stack MERN Next.js 13 Threads Clone — An extensive, five hour screencast walking through the creation of a Threads/Twitter/X-style app using Next.js 13 and Clerk for user management.
Tobias Koppers and Jack Herrington
Autogenerating Rust-JS Bindings with UniFFI
Ben Dean-Kawamura (Mozilla)
Migrating My Blog from Gatsby to Astro
🛠 Code & Tools
Fuite 3.0: A Tool for Finding Memory Leaks in Web Apps — A CLI tool that you can point at any URL to analyze for memory leaks. Introductory blog post here, and there’s also a video tutorial.
Luxon 3.4: Date and Time Manipulation Library — If you’re familiar with Moment.js, it’s like that but with immutable objects, 1-indexed months, Intl-powered localization (so no locale or timezone files needed) and more.
Filesize.js: Generate Human Readable Strings From File Sizes — For example, 123456 bytes could turn into “120.56 KB” – though different standards of conversion can also be used. GitHub repo.
Typograms: A Way to Render ASCII Diagrams More Elegantly — An intriguing project where you ‘draw’ diagrams in plain ASCII text within special script tags and these get rendered into much nicer looking versions. An interesting approach if Mermaid is too full on for your needs.
Sam Goto / Google
d3-graphviz 5.1: Graphviz DOT Rendering and Animated Transitions — Renders SVGs from DOT-defined graphs using a WebAssembly port of Graphviz, a popular graph visualization tool.
🔊 Meyda: Audio Feature Extraction Library — Supports both offline feature extraction as well as real-time feature extraction using the Web Audio API. You can play with a demo right on the homepage.
Rawlinson, Segal, Fiala, Wray, et al.
🧑💻 Got a job listing to share? Here’s how.
ggml.js: Run ggml-Ported ML Models Directly in Your Browser — We’re going to do a feature on ML/AI related stuff in JS next week, so watch this space..
Rahul D Shetty
React Virtuoso 4.5 – Powerful virtual list component.
Perspective 2.4 – Fast, streaming real-time data visualization.
express-rate-limit 6.9 – Basic rate limiting for Express apps.
PLV8 3.2 – Use JS as a procedural language in PostgreSQL.
Puppeteer 21.0 – Headless Chrome automation in Node.js.
📊 Well, that’s handy..
npmgraph: A Fun Way to Visualize Package Dependency Graphs — A Web tool that accepts one or more package names (or a package.json) and renders a visualization of their (possibly intersecting) dependency graphs. Packages can be colored by various criteria (such as number of maintainers, if you want to see how fragile the world is) and you can download SVGs of the output.
Kieffer, Brigante, et al.