HomeWeeklyFriendsAboutMusic

FE Bits Vol.14｜Chrome Supports Split Views, npm Enforces 2FA, Rspack 1.6

发表于 2025-11-09 20:40 1006 字 6 min read

cos avatar

cos

FE / ACG / 手工 / 深色模式强迫症 / INFP / 兴趣广泛养两只猫的老宅女 / remote

201 Articles

21 Categories

136 Tags
Home Weekly
Categories Tags Archives
Friends About Music
FE Bits Vol.26 | Gatsby Supports React 19, Rspress 2.0 ReleasedFE Bits Vol.25 | Yarn 6 to Be Rewritten in Rust, CSS Grid Lanes ProgressFE Bits Vol.24 | Rolldown 1.0 RC, Anime.js v4.3 Auto Layout, and Chrome 145 100vw Scrollbar AwarenessFE Bits Vol.23 | jQuery 4 Released, Chrome Adds Vertical Tabs, Astro Acquired by CloudflareFE Bits Vol.22 | CSS @scope Now Widely Available, ViteLand December RecapFE Bits Vol.21 | Blog Christmas Effects and Moe Copy Update, AntV Launches InfographicFE Bits Vol.20 | Blog Updates and FEDAY Highlights, Shadcn Create ReleasedFE Bits Vol.19｜New Site Features and React Discloses Two New RSC VulnerabilitiesFE Bits Vol.17｜WebGPU Now Supported by All Major Browsers, Ant Design 6 Officially ReleasedFE Bits Vol.16｜Cloudflare Incident Report Released, CSSWG Confirms Masonry Layout Syntax grid-lanesFE Bits Vol.15｜Chrome Width/Height Animation Reflow Optimization, Node Type Stripping Goes StableFE Bits Vol.14｜Chrome Supports Split Views, npm Enforces 2FA, Rspack 1.6FE Bits Vol.13｜TypeScript Becomes GitHub's Most-Used Language for the First Time, VoidZero Raises $12.5M Series AFE Bits Vol.12｜Next.js 16 Released, Docusaurus 3.9 AI Search, ChatGPT Atlas LaunchedFE Bits Vol.11｜React Native 0.82 New Architecture Lands, Bun 1.3 Full-Stack RuntimeFE Bits Vol.10｜React Compiler v1.0 Released, React Foundation Established, Vite Documentary and Vite+ LaunchFE Bits Vol.9｜Chrome DevTools Launches MCP, Nuxt UI Pro Goes Open Source and FreeFE Bits Vol.8｜PyCon Trip, Cloudflare's Big Bug, and NPM Sandworm AlertFE Bits Vol.7｜Security Alerts for chalk, debug and Other npm Packages; Remotion Sponsors MediabunnyFE Bits Vol.6｜What Changes and What Stays, Chrome's 17th Anniversary and CSS Mixins DraftFE Bits Vol.5｜Nx Package Compromised, ESLint Multi-threaded Linting, and Firefox Experimental PWAFE Bits Vol.4｜Next 15.5, RN 0.81, and Some Handy ToolsFE Bits Vol.3｜CSS attr() Typed Evolution, PostCSS Retrospective After 12 YearsFE Bits Vol.2｜V8 Speeds Up JSON.stringify 2x, Vite Weekly Downloads Surpass Webpack for the First TimeFE Bits Vol.1｜Hello World, TanStack DB First Beta Release
This issue focuses on Chrome's split view experiment, Rspack 1.6 performance and output optimizations, npm token security tightening, curated animation and typography practices (text-wrap, pure CSS staggering, View Transitions), deep-dive articles (JS Source Maps, sticky/clipboard), plus tool updates including Storybook 10, htmx 4.0, React Email 5, and CodePen inspiration.

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, 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 is also open-sourced at fe-bits-weekly. Feel free to follow along.

Today is November 9, 2025, Sunday.

Today I went to the South China Botanical Garden for a visit. Made a big mistake — forgot to bring mosquito repellent and got absolutely eaten alive by mosquitoes.

Ecosystem & Community Updates

  • Chrome supports split views (behind a flag): Chrome finally supports side-by-side split screen! Enable the experimental feature chrome://flags#side-by-side to try it out.

  • Announcing Rspack 1.6: Rspack 1.6 brings major improvements in tree-shaking, ESM output optimization, lazy loading, JSX preservation, Source Map handling, and more.

  • npm security update: classic token creation disabled and granular token changes: Starting November 5, 2025, npm will officially disable the creation of new classic tokens and strengthen granular token security policies, including mandatory two-factor authentication (2FA) and limiting token validity to 90 days. Existing classic tokens will become completely invalid on November 19, and existing tokens originally set to expire after February 3, 2026 have been adjusted to expire on that date.

