2024 已经到来，在 Web 前端这个岗位已经工作 9 年。这里将 2023 的学习内容做一些总结，并规划一下 2024 的学习计划。

2023 技能树

2023 年的技能树如下所示，标蓝的部分是有所接触或深入的部分：

以下给出学习过程中的粗略思维导图整理：

2023 学习情况

AI 学习

方向	细分	学习内容
Open AI	ChatGPT 原理	输入输出编码（Tokenizer、Embedding）、Transformer（Self-Attention、Feed Forward）、训练策略（预训练、Finetune、Few-Shot、RLHF）
Open AI	ChatGPT 基础	Prompt Engineering 生成（提示工程）、Temperature、Tokens、Models（训练模型）、Fine-tuning（微调模型）、Completion、Embeddings

Open AI 能够提升开发者的生产力，也能快速提高学习的认知力。通过学习 ChatGPT 的原理，可以更好的了解 AI 的运行机制和具备的能力。学习 ChatGPT 的基础知识，可以更好的结合它和业务的使用场景并提升开发者工具和业务产品的智能化。当然，我们的侧重点不是去细致研究底层的 AI 模型如何实现，而是需要借助 AI 的智能化能力实现套壳的业务产品，例如：

• 阶段一：卷 AI 的 UI 形态，调用 Open AI 接口，ChatGPT 回答什么，套壳产品回答什么
• 阶段二：构建优质的 Prompt（提示工程），套壳产品卷 Prompt 的质量和分发
• 阶段三：特定领域的 Embedding 数据集向量化，构建自己的向量数据库，解决 AI 无法触及的私人数据和垂直领域问题，例如 AI 答疑小助手
• 阶段四：微调（Fine-Tuning）模型，相对于 Prompt 每次调用 Open AI 接口时需要携带大量的上下文信息并消耗大量的 Token，微调是训练模型本身，使用优质的数据对模型进行二次训练，让模型匹配对特定数据的理解，此时消耗的 Token 更少，响应的速度更快
• 阶段五：AI Agent（人工智能代理），利用阶段一到阶段四的能力组合来设计一个软件实体，它可以自主决策任务的最优执行路线。 AI Agent 可以使用不同的微调模型来处理不同的任务和功能，最终通过智能决策来完成任务执行和结果展示。例如旅游 AI 助手，告诉助手什么时间段需要去哪里旅游，它可以根据历史数据自动订机票、订酒店以及订景点门票等，甚至还可以根据旅游攻略帮你定制体验更好的旅游路线并协助你避开高峰期

对于 AI 仅仅停留在认知和简单的使用层面，没有参与到实际的业务开发中，这一块事实上是自己落后的原因，如果自己早早进入布局，或许可以在之前的扩展框架对应的 VS Code 扩展 DevOps 开发工具上进行 AI 能力的集成，从而助力扩展业务的智能化开发，希望 2024 能够让自己在这一块有所研究和产出。

除此之外，推荐大家使用 Github Copilot & GIthub Copilot Chat（VS Code 插件）来提升编码效率，它可以智能的创建代码、补全代码、优化代码、分析源码以及快速提供配置解决方案等。当然，如果你会频繁撰写开发和技术相关的文档，特别推荐使用钉钉的魔法棒功能，它可以非常智能的协助你完成文档设计（文案创作、大纲生成、语气润色、竞品分析等）。

Docker 技术

方向	细分	学习内容
Docker	基础知识	虚拟机、Linux 容器、沙箱
Docker	基础概念和命令	Images、Containers（ Image 的运行时实例）、Docker Hub
Docker	镜像制作	Dockerfile & 指令
Docker	原理解析	感性认知
K8S	感性认知	Ingress、Services、Pod、Containers

Docker 主要用于前端静态资源的运维，分为镜像制作（利用 Node.js 聚合产物并设定 Niginx 运维配置）和容器运行时的 Nginx 静态服务启动。虽然在设计的过程中研究了一下 Docker 的技术原理（虽然也学习过 Golang，对 C 语言也非常熟悉），但是感觉学了又好像没学，等后续有时间可以好好再深入研究一下。除此之外，在真正的业务设计中还涉及了 K8S 的 Ingress（转发规则）、Service 以及 Pod 等运维概念，只不过这一块在实际的业务中只停留在认知层面，没有做过真正的实践。

工作和学习提效

方向	细分	学习内容
学习 & 工作提效	快捷键	Mac 系统 & App & 终端快捷键提效（KeyCastr & Keyclu & Karabiner-Elements、Hyper Key）
学习 & 工作提效	Mac App	Rectangle、Arc、Raycast
学习 & 工作提效	终端	iTerm2、ohmyzsh、zplug、ohmyzsh 插件、powerlevel10k 主题
学习 & 工作提效	VS Code 编程	Github Copilot、GIthub Copilot Chat、IntelliCode、Tailwind CSS IntelliSense

由于受到了 AI 降维打击的刺激，决定提升一下自己的工作和学习效能，从各个快捷键、App、终端配置、AI 编程等方面对自己进行了提效升级。其中，感觉最能提效的是 Raycast，它具备了 Quicklinks、Extensions、Script Command 以及快捷键设置等诸多能力，当然个人现在用的还比较浅，如下所示：

温馨提示：Raycast 的同类型的软件包括 Alfred，尽管 Alfred 的自定义工作流 Workflow 更为强大，但是不对免费用户开放。

2024 学习计划

期望24年在服务端技术(Node.js)方向上做倾斜，更多的往全栈(Next.js)的方向去靠。

通过 2023 以及往年的技术总结，我发现个人比较感兴趣并且可以深入的技术包括以下几块：

内容	学习优先级	说明
SSR CSR & ESR	高	虽然早期使用过 Nuxt，但是基本上已经忘记了 SSR 的同构原理，说明学习的还不够深入和全面，同时对 Next.js 以及 Vercel 非常感兴趣，希望有时间可以利用 Next.js 以及相应的服务技术重新打造一个全新的博客站点
Docker 技术	高	Docker 主要用于前端静态资源的运维，分为镜像制作（利用 Node.js 聚合产物并设定 Niginx 运维配置）和容器运行时的 Nginx 静态服务启动
AI Agent	高	通过 Embeddings 嵌入技术或者 Fine-tuning 微调模型来训练个人的博客数据、聊天数据、健康数据等，打造个人的 AI 数字 IP（AI 智能体）
React 框架原理	低	React 完整的原理分析、React 新语法特性

通过 2023 年以及往年的技术栈总结可以发现，自身学习的内容越来越碎片化，越来越难形成体系化的沉淀。如果没有业务需要，学习和技术的深入只会让自身知识面接收频率越来越低，并且学习效率越来越低。

2024 年不希望自己在技术深度上继续挖掘，除非是业务和小册撰写需要，更希望在广度上能够全面发展，因此希望自己往全栈的技术和业务方向去深入，包括 SSR 的原理解析、Next.js 的使用。

