This week's issue focuses on ecosystem and community updates, with highlights including V8 engine doubling JSON.stringify performance, Vite npm weekly downloads surpassing Webpack for the first time, and Vite ecosystem developments like Rolldown startup speedups and Oxlint type-aware linting progress. Content covers npm, Deno community news, new CSS features, in-depth articles (Tree Shaking, RAG, character encoding), and tool/library updates including AwesomeIndex and Kibo UI.
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.
Hey everyone, today is August 10, 2025, Sunday.
This weekend I went to “Crazy Saturday” in Shenzhen — it was really fun. The Sspai venue was beautiful, with great air conditioning and full of life. Then I listened to Lao Mai talk about Sspai’s growth story, learned a lot, and everyone had a great chat.
I genuinely think Sspai has great taste — their website and all their merchandise designs are really sophisticated~
Now let’s get to the main content~
Ecosystem & Community Updates
Community Updates
The V8 team has more than doubled JSON.stringify performance. Once upgraded to V8 13.8 (Node 24 uses 13.6), Node.js performance will benefit significantly (detailed breakdown).
npm now supports automated secure publishing in CI/CD using OpenID Connect (OIDC) (official announcement).
The Deno team briefly analyzed the “JavaScript trademark” dispute with Oracle and co-signed a call to “free JavaScript” (video summary, open letter).
While not directly frontend-related, it’s worth mentioning: OpenAI announced two open-weight language models this week — gpt-oss-120b and gpt-oss-20b — and launched GPT-5 on August 7, setting it as ChatGPT’s new default model with a phased rollout to Plus, Pro, Team, and free-tier users. Pro/Team users can opt for the delayed-reasoning “GPT-5 Thinking Pro.”
Cloudflare accused Perplexity of bypassing no-crawl directives; Perplexity responded that “excessive blocking hurts everyone.” Report | Response
Web Platform updates: This issue leans toward Firefox’s new feature roundup — worth watching for standards landing and compatibility developments. What’s new to the web platform
This article summarizes the core progress in the ViteLand ecosystem during July 2025, covering major updates to Vite, Vitest, Oxc, Rolldown, and more. It notably previews the highly anticipated first in-person ViteConf, the brand-new Vite+ product, and upcoming official documentary highlights. Details below:
Who would have thought this 5 years ago, when Vite started as a side project?
Vite 7 released, adding a buildApp hook, upgrading to a pure ESM package, requiring Node.js >= 18 (since Node.js 18 has reached EOL).
Rolldown-Vite’s new version supports tsconfig path resolution (resolve.tsconfigPaths) and out-of-the-box Yarn Plug-and-Play, with performance optimizations boosting startup speed by 2.1x, reducing TTI (Time to Interactive) and cold start time.
Oxlint introduces type-aware linting, supporting rules like no-floating-promise. The first version will include two rules, with the next version including all type-aware rules from typescript-eslint, with no performance penalty. Experimental support for JS custom rules (ESLint API compatible).
napi-rs creator Brooklyn joins the VoidZero team; NAPI-RS v3 released.
Fun Updates
What a difference a semicolon makes?
Click to learn about this classic JavaScript pitfall. The author casually inserted a console.log('here') statement without a semicolon while debugging, right before an IIFE (Immediately Invoked Function Expression). The missing semicolon caused the JavaScript engine to treat the subsequent function code as an argument to console.log, ultimately throwing a TypeError.
Andre on Mastodon reminded me of Chris Coyier’s excellent Web Development Merit Badges, so I’m now proudly wearing my badge: “Debugged something for over an hour, and the fix was actually one character.”
Little-known facts about the anchor element’s href
This article dives deep into some uncommon but very practical values for the href attribute in HTML anchor <a> tags. Beyond reviewing known uses like mailto: and text fragments, it highlights lesser-known tricks such as using "", ., and ? for different ways of reloading the current page, and how they handle URL query parameters and hashes. It also covers data: URLs, media fragments, and PDF page links.
Project AIRI DevLog @ 2025.08.01: Implementing grapheme cluster segmentation for streaming UTF-8 byte streams using TextDecoder and Intl.Segmenter, solving character combination challenges for multilingual real-time text animation. Open-sourced as the lightweight library Clustr.
Unexpected security footguns in Go’s parsers: This article reveals easily overlooked insecure default behaviors in Go’s JSON, XML, and YAML parsers that could lead to serious security vulnerabilities like authentication bypass. Many of the points apply well beyond Go.
10 Essential UTF-8 and UTF-16 Character Encoding Concepts Every Programmer Should Know: This article systematically covers core concepts, differences, and practical applications of UTF-8 and UTF-16. The author points out that many programmers tend to ignore encoding details until they encounter garbled text and compatibility issues. The article clarifies common misconceptions one by one, comparing space efficiency, compatibility, byte order (endianness), industry standards, and support for non-English characters and international data across encodings.
Previously, ESLint / TypeScript-ESLint offered strong type safety but was extremely slow on large codebases. Rust-rewritten Biome and Oxlint achieve sub-second speeds but initially only supported syntax-level rules, lacking type safety. Biome is gradually covering type rules through a completely new Rust-implemented type analyzer (Biotype), but implementation difficulty is high with risks of behavioral deviation from official TypeScript. Oxlint is taking a different bet: waiting for the official TypeScript compiler to get faster. Oxlint uses tsgo, a Go port that stays aligned with official TypeScript, implementing 40 type rules fully consistent with typescript-eslint through tsgolint, with significant performance improvements.
The article tracks community approaches, development progress, and key author perspectives, concluding that Oxlint’s technical path shows more promise and may ultimately replace current mixed linting approaches with blazing speed and official consistency.
Making my GitHub heatmap widget: This article describes how the author scraped GitHub’s contribution calendar HTML, processed it into JSON format, and rendered it as a heatmap widget on their personal website using a custom WebComponent.
How I use Claude Code (+ my best tips): Claude Code best practices and security recommendations, including hook notifications, smart PR reviews, large codebase handling tips, and more.
React Query Selectors, Supercharged: This article dives deep into advanced usage of the select option in React Query, aiming for maximum performance optimization.
Get the number of auto-fit/auto-fill columns in CSS: This article introduces a pure CSS technique that dynamically calculates auto-fit/auto-fill grid column counts using container queries and math functions (including trigonometric functions for compatibility), enabling complex responsive layouts.
6 Weeks of Claude Code: A developer shares six weeks of experience using Claude Code, believing it massively freed up productivity and enabled clearing technical debt and project innovation at unprecedented speed, fundamentally changing how programming works.
karminski/one-small-step: A tutorial project aimed at quickly explaining AI, hardware, and other cutting-edge technology concepts and principles through 5-minute short articles.
CSS if() Conditional Styling Function Practical Guide: Detailed introduction to the new CSS if() conditional function, compared with classic conditional handling techniques. This function brings native conditional styling capability to CSS, greatly simplifying the complexity of implementing conditional logic through media queries, custom properties, etc.
Bringing Back Parallax with Scroll-Driven CSS Animations: This article details how to use emerging CSS scroll-driven animation technology to re-implement classic parallax scrolling effects with pure CSS. Compared to traditional JavaScript approaches, pure CSS moves animations off the main thread for better performance and smoothness. The article explains the two core timeline functions scroll() and view() of the animation-timeline property through examples, and further introduces how to use animation-range for precise control over animation trigger timing and range.
Tools & Library Updates
Tools & Fun Sites
CSS-only Carousel Gallery: Showcasing CSS carousel specifications and pure CSS demo sites, providing inspiration for JS-free scenarios.
AwesomeIndex: An aggregated search tool that lets developers search hundreds of high-quality “Awesome” curated lists on GitHub at once. These lists contain quality resources, tools, and learning materials across various topics. AwesomeIndex centralizes this scattered valuable information, greatly improving the efficiency of finding and discovering resources in specific domains.
Kibo UI: Kibo UI is a shadcn-based extended component library, ready to use out of the box. While shadcn/ui focuses on wrapping primitives from Radix UI, Kibo UI is designed as a more comprehensive component library for building more complex applications. (PS: The author donated the AI components to Vercel to create the AI Elements component library.)
Hey! I donated Kibo’s AI components to Vercel to create AI Elements — we’ve put a lot of work into improving them, so I’d definitely recommend upgrading to AI Elements. Most components have the same names, many have been upgraded, and there are some new ones. I think we renamed Input to PromptInput, but other than that it should be a seamless switch! Also, if you run npx kibo-ui add ai, it will use AI Elements.
smart-webapp-template: A carefully designed Vite + React template with well-crafted Claude and Cursor rules, demonstrating how to collaborate with AI to build high-quality Web pages.
Innei (@oQuery): A good template is the foundation of AI Coding. If AI keeps writing everything in blue-gradient style, it’s time to switch to a better template. I’ve reorganized a template I’ve been using all along — all design styles and organizational architecture are already tuned.
Colored, Glowing Edge Card: Simon Goellner created a cool glowing card effect demo that also supports day/night mode switching.
Hyprnote: An AI meeting notes tool focused on “local-first” and privacy security, capable of real-time transcription and intelligent summary generation for meetings, ensuring data never leaks. Supports Ollama local models and third-party APIs.
HivisionIDPhotos: A lightweight AI ID photo generation algorithm that runs on CPU. Includes smart background removal, automatic layout, and multi-specification beauty enhancement. Supports various deployment methods including comfyUI workflow deployment.
ResumePolice: Resume Police Detective: An open-source AI project providing “resume police” prompts and Dify workflows to help job seekers optimize resumes and generate interview questions.
SnapAI: SnapAI is an open-source AI-powered icon generation CLI for React Native and Expo developers. Requires an OpenAI API key, with each icon costing ~$0.04. Watch video tutorial
Lisere: Lisere is a lightweight and composable React component for text highlighting. It gives you precise control over how users select, annotate, and interact with text. Great for code documentation, tutorials, and interactive text highlighting and selection.
Library Updates
Node.js v22.18 (LTS) enables TypeScript type stripping by default — node app.ts is now a reality, just like Bun or Deno, though it’s still an experimental feature. (Release announcement).
pnpm 10.14 supports directly defining and automatically downloading/pinning Node.js, Deno, and Bun runtimes to local projects. Details
Vercel released AI SDK 5. This major update focuses on providing end-to-end type safety for full-stack AI applications, especially in chat interactions and Agent functionality.
Shopify releases FlashList v2, a complete rewrite based on React Native’s new architecture, designed to address v1’s core pain points. By leveraging the new architecture’s synchronous layout measurement capability, v2 completely eliminates dependency on item size estimation, achieving faster loading, pixel-perfect scroll positioning, and smoother rendering performance.
Apache ECharts 6.0 officially released with 12 major upgrades aimed at elevating data visualization. The update centers on three core dimensions: new default theme, dynamic theme switching and dark mode support; new chart types including chord diagrams, beeswarm plots, axis breaks, scatter plot jitter, and enhanced candlestick charts; and the introduction of matrix coordinate systems, enhanced custom series, and optimized axis labels.
The smallest React framework, Waku v0.24, announced a major migration — its underlying implementation has moved to Vite’s official RSC plugin @vitejs/plugin-rsc and Vite Environment API.
Deep Dives
This section presents detailed analysis of interesting articles and demos~
Some summaries were made using my MoeCopy AI browser extension! Open source, ultra-lightweight — just enter your own API key to use. Still in development, give it a try~ If you like it, a star would be appreciated! Chrome Web Store >
The PR That Reduced Rolldown’s Startup Time by 2.1x
Thanks to some deep JavaScript engine optimization tricks, Rolldown’s startup time has been reduced by 2.1x. This can shorten time to interactive, better serve serverless cold starts, and benefit your dev server startup speed.
PIFE stands for “Possibly-Invoked Function Expressions.” It’s a function expression wrapped with a parenthesized expression. PIFEs annotate functions that may be eagerly invoked. When V8 encounters such expressions, it eagerly compiles them (instead of compiling later). For more details, see v8’s blog post.
The blog post only mentions regular FunctionExpressions, but ArrowFunctions are also supported. Cases that are eagerly compiled:
When ! appears before the function literal (e.g., !function(){})
When the function expression is wrapped in parentheses (e.g., (function () {}), (async function () {}))
When the arrow function is wrapped in parentheses (e.g., console.log((() => {})))
When () or a tagged template appears after the function literal (only in certain cases) (e.g., ~function(){}())
This week’s CodePenSpark#462 featured a series of volume control UIs implemented with frontend technologies.
Creative UI Component Implementations
Elastic Volume Toggle: An SVG elastic volume switch by Aaron Iker, with delightful bounce and flip animations.
Retro Volume Knob: A plastic-looking retro circular range slider that can be used as a volume knob.
CSS Volume Meter: Alvaro Montoro transforms a native range input into a color-coded dynamic volume meter using pure CSS.
Single-Element Volume Control: Demonstrates how to create a multi-segment volume control bar using only CSS and native range sliders — no JavaScript needed.
Microphone Toggle Button: A classic microphone toggle button with clear interaction states and keyboard accessibility support.
CSS Balance Slider: A configurable range slider combo by Jhey Tompkins, with rich visual effect options including stretching and boosting.
Interactive & Experimental Projects
Aperture Science Dance Party: An animated scene inspired by the game Portal — click the icon to play music and watch characters dance.
SVG Sound Wave Markup Experiment: An artistic UI experiment attempting to render sound wave effects with relatively simple SVG markup.
A Quiet Place - Volume Control Animation: An audio-interactive animation where users reveal hidden creatures in the woods by making sounds through the microphone.
Sound Color Picker: A unique color picker that combines sound and vision (Chromesthesia) — clicking different colors plays corresponding sounds.
The main analysis focuses on this Synth Volume Knob — a skeuomorphic volume knob control: the knob follows mouse angle rotation, the ring glow bar lights up proportionally to volume, numbers display 00-99, synchronously controlling <audio>’s volume, with a “mute/resume playback” button.
.knob::before/::after and .slider::before, .glow::before/::after use pseudo-elements stacked in layers, drawing the knob panel, inner ring glow, outer ring tick marks, etc.
CSS Custom Properties Driven
Uses --vol (0-100) as the “state source.” In .glow:after’s linear-gradient, calc(var(--vol) * 1%) controls the lit arc length.
--c1, --mut, --tra control theme color, mute color, and transition curve. .slider:active * dynamically changes hues for interactive highlighting.
Tick Marks & Ring Highlighting
.glow:before generates tick marks through overlaid linear-gradient at different angles; the center is “hollowed out” with a radial gradient.
.slider rotates the whole thing, combined with linear-gradient(-90deg, ...) direction, making the “starting point at top” visual more intuitive.
Mute Button Pure CSS Graphics
.mute span:before uses clip-path to draw a “speaker” shape. .mute span:after uses characters to represent sound waves/mute, with content switching based on class name.
Digital Clock Font & Glow
@font-face imports an Alarm Clock font. .number overlays inner glow and a faint “88” mask, creating a digital LED screen effect.
Core Technical Points (Interaction)
Angle Calculation & Knob Rotation
calculateDegree(e) uses Math.atan2 to calculate the “pointer’s angle relative to the screen center” (note: relative to the window center, not the knob center).
On mousedown on the knob, mousemove is monitored in real-time, setting knob.style.transform = rotate(deg).
Angle to Volume Mapping
Through segmented processing of val = angle + 90, the full circle angle is mapped to a 0-1 volume value ran, corresponding to --vol and <audio>.volume.
That wraps up the second issue! Feedback and corrections are very welcome!
After finishing the first issue, I thought about it — since we’re going for a relaxed vibe, I could share some daily life stuff at the end~
So, cat photo time!
Laba the cat: Adopted on February 22, 2024 (Cat Day) — a little orange-and-white cat. The person who found her did so on the Laba Festival, so this little cutie is named Laba~
When adopted, she was about 5 months old and 3.55kg of chubby kitten! Now she’s already become a senior cat~
Cola the cat: A colorpoint Ragdoll boy who came in October 2024 to keep Laba company~ He was still a 3-month-old kitten at the time.
Thanks for reading~
Updates are expected on Sundays; if there’s not enough content for a given week, it may be merged into the next issue as a biweekly.
I recommend subscribing via Folo to this weekly’s Quaily RSS.
WeChat Official Account: FE Bits. Click the original article link to view the full post.
I created a small QQ discussion group 598022684 — feel free to join for casual discussions about frontend tech & life. You can also submit your own articles in the group~ It’s more of a fan group, so low activity early on is totally normal.
This weekly is also open-sourced at fe-bits-weekly, feel free to follow along.
喜欢的话，留下你的评论吧～