我的 Web 前端开发知识体系 （2022）

---

写在前面

Roadmap 资源和技术趋势

• JavaScript Rising Stars (opens new window)
• Frontend Developer Roadmap (opens new window)
• State Of JS (opens new window)
• State Of CSS (opens new window)
• Web Development In 2022 - A Practical Guide (opens new window)
• Programming & Web Development Crash Courses - Traversy Media (opens new window)

我的索引

• 装了啥
• 我都从哪学习
• 看了啥
• 学习技巧
• 英语

基本开发环境

• Mac
• Chrome
• VS Code

Web 前端

• 硬核前端（劝退篇）

前端技术基础

• HTML
• CSS
• JavaScript
• TypeScript
• Node.js

JavaScript

• JavaScript 学习指南 *
• JavaScript 简介
• 运行 JavaScript 代码的十几种方式
• JavaScript 进阶指南 *
• 语法糖、操作符、关键字、特性
• 前端模块化
• 正则表达式 学习指南
• JS Foundation *

npm 和工具

• npm
• 用 Proxy 进一步提高 npm 安装速度
• 使用 verdaccio 搭建私有 npm 仓库

React/脚手架

• React
• Vite
• Next.js

规范化

• ES Lint
• Prettier
• tsconfig.json
• Husky

状态管理工具

• Recoil.js
• Mobx
• RxJS
• Redux

CSS 工具

• Tailwind / Twind
• @emotion/css

测试

• Playwright
• Jest
• testing-library
• Cypress

部署

• Github
• Vercel

其他

计算机科学

• 计算机科学
• 函数式编程
• 数据结构/算法
• 设计模式

实用工具

• Git
• Markdown
• 终端
• 打造趁手的终端
• Python

杂谈

• 游戏环境研究笔记（2022-01）
• 用快捷键控制视频播放
• 代码行数统计工具小测
• Ubuntu 服务器基本防护
• 如何清洁机械键盘
• 关于学习指南系列
• 杂谈：你可学点好吧
• 杂谈：我们为什么需要读书和学习
• 关于学习的鸡汤

你可以看什么大佬

• Anthony Fu (opens new window)
• EGOIST (opens new window)
• Sindre Sorhus (opens new window)

（Phodal 写的系列文章）

• 黄峰达（Phodal Huang） 是谁 (opens new window)

• Phodal's Idea 实战指南 (opens new window)
• GitHub 漫游指南 (opens new window)
• Growth - an app to help you Be Awesome Developer (opens new window)
• Growth: 全栈增长工程师指南 (opens new window)
• Growth: 全栈增长工程师实战 (opens new window)
• RePractise (opens new window)
• 我的职业是前端工程师 (opens new window)
• Serverless 应用开发指南 (opens new window)
• 写给软件工程师看的硬件编程指南 (opens new window)
• Thinking in Microfrontend (微前端的那些事儿) (opens new window)
• 系统重构与迁移指南 (opens new window)
• Developer 进阶书单 (opens new window)