18 months of code, gone

18 months of code, gone. Here's what we learned.
11 minutes by Tom Piaggio

Tom shares a journey of rebuilding Autonoma's entire product after 1.5 years, ditching a messy codebase that had no tests and caused real customer losses. They moved away from Next.js and Server Actions due to serious problems around testing, security, performance, and observability. The new stack uses React, tRPC, and Hono, cutting memory use from 8GB to nearly nothing. Better AI models also made their old complex browser automation code unnecessary.

Your auth UI should look like the rest of your app
sponsored by Clerk

Clerk's prebuilt components are fully themeable — and now there's a visual editor to do it without guesswork. Adjust colors, typography, spacing, and borders with live feedback until the sign-in flow feels native to your product. No auth-flavored defaults left behind.

Bippy: Toolkit to hack into React internals
10 minutes by Aiden Bai

Bippy is a toolkit that lets you access React internals by pretending to be React DevTools. It hooks into a global window object that React reads from, giving you access to the fiber tree, which holds component props, state, and context data. It works with React v17 through v19 and needs no changes to your React code. Utility functions simplify traversing fibers, overriding props or state at runtime, and tracking which components actually rendered.

Singletons aren't as evil as you think
7 minutes by Andrew Bone

Singletons in React have a bad reputation, but they can be clean and simple with the right approach. By extending native JavaScript classes like EventTarget, Andrew shows you how you can build a singleton that fires events whenever its state changes. Pairing this with React's built-in useSyncExternalStore hook keeps your UI in sync automatically, with no polling or manual refreshes needed.

Making sense of key prop in React
9 minutes by Sankalpa Acharya

React uses the key prop to track list items during its reconciliation process. Sankalpa points out that without keys, React matches old and new elements purely by position, which causes it to reuse wrong component instances when items move. This leads to bugs like state sticking to the wrong item after sorting. A stable unique key, like a database ID, tells React exactly which item is which so it updates the DOM correctly.

Let your project structure tell the story
4 minutes by Petar Ivanov

Organizing code by feature rather than by technical layer makes projects easier to understand at a glance. A folder structure should reveal what an app does, not just what tools it uses. Petar suggests to keep related files like tests, types, and utilities close to the code that uses them, and only move things to a shared folder when multiple features truly need them. Enforce these boundaries with tools so the structure stays clean over time.

Still writing tests manually? Meticulous AI is here
sponsored by Meticulous

Most teams are forced to make the tradeoff between better coverage and more maintenance effort. But top engineering teams like Notion, Dropbox, Wealthsimple and LaunchDarkly have discovered a new testing paradigm. Built by ex-Palantir engineers, Meticulous creates and maintains E2E UI tests that covers every edge case of your web app without any developer effort - making it the only tool to improve both product quality and dev velocity.

webdev

• contrast-color() beyond black & white
• Building dynamic toggletips using anchored container queries
• NES-style CSS framework
• 49MB web page

javascript

• Source Maps: Shipping Features Through Standards
• Announcing TypeScript 6.0 RC
• Vite 8.0 is out

And the most popular article from the last issue was:

• Feature-based React architecture