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 is expected to be updated every Sunday. The website is under construction…
Currently, it is recommended to subscribe to this newsletter’s Quaily RSS via Folo.
WeChat Official Account: FE Bits (前端周周谈), click the original link to view the source.
QQ discussion group 598022684, for daily frontend tech & life discussions, feel free to submit your own articles, casual group with a fan community vibe~
This newsletter is also open-sourced at fe-bits-weekly, feel free to follow.
Today is October 26, 2025, Sunday.
This week I finally had some free time and got addicted to Brotato (a Vampire Survivors-like game) for a while. I’ve played similar games like Immortal Scroll before, but never tried Brotato until now.
Next week I’ll be heading to Chengdu for a week, taking Friday off to visit Jiuzhaigou Valley. Looking forward to it!
Ecosystem & Community Updates
-
Next.js 16 Released: The official release of Next.js 16. This update makes Turbopack the default bundler, stabilizes React Compiler support, and introduces new Cache Components, Next.js Devtools MCP, and a unified proxy file
proxy.tsreplacingmiddleware.ts. -
Introducing ChatGPT Atlas: OpenAI launches ChatGPT Atlas, a next-generation browser embedded within ChatGPT that deeply integrates AI into web browsing scenarios, enabling AI to understand web content, retain browsing memory, and automatically execute tasks. Users can directly chat with ChatGPT while browsing, analyze web pages, or complete actions without switching apps.
-
Cloudflare Sandbox SDK: A secure, scalable cloud sandbox environment from Cloudflare that executes commands, runs services, manipulates files, and generates publicly accessible URLs in isolated containers. (Available for Workers paid plans, introduction article)
-
Meta Releases Docusaurus 3.9 with New AI Search Feature: Docusaurus 3.9 is released, introducing Algolia DocSearch v4’s AI search and improved internationalization configuration.
Articles & Videos
-
Rethinking Async Loops in JavaScript: Analyzes common performance and semantic pitfalls when using
awaitin loop statements in JavaScript, explaining the use cases and trade-offs offor...of,map(),Promise.all(),Promise.allSettled(), and third-party tools (likep-limit) for different async concurrency needs. -
React Server Components: Do They Actually Improve Performance?: A data-driven empirical study comparing the performance pros and cons of CSR, SSR, and RSC along with their implementation differences.
Results show that CSR has the slowest initial load but fastest interactivity; SSR can improve LCP but has a “non-interactive” gap; RSC combined with Streaming and Suspense can achieve the best balance, but actual migration is complex and architecturally demanding. Simply introducing RSC doesn’t automatically bring performance improvements — the benefits mainly come from rewriting async data flow and rendering strategies.
If the application is a mix of client and server components, server components alone don’t improve performance. They can’t reduce enough size to produce a measurable performance impact. Streaming and Suspense are the key. The main performance advantage comes from completely rewriting data fetching to be server-component-first.
-
Inside the Breach That Broke the Internet: The Untold Story of Log4Shell: Tells the story of how Log4j maintainers and the open-source community responded to the Log4Shell vulnerability that shook the entire internet, and how it drove the reshaping of open-source security systems. (Quite interesting)
-
How to Fix Any Bug: Dan Abramov uses a real debugging case to illustrate systematic debugging thinking. Starting from finding a reproducible case (repro), gradually narrowing down the scope until the root cause is found. A rare article that teaches you how to debug and solve problems.
-
25 CSS Features in 25 Minutes: Adam Argyle introduces 25 new features including scroll-driven animations, numeric functions, custom scrollbar styles, and provides presentation slides.
-
URLPattern Is Now Baseline Available: Introduces the URLPattern API that has entered Baseline, providing a standard, concise, and high-performance native solution for URL matching and routing. See MDN Web Docs for complete information.
-
Web Development for Beginners: CSS Layout — Flexbox, Grid, Media Queries, and Container Queries: A beginner-friendly CSS layout guide systematically covering the core concepts and practices of flexbox, grid, media queries, and container queries.
-
Smarter Fluid Typography with CSS if() and clamp(): Introduces how to combine CSS
if()andclamp()functions to achieve smarter responsive typography.clamp()simplifies control over minimum, ideal, and maximum values, while the introduction ofif()gives styles conditional judgment capabilities, dynamically adjusting scaling ratios based on text type (such as headings or body text), resulting in more flexible, reusable, and progressively enhanced font responsive solutions.
CSS New Features
-
Introduction to CSS reading-flow and reading-order Properties: An in-depth explanation of the new CSS features
reading-flowandreading-order, which solve the difficulty of controlling focus order with traditionaltabindexin complex layouts. -
Dynamic Tooltip Position with Anchor Positioning III: Using pure CSS anchor positioning to achieve adaptive tooltip position adjustment, the third article in the series, this time considering corner positions.
-
closedBy=any: Introduces the usage of the
closedBy="any"attribute on the HTML<dialog>element, allowing dialogs to be easily closed by clicking outside. This feature is already implemented in Chrome and Firefox, and Safari is expected to support it as well.
Fun Projects & Tools
- ColorMate: Yet another free online color palette tool for designers and developers that quickly generates accessible color palettes. Users can extract colors from images, instantly preview UI effects, run contrast tests, and export results in HEX, CSS, or PNG formats. It also offers AI naming, color locking, real-time palette generation, and a collection of popular color scheme examples.
CodePen Picks
- Pure CSS Progress Ring + Map Curvature (Concave Rounded Corners)
Ana Tudor responded to a Reddit request with this exquisite concave rounded corner effect, using shape() and mask fallbacks.
- threejs/gsap Liquid Morphing Slideshow
Filip Zrnzevic combined GSAP and WebGL to create gorgeous liquid slideshow transition effects. Click preview and press the “H” key to open the control panel and try all the different effects.
喜欢的话，留下你的评论吧～