OAuth 2.0 PKCE 与 Token 旋转
SPA 和移动端用隐式流不安全,PKCE 是现代标配。本文讲清 PKCE 原理(code_verifier/code_challenge)、为什么替代 implicit flow、Access Token vs Refresh Token 的生命周期、Token 旋转与撤销,给一套生产级 OAuth 客户端实现。
#React #DevOps♥ 1610 评论
Web 开发
Next.js、React、TypeScript、前端工程化
专题
本专题收录 Web 开发 方向的文章和社区讨论，重点关注真实工程场景、工具选择、实践路径和风险边界。
页面会持续更新，适合作为学习路线、选型参考和技术复盘入口。
Web 图片优化：格式、响应式与懒加载
图片是页面最大的资源，优化图片 = 优化 LCP。本文讲清现代图片格式(WebP/AVIF vs JPEG/PNG)、响应式图片(srcset/sizes)、Next.js Image 组件、懒加载与占位、CDN 动态调整，给一套生产级图片优化方案。
#Next.js #React♥ 1640 评论
E2E 测试实战：Playwright
单测验证单元、集成测验证组合,但"用户能不能真正用"只有 E2E 能答。本文讲清 Playwright(微软出品,跨浏览器/自动等待/网络拦截/并行)的核心能力、Page Object 模式、CI 集成、以及 E2E 该测什么不该测什么。
#React #TypeScript♥ 1650 评论
React Portal：模态框、Tooltip 与层叠上下文
模态框渲染在组件树深处，会被父级的 z-index/overflow/transform 截断。Portal 把它渲染到 document.body，逃离父级限制。本文讲清 Portal 原理、模态框完整实现（Portal + 焦点陷阱 + Escape + 滚动锁定）、无障碍（aria-modal），以及 Radix Dialog 替你做好这一切。
#React #TypeScript♥ 1680 评论
TypeScript 泛型与 Utility Types 深入
泛型是 TS 最强也最容易过度使用的特性。本文讲清泛型的正确用法（约束/默认值/推断）、内置 Utility Types（Partial/Required/Pick/Omit/Record/ReturnType/Parameters/Awaited）、什么时候用泛型什么时候不用，以及"类型应该帮你而非困住你"。
#Next.js #TypeScript♥ 1700 评论
契约测试：消费者驱动 vs 提供者验证
微服务集成测代价高（要起全部服务），契约测试只验证接口约定不变。本文讲清消费者驱动契约测试(Pact)：消费者定义期望、生成契约、提供者验证，解耦前后端/服务间的"我的改动有没有破坏别人"。
#TypeScript #DevOps♥ 1720 评论
Web 字体优化:加载、渲染与 CLS
自定义字体让设计更好,但加载不当会拖慢 LCP + 导致 CLS(字体闪烁)。本文讲清字体优化全链路:font-display 策略(swap/fallback/optional)、preload 关键字体、子集化(woff2 + 仅需字符)、FOUT vs FOIT、variable fonts,给一套"字体好看又快"的方案。
#Next.js #React♥ 1740 评论
CSS Container Queries：真正基于组件的响应式
Media Query 响应的是视口宽度，Container Query 响应的是父容器宽度——这让组件真正自适应（同一组件在侧边栏窄、主区宽各显示不同布局）。本文讲清 Container Queries 的原理、@container 语法、container-type 设置、浏览器支持现状，以及它怎么改变响应式设计的思路。
#React #TypeScript♥ 1750 评论
React AI 引用界面设计：把答案标记连接到可核验原文
在回答末尾堆一串链接并不能让用户核验结论。本文从证据数据契约、流式占位、可访问交互和来源安全出发，设计真正可追溯的 React 引用体验。
#RAG #Next.js #React♥ 00 评论
React 自定义 Hooks 架构：提取、组合与测试
Hooks 不只是 useState/useEffect——自定义 Hooks 是 React 的"复用单元"。本文讲清什么时候提取自定义 Hook（重复逻辑/副作用/状态逻辑）、Hook 组合（Hook 调 Hook）、依赖与 stale closure、测试 Hooks（renderHook + act），以及"别过度抽象 Hook"。
#React #TypeScript♥ 1770 评论
React AI 对话状态契约：消息、运行与持久化如何分层
多轮 AI 对话不能只靠一个 messages 数组。本文设计浏览器临时状态、服务端会话事实、生成运行记录与幂等协议，避免串话、重复消息和刷新丢失。
#Next.js #React #TypeScript♥ 00 评论
React AI useSyncExternalStore：快照一致性与扇出回归门禁
拆分 Context 只是前置条件。本文聚焦 useSyncExternalStore 的缓存快照、原子通知和服务端首快照，并用 Profiler 夹具限制每次 commit 的组件扇出。
#AI #React #TypeScript♥ 1770 评论