FE Bits Vol.10｜React Compiler v1.0 Released, React Foundation Established, Vite Documentary and Vite+ Launch

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.

This newsletter aims to be updated every Sunday. The website is still under construction… Currently, we recommend subscribing to this newsletter’s Quaily RSS via Folo. WeChat Official Account: 前端周周谈 FE Bits. Click the “read original” link to view the source. QQ discussion group 598022684 for casual frontend tech & life chats. You can also submit your own articles in the group. Feel free to join — it’s more of a fan community. This newsletter is also open-sourced at fe-bits-weekly. Feel free to follow along.

Today is October 12, 2025, Sunday.

Between moving and hospital visits, this National Day holiday wasn’t really a break, so the website will have to be delayed a bit longer — it’s not at a point I’m happy with yet~

Probably won’t be settled in until the end of October.

This week I’ve merged in news from the National Day holiday period too, so the content is relatively substantial.

Ecosystem & Community Updates

React Compiler v1.0: React officially releases the first stable version of React Compiler, optimizing component performance at build time through automatic memoization.
Introducing the React Foundation: React officially announces the establishment of an independent React Foundation, transferring React and React Native from Meta to the foundation to promote community self-governance and ecosystem neutrality. The foundation will manage infrastructure, host React Conf, support ecosystem projects, and distribute grants. Additionally, React will establish an independent technical governance structure where community contributors jointly determine direction, ensuring no single organization dominates.
Reducing notification overload for a quieter browsing experience in Chrome: Chrome announces a new automatic notification permission revocation feature that will automatically revoke notification authorization for sites that users haven’t recently interacted with and that push notifications frequently, reducing notification noise.
Vite: The Documentary: A documentary produced by @CultRepo telling the story of Vite’s growth from a Vue developer’s side project to the standard tool for modern frontend. Starting with Evan You seeking breakthroughs from Webpack limitations, it reveals how Vite achieved an ultra-fast build experience using native ES Modules and instant Dev Server technology.

Meanwhile, Vite+ announced at VueConf 2025 has also launched. Vite+ is an all-in-one web toolchain integrating development, building, testing, formatting, caching, and more — designed for enterprise-grade performance and team collaboration.
What’s new in Svelte: October 2025: September’s Svelte updates focused on Remote Functions enhancements, async SSR, and the expansion of the community’s new tool ecosystem.
What’s New in ViteLand: September 2025 Recap: ViteLand’s September 2025 monthly review covering new developments in Vite, Vitest, Rolldown, and Oxc, performance optimization details, and community ecosystem highlights. Here’s the detailed review:

Rolldown Performance & Size Optimizations

Re-implemented file metadata reading on Windows, boosting build performance by 10-30%.
Optimized multi-threaded I/O on macOS by limiting threads to 4, improving performance by 10-45%.
Adjusted source map ignore mechanism, speeding up builds with source maps by 20-30%.
Reduced binary size by approximately 200KB by directly embedding Oxc helpers.
Related PR reference implementation, integration update.

Project Updates

Vite: create-vite wizard now supports the Rolldown option, GitHub reference.
Vitest: VS Code extension adds browser mode debugging, PR; future versions will natively support Playwright Trace Viewer.
Rolldown: Supports /* @__NO_SIDE_EFFECTS__ */ annotation for cross-chunk optimization; improved tree-shaking and dead code elimination.
Oxc / Oxlint: Lint performance improved 5-50% overall; supports preserve-caught-error rule with auto-fix; fixed memory leak issues; published Next.js example, performance optimization summary list.

Articles & Videos

Birth of Prettier: The story of Prettier’s birth — from the “spaces vs tabs holy war” to the industry standard for automated formatting. Prettier author Vjeux reflects on his early exposure to code formatting requirements as a student, experiencing code style conflicts firsthand at Facebook, and exploring various formatting solutions (like gofmt, dartfmt) and their failures; ultimately, he and collaborators like James Long drove Prettier’s creation.
How to Add Fast Client-Side Search to Astro Static Sites: Introduces how to integrate high-performance client-side full-text search into Astro-built static sites. The author compares the limitations of AI or third-party solutions, ultimately proposing using Astro’s build-time endpoints to generate JSON indices, combined with MiniSearch and Svelte for the search UI, achieving a fast, locally customizable search experience without remote APIs.
CSS Counters in Action: Introduces how to use CSS Counters to dynamically generate numbering on pages, implementing features like line numbers and chapter numbering.
Grouping Arrays in Modern JavaScript: Object.groupBy and Map.groupBy: Introduces ES2024’s new Object.groupBy() and Map.groupBy(), which make array grouping operations simpler and more readable.
A History of Core Web Vitals: Addy Osmani reviews the development history of Core Web Vitals, explaining their important role in improving user wait times and overall performance experience.
A Pragmatic Guide to Modern CSS Colours - Part One: A guide to the major changes and syntax updates in modern CSS color systems. Key topics include new rgb() and hsl() syntax changes, relative color usage, improved light/dark theme handling, color space applications, and new tools for wider gamut devices.
Targeting Specific Characters with CSS Rules: A creative experiment using CSS to precisely select and modify the appearance of specific characters. The conclusion is that you can use CSS rules to target specific characters and change their font — unfortunately, only the font can be changed.
How to Animate WebGL Shaders with GSAP: Ripples, Reveals and Dynamic Blur Effects: A progressive technical tutorial on combining GSAP animations with WebGL shaders to achieve real-time interactive effects (such as ripples, masks, dynamic blur).
Vue Basics: State Management in Vue: A systematic guide on state management in Vue, from ref/reactive to props/emits, provide/inject, and the official state management library Pinia, helping developers understand state management choices at different scales.
Vibe engineering: Dissatisfied with Vibe Coding, Simon Willison proposes the concept of “Vibe Engineering,” referring to a more rigorous, more mature approach to AI-assisted software development. The author emphasizes that unlike “vibe coding’s” rapid prototyping approach, vibe engineering is when senior engineers, having mastered LLMs and coding agents, use AI as an advanced coding assistant to accelerate high-quality software production through comprehensive testing, documentation, version control, and review systems.

