Notes about architecture, DX, and the craft of shipping fast.
Writing
Mar 4, 2026
Hybrid H5 Video Playback in a Hybrid Architecture: Autoplay, Fullscreen Adaptation, and Tracking in Practice
In Hybrid App H5 scenarios, implementing video playback often means fighting autoplay blocking, fragmented fullscreen APIs, and hard-to-align tracking semantics. Based on real production experience, this article explains the decision boundary between native `<video>` and Canvas, dives into iOS/Android details for autoplay fallback, fullscreen state detection, and event semantic mapping, and provides a complete TypeScript implementation plus WebKit API type augmentation for stable cross-platform playback.
Mar 3, 2026
Compile-Time Magic: A Custom Webpack Loader for Inlining Function Call Results as Static Strings
This article explains how a custom Webpack/Rspack loader folds getDocsLink calls into URL literals at build time, preventing large JSON maps from entering the initial bundle and achieving zero runtime overhead with better tree shaking.
Mar 2, 2026
From White Screens to 87% Lower Memory: A V8-Level Retrospective on Optimizing a Customized ECharts Library
Using V8 internals analysis, this post explains how an inefficient data structure became a memory trap, and how three strategies - array transposition, type separation, and a Dataset architecture refactor - reduced memory usage by 87%. It includes detailed %DebugPrint analysis and before/after benchmark data.
Mar 1, 2026
My Monorepo Practices: From Fundamentals to Best Practices
Covers key Monorepo concepts, package strategies, how to manage cross-package dependencies, best practices for shared configuration, and tips for improving build efficiency with Turborepo. It also discusses configuring npmrc and pnpm-workspace to optimize package management and help teams achieve more efficient and sustainable frontend engineering.
Feb 28, 2026
This One Move Made My Node Backend Start 75% Faster: Comparing Three TypeScript Startup Methods
In this article, we compare three common startup methods for Node backend services: tsx, tsc, and esbuild. Through practical benchmarks, we show their differences in cold-start time, throughput, and resource usage. In cold-start-sensitive scenarios, pre-bundling with esbuild significantly improves startup speed, up to 75%. Whether you are a developer or a system architect, this helps you choose the right startup strategy for your project and balance developer experience with production performance.
Feb 27, 2026
React Server Components End-to-End: Next.js Build Artifacts, Navigation Flow, and Payload Format
Based on Next.js source code and build output, this article explains the RSC build structure, routing/navigation flow, and payload format, and how they relate to hydration and module boundaries.
Feb 23, 2026
Span Timeline Tree Grid Implementation Review: Key Pain Points and Design Decisions
A practical review of how the Span timeline tree grid was implemented, including data modeling, tree rendering, layout, highlight navigation, style priority handling, and reusable abstraction.
Feb 5, 2026
How to Implement a Soft Keyboard State Detection Hook
Using useSyncExternalStore to build a keyboard state detection Hook with a "pre-announce" mechanism, solving timing issues when the mobile keyboard appears.
Jan 28, 2026
Common Focus, Auto Scroll, and Position Issues for Inputs in iOS WebViews
Explains why iOS WebViews auto-scroll and misplace elements when inputs focus, and provides a timing-driven, production-ready fix with code.
Jul 17, 2025
Understanding React 18 Concurrent Rendering
A deep dive into React 18's concurrent rendering mechanism, including time slicing, priority scheduling, the Tearing problem, and the principles and source code analysis of useSyncExternalStore.