mqyqingfeng/Blog

冴羽的博客

关于冴羽

• 博客：https://yayujs.com/
• 社群：“低调务实优秀中国好青年”前端社群
• 成长：社群茶话会、我的茶话会、微信读书
• 翻译：TypeScript 中文文档、Svelte 中文文档、Solid 中文文档
• 小册：《Next.js 开发指南》、《Svelte 开发指南》、《Astro 开发指南》
• 专栏：掘金、思否、语雀、公众号：冴羽（#yayujs）
• 星球：冴羽·前端开发者的破局之路，8 大专栏，10 年经验总结、100 篇深度长文，70W 字原创内容

公众号

知识星球：冴羽 · 前端开发者的破局之路

最新活动（倒序）

1. 从副业五位数到独立创业，本周五晚 8 点我们邀请了一人公司掌舵人流年为大家带来一场……
2. 这个活动我们办了 4 年了!

我的思考

1. 我一直想搞套自动化创作工作流，结果……

技术单篇

1. 10 个被严重低估的 JS 特性，直接少写 500 行代码
2. JavaScript 异步循环踩坑指南
3. 为什么在 JavaScript 中 NaN !== NaN？背后藏着 40 年的技术故事
4. 从 useState 到 URLState：为什么大佬们都在删状态管理代码？
5. 涨见识了，Error.cause 让 JavaScript 错误调试更轻松
6. 前端性能革命：200 行 JavaScript 代码实现 Streaming JSON
7. 2025 年最火的前端项目出炉，No.1 易主！
8. CSS 新特性！瀑布流布局的终极解决方案
9. JavaScript Date 语法要过时了！以后用这个替代！]
10. 2026 年 Web 前端开发的 8 个趋势！
11. 2026 年前端必须掌握的 4 个 CSS 新特性！
12. 2025 年 HTML 年度调查报告公布！好多不知道！
13. 2025 年 HTML 年度调查报告亮点速览！
14. 现代 CSS 颜色使用指南
15. 现代 CSS 颜色使用指南进阶篇
16. 20 周年之际！jQuery 4.0 正式发布！轻装上阵
17. 2025 年 CSS 年度调查报告亮点速览
18. 回首 jQuery 20 年：从辉煌到没落
19. 微软发布了 2026 年 AI 发展的 7 个趋势
20. 1 分钟 CSS 小技巧让你的 UI 看起来贵 10 倍
21. Vercel 团队 10 年 React 性能优化经验：10 大核心策略让性能提升 300%
22. Flexbox水太深，你把持不住
23. 2026 年的 Node.js 已经不是那个你认识的 Node.js 了
24. 我没想到 CSS if 函数这么强
25. 2026 年 JavaScript 框架 3 大趋势
26. 100s 带你了解 Bun 为什么这么火
27. 写给自学前端同学的编程法则
28. 2026 年前端开发工程师应该学什么？
29. 来自顶级大佬 TypeScript 之父的 7 个启示
30. AI 时代前端开发不变的 3 个原则
31. 资深前端都在用的 9 个调试偏方
32. 前端开发者的迷茫，其实是认知跃迁的前夜
33. 在浏览器控制台调试的 6 个秘密技巧
34. 先收藏！3000 个网站设计案例供你参考！
35. 等等，浏览器竟然有这功能？！10 个被低估的 Web API
36. 请愿书：Node.js 核心代码不应该包含 AI 代码！
37. 2026 年的 JavaScript 已经不是你认识的 JavaScript 了
38. 最大的 React 性能杀手不就是你？
39. 一个 70 行的文件，6 万 Star：Karpathy 的 AI 编程守则
40. 写了 10 年代码，我才发现最该学的其实是…
41. AI 需要学，你更需要学的 56 条软件工程定律
42. 3 招让你的 Shadcn 出海应用性能提升 40 倍
43. 超越Vibe Coding —— AI 辅助编程指南
44. 快速夯实 JavaScrilpt 基础的 33 个概念

前端周报

