Under the hood of MDN's new frontend

Under the hood of MDN's new frontend
28 minutes by Leo McArdle

MDN rebuilt its frontend to fix slow builds, messy CSS, and a React app that couldn't interact with its own page content. The new approach drops the single page app entirely, using server-side HTML templating and web components built with Lit for interactive elements. Each component loads its own CSS and JavaScript only when needed, keeping pages fast. The development environment now starts in 2 seconds, down from 2 minutes.

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.

The uphill climb of making diff lines performant
10 minutes by Luke Ghenco, Adam Shwert

GitHub improved the performance of its pull request tab, especially for very large changes. By simplifying React components, reducing DOM elements, optimizing data access, and adding virtualization, they cut memory use and lag significantly. These targeted changes made the interface faster, smoother, and more reliable for all users, while keeping it usable even for pull requests with thousands of lines.

React server components your way
13 minutes by Manuel Schiller et al.

This post explains a new way to use React Server Components in TanStack Start. Instead of letting the server control everything, developers can treat server components like data—fetch, cache, and render them as needed. This makes apps more flexible and efficient. It also introduces “Composite Components,” where the server and client share control of the UI, improving performance and customization.

The vertical codebase
9 minutes by Dominik Dorfmeister

Dominik argues that structuring code by type (like components or utils) does not scale well. Instead, he suggests organizing code into “verticals,” grouping everything by functionality or purpose. This improves clarity, reduces complexity, and keeps related code together. Vertical structure helps both developers and AI tools work more efficiently, though it requires careful planning and good communication between teams.

Contributing callsite revalidation opt-out to React router
5 minutes by David Adams

David explains adding a new feature to React Router that lets developers control data reloading more precisely. Instead of always refreshing all data after changes, the feature allows opting out at the place where a request is made. This simplifies code, avoids unnecessary updates, and improves flexibility.

webdev

• Testing OpenGraph on localhost from the CLI before you go public
• CSS position: sticky now sticks to the nearest scroller on a per axis basis
• CSS subgrid is super good

javascript

• Introducing a new spam policy for "back button hijacking"
• You can't cancel a JavaScript promise (except sometimes you can)
• Uses for nested promises

And the most popular article from the last issue was:

• 10 React tips I wish someone had told me