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 16, 2025, Sunday.
The newsletter website has a preliminary version up. The domain will probably change. I’ll replace the old Hexo version once everything has been migrated.
I’ve added a newsletter section on top of the blog. Suggestions are welcome — there’s still a lot to optimize. Search and comments haven’t been added yet, but feel free to take a look and share your feedback.
The repo is at https://github.com/cosZone/astro-koharu
I’ve realized my procrastination hasn’t gotten any better — if I don’t publish it, I’ll just keep putting it off. So I’m publishing it to motivate myself.
Ecosystem & Community Updates
-
pnpm 10.21: Can now automatically install the Node version required by dependencies based on
engines.runtime, and introducestrustPolicyto prevent supply chain attacks.When dependencies declare a specific Node.js version (in the
engines.runtimefield), pnpm will automatically install that version and bind it to the CLI application runtime, ensuring dependency and runtime environment consistency. If there arepostinstallscripts, they will also execute under the matching Node.js version. Trust Policy settings: A new configuration option that can be set tono-downgrade— when a package’s trust level drops compared to its previous version, the installation will be blocked to prevent potential security risks. -
TC39 (the JavaScript language standardization committee) will hold its 111th meeting in Tokyo in November 2025. The meeting agenda has been published.
Stage 4 candidate proposals:
Stage 0 new topics:
- Iterator support improvements (Iterator Join, TypedArray Concatenation, FindWithin)
- Class spread syntax
- Class field introspection
- Several new Intl proposals (Energy Units, Unit Protocol, etc.)
-
Node.js v25.2.0: Type Stripping feature marked as stable.
-
esbuild 0.27: Includes breaking changes — pin your version.
Articles & Videos
- Animating CSS width or height no longer forces a main-thread animation in Chrome under the right conditions: From a performance perspective, animating CSS
widthandheightis bad because it causes layout operations (also called reflows) in the rendering pipeline. This is still true.
But there’s been an exciting animation/performance improvement in recent Chrome Canary builds:
In Chrome 144.0.7512.0 (current Canary), we expanded the
width/heightcheck to verify whether thewidthorheighthas actually changed. If thewidth/heighthasn’t changed, there’s no need to compute layout, so there’s no need to force the animation to run on the main thread.
- Crafting Generative CSS Worlds | Codrops: Build 3D isometric terrain worlds using pure CSS, constructing pixel-style generative worlds through layered grids and 3D transforms. The author covers the complete technical path from camera perspective setup, to multi-layer grid architecture, terrain cell geometry definitions, noise-generated height maps, and performance optimization. The website is CSS Terrain Generator.
-
Perfecting Baseline: A technical essay about how the Web platform feature “Baseline” concept was born, evolved, and optimized, helping developers understand its value and limitations.
-
JavaScript Engines Zoo: Aggregates data, performance, and development history of over 100 JS engines, with Dockerfiles for direct experimentation. (Great name!)
- Visual Types: An interactive visual notebook that explains core TypeScript type system concepts in an intuitive way, turning abstract type relationships into set theory analogies. The author breaks down modules including basic types, union types, intersection types, generics (Type Alias/Generic), conditional types, and more, guiding developers from the fundamental idea that “types are sets of values” to a step-by-step understanding of TypeScript’s compile-time inference and constraint mechanisms.
- Effectively Monitoring Web Performance: How to systematically monitor website performance and build a continuously efficient frontend experience.
CSS New Features
- The Range Syntax Has Come to Container Style Queries and if(): CSS conditional logic has leveled up again! Range syntax can now be used in container style queries and the
if()function.
This means you can now do the following:
/* Range query for rain percent (new) */
@container style(--rain-percent > 45%) {
.weather-card {
background: linear-gradient(140deg, skyblue, lightblue);
}
}- Responsive List of Stacked/Overlapping Images: Build responsive overlapping avatar lists using modern CSS (like
container-typeandcqwunits). The spacing between images adjusts automatically based on container width and element count — no fixed values or “magic numbers” needed. The layout is both flexible and visually balanced.
Fun Sites & Codepen Picks
Messenger
“Messenger” is an interactive webpage themed around an asteroid delivery person. It won the Awwwards Site of the Day (SOTD) on November 10, 2025. The work creates an immersive exploration experience through an ingenious character system and dynamic NPC setup. Using only two primary colors, it’s minimalist yet narrative. The technical implementation balances animation smoothness, responsive design, and accessibility. With an overall score of 7.92/10, it excels in art direction, interaction, and animation implementation — an excellent example of web storytelling and visual creation.
It’s a tiny planet, but someone’s gotta deliver.
Red Alp [448]
Code golfing a tiny demo using maths and a pinch of insanity: The author used extreme code compression and mathematical tricks to squeeze a GLSL shader down to just 448 characters, creating a mesmerizing 3D mountain landscape with cloud and fog effects.
You can view the demo here.
Hopping Marbles
Hopping Marbles: A looping pure CSS + SVG hopping marble animation — very creative!
“A pseudo-3D loop animation starring marbles, designed as a preloader-like effect. Additionally, special SVG clip paths are used at the bottom of the holes, along with some secretly alternating paths.” — Jon Kantner
喜欢的话，留下你的评论吧～