#​677 — February 29, 2024

Read on the Web

Together with  Frontend Masters logo

JavaScript Weekly

PGlite: PostgreSQL in WebAssembly (and TypeScript) — People have brought Postgres into the browser before, albeit atop a Linux VM WASM layer. PGlite, however, packages a WASM build of Postgres into a TypeScript library that can be run in the browser or on Node.js or Bun and is only 3.7MB gzipped. You can play with a live deployment here.

ElectricSQL / Neon

JSR: What We Know So Far About Deno’s New JS Package Registry — The Deno team is cooking up JSR (still behind a waitlist), a new JavaScript package registry (not merely a package management tool, like pnpm or Yarn) to address various npm limitations, including for Node users who don't even plan to use Deno.

Sarah Gooding (Socket)

Practice Your JavaScript through Vanilla JS Projects — Join Anjana Vakil for this extensive video course on vanilla JavaScript projects. Tackle real-world tasks and learn how to use asynchronous JS, Browser APIs, the DOM, Node.js, GitHub Actions, and more.

Frontend Masters sponsor

Parcel v2.12.0: Now with Bun-Style Macros — The popular zero-config build tool introduces support for bundle-time macros, such as those offered in Bun. The value returned by a macro is inlined into the bundle in place of the original call. There’s also a new online REPL where you can play with Parcel in the browser with support for most of Parcel’s features.

Parcel.js

IN BRIEF:

  • TypeScript 5.4 RC has been released, packing lots of small changes, as well as Object.groupBy, Map.groupBy, and type narrowing enhancements.

  • Christopher Chedeau (aka Vjeux) has written about his 12 years at Meta, including being involved in the early days of both React and React Native.

  • A summary of recent updates to the V8 JavaScript engine.

  • 🇪🇺 Fed up with Apple's nonsense around removing PWA support in the European Union? Open Web Advocacy has an open letter you can co-sign.

RELEASES:

  • Express.js 4.18.3 – The first release in sixteen months. 😁

  • Deno 1.41 – Now with much smaller deno compile binary sizes, official Linux ARM64 binaries, and improvements to Node.js compatibility.

  • Playwright 1.42 – Browser remote control and runner toolkit.

  • Babel 7.24.0 – Supports importing JSON modules and updates its Decorators implementation.

  • TinyMCE 7.0 – Rich text editor component – now GPL licensed.

Frontend Developer 🔝 (Fully Remote 🌐 Or In Our Office In Stockholm, Sweden 🇸🇪) — Do you get excited when you hear Next.js, Supabase, GraphQL? Let’s talk.
ZCO Stockholm job

📒 Articles & Tutorials

Reporting Core Web Vitals with the Performance API — The Performance API provides an interface to ways to measure and evaluate Web performance metrics from JavaScript. Geoff demonstrates how to use its capabilities to do your own performance reporting.

Geoff Graham

A Fun Line of JavaScript Code — Namely, using Promise.race to search through audio files forwards and backwards at the same time and stop as soon as the relevant metadata is found.

David Bushell

How StackBlitz Built a T-Shirt That Renders Itself — How we designed a t-shirt using valid JavaScript that is also the source code of the image itself (and how you can get one).

StackBlitz sponsor

Next.js vs. Remix: A Developer's Dilemma — Compares a variety of areas, from how various techniques are implemented through to deployment, support, and popularity.

Chetan Gawai

Why Does is-number Have 70+ Million Weekly Downloads? — In part, it’s included in a chain of dependencies used by a very popular project.

Shubham Jain

17 Equations That Changed the World - Rewritten in JavaScript — This is quite neat if you enjoy a bit of math.

RunJS

How to Create Sidebar Navigation with Astro, Tailwind CSS and Alpine.js
Michael Andreuzza

▶  Use AWS Amplify Gen 2 to Create a Full Stack App with Type Safety
Erik Hanchett (AWS)

A Look into JSDoc as an Alternative TypeScript Syntax
Alex Harri

🛠 Code & Tools

PrimeVue 3.49.0: Vue UI Component Library — A mature, rich set of open source UI components for Vue developers we first mentioned a few years ago. This new release includes components to enter one time passwords and a ‘stepper’ for wizard-style workflows. There’s also a new optional declarative syntax for using components that makes their code easier to read and write.

PrimeTek

Authentication & User Management for the Modern Web — Add authentication & user management easily with Clerk using our Quickstart guides. Purpose-built for React & Next.js.

Clerk sponsor

Waku: A Minimal Server-Side React Framework — From the maintainer of Jotai, Valtio, and Zustand, Waku is a lighter alternative to something like Next.js but that still opens up the potential of server components, shared components, and elegant routing, in a simpler, easier to apply way.

Daishi Kato

Embla Carousel 8: Carousel with Fluid Motion and 'Swipe Precision' — Carousels are a popular, though often maligned, UI element, but the examples work pretty well for us. Library agnostic, but has easy integrations for React, Solid, and Angular, if you need them. The v8.0 release notes touch on many new features.

David Jerleke

Readability.js: Extract the Readable Content from an HTML Document — A standalone version of the library used to power Firefox’s Reader View. It's been a few years since we've linked to this, but it continues to be improved.

Mozilla

Viz.js: Work with Graphviz in the BrowserGraphviz is a suite of open source graph drawing tools of some 30+ years’ vintage. Viz.js is a WebAssembly Graphviz build that brings some of its functionality into the browser, as seen in the homepage's live demo (above). GitHub repo.

Michael Daines

🎨 Vue Color Wheel: A Wheel-Style Color Picker for Vue 3 — Far from a new idea, but elegantly demonstrated on its homepage. Coloris is a nice, vanilla alternative in this space, if the wheel view isn't a necessity.

Robert Shaw

Neon is Postgres from the Future — Scales to zero when idle, autoscales based on load, provisions instantly. Generous free tier - no credit card required.

Neon Serverless Postgres sponsor

WXT: Next-Gen Web Extension Framework — A framework for creating cross-browser extensions. You can target Chrome, Firefox, Edge and Safari. Plasmo is another option in this space.

WXT