2023 书签

这里将平时学习时查阅的博客、文档、电子书、PPT、视频以及 Github 仓库等进行书签汇总，并按照收藏时间进行倒序排序。如果想浏览某一项技术，建议从低到高进行浏览。通过整理年度书签，可以用于分析自己在这一年中主要学习了哪些技术。

面试

• 面试分享：两年工作经验成功面试阿里 P6 总结
• 在阿里我是如何当面试官的
• 前端面试知识点（一）
• 前端面试知识点（二）
• 面试分享：两年工作经验成功面试阿里 P6 总结
• 在阿里我是如何当面试官的（持续更新）
• 【1 月最新】前端 100 问：能搞懂 80% 的请把简历给我
• 2018 前端面试总结，看完弄懂，工资少说加 3K | 掘金技术征文
• 2019 面试系列 - 简历
• JavaScript-面试
• Javascript 面试核心考点(基础版)
• jsliang 的 2019 面试准备
• 总结了 17 年初到 18 年初百场前端面试的面试经验(含答案)
• 面试 -- 网络 HTTP
• 中高级前端大厂面试秘籍，为你保驾护航金三银四，直通大厂(上)
• (下篇)中高级前端大厂面试秘籍，寒冬中为您保驾护航，直通大厂
• 你要的 React 面试知识点，都在这了
• 大揭秘！“恐怖”的阿里一面，我究竟想问什么
• 你要的 Vue 面试题都在这里。
• 面试官：自己搭建过 vue 开发环境吗？
• 前端进阶之道
• 从面试题看 JS 事件循环与 macro micro 任务队列
• 中高级前端开发高频面试题
• 阿里前端社招面试总结
• 前端内参
• 阿里前端社招面试总结

Awesome

• awesome-svelte
• awesome-shell
• awesome-zsh-plugins
• awesome-chatgpt
• awesome-chatgpt-prompts
• Awesome-Prompt-Engineering
• awesome-actions
• awesome-wasm（WebAssembly 生态清单）
• awesome-vue
• awesome-react
• awesome-javascript
• awesome-nodejs
• awesome-css
• awesome
• awesome-awesome
• awesome-awesome-awesome
• Front-End-Develop-Guide（前端开发所使用语言的主流学习资源）
• knowledge（前端技术架构图谱）
• awesome-javascript-cn（JavaScript 资源大全中文版）
• awesome-wechat-weapp-（微信小程序开发资源汇总）
• awesome-graphql
• Awesome Redux
• awesome-github-vue
• awesome-github-wechat-weapp(微信小程序开源项目库汇总)
• awesome-nuxt
• awesome-nextjs
• awesome-ui-component-library
• awesome-react-components
• awesome-mac
• awesome-vscode
• Awesome-Design-Tools
• awesome-webpack
• awesome-gulp
• awesome-github
• awesome-npm
• awesome-chrome-devtools（Chrome DevTools 生态清单）
• Font Awesome
• awesome-resume（程序员简历例句）
• awesome-interview-questions
• awesome-webpack-cn（webpack 优秀中文文章）
• awesome-architecture（架构师技术图谱）
• awesome-books（开发者推荐阅读的书籍）
• awesome-programming-books（经典技术书籍推荐）
• awesome-bookmarks

Open AI

• Open AI
• API Reference
• openai-node
• LangChain
• 动手深度学习
• openai-cookbook
• OpenAI API 中文教程
• 用 ChatGPT 开发一个能听懂人话的命令行工具
• 如何让 ChatGPT 读懂超长保险条款？
• 我用我的微信聊天记录和 280 篇博客文章，做了我自己的数字克隆 AI
• LangChain 与大型语言模型(LLMs)应用基础教程:Prompt 模板
• LangChain 与大型语言模型(LLMs)应用基础教程:信息抽取
• 分享几本 ChatGPT 必读书籍（含 PDF 下载）

Chromium

• The Anatomy of a Frame
• 使用 RAIL 模型衡量性能
• Chromium History Versions Download
• Sandbox
• RenderingNG 架构概览
• 浏览器的工作方式
• How Chromium Displays Web Pages
• Multi-process Resource Loading
• Threading and Tasks in Chrome
• Chromium architecture overview
• Browser process - detailed architecture overview
• Blink (Rendering Engine)
• Blink-in-JavaScript
• Blink-in-JavaScript（PPT）
• Life of a Pixel
• Mojo
• Intro to Mojo & Services
• Mojo Core Embedder API
• Mojo & Servicification Performance Notes
• Network Service
• network::mojom::URLLoader 101
• Network Service in Chrome
• Life of a URLRequest
• Explore the Magic Behind Google Chrome
• How do the Render Engine and JavaScript Engine Communicate in a browser?
• Blink architecture overview
• Blink Binding V8 API
• Window 上下文创建源码
• Understanding Asynchronous JavaScript
• Introduction to web APIs
• V8 Binding Explained
• Web IDL Standard
• WebKitIDL – WebKit
• JavaScript 运行机制详解：再谈 Event Loop
• C++ std::thread Event Loop with Message Queue and Timer
• Event Loop
• Mitigating Spectre with Site Isolation in Chrome
• 适用于 Web 开发者的网站隔离功能
• 多进程架构
• Chrome/Chromium 沙箱 - 安全架构设计
• Cross-Origin Read Blocking (CORB)
• Cross-Origin Read Blocking for Web Developers
• 了解“同网站”和“同源”
• 往返缓存
• 为什么需要“跨源隔离”来实现强大的功能
• 使用 COOP 和 COEP 将网站设置为“跨源隔离”
• 关于启用跨域隔离的指南
• 跨域隔离概览
• Inside look at modern web browser (part 1)
• Inside look at modern web browser (part 2)
• Inside look at modern web browser (part 3)
• Inside look at modern web browser (part 4)
• Chromium 中文文档
• 多进程架构
• 沙箱隔离
• 站点隔离
• How Blink works
• event-loop

TypeScript

• TypeScript 教程
• Centralized Recommendations for TSConfig bases
• TypeScript
• 深入理解 TypeScript
• TypeScript 高级技巧
• TypeScript Deep Dive
• TypeScript 入门教程
• 3 Ways to Implement TypeScript Into Your Project
• TS 常见问题整理（60 多个，持续更新 ing）
• 使用 TypeScript 装饰器装饰你的代码

JavaScript

