#β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
X 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.
-
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.
π 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.