FE Bits Vol.32 | MUI v9 Released, A New Take on TanStack RSC, Google Cracks Down on Back Button Hijacking

This article has been machine-translated from Chinese. The translation may contain inaccuracies or awkward phrasing. If in doubt, please refer to the original Chinese version.

About This Newsletter

This issue's URL: https://blog.cosine.ren/post/weekly-32
This newsletter aims to be updated every Sunday.
Subscribe via RSS.
WeChat public account: FE Bits (前端周周谈 FE Bits). Click "read original" to view the source article.
QQ discussion group 598022684 / Discord server

This newsletter's content is also open-sourced at fe-bits-weekly. Feel free to follow along.

Today is April 19, 2026, Sunday.

Personal Updates

• April anime picks — thoughts on this season's lineup, including Studio Bones' new show and Marriage Toxin.

The April anime crop is tasty. As expected from Bones, the fight scenes look great. Marriage Toxin seemed pretty mediocre from its PV, but episode 2's OP sounds great, and watching two episodes back-to-back was a blast! It actually turned into one of my favorites of the season. (Bro... bro?) Also watching Kamiina Botan, Shunkashuutou Daikousha, Dr. Stone, and Iruma-kun.

• Health rambling: annual checkup caught fatty liver and PCOS — planting a flag to kick off Operation Weight Loss the day after tomorrow.

Every time I start feeling old, off to the hospital I go: "young lady, how do you already have fatty liver and PCOS at your age?" 😎 Welp! Operation Weight Loss starts the day after tomorrow, truly sobbing. This time I'm planting the flag — must slim down. Only then do I get to post the femboy selfies x👿

Ecosystem & Community Updates

• Material UI v9.0 released: Skipping v8 to sync its major version directly with MUI X v9. Adds the Base UI-powered NumberField and Menubar with submenu support; leverages color-mix() to enhance CSS variable-derived colors; boosts sx processing performance by up to 30% and trims bundle size by ~3%; clears out legacy component / componentsProps props, paving the way to eventually drop the Emotion dependency.

• React Server Components Your Way | TanStack Blog: TanStack Start treats RSC as a JSON-like fetchable, cacheable data-flow primitive, reusing TanStack Query and Router's caching machinery. It also proposes a "Composite Components" pattern where the client keeps control of the component tree and uses slots to embed server content on demand. On their own blog migration, client JS dropped by ~153KB and TBT fell from 1,200ms to 260ms.

• Chrome 148 Beta released: Highlights include CSS container query optimizations, native video/audio lazy loading, Web Serial support on Android, and built-in AI capability enhancements.

• Google announces crackdown on "back button hijacking": Google has added "back button hijacking" to its spam policies. Offending sites face manual demotion or algorithmic suppression.

Articles

• The Squash and Stretch Principle in Web Animation: Shows how to apply Disney's classic "squash and stretch" animation principle to web development to elevate micro-interaction quality.

• 7 View Transitions Recipes to Try: Shares 7 practical CSS view transition recipes, from basic setup all the way to advanced animations.

• The Vertical Codebase: advantages of feature-based organization: Makes the case that organizing a codebase vertically by feature scales better than horizontal organization by technical type.

• How to use standard HTML video and audio lazy loading on the web today: Explains how to use the native HTML loading="lazy" attribute on video and audio elements to defer loading and improve performance.

• The Intl API: The best browser API you're not using: Walks through how the Intl API handles dates, numbers, and text formatting across locales at zero cost and high performance.

• Effect without Effect-TS: algebraic thinking in plain TypeScript: Shows how to achieve type-safe error handling and explicit dependency injection in pure TS — no Effect-TS required.

• Building a Blog in TanStack (Part 1 of 2): Walks through building a Markdown-based blog system on the TanStack Start framework, covering server functions, dynamic routing, and syntax highlighting.

CSS New Features

• CSS multi-column layout wrapping features (Chrome 145+): Covers the new column-wrap and column-height properties introduced in Chrome 145+, enabling vertical wrapping in multi-column layouts.

• Selecting a date range in CSS: Explores how :nth-child(n of selector) can simplify the interaction logic and styling of a date range picker.

Tools & Sites

• wterm: a high-performance web terminal built on Zig and WASM: A lightweight, high-performance web terminal emulator driven by Zig and rendered with the DOM.

• Animata: nearly 200 animated React components: A free, open-source collection of animated React components built on Tailwind CSS. Focuses on backgrounds, buttons, text effects, and small widget animations — copy-paste to integrate and freely customize styling.

• React Photo Album: responsive photo gallery component: A React photo gallery component supporting row, column, and masonry layouts. Compatible with React 18+ and SSR. Includes examples and a Playground to preview different configurations.

Codepen

Pure CSS Ripple Effect

NikxDa combines CSS filters, blurs, contrast and blend modes to create a ripple effect that radiates out from the bottom of the text. Best viewed in Chrome or Safari (for now!).

Chunky 3D Buttons

See the Pen raMZQNe by Andrew-Fisher-the-decoder (@Andrew-Fisher-the-decoder) on CodePen.

Andrew Fisher's series of chunky, plastic-textured buttons takes us back to the 2010s — each press is incredibly satisfying.

Truly stress-relieving.

Bouncy checkboxes with GSAP

See the Pen WbGgJqz by jdillon (@jdillon) on CodePen.

Josh Dillon brings us a set of electric UI designs: three checkboxes light up with a neon, jumpy animation when checked, and smoothly dim when unchecked.

Refs

• Codepen Spark #505
• React StatusCode Issue #470