• Clean Code JavaScript
• You don’t know JS Yet 2nd Edition
• Eloquent JavaScript
• 使用 requestIdleCallback
• browsing-context
• 深入理解 JavaScript 执行上下文
• [译] 理解 JavaScript 中的执行上下文和执行栈
• JavaScript 深入之执行上下文
• JavaScript 深入之执行上下文栈
• JavaScript 深入之变量对象
• 一文搞清 Javascript 中的「上下文」
• CommonJS，AMD，CMD，ESM 模块化规范详述
• Labeled statement
• Results for js web frameworks benchmark
• highlight.js
• es-module-shims
• history
• path-to-regexp
• licia
• ECMAScript 6 入门
• ES modules: A cartoon deep-dive（中文翻译）
• Tasks, microtasks, queues and schedules（宏任务、微任务、队列）
• lodash
• JavaScript 与有限状态机
• 模块化规范之 ES Modules && CommonJS 规范
• CommonJS 和 ES6 Module 究竟有什么区别？
• CommonJS 和 ES6 Module 模块规范原理浅析
• ECMAScript 规范的中文翻译
• 前端基础漫游指南
• 前端工程师手册
• JS 内存模型
• 每周一个 npm 轮子学习之 lru-cache
• codemirror
• debug
• perfect-scrollbar
• superagent
• jQuery
• zTree
• [译] SuperAgent 中文使用文档
• InversifyJS 中文文档
• RxJS 中文
• RxJS
• Redux-observable
• Redux-observable 中文
• 使用 redux-observable 实现组件自治
• RxJS 与 Redux 结合使用（一）：打造自己的 redux-observable
• 学习 RxJS
• moroshko/rxviz: Rx Visualizer - Animated playground for Rx Observables
• RxViz - Animated playground for Rx Observables
• jaredly/rxvision: visualizer debugger for reactive streams
• staltz/rxmarbles: Interactive diagrams of Rx Observables
• RxMarbles: Interactive diagrams of Rx Observables
• 渔人和 Rxjs 的故事,这次一定教会你前端必会的 Rxjs
• [译] 看动画，学 RxJS
• RxJS in Action
• RxJS-CN/rxjs-articles-translation: RxJS 优质文章翻译
• RxJS v6 学习指南
• RxJS 学习中文资料
• 全面拥抱 Reactivity: RxJS, RSocket & Svelte
• 作为前端，你需要知道 RxJS
• canvas 实践小实例二 —— 扇形
• 深入浅出 JavaScript 异步编程
• JavaScript 异步编程_前端学习
• JavaScript 知识图谱：ECMAScript、DOM、BOM、HTML5、计算机网络
• 从浏览器多进程到 JS 单线程，JS 运行机制最全面的一次梳理
• 如何实现一个深拷贝
• Object()的方法一览
• Promise 之你看得懂的 Promise
• 深入理解 JavaScript 的类型转换
• 【JS 进阶】你真的掌握变量和类型了吗
• 记一次面试题，正则表达式(?=a)是什么意思？
• 【JS 迷你书】类型转换之拆箱操作
• 《三分钟阅读》7 个有用的 JavaScript 技巧
• 我是如何将业务代码写优雅的
• JS 中的 null 和 undefined,undefined 为啥用 void 0 代替?
• async/await 优雅的错误处理方法
• JavaScript 代码简洁之道

HTML

• 利用废弃的 html rel import 实现页面 include 功能
• 盘点 HTML 字符串转 DOM 的各种方法及细节
• Javascript Import maps
• 浏览器沙盒是什么
• 浏览器沙箱模型
• 你真的了解回流和重绘吗
• 浏览器的回流与重绘 (Reflow & Repaint)

iframe

• X-Frame-Options
• nginx 解决跨域问题嵌入第三方页面
• 终于搞懂了 Iframe （跨窗口通信）
• iframe 跨域传递 cookie
• 你不了解的 iframe

Web Component

• 深入理解 Shadow DOM v1
• 你想要了解的 Shadow DOM 都在这里
• 声明式 Shadow DOM
• 在 React 中使用 WebComponents 组件的最佳实践
• 你不知道的 Web Components - 过去和未来
• polyfills
• Web Component
• Web Components 入门实例教程

CSS

• CSS Modules 用法教程
• BEM（Class 命名规范）
• CSS（MDN web docs）
• Flex 布局教程
• Less 中文网
• Sass
• PostCSS
• SASS 用法指南
• CSS in JS 简介
• FLEXBOX FROGGY（学 Flex 的小游戏）
• CSSOM 视图模式(CSSOM View Module)相关整理（张鑫旭）
• CSS 相对定位|绝对定位(五)之 z-index 篇（张鑫旭）
• 获取元素 CSS 值之 getComputedStyle 方法熟悉(张鑫旭)
• 我对 CSS vertical-align 的一些理解与认识(张鑫旭)
• CSS 实现单行、多行文本溢出显示省略号
• 我所知道的几种 display:table-cell 的应用(张鑫旭)
• [译] 这些 CSS 命名规范将省下你大把调试时间
• 等高分栏布局小结
• css 写作建议和性能优化小结
• CSS 定位属性详解
• [译] Web 流式文字排版的现状
• 真正了解 CSS3 背景下的@font face 规则 (张鑫旭)
• Web 字体简介: TTF, OTF, WOFF, EOT & SVG

Next 全栈框架

• Next.js
• Nextjs全栈详细开发教程，完整版 重要
• Next.js 完全手册

React

• 【脚手架】从0到1搭建React18+TS4.x+Webpack5项目（一）项目初始化
• 手摸手实现 react-router
• 从路由原理出发，深入阅读理解 react-router 4.0 的源码
• 前端路由实现与 react-router 源码分析
• 「源码解析 」这一次彻底弄懂 react-router 路由原理
• 30 分钟精通 React Hooks
• react-worker-dom
• react-app-rewired（覆盖 Create React App 的 Webpack）
• customize-cra（覆盖 Create React App 的 Webpack）
• React Query（React Hook 请求库）
• swr（React Hook 请求库）
• React
• Create React App 中文文档
• React Router
• Redux
• Redux Toolkit
• React Lifecycle
• React Hooks 原理
• How to fetch data with React Hooks?
• React Hooks 完全上手指南
• React 的性能优化（一）当 PureComponent 遇上 ImmutableJS
• React 源码解析
• React 源码系列(一): 总结看源码心得及方法感受 #1
• [译] React-Redux 官方 Hooks 文档说明
• Redux Toolkit
• reduxjs/cra-template-redux: The official Redux+JS template for Create React App
• redux-toolkit-example-ts(示例代码)
• 如何管理好 10 万行代码的前端单页面应用
• React 的性能优化（一）当 PureComponent 遇上 ImmutableJS
• [译] React-Redux 官方 Hooks 文档说明
• Immutable 操作在 React 中的实践
• Redux 入门教程（一）：基本用法
• Redux 入门教程（二）：中间件与异步操作
• Redux 入门教程（三）：React-Redux 的用法
• How to fetch data with React Hooks?
• 2020 年你应该知道的 React 库
• React Hooks 究竟有多慢？
• 终于搞懂 React Hooks 了！！！！！
• 关于 Vue 和 React 的一些对比及个人思考（中）
• React 开发必须知道的 34 个技巧【近 1W 字】
• 使用 70 行代码配合 hooks 重新实现 react-redux
• 使用 React Hooks + Context 打造简版 Redux
• 2019 年了，整理了 N 个实用案例帮你快速迁移到 React Hooks
• React Hooks 详解 【近 1W 字】+ 项目实战
• React16：Hooks 总览，拥抱函数式 (这大概是最全的 React Hooks 吧)
• React hooks 实践
• 30 分钟精通 React Hooks
• Redux-thunk 快速入门
• Immutable 操作在 React 中的实践
• 使用 redux-observable 实现组件自治
• React 拾遗：从 10 种现在流行的 CSS 解决方案谈谈我的最爱 （下）
• React 拾遗：从 10 种现在流行的 CSS 解决方案谈谈我的最爱 （上）
• [译] 关于 React Router 4 的一切
• React 路由鉴权
• react-router4 基于 react-router-config 的路由拆分与按需加载
• 快速搭建你的 github pages 个人博客 —— 基于 Create-React-App 的单页面应用实践
• 从 0 到 1 快速构建基于 create-react-app 的脚手架
• 【长文慎入】一文吃透 React SSR 服务端渲染和同构原理
• 技术胖的 2019 新版 React 全家桶免费视频（84 集）
• React 组件设计实践总结 02 - 组件的组织
• React 组件设计实践总结 01 - 类型检查
• [译] 2019 React Redux 完全指南
• 掘金最污的 React16.x 图文视频教程(2 万 5 千字长文-慎入)