1. 前端周报：TypeScript 7.0 重写、Vercel 安全事件、第二次 API 开放浪潮
2. 前端周报：Rolldown 1.0 正式发布、TanStack 遭遇史诗级供应链攻击、Bun 全面迁移至 Rust

Nano Banana Pro 系列

1. 6 个白嫖 Nano Banana Pro 的网站
2. 一次找齐！1000 个 Nano Banana Pro 提示词
3. Nano Banana Pro 很强，但你要学会写提示词才能为所欲为
4. 10 个 Nano Banana Pro 专业级生图技巧
5. 疯传的 Nano Banana Pro 像素级拆解提示词
6. 不知道怎么写 Nano Banana Pro 提示词？分享你一个结构化示例，复刻任意图片
7. 太好看了！3 个动漫变真人 Nano Banana Pro 提示词
8. Nano Banana Pro 零基础快速上手

Astro 系列

第 3 本小册（21 篇）

1. 《Astro 实战指南》

Svelte 系列

翻译

1. 翻译并搭建了中文站点：Svelte 中文文档

第 2 本小册（44 篇）

1. 《Svelte 开发指南》

Solid.js 系列

翻译

1. 翻译并搭建了中文站点： Solid.js 中文文档

专栏

1. 《这个比 React 更 react 的框架 —— Solid.js 最新中文文档来了！》

Next.js 系列

第 1 本小册（82 篇）

1. 《Next.js 开发指南》

专栏

1. 理解 Next.js 的 CSR、SSR、SSG、ISR、RSC、SPA、Streaming SSR 等概念
2. Next.js 写 Server Actions 的利器 —— next-safe-action
3. Next.js Server Actions 如何进行错误处理？
4. Next.js 写什么 useState，放 URL 里！
5. 分享一个好用的 AI 聚合平台，快速接入国内外主流 AI 模型
6. Next.js 如何实现导航时的过渡动画？（使用 Framer Motion）
7. Next.js 如何处理表单？（TS + Tailwind CSS + Shadcn UI + RHF + Zod + useOptimistic）
8. Next.js 项目写 Tailwind CSS 基本都会遇到的两个问题
9. React 19 新 hook —— useActionState 与 Next.js Server Actions 绝佳搭配
10. Next.js 极简实现 Authentication
11. Next.js 实现下载 m3u8 视频
12. Next.js 项目接入 AI 的利器 —— Vercel AI SDK
13. Next.js v15 要来了，有哪些更新？附升级指南
14. Next.js v14 如何实现 SSE、接入 ChatGPT Stream?
15. Next.js App Router + Socket.IO 实现简易聊天室
16. Next.js 跨域问题的各种解法
17. Next.js 常见错误 Hydration Failed 该如何解决？
18. 使用 Next.js App Router 常犯的 10 个错误
19. Next.js v14 的 cookies()、header() 函数实现原理 —— AsyncLocalStorage
20. Next.js v14 报 document is not defined 这种错怎么办？基本都会遇到，深入解析，收藏备用
21. Next.js v14 如何为多个根布局自定义不同的 404 页面？竟然还有些麻烦！欢迎探讨
22. （技巧）当 Next.js 遇到频繁重复的数据库操作时，记住使用 React 的 cache 函数
23. Next.js v14 实现乐观更新，面向未来的 UI 更新方式，你可以不去做，但你不应该不了解
24. 如何用 Next.js v14 实现一个 Streaming 接口？
25. Next.js v14 的模板（template.js）到底有啥用？

React 系列

1. React 之元素与组件的区别
2. React 之 Refs 的使用和 forwardRef 的源码解读
3. React 之 Context 的变迁与背后实现
4. React 之 Race Condition
5. React 之 Suspense
6. React 之从视觉暂留到 FPS、刷新率再到显卡、垂直同步再到16ms的故事
7. React 之 requestAnimationFrame 执行机制探索
8. React 之 requestIdleCallback 来了解一下
9. React 之从 requestIdleCallback 到时间切片
10. React 之最小堆（min heap）
11. React 之如何调试源码
12. React 之 Scheduler 源码解读（上）
13. React 之 Scheduler 源码解读（下）
14. React 之 Scheduler 源码中的三个小知识点，看看你知不知道？
15. 300 行代码实现 React 的调度器 Scheduler

