为了成为更高级的前端工程师，我建立了这个仓库，用来记录自己的学习历程、主题学习清单及日常不严谨的思考。
这份清单会不断地变长，每完成一项，离最终的目标就会更进一步，相信大家都能有收获。
祝我们好运。
这个世上不存在奇迹两个字，如果存在的话，也只是努力的别名。
这是为了提升自己的技术水平，从而找到一个理想的工作所指定的学习计划，内容历时数月。
- 一个在杭州工作了三年有余的前端工程师
- 一个在杭州生活了七年有余的理想主义者
- 生命不息，折腾不止
- 使用 icon 进行分类，表示了解、掌握、熟练
-
Javascript
- ES6+
- Typescript
-
Reactjs
- Nextjs
- Gatsbyjs
- Umijs
- Taro
- react-native
-
组件库
- Antd
-
状态管理
- redux
- dva
- recoil
-
样式组织
- 预处理器
- CSS Module
- css next
- CSS IN JS
-
http
- fetch
- axios
- useRequest
- react-query
-
服务端
- Nodejs
- Nginx
- pm2
- docker
- Jenkins
-
Tools
- Storybook
- Eslint
- Prettier
- Vscode
- Iterm2 + oh my zsh
- Yapi
以下列出了正在维护的仓库、正在学习的主题或项目。
- front-end-deep 本仓库。
- simulate-jira-board 仿Jira项目管理系统，学习React + react hooks + Typescript 的最佳实践。
- algorithms-train 这个仓库主要是为了记录数据结构与算法的学习，以及方便定期的回顾。主要包含两部分，一部分是数据结构的代码实现(src/data-structures)，另一部分是leetcode算法题的实现(src/algorithms)，有的题目会有几种实现方式。
- yw-blog 基于Docusaurus 2构建的个人博客。
- typescript-battle typescript实战系列，通过一个个小demo去理解和熟悉typescript的应用。
工欲善其事必先利其器~
- 结合场景和使用进行展现
-
思维导图 MindNode
-
硬件 mac + 机械键盘
-
vscode 编辑器
-
Iterm2 + oh my zsh 终端
-
screenity 一个强大的屏幕录制和标注的 Chrome 插件
-
alfred 应用快速启动器
-
Shadowsocks 科学上网
-
Xnip 好用的截图工具
- JavaScript忍者秘籍（第2版）
- Javascript现代教程
- You-Dont-Know-JS
- practical-modern-javascript
- Javascript 语言精粹与编程实践
- 精通CSS 高级Web标准解决方案
- CSS 揭秘
- You-need-to-know-css
-
框架
-
协作开发
-
规范
- clean-code-typescript 代码整洁之道
-
资源汇总
我一般会在 teambition 列出进行中的学习项，方便地跟踪学习进度，示例如下：
俗话说得好，好记性不如烂笔头，何况我记性还不好，记录对我而言就格外重要了。
我使用过许多笔记软件，如印象笔记、Bear、notion、语雀等，有点过于追求工具化了，其重心应该放在内容的记录上。
尽管不是最优解，但贵在有个方向，后面会不断地优化。
- 学习某个知识点，通常是不系统的、较零散的，我会记录在语雀中；
- 如果是一个系列的知识，我会记在个人博客的文档一栏中，支持搜索功能，也方便查阅。
- 当某一个知识点的理解比较透彻，积累达到一定程度时，我会将其整理输出为一篇文章。使用
Typora或vscode编写文章，然后同步更新到掘金和个人博客中。
一个题目、一个知识点或者是一道算法题，光靠一遍是很难真正掌握地，需要不断地复习，所以我推荐大家使用抽认卡，比较好用的是Anki。
在抽认卡上做笔记： 若你第一次发现你知道问题的答案时，先不要急着把其标注成“已知”。反复复习这张抽认卡，直到每次都能答对后才是真正学会了这个问题。反复地问答可帮助你深刻记住该知识点。
遇到编程问题时，我总结了我解决问题的一个方法。
- 首先定位问题，确定最贴合问题的几个关键词，如我想在Next.js项目中知道嵌套路由如果更好地实现，其中的关键词就是
nextjs wrap router； - google 确定好的关键词；
- google 没有好的解决方案，上nextjs issue 查看是否有答案，如没有可以尝试提issue；
- github issue 没有满意的答案，上stack overflow搜索是否有和自己遇到相似的问题，如果没有可以自己提出问题，然后等待热心的开发者回答。
在学习的过程中，往往会有许多令人分心的事占据着我们宝贵的时间。因此，专注和集中注意力是非常困难的。放点纯音乐能帮上一些忙。
- freecodecamp 免费的学习社区，提供了一系列非常优质的课程。
-
Javascript 工作原理（系列文章）
-
事件循环
- JavaScript忍者秘籍 第 13 章 历久弥新的事件
- Tasks, microtasks, queues and schedules
- setTimeout和setImmediate到底谁先执行，本文让你彻底理解Event Loop
-
垃圾回收
-
浏览器原理
-
编译器原理
- CSS 动画
- PostCSS
- 原子 CSS
- Facebook 重构时为什么要使用 TailwindCSS 方案？ 原子css，一个类只对应一个属性，但是具有语义化；虽然一开始会有很多的类，但是随着应用的增大，整体的体积会呈缓慢上升的趋势，因为很多规则已经存在不需要再增加额外的类去定义。
- 函数式 JavaScript 快速入门 📔🔥
- 函数式编程指北 📔
- 轻量函数式 Javascript 📔
- 函数式编程入门教程 📝
- Functors, Applicatives, And Monads In Pictures 📝
- JavaScript专题之函数柯里化 📝🔥
- react hooks
- react 原理
- 组件设计
- recoil.js
- 源码
- Nodejs 教程
- BFF
- 热部署
- JWT
- libuv 原理
- webpack
- webpack项目搭建
- webpack打包优化
- webpack核心原理
- webpack5新特性
- 深入浅出 webpack
- webpack 原理浅析
- Jenkins
- Travis
- Magic Microservices 让前端的一切皆可“微”（一个函数解决微前端）
-
数组
-
链表
-
栈
-
队列
-
树
-
图解 leetcode 🔥🔥🔥
-
labuladong 的算法小抄 本仓库总共 60 多篇原创文章，都是基于 LeetCode 的题目，涵盖了所有题型和技巧，而且一定要做到举一反三，通俗易懂，绝不是简单的代码堆砌，后面有目录。
-
小浩算法 小浩算法是一套针对小白的完整的算法训练流程！
-
javascript-algorithms 本仓库包含了多种基于 JavaScript 的算法与数据结构。 每种算法和数据结构都有自己的 README，包含相关说明和链接，以便进一步阅读 (还有 YouTube 视频) 。