Next.js、React、TypeScript、前端工程化
This collection features articles and community discussions in the Web 开发 space, focusing on real-world engineering scenarios, tool selection, practical paths, and risk boundaries.
The page is continuously updated and serves as a learning roadmap, technology selection reference, and technical review entry point.
Images are often a page's largest resource, so optimizing them is key to LCP. This guide covers modern formats (WebP/AVIF vs. JPEG/PNG), responsive images (srcset/sizes), Next.js Image, lazy loading, placeholders, and dynamic CDN processing in a production-ready strategy.
Unit tests validate individual units and integration tests validate combinations, but only E2E can answer whether users can actually use the product. This article covers Playwright's core capabilities, Page Objects, CI integration, and what E2E should and should not test.
A modal rendered deep in a component tree can be clipped by parent z-index, overflow, or transform rules. Portal renders it in document.body to escape those constraints. Learn Portal fundamentals, a complete modal implementation, accessibility, and why Radix Dialog handles the hard parts.
Generics are among TypeScript's most powerful and most overused features. This guide explains constraints, defaults, inference, built-in Utility Types, when generics help, and when they do not, with one principle throughout: types should help you, not trap you.
Microservice integration tests are expensive because every service must be started. Contract tests verify only that API agreements remain unchanged. This article explains Pact's consumer-driven flow: consumers define expectations and generate contracts, while providers verify them to reveal before merge whether a change breaks a frontend or downstream
Custom fonts improve design but can slow LCP and cause CLS when loaded poorly. This guide covers the full optimization path: font-display strategies (swap, fallback, and optional), preloading critical fonts, WOFF2 subsetting, FOUT vs. FOIT, variable fonts, fallback metrics, and a practical setup that looks good and stays fast.
Media Queries respond to viewport width; Container Queries respond to the parent container's width, so a component adapts (different layouts in a narrow sidebar vs. a wide main area). This article covers the principles, the @container syntax, container-type settings, browser support, and how they reshape responsive design.
A list of links at the end of an answer does not let users verify conclusions. This article designs a traceable React citation experience through evidence data contracts, streaming placeholders, accessible interactions, and source security.
Hooks are more than useState/useEffect: custom Hooks are React's "unit of reuse." This article explains when to extract custom Hooks, how Hooks compose, dependency arrays and stale closures, testing with renderHook + act, and why not to over-abstract Hooks.
Multi-turn AI conversations need more than a single messages array. This article separates transient browser state, server-side conversation facts, generation runs, and idempotent protocols to prevent conversation mix-ups, duplicate messages, and data loss on refresh.
Splitting Context is only a prerequisite. This article focuses on cached snapshots, atomic notifications, initial server snapshots, and race consistency in useSyncExternalStore, with Profiler fixtures that cap component fanout per commit.
AI messages include code, citations, and delayed content, so ordinary fixed-height virtual lists jump when history is backfilled. This article uses stable message keys, height correction, explicit anchors, and real-browser fixtures to constrain DOM growth and scroll drift.