React 实践：可筛选的学习记录板
这个项目实现新增学习项、完成切换、按标题搜索和只看待学。目标是把状态更新、派生列表和表单验证连起来。数据只保存在组件内存，刷新会恢复初始值；它还没有服务端、登录和持久化。 ...
前端
React 应用开发路线
这条路线以浏览器客户端应用为实践起点。先理解普通 JavaScript 和 DOM 的运行环境，再学 React 如何管理组件身份与更新。不要把一个 useEffect 当成整套数据层，也不要在不了解需求时先铺满全局状态库。 ...
TypeScript 类型与运行时契约
TypeScript 在执行前检查一部分程序约束，生成的 JavaScript 通常不保留这些类型。给接口返回值写一个类型断言，不会把不合法的 JSON 变合法。把编译期表达能力与运行时验证分开，才不会出现“检查通过却在浏览器崩溃”。 ...
Vue 的响应式、组件与副作用
Vue 根据模板读取的响应式依赖更新界面。普通 JavaScript 对象不会因为出现在 script setup 中就自动变成响应式状态；要明确哪些值由 ref、reactive 等 API 管理，哪些只是常量和纯计算。 ...
Vue 实践：响应式学习记录板
本项目与 React 记录板使用相同任务：新增、完成、搜索和只看待学。对比时关注状态如何读写、派生值如何表达、事件如何进入模型，不要只比较模板行数。项目数据在内存中，刷新后重置。 ...
Vue 应用开发路线
从 Vue Composition API 起步，重点是响应式数据如何与模板、组件边界和外部工作连接。先分清 ref、reactive、computed 和 watch 的职责，再决定是否需要状态库。 ...
Web 基础到工程质量路线
先完成页面和语言起点，再进入浏览器机制。已经会编程的读者可以用每篇练习自测，但不要只因见过名词就跳过前置知识。公共基础中的 HTTP、调试与安全会被其他方向复用。 ...
从指标到瓶颈的前端性能排查
性能优化先描述用户遇到了什么：主要内容出现太晚、点击后没有反馈，还是页面突然移动。只盯一个总分，容易优化了不影响当前问题的部分。 指标和场景对应 Core Web Vitals 目前关注 LCP、INP、CLS，分别反映主要内容加载、交互响应和视觉稳定性。当前“良好”阈值分别为 LCP 不超过 2.5 秒、INP 不超过 200 毫秒、CLS 不超过 0.1；真实用户统计还要看相应分位和访问条件。它们不是一台开发机跑一次就能得出的站点结论。 ...
键盘、焦点与无障碍交互
无障碍从普通 HTML 就开始。可点击的 div 加一条键盘监听，仍可能缺少名称、角色、焦点行为和禁用状态。优先选语义正确的原生控件，再补充无法从原生语义表达的信息。 ...
浏览器安全边界与前端防护
浏览器运行的代码和构建产物可以被用户检查。隐藏按钮、混淆 JavaScript、把密钥放在前端环境变量中，都不能建立服务端权限。访问某个资源是否被允许，必须由服务端根据可信身份和规则判断。 ...