Vue

• 【Vue3】保姆级毫无废话的进阶到实战教程 - 01
• 尤雨溪 - 在框架设计中寻求平衡 | JSConf.Asia 2019
• vue-markdown-loader
• vitepress（静态文档生成）
• Vue.js 3 中文
• Vuex
• Vue Router
• Vue CLI
• Vue Loader
• Vue.js
• Vue 插件开发指南
• eslint-plugin-vue
• VuePress (Vue 驱动的静态网站生成器)
• 剖析 Vue.js 内部运行机制
• DMQ/MVVM(剖析 Vue 实现原理，如何实现双向绑定 mvvm)
• 深度剖析：如何实现一个 Virtual DOM 算法
• Vue.js 技术揭秘
• Vue SSR 指南
• Nuxt (Vue.js 服务端渲染)
• Vue Apollo (在 Vue.js 应用中集成 GraphQL)
• Vue I18n (国际化插件)
• Vue Test Utils （Vue.js 官方的单元测试实用工具库）
• vue-cli-plugin-i18n
• nuxt-property-decorator
• 为什么 Proxy 可以优化 vue 的数据监听机制
• Vue.js 的 computed 和 watch 是如何工作的？
• 深入理解 Vue 的 watch 实现原理及其实现方式
• vue + typescript 新项目起手式(Vue 2.x 版本)
• vue + typescript 进阶篇(Vue 2.x 版本)
• 美团点评点餐 Nuxt.js 实战(Vue 2.x 版本)
• 浅谈使用 Vue 构建前端 10w+ 代码量的单页面应用开发底层(Vue 2.x 版本)
• Vue2.0 探索之路——生命周期和钩子函数的一些理解(Vue 2.x 版本)
• vue-cli3 项目从搭建优化到 docker 部署(Vue 2.x 版本)
• 离职后才搞懂 vue 项目开发流程中的疑惑点(Vue 2.x 版本)
• Vuex 带来全新的编程体验(Vue 2.x 版本)
• vue-cli3 从搭建到优化(Vue 2.x 版本)
• 少年，撸猫吗(Vue 2.x 版本)
• 结合 vue-cli 来谈 webpack 打包优化(Vue 2.x 版本)

Svelte

• Svelte 官网
• Svelte 教程
• Virtual DOM is pure overhead
• Rethinking reactivity
• Rethinking "Rethinking Reactivity" - Svelte 5 Introduces Runes
• Introducing runes
• The Svelte Compiler Handbook（Svelte 编译原理手册）
• 看完 Svelte 纪录片才知道它为什么在国外比国内火
• 前端新宠 Svelte 带来哪些新思想？赶紧学起来！
• Svelte 的异步更新实现原理
• 新兴前端框架 Svelte 从入门到原理

HTTP

• Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests
• HTTP/1.1: Caching in HTTP
• Resource Hints
• SameSite 那些事
• 深入理解 Cookie 的 SameSite 属性
• 本地 https 环境解决方案
• 内网穿透神器-Serveo
• swr（React Hooks for Data Fetching）
• 缓存
• HTTP 缓存（附 Express 实现代码）
• 使用反向代理进行内网穿透
• 【PWA 学习与实践】(3) 让你的 WebApp 离线可用
• HTTP/2 push is tougher than I thought
• 浏览器的强缓存和协商缓存
• 生产环境浏览器 Strict MIME TYPE Checking 问题解决
• 同站 和 同源 你理解清楚了么？
• 内容安全策略（CSP）
• 计算机通识
• 跨域资源共享 CORS 详解（阮一峰）
• 浏览器缓存知识小结及应用
• GET 方法与 POST 方法的区别
• 图解：HTTP 范围请求，助力断点续传、多线程下载的核心原理
• 资源预加载 - 性能优化需知~
• 用 preload 预加载页面资源
• preload 和 prefetch
• Cookie
• 彻底明白 ip 地址，区分 localhost、127.0.0.1 和 0.0.0.0
• 前端跨域整理

Git

• Github Copilot
• 使用 git hooks 钩子实现 gitlab 的代码服务器自动更新
• ghooks
• AngularJS Git Commit Message Conventions
• A Note About Git Commit Messages
• Writing Git commit messages
• husky（Git 钩子配置工具）
• Simple Git（Node.js 的 Git 命令封装）
• Git 教程(廖雪峰)
• Your AI pair programmer
• git 如何修改已提交的 commit
• commit_msg(git 钩子文档)
• 语义化版本 2.0.0(语义化版本控制规范)
• Git submodule 简明使用指南
• git 撤销 commit 并保存之前的修改
• .gitignore 无效解决办法
• Git 钩子：自定义你的工作流
• Git 分支 - 变基
• cz-cli(cz 工具)
• cz-customizable(cz 适配器)
• @commitlint/config-conventional(cz 适配器)
• commitlint(cz 校验工具)
• commitlint-config-cz(cz 校验工具的校验规则)
• validate-commit-msg(cz 校验工具)
• conventional-changelog(cz 日志生成器)
• 如何让你的 GitHub 项目表面上更专业
• git-flow 的工作流程
• 如何使用 Issue 管理软件项目？
• Git 工作流程
• 为无线前端团队打造高效 git 工作流

NPM & Yarn

• npm 的 package.json 和 package-lock.json 更新策略
• 一文搞懂 peerDependencies
• Compare package download counts over time
• Life Cycle Scripts
• npm ci（CI / CD 依赖安装）
• npm update（依赖升级）

版本规范

• semver 2.0.0
• node-semver
• semantic-release

Node.js