CSS New Features

Dynamic Tooltip Position with Anchor Positioning: Introduces how to use the new CSS Anchor Positioning feature to create dynamically positioned tooltips that remain visible within the viewport and automatically adjust arrow direction.
Getting Creative with shape-outside: Explores how to use CSS shape-outside to break out of rectangular layouts, letting text and images blend naturally for a more rhythmic and expressive reading experience.
View Transitions: What’s New in 2025: The View Transitions API sees multiple advances in 2025 regarding browser and framework support, tooling/debugging, and new features.
We Completely Missed width/height: stretch: Introduces the width: stretch and height: stretch values newly added to the CSS standard. The author explores differences from box-sizing: border-box, animation characteristics (animatable), and current browser support. While stretch is simple in functionality, it solves the long-standing issue of width: 100% causing overflow due to padding, providing a more intuitive and reliable option for layout control.

Fun Projects & Tools

ElevenLabs UI

elevenlabs/ui: A component library based on shadcn/ui, designed to help you build audio and agent applications faster. The project is open-sourced under the MIT license with particularly rich audio components.

Source: Guangzheng Li on X: “elevenlabs just open-sourced frontend components compatible with shadcn ui, with lots of audio input/output related components. Looking at them, they’re all quite high quality — not just styling, but some have fully production-ready interaction logic. Don’t miss this if you need audio components”

Coinbase CDS

Coinbase open-sources CDS (Coinbase Design System): The Coinbase team open-sources their cross-platform component library design system for React and React Native (Apache 2), featuring some components with complex effects, such as RollingNumber.

Accented Accessibility Testing Tool

Accented: A frontend library based on axe-core for continuous accessibility testing with visual issue highlighting. Add a few lines of code to your web app and you’ll see interactive indicators appear next to elements with accessibility issues.

Introducing | Playground

Harmonizer: Color Palette Generator Based on OKLCH and APCA Contrast Formula

evilmartians/harmonizer is a tool based on the OKLCH color model and APCA contrast formula for generating consistent and accessible UI color palettes.

Available as a Figma plugin or web interface, it uses OKLCH and APCA to generate color schemes with consistent luminance and contrast. The tool automatically generates color systems that maintain visual consistency across light and dark modes by defining luminance levels, hue, and background context. Supports export in multiple development formats (Tailwind, CSS variables, JSON).

lirantal/npm-security-best-practices: A security best practices checklist for npm package manager, helping developers prevent supply chain attacks and strengthen dependency security.

CodePen Picks

Spooky Spectral Ghost: A creepy ghost made with WebGL and Three.js, with a control panel for customizing various parameters, created by Filip Zrnzevic.

digraph sink: Sophia Wood’s Mathtober series based on P5.js, blending algorithms with artistic expression to showcase generative graphics aesthetics.

resizable slide panels: A resizable slide component by Jhey Tompkins, demonstrating the flexibility of responsive interactive design.

Tubes Cursor: A dynamic cursor effect by Kevin Levron using Three.js, inspired by flowing glass textures.

Thinking in Squircles: Dave Rupert explores the new CSS property corner-shape and the “squircle” (rounded-corner hybrid) drawing logic it enables, proposing that “CSS squircles are more like stretched circles than squished squares,” extending to Chris Smith’s work.

Elastic neon radio buttons with GSAP and SVG: Elastic neon radio buttons using GSAP and SVG.

Anchor Positioned Popover with Contrast Slider: Simon Goellner combines the new Popover API, anchor positioning, light/dark color themes, and his own range slider markup library with a fluid design inspired by Praha37v to create this fully modern range slider.

Ecosystem Updates

React 19.2 – React: React 19.2 released, bringing stronger performance, server-side rendering improvements, and developer experience optimizations.
- Key updates include the new <Activity /> component, useEffectEvent hook, cacheSignal, Performance Tracks, Partial Pre-rendering, batched SSR Suspense boundary fixes, and Web Streams support in Node.js for streaming SSR.
What’s coming in ESLint v10.0.0 - ESLint - Pluggable JavaScript Linter: The ESLint team announces the final feature plan for v10.0.0, focusing on a complete configuration system migration to Flat Config, Node.js support updates, AST improvements, and legacy API cleanup.
ESLint v9.37.0 released: This ESLint v9.37.0 minor release notably enhances TypeScript rule support (such as adding allowTypeImports to no-restricted-imports), optimizes --concurrency=auto heuristics in caching and multi-threading scenarios to improve lint performance, and improves preserve-caught-error recognition of computed property syntax.