冴羽答读者问

1. 30 岁了， 现在开始努力，晚吗？
2. 何时能够像你一样优秀？
3. 怎么才能像你一样写文章如喝水？
4. 怎么才能像你一样长到180？
5. 冴羽哥哥 额爱你
6. 啦啦啦啦啦啦
7. 除代码外，就没别的优先级很高的爱好了吗？
8. 钱和成长，哪个更重要？
9. 悄悄过来蹭个回答
10. 怎么才能不焦虑？
11. 功利性学习的心态，你是否也会有？
12. 人生低谷时，如何快速调整、重回正轨？
13. 人生的意义是什么？
14. 你是怎么理解知行合一的？
15. 如何快速找到一个聊得来的人生伴侣？
16. 怎么平衡工作与生活？
17. 如果有机会，你会选择脱产学习深造吗？
18. 如何在工作中打造影响力，带动同事？
19. 如何学习更有计划性、提升更稳更快？
20. 过程比结果重要吗？
21. 冴羽，你为什么写起了鸡汤？

TypeScript 系列

翻译

1. 翻译并搭建了中文站点：TypeScript 中文文档

专栏

1. TypeScript之基础入门
2. TypeScript之常见类型（上）
3. TypeScript之常见类型（下）
4. TypeScript之类型收窄
5. TypeScript之函数
6. TypeScript之对象类型
7. TypeScript之泛型
8. TypeScript之Keyof 操作符
9. TypeScript之Typeof 操作符
10. TypeScript之索引访问类型
11. TypeScript之条件类型
12. TypeScript之映射类型
13. TypeScript之模板字面量类型
14. TypeScript之类（上）
15. TypeScript之类（下）
16. TypeScript之模块

博客搭建

1. 一篇带你用 VuePress + GitHub Pages 搭建博客
2. 一篇教你代码同步 GitHub 和 Gitee
3. 还不会用 GitHub Actions ？看看这篇
4. Gitee 如何自动部署 Pages？还是用 GitHub Actions!
5. 一份前端够用的 Linux 命令
6. 一份简单够用的 Nginx Location 配置讲解
7. 一篇教你博客如何部署到自己的服务器
8. 一篇域名从购买到备案到解析的详细教程
9. VuePress 博客优化之 last updated 最后更新时间如何设置
10. VuePress 博客优化之添加数据统计功能
11. VuePress 博客优化之开启 HTTPS
12. VuePress 博客优化之开启 Gzip 压缩
13. 从零实现一个 VuePress 插件
14. VuePress 博客优化之拓展 Markdown 语法
15. markdown-it 原理解析
16. markdown-it 插件如何写（一）
17. markdown-it 插件如何写（二）
18. markdown-it 插件如何写（三）
19. 有的时候我觉得我不会 Markdown
20. VuePress 博客优化之中文锚点跳转问题
21. 搭建 VuePress 博客，你可能会用到的一些插件
22. VuePress 博客如何开启本地 HTTPS 访问
23. VuePress 博客优化之兼容 PWA
24. VuePress 博客优化之开启 Algolia 全文搜索
25. VuePress 博客优化之增加 Valine 评论功能
26. VuePress 博客优化之增加 Vssue 评论功能
27. VuePress 博客之 SEO 优化（一）sitemap 与搜索引擎收录
28. VuePress 博客之 SEO 优化（二）重定向
29. VuePress 博客之 SEO 优化（三）标题、链接优化
30. VuePress 博客之 SEO 优化（四） Open Graph protocol
31. VuePress 博客之 SEO 优化（五）添加 JSON-LD 数据
32. VuePress 博客之 SEO 优化（六）站长工具
33. 搭建 VuePress 站点必做的 10 个优化
34. VuePress 博客搭建系列 33 篇正式完结！

一些单篇

