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.
About this newsletter
This issue's URL: https://blog.cosine.ren/post/weekly-29 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 March 22, 2026, Sunday.
Personal Updates
Recently I finally optimized the blog's build speed and also integrated the Bangumi anime tracking feature. Next step is adding syntax support in posts (
- Selling two gold bars sitting at home — Crucial Micron DDR5 Desktop 64G 5600, single stick 3800 RMB, bundle 7500 RMB
But I probably won't sell them through the blog so let's just say I'm showing off (lol)
- What happens when you have a Ragdoll cat at home and don't clean the dust for a year before cleaning again:
- Ai-chan's adorable daily life
- Ai-chan became my sister's study buddy!
Community Updates
-
Claude Code Launches Official Telegram and Discord Plugins: Claude Code releases official plugins supporting remote connection to Telegram and Discord, with detailed configuration guides.
-
Native JSON Modules Are Finally Real: The article introduces how JavaScript's import attributes now natively support JSON module imports, ending the era of relying on bundler workarounds.
-
More Easy Light-Dark Mode Switching: light-dark() is about to support images!: The CSS
light-dark()function is about to support image values, allowing automatic background image, mask, or logo switching based on color scheme through a single property declaration — no more cumbersome media queries. This is so cutting-edge~ Firefox 150 has already shipped support, Chromium 148 offers experimental implementation, Safari has no support yet.
Articles
-
Moving from Moment.js to the JS Temporal API: A detailed guide on migrating existing Moment.js code in JavaScript projects to the new built-in Temporal API.
-
When Deno or Bun Is a Better Solution Than Node.js: An in-depth exploration of when choosing Deno or Bun as a JavaScript runtime is better than Node.js, emphasizing the importance of technology selection based on specific project constraints.
-
view-transitions-mock: A Non-Visual Polyfill for View Transitions:
view-transitions-mockis a polyfill for View Transitions that solves browser compatibility issues, allowing error-free execution and DOM updates in browsers without native support. -
Advanced contrast-color() Usage: Introduces advanced uses of the
contrast-color()CSS function, enabling it to return colors beyond just black and white for more flexible dynamic theming. -
An Empirical Study on Frontend Memory Leaks: An empirical study of frontend memory leaks across 500 open-source projects, explaining common leak patterns in major frameworks and their performance costs.
-
JPEG Compression Algorithm Explained: An accessible deep dive into how the JPEG compression algorithm leverages human visual characteristics and mathematical transforms for efficient image compression.
CSS New Features
-
CSS corner-shape Property Unlocks More UI Corner Shapes: Introduces the new CSS property
corner-shapeand how it works withborder-radiusto bring corner shapes beyond circles to UI design. -
CSS @supports at-rule() for Detecting @rule Support: Introduces the new CSS feature
@supports at-rule(@keyword)for detecting support of specific @rules. -
Abusing Customizable Selects: Explores how to leverage the new CSS feature
appearance: base-selectfor progressive enhancement, breaking through native select box visual limitations to achieve highly creative UI interactions.
Fun Sites
- Montreal-themed WebGL Experiment: Leeroy's Montreal-themed WebGL experiment, featuring a unique illustration-style 3D rendering blended with 2D elements.
- Add a Wobbling Animation to your Images: Use the
shape()function and a generator to add smooth infinite wobbling animation to images.
See the Pen zxKzrKe by t_afif (@t_afif) on CodePen.
Codepen
Water Droplets
So fun!
In this Pen by toi nagasawa, massive water droplets float in a Three.js scene. Drag your cursor to interact with the droplets, or click to spawn new ones.
See the Pen wBzWebb by toi-nagasawa (@toi-nagasawa) on CodePen.
CSS Scroll-Timeline Word Highlight
Daniel Haim demonstrates animation-timeline in action with CSS scroll-timeline word highlighting, and provides graceful fallbacks for browsers that don't yet support the property.
See the Pen azmBEPL by danielhaim (@danielhaim) on CodePen.
Stream Images with Wind
In this JS Canvas Pen by Sabo Sugi, leaves fly across the screen. But if you open the controls and upload your own image, you can make anything fly across the screen. Try adjusting the gravity, turbulence, size, and speed!
See the Pen LEZjqEg by sabosugi (@sabosugi) on CodePen.
If you enjoyed this, leave a comment~