Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/jcodelife/quality-front-end-resources

📚优质的前端资源，目前以整理文章67篇、视频40个以及书籍25本，持续更新中，欢迎PR推荐~
https://github.com/jcodelife/quality-front-end-resources
css html javascript nodejs typescript vuejs
Last synced: 2 months ago
JSON representation
📚优质的前端资源，目前以整理文章67篇、视频40个以及书籍25本，持续更新中，欢迎PR推荐~
Host: GitHub
URL: https://github.com/jcodelife/quality-front-end-resources
Owner: jCodeLife
Created: 2020-11-25T23:06:50.000Z (about 4 years ago)
Default Branch: main
Last Pushed: 2022-04-12T00:01:29.000Z (almost 3 years ago)
Last Synced: 2023-04-20T10:02:26.585Z (over 1 year ago)
Topics: css, html, javascript, nodejs, typescript, vuejs
Homepage:
Size: 11 MB
Stars: 43
Watchers: 4
Forks: 23
Open Issues: 0
Metadata Files:
- Readme: README.md
Awesome Lists containing this project

README

        

## 前言

文章信息来自网上公开资料，排名不分先后

前端学习线路：https://roadmap.sh/frontend

## 一、文章

### JS

1. [ECMAScript 6 入门](https://es6.ruanyifeng.com)   阮一峰  推荐指数★★★★★

2. [最全的手写JS面试题](https://juejin.cn/post/6968713283884974088)    Big shark@LX    推荐指数★★★★★

3. [看了就会，手写Promise原理，最通俗易懂的版本！！！](https://juejin.cn/post/6994594642280857630)    Sunshine_Lin    推荐指数★★★★

4. [这一次，彻底弄懂 JavaScript 执行机制](https://juejin.cn/post/6844903512845860872)

5. [由浅入深，66条JavaScript面试知识点](https://juejin.cn/post/6844904200917221389)

6. [JavaScript深入系列15篇正式完结！](https://juejin.cn/post/6844903479429824526)

7. [JavaScript手写代码无敌秘籍](https://juejin.cn/post/6844903809206976520)

8. [现代 JavaScript 教程](https://zh.javascript.info/)

### CSS

1. [Rem布局的原理解析](https://yanhaijing.com/css/2017/09/29/principle-of-rem-layout/)   颜海镜  推荐指数★★★★ 

2. [8个硬核技巧带你迅速提升CSS技术](https://juejin.cn/post/6908879198933221383)   JowayYoung  推荐指数★★★★ 

3. [你不可能知道的骨架屏玩法](https://juejin.cn/post/6994678354200756238)  羽飞    推荐指数★★★★

### Vue

1. [Vue RFCs](https://github.com/vuejs/rfcs)   尤雨溪  推荐指数★★★★★

2. [Vue3中文文档](https://www.vue3js.cn/docs/zh/guide/introduction.html)   veaba Jinjiang  推荐指数★★★★★  

3. [如何参加开源项目-如何给Vue3.0提PR](https://juejin.cn/post/6844904191744278542)   然叔  推荐指数★★★★  

4. [史上最全 Vue 前端代码风格指南](https://juejin.cn/post/6987349513836953607)    卡喵妹   推荐指数★★★

5. [101张脑图，从零开始学完Vue3（包括Vue3.2最新语法）](https://juejin.cn/post/7007710727725121566)   LBJ   推荐指数★★★★

6. [实现最简 vue3 模型](https://github.com/cuixiaorui/mini-vue)

7. [[Vue官方教程笔记]- 尤雨溪手写mini-vue](https://juejin.cn/post/6911897255087702030)

8. [10分钟体验Vue3全家桶(Vue3 + VueRouter4 + Vuex4)](https://juejin.cn/post/6844904150082256903)

9. [10.23尤雨溪在早早聊直播分享总结：vue3生态发展现状和展望](https://juejin.cn/post/7022137486407106591)

10. [2021必知必会的vite+vue3项目最佳实践](https://juejin.cn/post/6926822933721513998)

11. [分享8个非常实用的Vue自定义指令](https://juejin.cn/post/6906028995133833230)   lzg9527   推荐指数★★★★

12. [服务端渲染SSR及实现原理](https://www.zoo.team/article/web-ssr) 政采云前端团队可橙    推荐指数★★★★

13. [组件库从0到1](https://juejin.cn/column/6961051124031815687)   DevUI团队    推荐指数★★★★★

14. [Vue3.0 新特性以及使用经验总结](https://juejin.cn/post/6940454764421316644)

15. [从 0 开始手把手带你搭建一套规范的 Vue3.x 项目工程环境](https://juejin.cn/post/6951649464637636622)

16. [Vue3 究竟好在哪里？（和 React Hook 的详细对比）](https://juejin.cn/post/6844904132109664264)

17. [学习 vue3 源码的利器](https://juejin.cn/post/6925668019884523534)  花果山技术团队

18. [Vue3 的响应式和以前有什么区别，Proxy 无敌？](https://juejin.cn/post/6844904122479542285)   ssh_晨曦时梦见兮

19. [Vue3 中的数据侦测](https://juejin.cn/post/6844903957807169549)   ncheng

20. [聊一聊 Vue3 的 9 个知识点](https://juejin.cn/post/7026249448233631752) 沐华

21. [Vue3的8种和Vue2的12种组件通信](https://juejin.cn/post/6999687348120190983) 沐华

22. [推荐 7 个 Vue2、Vue3 源码解密分析的重磅开源项目](https://juejin.cn/post/6942492146725290020)   天明夜尽        

23. [阿里妈妈又做了新工具，帮你把 Vue2 代码改成 Vue3 的](https://juejin.cn/post/6977259197566517284) 阿里妈妈前端快爆

24. [Vite2 + Vue3 + TypeScript + Pinia 搭建一套企业级的开发脚手架](https://juejin.cn/post/7036745610954801166)  前端小菜鸡之菜鸡互啄

25. [30 道 Vue 面试题，内含详细讲解](https://juejin.cn/post/6844903918753808398)    我是你的超级英雄

26. [还在迟疑是否上ts？先上车再说！vue3+ts开发初体验](https://juejin.cn/post/6979034498352545829) 杨村长

27. [Vue3.2 setup语法糖、Composition API归纳总结](https://juejin.cn/post/7006108454028836895)   Jerry丶Hu

28. [最全的 Vue 面试题+详解答案](https://juejin.cn/post/6961222829979697165)  Big shark@LX

29. [Vue3.0 前的 TypeScript 最佳入门实践](https://juejin.cn/post/6844903865255477261)   前端劝退师

30. [实战技巧，Vue原来还可以这样写](https://juejin.cn/user/2858385961407853)前端进击者

31. [尤雨溪手写mini-vue](https://juejin.cn/post/6911897255087702030)    全栈然叔

32. [为什么 vue 源码以及生态仓库要迁移 pnpm?](https://blog.csdn.net/qq_36380426/article/details/121867492)    推荐指数★★★★

### React

1. [这可能是最通俗的 React Fiber(时间分片) 打开方式](https://juejin.cn/post/6844903975112671239)

2. [React全部api解读+基础实践大全(夯实基础2万字总结)](https://juejin.cn/post/6950063294270930980)

3. [公众号| React Concurrent Mode 初识&探秘](https://mp.weixin.qq.com/s/WUVVpEoXdhVOlwtjgpLX5A)

4. [React Libraries for 2022](https://www.robinwieruch.de/react-libraries/)

### TS

1. [TypeScript 高级用法](https://juejin.cn/post/6926794697553739784)

2. [一文读懂 TypeScript 泛型及应用](https://juejin.cn/post/6844904184894980104)

3. [一份不可多得的 TS 学习指南（1.8W字）](https://juejin.cn/post/6872111128135073806)

### Node

1. [http缓存机制](https://juejin.cn/post/6844904116972421128)

2. [从0到1搭建前端异常监控系统](https://juejin.cn/post/6844904119136698381)

3. [可视化Git](https://learngitbranching.js.org/?demo=&locale=zh_CN)

4. [字节跳动是如何落地微前端的](https://juejin.cn/post/7016911648656982024)

5. [迈入现代 Web 开发](https://zhuanlan.zhihu.com/p/386607009)

6. [深入理解Node.js](https://yjhjstz.gitbooks.io/deep-into-node/content/)

### Git

1. [廖雪峰的Git教程](https://www.liaoxuefeng.com/wiki/896043488029600)

2. [图解Git](http://marklodato.github.io/visual-git-guide/index-zh-cn.html)

3. [可视化Git](https://learngitbranching.js.org/?demo=&locale=zh_CN)

### 开发小技巧

1. [让你 vscode 写代码效率更高的技巧](https://juejin.cn/post/6986485485765918733)   zxg_神说要有光  推荐指数★★★★  

2. [前端 debug 的奇淫技巧](https://juejin.cn/post/6992024002113847332)    字节前端    推荐指数★★★★★

### 面试

1. [一个合格(优秀)的前端都应该阅读这些文章](https://juejin.cn/post/6844903896637259784)    Neal_yang    推荐指数★★★★

2. [专有钉钉前端面试指南](https://juejin.cn/post/6986436944913924103)  专有钉钉前端团队     推荐指数★★★

3. [中高级前端大厂面试秘籍，为你保驾护航金三银四，直通大厂(上)](https://juejin.cn/post/6844903776512393224)

4. [面试分享：两年工作经验成功面试阿里P6总结](https://juejin.cn/post/6844903928442667015)

5. [写给女朋友的中级前端面试秘籍（含详细答案，15k级别）](https://juejin.cn/post/6844904115428917255)

6. [「中高级前端面试」JavaScript手写代码无敌秘籍](https://juejin.cn/post/6844903809206976520)

7. [Github| 前端进阶之道](https://yuchengkai.cn/)

8. [Github| 前端3+1面试题库](https://github.com/haizlin/fe-interview)

### 行业杂谈

0. [2021 年 JavaScript 大事记](https://jishuin.proginn.com/p/763bfbd6fe5f) 桃翁 推荐指数★★★★★

1. [谈谈我这些年对前端框架的理解](https://juejin.cn/post/7007048306438176799)    zxg_神说要有光   推荐指数★★★★

2. [jQuery会过时吗？](https://www.zhihu.com/question/34892985/answer/60466608)   贺师俊  推荐指数★★★★ 

3. [2021 JavaScript Rising Stars](https://risingstars.js.org/2021/en)  推荐指数★★★★★

### 工程化

1. [vite工程化实践，建议收藏](https://juejin.cn/post/6910014283707318279)

2. [迈入现代 Web 开发](https://zhuanlan.zhihu.com/p/386607009)

3. [前端工程化实战 - 企业级 CLI 开发](https://juejin.cn/post/6982215543017193502)

4. [手把手带你入门前端工程化](https://juejin.cn/post/6892003555818143752)

### 性能优化

1. [浏览器的渲染写给中高级前端关于性能优化的9大策略和6大指标](https://juejin.cn/post/6981673766178783262)

2. [聊一聊前端性能优化](https://juejin.cn/post/6911472693405548557)

### 浏览器

1. [浏览器的渲染原理间接](https://coolshell.cn/articles/9666.html)

2. [浏览器的工作原理](https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/)

3. [现代浏览器工作原理 (part 1)](https://developers.google.com/web/updates/2018/09/inside-browser-part1)

4. [现代浏览器工作原理 (part 2)](https://developers.google.com/web/updates/2018/09/inside-browser-part2)

5. [现代浏览器工作原理 (part 3)](https://developers.google.com/web/updates/2018/09/inside-browser-part3)

6. [现代浏览器工作原理 (part 4)](https://developers.google.com/web/updates/2018/09/inside-browser-part4)

7. [Life of a Pixel](https://docs.google.com/presentation/d/1boPxbgNrTU0ddsc144rcXayGA_WF53k96imRH8Mp34Y/edit#slide=id.g60f92a5151_40_1445)

### 小程序

1. [近两万字小程序攻略发布了](https://juejin.cn/post/6844903670589423623)

### 算法数据结构

1. [可视化算法](https://visualgo.net/zh)

2. [语雀| 设计模式](https://www.yuque.com/wubinhp/uxiv5i)

## 二、视频

### JS

1. [Web前端开发JavaScript权威课堂](https://ke.qq.com/course/231577?taid=2841395744442521)  姬成  推荐指数：★★★★★

2. [2分钟了解 JavaScript Event Loop](https://www.bilibili.com/video/BV1kf4y1U7Ln?from=search&seid=2734638953578049157)  峰华前端工程师  推荐指数：★★★★★

3. [ES6经典入门到进阶](https://ke.qq.com/course/421133?taid=3532215464389901)  陈潇冰  推荐指数：★★★★★

4. [8分钟带你了解JS运行原理](https://www.bilibili.com/video/BV1vh411Z7QG)   objtube的卢克儿   推荐指数：★★★★★

5. [天天造轮子-防抖节流](https://www.bilibili.com/video/BV1y3411r71u?spm_id_from=333.999.0.0)

### jQuery

1. [jQuery+Ajax从放弃到知根知底](https://www.bilibili.com/video/BV17W41137jn?from=search&seid=14022360126928211379)  李南江  推荐指数：★★★★★

### Vue

1. [Vue.js精讲](https://www.bilibili.com/video/BV17x411J73h)  表严肃  推荐指数：★★★★★

2. [Vue3快速上手指南-CompositionAPI](https://space.bilibili.com/389008815?spm_id_from=333.788.b_765f7570696e666f.2)  推荐指数：★★★★★

3. [尤雨溪教你写vue 高级vue教程 源码分析](https://www.bilibili.com/video/BV1d4411v7UX?p=1)   推荐指数：★★★★★

4. [手把手教你学Vue3](https://space.bilibili.com/478692215/channel/detail?cid=194210&ctype=0)    晓舟报告    推荐指数：★★★★

5. [Composition API + 深度解读](https://www.bilibili.com/video/BV1my4y1m7sz?p=1) Young村长   推荐指数：★★★★★

6. [React 与 Vue 框架的设计思路大 PK](https://www.bilibili.com/video/BV1az4y127Ga/)

7. [阮一峰推荐最佳学习 vue3 源码的利器 - mini-vue](https://www.bilibili.com/video/BV1Zy4y1J73E?spm_id_from=333.999.0.0)

8. [8年老前端独家分享阅读 Vue3 源码技巧](https://www.bilibili.com/video/BV1xy4y1178G?spm_id_from=333.999.0.0)

9. [【全网首发】Vue3.0光速上手「持续更新中」](https://www.bilibili.com/video/BV1Wh411X7Xp?spm_id_from=333.999.0.0)

10. [【备战2021】Vite2 + Vue3项目最佳实践「持续更新中」](https://www.bilibili.com/video/BV1vX4y1K7bQ?spm_id_from=333.999.0.0)

11. [Vue3+Typescript从整合到项目实战](https://www.bilibili.com/video/BV1no4y1k7kJ?spm_id_from=333.999.0.0)

12. [Vue DevUI开源指南](https://space.bilibili.com/480140591/channel/collectiondetail?sid=30497) 村长和kagol 推荐指数：★★★★★ 

13. [可组合的 Vue](https://www.bilibili.com/video/BV1x54y1V7H6?spm_id_from=333.999.0.0)

14. [56道经典Vue面试题详解](https://space.bilibili.com/480140591/channel/collectiondetail?sid=308434)

### Vue周边

1. [半小时学会 Vuex 数据共享](https://www.bilibili.com/video/BV1gt4y1X78g?p=1)   李江南  推荐指数：★★★★★

2. [下一代Vue状态管理工具—Pinia](https://www.bilibili.com/video/BV1eu411f7Gn?from=search&seid=14937226313225584582&spm_id_from=333.337.0.0)   YeungWanLum    推荐指数：★★★★

3. [面向未来的 Vuex -- pinia](https://www.bilibili.com/video/BV1Mb4y1X7NL?from=search&seid=14937226313225584582&spm_id_from=333.337.0.0)  阿崔cxr    推荐指数：★★★★

### React

0. [React技术全家桶全套完整版](https://www.bilibili.com/video/BV1wy4y1D7JT?from=search&seid=1177347919354858286&spm_id_from=333.337.0.0) 推荐指数：★★★★★

1. [React 与 Vue 框架的设计思路大 PK](https://www.bilibili.com/video/BV1az4y127Ga/)

2. [9分钟掌握React Hooks正确认知](https://www.bilibili.com/video/BV1JU4y1E73v?from=search&seid=1480540993076541477)

3. [你必须要掌握的React知识点](https://www.bilibili.com/video/BV1rK411F7x3)

4. [从0到1开发可视化拖拽H5编辑器(React)](https://www.bilibili.com/video/BV14b4y1R7hk)

5. [React入门到实战](https://www.bilibili.com/video/BV1Z44y1K7Fj?spm_id_from=333.999.0.0) 推荐指数：★★★★★

6. [从零认识React Hook](https://www.bilibili.com/video/BV1uT4y1G7xm?from=search&seid=868138522980399877&spm_id_from=333.337.0.0)

### Node

1. [Web前端会客厅|个人推荐看前9个视频](https://space.bilibili.com/476967789/channel/detail?cid=136330)  开课吧  推荐指数：★★★★★


2. [前端阶段进阶（已完结）](https://www.bilibili.com/video/BV1oZ4y1V7tx)  推荐指数：★★★★★

3. [Node.js经典教程](https://www.bilibili.com/video/BV13s411M7Ab?spm_id_from=333.999.0.0)    blue    推荐指数：★★★

4. [手写webpack](https://www.bilibili.com/video/BV1dV411p7gp)    全栈然叔   推荐指数：★★★★

5. [B站: 然叔天天造轮子-Vite](https://www.bilibili.com/video/BV1Df4y1n777?spm_id_from=333.999.0.0)

### JS引擎

1. [8分钟带你了解V8引擎是如何运行JS](https://www.bilibili.com/video/BV1zV411z7RX)  objtube的卢克儿   推荐指数：★★★★★

### 学习线路

1. [前端学习路线分享](https://www.bilibili.com/video/BV1ZZ4y1H7rU/?spm_id_from=333.788.b_636f6d6d656e74.6)   objtube的卢克儿   推荐指数：★★★★★

### 面试

1. [程序员简历点评第二期：能吃苦和能吃](https://www.bilibili.com/video/BV1av411w7oa)

2. [现场点评9个程序员简历 -- 有喷有夸](https://www.bilibili.com/video/BV1g54y1p7yV?spm_id_from=333.999.0.0)

3. [想进大厂？简历要这么写](https://www.bilibili.com/video/BV1FB4y1T7CP?spm_id_from=333.999.0.0)

### 网站搭建

1. [手把手带你从0搭建个人网站，小白可懂的保姆级教程](https://www.bilibili.com/video/BV1rU4y1J785)

2. [手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo](https://www.bilibili.com/video/BV1Yb411a7ty/?spm_id_from=333.788.recommend_more_video.8)

### 浏览器

1. [像素的一生Life of a Pixel](https://www.bilibili.com/video/av35265997/)

2. [浏览器是如何运作的？](https://www.bilibili.com/video/BV1x54y1B7RE/)

### 小程序

1. [uniCloud开发实战：拍照识别垃圾分类应用 跨端云开发 uniapp ](https://www.bilibili.com/video/BV1y3411i7VK)

## 三、书籍

### CSS

1. [精通 CSS](https://book.douban.com/subject/30450258/)

2. [CSS 权威指南](https://book.douban.com/subject/2308234/)

3. [深入解析 CSS](https://book.douban.com/subject/35021471/)

4. [CSS 揭秘](https://book.douban.com/subject/26745943/)

### JS

1. [Javascript编程艺术](https://book.douban.com/subject/6038371/)

2. [JavaScript高级程序设计（第4版）](https://book.douban.com/subject/10546125/)

3. [Javascript犀牛书第七版](https://book.douban.com/subject/10549733/)

4. [你不知道的javascript 上](https://book.douban.com/subject/26351021/)

5. [你不知道的javascript 中](https://book.douban.com/subject/26854244/)

6. [Javasript二十年](https://book.douban.com/subject/35446937/)

7. [JavaScript语言精髓与编程实践（第3版）](https://book.douban.com/subject/35085910/)

8. [前端开发核心知识进阶](https://book.douban.com/subject/35218831/)

### Vue

1. [Vue.js设计与实现]()

1. [深入浅出Vue.js](https://book.douban.com/subject/32581281/)

2. [Testing Vue.js Applications](https://book.douban.com/subject/33338290/)

### TS

1. [TypeScript 入门教程](https://ts.xcatliu.com/)

2. [深入理解 TypeScript](https://jkchao.github.io/typescript-book-chinese/#why)

### Node

1. [Node源码解析](https://11111-1252105172.cos.ap-shanghai.myqcloud.com/understand-nodejs%EF%BC%88%E5%B8%A6%E6%A0%87%E7%AD%BE%E7%89%88%EF%BC%89.pdf)

2. [深入浅出Node.js(进阶)](https://book.douban.com/subject/25768396/)

3. [设计数据密集型应用](https://book.douban.com/subject/30329536/)

### 浏览器

1. [WebKit 技术内幕](https://book.douban.com/subject/25910556/)

### 算法

1. [算法（第4版）](https://book.douban.com/subject/19952400/)

2. [算法图解](https://book.douban.com/subject/26979890/)

3. [啊哈!算法](https://book.douban.com/subject/25894685/)

4. [算法导论](https://book.douban.com/subject/1885170/)