Frontend Development

Mini-Program Avatar and Nickname Retrieval

This article introduces methods for retrieving user avatars and nicknames in mini-programs, including new API usage, compatibility handling, and best practices to help developers correctly implement user information retrieval functionality.

Aug 4, 2025

Understanding Tailwind

Recently, an open source project needed an H5 version, so I decided to try Tailwind. Here I’ll mark down my understanding and feelings after using it. For learning materials, the official website is of course the top recommendation. Here I’ll mainly share my rough understanding.

Jul 24, 2025

Web Dev — Show Search Button on iOS Keyboard

How to display a Search action on the software keyboard across iOS and Android and handle the resulting events.

Feb 20, 2025

Webpack Plugin to Auto-Rename Variables

I previously built a webpack loader called domain-replace-loader to replace domains in frontend JS, e.g., swapping to a new domain or a global window property, avoiding manual edits across repos. Sometimes the requirement isn’t about domains. A colleague recently asked to rename variables in code automatically. For example, rename T_PROJECT to P_PROJECT. I updated the plugin to support automatic variable renaming.

Feb 14, 2025

Click-to-Component Source Code Analysis

Click-to-component is a React component that enables one-click navigation to source code, significantly improving development efficiency. Here I attempt to read the source code and document key points. Source Code Structure The project uses pnpm as the package management tool, with pnpm workspace managing multiple packages.

Dec 31, 2024

Common npm Packages for Frontend Development

This article introduces common npm packages for frontend development, including usage scenarios and implementation details, to improve efficiency in frontend development.

Dec 20, 2023

Add Global Constants to a Frontend Project

Expose config from package.json into the built app via webpack DefinePlugin, with typing in TS and pitfalls to avoid.

Jan 25, 2022

Common Issues in WeChat Mini Program Development

This article covers common issues in WeChat mini program development, including use cases and implementation details to improve efficiency in WeChat mini program development.

Oct 29, 2021

Online Issue - ERR_CONNECTION_CLOSED

Troubleshooting an online issue with ERR_CONNECTION_CLOSED: analyzing the root cause (request header length limit) and implementing solutions like increasing container limits or truncating large headers.

Sep 21, 2021

Dockerizing Frontend Build and Deployment

Make frontend build/package/deploy reproducible with Docker and docker-compose: images, services, reverse proxy, TLS, and tips.

Sep 5, 2021

Frontend Code Security

Ways to raise the barrier against source theft: build modes, minification, hashing, obfuscation, and more.

Mar 12, 2021

Frontend Storage Options

Browser storage choices (cookie, sessionStorage, localStorage, IndexedDB), differences, and when to use which.

Jan 10, 2021

Frontend Basics — P2

Frontend fundamentals: MVC/MVP/MVVM, how browsers work, React Fiber, and how Redux triggers updates.

Dec 27, 2020

Frontend Basics — P1

Notes from frontend interview questions to reinforce fundamentals: TCP handshake, number precision, storage, hoisting, etc.

Dec 27, 2020

Improve Frontend Code Quality — Stylelint

A quick setup for Stylelint to enforce CSS style, complementing ESLint on the JS side.

Oct 8, 2020

Web Page Font Flickering Issues

Diagnosing custom font flicker and practical fixes: CSS extraction, font preloads, file formats, font-display strategy, and how browsers load assets.

May 28, 2020

integrity in yarn.lock

What the integrity field in yarn.lock means, how it’s computed, and why not every package has it.

Mar 19, 2020

Governing the Frontend API Layer

From ad‑hoc exported functions to an OO API layer with clear namespaces, shared base paths, and naming conventions.

Oct 16, 2019

Modern Frontend Optimization: A Deep Dive into Tree Shaking

Single-page applications (SPAs) offer a smooth user experience but often suffer from massive bundle sizes. Tree shaking is a crucial technique for eliminating 'dead code' and keeping your production assets lean.

Oct 4, 2019

Frontend Route Design

Guidelines for clean, readable, user-friendly routes with examples and rationale.

Sep 27, 2019

Implementing Less and CSS Modules in Projects

Why our React project paired Less with CSS Modules, the webpack/TypeScript setup, and how we organize themes vs. component styles.

Sep 1, 2019

Using Web Fonts in Frontend

Overview of web font usage: formats, loading strategies, performance, and compatibility tips.

Aug 11, 2019

Frontend React Project Structure and Conventions

This article covers frontend React project structure and conventions, including use cases and implementation details to improve efficiency in React project organization.

Jul 28, 2019

A Frontend White Screen Incident

Dev showed a white screen error ‘You should not use outside a ’. Root cause: npm install in CI ignored yarn.lock; fix by switching Maven to Yarn.

Mar 18, 2019

Using Redux in React

This post introduces using Redux in React, including why it exists, core concepts, and practical setup.

Dec 4, 2018