FE Bits Vol.6｜What Changes and What Stays, Chrome's 17th Anniversary and CSS Mixins Draft | 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 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 September 7, 2025, Sunday.

On What Changes and What Stays in Frontend

This subtitle sounds intimidating, but it actually applies to any industry.

A while ago, I saw someone discussing “how to systematically learn frontend,” mentioning that many frontend architectural concepts haven’t changed for years, and that we should focus more on overall architecture design and controlling code complexity.

I strongly agree with this view, but I’d like to add a few points. Frontend is actually a very broad field — when you break it down, there’s consumer-facing (toC) frontend, enterprise (toB) frontend, infrastructure frontend, WebGL frontend, and so on. To learn systematically, you first need to clarify your direction: are you focusing on user experience, diving deep into business logic, or investing in toolchain development? The content you need to master in different directions is completely different.

Furthermore, frontend is not static. Users aren’t just enterprise system users — there are many types focused on creative expression and visual presentation. Game frontend is frontend, future VR/XR pages are also frontend, browser extensions/mini-programs are frontend, Node development counts as frontend too — and if we generalize a bit more, cross-platform development is arguably an extension of frontend as well.

From the perspective of a consumer-facing frontend developer, frontend animations, CSS, Three.js, interaction design, performance optimization, SEO… each area has an entire knowledge system behind it, and you’ll never finish learning if you dig deep enough. As for technology choices, they usually need to follow business requirements — there’s no one-size-fits-all “best practice.”

On the other hand, frontend technology itself is also constantly “changing.” Take CSS for example — over the years it has been working hard to eliminate the need for preprocessors and become more user-friendly: native nesting syntax, @if functions, anchor positioning, container queries, shape() functions… many things we used to rely on preprocessors or hacks to implement are now gradually becoming standardized. Browser compatibility is also steadily improving, even Safari is working hard to keep up — for example, WebGPU is finally getting support in iOS 26 (although I complain about Safari a lot, seeing more features supported and progressive enhancement becoming more feasible is genuinely good news).

Although frontend still has many terrible legacy issues, we should also see that it’s getting better. If you’re interested in this topic, I recommend a great article I read before: HTML is Dead, Long Live HTML, very insightful.

So in my view, frontend’s “change” is more reflected in the rapid iteration of external technology forms — CSS standards keep updating, build tools keep innovating, framework ecosystems rise and fall. Webpack is popular today, tomorrow it might be Vite; you just understood Vue 2, and Vue 3’s Composition API has already become mainstream. This kind of change is surface-level and tool-oriented, and it’s exactly what’s most visible and most criticized about frontend.

What “stays the same” are the underlying problems and core design principles: how to manage state, how to decompose components, how to optimize rendering efficiency, how to implement maintainable code structures, how to ensure consistency in user experience. These propositions have never disappeared from the early jQuery era to today’s React and Solid.js — they just resurface in different syntax and architectures under different technical paradigms, in any language.

I believe that the evolution of frontend is essentially an “evolution of expression,” not a “replacement of problems.”

Therefore, learning frontend well isn’t about blindly chasing every new tool or framework, but about identifying those enduringly constant principles amid change — understanding them is the only way to truly build your own transferable technical capabilities.

Lastly, I want to say that frontend is far more than a competition of “proficiency.” It has both the surface of interfaces and the depth of engineering; it needs to handle the details of interactions while maintaining architectural stability. Writing an animation can be as simple as setInterval, or as deep as rendering principles, performance layers, and visual algorithms. Choosing “how to do it” is itself a process of technical judgment and architectural thinking.

In any craft, repetition and accumulation are the foundation. But if you think frontend merely stays at “slicing pages, tweaking styles, writing interactions,” you’re really underestimating this field.

The so-called “lack of technical depth” is perhaps just because you haven’t yet faced truly complex problems.

Writing this far, I realize it actually applies to any direction, haha.

Sometimes I also think that the real charm of frontend might be precisely that it’s so close to “expression.”

After seeing many of those small and beautiful overseas websites, I’m genuinely a bit envious — an album, an artist, a public interest initiative, a corner hotel, even a local food product — someone is willing to craft a uniquely styled little website for each of them. They’re not necessarily complex, but full of personality, carrying the warmth and ingenuity of their creators.

This culture of “making a little website to showcase anything” reminds people of what the Web originally looked like — always being criticized, always being loved. Frontend isn’t just a tool for implementing requirements; it can also be a canvas for creative expression.

Perhaps this is exactly one thing that keeps frontend technology attractive: it always carries people’s pursuit of beauty, their expression of creativity, and their belief that every idea deserves to be well presented.

Ecosystem & Community Updates