Articles & Videos

  • OpenSpec usage experience: A great summary of AI-assisted development practices, recommending OpenSpec which seems quite nice — “spec-driven team collaboration.”

  • Stacking workflow: This article introduces a development workflow called “Stacking,” which splits large changes into multiple interdependent, small and independent PRs, enabling parallel development and review. I actually came across this from a previous article I read and thought it was useful, so I’m bookmarking it.

  • Web Animation Performance Tier List - Motion Blog: The author uses a tier list to explain which web animation approaches are smoothest and which are most performance-heavy, starting from the fundamentals of the browser rendering pipeline and offering practical experience.

  • Why TypeScript won’t save you: This article reminds us that TypeScript makes you feel safe, but that doesn’t mean your code actually is safe.

  • The Clipboard API: How did we get here?: The author set out to simply implement “copy to clipboard” but fell into the deep pit of browser compatibility, complaining and reflecting all the way to the root causes of Web platform complexity.

    For developers, it’s not just about solving problems — it’s about understanding the realities and compromises behind complex systems.

  • The “most hated” CSS feature: tan(): The author takes a lighthearted approach to discuss the misunderstood CSS trigonometric function tan(), showing that it’s actually super useful.

  • The Weird Parts of position: sticky: A deep analysis of why position: sticky “fails” in real-world development, helping you understand those maddening common failure cases.

  • pathLength makes SVG path animations easier to manage: Use the pathLength attribute to easily handle SVG path animations without worrying about calculating path lengths.

  • JavaScript Source Maps internals: An excellent, hardcore interactive article that takes you deep into the structure and encoding secrets behind Source Maps, making debugging minified JS no longer a black box.

  • Getting creative with small screens: Demonstrates how to use CSS tools like @container queries, CSS Grid, Scroll Snap, and shape-outside to create rhythmic, layered small-screen layouts. The core idea is that responsive design shouldn’t mean “folding” — design should “adapt” with the device and orientation, keeping the visual narrative alive at any size.

CSS New Features

  • When to use CSS text-wrap: balance vs text-wrap: pretty: Introduces the two popular uses of text-wrap now that browser support has matured — balance and pretty — and when each should be used.

    balance adjusts line lengths to balance visual proportions, improving typographic symmetry. Short text (headings, card content) is well-suited for balance. pretty avoids orphans and balances the last line of paragraphs. Paragraph text can benefit from pretty to optimize the reading experience.

  • Staggered Animation with CSS sibling Functions: Introduces two new CSS functions — sibling-index() and sibling-count() — which let us calculate an element’s relative position among its siblings directly in pure CSS, enabling “Staggered Animation” without JavaScript.

  • Some practical examples of View Transitions to elevate your UI: Uses several practical examples to demonstrate how the View Transition API can make web interaction animations smoother.

Tool Recommendations & Library Updates

  • sindresorhus/image-dimensions: A lightweight tool that quickly gets the pixel width and height of JPEG, PNG/APNG, GIF, WebP, AVIF, and HEIF image formats in any modern JavaScript environment.
  • Storybook 10: Fully transitions to ESM-only modules, with Vitest 4 support.
  • htmx 4.0 Alpha: An architectural evolution jumping directly from v2 to v4.
  • React Email 5.0: The new version brings dark mode switching and Tailwind 4 support.
  • Other updates: Including Turborepo 2.6, Video.js 10, ESLint Config Inspector v1.4.

Codepen Picks

CSS Scoped Custom Properties Grid of Trails

In this configurable Pen by Jhey Tompkins, hover over the plus grid to watch them change colors and rotate. You can also adjust grid size and theme color from the control panel at the top.

Cards path marquee CSS only

In this modern marquee animation by DenDionigi, cards fade in, loop in a roller-coaster pattern, then fade out.

Chrome: CSS Scroll using @function

pimskie shows us an “awesome” scrolling text effect. Scroll down and you’ll see text gradually merging from both sides. Check the CSS panel to see the custom @function that makes it happen.

Refs

喜欢的话，留下你的评论吧～

© 2020 - 2026 cos @cosine
Powered by theme astro-koharu · Inspired by Shoka