• Security, Modules and Node.js
• How does Node.js work?
• nvm（Node 版本管理工具）
• lint-md（Markdown 格式校验工具）
• minimist（轻量的命令参数解析）
• zx（Google 出品的 Shebang 助力器）
• shelljs（Shell 脚本封装）
• tasklist（Windows tasklist 命令封装）
• taskkill（Windows taskkill 命令封装）
• execa（child_process 增强）
• open（打开浏览器 URL、文件和可执行文件）
• ws（WebSocket 通信）
• node-http-proxy（代理转发）
• ngrok（内网穿透 & 代理）
• download（下载提取文件）
• abort-controller（取消请求）
• portfinder（空闲端口发现器）
• node-ip（IP 地址工具）
• http-proxy-middleware（网络代理中间件）
• AnyProxy（Node.js 网络代理工具）
• decompress（文件解压缩）
• compression（文件压缩）
• form-data（表单数据流，可用于上传文件）
• node-progress（进度条打印）
• winston（日志）
• find-root（发现 package.json 所在目录层级）
• dotenv（环境变量处理）
• ejs（模板引擎）
• uid（固定长度的 id 生成器）
• parse-json（解析 JSON 携带详细的错误信息）
• node-qrcode（二维码生成器）
• cheerio（JQuery API 的服务端实现）
• normalize-package-data（规范化 package.json 元数据）
• strip-ansi（去除 ANSI 转义码）
• url-join（URL 规范化拼接）
• node-regedit（Windows 注册表）
• htmlparser2（HTML & XML 解析器）
• parse5（HTML 解析器）
• Node.js
• ts-node
• NodeJS 开发工具栈[Awesome]（开发工具箱）
• awesome-nodejs[Awesome]
• mongoose
• mongoose 中文
• ORM 实例教程
• TypeORM
• TypeORM 中文
• linkerd2
• Express
• Koa
• Egg
• Socket.io
• Node Redis
• Midway
• GraphQL
• Prisma OSS Documentation
• Apollo Client
• 阿里 Midway 正式发布 Serverless v1.0，研发提效 50%
• 浅析 Node.js 的 vm 模块以及运行不信任代码
• node-inspector（Node.js debugger based on Blink Developer Tools）
• 深入理解 Node.js 中的进程与线程
• execa
• parse-json
• gitbeaker
• node-fetch
• node-inspector
• Forcing Garbage Collection in node.js and JavaScript(强制垃圾回收)
• Mongoose the Typescript way…?
• mongoose Population 连表／关联使用
• Node.js 环境性能监控
• 使用 TypeScript 开发 Node.js
• 30 分钟理解 GraphQL 核心概念
• Open Sourcing GraphQL Middleware - A Library to Simplify Your Resolvers
• RPC vs REST vs GraphQL
• GraphQL 从入门到实战
• 手把手教你做爬虫
• 关于爬虫，就此封键盘
• PHP, Python, Node.js 哪个比较适合写爬虫？
• 简单高效的 nodejs 爬虫模型

Lint & Prettier

• TSLint in 2019
• eslint-loader
• eslint-webpack-plugin
• Why Prettier?
• Prettier vs. Linters
• eslint-plugin-jest
• eslint-plugin-tsdoc
• markdownlint
• markdownlint-cli
• markdown-it（Markdown 解析为 HTML）
• 层叠配置 (Monorepo 需要注意)
• typescript-eslint（TypeScript 的 ESLint 和 Prettier 工具集）
• eslint-config-prettier（检查格式规则配置是否存在冲突）
• lint-staged（Git 暂存区代码检查）
• ESLint(可组装的 JavaScript 和 JSX 检查工具)
• 使用 ESLint ＆ Prettier 美化 Vue 代码
• eslint prettier 的配置选项（参数）官网直译
• ESLint couldn't determine the plugin uniquely.
• Prettier(An opinionated code formatter)
• Prettier 看这一篇就行了
• Prettier 看这一篇就行了

Module Federation

• Webpack / Module Federation
• Dynamic Remotes, Webpack Module Federation
• Module Federation: streamline your microfrontends

Babel

• 体验了一把 swc 替代 babel 和 tsc
• 编译 ts 代码用 tsc 还是 babel？
• Babel
• @vue/babel-preset-app(Vue CLI3 的 Babel 插件集)
• @babel/preset-env(Babel 插件集)
• 你真的会用 Babel 吗？(全面了解 Babel)
• 再见，babel-preset-2015
• Deploying ES2015+ Code in Production Today
• ​【建议改成】读完这篇你还不懂 Babel 我给你寄口罩
• 前端编译原理浅析及应用场景(Babel、PostCSS)分析
• Why is Babel a monorepo?

构建工具

• 在 vite 中加载远程模块
• Vite 原理浅析
• Vite 原理分析
• 深入理解 Vite 核心原理
• 面向未来的前端构建工具-vite
• 基于 esbuild 的 universal bundler 设计
• 前端构建新世代，Esbuild 原来还能这么玩！
• parcel
• Rollup 打包工具的使用（超详细，超基础，附代码截图超简单）
• rollup-starter-lib
• 使用 Rollup 构建你的 Library
• 《前端领域的转译打包工具链》上篇
• 前端领域的转译打包工具链（下）：工程化闭环
• 带你入门前端工程（五）：不同构建工具的功能和优势
• 前端打包工具
• Webpack 模块引用中还有什么坑？
• swc 作者为何选择 Go 语言来实现 TypeScript 的类型检查器？
• esbuild（ES6+ 构建）
• esno（类似于 tsx 的 esbuild 增强）
• Vite（esbuild + Rollup）
• SWC（基于 Rust）
• minidev（支付宝小程序构建工具）

静态站点生成器

• dumi
• react-markdown
• react-static
• TSDoc
• JSDoc
• JSDoc 中文
• typedoc
• vuepress-plugin-typedoc
• typedoc-plugin-markdown
• Shields.io（徽章生成器）
• README Specification
• VuePress (Vue 驱动的静态网站生成器)

CI / CD

• 使用 Github Action 来做自动化
• Github Action Marketplace
• Learn YAML in five minutes!
• DingTalk Release Notify
• 大公司里怎样开发和部署前端代码？(张云龙)
• GitHub Actions
• GitHub Actions 入门教程（阮一峰）
• pm2(The Most Advanced Production Process Manager for Node.js)
• GitHub 新出的 Actions 是什么? 用他做自动测试?
• Jenkins
• jenkins 如何做到触发远程构建
• jenkins 构建触发器详解-不登录触发远程构建详解
• Jenkins 记录二：远程构建
• Jenkins+Node.js 持续集成
• nginx
• Nginx 开发从入门到精通
• 前端必会的 Nginx 入门视频教程(共 11 集)
• 前端开发者必备的 Nginx 知识
• 如何使用 docker 部署前端应用
• 前端开发如何让持续集成/持续部署(CI/CD)跑起来
• 从零搭建 docker+jenkins+node.js 自动化部署环境

测试

