FE Bits Vol.17｜WebGPU Now Supported by All Major Browsers, Ant Design 6 Officially Released

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 issue’s URL: https://blog.cosine.ren/post/weekly-17 This newsletter aims to be updated every Sunday. Currently, I recommend subscribing to this newsletter’s Quaily RSS via Folo. WeChat public account: FE Bits (前端周周谈 FE Bits). Click the “read original” link to view the original article. QQ discussion group 598022684 for casual frontend tech & life discussions. Feel free to submit your articles there too — it’s more of a fan group in nature. This newsletter’s article content is also open-sourced at fe-bits-weekly. Feel free to follow along.

Today is November 30, 2025, Sunday.

I’ve polished the blog’s UI a bit — added styles for code blocks, lists, and headings. I also gave the blog theme a proper name.

The theme is now called astro-koharu, and the blog’s official address has moved to blog.cosine.ren. I’m happy about that.

“Koharu-biyori” (small spring weather) refers to a stretch of warm, spring-like sunny days from late autumn to early winter. It’s what’s called “Indian Summer” in English. Inspired by Hexo’s Shoka theme, but no longer aiming for a 1
replica. Instead, it retains its strengths while using a lighter tech stack to create a personal blog theme that’s truly my own.

Next up, I plan to build my own comment system. I don’t feel motivated to use Remark42. I want to build one inspired by Valine and then migrate the old comments over.

Ecosystem & Community Updates

WebGPU is now supported in major browsers: WebGPU is now fully supported across all major browsers! However, Safari only supports it from iOS 26, and Safari mobile’s allocated GPU memory is… a bit stingy.
Edge finally supports site-level extension toggles: New “Allow extension on this site” feature | One-click disable all extensions for any site: Edge shipped a handy little feature that lets you disable all extensions for a single website with one click. (This is one of those features where if you don’t build it yourself, a browser will do it for you. I’ve been wanting to add this to my little extension but kept procrastinating. Can Chrome follow suit?)
npm hit by another “Shai Hulud” supply chain attack, exploiting post-install scripts to steal tokens.
TanStack recently released TanStack Pacer, a framework-agnostic performance optimization toolkit providing core primitives for debouncing, throttling, rate limiting, queue management, and batch processing, applicable to any JavaScript framework. It provides a dedicated React adapter (@tanstack/react-pacer) that offers a set of easy-to-use hooks on top of the core Pacer tools, such as useDebouncedValue, useThrottledCallback, useQueuedState, and useBatcher.

Ant Design Component Library Releases v6

Ant Design 6.0 is here!

Giving this its own heading as a sign of respect.

React version bump: Minimum React 18, recommended React 19.
React Compiler enabled: Performance optimization in build output; developers can choose whether to enable it.
Pure CSS Variables style architecture: No longer compatible with IE. Zero-runtime styling mode with real-time multi-theme switching support.
Semantic component structure: All component DOM structures optimized, supporting functional class name configuration (classNames) and inline styles (styles), improving customization and maintainability.
Removed deprecated APIs: Completely removed v4 legacy logic, unified API naming, while maintaining v5 usage compatibility.

New Components & Feature Enhancements

Masonry component: Optimized image display and card layout experience.
Tooltip sliding transitions: Multi-content tooltips with slide-over transitions.
InputNumber spinner mode: More intuitive interactive increment/decrement button layout.
Drawer drag support: Users can resize drawers.
Blur mask backgrounds: All popover layers use blur effects by default, can be disabled as needed.
IE no longer supported; deprecated API replacement recommended.

One More Thing — Ant Design X 2.0

The AI-focused component library has been upgraded simultaneously, offering smarter interaction capabilities.
The new version strengthens rendering performance and flexibility, making it a key tool for exploring AI-driven interfaces.
For more details, see Ant Design X 2.0 Officially Released.

Better Auth v1.4

Better Auth 1.4 released, introducing database-free Stateless Auth, SCIM Provisioning, OAuth custom state, database joins optimization, JWT key rotation, API Key secondary storage, CLI index support, SSO domain verification, and many more features. Additionally, UUID primary key support, enhanced email change flow, new error pages, better plugin architecture, and various security improvements were released.

Articles & Videos

