FE Bits Vol.16｜Cloudflare Incident Report Released, CSSWG Confirms Masonry Layout Syntax grid-lanes

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-16 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 23, 2025, Sunday.

The website now has search implemented using astro-pagefind — works great without needing a backend.

The plan is to first polish the website features without a backend, then gradually add backend-dependent features. This way, the backend-free version is easy to deploy — just like the old Hexo experience.

Ecosystem & Community Updates

Highlights from Git 2.52: Git 2.52 brings new commands and performance improvements. This version marks the first use of Rust code for some of Git’s internal features, and Git 3.0 will require Rust entirely.
Cloudflare experienced a global network outage on the evening of November 18, 2025 (Beijing time). The incident affected multiple regions and services, including WARP and Application Services, and was gradually resolved after over two consecutive hours.

Incident timeline and recovery progress 20
— Partial recovery in some regions, followed by multiple “re-explosion” and recovery cycles. 21
— Official confirmation of WARP access being disabled in London, indicating the problem was largely identified. 21
–21
— Multiple official status updates, gradually restoring Access, WARP, and Application Services. 22
— X (formerly Twitter) web version restored.

If you’re curious about the cause, check out the official incident report.

State of React 2025 Survey: The annual React ecosystem survey is open again. The submission deadline is November 25, next Tuesday. If you’re interested, you can check out the 2024 survey results here.

Filling out these surveys is actually a great way to learn things. Similar to the previous JS/CSS annual surveys.

The React team has been iterating at a steady pace in recent years, introducing Server Components, the Compiler, and even establishing the React Foundation for governance.

Announcing Angular v21: Angular welcomes v21, a forward-looking version update focused on AI integration, accessibility, and modern developer experience.
Reddit /r/node discussed the pros and cons of NestJS, sparking community reflection on framework selection trade-offs.

Articles & Videos

How to write a great agents.md: Lessons from over 2,500 repositories: GitHub shares lessons distilled from 2,500+ repositories on how to write a truly useful agents.md file.
On making mistakes at work | CatCoding: Mistakes aren’t just personal problems — they also expose team weaknesses in design, permissions, quality control, and code review.
From the Cloudflare outage to code safety | Cyandev: A discussion that goes from a Rust-related service outage to memory safety and code complexity.
How to create 3D images in CSS with the layered pattern: Use CSS’s transform-style: preserve-3d to make all layers visible in 3D space, leverage perspective and shadows to create a stereoscopic illusion, and achieve dynamic 3D effects using perspective, translateZ(), filter, and other techniques.

Keyframes Tokens: Standardizing Animation Across Projects: How to standardize and maintain animation systems by designing animation keyframes (@keyframes) as reusable Keyframes Tokens.
Six things I bet you didn’t know you could do with Chrome DevTools Part 1: Discover those overlooked yet super-practical hidden tricks in Chrome DevTools that can boost your debugging efficiency.

This is Part 1, covering the first three topics:

Use console.time() and console.timeEnd() to precisely time function execution.
Use DOM Breakpoints to capture element changes in real-time and automatically pause script execution.
Use monitor() to watch any function call from the console.

Breakpoints are really important — study them seriously!

CSS New Features

Learning more about CSS random() through experiments: The author demonstrates through multiple experiments how CSS’s random() function can create dynamic and interesting visual effects, such as rotating star fields, scroll-parallax star fields, and scroll-based dot matrix effects. While currently only supported in Safari Technology Preview, the article provides visual demos and code snippets showing the creative possibilities random() opens up and the potential of future styling systems.
Introducing the
() function for CSS custom components: Introduces the CSS :state() pseudo-class function, a new feature for Web Components that can modify styles based on a component’s internal state.
Anchor positioning is transform-aware in Chrome 144+: Chrome 144 makes Anchor Positioning transform-aware. After this update, tooltips, floating elements, and similar will position based on the element’s post-transform position.
Masonry Switch syntax #1022: The CSS Working Group (CSSWG) has decided to adopt the new syntax display: grid-lanes to enable Masonry layout from CSS Grid Level 3.

Tips

Although I’ve recommended so many CSS new feature blog posts, I haven’t actually used that many in real projects. So I’m starting a new section to document the small tips I’ve actually used in projects!

CSS scroll-state is quite handy for progressively enhancing the fade mask at the bottom of scrolling containers.

/* https://github.com/parcel-bundler/lightningcss/issues/887 */
.scroll-feather-mask {
  container-type: scroll-state;
}
@container scroll-state(scrollable: bottom) {
  .scroll-feather-mask::before {
    content: '';
    background: linear-gradient(to bottom, transparent 0%, var(--gradient-bg-start) 70%, var(--gradient-bg-start) 100%);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: block;
    height: 5rem;
  }
}

References:

Tools

Free Online Image Converter: A free online image conversion tool that requires no login and no server upload. It runs entirely in the browser, supports mutual conversion between various mainstream and emerging image formats, allows adjusting output format and quality, with instant downloads — no watermarks, no limits.
Baseline JS Docs: An ESLint plugin that detects whether JavaScript code conforms to the Web platform Baseline standard, making your code more compatible across all browsers.

Fun Sites & Codepen Picks

Classic 8x8-pixel B&W Mac patterns

Website: https://paulsmith.github.io/classic-mac-patterns/ Article: Classic 8x8-pixel B&W Mac patterns

Created by Paul Smith, these Classic Mac OS System 1 background patterns are retro pixel patterns at tiny dimensions that can tile infinitely using CSS background-repeat. Despite originating from classic Mac OS design aesthetics, they still have unique beauty and practical value in modern web pages.

Creepy Button

See the Pen ZYWKvqW by jkantner (@jkantner) on CodePen.

“This button is watching you.” Peek underneath Jon Kantner’s playful button and you’ll find a pair of cartoon eyes tracking your every move.

Liquid Glass Clock

See the Pen YPqqqwr by alexandrevacassin (@alexandrevacassin) on CodePen.

As the name suggests, a liquid glass digital clock.