Frontend Development

LinkBatch - A Chrome Extension for Batch Downloading Links

A complete development journey of my Chrome extension LinkBatch - from identifying the need, planning features, to …

· 1 min
Chrome ExtensionFrontend DevelopmentTools

Mini-Program Avatar and Nickname Retrieval

This article introduces methods for retrieving user avatars and nicknames in mini-programs, including new API usage, …

· 2 min
Communication ToolsFrontend Development

Tailwind Explained (Simple Guide)

Recently, an open source project needed an H5 version, so I decided to try Tailwind. Here I’ll mark down my …

· 2 min
CSSFrontend Development

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.

· 1 min
Frontend DevelopmentHardware

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 …

· 1 min
Build ToolsFrontend Development

Click-to-Component Source Code Analysis

Click-to-component is a React component that enables one-click navigation to source code, significantly improving …

· 2 min
ReactFrontend DevelopmentTechnical Learning

Common npm Packages for Frontend Development

This article introduces common npm packages for frontend development, including usage scenarios and implementation …

· 1 min
Node.jsFrontend Development

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.

· 1 min
Build ToolsTypeScriptFrontend Development

Common Issues in WeChat Mini Program Development

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

· 4 min
Frontend Development

Online Issue - ERR_CONNECTION_CLOSED

Troubleshooting an online issue with ERR_CONNECTION_CLOSED: analyzing the root cause (request header length limit) and …

· 3 min
ChromeFrontend Development

Dockerizing Frontend Build and Deployment

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

· 1 min
Deployment & OperationsDockerFrontend Development

Frontend Code Security

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

· 1 min
Frontend Development

Frontend Storage Options

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

· 2 min
Frontend Development

Frontend Basics — P2

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

· 1 min
Frontend Development

Frontend Basics — P1

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

· 4 min
Frontend Development

Improve Frontend Code Quality — Stylelint

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

· 2 min
Frontend DevelopmentCSS

Web Page Font Flickering Issues

Diagnosing custom font flicker and practical fixes: CSS extraction, font preloads, file formats, font-display strategy, …

· 4 min
Frontend DevelopmentChrome

integrity in yarn.lock

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

· 1 min
Node.jsFrontend Development

Governing the Frontend API Layer

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

· 3 min
ReactFrontend Development

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 …

· 4 min
Frontend DevelopmentWebpackPerformance Optimization

Frontend Route Design

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

· 1 min
Frontend Development

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. …

· 6 min
CSSFrontend Development

How to Use Web Fonts in Frontend (Step-by-Step Guide)

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

· 4 min
Frontend DevelopmentCSS

Frontend React Project Structure and Conventions

This article covers frontend React project structure and conventions, including use cases and implementation details to …

· 3 min
ReactFrontend DevelopmentArchitecture Design

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 …

· 3 min
Frontend DevelopmentNode.js