From “writing code” to “verifying code”: 3 years with AI partners, the collaboration roadmap I’ve carved out: Saw a great article on X, written for backend/full-stack engineers and tech managers who are already using or preparing to use AI Coding in real production projects. It won’t teach you “where the buttons are” or “which prompt is magical.” Instead, in about 15 minutes, it helps you figure out three things:
- Which tasks are most “cost-effective” to hand off to AI;
- How to make your project more “AI-friendly” to improve first-attempt hit rates;
- When generation is no longer the bottleneck, how should engineers design verification workflows to spend time where it truly matters.
On living well without self-discipline - Sspai: A very gentle article proposing “self-consistency rather than self-discipline.” Living well isn’t about forcing yourself — it’s about understanding and self-consistency. Selected as one of my favorite articles of the year. Worth pausing to read slowly.
The Performance Inequality Gap, 2026: The author continues the multi-year series, analyzing mobile and desktop device performance, network conditions, and web payload trends for 2026. The core point: hardware and network improvements on mobile, especially low-end Android devices, can’t keep up with the rate of web page bloat.
Why use React?: A questioning think piece exploring why developers choose React, and what that choice means for frontend user experience. The author advocates keeping frameworks on the server and fully leveraging the browser’s native capabilities.
Migrating 6000 React tests using AI Agents and ASTs: A hands-on account of using AI Agents and ASTs to automatically migrate 6,000 React tests — a great article. The author’s company had 970 test files totaling 6,000+ test cases using an old version of React Testing Library. Upgrading to v14 made the API fully async with major behavioral changes, making manual migration prohibitively expensive. So the author decided to try AI-assisted large-scale migration. What’s impressive is the migration process — over the final week, 50 migration runs were executed, producing 50 independent PRs, each taking about half an hour. The author envisions AI further freeing developers from “repetitive labor” toward more creative work.
Taking down Next.js servers for $0.0001: Harmony Intelligence’s team discovered an unauthenticated denial-of-service (DoS) vulnerability that could crash self-hosted Next.js servers with a single HTTP request and minimal resources. A reverse proxy limiting request size can prevent this attack; rate limiting alone is insufficient. Affected scope: All self-hosted Next.js servers with middleware (Vercel-hosted ones are not affected). Affected versions: <= 15.5.4. Mitigation: Upgrade / configure a reverse proxy like nginx to limit request body size.
Managing DNS records with code and Git — DNSControl and GitHub Actions CI/CD in practice
On PicGo’s approaching 8th anniversary: Another article with a lot of heart.

CSS New Features

Smooth expand/collapse animations with CSS ::details-content pseudo-element: Discusses the ::details-content pseudo-element that’s been added to the <details> element in recent years, enabling smooth expand/collapse animations. Also explains the content anchor (hash) auto-expand mechanism and a scroll-margin-block-start tip.
light-dark() isn’t always the same as prefers-color-scheme: The author discovered that the new CSS function light-dark() is not a replacement for prefers-color-scheme — they have subtle but important differences in implementation logic. prefers-color-scheme leans toward global system preferences, while light-dark() is better suited for component-level theme control.
How to Add and Remove Items From a Native CSS Carousel (… with CSS): This article introduces how to use new features from the CSS Overflow Module Level 5 (like ::scroll-button() and ::scroll-marker) to create a fully JavaScript-free native CSS carousel component. By combining HTML checkboxes for display control with CSS pseudo-elements for scroll behavior and visual feedback, the author implements a complete component that supports dynamically adding/removing carousel items, auto-scrolling, and scroll anchor positioning — showcasing the future potential of CSS in interaction and state management.

Tools

Color Palette Pro: An online color tool that lets you freely modulate colors like a music synthesizer. It supports multiple color spaces and style switching, real-time generation of color scales, color wheels, shadow and highlight harmonies — perfect for designers doing systematic color exploration or visual consistency work.
JavaScript Algorithms and Data Structures: A JavaScript example repository covering classic algorithms and data structures. Each algorithm and data structure has its own README with relevant explanations and links for further reading.
williamtroup/Heat.js: Heat.js is a zero-dependency, TypeScript-based lightweight frontend visualization library that generates customizable heatmaps, charts, and statistics. Developers can quickly create custom heatmaps via DOM attributes (data-heat-js) or the API.

Codepen Picks

Concentric Border Radii

See the Pen YPKBrJX by botteu (@botteu) on CodePen.

“Check it out! The inner container’s border radius depends on the outer container’s border radius and the padding between the two.” In this interactive Pen by botteu, you can slide the sliders to try different radii, padding, and colors.