FE Bits Vol.25 | Yarn 6 to Be Rewritten in Rust, CSS Grid Lanes Progress

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-25
This newsletter aims to update every Sunday.
Subscribe to the RSS feed.
WeChat Official Account: FE Bits (前端周周谈 FE Bits). Click the original link to view the full article.
QQ discussion group 598022684 / Discord server
The newsletter content is also open-sourced at fe-bits-weekly. Follow for updates.

Today is February 1, 2026, Sunday.

It’s already February — time flies.

Personal Updates

Random Thoughts

I watched “The Apothecary Diaries: Kaguya” — it moved me so much… It’s been a long time since I’ve seen something this touching…

Absolutely divine, and genuinely wonderful. I recommend everyone watch it. In my heart, it’s a masterpiece with flawless animation and camera work from every angle.

Sweet moments, more sweet moments, and even more sweet moments. The afterglow hits hard too. I was taking screenshots the entire time. I have zero complaints — I think the lively energy of the characters is just wonderful.

The last time I felt this strongly after watching something was the No Game No Life movie… but that was on another level…

This one has very clear strengths and weaknesses — under the absolutely incredible animation, the somewhat unremarkable story actually becomes a weakness. But I think the pros far outweigh the cons — very much worth watching!

This review captures it well:

This discussion is also well put:

Project Updates

Made the following updates to the blog:

Added dark mode to the Moe Copy AI plugin, still continuously optimizing.

Community Updates

• When will CSS Grid Lanes arrive? How long until we can use it?: Discusses the implementation progress of CSS Grid Lanes (native masonry layout) across browsers, and details how to use progressive enhancement to start using this feature today.

  • Safari already supports it in Technology Preview
  • Firefox was the earliest to implement an early draft in 2020 and is currently working on updating to the latest spec syntax and flow-tolerance property
  • Chrome & Edge joining in: The Chromium team reached consensus after syntax debates and is currently updating their implementation code, marking agreement across all three major engines.

• Yarn 6 preview released, transitioning to Rust for ultimate performance, with a stable release expected in Q3 2026.

• Try text scaling support in Chrome Canary: Introduces the new <meta name="text-scale"> tag in Chrome Canary, which allows web pages to respond to mobile OS global font size settings.

• React urgently released versions 19.2.4, 19.1.5, and 19.0.4 to fix an incompletely resolved denial of service (DoS) vulnerability in React Server Components (RSC): Denial of Service Vulnerabilities in React Server Components (exhausting, honestly)

• Vercel’s latest research shows that in their latest evaluations for Next.js 16 development, stuffing 8KB of documentation index into an AGENTS.md file works better because skills can’t be reliably triggered.

• SolidJS creator Ryan Carniato published JavaScript Frameworks - Heading into 2026, analyzing the current vibrant frontend development landscape.

Quality Articles

• Unstacking CSS Stacking Contexts — Smashing Magazine: Excellent article! Well-structured, providing a deep analysis of how CSS Stacking Contexts work, explaining why z-index fails, and offering practical debugging tips and solutions. I was turned onto the Better CSS Stacking Contexts VS Code plugin.

• There is No Need to Trap Focus on a Dialog Element: Explains why developers no longer need to manually implement complex Focus Trap logic when using the native <dialog> element.

• From pixels to characters: The engineering behind GitHub Copilot CLI’s animated ASCII banner: A deep dive into the complex engineering behind the 3-second ASCII animation for GitHub Copilot CLI, covering terminal rendering constraints, color consistency, and accessibility design.

  

10 Tips for Claude Code

Claude Code developer Boris Cherny shares advanced tips for using Anthropic’s Claude Code CLI tool, covering automation, debugging, learning modes, and multi-agent collaboration.

1. Automation & Skill Extension (Skills & Automation)

• Convert daily repetitive operations into custom skills and commit them to Git repos for cross-project reuse.
• Create a /techdebt command to run at the end of each session for discovering and eliminating duplicate code.

2. Efficient Debugging & CI/CD Integration (Debugging & CI/CD)

• Enable Slack MCP (Model Context Protocol) to paste bug discussions from Slack directly into Claude for fixing, reducing context switching.
• Authorize Claude to auto-fix failing CI tests, or analyze Docker logs to locate issues without micromanagement.

3. Prompt Engineering & Code Review (Prompting & Code Review)

• Have Claude act as a reviewer with prompts like “challenge my submitted code until it passes tests before creating a PR” to improve quality.
• Ask Claude to compare behavior differences between the main branch and feature branch to prove code effectiveness.

4. Environment Configuration & Tool Optimization (Environment & Setup)

• Recommend using Ghostty terminal for better synchronized rendering and 24-bit color support. (I use Warp and it works great too.)
• Use /statusline to customize the status bar, displaying real-time context usage and current Git branch.

5. Complex Tasks & Data Analysis (Subagents & Analytics)

• Add “use subagents” in your requests to have Claude invest more compute on complex problems while keeping the main agent’s context clean.

• Write skills that call CLI tools like BigQuery (bq) to perform real-time metrics analysis directly within Claude Code.

6. Deep Learning & Knowledge Internalization (Learning & Understanding)

• Enable “explanatory mode” (Explanatory/Learning output style) in /config to have Claude explain the reasons behind code changes. (I think this explanatory mode is really useful.)
• Use Claude to generate visual HTML presentations (slides) or ASCII diagrams to help understand unfamiliar codebases or protocols.
• Build spaced-repetition learning skills that fill knowledge gaps through Q&A format.

New Features

• How to Style the New ::search-text and Other Highlight Pseudo-Elements: Introduces Chrome 144’s new ::search-text pseudo-element and how to use CSS relative color syntax to uniformly style various text highlight styles.

• Say Goodbye to insertBefore, Use moveBefore to Move DOM Elements: Introduces the native DOM API moveBefore, its usage, advantages, and applications in Web Components, comparing it with the limitations of traditional insertBefore.

Tools

• agentation: A visual feedback tool designed for AI Agents that lets you click and add annotations, then generates Markdown text with detailed context including element paths, CSS selectors, positions, and more. Docs | Tweet

• This MarginLab is quite interesting — an independent performance monitoring tool for Claude Code and Codex that simulates real user coding scenarios to monitor LLM “degradation.”

Fun Sites & CodePen Picks

React Tilt Button - 3D Tactile React Button Component

I really like this one! Feels like a very clever design. A React interactive button component with 3D tactile feedback, supporting tilt and depth effects. It uses CSS 3D Transforms to inject physical depth and dynamic tilt effects into traditional button elements. The component includes built-in preset themes from retro arcade to modern steel, plus highly granular customization parameters for adjusting elevation, radius, and glare to create expressive user interfaces.

GitHub source code:

Super Monkey Ball

Developer Twilight ported SEGA’s classic Super Monkey Ball to the web — very well done and runs smoothly.

Check out the source code.

Typewriter Web Component V2

See the Pen EaKjXwB by luis-lessrain (@luis-lessrain) on CodePen.

Currently only available on CodePen, but the effect is excellent. The demo lets you interactively start, pause/resume, complete, and reset the animation. There’s also a progress bar and buttons to jump to specific progress points.

Refs

• Frontend Focus #726
• React Status #460