1. 浏览器系列之 Cookie 和 SameSite 属性
2. 聊聊 npm 的语义化版本（Semver）

面试系列

1. 淘系前端校招负责人元彦直播答疑文字实录
2. 业务前端的困境
3. 前端，社招，面淘宝，指南
4. 前端，校招，面淘宝，指南

深入系列

1. JavaScript深入之从原型到原型链
2. JavaScript深入之词法作用域和动态作用域
3. JavaScript深入之执行上下文栈
4. JavaScript深入之变量对象
5. JavaScript深入之作用域链
6. JavaScript深入之从ECMAScript规范解读this
7. JavaScript深入之执行上下文
8. JavaScript深入之闭包
9. JavaScript深入之参数按值传递
10. JavaScript深入之call和apply的模拟实现
11. JavaScript深入之bind的模拟实现
12. JavaScript深入之new的模拟实现
13. JavaScript深入之类数组对象与arguments
14. JavaScript深入之创建对象的多种方式以及优缺点
15. JavaScript深入之继承的多种方式以及优缺点
16. JavaScript深入系列15篇正式完结！
17. JavaScript深入之浮点数精度
18. JavaScript深入之头疼的类型转换(上)
19. JavaScript深入之头疼的类型转换(下)

专题系列

1. JavaScript专题之跟着underscore学防抖
2. JavaScript专题之跟着underscore学节流
3. JavaScript专题之数组去重
4. JavaScript专题之类型判断(上)
5. JavaScript专题之类型判断(下)
6. JavaScript专题之深浅拷贝
7. JavaScript专题之从零实现jQuery的extend
8. JavaScript专题之如何求数组的最大值和最小值
9. JavaScript专题之数组扁平化
10. JavaScript专题之学underscore在数组中查找指定元素
11. JavaScript专题之jQuery通用遍历方法each的实现
12. JavaScript专题之如何判断两个对象相等
13. JavaScript专题之函数柯里化
14. JavaScript专题之偏函数
15. JavaScript专题之惰性函数
16. JavaScript专题之函数组合
17. JavaScript专题之函数记忆
18. JavaScript专题之递归
19. JavaScript专题之乱序
20. JavaScript专题之解读 v8 排序源码
21. JavaScript专题系列20篇正式完结！
22. JavaScript专题之花式表示26个字母

underscore 系列

1. underscore 系列之如何写自己的 underscore
2. underscore 系列之链式调用
3. underscore 系列之内部函数 cb 和 optimizeCb
4. underscore 系列之内部函数 restArgs
5. underscore 系列之防冲突与 Utility Functions
6. underscore 系列之实现一个模板引擎(上)
7. underscore 系列之实现一个模板引擎(下)
8. underscore 系列之字符实体与 _.escape
9. underscore 的源码该如何阅读？

ES6 系列

1. ES6 系列之 let 和 const
2. ES6 系列之模板字符串
3. ES6 系列之箭头函数
4. ES6 系列之模拟实现 Symbol 类型
5. ES6 系列之迭代器与 for of
6. ES6 系列之模拟实现一个 Set 数据结构
7. ES6 系列之 WeakMap
8. ES6 系列之我们来聊聊 Promise
9. ES6 系列之 Generator 的自动执行
10. ES6 系列之我们来聊聊 Async
11. ES6 系列之异步处理实战
12. ES6 系列之 Babel 将 Generator 编译成了什么样子
13. ES6 系列之 Babel 将 Async 编译成了什么样子
14. ES6 系列之 Babel 是如何编译 Class 的(上)
15. ES6 系列之 Babel 是如何编译 Class 的(下)
16. ES6 系列之 defineProperty 与 proxy
17. ES6 系列之模块加载方案
18. ES6 系列之我们来聊聊装饰器
19. ES6 系列之私有变量的实现
20. ES6 完全使用手册

勘误及提问

如果有疑问或者发现错误，可以在相应的 issues 进行提问或勘误。

如果喜欢或者有所启发，欢迎 star，对作者也是一种鼓励。

License

所有文章采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行许可。