• JavaScript 程序测试
• JavaScript unit testing frameworks in 2022: A comparison
• javascript-testing-best-practices
• ts-jest
• COVERALLS（测试报告上传平台）
• node-coveralls
• Puppeteer（无头浏览器）
• Jest
• javascript-testing-best-practices
• JavaScript 程序测试
• Nightwatch.js
• Mocha
• Chai
• Karma
• awesome-jest[Awesome]
• 测试驱动开发（TDD）总结——原理篇
• 前端测试框架 Jest
• 刚开始接触前端测试？那就从金字塔顶端开始吧！
• ui-testing-best-practices
• 测试框架 Mocha 实例教程
• 测试覆盖（率）到底有什么用？

Chrome DevTools

• Chrome DevTools Frontend 运行原理浅析
• 深入理解 Chrome DevTools
• 如何定制 chrome 开发者工具
• 玩转 Chrome DevTools，定制自己的调试工具
• Chrome DevTools 远程调试协议分析及实战
• DevTools debugging workflow
• Chrome DevTools 实现原理与性能分析实战
• Chrome DevTools 远程调试协议分析及实战
• Chrome DevTools Protocol
• Chrome DevTools Frontend 运行原理浅析
• Chrome DevTools 中文手册
• Chrome 开发工具指南
• Chrome 开发者工具中文手册
• chii（远程调试工具）
• devtool
• devtools-protocol
• chrome-remote-interface
• awesome-chrome-devtools[Awesome]
• devtools-frontend

调试

• 揭秘浏览器远程调试技术
• VS Code - Debugger for Chrome
• 远程调试原理及端智能场景下远程调试实现方案
• 利用 ADB 协议建立 PC 与手机端本地 unix 套接字的连接
• 了解 adb 的基本原理
• ADB 通信
• adb forward 的细节（1）：原理概述
• San DevTools 技术解析(上)
• San DevTools 技术解析(中)
• San DevTools 技术解析(下)
• 移动端 WEB 真机调试全攻略
• 抖音小程序调试原理
• 云真机平台 H5 性能测试的设计与实现
• 揭秘浏览器远程调试技术
• 深入理解 Node.js 的 Inspector
• [译] 在 Chrome 开发者工具中调试 node.js
• Node 调试指南 - Inspector 协议

扩展

• 什么是微内核架构设计？
• 插件开发指南 | Vue CLI
• Chrome Extension 官方
• How to build a plugin system on the web and also sleep well at night
• 大型 Web 应用插件化架构探索

组件库

• React Flow
• Svelte Material UI
• Formliy（可拓展组件库的动态表单解决方案）
• form-render（动态表单解决方案）
• react-error-boundary（React 错误边界组件）
• ant-motion（React 动效库）
• pro-components（Ant Design Pro）
• Ant Design
• Element Plus（基于 Vue 3，面向设计师和开发者的组件库）
• Element (基于 Vue2.0 的饿了么桌面端组件库)
• Ant Design Vue
• Ant Design Pro (开箱即用的中台前端/设计解决方案)
• Antd ProComponents
• Salt UI (高效、简洁的移动端 UI 组件库)
• Ant Design Mobile 5.0
• ant-design-pro-vue (开箱即用的中台前端/设计解决方案)
• vue-antd-admin (一个开箱即用的中后台前端/设计解决方案)
• Fusion
• Muse-UI (基于 Vue 2.0 优雅的 Material Design UI 组件库)
• Vue Material
• Bootstrap
• Bootstrap Table
• Bulma

性能优化

• 前端性能优化之旅
• 使用 Proload/Prefetch 优化你的应用
• preload-prefetch-and-priorities-in-chrome
• Preload，Prefetch 和它们在 Chrome 之中的优先级
• 得物 App H5 秒开优化实战
• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• Faster page loads using server think-time with Early Hints
• 飞猪双十一会场再加速，营销域 SSR 解决方案的落地实践
• 双十一会场体验 SSR 优化 - 走向更复杂的渲染架构
• 打造高可靠与高性能的 React 同构解决方案
• 压缩 11000 条 key 减少 7.2M，飞书如何实现 i18n 前端体积优化
• 让老板虎躯一震的前端技术
• 前端优化不完全指南

工程化

• Rollup 的基本使用
• Git 中文
• Webpack 中文
• Gulp 中文
• npm 中文
• yarn 中文
• 飞冰 - 基于 React 的研发解决方案
• 深入浅出 Webpack
• webpack-chain (生成和修改 Webpack 配置信息的链式 API 集)
• CKEditor 4(Smart WYSIWYG HTML editor)
• 75 Best Node.js Command Line Apps & Utilities | FireBear[Awesome]
• Node.js CLI modules
• 入门 Webpack，看这篇就够了
• Webpack 入门指迷
• Webpack 大法之 Code Splitting(缩小打包体积)
• 彻底解决 Webpack 打包性能问题
• 让你的 Webpack 起飞—考拉会员后台 Webpack 优化实战
• import、require、export、module.exports 混合使用详解
• 前端构建秘籍
• 结合 vue-cli 来谈 webpack 打包优化
• html-webpack-plugin 使用总结
• 带你深度解锁 Webpack 系列(优化篇)
• 玩转 webpack，使你的打包速度提升 90%
• 看完这篇，面试再也不怕被问 Webpack 热更新
• webpack4 入门
• 从 0 构建自己的脚手架/CLI 知识体系（万字）
• 前端工程化实战 - 企业级 CLI 开发
• 前端工程化实战 - 可配置的模板管理
• 详解前端脚手架开发排坑全指南【前端提效必须上干货】
• Node.js+commander 开发命令行工具
• Node.js 命令行程序开发教程
• 这是看过最优秀的 Vue-cli 源码分析，绝对受益匪浅
• Vue ClI 源码探索 | Vue Learn Share
• rollup.js 中文
• gulp-typescript
• 你所需要的 npm 知识储备都在这了
• 如何 npm 发布特定文件夹作为包根目录
• Why your company shouldn’t use Git submodules
• 浅谈 ES 模块和 Webpack Tree-shaking
• Tree-Shaking 进阶之路
• Tree-Shaking 性能优化实践 - 原理篇
• Tree Shaking：从原理到实现
• 你的 Tree-Shaking 并没什么卵用
• 聊聊 package.json 文件中的 module 字段
• 热重载原理研究和探索
• 揭秘 Flutter Hot Reload（原理篇）
• Flutter 的 Hot Reload 是如何做到的
• 看完这篇，面试再也不怕被问 Webpack 热更新
• webpack 插件拾趣 (1) —— webpack-dev-server
• 打破砂锅问到底：详解 Webpack 中的 sourcemap
• package.json 中 你还不清楚的 browser，module，main 字段优先级
• peerDependencies 介绍及简析
• Module Federation
• 你所不知道的模块调试技巧 - npm link
• 关于你想知道的 package-lock.json 的一切
• [译] npm 的经济风云 —— 上半部分
• 前端工程化（5）：你所需要的 npm 知识储备都在这了
• Workspaces in Yarn
• Why you should use a single repository for all your company’s projects(多项目单仓库思考)

