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.
Functional tests do not catch broken layouts, changed colors, or incorrect font sizes; only visual regression testing can. This article explains VRT principles, screenshot and pixel diffs, Playwright, Chromatic, Percy, threshold tuning, CI integration, and how to prevent VRT from becoming a noise generator.
Network timeouts, double-clicks, and auto-retries can replay the same request many times. Idempotency ensures an operation run N times yields consistent results. Covers the essence (GET naturally idempotent vs POST not), implementation (Idempotency Key + dedup table), idempotency for payments and ordering, and concurrency coordination.
Your GraphQL schema is the API contract, and designing it well matters more than clever resolvers. This article covers type-first design, descriptions, Connection pagination, enums vs. strings, DataLoader for N+1, safe schema evolution and deprecation, and when GraphQL is or is not the right choice.
Refs are more than "references to the DOM". In component libraries, they shape the API experience. Learn useRef, forwardRef, useImperativeHandle, callback refs, and React 19's ref-as-prop model.
Dark mode isn't simply inverting colors—you have to handle system-preference following, manual switching, persistence, flash (FOUC), and image/icon adaptation. This article covers the prefers-color-scheme media query, class-switching strategy, localStorage persistence, anti-flash scripts, and a CSS-variable theme system, delivering a complete dark-mode
Users see a blank screen but you do not know about it. Sentry can catch errors before users report them. Learn frontend error tracking: Sentry SDK setup, Error Boundaries, source map uploads for production source lines, release tracking, performance monitoring, and privacy redaction.
A successful Service Worker install does not mean it can immediately take over old pages; `skipWaiting` can also make legacy clients read caches built for a new protocol. This article controls activation with a complete release manifest, client handshakes, and generational cache cleanup.
a11y does not have to rely on manual testing alone. This guide explains a four-layer workflow: linting with eslint-plugin-jsx-a11y, automated scans with axe-core and Lighthouse, E2E integration with @axe-core/playwright, manual testing with VoiceOver/NVDA, and CI enforcement.
Web Push lets your site send app-like notifications even when the user has no page open. This article explains the three-part stack (VAPID keys + Push API + Service Worker), the subscribe/send/receive flow, permission-request UX, and why delivery works when the browser is not open.
Batching by frame can only reduce the number of commits; it cannot reduce the Markdown work in each commit. This article uses sealed blocks, deferred enrichment, and deterministic replay to constrain parsing cost and final semantics.
Traditional SSR waits for all data before sending HTML, so a slow API holds back the entire page. Streaming SSR renders and sends incrementally, while Suspense shows loading first and streams in data later. Learn the mechanics, Suspense's SSR role, Next.js App Router streaming, selective hydration, and unblocked LCP.
Keyword search cannot handle vague questions or synonyms; semantic search fills the gap. This guide uses Next.js and pgvector to add complete semantic search to a content site, covering indexing, queries, hybrid retrieval, frontend highlighting, and incremental updates in a production-ready design.