#666 — December 7, 2023
JavaScript Weekly
Learn How Modern JS Frameworks Work by Building One — Building things is a great way to learn, even if you don’t end up using what you built. Even better is when someone who’s already built something successful introduces you to the process. Nolan doesn’t go super deep but far enough to whet your appetite and for you to learn a few things by taking it further.
Nolan Lawson
🚀 Astro 4.0 Released — The new major release of the Astro content-site framework is just out, including a new dev toolbar, automatic i18n routing, new view transition APIs, and more. There’s also, experimentally, incremental content caching. Upgrading is simple – an npx @astrojs/upgrade away for most folks.
Astro
Streamline API Development With Postman Workspaces — Postman workspaces give teams shared access to the API tools they need to solve problems together. They are the go-to place for development teams to collaborate and move quickly while staying on the same page.
Postman sponsor
Maglev: V8’s Fastest Optimizing JIT — An interesting look under the hood of how the V8 JavaScript engine (as used in Chrome, Node.js and elsewhere) continues to get faster thanks to work on its Maglev JIT compiler which sits between the existing Sparkplug and TurboFan compilers (which both have distinct compilation speed vs code performance tradeoffs).
The V8 Team
IN BRIEF:
📊 The WebAssembly vs JavaScript (PDF) paper compares the energy requirements and performance of JS and WASM on the Web. Spoiler: “WebAssembly is faster than JavaScript and even more energy efficient.”
A recap of the Electron ecosystem in 2023.
The New Stack weighs up the pros and cons of using React today.
Talk about going down a rabbit hole, but did you know it’s possible to use Nuxt, Vue and Tailwind CSS to build an Adobe Premier Pro plugin?
Popular ingress service ngrok has unveiled a JavaScript SDK to add secure ingress to Node apps.
The Construct 3 2D game engine now supports TypeScript.
RELEASES:
Electron 28 – Now with ESM support, Chromium 120 & Node.js 18.18.2.
Fresh 1.6 – The Deno-based web framework.
React Native 0.73 – Now with full Android 14 support, Kotlin becomes the recommended language for Android, and more.
HTML5 Boilerplate v9.0 – Blast from the past!
Redux 5.0, Redux Toolkit 2.0, and more.
Node.js v21.4.0 (Current), Qwik 1.3, and Redwood 6.5
📄 Articles & Tutorials
Prettier’s CLI: A Performance Deep Dive — We’ve recently written about the bounty the Prettier project put up (and how Biome won it) but Prettier has also been working on itself by hiring the author of this post to find and implement performance improvements, all while sticking with JavaScript.
Fabio Spampinato
The Complete Puppeteer Cheatsheet — If you want to control a headless Chrome browser from JavaScript, Puppeteer is for you.
Mohan Ganesan
Accelerate Your API Development with Postman Collection Templates — Browse 70+ free and customizable templates to jump-start your API design, documentation, development, and testing workflows.
Postman sponsor
How Marketing Changed OOP in JavaScript — A look at JavaScript’s earliest history and its prototypal nature.
Juan Diego Rodríguez
Goodbye, Clean Code — Much as Donald Knuth warned us away from premature optimization, here Dan Abramov tells us to beware of premature refactoring and de-duplication. (A golden oldie post from 2020.)
Dan Abramov
I Replaced npm, yarn and nvm with pnpm — npm hasn’t been the only package manager in town for many years.
Pawel Grzybek
Advanced Patterns for Taking Page Element Screenshots with Playwright
Liran Tal
TypeScript’s Hidden Feature: Subtypes
Tim Johns
🛠 Code & Tools
TSDiagram: Diagrams as Code with TypeScript — Draft diagrams quickly with TypeScript. Define data models through top-level type aliases and interfaces and it automatically lays out things out in an efficient way. GitHub repo.
Andrei Neculaesei
StyleX: Meta’s CSS-in-JS Styling System — A newly open sourced “CSS-in-JS” library from Meta made up of a JavaScript syntax and compiler for styling web apps. Jack Herrington has ▶️ a 13-minute screencast taking a practical look.
Goel and Gallagher (Meta)
Simplify Debugging with Console Ninja’s Predictive Logging — Smart predictions and ahead of time logging saves you multiple iterations of adding logs and re-running your app to get the values you need.
Wallaby Team sponsor
tsParticles 3.0: Particles, Confetti and Fireworks for Your Pages — Create customizable particle related effects for use on the Web. Uses the regular 2D canvas for broad support.
Matteo Bruni
Culori: A General-Purpose Color Manipulation Library — Supports most color spaces and formats defined in the CSS Colors Level 4 spec and can parse, convert, mix, create color differences, and more. GitHub repo.
Moqups
Perfume.js 9.2: Web Performance Library for Measuring User-Centric Metrics — A tiny web perf monitoring library that reports data back to your favorite analytics tool and supports the latest browser performance APIs for precise metrics on things like first paint, total blocking time, etc.
Leonardo Zizzamia
Timenames: A Unique Name for Each Second of the Day — The author had an app and wanted to create more interesting unique filenames without using the time directly. There’s a live demo showing the names in action.
Ankur Seth
YouTube.js 8.0: A Wrapper Around YouTube’s Private ‘InnerTube’ API — It uses the same behind the scenes API as official YouTube clients, rather than the official developer API, so, as always, your mileage may vary.
LuanRT
Feel the Power of More Than 420,000 Teammates and Work #LikeABosch
Bosch sponsor
Storybook 7.6 – The frontend UI component workshop.
Mantine 7.3 – Full featured React component suite.
swup 4.5 – Page transition library for server-rendered sites.
wavesurfer.js 7.5 – Audio waveform rendering and playing.
Nano Events 9.0 – An event emitter library in 107 bytes.
AdminJS 7.5 – Admin interface for webapps.
AVA 6.0 – Popular test runner for Node.