Monorepo

• monorepo
• Lerna 中文
• Lerna 文档
• monorepo 新浪潮 | introduce lerna（Lerna 介绍）
• Why is Babel a monorepo?
• Open Sourcing CloudFlare’s UI Framework(使用 Lerna 开源的 UI 框架设计)
• lerna 管理前端 packages 的最佳实践

监控

• 7 天打造前端性能监控系统
• 把前端监控做到极致
• 全景还原报错现场 | 应用实时监控 ARMS 上线用户行为回溯功能
• “前端+应用”两大监控利器商业化首发 ARMS 领跑 APM 市场
• 通过页面埋点做监控却不影响性能？解密 ARMS 前端监控数据上报技术内幕
• UEM“探针”技术及用户体验管理
• 有赞前端质量保障体系
• 前端代码质量-圈复杂度原理和实践
• 要进大厂？前端灰度发布必须要知道
• 从前端程序员的视角看小程序的稳定性保障

运维

• Kubernetes / Pod
• Docker 中文网
• Docker 从入门到实践
• 深入浅出 Docker 技术
• Docker 核心技术与实现原理
• Docker 入门教程

SSR

• ⚡️ 手把手带你将 CSR / SSR 应用迁移到 ESR 🚀

客户端

• Flutter 中文网
• Flutter 实战
• 国内大厂在移动端跨平台的框架接入分析
• flutter 凉了吗?
• 打破重重阻碍，Flutter 和 Web 生态如何对接？
• 简述 Chromium, CEF, Webkit, JavaScriptCore, V8, Blink
• 从用 AngularJS 开发 PC 客户端说起
• 互联网:桌面客户端框架技术选型
• 漫谈 windows 桌面客户端的 UI 框架
• 小白必看，JSBridge 初探
• 分享这半年的 Electron 应用开发和优化经验
• Electron 从零到一
• 浅谈 Native、Web App、Hybrid、RN 和 Weex 优劣
• 用 JS 开发跨平台桌面应用，从原理到实践
• Hybrid APP 架构设计思路
• 前端构造桌面级应用（QQ 音乐）
• Hybrid 开发：JsBridge - Web 和客户端的桥
• JSBridge 实战
• 高并发 IM 系统架构优化实践
• 给客户端同学的一份前端学习指南
• 2000 万日订单背后：美团外卖客户端高可用建设体系
• 指尖下的 js —— 多触式 web 前端开发之三：处理复杂手势
• H5 键盘兼容性小结
• 再学 Android 之 WebView
• web 移动端布局的那些事儿
• 移动端布局适配
• 关于移动端适配，你必须要知道的

跨端

• JavaScript Core
• Android 中 JNI 的使用：java 调用 C++ C++调用 JAVA
• OC 与 C++相互调用
• 移动端 JS 引擎哪家强？
• V8、JSCore、Hermes、QuickJS，hybrid 开发 JS 引擎怎么选
• 聊一聊桥接（JSBridge）的原理
• Android 中 JSBridge 的原理与实现
• Android JSBridge 原理与实现
• Android 混合开发之 JsBridge
• Android 多线程：手把手教你使用 HandlerThread
• JSI，V8 JS 引擎优化
• QuickJS
• Design Of V8 bindings
• Getting started with embedding V8
• JS Binding 技术基础
• JS Binding 技术进阶
• v8pp
• nbind
• rusty_v8
• J2V8
• LiquidCore
• nodejs-mobile
• emscripten
• binaryen
• Hummer
• lynx-native
• libuv

WebAssembly

• Webassembly 应用场景及其关键技术初探
• WebAssembly 生态及关键技术初探(续)
• c++项目转成 wasm 全过程
• 在 WebAssembly 中实现回调的方式
• WebAssembly 在 MOSN 中的探索与实践
• 深入 WebAssembly 之解释器实现篇
• 通过 WebAssembly 使用异步 Web API
• WebAssembly C++ 阻塞调用 JS 异步函数
• 即时通讯（IM）开源项目 OpenIM 对 WebAssembly 支持，提升 web 端体验
• wasm3
• wasmer
• wasmtime
• WAVM
• wabt
• wasm-micro-runtime
• wasm-c-api（WebAssembly C++ 封装）
• WebAssembly Binding

微前端

• Micro Frontends: Building a modern webapp with multiple teams
• 一起探討 Micro Frontends 的世界
• 加载第三方 JS 的各种姿势
• 让 iframe 焕发新生
• 极致的微前端方案_无界的源码剖析
• 一文读懂微前端架构
• 微前端架构的几种技术选型
• 字节跳动是如何落地微前端的
• 微前端是否值得开发者采用？
• 微前端如何落地？
• 微前端的核心价值
• 将微前端做到极致-无界微前端方案
• 将微前端做到极致-无界微前端方案
• 如何在大型应用中架构设计微前端方案
• 微服务架构设计模式
• Why Not Iframe
• 沙箱逃逸
• Events not registered inside shadow dom
• 基于 iframe 的全新微前端方案
• 这种微前端设计思维听说过吗？
• 如何在大型应用中架构设计微前端方案
• [RFC]微前端样式隔离方案
• icestark
• import-html-entry（HTML Entry）
• single-spa
• single-spa-login-example-with-npm-packages
• micro-app
• micro-frontends
• micro-frontends
• proposal-shadowrealm（隔离提案）
• SES
• Endo (还在开发)
• LavaMoat（安全沙箱）
• Secure Modular Runtimes
• Security, Modules and Node.js
• Import Maps（导入映射）隔离提案
• Jailed — flexible JS sandbox（浏览器和 Node.js 沙箱库）
• 微前端的核心价值
• Thinking in Microfrontend (微前端的那些事儿)
• Micro Frontends
• qiankun
• single-spa
• 可能是你见过最完善的微前端解决方案
• 探索微前端的场景极限
• 微前端入门
• 了解什么是微前端
• [译] 微前端

Rust

• The Rust Programming Language
• Rust by Example
• The Rust Edition Guide
• The Rust Edition Guide
• The rustc book
• The rustdoc book
• Command line apps in Rust
• Rust and WebAssembly
• Rust error codes index
• Rust Is The Future of JavaScript Infrastructure
• TOML
• cargo
• rust-clippy
• Docs.rs
• Ray Tracing in One Weekend
• Yew
• Rust
• The Rust community’s crate registry
• Rust 程序设计语言(简体中文版)
• Rust by Example
• Command line apps in Rust
• rustfmt

低代码

