Blog
Practice, notes, and ideas from frontend development.
2025
Cross-Platform Frontend
Comparing the pros and cons of three cross-platform approaches—Web rendering, native rendering, and self-rendering engines—and organizing the layered structure of an app.
WebGL Study Notes
An overview of WebGL shaders, primitives, and coordinate systems, plus the basics of vectors, matrices, linear transformations, and determinants.
How to Understand React Server Components
The evolution of RSC did not happen overnight; it is more like a kind of natural selection.
Electron
An overview of Electron's multi-process architecture, the integration of the Chromium and Node.js event loops, inter-process communication, data sharing, and native capabilities.
Unity Development Experience
Notes on Unity installation and development experience, covering Tuanjie engine compatibility, tilemaps, debugging, components, physics, animation, and the input system.
Web Protocols
Study notes on Web protocols
NestJS Notes
Notes on integrating Fastify, Swagger, Prisma, and Zod in NestJS, plus MongoDB connection and transaction issues.
React Study Notes
Notes on React component design, render optimization, reconciliation and the role of key, plus the working mechanisms and usage caveats of common Hooks.
MongoDB Notes
Organizes MongoDB data operations, modeling, replica sets, transactions and sharding, plus index optimization, monitoring, backup, and version upgrades.
AI-Related Notes
Common vision models and their characteristics, organized by image recognition, object detection, image segmentation, pose estimation, and generation tasks.
Micro-Frontends
A discussion of route ownership between master and sub-applications in micro-frontends, lazy loading, path prefixes, and authentication issues, plus a summary of the limitations of the iframe approach.
Compilation-Related Notes
An introduction to the uses and generation process of ASTs, demonstrated through a tiny compiler that converts Lisp-style function calls into C-style calls.
Nginx
Nginx study notes
React Native Pitfalls
Troubleshooting methods for script loading failures, app connection errors, and slow Gradle downloads in a React Native Android environment.
NodeJS Knowledge Points
Notes on the Node.js event loop, file watching, performance debugging, and process management, plus a discussion of GraphQL queries and the N+1 problem.
Algorithm Notes
Study notes on graph traversal, shortest-path solving, and hash collision handling, with code examples and implementation ideas.
Software Architecture
Organizes the concepts of software architecture, sources of complexity, design principles and selection processes, and discusses database clusters and NoSQL solutions.
Introduction to Common JS APIs
An introduction to Object.defineProperty's property descriptors, their default values, and the mutual exclusion between accessor descriptors and data descriptors.
TypeScript
Notes on the semantic purposes of type and interface in TypeScript, and how they display differently in VSCode type hints.
VSCode
An introduction to VSCode WebView isolation and message passing, and the implementation approach of forwarding local resource requests through a Service Worker.
Docker
An overview of Docker image and container operations, Dockerfile instructions, and CPU, memory, and disk I/O resource limits.
FFmpeg Notes
An overview of the FFmpeg audio/video processing pipeline plus commands for recording, extraction, trimming, merging, image conversion, live streaming push/pull, and filters.
Design Patterns
A summary of common design patterns.
Writing Various Documents
Content related to work documents
Solution Design
A collection of common solution designs
Vue3 Knowledge Points
Notes on behavioral differences between Vue3 and Vue2, plus reactivity, compile-time optimization, fast diff, and the component instance exposure mechanism.
Linux Knowledge
Notes on Linux commands, permissions, process, network and storage management, plus shell scripting, text processing, scheduled tasks, and firewall configuration.
Bundlers
A summary of build-related content
Performance
Knowledge points related to frontend performance optimization.
Frontend Rendering
Frontend rendering topics, including SPA and SSR.
Web Security
Network security topics, focused mainly on web security
Vue2 Knowledge Points
Vue2 lifecycle, reactivity, two-ended diff, component caching, custom directives, and virtual DOM organized from the source code.
Reimplementing Native Code
Studying the behavior of native JS code by simulating native functionality.
Modularization
A summary of frontend modularization
Execution Stack and Event Loop
Notes on the execution stack and the event loop.
Memory Management
Frontend memory management mechanisms and optimizations in V8
Prototypes and Inheritance
Notes on prototypes and inheritance in JS
JavaScript Underlying Mechanisms
A summary of all kinds of quirky behaviors in JS
Browser Mechanisms
A summary of browser behaviors, mainly focused on Chrome
Computer Networks
A summary of computer network related content
2024
Using Mixins in Composables in vue2
Considering historical debt, composables and mixins coexisting in vue2 code is a long-term situation, and mixins restrict components from using composables. This article explores how to remove the restrictions mixins place on composables.
2023
ESBuild Common Pitfalls Guide
Notes on esbuild alias resolution, plugin cascade handling, and decorator compatibility, plus how to adjust default exports for Vue class components.
Technology Selection
Comparing the isolation and sharing capabilities of iframe and module federation, and recording the Vite micro-frontend plugin selection plus the dev and build workflows.
Troubleshooting Guide
Troubleshooting methods for style loss, dependency sharing, module exports, and asset path anomalies in Vite module federation practice.
2022
Introduction to Vue3 Hooks
The `hook` concept was first proposed by React. To understand vue3 `hook`s, it is essential to first understand React `hook`s, including their use cases, the motivation behind their evolution, and so on, in order to make better use of vue3 `hook`s.