#679 — March 14, 2024
JavaScript Weekly
Use Parcel Macros in Other Bundlers with unplugin-parcel-macros — Macros, as implemented in Parcel (and Bun!), are JS functions that run at build time whose results are inlined into a bundle in place of the original call. You can now use this feature with webpack, Vite, Rollup, esbuild, etc. Here’s a quick example of how handy this can be.
Devon Govett
𝕏 Devon goes into extra detail 🐦 in this Twitter/X thread. You can also revisit the release of Parcel 2.12.0 to learn more.
How to Add an Onboarding Flow for your Application — Learn to enhance onboarding for your app with Clerk and Next.js: add custom session tokens, configure Next.js middleware for session data, and auto-update user metadata for a streamlined, code-efficient user experience with minimal code.
Clerk sponsor
Speedometer 3.0: The Best Way Yet to Measure Browser Performance — Speedometer has been around since 2014, but this new release is the first with a full collaborative approach involving each major browser engine (Blink, Gecko, WebKit). You can run the test yourself here.
Apple, Google, Microsoft, and Mozilla
WinterJS 1.0: A Fast WinterCG and WASM-Compatible JS Runtime — WinterJS initially pitched itself as a Rust and SpiderMonkey-powered ‘Service Workers server’ but now simply boasts being the fastest WinterCG-compatible JavaScript web server full stop. The ability to run JITed JS workloads entirely under WebAssembly is next on their radar.
Wasmer
IN BRIEF:
Last week we linked to JSR, Deno’s attempt at a new JavaScript registry. If that post was too much to digest, they now have ▶️ a 6-minute video introduction covering the key motivations and features.
The Astro folks have unveiled Astro DB, a fully managed SQL database designed exclusively for Astro.
📊 Benchmarking Node vs LLRT/QuickJS.
f(x) is a fantastic terminal-based JSON viewer app (written in Go, but it can integrate with JS functions) – its latest version supports YAML too.
RELEASES:
Biome 1.6 – The toolchain gets partial support for Astro, Svelte & Vue files.
D3.js 7.9 – Popular data visualization library. They launched a fantastic new homepage several months ago too, if you haven’t checked in for a while.
React Native Skia 1.0 – Complete with ▶️ a launch video.
Node.js v21.7.1, Cypress 13.7, Angular 17.3, Ember 5.7
📒 Articles & Tutorials
Comparing JavaScript Frameworks: Templates — A thorough comparison of the template languages used by React, Vue, Angular and Svelte. Interesting analysis and this looks set to turn into a great series.
Maarten Hus
▶ Setting up an Express.js App with TypeScript in 2024 — This hour-long video isn’t about building an entire app, but getting everything set up and working in a clear, easy to follow way, including a variety of modern DX niceties.
Anson the Developer
5 Lessons Design Systems Teams Can Learn from Open-Source Maintainers — Design system teams must balance evangelism with maintenance and development. Turns out, the same is true of open source.
StackBlitz sponsor
Make Your TypeScript Functions More Reusable with Generics — Matt kicks this off with a challenge for you to consider, before showing how to make a function more flexible and type-safe by using type parameters instead of any.
Matt Pocock
How HEAD Works in Git
Julia Evans
🛠 Code & Tools
Shiki 1.0: A Powerful Syntax Highlighter — A few months ago, we linked to Shikiji, a fork of Shiki that was created to push the project forward. Happily, the creators of both libraries decided to join forces and Shiki 1.0 was born. It’s a syntax highlighter based on TextMate grammar and themes, the same engine as used by VS Code. The docs are good.
Pine Wu, Anthony Fu
Rolldown: A Rust-Powered Bundler for JavaScript — A new entry to an increasingly crowded market, but they explain why they’re building it here – it’s intended to underpin a future bundler to be used in Vite, rather than esbuild and Rollup. GitHub repo.
Rolldown
Breakpoints and console.log Is the Past, Time Travel Is the Future — 15x faster JavaScript debugging than with breakpoints and console.log, supports Vitest, jest, karma, jasmine, and more.
Wallaby Team sponsor
Storybook 8 Released — The popular front-end component workshop introduces built-in visual testing, support for React Server Components, up to 50% faster start times, Vite 5 support, and upgraded Vue and React control auto-generation. There’s also ▶️ a launch video to enjoy.
Michael Shilman (Storybook)
The Playwright Test Generator — I don’t know why I’ve not linked this before, as it’s so useful. Playwright isn’t just a library for controlling browsers from JavaScript, but also includes a tool for generating tests and page navigation code from your own interactions. Hit record, do stuff, and code is written.
Microsoft
Managed Reliability & Observability for Webhooks & Asynchronous Messaging — Send, receive, authenticate, transform, filter, & route events between 3rd-party APIs (Stripe, Shopify, Twilio, etc.) & serverless functions.
Hookdeck sponsor
TinyBase 4.7: A Reactive Data Store for Local-First Apps — If you want a bit more database-esque structure around the management of state in your apps, this is worth a try. The demos show it off well. v4.7 adds support for Turso’s LibSQL (a fork of SQLite).
James Pearce et al.
⌘K 1.0: A Composable, Unstyled ‘Command Menu’ for React Apps — The home page includes some neat examples in a variety of styles. GitHub repo.
Paco Coursey
webtoon/PSD: Zero-Dependency PSD Parser for Browsers and Node — PSD (Photoshop Document) is the format used by Photoshop and this library lets you dig into metadata and pixels on each image layer.
webtoon inc
Knip 5.1 – Find unused files, dependencies and exports.
React Date Picker 6.3 – Simple date picker component. (Demo.)
OverlayScrollbars 2.6 – JavaScript custom scrollbars plugin.
🗓 date-fns 3.4 – Modern JavaScript date utility library.
Slonik 37.3 – Node.js Postgres client with type safety.
MQTT.js 5.4 – MQTT client for Node and browsers.
Perspective 2.9 – Fast visualization of streaming datasets.
Rspack 0.5.7 – Fast Rust-based web bundler.