• JSON Schema
• 面向复杂场景的表单解决方案
• 第三届搞搭建|洛尘 - 如何设计实现 PC 站点搭建系统 - Schema
• 第三期 |《早早聊搞搭建》搞过搭建的我收获了什么？（上篇）
• 第三期 |《早早聊搞搭建》搞过搭建的我收获了什么？（下篇）
• React 无门槛实现拖拽布局、表单设计器
• 格式校验利器：JSON Schema 简介
• JSON Schema 与表单验证
• json-schema 可视化编辑器发布了

IDE

• vscode-extension-samples
• VS Code 插件中文开发文档
• OpenSumi

风格指南

• JSDoc 中文
• JSDoc 中文
• TypeDoc
• Google JavaScript 代码风格指南
• JavaScript 代码简洁之道
• 前端团队代码评审 CheckList 清单

编程指南

• 函数式编程指北
• 可伸缩的同构 Javascript 代码
• 界面之下：还原真实的 MV* 模式
• 函数式编程初探
• 函数式编程入门教程
• Pointfree 编程风格指南
• 简明 JavaScript 函数式编程——入门篇
• 函数式编程，真香
• 这一次，教你从零开始写一个 IoC 容器
• 浅谈 IOC--说清楚 IOC 是什么
• IoC 和 DI 的基本概念及 InversifyJS 入门
• Java SPI 机制详解
• InversifyJS
• InversifyJS/ecosystem.md
• 如何基于 TypeScript 实现控制反转
• Reflect Metadata
• reflect-metadata
• Reflect
• Decorators for ES6 classes
• 编程范式（Programming Paradigm）
• What is the precise definition of programming paradigm?
• 主要的编程范例
• 再谈编程范式—程序语言背后的思想
• 面向接口编程详解（一）
• 那些年我们错过的响应式编程
• 响应式编程的实践
• 什么是响应式编程（Reactive Programming）
• 函数式编程 - 实现响应式框架
• Reactive 响应式/反应式编程
• 响应式编程到底是什么？
• 响应式编程总览
• 面向 Model 编程的前端架构设计
• Understanding JavaServer Pages Model 2 architecture
• GUI Architectures
• javascript 设计模式系列

解决方案

• 迈入现代 Web 开发（GMTC 2021 演讲《字节跳动的现代 Web 开发实践》全文）
• 漫画：什么是中台？
• IaaS，PaaS，SaaS 的区别
• 中台是什么，到底要解决什么问题？
• MicroSoft Power Platform
• 领域驱动设计在互联网业务开发中的实践
• DDD 模式从天书到实践
• 微服务架构入门
• 微服务简介
• 微服务下使用 GraphQL 构建 BFF
• 大前端架构思考与选择
• 支撑日活百万用户的高并发系统，应该如何设计其数据库架构？【石杉的架构笔记】
• Serverless 掀起新的前端技术变革
• 云计算的三种服务模式：IaaS，PaaS 和 SaaS
• 「真 ® 全栈之路」Web 前端开发的后端指南

编译器相关

• acorn
• csstree
• astexplorer
• 前端编译原理浅析及应用场景(Babel、PostCSS)分析
• ANTLR 4 简明教程
• ANTLR
• MiniDecaf 编译实验
• antlr4
• grammars-v4
• antlr4ts
• riscv-pk
• minidecaf
• homebrew-riscv
• ANTLR：在浏览器中玩语法解析
• Antlr4 简介
• antlr4-demo
• Antlr4 简易快速入门
• Antlr4 前端应用与实践
• ANTLR：在浏览器中玩语法解析

Mac App

• Arc（提效浏览器）
• KeyCue（快速显示 App 的所有快捷键）
• keycastr（按键提示）
• Rectangle（窗口分屏工具）
• Karabiner-Elements（键盘映射）
• Keyboard Maestro（超级强大的键盘提效工具）
• XMind（思维导图）
• iHosts（域名代理）
• lightproxy（系统代理）
• ClashX（科学上网）
• whistle（抓包调试）
• Raycast（工作流）
• Magnet（窗口分屏）
• Alfred（工作流）
• dash
• uTools
• WoX

Chrome 插件

• Json Formatter
• React Developer Tools
• XSwitch（请求代理工具）
• Google 翻译
• Header Editor（请求头携带处理）
• Vue.js devtools
• Octotree

VS Code 插件

• Auto Rename Tag
• Code Spell Checker（单词拼写错误检查）
• Code Time
• Docker
• Document This（JS Doc 自动生成）
• GitHub Copilot（AI 代码生成）
• GitHub Copilot Chat
• GitLens — Git supercharged
• IntelliCode
• Jest
• Pretty TypeScript Errors（格式 TypeScript 错误）
• Search node_modules（快速搜索 NPM 库包）
• Svelte for VS Code
• Tailwind CSS IntelliSense
• Vetur
• open in browser
• markdownlint
• GitHub Actions
• ESLint
• Prettier
• Vuetur

终端

• Z shell
• zsh-z
• autojump
• zsh-autosuggestions
• zsh-completions
• zsh-syntax-highlighting
• ohmyzsh - Themes
• zplug
• Fish Shell
• POSIX Shell
• Shebang
• ngrok（内网穿透）
• mkcert
• hyper
• warp
• alacritty
• tabby
• Rio
• iTerm2-Color-Schemes
• Homebrew
• sindresorhus/emoj: Find relevant emoji from text on the command-line
• oh-my-zsh 让终端好用到飞起~
• 简明 VIM 练级攻略
• 从前端开发攻城狮的角度打造更好用的 Mac OS
• bash(1) - Linux man page
• iterm2
• ohmyzsh
• powerlevel10k
• 这篇 iTerm2 + Oh My Zsh 教程手把手让你成为这条街最靓的仔

总结

• State of JavaScript 2022
• 2021 JavaScript Rising Stars
• State of JS 2020
• State of JS 2021
• 16 年毕业的前端 er 在杭州求职 ing
• 我在淘宝做前端的这三年 — 第一年
• 我在淘宝做前端的这三年 — 第二年
• 我在淘宝做前端的这三年 — 第三年
• 阿里前端社招面试总结一位前端 2018 绝地求生记
• 今天聊：你晋升失败的原因是什么
• 如何成为公司独当一面的工程师
• 一名合格的程序员应该是什么样子
• 25 岁，毕业写前端的这三年
• 第二届搞基建|堂主 - 如何推动前端团队的基础设施建设
• 前端 API 层架构，也许你做得还不够
• if 我是前端 Leader，谈谈前端框架体系建设
• 有赞开源项目最佳实践
• 技术栈：小菜前端的技术栈是如何规划和演进的
• 滴滴后市场前端技术体系
• 大型项目前端架构浅谈（8000 字原创）
• 前端生产方式：过去 10 年回顾和未来 10 年展望
• 2019 年前端大事件回顾：流年笑掷，未来可期
• 一套比较完整的前端技术选型，需要规整哪些东西，你知道不？
• 前端技术全景展望
• 前端技术体系大局观
• 精读《前端未来展望》
• 阿里前端委员会主席圆心：未来前端的机会在哪里？
• 哪些技术会决定前端开发者的未来发展？