Web 可访问性:WCAG 指南与实践
可访问性不是"给少数人的福利",它是法律合规(ADA)、SEO 加分、产品质量。本文讲清 WCAG 的四原则(可感知/可操作/可理解/健壮)、最常见的前端 a11y 问题(对比度/焦点/alt/表单标签/ARIA 误用)、自动检查工具,以及把 a11y 当成 CI 的一部分。
Next.js、React、TypeScript、前端工程化
本专题收录 Web 开发 方向的文章和社区讨论,重点关注真实工程场景、工具选择、实践路径和风险边界。
页面会持续更新,适合作为学习路线、选型参考和技术复盘入口。
可访问性不是"给少数人的福利",它是法律合规(ADA)、SEO 加分、产品质量。本文讲清 WCAG 的四原则(可感知/可操作/可理解/健壮)、最常见的前端 a11y 问题(对比度/焦点/alt/表单标签/ARIA 误用)、自动检查工具,以及把 a11y 当成 CI 的一部分。
Server Actions 让你在组件里直接写服务端函数,前端调它像调 async function——不用写 API 路由。本文讲清 Server Actions 的工作原理、'use server' 的含义、表单提交模式(渐进增强)、revalidate 重验证、安全边界(它是公开端点!),以及和传统 API 路由的取舍。
想给 Web 用户发推送通知,不用 app 也能做到——靠 Web Push API + Service Worker + Push 服务。本文讲清 Web Push 的完整链路(订阅→服务端推送→SW 展示)、VAPID 密钥、Notification 权限与体验,以及 iOS Safari 16.4+ 也支持了。
离线草稿写进 IndexedDB 不等于可靠保存。本文用 versionchange 协议、原子结构升级、分段回填、事务性 outbox 与幂等恢复处理多标签页、崩溃和存储驱逐。
用户在亚洲、服务器在美国,延迟 300ms?CDN 缓存静态资源、Edge Functions 在边缘跑逻辑,让请求就近处理。本文讲清 CDN 的缓存机制、Edge Functions(Cloudflare Workers/Vercel Edge)、何时该把逻辑从中心迁到边缘,以及边界(边缘有限制,不是什么都该推到边缘)。
ORM 省心但可能生成烂 SQL,原生 SQL 灵活但样板多。本文客观对比 Prisma/Drizzle/Kysely/原生 SQL 各自的哲学与适用场景:类型安全、迁移、N+1、性能、学习曲线,给一份"什么项目该用哪个"的结论。
一个组件 throw 就白屏?错误边界(Error Boundary)把崩溃控制在局部。本文讲清 Error Boundary 的用法(class 组件 + getDerivedStateFromError)、哪些错误它捕获不到(事件/异步/SSR)、react-error-boundary 库,以及一套完整的前端异常处理策略(边界兜底 + 全局上报)。
密码是最大的安全漏洞——弱密码、重用、钓鱼、泄露。Passkey(WebAuthn)用设备生物识别替代密码,安全又无感。本文讲清 WebAuthn 的原理(公私钥 + 设备认证)、Passkey 注册与验证流程、浏览器/平台支持现状,以及给你的产品加 Passkey 的落地路径。
一个列表查 1 次 + N 个关联各查 1 次 = N+1 次查询,慢十倍。本文讲清 N+1 是怎么产生的(ORM 懒加载陷阱)、怎么发现(日志/ORM 的 explain)、怎么修(eager loading/include/join),以及从根本防住(ORM 默认 eager + 查询审查)。
Suspense 让"组件等数据"变得声明式——不用手动管理 loading 状态,Suspense 边界自动展示 fallback。本文讲清 Suspense 的工作原理、和 React Query/TanStack Query 的配合、流式 SSR(Server Components + Suspense),以及 Suspense 的边界在哪(不是所有异步都该包 Suspense)。
服务端推送需求一来,就纠结 SSE 还是 WebSocket?本文讲清两者的本质区别(SSE 单向/HTTP/简单,WebSocket 双向/独立协议/灵活)、各自适合的场景、代理/防火墙兼容性、连接数限制,给一份"什么场景选哪个"的明确结论。
Context 用着简单,但值一变所有消费者全重渲染——高频场景这是性能杀手。本文讲清 Context 的重渲染机制、为什么"把所有状态塞一个 Context"是反模式、怎么拆(多 Context/选择性订阅/useContextSelector)、以及什么时候该换 Zustand。