FE Bits Vol.9｜Chrome DevTools Launches MCP, Nuxt UI Pro Goes Open Source and Free | Weekly

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 September 28, 2025, Sunday. National Day holiday is almost here. The newsletter will skip one issue next week for the holiday!

I’ve decided to build a dedicated website for the newsletter after all. I’ll try to get it done during the National Day break~

Ecosystem & Community Updates

Chrome DevTools (MCP) for your AI agent: Chrome launches an MCP service, bringing DevTools capabilities to AI coding assistants for real-time debugging and performance analysis. GitHub
Nuxt UI Pro is now open source and free. Nuxt UI v4: Nuxt UI v4 is officially released, unifying Nuxt UI and Nuxt UI Pro, offering 110+ components, 12 templates, and a complete Figma Kit. Open source repository
Announcing Cloudflare Email Service’s private beta: Cloudflare launches the Email Service private beta, providing integrated email sending and routing capabilities to simplify email handling in developer applications.

Cloudflare has introduced worker-based email sending capabilities, which truly provides a one-stop solution for custom domain email sending and receiving. Anyone can quickly and easily set up their own domain email (especially indie developers). Plus you can import external libraries to make email styling more polished — who needs resend anymore? Source

Our plan for a more secure npm supply chain: GitHub publishes a roadmap for strengthening npm supply chain security, focusing on identity authentication, publishing mechanisms, and community collaboration to respond to recent attacks. This includes mandatory two-factor authentication (2FA) for local publishing, fine-grained tokens with a seven-day limited lifespan, and Trusted publishing.
[Webflow Donates $150,000 to Support Astro's Open Source Mission](https://astro.build/blog/webflow-official-partner/): Webflow becomes Astro's newest official sponsor, donating$ 150,000 and announcing the adoption of Astro to power its AI application generation capabilities.

Articles & Videos

Your Images Are (Probably) Oversized: An in-depth article exploring image loading and optimization in web frontend, focusing on the common “oversized images” problem and providing best practices for srcset and sizes.
You may be looking for a useSyncExternalStore: When you write subscription logic with useEffect + useState, you might actually want useSyncExternalStore to avoid client-side rendering jank.
Stop using .reverse().find(): meet findLast(): Introduces ES2023’s new findLast() and findLastIndex() methods, replacing the cumbersome .reverse().find() pattern for more efficient reverse array searching.
Animating Elements through framer motion with React.js: An article introducing how to implement rich animation effects in React with Framer Motion, from basic to advanced examples.
The Web’s Most Tolerated Feature - Bocoup: An article reviewing the 25-year journey of the CSS zoom property from an IE-exclusive feature to finally entering the standard specification.
We Keep Reinventing CSS, but Styling Was Never the Problem: The article explores the phenomenon of constantly “reinventing” CSS in frontend development and points out that the root problem isn’t CSS itself, but the misalignment between modern frontend architecture and CSS.
Subgrid: how to line up elements to your heart’s content: Introduces the Subgrid feature in CSS Grid and how to maintain element alignment in real-world scenarios.
CSS offset and animation-composition for Rotating Menus: Explains how to use CSS offset and animation-composition to layout menu items on a circular path for efficiently implementing rotating menu animations.

CSS New Features

The Big Gotcha With @starting-style: A deep dive into the strengths and pitfalls of the CSS new feature @starting-style, and how to deal with its unique specificity issues.
Integrating CSS Cascade Layers To An Existing Project: This article demonstrates in detail how to integrate CSS Cascade Layers into an existing messy CSS project through a real Discord Bot website case study.
CSS Typed Arithmetic: The article introduces the concept and rules of CSS Typed Arithmetic, emphasizing that the core breakthrough is allowing division of values with units to produce a reusable unitless number. This enables calculations and conversions between different CSS data types, making it possible to achieve dynamic layouts and interactions that previously required JavaScript or hacky workarounds. With Typed Arithmetic, you can implement things like font size affecting opacity, element width controlling color, or animation paths.

Fun Projects & Tools

NickvanDyke/eslint-plugin-react-you-might-not-need-an-effect: An ESLint plugin for detecting unnecessary useEffect in React, making code cleaner, faster, and safer.
IINA, the open-source macOS player, recently added a JavaScript plugin system, expanding its functionality. (This is the player I’ve been using all along.)
abinthomasonline/repo2txt: A browser-based tool that converts a GitHub repository or local directory into a formatted text file, convenient for use as LLM prompt input.

Logoipsum: 100 free SVG placeholder logos. A clever way to temporarily add realistic-looking logos in designs. Lets you choose from 10 different categories and interactively preview selected logos in the site’s navigation bar.

FlyCut Caption: A video subtitle generation and editing tool based on the Whisper model and Transformers.js, supporting the full pipeline of intelligent subtitle recognition, editing, preview, and export. Demo
Colf: A novel online programming challenge platform combining leetcode, code golf, and AI prompting — compete to complete programming tasks with the fewest tokens.
The Coyier CSS Starter: Chris Coyier’s personalized CSS Starter, emphasizing practicality, readability, and ease of use — not a traditional CSS Reset.

Ecosystem Updates

TanStack Start v1 Release Candidate | TanStack Blog: TanStack Start releases its v1 Release Candidate, entering the final stage before stabilization.
Middleware in React Router: React Router 7.9.0 stabilizes middleware support, bringing developers more flexible request handling and data sharing capabilities.
Wasm 3.0 Completed - WebAssembly: Wasm 3.0 is officially released, bringing major updates including 64-bit addressing, multiple memories, GC, type system enhancements, exception handling, and more — moving toward a more powerful cross-language low-level platform.

Refs

JavaScript Weekly Issue 754: September 26, 2025: This issue focuses on AI code review, CLI tools, frontend framework updates, and multiple new version releases.
React Status Issue 445: September 24, 2025: Latest developments in the React ecosystem — weekly curated news, framework releases, tool updates, and community news.
Frontend Focus Issue 710: September 24, 2025: Frontend weekly roundup of CSS, WebAssembly, AI tools, and other latest developments and resource sharing.
Awesome JavaScript Weekly - Issue 488, Sep 25, 2025: This issue covers JavaScript-related new tools, libraries, database updates, and development resource recommendations.
683: iOS 26 Safari, Material Support on the Web, and Fixing The Button Problem: Discusses Safari iOS 26 new features, CSS aesthetics, TypeScript use cases, and tech stack restructuring considerations.
科技爱好者周刊（第 367 期）：Nano Banana 的几个妙用: Application cases of Google’s latest image model Nano Banana and a collection of tech hot topics.