Google Chrome celebrates its 17th anniversary, and Google kept Chrome in the antitrust case. Here’s an in-depth article reviewing Chrome browser’s 17-year journey, from launch to becoming the world’s most widely used browser.
ViteLand August 2025 Recap: Oxlint introduces type-aware features and custom JavaScript plugin support, aiming to become a complete native-speed linter. Vite introduces React Server Component support and updates @vitejs/plugin-react. Vitest v4 beta supports visual regression testing with optimized startup speed. Rolldown-Vite enables native plugins by default and continues to optimize bundler performance with features like inlineConst. Oxc also improves code minification and support for styled-components.
- tsup is no longer actively maintained. Fortunately, you can easily switch to tsdown with a simple command.
- Remember when GitLab used rolldown-vite to improve build speed by 2.6x? Now, with all native plugins enabled, their build time has been reduced by 7x, from Vite’s 2.5 minutes down to rolldown-vite’s 22 seconds. This is also 43x faster than their existing Webpack build.
GitHub Added Support for WebP Images: GitHub fully supports WebP image upload and preview. Users can now upload and preview .webp files directly in comments, Issues, Pull Requests, Gists, and repositories, which previously required downloading to view.
Using the Activity Component with Suspenseful Data: React 19’s experimental Activity component can control the hiding/showing of child components through the mode attribute. Its uniqueness lies in that when a component is hidden, it unmounts effects but preserves the component’s local state, and continues executing Suspense data requests at low priority. Compared to traditional parent filtering or full-query approaches, Activity can improve performance, user experience, and maintainability in complex scenarios.
[Arc and Dia Acquired by Atlassian for $610 Million](https://www.appinn.com/atlassian-acquires-arc-dia/): Atlassian announced the acquisition of The Browser Company, the company behind the Arc and Dia browsers, for$ 610 million.

Articles & Videos

On the Evolution of AI Programming Tools and Vibe Coding: Distinguishes between Vibe Coding and Context Coding, systematically reviews the Context Engineering paths and practical trade-offs of Copilot, Cursor, and Claude Code, and provides actionable methodologies and career insights.
What You Need to Know About CSS Color Interpolation | CSS-Tricks: An in-depth explanation of color interpolation in CSS and how to achieve smoother, more refined transitions across different color spaces.
CSS Alignment Fundamentals: This article explains CSS alignment very clearly. I always felt fuzzy about align-items and justify-content before — it’s really best to explain them together.
#92 Apple’s Changes Beyond Liquid Glass: The content is very interesting, which is why it’s included here. It analyzes the application and issues of Apple’s new visual language Liquid Glass, and discusses its design impact on iOS, iPadOS, and macOS.
Deriving Client State from Server State: Explores how to avoid redundant synchronization and more elegantly maintain consistency between Client State and Server State through “derived state.”
Don’t Inherit box-sizing: The author argues why you shouldn’t set box-sizing through inheritance, but should instead declare it uniformly and override when needed.
Why Do Browsers Throttle JavaScript Timers?: Explores why browsers throttle JavaScript timers, compares the performance differences of various timing approaches through experiments, and ultimately recommends using the Scheduler API.
Should You Preload Fonts for Performance?: Preloading fonts may improve performance but can also slow down first render (FCP/LCP). This article weighs the risks and benefits of preloading in different scenarios and offers practical advice: only preload critical fonts, self-host fonts, and carefully distinguish between text fonts and icon fonts.
Why Language Models Hallucinate: The OpenAI team explains why large language models generate “hallucinations” and how to reduce such errors through improved evaluation methods and training approaches.

CSS New Features

5 Practical CSS Functions Using the New @function Rule: This article introduces CSS’s newly launched @function rule, demonstrating how custom functions bring logical capabilities to stylesheets, making CSS more dynamic and maintainable while enhancing the expressiveness of design systems. The author illustrates the enormous potential of modern CSS in logic processing and componentization through five practical examples (value negation, opacity management, fluid typography, conditional border radius, responsive sidebar) plus a light-dark theme switching function, and looks ahead to future @mixin and @apply features.

CSS Functions and the Mixins Draft Spec is a very exciting specification. We just got the @function rule, but there’s more to come! I’m especially looking forward to the @mixin and @apply features, which let you write CSS code blocks that accept variable inputs and output dynamic styles. This will make it possible to create more complex styles than functions alone. For example, CSS functions can only output a single result value, while mixins can apply multiple styles simultaneously.

Mixins & Functions to Streamline CSS: Explores how to optimize development workflows using CSS Mixins and Functions, combined with the latest CSSWG meeting updates.
@function Custom Functions Enable Programming in CSS: Introduces the CSS new feature @function rule and its use cases, demonstrating its potential in programmable CSS.

Fun Projects & Tools

Rainbow Loop A stunning GSAP-driven SVG animation.

Fun site musicForProgramming();: A minimalist text-based music site providing a curated collection of ambient background music for programmers while coding, with an interesting design too.

90’s Cursor Effects: A nostalgic collection of cursor effects, optimized for modern browsers, simple and easy to use.

bahdotsh/wrkflw: WRKFLW is a powerful command-line tool for validating and running GitHub Actions workflows locally without a full GitHub environment. It helps developers test their workflows directly on their machines before pushing changes to GitHub.
useautumn/autumn: Autumn is an open-source billing middleware layer between Stripe and your application, supporting complex billing models like subscriptions, credit systems, and usage-based pricing. It simplifies payment flows, decouples billing logic from application code, and helps developers avoid tedious webhooks, upgrades/downgrades, cancellations, and payment failures. (I remember seeing this before, now seeing it again so noting it down.)
Awesome-Nano-Banana-images: A curated showcase library demonstrating Google Nano-banana’s results and prompts across various image generation and editing tasks.

Refs

Frontend Focus Issue 707: September 3, 2025: This issue focuses on Anchor Positioning, Chrome’s history, AI-assisted development, and creative CSS applications among other frontend highlights.
JavaScript Weekly Issue 751: September 5, 2025: This issue covers browser timer mechanisms, AI-assisted development, Chrome’s history, the Lean language, important framework and tool updates, and interesting community-shared projects.
Web Weekly #167: Covers the latest developments in the frontend world this week, including new CSS features, modern regular expressions, browser ecosystem and accessibility topics.
React Status Issue 442: September 3, 2025: React community updates, tool updates, and the latest frontend ecosystem news.

Figure Showcase

Finally, showing off new figures! “What Do I Do When My Miku Has Too Many Instant Noodle Lids”

The figure I received this time has a bit of glue overflow on the sleeves. But overall it’s fine, very cute!