frontendgithub / frontendgithub Goto Github PK

View Code? Open in Web Editor NEW

5.7K 124.0 898.0 2.26 MB

:octocat:GitHub最全的前端资源汇总仓库（包括前端学习、开发资源、数据结构与算法、开发工具、求职面试等）

Home Page: https://www.kwgg2020.com

License: MIT License

javascript frontend-map vue react frontend

frontendgithub's Introduction

专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称，涵盖 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS 等。

以最优惠的方式购买极客时间课程：https://github.com/biaochenxuying/preferential-courses ，涵盖了后端、架构、前端、移动、人工智能、大数据、产品、运营、运维、测试等

前端最强的学习导航: https://www.kwgg2020.com

猫哥的技术博客地址：https://github.com/biaochenxuying/blog

简介

初级前端与高级前端之间，很大原因就是投入学习前端的时间、经验的差别，其实就是信息差。

如果有一个地方能又快又好的获得这些优质的前端信息，那么将会大大缩短从初级到高级的时间。

基于这个初衷，于是就诞生了这个仓库，能帮助前端开发人员节省时间的仓库！

本项目专注于挖掘 GitHub 上优秀的前端开源项目，并以专题的形式推荐，每专题大概 10 个好项目，每周会有一到三篇精华文章推送。

已经推荐了面试项目、css奇技淫巧项目、代码规范项目、数据结构与算法项目、管理后台模板、前端必备在线工具等专题的近 200 个优秀项目了。

希望你在浏览、学习了超级猫推荐的这些开源项目的过程中，你能学习到更多编程知识、提高编程技巧、找到编程的乐趣。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目。

欢迎关注微信公众号 “前端GitHub”，回复 电子书 就送你 1000+ 本精华编程电子书；回复 1024 送你一套完整的前端视频教程。

原创文章都在公众号首发，比博客早一到两篇。

文章与项目

软技能

项目	地址
GitHub 官方文档：使用、搜索、管理开源项目	https://docs.github.com/cn

⬆️ 返回顶部

前端趋势榜

⬆️ 返回顶部

Vue3

项目	地址
Vue3 中文文档	https://vue3js.cn/docs/zh/
Vue3 设计理念	https://vue3js.cn/vue-composition/
Vue3 相关项目聚合网站	https://vue3js.cn/
Vue3 源码	https://vue3js.cn/start/
Ant-design-vue	https://antdv.com/docs/vue/introduce-cn/
Vant 3.0	https://vant-contrib.gitee.io/vant/v3/
Element-plus	https://element-plus.org/#/zh-CN
element 3	https://github.com/hug-sun/element3
vue-vben-admin	https://github.com/anncwb/vue-vben-admin
vue-admin-beautiful	https://github.com/chuzhixin/vue-admin-beautiful
vue-cli	https://github.com/Wscats/vue-cli
movie-trailer	https://github.com/lhz960904/movie-trailer
newbee-mall-vue3-app	https://github.com/newbee-ltd/newbee-mall-vue3-app
vue3-jd-h5	https://github.com/GitHubGanKai/vue3-jd-h5

⬆️ 返回顶部

Vue 源码解密

推荐 7 个 Vue2、Vue3 源码解密分析的开源项目 👍
精彩待续。。。

项目	地址
vue-analysis：Vue.js 源码分析	https://github.com/ustbhuangyi/vue-analysis
vue-design：逐行级别的分析	http://hcysun.me/vue-design/zh/
vue-family-mindmap：用一张思维导图总结了 Vue	Vue-Router
learnVue：Vue.js 源码分析	https://github.com/answershuto/learnVue
vue：Vue 源码逐行注释分析	https://github.com/qq281113270/vue
vue2.0-source：Vue 源码分析	https://github.com/liutao/vue2.0-source
Vue3 源码：Vue3 源码系列	https://vue3js.cn/start/

⬆️ 返回顶部

React 源码解密

项目	地址
just-react：严谨、易懂的 React 源码分析教程	https://github.com/BetaSu/just-react

⬆️ 返回顶部

面试专题

推荐这 10 个 GitHub 上超火的前端面试项目，打造自己的加薪宝库！
精彩待续。。。

项目	地址
Front-end-Developer-Questions：前端面试题	https://h5bp.org/Front-end-Developer-Interview-Questions/
javascript-questions：JavaScript 进阶问题列表	https://github.com/lydiahallie/javascript-questions
Daily-Question：每天一道大厂面经推送	https://github.com/shfshanyue/Daily-Question
CS-Interview-Knowledge-Map：一线大厂面试题	https://github.com/InterviewMap/CS-Interview-Knowledge-Map
Daily-Interview-Question：每天搞定一道前端大厂面试题	https://github.com/Advanced-Frontend/Daily-Interview-Question
fe-interview：前端面试的一个复习汇总项目	https://lucifer.ren/fe-interview
fe-interview：前端面试专题	https://github.com/biaochenxuying/blog/blob/master/interview/fe-interview.md
fe-interview：前端知识题库	https://github.com/haizlin/fe-interview
node-interview：饿了么大前端的面试	https://github.com/ElemeFE/node-interview/tree/master/sections/zh-cn
Front-End-Interview-Notebook：前端复习笔记	https://github.com/CavsZhouyou/Front-End-Interview-Notebook
FE-Interview：前端面试必备题库	https://github.com/lgwebdream/FE-Interview
web-interview：Vue 面试题库	https://github.com/febobo/web-interview

⬆️ 返回顶部

简历专题

10 个 GitHub 上最火的程序员简历项目，2021 金三银四必备！
精彩待续。。。

项目	地址
ResumeSample：程序员简历模板系列	https://github.com/geekcompany/ResumeSample
Markdown-Resume：用 markdown 语法来写的简历模版，非常简结通用	https://github.com/CyC2018/Markdown-Resume
awesome-resume：程序员简历例句，程序员简历范例	https://github.com/resumejob/awesome-resume
DeerResume：好用的 MarkDown 在线简历工具，可在线预览、编辑、设置访问密码和生成 PDF	https://github.com/geekcompany/DeerResume
markdown-resume：在线简历排版工具，支持切换 4 种模版、自定义和导出功能	https://github.com/mdnice/markdown-resume
best-resume-ever：快速生成漂亮简历的工具，它基于 Vue 和 LESS	https://github.com/salomonelli/best-resume-ever
awesome-resume-for-chinese：适合中文的简历模板收集	https://github.com/dyweb/awesome-resume-for-chinese
resume：一份优雅简约的简历	https://github.com/gwuhaolin/resume
biaochenxuying：非常自由的自定义的前端程序员模版	https://github.com/biaochenxuying/blog/blob/master/resume/resume.md
github-readme-stats：在你的 README 中获取动态生成的 GitHub 统计信息	https://github.com/anuraghazra/github-readme-stats

⬆️ 返回顶部

JavaScript

12 个 GitHub 上超火的 JavaScript 奇技淫巧项目，找到写 JavaScript 的灵感！
精彩待续。。。

项目	地址
30-seconds-of-code：简短代码段，经常会用到而且是非常经典的代码	https://github.com/30-seconds/30-seconds-of-code
33-js-concepts：JavaScript开发者应懂的 33 个概念	https://github.com/leonardomso/33-js-concepts
javascript-questions：JavaScript 进阶问题列表	https://github.com/lydiahallie/javascript-questions
JavaScript 30：使用原生 JavaScript 在 30 天内完成 30 个项目	https://github.com/wesbos/JavaScript30
Codewars：和 leetcode 有点类似，也是在平台上和其他人一起完成真实的代码挑战，提升你的技术	https://www.codewars.com/
ES6 入门教程：开源的 JavaScript 语言教程，全面介绍 ECMAScript 6 新引入的语法特性	https://es6.ruanyifeng.com/
JavaScript 教程：全面介绍 JavaScript 核心语法，覆盖了 ES5 和 DOM 规范的所有内容	https://wangdoc.com/javascript/
现代 JavaScript 教程：以最新的 JavaScript 标准为基准。从基础到高阶的 JavaScript 相关知识	https://zh.javascript.info/
MDN：提供开放网络(Open Web)技术有关的信息,包括用于网站和渐进式网络应用的 HTML、CSS 和 API	https://developer.mozilla.org/zh-CN/
clean-code-javascript：优秀的 JS 代码规范	https://github.com/ryanmcdermott/clean-code-javascript
TypeScript 入门教程：从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript	https://ts.xcatliu.com
w3school：前端必须知道的 Web 技术教程平台	https://www.w3school.com.cn/js/index.asp
three.js：JavaScript编辑3D模型，各种各样炫酷的效果以及Documentation值得你去了解three.js	three.js](https://threejs.org/)

⬆️ 返回顶部

Flutter

推荐 4 个基于 Flutter 的重磅高仿开源项目
精彩待续。。。

网站	说明
dy_flutter	斗鱼 APP
flutter_tiktok	精仿抖音
flutter-osc	开源**客户端
FlutterDouBan	豆瓣客户端

⬆️ 返回顶部

TypeScript

网站	说明
TypeScript	TypeScript 官网，TS 扩展了 JavaScript ，为它添加了类型支持
typescript-tutorial	TypeScript 入门教程，循序渐进的理解 TypeScript
TypeScript	TypeScript 使用手册
typescript-book-chinese	深入理解 TypeScript
clean-code-typescript	适用于TypeScript的简洁代码概念
TypeScript入门	TypeScript 入门的视频教程
typescript-tutorial	TypeScript 速成教程（2小时速成）

⬆️ 返回顶部

前端必备在线工具

项目	地址
LightHouse：一个开源的自动化工具，用于改进网络应用的质量	https://github.com/GoogleChrome/lighthouse
Can I Use：查询 CSS、Js 在个中流行浏览器钟的特性和兼容性的网站	https://caniuse.com/
ios font：IOS 字体支持查询和 IOS 系统自带字体查询	http://iosfonts.com/
web 安全色：尽量让用户看到色彩相同的网页，请尽量使用 216 色的 web 安全色	https://www.bootcss.com/p/websafecolors/
TinyPNG：PNG/JPG 图片在线压缩利器，智能 PNG 和 JPEG 图片压缩	https://tinypng.com/
二维码生成器：草料二维码生成器	https://cli.im/
Shape Divider：定制各种形状的网站分区 SVG 的工具	https://www.shapedivider.app/
json 格式化： json 在线解析的网站	http://json.cn/
sojson：前端WEB工具大合集	https://www.sojson.com/
站长工具：站长的必备工具	https://tool.chinaz.com/
codelf：变量命名智能推荐（支持中文）	https://unbug.github.io/codelf/
印象笔记：Web 前端开发人员提供优质中文文档	https://www.docschina.org
regexr：正则表达式验证匹配	https://regexr.com/
any-rule：正则表达式库，非常全，使用起来很方便	https://github.com/any86/any-rule
bootcdn：国内的CDN库，速度快	www.bootcdn.cn 或 cdn.baomitu.com
jsdelivr：国外的 cdn 库，支持 github，npm，WordPress	https://www.jsdelivr.com
gitignore：根据选择会去生成 .gitignore 文件	https://www.gitignore.io/
codesandbox：在线编辑代码	https://codesandbox.io/
typora：实用的 Markdown 写作工具，所见即所得	https://www.typora.io
mdnice：使 markdown 语法更加美观，写作工具(强烈推荐)	https://mdnice.com
toptal：多张图片合成雪碧图，并生成对应 css	https://www.toptal.com/developers/css/sprite-generator
tool：众多工具集合，包括时间戳转换，进制转换等	https://tool.lu/

⬆️ 返回顶部

计算机内功秘籍

项目	地址
Crash-Course-Computer-Science-Chinese：计算机科学速成课	https://github.com/1c7/Crash-Course-Computer-Science-Chinese
computer-science：通往计算机科学免费自学教育之路！	https://github.com/ossu/computer-science
CS-Notes：技术面试必备基础知识、Leetcode、计算机操作系统、计算机网络、系统设计、Java、Python、C++	https://github.com/CyC2018/CS-Notes
REKCARC-TSC-UHT：清华大学计算机系课程攻略	https://github.com/PKUanonym/REKCARC-TSC-UHT
zju-icicles：浙江大学课程攻略共享计划	https://github.com/QSCTech/zju-icicles
TeachYourselfCS-CN：仅仅依靠自己，你就可以获得世界一流水平的教育	https://github.com/keithnull/TeachYourselfCS-CN
CS-Xmind-Note：计算机专业课（408）思维导图和笔记	https://github.com/SSHeRun/CS-Xmind-Note
awesome-books：160+ 本开源技术类精华电子书，包括前端、后端、数据结构与算法、计算机基础、设计模式、数据库等书籍	https://github.com/biaochenxuying/awesome-books

⬆️ 返回顶部

在线的代码转图片

项目	地址
Carbon：在线的代码转图片工具	https://carbon.now.sh/
glorious.codes：在线的代码转图片工具	https://glorious.codes/demo
codezen：在线的代码转图片工具	http://codezen.rishimohan.me/
codeimg：在线的代码转图片工具	https://codeimg.io/

⬆️ 返回顶部

管理后台 admin

10 个 GitHub 上超火和超好看的管理后台模版，后台管理项目有着落了单
精彩待续。。。

项目	地址
vue-Element-Admin：后台前端解决方案，它基于 vue 和 element-ui 实现	https://github.com/PanJiaChen/vue-element-admin
iview-admin：基于 Vue.js，搭配使用 iView UI 组件库形成的一套后台集成解决方案	https://github.com/iview/iview-admin
vue-admin-template：极简的 vue admin 管理后台	https://github.com/PanJiaChen/vue-admin-template
ant-design-pro：Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案	https://github.com/ant-design/ant-design-pro
ngx-admin：基于Angular 10+ 的可定制管理仪表板模，还拥有 6 个惊人的视觉主题	https://github.com/akveo/ngx-admin
vue-admin-beautiful：基于 vue+element-ui 的绝佳的中后台前端开发管理框架	https://github.com/chuzhixin/vue-admin-beautiful
vuestic-admin：免费与美妙 Vue.js 管理模板，包括 38 以上个定制用户界面组件	https://github.com/epicmaxco/vuestic-admin
antd-admin：一套优秀的中后台前端解决方案	https://github.com/zuiidea/antd-admin
eladmin：SpringBoot、Jpa、Security、Redis、Vue 等前后端前沿技术开发	https://github.com/elunez/eladmin
AdminLTE：是一个完全响应的管理模板。基于 Bootstrap 4.5 框架以及 JS / jQuery 插件	https://github.com/almasaeed2010/AdminLTE

⬆️ 返回顶部

逼格满满的 PPT

GitHub 标星 54K + 2K！这才是程序员写逼格满满的 PPT 的正确姿势！
精彩待续。。。

项目	地址
reveal-md：使用 Markdown 来做 PPT 展示的开源项目	https://github.com/webpro/reveal-md
reveal.js：使用 html、markdown 写静态的文本，创建功能齐全且美观的 PPT	https://github.com/hakimel/reveal.js

⬆️ 返回顶部

数据结构与算法

7 个GitHub上最火的、最值得前端学习的数据结构与算法项目！没有之一
精彩待续。。。

项目	地址
javascript-algorithms：含了多种基于 JavaScript 的算法与数据结构	https://github.com/trekhleb/javascript-algorithms
algorithm-visualizer：算法可视化工具是一个交互式的在线平台，可以从代码中可视化算法	https://github.com/algorithm-visualizer/algorithm-visualizer
algo：数据结构和算法必知必会的 50 个代码实现	https://github.com/wangzheng0822/algo
awesome-algorithms：包含不同著名计算机科学算法的 javascript 实现	https://github.com/mgechev/javascript-algorithms
JS-Sorting-Algorithm：关于排序算法的 GitBook 在线书籍《十大经典排序算法》	https://github.com/hustcc/JS-Sorting-Algorithm
JavaScript 数据结构与算法之美：包含了十大经典排序算法的**、代码实现、一些例子、复杂度分析、动画	https://github.com/biaochenxuying/blog
daily-algorithms：算法，每日练习的一个项目	https://github.com/barretlee/daily-algorithms
JavaScript 更多 ...	https://github.com/search?l=JavaScript&o=desc&q=algo&s=stars&type=Repositories

⬆️ 返回顶部

CSS 学习专题

项目	地址
You-need-to-know-css： CSS 的各种效果实现，尤其是动画效果	https://lhammer.cn/You-need-to-know-css/#/zh-cn/
CSS-Inspiration：找到使用或者是学习 CSS 的灵感	https://github.com/chokcoco/CSS-Inspiration
css_tricks：总结了一些常用的 CSS 的新属性和一点奇技淫巧	https://github.com/QiShaoXuan/css_tricks
animista：各种 CSS 实现的效果，还有代码演示，方便直接复制代码	http://animista.net/
spinkit：汇集了实现各种加载效果的 CSS 代码片段	https://tobiasahlin.com/spinkit/
十天精通 CSS3： CSS3 教程	https://www.imooc.com/learn/33
Animate：有趣的，跨浏览器的 css3 动画库	https://animate.style/
sass：Sass 是一种 CSS 的预编译语言，Sass 为 CSS 赋予了更强大的功能	https://sass.bootcss.com/documentation
less：Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性	https://less.bootcss.com/
cssdeck：在线 CSS 前端代码 Demo 样式效果	http://cssdeck.com/
codepen：前端炫酷样式效果，各种 loading 效果，在线编程，Vue 组件也特别多	https://codepen.io/
cubic-bezier：CSS3 贝塞尔曲线在线调试工具	https://cubic-bezier.com/
Snapsvg：SVG 动效的 JS 库,各种炫酷的效果。	http://snapsvg.io/
Cool Backgrounds：超酷的背景图片，渐变的色彩的图片背景都有，看起来很酷。	https://coolbackgrounds.io/

⬆️ 返回顶部

Node.js

推荐 9 个 Node.js 学习、进阶、debugging 分析、实战的重磅开源项目 👍
精彩待续。。。

项目	地址
node：最佳的学习资源肯定是最权威的 Node.js 的官方项目啦。	https://github.com/nodejs/node
node-api-cn：Node.js API 中文文档项目	https://github.com/nodejscn/node-api-cn
node-in-debugging： Node.js 调试指南的项目	https://github.com/nswbmw/node-in-debugging
nodebestpractices：对Node.js最佳实践中排名最高的内容的总结和分享	https://github.com/goldbergyoni/nodebestpractices
deep-into-node：深入理解 Node.js：核心**与源码分析	https://github.com/yjhjstz/deep-into-node
Nodejs-Roadmap：Node.js 服务端所涉及的技术栈	https://github.com/qufei1993/Nodejs-Roadmap
NeteaseCloudMusicApi：网易云音乐 Node.js API service	https://github.com/Binaryify/NeteaseCloudMusicApi
node-elm：这是基于 node.js + Mongodb 构建的后台系统	https://github.com/bailicangdu/node-elm
awesome-nodejs：Node.js 资源合集	https://github.com/sindresorhus/awesome-nodejs

⬆️ 返回顶部

小程序

项目	地址
mpvue：基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系	https://github.com/Meituan-Dianping/mpvue
wepy：小程序组件化开发框架	https://github.com/Tencent/wepy
westore：微信小程序解决方案 - 1KB javascript 覆盖状态管理、跨页通讯、插件开发和云数据库开发	https://github.com/Tencent/westore
ColorUI：鲜亮的高饱和色彩，专注视觉的小程序组件库	https://github.com/weilanwl/ColorUI
Gitter：采用 Taro 框架 + Taro UI 进行开发的 demo ，可能是目前颜值最高的 GitHub 微信小程序客户端	https://github.com/huangjianke/Gitter
Taro：多端统一开发框架，支持用 React 的开发方式编写一次代码	https://github.com/NervJS/taro
Painter：小程序生成图片库，轻松通过 json 方式绘制一张可以发到朋友圈的图片	https://github.com/Kujiale-Mobile/Painter
kbone：Web 与小程序同构解决方案，微信官方	https://github.com/wechat-miniprogram/kbone

⬆️ 返回顶部

前端监控

推荐 GitHub 2K+ 星：前端监控工具 - webfunny 项目！
精彩待续。。。

网站	说明
前端监控工具 - webfunny 项目	一款轻量级前端异常监控和前端性能监控系统

⬆️ 返回顶部

接口文档管理

更强大的开源接口文档管理工具
精彩待续。。。

前端的代码规范

恕我直言，这几个大厂的前端代码规范你可能还不会 - 能精进前端的代码规范
精彩待续。。。

项目	地址
腾讯	http://tgideas.qq.com/doc/index.html
京东	https://guide.aotu.io/index.html
airbnb	https://github.com/airbnb/javascript
百度	https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md
JavaScript Standard Style	https://github.com/standard/standard
Vue	https://cn.vuejs.org/v2/style-guide/index.html
ES6	http://es6.ruanyifeng.com/#docs/style
Bootstrap	https://codeguide.bootcss.com/
ESLint	https://eslint.org/
Prettier	https://prettier.io/

⬆️ 返回顶部

程序员必备仓库

推荐程序员必备的 10 大 GitHub 仓库，前端占了 7 个！
精彩待续。。。

项目	地址
build-your-own-x：构建自己想做的应用	https://github.com/danistefanovic/build-your-own-x
javascript-algorithms：多种基于 JavaScript 的算法与数据结构	https://github.com/trekhleb/javascript-algorithms
computer-science：为所有想要学习计算机科学的人提供了大量的免费学习资源	https://github.com/ossu/computer-science
30-seconds-of-code：超过 100 个代码段，涵盖了 JavaScript 中的各种内容	https://github.com/30-seconds/30-seconds-of-code
nodebestpractices：Node.js 最佳实践中排名最高的内容的总结和分享	https://github.com/goldbergyoni/nodebestpractices
realworld：如何使用特定的语言 / 技术开发适当的应用	https://github.com/gothinkster/realworld
free-programming-books：免费提供编程书籍	https://github.com/EbookFoundation/free-programming-books
system-design-primer：学习如何设计大型系统，为系统设计面试做准备	https://github.com/donnemartin/system-design-primer
awesome-python：精选的 Python 框架，库，软件和资源的精选清单	https://github.com/vinta/awesome-python
awesome-machine-learning：精选的很棒的机器学习框架，库和软件的列表	https://github.com/josephmisiti/awesome-machine-learning

⬆️ 返回顶部

拓展程序员技术与视野的国外网站

涨姿势了！22 个拓展程序员技术与视野的国外网站！
精彩待续。。。

项目	地址
GitHub：开源项目仓库	https://github.com
GitLab：仓库管理系统的开源项目	https://about.gitlab.com/
dev.to：技术博客社区	https://dev.to/
dreamincode：小众的技术博客	https://www.dreamincode.net
bytes：和 dreamcode 类似，简约但不简单	https://bytes.com
hongkiat：技术、设计领域相关的技术文章	https://www.hongkiat.com/blog/design-dev
IBM Developer：一线工程师，技术性很强的文章	https://developer.ibm.com
StackOverFlow：专为程序员提供的国际性问题解答交流社区	https://stackoverflow.com
Reddit：非常个性的社区，你可以讨论编程问题，还可以学习学英语	https://www.reddit.com
daniweb：质量比较高的问答平台	https://www.daniweb.com
LeetCode：国内的 leetcode 一样都是刷题用的	https://leetcode.com
LintCode：LintCode 领扣上有数量超过 1000 道的算法题目和人工智能题目	https://www.lintcode.com
Codeforces：全球最著名的在线评测系统之一	http://codeforces.com/
Topcoder：世界上规模最大的编程网站	https://www.topcoder.com
tutorialspoint：在线学习的网站，并且免费，里面有各种技术、各个知识点的讲解和demo	https://www.tutorialspoint.com/index.htm
codecademy：简化编程学习的过程	https://www.codecademy.com
Livecoding.tv：为全球程序员提供一个实时高效的互动平台	https://www.livecoding.tv/accounts/login/
Dzone：技术涵盖比较全面的网站	https://dzone.com
simpleprogrammer：纯技术文章不多，指导建议性的文章比较多	https://simpleprogrammer.com/
SitePoint：学习 Web 设计和开发 HTML5，CSS3，JavaScript，PHP，移动应用	https://www.sitepoint.com/web
YouTobe：国内的哔哩哔哩一样，各类视频汇聚于此，当然各国编程大神也在这啦	https://www.youtube.com/

⬆️ 返回顶部

设计规范

项目	地址
iPhone各设备屏幕尺寸	https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
移动屏幕尺寸设计规范	http://screensiz.es/phone
微信官方小程序UI样式库	https://weui.io/
各大尺寸设备响应式屏幕效果显示	http://www.responsinator.com/

⬆️ 返回顶部

可视化

推荐 brick design全场景可视化拖拽低代码前端框架
精彩待续。。。

项目	地址
brick-design：全场景可视化拖拽低代码前端框架	https://github.com/brick-design/brick-design

⬆️ 返回顶部

代码生成器

GitHub 2W 星：一键生成前后端代码
精彩待续。。。

项目	地址
jeecg-boot：一键生成前后端代码	https://github.com/zhangdaiscott/jeecg-boot

⬆️ 返回顶部

下载全网视频

GitHub 5W 星：一行命令下载全网视频的两个开源项目
精彩待续。。。

项目	地址
you-get：一行命令下载全网视频	https://github.com/soimort/you-get
annie：一行命令下载全网视频	https://github.com/iawia002/annie

⬆️ 返回顶部

酷炫的极客界面

项目	地址
eDEX-UI：酷炫的极客界面	https://github.com/GitSquared/edex-ui
lively：拉高程序员电脑桌面逼格	http://screensiz.es/phone

⬆️ 返回顶部

抠图神器

项目	地址
removebg	https://www.remove.bg/zh
在线 ps-uupoop	https://www.uupoop.com/

⬆️ 返回顶部

在线绘图

项目	地址
ProcessOn	https://www.processon.com/
draw.io	https://www.draw.io/
excalidraw	https://excalidraw.com/

⬆️ 返回顶部

颜色搭配

项目	地址
中科院色谱的**传统色	http://zhongguose.com/#yuhong
在线快速配色生成工具	https://coolors.co/
每天更新一组简洁舒服的配色方案	https://colorhunt.co/
MaterialDesign强大的在线配色	https://www.materialpalette.com/blue/purple
通过网址获取分析网站配色	http://webcolourdata.com/
炫酷多边形背景色块生成	https://trianglify.io/
色彩搜索引擎	https://picular.co/
流行的网格渐变背景免费下载	https://webgradients.com/
上传并匹配提取图片风格的颜色	http://www.colorfavs.com/

⬆️ 返回顶部

开发**

Github标星1.6W+，程序员不得不知的“潜规则”又火了，早知道就不会秃头了
精彩待续。。。

项目	地址
hacker-laws：最常见的定律、原则等	https://github.com/nusr/hacker-laws-zh

⬆️ 返回顶部

技术社区

项目	地址
GitHub：高质量的内容创作和分享平台	https://github.com/
stackoverflow：一个回答技术问题的网站	https://stackoverflow.com/
掘金：目前来看，国内的很多优质前端文章，都在掘金上	https://juejin.cn/
博客园：一个很纯粹的技术博客平台	https://www.cnblogs.com/
知乎：很多做技术的同学也开始玩知乎了，阿里的不少前端大牛在知乎上就非常活跃	https://www.zhihu.com/
segmentfault：比较低调的技术博客平台	https://segmentfault.com/
CSDN：广告太多，但奈何你这么老牌	https://www.csdn.net/
v2ex：一个关于分享和探索的地方	https://www.v2ex.com/
Node.js专业中文社区	https://www.jstips.co/
JS技巧：每天推出一个JS技巧的网站	http://cnodejs.org/
W3cplus：是一个致力于推广国内前端行业的技术博客	https://www.w3cplus.com/
印记中文：是最权威是技术中文文档社区	https://docschina.org/

⬆️ 返回顶部

博客团队

项目	地址
腾讯AlloyTeam	http://www.alloyteam.com/
腾讯社交用户体验ISUX	https://isux.tencent.com/
淘系前端团队	https://fed.taobao.org/
阿里巴巴国际UED	http://www.aliued.com/
京东凹凸实验室	https://aotu.io/
饿了么前端	https://zhuanlan.zhihu.com/ElemeFE
百度前端研发部FEX	http://fex.baidu.com/
360 奇舞团	https://75team.com/
美团技术团队	https://tech.meituan.com/
夜尽天明	https://github.com/biaochenxuying/blog

⬆️ 返回顶部

GitHub 统计

项目	地址
GitHub 全球排名：这个排名很权威	https://gitstar-ranking.com/
GitHub 中文排行榜、高分优秀中文项目	https://github.com/kon9chunkit/GitHub-Chinese-Top-Charts

⬆️ 返回顶部

前端大会

项目	地址
Vue.js 开发者大会：Vue.js 开发者大会**	https://fequan.com/
** JS 开发者大会：一场专注于 JavaScript 和 Node.js 技术的国际性大会	https://jsconfchina.com/
** CSS 开发者大会：提高 css 开发姿势的大会	https://css.w3ctech.com/
D2 前端技术论坛：阿里巴巴举办，分享技术的乐趣，探讨行业的发展	http://d2forum.alibaba-inc.com/

⬆️ 返回顶部

打包工具

项目	地址
NPM	https://www.npmjs.com/
Yarn	https://yarnpkg.com/zh-Hans/
Webpack	https://webpack.js.org/
Gulp	https://www.gulpjs.com.cn/
Babel	https://babeljs.io/
ESLint：可组装的 JavaScript 和 JSX 检查工具	https://cn.eslint.org/
PostCSS：用 JavaScript 工具和插件转换 CSS 代码的工具	https://www.postcss.com.cn/
rollup: 打包 npm 库	https://github.com/rollup/rollup
parcel: 和 webpack 类似的打包工具	https://github.com/parcel-bundler/parcel
systemjs：针对一些特殊场景会比较有用，比如云 ide，支付宝小程序 IDE 等	https://github.com/systemjs/systemjs
microbundle：基于 rollup，简化配置	https://github.com/developit/microbundle
bili：基于 rollup，同上	https://github.com/egoist/bili
vue-cli：vue 命令行工具	https://github.com/vuejs/vue-cli
create-react-app：react 官方脚手架	https://github.com/facebook/create-react-app
prepack：通过预先执行的方式优化打包结果	https://github.com/facebook/prepack
swc：基于 rust 的语法转换器，babel 的竞争者	https://github.com/swc-project/swc
nathan/pax：基于 rust，据说是这个星球最快的 JavaScript 打包工具	https://github.com/nathan/pax
pikapkg/web：浏览器里跑 npm 依赖，面向现代浏览器	https://github.com/pikapkg/web
lebab/lebab：把 es5 代码转成 es6，反向 babel	https://github.com/lebab/lebab
snowpack：现代Web的更快打包工具系统	https://github.com/pikapkg/snowpack

⬆️ 返回顶部

代码托管平台

项目	地址
coding：代码托管平台	https://coding.net/
码云：代码托管平台	https://gitee.com/
github：代码托管平台	https://github.com/
SVN：代码托管平台	https://svnbucket.com/?ADTAG=bdss#/
SVN：代码托管中心	http://www.svnchina.com/
git：官网	https://git-scm.com/
阿里云	https://www.aliyun.com
腾讯云	https://cloud.tencent.com/

⬆️ 返回顶部

调试抓包

项目	地址
whistle：代理抓包工具，很好很强大	https://wproxy.org/whistle/
Easy Mock	https://www.easy-mock.com
Fiddler：代理抓包工具	https://www.telerik.com/fiddler

⬆️ 返回顶部

开发工具

推荐 12 个提升程序员软技能与效率的必备工具，爱了爱了 👍
精彩待续。。。

项目	地址
VS Code	https://code.visualstudio.com/
Sublime Text	https://www.sublimetext.com/
WebStorm	https://www.jetbrains.com/webstorm/
Atom	https://atom.io/

⬆️ 返回顶部

录屏工具

推荐 GitHub 上很火的录屏工具，秒杀 33 种同行工具
精彩待续。。。

项目	地址
screenity	https://github.com/alyssaxuu/screenity

⬆️ 返回顶部

买房实用指南

推荐 2 个 Github 上超火的程序员买房必备实用指南！
精彩待续。。。

项目	地址
hangzhou_house_knowledge: 杭州	https://github.com/houshanren/hangzhou_house_knowledge
hangzhou_house_knowledge：上海	https://github.com/ayuer/shanghai_house_knowledge

⬆️ 返回顶部

优质的前端博客

公众号	作者	微信	地址	简介
全栈修炼	夜尽天明	CB834301747	https://github.com/biaochenxuying/blog	分享大前端开发相关的技术文章，热点资源，全栈程序员的成长之路
前端下午茶	SHERlocked93	qianyu443033099	https://github.com/SHERlocked93/blog	分享前端相关的技术博客、精选文章，期待在这里和大家一起进步！
前端UpUp	天天	DayDay2021	https://github.com/daydaylee1227/leetcode-Algorithms	leetcode算法相关的，从0到1刷leetcode。
前端从进阶到入院	ssh	sshsunlight	https://github.com/sl1673495/blogs	📖全网 100w+ 阅读量的进阶前端技术博客仓库，Vue 源码解析，React 深度实践，TypeScript 进阶艺术，工程化，性能优化实践……
iCSS前端趣闻	Coco	coco1s	https://github.com/chokcoco/iCSS	9300+ Stars 的 CSS 仓库，各种 CSS 奇技淫巧，在这里，都有。
若川视野	若川	ruochuan12	https://github.com/lxchuan12/blog	学习源码整体架构系列多篇，前端面试高频源码
前端布道师	苏南	su-south	https://github.com/meibin08/comics-program-life	一个用漫画演绎程序员日常轶事、分享前端前沿技术、大厂面经与干货的公众号，号主是个爱画画的前端切图崽，热爱代码的同时，也希望用漫画的形式让更多了解程序员。
秋风的笔记	秋风	qiufengblue	https://github.com/hua1995116/vuepress-blog	分享工程化、开源知识、有趣的前端知识。
前端食堂	童欧巴	hungryturbo	https://github.com/Geekhyt/front-end-canteen	你的前端食堂，吃好每一顿饭🍥
深圳湾码农	Rock	ruanxiongbiao	https://github.com/qappleh/Interview	分享BAT大厂面试题，每天攻破一道题，带你从0到1系统构建web全栈完整的知识体系！
进击的大前端	蒋鹏飞	ffx313	https://github.com/dennis-jiang/Front-End-Knowledges	成体系的前端进阶知识
小鹿动画学编程	小鹿	lxq17853556107	https://github.com/luxiangqiang/Blog	全Github唯一动画仓库，用动画的形式把前端技术讲的淋漓尽致！也包括自己整理的前端面试和进阶文章分享，欢迎关注哦！
编程如画	大鹏	aaron875499765	https://github.com/guanpengchn/blog	全网最特别的画解算法，mdnice作者官方博客
前端思维框架	ViktorHub	viktorhub	https://github.com/ViktorWong/my-docs	建设Web全栈数字图书馆，揭秘Web全栈架构师，打造个人核心竞争力。

⬆️ 返回顶部

图标

项目	地址
Font Awesome：网站开发最流行的图标集	http://www.fontawesome.com.cn/
Feather：简洁美观的开源图标	https://feathericons.com/
Ionicons：精心绘制的开源图标	https://ionicons.com/
Simple Icons：常见品牌的 SVG 图标：轻快、精美的符号图标，包括常见操作和事项	https://simpleicons.org/
Material Design Icons	https://material.io/resources/icons/
Tabler Icons：3500+ 枚可定制的开源 SVG 图标	https://tabler-icons.io/

⬆️ 返回顶部

色彩

项目	地址
Material Design Colors	https://www.materialui.co/colors
Flat UI Colors：14 组配色、280 种颜色	https://flatuicolors.com/
Color Hunt：分享色彩搭配的自由开放平台，包括成千上万人工选取的配色，可以从中获取配色的灵感	https://colorhunt.co/
Color Space：配色方案、CSS 颜色渐变生成工具	https://mycolor.space/
uiGradients：美观的颜色渐变	http://www.uigradients.com/
Colors and Fonts：色彩和字体工具	https://colorsandfonts.com/
Coolors：配色方案生成工具	https://coolors.co/

⬆️ 返回顶部

插画

项目	地址
Undraw：持续更新的精美的 SV�G 插画集	https://undraw.co/illustrations
manypixels：免费插画集	https://gallery.manypixels.co/
IRA Design：通过调配渐变色、搭配手绘组件定制插画	https://iradesign.io/gallery/illustrations
Free Illustrations by Lukasz Adam：免费 SVG 插画	https://lukaszadam.com/illustrations
Blobmaker：在线 SVG 形状生成器	https://www.blobmaker.app/
Get Waves：在线 SVG 波形生成器	https://getwaves.io/

⬆️ 返回顶部

图片

项目	地址
Unsplash：可供免费使用的图片	https://unsplash.com/
Pexels：精美的免费图片和视频	https://www.pexels.com/
Burst：免费高分辨率图片，可用于网站和商业用途	https://burst.shopify.com/
ISO Republic：使用 CC0 许可的免费高分辨率图片和视频	https://isorepublic.com/
Pixabay：令人惊叹的免费（公共领域）图片和视频站点	https://pixabay.com/
StockSnap：精美的免费图片，同样使用 CC0 许可	https://stocksnap.io/
Photopea：在线图片编辑工具，支持大量高级功能	https://www.photopea.com/
Online Image Compressor：在线图片压缩工具，一次可以压缩多达 20 张图片	https://imagecompressor.com/
Bulk Resize Photos：最快的在线图片缩放工具（图片缩放和压缩在本地完成，无需上传到服务器	https://bulkresizephotos.com/en

⬆️ 返回顶部

设计工具

项目	地址
墨刀：原型设计工具	https://modao.cc/
蓝湖：一款产品文档和设计图的在线协作平台	https://lanhuapp.com
PxCook（像素大厨）：高效易用的自动标注工具	https://www.fancynode.com.cn/pxcook

⬆️ 返回顶部

WEB 技术清单

2020-WEB开发路线图，和即将到来的 2021-WEB技术清单
精彩待续。。。

项目	地址
developer-roadmap：开发人员路线图，循序渐进的指南和路径，以学习不同的工具或技术	https://github.com/kamranahmedse/developer-roadmap
developer-roadmap：中文地址	https://github.com/kamranahmedse/developer-roadmap/blob/master/translations/chinese

⬆️ 返回顶部

学习资源

⬆️ 返回顶部

服务器

笔者觉得每个开发者都应该拥有自己的网站和服务器，这可是很酷的事情，学习 Linux、跑跑脚本、建站、搭博客啥的都行啊。

因为笔者就有自己的服务器，而且有两台了，用于平时的学习，还搭建了自己的网站。

有不少读者问过我，为什么我学的那么快的呢？怎么在一年内学了那么知识的...

其实也没什么秘决，就是平时有自己的服务器了，就爱折腾，学到的知识能很快得到验证，所以学起来兴致高一点。

特别是大三和大四的学生、刚入门的初级前端，买了服务器，搭建个项目给面试官看也香，对找工作和面试都加分，还可以熟悉技术栈。

想学得快，就得有自己的服务器来折腾才行。

阿里云、腾讯云、华为云 都有，这里购买就是最优惠：低于 1 折、89/年、229/3年，比学生机还便宜）

比如笔者的两个网站：

https://biaochenxuying.cn/

https://www.kwgg2020.com/

撩我

猫哥的年终总结在这里：前端工程师的 2020 年终总结 - 乾坤未定，你我皆黑马，希望能带给你一点启发。

关于猫哥，请点这里

微信: CB834301747	公众号: 前端GitHub

欢迎关注微信公众号 “前端GitHub”，回复 电子书 就送你 1000+ 本精华编程电子书；回复 1024 送你一套完整的前端视频教程。

有需要的就来拿吧，绝对免费，无套路获取。

frontendgithub's People

Contributors

Stargazers

Watchers

Forkers

keyman9848 dadalong androidioswebembeddedfirmwaredver nemozzz00 thb2004 monkeyinshell cl-1234 mrmengj kobelin923 joeyz2020 kevinztw zhujinrui yymfp tudoula mrcaocoder lachanar ningsy1017 luzhaoxuan 15831434134 minxipa lihui2020 wwwk steadyhua ivigne fanqingtang liuyongkun2018 19931205yhp chengxingye lijunshuang ruanzhixiong qgtiger sillyzhe obaqiang zhangyf02 lishasha1314 lamour0818 zhouyaxiu ruo-qi morecurious yallophu shianiiiu lydiali9 gossip-girl duyuxuan qztymp cumtzuo daiyichen ywx6265 webwhb007 tinaxu-come-on kezhongfa funnyy0ung hope-man cyangofficial keeperererer lixia9 lucoo01 windy-zheng lrxugithub golderbrother strivezc genzhen 215359721 zonghuaj fandygit juniversey ray-blog huzhenxiao jonyhuang scalerone fang-kang wyuange weiyeli s-aaa frankjingzhi bypwan journeyc ttroublemaker hhy5277 zaggerj wustdjf momtboy xiaoyouer carsonhuang520 benbtx moxiewf ck1038 keekuun oldtimestj gleancoder1116 skyplaying wongq shervinchen linhuibin98 yjin1915 cheese-q deangle linbudu599 stdsuperman wzhy0576

frontendgithub's Issues

Web 趋势榜：上周最热门的 10 大 Web 项目 - 210410

大家好，我是你们的猫哥，那个不喜欢吃鱼、又不喜欢喵的超级猫 ~

GitHub 上面有个 Trending 榜 (趋势榜)，在 Trending 页面，你可以看到最近一些热门的开源项目或者开发者，这个页面可以算是很多人主动获取一些开源项目和活跃开发者最好的途径。

所以猫哥会在每周的周一给大家推荐一篇上周的 前端周趋势榜的 10 大项目，每月给大家推荐一篇上个月的 前端月趋势榜的 20 大项目，方便大家知道最近都开源了哪些好的前端项目，还有用到的主流前端技术栈又是哪些，以免错过了好的开源项目。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

1. react-spring

react-spring是一个基于弹簧物理学的动画库，应满足您大多数与UI相关的动画需求。它为您提供了足够灵活的工具，可以自信地将您的想法投射到不断变化的界面中。

该库代表了一种现代的动画制作方法。它的灵感很大程度上来自克里斯托弗·切多（Christopher Chedeau）的动画和成娄（Cheng Lou）的反应动作。它继承了动画强大的插值和性能，以及 react-motion 的易用性。

但是，虽然动画主要是命令性的，而反应运动主要是声明性的，但反应弹簧却在两者之间架起了桥梁。您会惊讶于静态数据如何通过小的显式实用函数轻松转换为运动，而这些函数不一定会影响您形成视图的方式。

https://github.com/pmndrs/react-spring

2. WMR

微型的多合一开发工具，用于现代 Web 应用程序，在一个 2mb 的文件中，没有任何依赖关系。

https://github.com/preactjs/wmr

3. dumi

基于 Umi 的文档工具可以帮助您开发库和编写文档。

https://github.com/umijs/dumi

4. RESTful API Node Server Boilerplate

一个样板/入门项目，用于使用 Node.js，Express 和 Mongoose 快速构建 RESTful API。

通过运行单个命令，您将在计算机上安装并完全配置可投入生产的 Node.js 应用程序。该应用程序具有许多内置功能，例如使用 JWT 进行身份验证，请求验证，单元和集成测试，持续集成，泊坞窗支持，API 文档，分页等。

https://github.com/hagopj13/node-express-boilerplate

5. React Email Editor

用于 React.js 的拖放式电子邮件编辑器组件，作为 React.js 包装器组件。这是您应用程序中功能最强大且对开发人员友好的可视电子邮件生成器。

https://github.com/unlayer/react-email-editor

6. Pro Git, Second Edition

Pro Git 书第二版，完整的 Pro Git 书。

https://git-scm.com/book/zh/v2

7. Authelia

Authelia 是一个开源身份验证和授权服务器，可通过 Web 门户为您的应用程序提供 2 要素身份验证和单点登录（SSO）。它充当反向代理（如nginx，Traefik或HAProxy）的伴侣，以使他们知道查询是否应该通过。未经身份验证的用户将重定向到 Authelia 登录门户。

https://github.com/authelia/authelia

8. Frontend Development Bookmarks

手动为前端 Web 开发人员收集资源。

https://github.com/dypsilon/frontend-dev-bookmarks

9. kolorist

一个用于着色 stdin / stdout 的小实用程序

https://github.com/marvinhagemeister/kolorist

10. Autarky

从 node_modules 释放磁盘空间

https://github.com/pranshuchittora/autarky

最后

前端GitHub 专注于挖掘 GitHub 上优秀的前端开源项目，并以专题的形式推荐，每专题大概 10 个好项目，每周会有一到三篇精华文章推送。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

原文链接请看下方宝藏仓库，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

往期精文

微信搜 “前端GitHub”，回复 “电子书” 即可以获得下面 300 本技术精华书籍哦，猫哥 wx：CB834301747 。

不知不觉，原创文章已经写到第 38 期了呢，几乎每一篇都是猫哥精心挑选的优质开源项目，推送的每一篇文章里面的项目几乎都是对前端开发很有帮助的。

原创不易，一篇优质的文章都是要肝几个晚上才能肝出来的，花费很多时间、精力去筛选和写推荐理由，大佬们看完文章后顺手点个赞或者转发吧，就当给猫哥一点鼓励吧。

前端月趋势榜：6 月最流行、最热门的 20 个前端开源项目 - 2106

大家好，我是你们的猫哥，那个不喜欢吃鱼、又不喜欢喵的超级猫 ~

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

1. nocodb

NocoDB 是 Airtable 的开源替代方案，可以“一键”将 MySQL、PostgreSQL、SQL Server、SQLite 和 MariaDB 转换为智能电子表格，提供了丰富的电子表格界面，支持搜索、排序、过滤、隐藏列等功能。

https://github.com/nocodb/nocodb

2. prisma

Prisma 是包含以下工具的下一代 ORM：

Prisma Client：针对Node.js和TypeScript的自动生成且类型安全的查询生成器
Prisma Migrate：声明性数据建模和迁移系统
Prisma Studio：用于查看和编辑数据库中数据的GUI
Prisma Client 可以在任何 Node.js 或 TypeScript 后端应用程序（包括无服务器应用程序和微服务）中使用。这可以是 REST API，GraphQL API，gRPC API 或任何其他需要数据库的东西。

https://github.com/prisma/prisma

3. n8n

n8n 是一款开源的自动工作流服务，类似 IFTTT、Zapier，可以互联互通包括 GitHub、Dropbox、Google、NextCLoud、RSS、Slack、Telegram 在内的几十款在线服务。实现当 A 条件发生，触发 B 服务这样的自动工作流程。

https://github.com/n8n-io/n8n

4. electron

electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台的桌面应用程序。

它基于 Node.js 和 Chromium，被 Atom 编辑器和许多其他应用程序使用。

https://github.com/electron/electron

5. next.js

这是一个用于生产环境的 React 框架。

Next.js 为您提供生产环境所需的所有功能以及最佳的开发体验：包括静态及服务器端融合渲染、支持 TypeScript、智能化打包、路由预取等功能无需任何配置。

https://github.com/vercel/next.js

6. tailwindcss

一个实用程序优先的 CSS 框架，用于快速构建自定义用户界面。

无需离开您的 HTML，即可快速建立现代网站。

Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。

https://github.com/tailwindlabs/tailwindcss

7. React

一个声明性，高效且灵活的 JavaScript 库，用于构建用户界面。

声明式

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。

以声明式编写 UI，可以让你的代码更加可靠，且方便调试。

组件化

创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。

组件逻辑使用 JavaScript 编写而非模板，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。

一次学习，随处编写

无论你现在正在使用什么技术栈，你都可以随时引入 React 来开发新特性，而不需要重写现有代码。

React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。

https://github.com/facebook/react

React 相关的项目可以看: 一个 React 技术揭秘的项目，自顶向下的 React 源码分析。

8. Vite

Vite，一个基于浏览器原生 ES imports 的开发服务器。

利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。

同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打。

虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。

Vite 具有以下特点：

快速的冷启动
即时热模块更新（HMR，Hot Module Replacement）
真正按需编译

https://github.com/vitejs/vite

9. graphql-engine

Hasura GraphQL Engine 是一个超快的 GraphQL 服务器，可以让你基于 Postgres 数据库快速简历 GraphQL API 服务。通过数据库事件实现 webhook triggers ，其 remote schemas 用于构建业务逻辑。

https://github.com/hasura/graphql-engine

10. vscode

Visual Studio Code 是一个运行于 OS X，Windows 和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台编辑器。

也是当今天前端最流行的编辑器！

https://github.com/microsoft/vscode

11. zx

zx 是一个更方便、更友好帮助开发者写脚本的工具。

Bash 很好，但是在编写脚本的时候，人们通常会选择一种更方便的编程语言，JavaScript 就是一个很完美的选择。但是标准的 Node.js 库在使用之前需要许多额外的操作，比如安装、引入库等，zx 提供一个包装器 child_process，用于转义参数并提供合并的默认值。

#!/usr/bin/env zx  
  
await $`cat package.json | grep name`  
  
let branch = await $`git branch --show-current`  
await $`dep deploy --branch=${branch}`  
  
await Promise.all([  
  $`sleep 1; echo 1`,  
  $`sleep 2; echo 2`,  
  $`sleep 3; echo 3`,  
])  
  
let name = 'foo bar'  
await $`mkdir /tmp/${name}`

https://github.com/google/zx

12. animate.css

Animate.css 是一个有趣的，跨浏览器的 css3 动画库，内置了很多典型的 css3 动画，兼容性好使用方便。

https://github.com/animate-css/animate.css

13. bootstrap

Bootstrap 是快速开发 Web 应用程序的前端工具包。它是一个 CSS，HTML 和 JS 的集合，它使用了最新的浏览器技术，给你的 Web 开发提供了时尚的版式，表单，buttons，表格，网格系统等等。

https://github.com/twbs/bootstrap

14. Vue.js

Vue.js 是一个渐进式 JavaScript 框架，也是目前前端最流行的框架。

易用

已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！

灵活

不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。

高效

20kB min+gzip 运行大小
超快虚拟 DOM
最省心的优化

https://github.com/vuejs/vue

Vue 相关的项目可以看看：推荐 7 个 Vue2、Vue3 源码解密分析的开源项目和 Vue3 的学习教程汇总、源码解释项目、支持的 UI 组件库、优质实战项目，你会找到 Vue 的学习宝藏库。

15. playwright

Node.js 库可通过单个 API 自动化 Chromium，Firefox 和 WebKit。

Playwright 由 Microsoft 创建，是一个开放源代码浏览器自动化框架，使 JavaScript 工程师可以在 Chromium，Webkit 和 Firefox 浏览器上测试其 Web 应用程序。

https://github.com/microsoft/playwright

16. docz

docz 强大简单的文档管理工具

使用 docz 我们可以用来方便的编写以及发布文档，同时提供漂亮友好的交互，可以快速的制作一个产品级的站点，使用了 mdx 文件（还是markdown），同时可以方便的集成到自己的 web 项目中。

https://github.com/pedronauck/docz

17. docusaurus

Docusaurus 帮你快速构建并优化网站，让你专注于创作内容。

https://github.com/facebook/docusaurus

18. TypeScript

为 JavaScript 提供静态类型安全性的 JavaScript 的超集。

赢得了转译者与竞争对手 Flow 的战斗，几乎成为前端和后端开发的标准。

DefinitelyTyped 项目为 7000 多个软件包提供了其他类型！

https://github.com/microsoft/TypeScript

更多学习资料请看推荐 7 个学习 TypeScript 的宝库。

19. ant-design

一套企业级 UI 设计语言和 React 组件库。

✨ 特性

🌈 提炼自企业级中后台产品的交互语言和视觉风格。
📦 开箱即用的高质量 React 组件。
🛡 使用 TypeScript 开发，提供完整的类型定义文件。
⚙️ 全链路开发和设计工具体系。
🌍 数十个国际化语言支持。
🎨 深入每个细节的主题定制能力。

https://github.com/ant-design/ant-design

20. react-use

必不可少的 React Hooks 集合. libreact 的端口

https://github.com/streamich/react-use

最后

好了，6 月的前端月趋势榜中最热门的 20 大前端开源项目就是上面那些了。

大家发现了没有，上面的项目中的很多个，猫哥都已经推荐过了的。

这个世界发展的真相就是马太效应，强者越强，弱者越弱。

开源项目也符合上面的规律，好的开源项目， Star 数会越来越多，会得到很多外力的推广(比如猫哥的推荐)，并且是呈现出指数型增长的。

往期精文请看下方宝藏仓库，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

往期精文

公众号：前端GitHub，专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称，致力于打造最优质的前端开源项目资源库。

微信搜索 前端GitHub，回复 电子书 就送你 1000+ 本精华编程电子书；回复 1024 送你一套完整的前端视频教程，绝对免费，无套路获取。。

不知不觉，原创文章已经写到第 49 期了呢，几乎每一篇都是猫哥精心挑选的优质开源项目，推送的每一篇文章里面的项目几乎都是对前端开发很有帮助的。

更新并运营大半年不易，大佬们看完文章后顺手点个赞或者转发吧，就当给猫哥一点鼓励吧，谢谢。

Web 趋势榜：上周不可错过的最热门的 10 大 Web 项目 - 210416

大家好，我是你们的猫哥，那个不喜欢吃鱼、又不喜欢喵的超级猫 ~

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

1. utility-types

实用程序类型的集合，是对 TypeScript 内置映射类型和别名的补充（对于静态类型，请考虑“ lodash”）。

https://github.com/piotrwitek/utility-types

2. active-win

获取有关活动窗口的元数据（标题，ID，范围，所有者，URL等）

适用于 macOS，Linux 和 Windows。

使用 macOS 10.13 或更早版本的用户需要下载 Swift 运行时支持库。

https://github.com/sindresorhus/active-win

3. Cheetah Grid

最快的 Web 开源数据表。

https://github.com/future-architect/cheetah-grid/

4. Superplate

具有 Typescript，Jest，测试库，样式化组件，Sass，Css，.env，Fetch，Axios，反向代理，Bundle Analyzer 和 30+ 插件的结构良好的生产就绪前端样板。

目前，仅为 Next.js 创建项目。

https://github.com/pankod/superplate

5. React Cool Portal

这是 Portal 的 React 钩子。它可以帮助您将子级渲染到父组件的 DOM 层次结构之外的 DOM 节点中。从现在开始，您将不再需要使用模态，下拉菜单，工具提示等。

https://github.com/wellyshen/react-cool-portal

6. Lazy Git

git 命令的简单终端 UI，使用 gocui 库用 Go 编写。

https://github.com/jesseduffield/lazygit

7. ts-essentials

所有必不可少的 TypeScript 类型集中在一处

https://github.com/krzkaczor/ts-essentials

8. Awesome Captcha

精选的验证码库和破解工具的精选列表。

https://github.com/ZYSzys/awesome-captcha

9. bundless

用于 esbuild 的开发服务器和捆绑器

https://github.com/remorses/bundless

10. CSS Layout

使用 CSS 制作的流行布局和图案的集合。现在，它具有 90 多种模式，并且还在不断增长！

🎉零依赖
🎉没有框架
🎉没有 CSS 骇客
🎉实际用例
良好做法（即将推出）
辅助功能支持（即将推出）

https://github.com/phuoc-ng/csslayout

最后

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

前端GitHub 专注于挖掘 GitHub 上优秀的前端开源项目，并以专题的形式推荐，每专题大概 10 个好项目，每周会有一到三篇精华文章推送。

原文链接请看下方宝藏仓库，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

往期精文

微信搜 “前端GitHub”，回复 “电子书” 即可以获得下面 300 本技术精华书籍哦，猫哥 wx：CB834301747 。

不知不觉，原创文章已经写到第 40 期了呢，几乎每一篇都是猫哥精心挑选的优质开源项目，推送的每一篇文章里面的项目几乎都是对前端开发很有帮助的。

前端月趋势榜：4 月最热门的 20 个前端开源项目 - 又增加了那么多个好的开源项目！- 2104

大家好，我是你们的猫哥，那个不喜欢吃鱼、又不喜欢喵的超级猫 ~

相信很多人都没有逛 GitHub 的习惯，因此总会有开源信息的不对称，有哪些优秀的前端开源项目值得学习的也不知道。

从 2018 年开始，我就养成了每天逛 GitHub 的习惯，一般在早上上班前或者中午午休的时候都会逛一下。

看看每天都开源了哪些好的前端项目，还有用到的主流前端技术栈又是哪些，值得我去学习的。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

1. headless-ui

一组完全没有样式的，完全可访问的 UI 组件，旨在与 Tailwind CSS 完美集成。

https://github.com/tailwindlabs/headlessui

2. react-flow

React Flow 是一个用于构建基于节点的图的库。您可以轻松实现自定义节点类型，并且它附带一些组件，例如迷你地图和图形控件。随意查看示例或阅读博客文章以开始使用。

https://github.com/wbkd/react-flow

3. Vite

Vite，一个基于浏览器原生 ES imports 的开发服务器。

利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。

同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打。

虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。

Vite 具有以下特点：

快速的冷启动
即时热模块更新（HMR，Hot Module Replacement）
真正按需编译

https://github.com/vitejs/vite

4. tailwindcss

一个实用程序优先的 CSS 框架，用于快速构建自定义用户界面。

无需离开您的 HTML，即可快速建立现代网站。

https://github.com/tailwindlabs/tailwindcss

5. tauri

Tauri 是用于为所有主要桌面平台构建超小型快速二进制文件的框架。开发人员可以集成可编译为 HTML，JS 和 CSS 的任何前端框架，以构建其用户界面。该应用程序的后端是带有锈源的二进制文件，带有可与前端进行交互的 API。

Tauri 应用程序中的用户界面目前 winit 在 macOS 和 Windows 上以及 gtk 在 Linux 上通过 Tauri-team 培养并维护的 WRY 作为窗口处理库加以利用，WRY 可以利用 macOS 上的 WebKit，Windows 和 Linux 上的 WebKitGTK。

https://github.com/tauri-apps/tauri

6. vscode

Visual Studio Code 是一个运行于 OS X，Windows 和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台编辑器。

也是当今天前端最流行的编辑器！

https://github.com/microsoft/vscode

7. Vue.js

Vue.js 是一个渐进式 JavaScript 框架，也是目前前端最流行的框架。

易用

已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！

灵活

不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。

高效

20kB min+gzip 运行大小
超快虚拟 DOM
最省心的优化

https://github.com/vuejs/vue

8. React

一个声明性，高效且灵活的 JavaScript 库，用于构建用户界面。

声明式

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。

以声明式编写 UI，可以让你的代码更加可靠，且方便调试。

组件化

创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。

组件逻辑使用 JavaScript 编写而非模板，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。

一次学习，随处编写

无论你现在正在使用什么技术栈，你都可以随时引入 React 来开发新特性，而不需要重写现有代码。

React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。

https://github.com/facebook/react

React 相关的项目可以看: 一个 React 技术揭秘的项目，自顶向下的 React 源码分析。

9. prisma

Prisma 是包含以下工具的下一代 ORM：

Prisma Client：针对Node.js和TypeScript的自动生成且类型安全的查询生成器
Prisma Migrate：声明性数据建模和迁移系统
Prisma Studio：用于查看和编辑数据库中数据的GUI
Prisma Client 可以在任何 Node.js 或 TypeScript 后端应用程序（包括无服务器应用程序和微服务）中使用。这可以是 REST API，GraphQL API，gRPC API 或任何其他需要数据库的东西。

https://github.com/prisma/prisma

10. next.js

这是一个用于生产环境的 React 框架。

https://github.com/vercel/next.js

11. three.js

官网对 Threejs 的介绍非常简单：“Javascript 3D library”。openGL 是一个跨平台 3D/2D 的绘图标准，WebGL 则是 openGL 在浏览器上的一个实现。web 前端开发人员可以直接用 WebGL 接口进行编程，但 WebGL 只是非常基础的绘图 API，需要编程人员有很多的数学知识、绘图知识才能完成 3D 编程任务，而且代码量巨大。Threejs 对 WebGL 进行了封装，让前端开发人员在不需要掌握很多数学知识和绘图知识的情况下，也能够轻松进行 web 3D 开发，降低了门槛，同时大大提升了效率。

https://github.com/mrdoob/three.js

12. tiptap

基于 ProseMirror 的无头，与框架无关且可扩展的 RTF 编辑器。

https://github.com/ueberdosis/tiptap

13. Cypress

Cypress 是为现代网络而构建的下一代前端测试工具，用于解决开发者和 QA 工程师在测试现代应用程序时面临的关键难题。

Cypress 简化了设置测试、编写测试、运行测试和调试测试，支持端到端测试、集成测试和单元测试，支持测试在浏览器中运行的任意内容。支持 Mac OS、Linux 和 Windows 平台。

https://github.com/cypress-io/cypress

14. deno

一个安全的 JavaScript 和 TypeScript 运行时。

出于多种原因，2020 年是非常特殊的一年。最重要的一个：5 年以来的第一次，新星的总冠军不是 Vue.js，而是 Deno……真是令人惊讶！

Deno 是 Node.js 的创建者 Ryan Dahl 的 JavaScript 运行时。

凭借 10 年的经验和对 Node.js 的迭代经验，它通常被视为 Node.js 的续集，因为它可以修复或改进许多要点。

https://github.com/denoland/deno

15. react-use

必不可少的 React Hooks 集合. libreact 的端口

https://github.com/streamich/react-use

16. esbuild

它是一个「JavaScript」Bundler 打包和压缩工具，它可以将「JavaScript」和「TypeScript」代码打包分发在网页上运行。

esbuild 是一个用 Go 语言编写的用于打包，压缩 Javascript 代码的工具库。

它最突出的特点就是打包速度极快（extremely fast），下图是 esbuild 跟 webpack, rollup, Parcel 等打包工具打包效率的一个 benchmark:

https://github.com/evanw/esbuild

17. nuxt.js

易于使用的 Vue 框架, 使用 NuxtJS 充满信心地构建您的下一个 Vue.js 应用程序。一个开源框架，让 Web 开发变得简单而强大。

https://github.com/nuxt/nuxt.js

18. ant-design

一套企业级 UI 设计语言和 React 组件库。

✨ 特性

🌈 提炼自企业级中后台产品的交互语言和视觉风格。
📦 开箱即用的高质量 React 组件。
🛡 使用 TypeScript 开发，提供完整的类型定义文件。
⚙️ 全链路开发和设计工具体系。
🌍 数十个国际化语言支持。
🎨 深入每个细节的主题定制能力。

https://github.com/ant-design/ant-design

19. storybook

Storybook 是 UI 组件的开发环境，它允许开发者浏览组件库，查看每个组件的不同状态，以及交互地开发和测试组件。

Storybook 在 app 之外运行，这允许开发者独立地开发 UI 组件，这可以提高组件的重用性、可测试性和开发速度。所以可以快速构建，而不必担心应用程序特定的依赖关系。

特点：

附带了许多组件设计、文档、测试、交互性等内容
易于使用的 API 使它易于配置和扩展，甚至被扩展到支持移动的本地开发

https://github.com/storybookjs/storybook

20. vue-element-admin

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui 实现。

它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。

同时配套了系列教程文章，如何从零构建后一个完整的后台项目。

手摸手，带你用 vue 撸后台系列一(基础篇)
手摸手，带你用 vue 撸后台系列二(登录权限篇)
手摸手，带你用 vue 撸后台系列三 (实战篇)
手摸手，带你用 vue 撸后台系列四(vueAdmin 一个极简的后台基础模板)
手摸手，带你用 vue 撸后台系列五(v4.0新版本)
手摸手，带你封装一个 vue component
手摸手，带你优雅的使用 icon
手摸手，带你用合理的姿势使用 webpack4（上）
手摸手，带你用合理的姿势使用 webpack4（下）

该项目还在一直维护中。

而且也是配有使用文档的，很不错。

Github Star 数 62.2K， Github 地址：

https://github.com/PanJiaChen/vue-element-admin

最后

好了，4 月的前端月趋势榜中最热门的 20 大前端开源项目就是上面那些了。

大家发现了没有，上面的项目中的很多个，猫哥都已经推荐过了的。

这个世界发展的真相就是马太效应，强者越强，弱者越弱。 开源项目也符合上面的规律，好的开源项目， Star 数会越来越多，会得到很多外力的推广(比如猫哥的推荐)，并且是呈现出指数型增长的。

前端GitHub 专注于挖掘 GitHub 上优秀的前端开源项目，并以专题的形式推荐，每专题大概 10 个好项目，每周会有一到三篇精华文章推送。

往期精文请看下方宝藏仓库，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

公众号：前端GitHub，专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称，致力于打造最优质的前端开源项目资源库。

微信搜 “前端GitHub”，回复 “电子书” 即可以获得下面 300 本技术精华书籍哦，猫哥 wx：CB834301747 。

往期精文

不知不觉，原创文章已经写到第 42 期了呢，几乎每一篇都是猫哥精心挑选的优质开源项目，推送的每一篇文章里面的项目几乎都是对前端开发很有帮助的。

原创不易，一篇优质的文章都是要肝几个晚上才能肝出来的，花费很多时间、精力去筛选和写推荐理由，大佬们看完文章后，顺手来个一键三连吧，就当给猫哥一点鼓励吧。

博客

下方的顺序是随机的，不分先后。

SHERlocked93/blog

公众号：前端下午茶
作者：SHERlocked93
作者微信：qianyu443033099
简介：分享前端相关的技术博客、精选文章，期待在这里和大家一起进步！

https://github.com/SHERlocked93/blog

leetcode-Algorithms

公众号：前端UpUp
作者：天天
作者微信：DayDay2021
简介：leetcode 算法相关的，从 0 到 1 刷 leetcode

https://github.com/daydaylee1227/leetcode-Algorithms

sl1673495/blogs

公众号：前端从进阶到入院
作者：ssh
作者微信：sshsunlight
简介：全网 100w+ 阅读量的进阶前端技术博客仓库，Vue 源码解析，React 深度实践，TypeScript 进阶艺术，工程化，性能优化实践……

https://github.com/sl1673495/blogs

chokcoco/iCSS

公众号： iCSS前端趣闻
作者：Coco
作者微信：coco1s
简介：9300+ Stars 的 CSS 仓库，各种 CSS 奇技淫巧，在这里，都有。

https://github.com/chokcoco/iCSS

lxchuan12/blog

公众号：若川视野
作者：若川
作者微信：ruochuan12
简介：学习源码整体架构系列多篇，前端面试高频源码。

https://github.com/lxchuan12/blog

comics-program-life

公众号：前端布道师
作者：苏南
作者微信：su-south
简介：一个用漫画演绎程序员日常轶事、分享前端前沿技术、大厂面经与干货的公众号，号主是个爱画画的前端切图崽，热爱代码的同时，也希望用漫画的形式让更多了解程序员。

https://github.com/meibin08/comics-program-life

vuepress-blog

公众号：秋风的笔记
作者：秋风
作者微信：qiufengblue
简介：分享工程化、开源知识、有趣的前端知识

https://github.com/hua1995116/vuepress-blog

front-end-canteen

公众号：前端食堂
作者：童欧巴
作者微信：hungryturbo
简介：你的前端食堂，吃好每一顿饭🍥

https://github.com/Geekhyt/front-end-canteen

Interview

公众号：深圳湾码农
作者：Rock
作者微信：ruanxiongbiao
简介：分享BAT大厂面试题，每天攻破一道题，带你从0到1系统构建web全栈完整的知识体系！

https://github.com/qappleh/Interview

Front-End-Knowledges

公众号：进击的大前端
作者：蒋鹏飞
作者微信：ffx313
简介：成体系的前端进阶知识

https://github.com/dennis-jiang/Front-End-Knowledges

luxiangqiang/Blog

公众号：小鹿动画学编程
作者：小鹿
作者微信：lxq17853556107
简介：全 Github 唯一动画仓库，用动画的形式把前端技术讲的淋漓尽致！也包括自己整理的前端面试和进阶文章分享。

https://github.com/luxiangqiang/Blog

guanpengchn/blog

公众号：编程如画
作者：大鹏
作者微信：aaron875499765
简介：全网最特别的画解算法，mdnice 作者官方博客。

https://github.com/guanpengchn/blog

ViktorWong/my-docs

公众号：前端思维框架
作者：ViktorHub
作者微信：viktorhub
简介：建设 Web 全栈数字图书馆，揭秘 Web 全栈架构师，打造个人核心竞争力。

https://github.com/ViktorWong/my-docs

biaochenxuying/blog

公众号：全栈修炼
作者：夜尽天明
作者微信：CB834301747
简介：分享大前端开发相关的技术文章，热点资源，全栈程序员的成长之路。

https://github.com/biaochenxuying/blog

最后

其实更多更好的原创前端博客文章仓库远远不止上面的这些，下次再分享一些原创前端博客文章仓库。

公众号：前端GitHub，专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

关于猫哥，大家可以看看我的年终总结前端工程师的 2020 年终总结 - 乾坤未定，你我皆黑马。

不知不觉，已经写到第 26 期了呢，往期精文请看下方宝藏仓库，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

往期精文

微信搜 “前端GitHub”，回复 “电子书” 即可以获得 160 本前端精华书籍哦，猫哥 WX：CB834301747 。

GitHub 5W 星：一行命令下载全网视频的两个开源项目

大家好，我是你们的猫哥，那个不喜欢吃鱼、又不喜欢喵的超级猫 ~

前言

相信大多数人都有想下载某个网站上的视频的想法，比如 B站、优酷、YouTube、腾讯视频等网站上的优质视频。

但是大多数视频网站没有提供下载的功能，如果你想下载，该怎么办？

有没有安全可靠且方便的方法，一键下载全网视频？

答案是：有的，今天推荐两个可以一键下载全网视频的 GitHub 项目。

可惜的是这个两个项目不是纯前端的项目，哈哈。

1. You-Get

第一个 GitHub 项目可完美解决下载问题，标星 39.2k，一行命令下载全网视频。

支持的国内网站：

如何使用

安装方法一：

you-get 的正式版本在 PyPI 上分发，可以通过 pip 软件包管理器从 PyPI 镜像轻松安装。请注意，您必须使用 Python 3 版本的 pip：

pip3 install you-get

安装方法二：通过 Antigen安装（适用于Zsh用户），将以下行命令添加到您的.zshrc中：

antigen bundle soimort/you-get

安装方法三：直接克隆或者下载该项目即可：

git clone git://github.com/soimort/you-get.git

如何下载

1. 可通过如下命令查看该视频的详细信息。

you-get -i '视频url'

$ you-get -i 'https://www.youtube.com/watch?v=jNQXAC9IVRw'
site:                YouTube
title:               Me at the zoo
streams:             # Available quality and codecs
    [ DEFAULT ] _________________________________
    - itag:          43
      container:     webm
      quality:       medium
      size:          0.5 MiB (564215 bytes)
    # download-with: you-get --itag=43 [URL]

    - itag:          18
      container:     mp4
      quality:       medium
    # download-with: you-get --itag=18 [URL]

    - itag:          5
      container:     flv
      quality:       small
    # download-with: you-get --itag=5 [URL]

    - itag:          36
      container:     3gp
      quality:       small
    # download-with: you-get --itag=36 [URL]

    - itag:          17
      container:     3gp
      quality:       small
    # download-with: you-get --itag=17 [URL]

下载方式更简单，只需一行命令即可下载了：

you-get '视频url'

比如：

$ you-get http://www.fsf.org/blogs/rms/20140407-geneva-tedx-talk-free-software-free-society
Site:       fsf.org
Title:      TEDxGE2014_Stallman05_LQ
Type:       WebM video (video/webm)
Size:       27.12 MiB (28435804 Bytes)

Downloading TEDxGE2014_Stallman05_LQ.webm ...
100.0% ( 27.1/27.1 MB) ├████████████████████████████████████████┤[1/1]   12 MB/s

项目地址：

https://github.com/soimort/you-get

2. annie

另一个开源项目操作方法也差不多，只不过这个项目支持批量下载，还支持一些其它の网站。

Windows 用户可以使用 Scoop 安装。直接在 Windows powershell 输入以下命令即可。

scoop install annie

MacOS 用户通过 Homebrew 进行安装，需要分别安装 FFmpegpeg 以及 Annie。

brew install ffmpeg
brew install annie

直接下载视频

比如我们想下载 B站王刚师傅的美食视频教程，用法很简单，直接在 annie 命令后加上该页面链接即可，默认下载最高清晰度视频。

annie https://www.bilibili.com/video/BV1sE411n74q?from=search"&"seid=13486823342330625965

一段1080p 视频几秒钟就下载完成。

-i 命令：显示视频信息但不下载：用于查看所有不同清晰度的视频的信息。

$ annie -i https://www.youtube.com/watch?v=dQw4w9WgXcQ

 Site:      YouTube youtube.com
 Title:     Rick Astley - Never Gonna Give You Up (Video)
 Type:      video
 Streams:   # All available quality
     [248]  -------------------
     Quality:         1080p video/webm; codecs="vp9"
     Size:            49.29 MiB (51687554 Bytes)
     # download with: annie -f 248 ...

     [137]  -------------------
     Quality:         1080p video/mp4; codecs="avc1.640028"
     Size:            43.45 MiB (45564306 Bytes)
     # download with: annie -f 137 ...

     [398]  -------------------
     Quality:         720p video/mp4; codecs="av01.0.05M.08"
     Size:            37.12 MiB (38926432 Bytes)
     # download with: annie -f 398 ...

     [136]  -------------------
     Quality:         720p video/mp4; codecs="avc1.4d401f"
     Size:            31.34 MiB (32867324 Bytes)
     # download with: annie -f 136 ...

     [247]  -------------------
     Quality:         720p video/webm; codecs="vp9"
     Size:            31.03 MiB (32536181 Bytes)
     # download with: annie -f 247 ...

-f 命令：指定清晰度下载视频

根据刚才我们得到的视频信息，我们可以选择下载360p画质的视频：即在annie 命令后，加入选项 -f 16。

annie -f 16 https://www.bilibili.com/video/BV1sE411n74q?from=search"&"seid=13486823342330625965

-F 命令：批量下载视频

这个方法非常实用，比如在 B站上面可能会有一些优质的视频，但是过不了多久就会被下降，利用这个功能，你就能批量保存 B站或者其它视频网站的视频。

$ annie -F ~/Desktop/u.txt

 Site:      微博 weibo.com
 Title:     在Google，我们设计什么？ via@阑夕
 Type:      video
 Stream:
     [default]  -------------------
     Size:            19.19 MiB (20118196 Bytes)
     # download with: annie -f default "URL"

 19.19 MiB / 19.19 MiB [=================================] 100.00% 9.69 MiB/s 1s

......

项目地址：

https://github.com/iawia002/annie

最后

初级前端与高级前端之间，很多时候并不是懂的知识点有多难的差别，很大原因就是投入学习前端的时间、经验的差别，其实就是信息差。

如果有一个地方能又快又好的获得这些优质的前端信息，那么将会大大缩短从初级到高级的时间。

前端GitHub 就是这样一个仓库，能帮助前端开发人员节省时间的仓库！

公众号：前端GitHub，专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称。

已经推荐了 面试项目、CSS 奇技淫巧项目、代码规范项目、数据结构与算法项目、JavaScript 奇技淫巧项目、前端必备在线工具 等专题的近 200 个优秀项目了。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

关于猫哥，大家可以看看我的年终总结前端工程师的 2020 年终总结 - 乾坤未定，你我皆黑马。

不知不觉，已经写到第 25 期了呢，往期精文请看下方宝藏仓库，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

往期精文

微信搜 “前端GitHub”，回复 “电子书” 即可以获得 160 本前端精华书籍哦，猫哥 WX：CB834301747 。

前端趋势榜：上周最热门的 10 大前端项目 - 210327

大家好，我是你们的猫哥，那个不喜欢吃鱼、又不喜欢喵的超级猫 ~

关于猫哥，大家可以看看我的年终总结前端工程师的 2020 年终总结 - 乾坤未定，你我皆黑马。

猫哥从 2016 年加入 GitHub，到现在的 2020 年，快整整 5 个年头了。

相信很多人都没有逛 GitHub 的习惯，因此总会有开源信息的不对称，有哪些优秀的前端开源项目值得学习的也不知道。

从 2018 年开始，我就养成了每天逛 GitHub 的习惯，一般在早上上班前或者中午午休的时候都会逛一下。

看看每天都开源了哪些好的前端项目，还有用到的主流前端技术栈又是哪些，值得我去学习的。

所以猫哥会在每周的周一给大家推荐一篇上周的 前端趋势榜的 10 大项目，方便大家知道每周都开源了哪些好的前端项目，还有用到的主流前端技术栈又是哪些，以免错过了好的开源项目。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

1. Vite

+85 Star / day

Vite，一个基于浏览器原生 ES imports 的开发服务器。

利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。

同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打。

虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。

Vite 具有以下特点：

快速的冷启动
即时热模块更新（HMR，Hot Module Replacement）
真正按需编译

https://github.com/vitejs/vite

2. React

+75 Star / day

一个声明性，高效且灵活的 JavaScript 库，用于构建用户界面。

声明式

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。

以声明式编写 UI，可以让你的代码更加可靠，且方便调试。

组件化

创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。

组件逻辑使用 JavaScript 编写而非模板，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。

一次学习，随处编写

无论你现在正在使用什么技术栈，你都可以随时引入 React 来开发新特性，而不需要重写现有代码。

React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。

https://github.com/facebook/react

React 相关的项目可以看: 一个 React 技术揭秘的项目，自顶向下的 React 源码分析。

3. javascript-algorithms

+66 Star / day

该仓库包含了多种基于 JavaScript 的算法与数据结构。

每种算法和数据结构都有自己的 README，包含相关说明和链接，以便进一步阅读 (还有 YouTube 视频) 。

数据结构包含了链表、双向链表、队列、栈、哈希表(散列)、堆、优先队列、字典树、树、优先队列、二叉查找树、AVL 树、红黑树、线段树、树状数组、图、并查集、布隆过滤器

这项目还出了对应的教学视频，总共 81 个视频讲解，每个视频大概 5 - 10分钟左右，还能学习英语哦 😉

youtube 的教学视频：https://www.youtube.com/playlist?list=PLLXdhg_r2hKA7DPDsunoDZ-Z769jWn4R8

猫哥之前学习算法的时候，也在这个项目中收益良多呢！

而且这个项目还一直有维护和更新内容哦！真的非常不错的一个项目！

https://github.com/trekhleb/javascript-algorithms

更多算法相关的项目推荐可以看看这篇文章：7 个 GitHub 上超火的前端学习的数据结构与算法项目

4. Awesome

+63 Star / day

Awesome列出了各种有趣的话题。

平台类、编程语言、前端开发、后端开发、计算机科学、大数据、理论、图书、编者、赌博、开发环境、娱乐、资料库、媒体、学、安全、内容管理系统、硬件、商业、工作、联网、分散系统、高等教育、大事记、测验、各种各样的。

https://github.com/sindresorhus/awesome

5. material-ui

+61 Star / day

快速构建漂亮的 React 应用程序。

Material-UI 是一个简单且可自定义的组件库，用于构建更快，更美观，更易于访问的 React 应用程序。遵循您自己的设计系统，或从材料设计开始。

https://github.com/mui-org/material-ui

6. Cypress

+53 Star / day

Cypress 是为现代网络而构建的下一代前端测试工具，用于解决开发者和 QA 工程师在测试现代应用程序时面临的关键难题。

https://github.com/cypress-io/cypress

7. ccxt

+52 Star / day

CCXT(CryptoCurrency eXchange)交易库，一个 JavaScript/Python/PHP 加密货币交易库，支持超过 100 种山寨币与比特币交易所。

用于加密货币交易和电子商务的 JavaScript/Python/PHP 库，支持许多比特币/以太网/山寨币交易所和商家 API。

CCXT 库用于连接和交易全球的加密货币/山寨币交易所和支付处理服务。它可以快速访问市场数据，用于存储，分析，可视化，指标开发，算法交易，策略回溯测试，机器人编程，网上商店集成和相关软件工程。

它旨在供编码人员，开发人员，技术熟练的交易员，数据科学家和金融分析师用于构建交易算法。

当前功能列表：

支持许多交易市场，甚至即将推出的
为所有交易提供完整的公共和私人 API
所有货币，山寨币和标记，价格，订单，交易，代码等...
提供用于交叉交换或跨货币分析和套利的可选标准化数据
开箱即用的统一的一体化 API，非常易于集成
适用于 Node7.6+，Python2和3，PHP5.4+，Web 浏览器

https://github.com/ccxt/ccxt

8. vscode

+48 Star / day

Visual Studio Code 是一个运行于 OS X，Windows 和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台编辑器。

也是当今天前端最流行的编辑器！

https://github.com/microsoft/vscode

9. tinacms

+48 Star / day

Tina 是一个开源编辑器，可帮助将可视化编辑构建到 React 网站中。

Tina 使开发人员能够在不牺牲代码质量的情况下为其团队提供上下文和直观的编辑体验。

https://github.com/tinacms/tinacms

10. tailwindcss

+45 Star / day

一个实用程序优先的 CSS 框架，用于快速构建自定义用户界面。

无需离开您的 HTML，即可快速建立现代网站。

https://github.com/tailwindlabs/tailwindcss

最后

初级前端与高级前端之间，很大原因就是投入学习前端的时间、经验的差别，其实就是信息差。

如果有一个地方能又快又好的获得这些优质的前端信息，那么将会大大缩短从初级到高级的时间。

基于这个初衷，于是就诞生了 前端GitHub，能帮助前端开发人员节省时间的公众号！

前端GitHub 专注于挖掘 GitHub 上优秀的前端开源项目，并以专题的形式推荐，每专题大概 10 个好项目，每周会有一到三篇精华文章推送。

不知不觉，原创文章已经写到第 34 期了呢，几乎每一篇都是猫哥精心挑选的优质开源项目，推送的每一篇文章里面的项目几乎都是对前端开发很有帮助的。

往期精文请看下方宝藏仓库，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

公众号：前端GitHub，专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称，致力于打造最优质的前端开源项目资源库。

微信搜 “前端GitHub”，回复 “电子书” 即可以获得上面 160 本前端精华书籍哦，猫哥 WX：CB834301747 。

往期精文

原创不易，老铁们给个赞吧。

GitHub 标星 54K + 2K！这才是程序员写逼格满满的 PPT 的正确姿势！

大家好，我是你们的猫哥，一个不喜欢吃鱼、又不喜欢喵的超级猫 ~

前言

猫哥是一个常年混迹在 GitHub 上的猫星人，所以发现了不少好的前端开源项目，在此分享给大家。

公众号：前端GitHub，专注于挖掘 GitHub 上优秀的前端开源项目，收集、整理、推荐业界高品质前端资源合集，优秀的工具、库、好的教程、了解业界更优秀的代码、工具、业界最新的技术，抹平你的前端信息不对称。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

以下为【前端GitHub】的第 10 期精华内容。

相信大家都有过 PPT 分享的经历，超级猫一直觉得用 powerpoint 写幻灯片太麻烦，效率太低了。

作为程序员，特别是前端，有没有更简结与高逼格幻灯片实现方式呢？肯定是有的啊！

今天给大家带来的是使用 Markdown 和 HTML 写逼格满满的 PPT 的正确姿势！

reveal-md

reveal-md 是使用 Markdown 来做 PPT 展示的开源项目，标星 2.1K 。

安装

npm install -g reveal-md

使用

reveal-md path/demo.md

其中，path/demo.md 是你的 Markdown 文件地址，可以使用本地地址，也可以使用 URL。

使用如下的 Markdown 文件 demo.md ：

## 前端GitHub

* 大前端集合
* GitHub 优秀开源项目推荐

---

## 内容

> 专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称。

涵盖 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS 等！


---

## 前端资源合集

* 收集、整理、推荐业界高品质前端资源合集
* 优秀的工具、库、好的教程
* 了解业界更优秀的代码、工具、业界最新的技术

在终端运行命令：reveal-md ./demo.md

效果如图：

主题使用

包含的主题有以下几种：

beige
black
blood
league
moon
night
serif
simple
sky
solarized
white

比如指定 league 主题使用：

reveal-md path/demo.md --theme league

效果如图：

还可以指定自己写的主题，也就是自己写的 css 样式，使用自定义主题后，会覆盖默认的主题。

比如自定义文件位于 ./theme/my-custom.css 中时，指定对应的路径即可。

reveal-md slides.md --theme theme/my-custom.css

项目地址：

https://github.com/webpro/reveal-md

reveal.js

这是一个基于 CSS 的 3D 幻灯片工具，标星 54K。

Reveal.js 做 PPT 的优点是可以使用 markdown 语言直接写静态的文本，并可以加入各种 html 语言支持的交互动画，然后由 Pandoc 直接转化成 PPT。

reveal.js 是一个开放源代码 HTML 表示框架。它使使用 Web 浏览器的任何人都可以免费创建功能齐全且美观的演示文稿。

该框架具有广泛的功能，包括嵌套幻灯片，Markdown 支持，自动动画，PDF 导出，演讲者注释，LaTeX 支持，语法突出显示的代码等等。

reveal.js 有一下几个特点：

支持标签来区分每一页幻灯片
可以使用 markdown 来写内容
支持 pdf 的导出
支持演说注释
提供 JavaScript API 来控制页面
提供了多个默认主题和切换方式
自适应移动端和 PC 端

使用

使用分为基本使用、完整安装、npm 方式安装 3 种方式。

基本使用

下载最新的 manifest.js版本 https://github.com/hakimel/reveal.js/archive/master.zip
解压缩并将 index.html 中的示例内容替换为您自己的内容
在浏览器中打开 index.html 进行查看

完整安装

安装：

git clone https://github.com/hakimel/reveal.js.git

cd reveal.js && npm install

npm start

打开 http://localhost:8000 查看您的演示文稿。

npm 方式安装

npm install reveal.js
# or
yarn add reveal.js

直接导入使用

import Reveal from 'reveal.js';
import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';

let deck = new Reveal({
   plugins: [ Markdown ]
})
deck.initialize();

还需要添加 reveal.js 样式和主题.

<link rel="stylesheet" href="/node_modules/reveal.js/dist/reveal.css">
<link rel="stylesheet" href="/node_modules/reveal.js/dist/theme/black.css">

使用

幻灯片的内容需要包含在 <div class="reveal"> <div class="slides"> 的标签中。

一个 section 是一页幻灯片。当 section 包含在 section 中时，是一个纵向的幻灯片。

怎么理解呢？可以这样理解：横向的幻灯片代表一章，纵向的幻灯片代表一章中的一节。那么横向的幻灯片在播放时是左右切换的，而纵向的幻灯片是上下切换的。

For example:

<div class="reveal">
    <div class="slides">
        <section>Single Horizontal Slide</section>
        <section>
            <section>Vertical Slide 1</section>
            <section>Vertical Slide 2</section>
        </section>
    </div>
</div>

html 实现

标题和正文

section 中的内容就是幻灯片的内容，你可以使用 h2 标签标示 title，p 表示内容。需要红色的字体可以直接设置 style 的 color 为 red。

当某一页需要特殊背景色，可以使用 data-background 在 section 上设置, data-background-transition 表示背景的过渡效果。

For example:

<section data-background-transition="zoom" data-background="#dddddd">

如果需要正文一段一段出现。可以使用 fragment。

For Example:

<p class="fragment"></p>

代码

reveal.js 使用 highlight.js 来支持代码高亮。可以直接写 code 标签来实现, data-trim 表示去除多余的空格。

For Example:

<pre><code data-trim>
  console.log('hello reveal.js!');
</code></pre>

注释

在演说时，会用到注释，对于注释，可以通过 <aside class="notes"> 来实现。

For Example:

<aside class="notes">
  这里是注释。
</aside>

在幻灯片页面，按下 s 键，就可以调出注释页面，注释页面包含了当前幻灯片，下一章幻灯片，注释，以及幻灯片播放时间。

markdown 实现

reveal.js 不仅支持 html 表示来实现内容，还可以通过 markdown 来实现内容。使用 markdown 实现内容时，需要对 section 标示添加 data-markdown 属性，然后将 markdown 内容写到一个 text/template 脚本中。

For Example:

<section data-markdown>
    <script type="text/template">
        ## Page title

        A paragraph with some text and a [link](http://hakim.se).
    </script>
</section>
背景色，fragment功能的实现，可以通过注释来实现。For Example:

<section data-markdown>
    <script type="text/template">
    <!-- .slide: data-background="#ff0000" -->
        - Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->
        - Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->
    </script>
</section>

外置 md 文件

reveal.js 可以引用一个外置的 markdown 文件来解析。

For Example:

<section data-markdown="example.md"  
         data-separator="^\n\n\n"  
         data-separator-vertical="^\n\n"  
         data-separator-notes="^Note:"  
         data-charset="iso-8859-15">
</section>

分页实现

一个 markdown 文件中可以连续包含多个章内容。可以在 section 中通过属性 data-separator, data-separator-vertical 来划分章节。

For Example:

<section data-separator="---" data-separator-vertical="--"  >
  <script type="text/template">
    # 主题1
    - 主题1-内容1
    - 主题1-内容2
    --
    ## 主题1-内容1
    内容1-细节1
    --
    ## 主题1-内容2
    内容1-细节2
    ---
    # 主题2
  </script>
</section>

注释

对 section 添加 data-separator-notes="^Note:" 属性，就可以指定 Note: 后面的内容为当前幻灯片的注释。

For Example:

# Title
## Sub-title

Here is some content...

Note:
This will only display in the notes window.

导出 PDF

在浏览器打开文件的 url 上添加 print-pdf 即可以，比如： http://localhost:8000/demo.html/?print-pdf，你可以测试一下官方的 revealjs.com/demo?print-pdf
打开浏览器的保存为 pdf 的弹框，快捷键为：CTRL/CMD + P
边距设置为无
勾上背景图形
点击保存即可

多主题

reveal.js 提供了多种样式。可以通过引用不同的主题来实现。具体主题查看 reveal.js/css/theme 下的 css 文件。

总结

用 reveal.js 来实现幻灯片，可以只关注内容，忽略各种切换效果。

而且可以使用 markdown 来实现，大大提高了编写效率。对于最后生成的 html 文件，可以部署到服务器，这样只需要网络就可以进行分享，不需要使用 U 盘拷来拷去了。

https://github.com/hakimel/reveal.js

最后

这两个神级项目的功能远远不止这么点，还有多少呢？

看看 Github 上的 README.md 你就知道了，在现在这样一个大前端的时代，有什么是网页不能完成的呢？

好了，看到这里，下次演示 PPT 时，你应该就能在众人面前装逼了 😉

好了啦，【前端GitHub】的第 10 期内容已经讲完了啦~

不知不觉，已经写到第 10 期了呢，已经分享了接近 80 个好的前端项目了呢，往期精文请看下方仓库，点击很危险，请慎入！

[前端GitHub]：https://github.com/FrontEndGitHub/FrontEndGitHub

平时如何发现好的开源项目，可以看看这两篇文章：如何在 GitHub 上发现优秀开源项目和如何使用 GitHub 进行精准搜索的神仙技巧。

平时如何发现好的开源项目，可以看看这篇文章：如何在 GitHub 上发现优秀开源项目和如何使用 GitHub 进行精准搜索的神仙技巧。

觉得有用？喜欢就收藏，顺便点个赞吧，你的支持是超级猫最大的鼓励！

可以加超级猫的 wx：CB834301747 ，一起闲聊前端。

微信搜 “前端GitHub”，回复 “电子书” 即可以获得 160 本前端精华书籍哦。

往期精文

你最想对超级猫说点啥？

12 个 GitHub 上超火的 JavaScript 奇技淫巧项目，找到写 JavaScript 的灵感！

大家好，我是你们的猫哥，一个不喜欢吃鱼、又不喜欢喵的超级猫 ~

前言

猫哥是一个常年混迹在 GitHub 上的猫星人，所以发现了不少好的前端开源项目、常用技巧，在此分享给大家。

公众号：前端GitHub，专注于挖掘 GitHub 上优秀的前端开源项目，并以专题的形式推荐，每专题大概 10 个好项目，每周会有一到三篇精华文章推送。

已经推荐了 面试项目、css奇技淫巧项目、代码规范项目、数据结构与算法项目、管理后台模板、前端必备在线工具 等专题的近 100 个优秀项目了。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

以下为【前端GitHub】的第 12 期精华内容。

30-seconds-of-code

该项目讲的是满足你所有开发需求的简短代码段，里面都是些经常会用到而且是非常经典的代码，非常值得学习！

比如 JavaScript 模块就分为了 All、Array、Browser、Date、Function、Math、Node、Object、String 方便学习的。

比如：你必须知道的 4 种 JavaScript 数组方法

Array.prototype.map()

const arr = [1, 2, 3];
const double = x => x * 2;
arr.map(double); // [2, 4, 6]

Array.prototype.filter()

const arr = [1, 2, 3];
const isOdd = x => x % 2 === 1;
arr.filter(isOdd); // [1, 3]

Array.prototype.reduce()

const arr = [1, 2, 3];

const sum = (x, y) => x + y;
arr.reduce(sum, 0); // 6

const increment = (x, y) => [...x, x[x.length - 1] + y];
arr.reduce(increment, [0]); // [0, 1, 3, 6]

Array.prototype.find()

const arr = [1, 2, 3];
const isOdd = x => x % 2 === 1;
arr.find(isOdd); // 1

又比如：如何在 JavaScript 中实现睡眠功能？

同步版本

const sleepSync = (ms) => {
  const end = new Date().getTime() + ms;
  while (new Date().getTime() < end) { /* do nothing */ }
}

const printNums = () => {
  console.log(1);
  sleepSync(500);
  console.log(2);
  console.log(3);
};

printNums(); // Logs: 1, 2, 3 (2 and 3 log after 500ms)

异步版本

const sleep = (ms) =>
  new Promise(resolve => setTimeout(resolve, ms));

const printNums = async() => {
  console.log(1);
  await sleep(500);
  console.log(2);
  console.log(3);
};

printNums(); // Logs: 1, 2, 3 (2 and 3 log after 500ms)

其实上面讲到的事例里面还提供 api 和方法的讲解的，方便读者能看懂的，这里就不写出来了。

还想学更多的经典 js 代码片段，请看下面的仓库

https://github.com/30-seconds/30-seconds-of-code

33-js-concepts

JavaScript开发者应懂的 33 个概念

这个项目是为了帮助开发者掌握 JavaScript 概念而创立的。它不是必备，但在未来学习（JavaScript）中，可以作为一篇指南。

调用堆栈
原始类型
值类型和引用类型
隐式, 显式, 名义和鸭子类型
== 与 ===, typeof 与 instanceof
this, call, apply 和 bind
函数作用域, 块级作用域和词法作用域
闭包
map, reduce, filter 等高阶函数
表达式和语句
变量提升
Promise
立即执行函数, 模块化, 命名空间
递归
算法
数据结构
消息队列和事件循环
setTimeout, setInterval 和 requestAnimationFrame
继承, 多态和代码复用
按位操作符, 类数组对象和类型化数组
DOM 树和渲染过程
new 与构造函数, instanceof 与实例
原型继承与原型链
Object.create 和 Object.assign
工厂函数和类
设计模式
Memoization
纯函数, 函数副作用和状态变化
耗性能操作和时间复杂度
JavaScript 引擎
二进制, 十进制, 十六进制, 科学记数法
偏函数, 柯里化, Compose 和 Pipe
代码整洁之道

而且每个主题都包含了相关的精彩文章和视频，非常适合学习。

https://github.com/leonardomso/33-js-concepts

javascript-questions

JavaScript 进阶问题列表。

从基础到高级：测试您对 JavaScript 的了解程度，稍微刷新一下知识或为编写代码面试做准备！

比如下面会输出是什么？

let a = 3
let b = new Number(3)
let c = 3

console.log(a == b)
console.log(a === b)
console.log(b === c)

A: true false true
B: false false true
C: true false false
D: false true true

答案: C

解释：

new Number() 是一个内建的函数构造器。虽然它看着像是一个 number，但它实际上并不是一个真实的 number：它有一堆额外的功能并且它是一个对象。

当我们使用 == 操作符时，它只会检查两者是否拥有相同的值。因为它们的值都是 3，因此返回 true。

然后，当我们使用 === 操作符时，两者的值以及类型都应该是相同的。new Number() 是一个对象而不是 number，因此返回 false。

https://github.com/lydiahallie/javascript-questions

JavaScript 30

使用原生 JavaScript 在 30 天内完成 30 个项目。

每天完成的 HTML, CSS 和 javascript 解决方案。

https://github.com/wesbos/JavaScript30

Codewars

和 leetcode 有点类似，也是在平台上和其他人一起完成真实的代码挑战，提升你的技术。

相比于其他平台，codewars 给出的问题更加贴合实际工作与生活，很多题都会给出题目背景，更有代入感。

可以提升技能：在社区创建的 kata 上挑战自我，以增强各种技能。掌握您当前选择的语言，或扩展您对新语言的理解。

要加入这个社区，您必须先答题证明自己的技能才可以的。

https://www.codewars.com/

ES6 入门教程

入门的前端都应该都知道的 ES6 开源书籍，猫哥初入前端时就是学了阮一峰老师开源的 ES6 内容的，一直实用至今！

《ECMAScript 6 入门教程》是一本开源的 JavaScript 语言教程，全面介绍 ECMAScript 6 新引入的语法特性。

本书覆盖 ES6 与上一个版本 ES5 的所有不同之处，对涉及的语法知识给予详细介绍，并给出大量简洁易懂的示例代码。

本书为中级难度，适合已经掌握 ES5 的读者，用来了解这门语言的最新发展；也可当作参考手册，查寻新增的语法点。

如果你是 JavaScript 语言的初学者，建议先学完《JavaScript 语言入门教程》，再来看这本书。

https://es6.ruanyifeng.com/

JavaScript 教程

本教程全面介绍 JavaScript 核心语法，覆盖了 ES5 和 DOM 规范的所有内容。

也是阮一峰老师写的，真的非常通俗易懂，非常适合前端学习。

不得不说，知识掌握通透的人写的技术文章，非常能让人容易明白。

内容上从最简单的讲起，循序渐进、由浅入深，力求清晰易懂。

所有章节都带有大量的代码实例，便于理解和模仿，可以用到实际项目中，即学即用。

本教程适合初学者当作 JavaScript 语言入门教程，学完后就可以承担实际的网页开发工作，也适合当作日常使用的参考手册。

入门篇
数据类型 
运算符 
语法专题
标准库
面向对象编程
异步操作 
DOM
事件
浏览器模型
附录：网页元素接口

https://wangdoc.com/javascript/

现代 JavaScript 教程

以最新的 JavaScript 标准为基准。通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。

课程的核心内容包含 2 部分，涵盖了 JavaScript 编程语言相关知识和浏览器行为。此外还有一系列的专题文章。

JavaScript 编程语言

在这儿我们将从头开始学习 JavaScript，也会学习 OOP 等相关高级概念。

本教程专注于语言本身，我们默认使用最小环境。

浏览器：文档，事件，接口

学习如何管理浏览器页面：添加元素，操纵元素的大小和位置，动态创建接口并与访问者互动。

其他文章

教程的前两部分未涉及的其他主题的内容列表。此处没有明确的层次结构，你可以按你需要的顺序阅读文章。

https://zh.javascript.info/

MDN

MDN Web Docs 网站提供开放网络(Open Web)技术有关的信息,包括用于网站和渐进式网络应用的 HTML、CSS 和 API。

Mozilla, Microsoft, Google, Samsung 和 W3C 将合作把 MDN 打造成最好的 Web 文档。

所以在这个平台学习 web 技术算是比较权威的了。

源于开发者，服务开发者。

https://developer.mozilla.org/zh-CN/

clean-code-javascript

优秀的 JS 代码规范。

比如：对相同类型的变量使用相同的关键字

Bad：

getUserInfo(); 
getClientData(); 
getCustomerRecord();

Good：

getUser();

再比如：使用可搜索的命名

在开发过程中，我们阅读代码的时间会远远超过编写代码的时间，因此保证代码的可读性与可搜索会非常重要。切记，没事不要坑自己。

Bad:

//525600到底啥意思？
for (var i = 0; i < 525600; i++) {
  runCronJob();
}

Good:

// 声明为全局变量
var MINUTES_IN_A_YEAR = 525600;
for (var i = 0; i < MINUTES_IN_A_YEAR; i++) {
  runCronJob();
}

https://github.com/ryanmcdermott/clean-code-javascript

TypeScript 入门教程

从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript。

这个教程真的是猫哥看过的最完整而简洁、并且通俗易懂的 TypeScript 教程！

《TypeScript 入门教程》全面介绍了 TypeScript 强大的类型系统，完整而简洁，示例丰富，比官方文档更易读，非常适合作为初学者学习 TypeScript 的第一本书。 —— 阮一峰

比如 类型别名：类型别名用来给一个类型起个新名字。

简单的例子:

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}

上例中，我们使用 type 创建类型别名。

类型别名常用于联合类型。

https://ts.xcatliu.com

w3school

前端必须知道的 Web 技术教程平台，虽然很多前端都知道了，但是有必要提一下。

领先的 Web 技术教程 - 全部免费。

在 W3School，你可以找到你所需要的所有的网站建设教程。

从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS。

在这里学习前端最好的地方就是有 demo 可能学习，可以验证你的效果或者输出。

https://www.w3school.com.cn/js/index.asp

最后

不知不觉，已经写到第 12 期了呢，已经分享了接近 100 个好的前端项目了呢，往期精文请看下方宝藏仓库，点击很危险，请慎入！

[前端GitHub]：https://github.com/FrontEndGitHub/FrontEndGitHub

平时如何发现好的开源项目，可以看看这篇文章：如何在 GitHub 上发现优秀开源项目和如何使用 GitHub 进行精准搜索的神仙技巧。

觉得有用？喜欢就收藏，顺便点个赞吧，你的支持是超级猫最大的鼓励！

可以加超级猫的 wx：CB834301747 ，一起闲聊前端。

微信搜 “前端GitHub”，回复 “电子书” 即可以获得 160 本前端精华书籍哦。

往期精文

你最想对超级猫说点啥？

1. node

最佳的学习资源肯定是最权威的 Node.js 的官方项目啦。

Node.js 是一个开源，跨平台的 JavaScript 运行时环境。它在浏览器外部执行 JavaScript 代码。

有关使用 Node.js 的更多信息，请参见 Node.js网站。

https://github.com/nodejs/node

2. node-api-cn

Node.js API 中文文档项目

https://github.com/nodejscn/node-api-cn

3. node-in-debugging

这是一个 Node.js 调试指南的项目，已经出书了。

里面讲到当程序出现性能瓶颈时，如何结合代码去推测可能出问题的地方，展现程序的性能瓶颈的方法。

比如用 perf、火焰图、红蓝差分火焰图去分析和定位问题。

perf：

火焰图：

红蓝差分火焰图：

https://github.com/nswbmw/node-in-debugging

4. nodebestpractices

Node.js 最佳实践

这是对Node.js最佳实践中排名最高的内容的总结和分享
这里是最大的汇集，且每周都在增长。当前，超过 50 个最佳实现，样式指南，架构建议已经呈现。每天都有新的 issue 和 PR 被创建，以使这本在线书籍不断更新。
大部分的条目包含额外的信息。大部分的最佳实践条目的旁边，您将发现链接，它将呈现给您示例代码，博客引用和更多信息

项目结构实践 (5)
异常处理实践 (11)
编码规范实践 (12)
测试和总体质量实践 (8)
进入生产实践 (16)
⭐ 新: 安全实践(23)
Performance Practices (coming soon)

https://github.com/goldbergyoni/nodebestpractices

5. deep-into-node

这个项目是关于：深入理解 Node.js：核心**与源码分析。

源码分析包括（libuv, v8）, 需要有一定的 C、C++基础。 Node.js 的源码到处闪烁着开发者的智慧和追求极致的精神。包括但不限于：

系统架构
设计模式
性能优化
奇技淫巧

本书通过分析 node 核心模块的实现，向读者阐述 node 异步 IO，事件循环的核心**。帮助开发者更好的使用 Node.js。

通过追溯 node 社区开发issue, 探讨 node 的变迁和演进，学习 node.js 的设计哲学。

https://github.com/yjhjstz/deep-into-node

6. Nodejs-Roadmap

这个项目是作者从事 Node.js 开发以来的学习历程，旨在为大家提供一个较详细的学习教程，侧重点更倾向于 Node.js 服务端所涉及的技术栈，如果本文能为您得到帮助，请给予支持！

Node.js 由 Libuv、Chrome V8、一些核心 API 构成，如下图所示：

以上展示了 Node.js 的构成，下面做下简单说明：

Node Standard Library：Node.js 标准库，对外提供的 JavaScript 接口，例如模块 http、buffer、fs、stream 等
Node bindings：这里就是 JavaScript 与 C++ 连接的桥梁，对下层模块进行封装，向上层提供基础的 API 接口。
V8：Google 开源的高性能 JavaScript 引擎，使用 C++ 开发，并且应用于谷歌浏览器。如果您感兴趣想学习更多的 V8 引擎知识，请访问 What is V8?
Libuv：是一个跨平台的支持事件驱动的 I/O 库。它是使用 C 和 C++ 语言为 Node.js 所开发的，同时也是 I/O 操作的核心部分，例如读取文件和 OS 交互。来自一份 Libuv 的中文教程
C-ares：C-ares 是一个异步 DNS 解析库
Low-Level Components：提供了 http 解析、OpenSSL、数据压缩（zlib）等功能。

以上只是做一个初步的认知，如果你想深入了解 Node.js 那么多每个点都是值得你深入研究的。

无论是内容还是阅读效果，都很好，是值得推荐的一个学习 Node 的开源项目。

https://github.com/qufei1993/Nodejs-Roadmap

7. NeteaseCloudMusicApi

网易云音乐 Node.js API service

功能特性

总共有 206 个 api ！

比如：

登录
刷新登录
发送验证码
校验验证码
注册(修改密码)
获取用户信息 , 歌单，收藏，mv, dj 数量
获取用户歌单
获取用户电台
获取用户关注列表
获取用户粉丝列表
获取用户动态
获取用户播放记录
获取精品歌单
获取歌单详情
搜索
搜索建议
获取歌词
歌曲评论
收藏单曲到歌单
专辑评论
歌单评论
mv 评论
电台节目评论
banner
获取歌曲详情
获取专辑内容
获取歌手单曲
获取歌手 mv
获取歌手专辑
获取歌手描述
获取相似歌手
获取相似歌单
相似 mv
获取相似音乐
获取最近 5 个听了这首歌的用户
获取每日推荐歌单
获取每日推荐歌曲
私人 FM
签到
喜欢音乐
等等。。。

如果你想做一个音乐类的开源项目，可以好好看看这个项目哦。

https://github.com/Binaryify/NeteaseCloudMusicApi

8. node-elm

这是基于 node.js + Mongodb 构建的后台系统。

整个项目分为两部分：前台项目接口、后台管理接口，共 60 多个。涉及登陆、注册、添加商品、商品展示、筛选排序、购物车、下单、用户中心等，构成一个完整的流程。

目标功能

 IP定位 -- 完成
 城市列表 -- 完成
 搜索地址 -- 完成
 上传图片 -- 完成
 添加商铺 -- 完成
 添加食品 -- 完成
 测量距离 -- 完成
 搜索美食，餐馆 -- 完成
 根据距离、销量、评分、特色菜、配送方式等进行排序和筛选 -- 完成
 评价列表 -- 完成
 食品详情 -- 完成
 商家详情 -- 完成
 购物车功能 -- 完成
 登录、注册 -- 完成
 修改密码 -- 完成
 用户信息 -- 完成
 添加、删除、修改收货地址 -- 完成
 下单 -- 完成 ✨✨
 订单信息 -- 完成
 红包 -- 完成
 商铺管理 -- 完成
 食品管理 -- 完成
 管理员权限验证 -- 完成
 超级管理员 -- 完成
 订单管理 -- 完成
 流量统计 -- 完成
 前后台路由同构 -- 完成
 部署上线 -- 完成

https://github.com/bailicangdu/node-elm

9. awesome-nodejs

内容目录

官方的
配套
疯狂科学
命令行应用
功能编程
HTTP
调试/分析
记录中
命令行实用程序
构建工具
硬件
模板化
Web框架
文献资料
文件系统
控制流
溪流
即时的
图像
文本
数字
数学
日期
网址
资料验证
解析中
人性化
压缩
网络
数据库
测验
安全
标杆管理
缩小器
验证
授权
电子邮件
作业队列
Node.js管理
自然语言处理
流程管理
自动化
AST
静态网站生成器
内容管理系统
论坛
写博客
奇怪的
序列化
各种各样的
资源
讲解
发现
文章
时事通讯
影片
图书
网志
课程
备忘单
工具
社区
各种各样的
相关清单

https://github.com/sindresorhus/awesome-nodejs

最后

好了，Node.js 学习的好开源项目，目前发现的就是上面那些了。

不知不觉，原创文章已经写到第 43 期了呢，几乎每一篇都是猫哥精心挑选的优质开源项目，推送的每一篇文章里面的项目几乎都是对前端开发很有帮助的。

往期精文请看下方宝藏仓库，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

往期精文

前端资源 & 电子书

公众号：前端GitHub，专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称，致力于打造最优质的前端开源项目资源库。

初次见面，也不知道送你们啥。微信搜索 前端GitHub，回复 电子书 就送你 1000+ 本精华编程电子书；回复 1024 送你一套完整的前端视频教程。

有需要的就来拿吧，绝对免费，无套路获取。

如果看到这里，喜欢这篇文章的话，请帮点个好看。

1. computer-science

Star :58k
Github 地址：https://github.com/ossu/computer-science
介绍：通往计算机科学免费自学教育之路！

OSSU课程是使用在线材料进行的完整的计算机科学教育。它不仅用于职业培训或专业发展。

它适用于那些希望对所有计算学科具有基本概念的正确，全面的基础，以及那些拥有该学科，具有意愿和（最重要的是！）良好习惯的人，可以在很大程度上依靠自己的力量来接受这种教育来自世界各地的学习者社区。

它是根据本科计算机科学专业的学位要求减去通识教育（非CS）要求而设计的，因为假定遵循此课程的大多数人已经在CS领域以外接受了教育。

这些课程本身是世界上最好的课程，通常来自哈佛大学，普林斯顿大学，麻省理工学院等。

2. CS-Notes

Star: 96.6k
Github 地址：https://github.com/CyC2018/CS-Notes
介绍：技术面试必备基础知识、Leetcode、计算机操作系统、计算机网络、系统设计、Java、Python、C++ 。

3. REKCARC-TSC-UHT

Star: 13.3k
Github 地址：https://github.com/PKUanonym/REKCARC-TSC-UHT
介绍：清华大学计算机系课程攻略。

4. zju-icicles

Star: 17k
Github 地址： https://github.com/QSCTech/zju-icicles
介绍：浙江大学课程攻略共享计划。

来到一所大学，从第一次接触许多课，直到一门一门完成，这个过程中我们时常收集起许多资料和情报。

5. TeachYourselfCS-CN

Star：2.1k
Github 地址：https://github.com/keithnull/TeachYourselfCS-CN
介绍：内容超级棒！如果你是一个自学成才的工程师，或者从编程培训班毕业，那么你很有必要学习计算机科学。幸运的是，不必为此花上数年光阴和不菲费用去攻读一个学位：仅仅依靠自己，你就可以获得世界一流水平的教育。

6. CS-Xmind-Note

Star: 2.2k
Github 地址：https://github.com/SSHeRun/CS-Xmind-Note
介绍：计算机专业课（408）思维导图和笔记：计算机组成原理（第五版王爱英），数据结构（王道），计算机网络（第七版谢希仁），操作系统（第四版汤小丹）

7. awesome-books

Star: 0.1K
Github 地址：https://github.com/biaochenxuying/awesome-books
介绍：160+ 本开源技术类精华电子书，包括前端、后端、数据结构与算法、计算机基础、设计模式、数据库等书籍。

关注公众号：前端GitHub，回复 电子书 即可获得全部的电子书的下载链接。

最后

读一本好书，就是在和高尚的人谈话。 ——歌德

喜欢读书的人在死之前，活过 1000 次，不读书的人只活过一次。 -- 乔治 R.R. 马丁

你与技术大牛之间的差距可能就是因为差了这些学习资源！

如果我当时上大学的时候有人告诉我这些开源项目就好了！

肯定也能混得个人模狗样了，每天走着六亲不认的步伐，哭了哭了！

支持一下下👇

study

10 个 GitHub 上超火的 CSS 技巧项目，找到写 CSS 的灵感！

大家好，我是你们的超级猫，一个不喜欢吃鱼、又不喜欢喵的超级猫 ~

如果 CSS 是女孩子，肯定如上图那样吧 🤩 ~

简介

一般人没事的时候刷刷朋友圈、微博、电视剧、知乎，而有些人是没事的时候刷刷 GitHub ，看看最近有哪些流行的项目。

久而久之，这差距就越来越大，因此总会有开源信息的不对称，有哪些优秀的前端开源项目值得学习的也不知道。

初步前端与高级前端之间，最大的差距可能就是信息差造成的。

超级猫从 2016 年加入 GitHub，到现在的 2020 年，快整整 5 个年头了。

从 2018 年开始，我就养成了每天逛 GitHub 的习惯，一般在早上上班前或者中午午休的时候都会逛一下。

看看每天都开源了哪些好的前端项目，还有用到的主流前端技术栈又是哪些，值得我去学习的。

因此也收藏了不少好的开源项目，在此推荐给大家，每周会有一到三篇精华文章推送。

希望你在浏览、学习了超级猫推荐的这些开源项目的过程中，你能学习到更多编程知识、提高编程技巧、找到编程的乐趣。

公众号：前端GitHub，专注于挖掘 GitHub 上优秀的前端开源项目，抹平你的前端信息不对称，涵盖 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS、数据结构与算法等等。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

以下为【前端GitHub】的第 7 期精华内容。

今天给大家带来的是 GitHub 上超火的 10 个 CSS 项目，希望你在这里面找到写 CSS 的灵感！

喵~ 喵~ 喵~ 正文开始了，上车坐稳扶好了~

You-need-to-know-css

该项目是 CSS 的各种效果实现，尤其是动画效果。

笔者把自己的收获和工作中常用的一些 CSS 小样式总结成这份文档。

目前文档一共包含 43 个 CSS 的小样式（持续更新�…），所以还是很不错的学习 CSS 的项目来的。

比如：打字效果

<style>
  main {
    width: 100%; height: 229px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  span {
    display: inline-block;
    width: 21ch;
    font: bold 200% Consolas, Monaco, monospace;   /*等宽字体*/
    overflow: hidden;
    white-space: nowrap;
    font-weight: 500;
    border-right: 1px solid transparent;
    animation: typing 10s steps(21), caret .5s steps(1) infinite;
  }
  @keyframes typing{
    from {
        width: 0;
    }
  }
  @keyframes caret{
    50% { border-right-color: currentColor}
  }
</style>
<template>
  <main class="main">
    <span>前端GitHub</span>
  </main>
</template>
<script>
</script>

https://lhammer.cn/You-need-to-know-css/#/zh-cn/

CSS-Inspiration

这里可以让你寻找到使用或者是学习 CSS 的灵感，以分类的形式，展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。

包含了：布局(Layout)、阴影(box-shadow、drop-shadow)、伪类/伪元素、滤镜(fliter)、边框(border)、背景/渐变(linear-gradient/radial-gradient/conic-gradient)、混合模式（mix-blend-mode/background-blend-mode)、3D、动画/过渡(transition/animation)、clip-path、文本类、综合、CSS-Doodle、SVG 等内容。

比如：巧用 CSS 实现酷炫的充电动画

https://github.com/chokcoco/CSS-Inspiration

css_tricks

该项目总结了一些常用的 CSS 样式，记录一些 CSS 的新属性和一点奇技淫巧。

比如提示气泡的效果

<div class="poptip btn" aria-controls="弹出气泡">poptip</div>

$poptipBg: #30363d;
$color: #fff;
$triangle: 8px;
$distance: -12px;
.poptip {
  position: relative;
  z-index: 101;
  &::before,
  &::after {
    visibility: hidden;
    opacity: 0;
    transform: translate3d(0, 0, 0);
    transition: all 0.3s ease 0.2s;
    box-sizing: border-box;
  }
  &::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: $triangle $triangle 0 $triangle;
    border-color: $poptipBg transparent transparent transparent;
    left: calc(50% - #{$triangle});
    top: 0px;
    transform: translateX(0%) translateY($distance);
  }

  &::after {
    font-size: 14px;
    color: $color;
    content: attr(aria-controls);
    position: absolute;
    padding: 6px 12px;
    white-space: nowrap;
    z-index: -1;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%) translateY($distance);
    background: $poptipBg;
    line-height: 1;
    border-radius: 2px;
  }
  &:hover::before,
  &:hover::after {
    visibility: visible;
    opacity: 1;
  }
}

.btn {
  min-width: 100px;
  line-height: 1.5;
  padding: 5px 10px;
  color: #fff;
  background: #00adb5;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
}

效果：

https://github.com/QiShaoXuan/css_tricks

animista

该项目里面有各种 CSS 实现的效果，还有代码演示，方便直接复制代码，还可以复制压缩后的代码，如果你在找某个 CSS 的效果的话，可以到这里找找看。

http://animista.net/

spinkit

汇集了实现各种加载效果的 CSS 代码片段。

SpinKit 仅使用（transform 和 opacity）CSS 动画来创建平滑且易于自定义的动画。

https://tobiasahlin.com/spinkit/

十天精通 CSS3

这是前端大佬大漠出的一个免费的 CSS3 教程，对于有一定 CSS2 经验的伙伴，能让您系统的学习 CSS3，快速的理解掌握并应用于工作之中。

里面的内容有讲解，还有代码演习，学完之后，可以练习所学的 api ，真的很不错。

超级猫入门前端时，也学习过里面的内容呢，虽然现在忘记的差不多了 😂，但是学过！。

https://www.imooc.com/learn/33

Animate

是一个有趣的，跨浏览器的 css3 动画库，内置了很多典型的 css3 动画，兼容性好使用方便。

animate.css 的使用非常简单，因为它是把不同的动画绑定到了不同的类里，所以想要使用哪种动画，只需要把通用类 animated 和相应的类添加到元素上就行了。

做为一个前端开发，如果不知道这个库就真的很失败了。

https://animate.style/

sass

Sass 是一种 CSS 的预编译语言，Sass 为 CSS 赋予了更强大的功能。

它提供了变量（variables）、嵌套（nested rules） [混合（mixins）、函数（functions）等功能，并且完全兼容 CSS 语法。

Sass 能够帮助复杂的样式表更有条理，并且易于在项目内部或跨项目共享设计。

https://sass.bootcss.com/documentation

less

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性。

Less 可以运行在 Node 或浏览器端。

https://less.bootcss.com/

stylus

富有表现力、动态、健壮的 CSS。

它提供了一种高效，动态和表达方式来生成 CSS。同时支持缩进语法和常规 CSS 样式。

https://stylus-lang.com/

CSS 预处理器技术已经非常的成熟了，而且也涌现出了越来越多的 CSS 的预处理器框架。

对于 sass 、less 和 stylus，都是在现在的 vue 和 react 项目中经常用到的，用法也很简单，只要学会一种，其他两种都很容易上手，项目中用哪一种就要看自己的喜欢了。

最后

最近加班有点严重，所有文章更新慢了很多，同是打工猫，生活不易啊！

好了啦，【前端GitHub】的第 7 期内容已经讲完了啦。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目和恕我直言，你可能连 GitHub 搜索都不会用 - 如何精准搜索的神仙技巧。

可以加超级猫的 wx：CB834301747 ，一起闲聊前端GitHub。

觉得有用？喜欢就收藏，顺便点个赞吧，你的支持是我最大的鼓励！

微信搜 “前端GitHub”，回复 “电子书” 即可以获得 160 本前端精华书籍哦。

往期精文

你最想对超级猫说点啥？

推荐 GitHub 2K+ 星：前端监控工具 - webfunny 项目

为什么需要前端监控？

如果你是一位前端工程师，那你一定不止一次去解决一些顽固的线上问题，你也曾想方设法复现用户的bug，结果可能都不太理想。如何定位前端线上问题？一直以来，都是很头疼的问题，因为它发生于用户的一系列操作之后。错误的原因可能源于机型，网络环境，复杂的操作行为等等，很难在开发环境中复现出来。特别是前端在没有监控系统加持的情况下，往往需要人肉解决问题，还要应对产品的需求轰炸，真真是太难了！！！!

今天给大家推荐一个在GitHub上线仅几个月，就已经获得 2K+星项目——前端业务日志监控工具 Webfunny

https://github.com/a597873885/webfunny_monitor

1、Webfunny概述

**Webfunny**是一款轻量级前端异常监控和前端性能监控系统，致力于帮助前端工程师定位并解决各种线上问题，确保项目健康良好的运行。支持千万级别日PV量，能够满足用户的各种场景需求。同时，针对不同企业和用户，提供一对一的定制化服务，满足更多业务需求。

官网：www.webfunny.cn

2、Webfunny 特点

轻量级：可以随时部署在任何地方，支持ESC部署和Docker部署，非常快捷方便；
功能全面：不限制应用的流量、自定义日志存储时间，能够适应更多高并发的场景；
针对性强：针对前端使用场景研发，辅助前端开发，容易上手；
无风险：所有监控数据都可以回流，监控日志都存储在你们自己的数据库内，不依赖任何第三方；

3、Webfunny 安装使用**

基础环境

安装NodeJS，版本号：10.6.0及以上

第一步、下载(clone)最新部署包，初始化（不要改项目名！！！）

1.本地克隆代码$：git clone https://github.com/a597873885/webfunny_monitor.git

  使用码云仓库$：git clone https://gitee.com/webfunnyMonitor/webfunny_monitor.git（github网络不稳定，可以使用码云地址）

2.在项目根目录下执行初始化命令和安装命令$：npm run init && npm install

3.确认是否安装了pm2（执行$：pm2 -v），如果没有安装pm2，请执行安装命令$：npm install pm2 -g

第二步、配置数据库(Mysql)连接

1. 安装 Mysql 数据库（Mysql安装教程）
2. 创建数据库（webfunny_db）
创建数据库：webfunny_db。

字符集设置：[Default Character set]：utf8、 [Default Collation]：utf8_bin

3. 数据库连接配置

进入webfunny_monitor/bin/mysqlConfig.js文件中
module.exports = {
  write: {
    ip: 'xxx.xxx.xxx.xxx',         // 远程ip地址
    port: '3306',                  // 端口号
    dataBaseName: 'webfunny_db',   // 数据库名
    userName: 'root',              // 用户名
    password: '123456'             // 密码
  }
}

第三步、本地部署运行

1) 此时此刻，本地配置已经完成了，尝试运行命令$: npm run prd（第一次运行使用此命令，重启使用：npm run restart）

2) 打开浏览器，访问地址：http://localhost:8010/webfunny/register.html?type=1 (初始化管理员账号，并登录)

3) 创建新项目后，可以看到探针部署教程，完成部署。

第四步、生产环境部署

1. IP地址或者域名配置

进入webfunny_monitor/bin/domain.js文件中**（注意，对应的端口号要保持一致）**

IP地址配置方式：

module.exports = {
  localServerDomain: 'xxx.xxx.xxx.xxx:8011',    // 日志上报域名
  localAssetsDomain: 'xxx.xxx.xxx.xxx:8010',    // 前端页面域名
  localServerPort: '8011',                      // 日志上报端口号
  localAssetsPort: '8010',                      // 前端页面端口号
}

域名配置方式：

module.exports = {
  localServerDomain: 'www.baidu.com:8011',      // 日志上报域名
  localAssetsDomain: 'www.baidu.com:8010',      // 前端页面域名
  localServerPort: '8011',                      // 日志上报端口号
  localAssetsPort: '8010',                      // 前端页面端口号
}

配置完成后，浏览器访问以下地址，保证能够访问成功。

1.项目列表地址，请在控制台执行：curl http://xxx.xxx.xxx.xxx:8011/server/webMonitorIdList 或 curl http://www.baidu.com:8011/server/webMonitorIdList

2.数据展示地址，请在浏览器访问：http://xxx.xxx.xxx.xxx:8010/webfunny/overview.html 或 http://www.baidu.com:8010/webfunny/overview.html

2. 添加执行权限（重要！！！否则无法生成数据库表）

正常情况下 createTable.sh, restart.sh 这两个脚本没有执行权限，需要用户手动授权。

linux、mac系统，需要在项目根目录下执行命令$：chmod 755 createTable.sh， chmod 755 restart.sh 进行授权。

其他操作系统，请自行搜索授权方式

【注意】如果不授权，可能无法自动创建每天的数据库表

第五步、配置报警信息（钉钉机器人）

webfunny提供了自定义报警拦截功能，执行 npm run init 命令后会出现interceptor目录，需要使用者修改代码，以实现钉钉机器人的报警方式，配置目录如下：
钉钉机器人配置文件：/interceptor/config/dingRobot.js，其他通知方式，请自己查看代码

以下步骤可不必执行，高并发的用户可以继续往下看。

第六步、启动消息队列(非必须)

1. 安装RabbitMq（建议您在云服务器上部署完成后再执行此步骤）

开启消息队列之前，请先 安装RabbitMq消息队列服务，ubantu：https://www.cnblogs.com/warm-stranger/p/11000996.html 

安装完成后可以访问Url：http://IP地址:15672 查看消息队列的情况

如果需要连接远程消息队列，请在根目录下找到 lib/RabbitMq.js调整代码配置。

【小提示】：消息队列不易安装成功，如果中途出现问题，可以选择重启或者初始化云服务器。

2. 启动消息队列

RabbitMq 安装完成后，在 webfunny_monitor/bin/messageQueue.js 文件中找到变量名：messageQueue，将此变量的值设置为：true, 重启服务即可

第七步、配置读写分离(非必须)

1.配置好主从同步的多台MySQL数据库（最好是一主多从，一主一从尚可）

2.进入webfunny_monitor/bin/mysqlConfig.js文件中

module.exports = {
  write: {
    ip: 'xxx.xxx.xxx.xxx',         // 远程ip地址
    port: '3306',                  // 端口号
    dataBaseName: 'webfunny_db',   // 数据库名
    userName: 'root',              // 用户名
    password: '123456'             // 密码
  }，
  // 高性能版支持此属性
  read: [
    { host: "xxx.xxx.xxx.xxx", username: "root1", password: "123456" },
    { host: "xxx.xxx.xxx.xxx", username: "root2", password: "123456" }
  ]
}

最后

介绍到此就结束啦！关于安装使用上有任何问题和建议，欢迎添加下方客服交流、反馈哈~

微信号：webfunny_2020

下面是福利时间

本公众号读者现在可享受2个月免费试用DEMO

👇👇👇添加**Webfunny客服，添加暗号“试用”**, 告知客服MM试用账号

方便后台帮你延长试用时间

往期精文

微信搜 “前端GitHub”，回复 “电子书” 即可以获得下面 300 本技术精华书籍哦，猫哥 wx：CB834301747 。

斗鱼 APP

flutter 重构的斗鱼直播 APP
首页、娱乐为 Material 组件；直播间、鱼吧为纯自定义编写。
另外整合各类优质的第三方开源库，打造出原生 APP 丝滑的用户体验
尽可能接入更多功能，方法附带注释，帮助你在使用 flutter 进行开发新的应用提供实用的借鉴案例

应用截图

主要涵盖功能

这高防实现的功能就多了。

启动页广告位
开播列表上拉加载、下拉刷新、返回顶部
列表图片缓存加载优化
渐进式头部动画
底部导航切换保存页面状态
HTTP缓存、IO缓存
直播间webSocket消息弹幕、礼物
页面路由传值
RxDart全局消息通信封装
Bloc流式状态管理(启动页预加载首页数据)
礼物横幅动画队列
礼物特效全屏lottie
弹幕消息滚动
静态视频流
九宫格抽奖游戏
照片选择器
全屏、半屏webView
鱼吧头部手势动画
仿微信朋友圈图片控件
登录注册弹窗
国家区号列表(仿微信通讯录滑动首字母定位)
二维码扫码
本地通知推送

项目地址

https://github.com/yukilzw/dy_flutter

精仿抖音

仿写抖音的 flutter app。主要实现了看视频功能。

实现功能

上下刷视频，视频会自动加载封面
左右滑动去搜索与个人中心
双击冒爱心点赞
看评论
切换底部 Tabbar

应用截图

项目结构

依赖：

  flutter_spinkit: ^4.1.2
  # Bilibili开源的视频播放组件
  fijkplayer: ^0.8.3
  # 基础的透明动画点击效果
  tapped: any
  # map安全取值
  safemap: any

主要文件：

./lib
├── main.dart
├── mock
│   └── video.dart # 假数据
├── other
│   └── bottomSheet.dart # 修改了系统BottomSheet的高度
├── pages
│   ├── cameraPage.dart # 拍摄页（没有实际功能）
│   ├── followPage.dart  # 略
│   ├── homePage.dart # 主页面，包含tikTokScaffold的实际应用功能
│   ├── msgDetailListPage.dart # 略
│   ├── msgPage.dart # 略
│   ├── searchPage.dart # 略
│   ├── todoPage.dart # 略
│   ├── userDetailPage.dart # 略
│   ├── userPage.dart # 略
│   └── walletPage.d # 略
├── style
│   ├── style.dart # 全局文字大小与颜色
│   └── text.dart # 主要的几个文字样式
└── views
    ├── backButton.dart # iOS形状的返回按钮组件
    ├── loadingButton.dart # 可以设置为载入样式的按钮组件
    ├── selectText.dart # 可设置为“选中”或者“未选中”样式的文字
    ├── tikTokCommentBottomSheet.dart # 仿Tiktok评论样式
    ├── tikTokHeader.dart # 仿Tiktok顶部切换组件
    ├── tikTokScaffold.dart # 仿Tiktok核心脚手架，封装了手势与切换等功能，本身不包含UI内容
    ├── tikTokVideo.dart # 仿Tiktok的视频UI样式封装，不包含视频播放
    ├── tikTokVideoButtonColumn.dart # 仿Tiktok视频右侧的头像与点赞等按钮列的组件
    ├── tikTokVideoGesture.dart # 仿Tiktok的双击点赞效果
    ├── tikTokVideoPlayer.dart # 视频播放页面，带有控制滑动的VideoListController类
    ├── tiktokTabBar.dart # 仿Tiktok的底部Tabbar组件
    ├── tilTokAppBar.dart # 仿Tiktok的Appbar组件
    ├── topToolRow.dart # 用户页面的顶部状态，在tab切换到user页面时隐藏返回按钮
    └── userMsgRow.dart # 一条用户信息的样式组件`

项目地址

https://github.com/mjl0602/flutter_tiktok

开源**客户端

基于 Google Flutter 的开源**客户端，支持 Android 和 iOS。

应用截图

iOS

Android

功能

登录（使用 osc 账号）
查看资讯（未登录即可查看）
查看、回复、发表、评论动弹（需要登录）
动弹小黑屋（需要登录）
“发现”部分的功能基本上都是用 H5 实现
资讯列表、动弹列表、评论列表支持下拉刷新或分页加载
支持主题切换（入口在侧滑菜单-设置-切换主题）

项目地址

https://github.com/yubo725/flutter-osc

豆瓣客户端

真正的豆瓣客户端，90% 还原豆瓣。首页、书影音、小组、市集及个人中心，一个不拉。

应用截图

功能介绍

此项目，90% 还原某瓣 APP，所有 UI 均按照某瓣来实现。
项目中的数据均来自豆瓣 api 真实有效数据
项目中用到了几乎所有的 Flutter widget
还有两个比较大的自定义魔改源码实现特效

项目地址

https://github.com/kaina404/FlutterDouBan

最后

初级前端与高级前端之间，很多时候并不是懂的知识点有多难的差别，很大原因就是投入学习前端的时间、经验的差别，其实就是信息差。

如果有一个地方能又快又好的获得这些优质的前端信息，那么将会大大缩短从初级到高级的时间。

前端GitHub 就是这样一个仓库，能帮助前端开发人员节省时间的仓库！

公众号：前端GitHub，专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

关于猫哥，大家可以看看我的年终总结前端工程师的 2020 年终总结 - 乾坤未定，你我皆黑马。

不知不觉，已经写到第 20 期了呢，往期精文请看下方宝藏仓库，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

往期精文

微信搜 “前端GitHub”，回复 “电子书” 即可以获得 160 本前端精华书籍哦，猫哥 WX：CB834301747 。

2021 年全球最火的WEB开发学习路线！没有之一！3 天就在GitHub收获了接近 1w 点赞

Hello，大家好，我是你们的前端章鱼猫。

Web 开发是一个不断变化的领域 - 我们今天构建网站的方式与几年前的方式完全不同。

随着大量工具的出现以及新工具的层出不穷，大多数时候开发人员发现对于自己该怎么选择感到困惑。

如果你是一个刚刚踏入 WEB 开发的初学者，这里有一份修炼图谱给你。

如果你是一个早已入门的高级开发者，那 2020 即将过去了，你的技术都学对了吗？

快来检验一下吧！

前端

后端

运维

最后

文章中的技术图片均来自如下开源项目：

【开发人员路线图】：循序渐进的指南和路径，以学习不同的工具或技术。

GitHub 地址：https://github.com/kamranahmedse/developer-roadmap

GitHub 中文地址：https://github.com/kamranahmedse/developer-roadmap/blob/master/translations/chinese

对了，新一年的 WEB开发路线图会在每年的年初进行更新，各位看官到时可以留意一下哦。

当然前端章鱼猫也会关注的，到时出了新的技术图谱，也会发出来的哦。

本文原文 GitHub 地址：https://github.com/biaochenxuying/FrontEndGitHub

just-react

这本书的宗旨是打造一本严谨、易懂的 React 源码分析教程。

为了达到这个目标，在行文上，本书会遵循：

不预设观点 —— 所有观点来自 React 核心团队成员在公开场合的分享。

丰富的参考资料 —— 包括在线 Demo、文章、视频。

保持更新 —— 在 React 版本更新后会及时补充。当前版本 v17.0.0-alpha。

章节列表

理念篇

第一章 React理念

✅ React理念

✅ 老的React架构

✅ 新的React架构

✅ Fiber架构的心智模型

✅ Fiber架构的实现原理

✅ Fiber架构的工作原理

✅ 总结

第二章前置知识

✅ 源码的文件结构

✅ 调试源码

✅ 深入理解JSX

架构篇

第三章 render 阶段

✅ 流程概览

✅ beginWork

✅ completeWork

第四章 commit 阶段

✅ 流程概览

✅ before mutation阶段

✅ mutation阶段

✅ layout阶段

实现篇

第五章 Diff 算法

✅ 概览

✅ 单节点Diff

✅ 多节点Diff

第六章状态更新

✅ 流程概览

✅ 心智模型

✅ Update

✅ 深入理解优先级

✅ ReactDOM.render

✅ this.setState

第七章 Hooks

✅ Hooks理念

✅ 极简Hooks实现

✅ Hooks数据结构

✅ useState与useReducer

✅ useEffect

✅ useRef

✅ useMemo与useCallback

第八章 Concurrent Mode

✅ 概览

✅ Scheduler的原理与实现

✅ lane模型

📝 异步可中断更新

📝 高优任务打断机制

📝 batchedUpdates

📝 Suspense

https://github.com/BetaSu/just-react

最后

初级前端与高级前端之间，很多时候并不是懂的知识点有多难的差别，很大原因就是投入学习前端的时间、经验的差别，其实就是信息差。

如果有一个地方能又快又好的获得这些优质的前端信息，那么将会大大缩短从初级到高级的时间。

前端GitHub 就是这样一个仓库，能帮助前端开发人员节省时间的仓库！

公众号：前端GitHub，专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

关于猫哥，大家可以看看我的年终总结前端工程师的 2020 年终总结 - 乾坤未定，你我皆黑马。

不知不觉，已经写到第 29 期了呢，往期精文请看下方宝藏仓库，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

往期精文

微信搜 “前端GitHub”，回复 “电子书” 即可以获得 160 本前端精华书籍哦，猫哥 WX：CB834301747 。

自从掌握了Google和百度的 16 个高级搜索技巧，我再也没有解决不了的 bug 了

大家好，我是你们的猫哥，一个不喜欢吃鱼、又不喜欢喵的超级猫 ~

前言

猫哥是一个常年混迹在 GitHub 上的猫星人，所以发现了不少好的前端开源项目、常用技巧，在此分享给大家。

公众号：前端GitHub，专注于挖掘 GitHub 上优秀的前端开源项目，收集、整理、推荐业界高品质前端资源合集，优秀的工具、库、好的教程、了解业界更优秀的代码、工具、业界最新的技术，抹平你的前端信息不对称。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

以下为【前端GitHub】的第 11 期精华内容。

做为一名程序员，在学习的过程中，肯定会遇到很多的 Bug，有时候，并不会有前辈在我们的身边指导我们该如何地去学习。这个时候，我们就得靠自己去使用搜索引擎去解决我们的问题。

幸运的是，我们所运到的问题，前人都已经遇到过了，并且给出了相应的解决办法。基本上百分之九十的问题，我们都能在互联网上搜索得到。

如果搜索之后，你还解决不了，那可能是因为你还没掌握如下技巧！

下面我给大家介绍下，Google 和 Baidu 这两个搜索引擎的高级搜索技巧。

Google

前提是能访问外网 🤩，不能访问的，请看下半文的百度搜索部分。

精确搜索：双引号

精确搜索，就是在你要搜索的词上，加上双引号，那个 Google 搜索引擎，就会完全的匹配你所要的词

比如搜索："前端GitHub"

站内搜索：site

这是一个比较常用的搜索方法，site 搜索，就是在站内进行搜索.

语法是：site:stackoverflow.com ，其中 site:后面加上你要搜索的网站地址。

一般程序猿解决问题，用 site:stackoverflow.com，大部分解决不了的问题，都会有答案了。

比如在 segmentfault.com 里面搜索："react打包npm run build生成的文件好大，怎样关掉生成 sourceMap" site:segmentfault.com

除了以上内容之外，还可以在 工具 那里进行筛选，有语言、时间、结果 3 种选项。

如果想通过时间筛选出最近的的内容，就可以试试时间的筛选了

还可以对结果进行精确匹配的筛选

通配符搜索：*

这也是一个比较常用的搜索方法，通常通配符搜索，用在模糊印象的地方比较多。

当我想搜一句歌词，“让我们同步进阶重生的力量来自真我战胜可敬的对手 yeah” ，但是前边的 “让我们同步进阶”，就可以用这个方法进行搜索了。搜索 *重生的力量来自真我

就会得到我们想要的结果了：林俊杰唱的《进阶》。

减号排除，缩小范围：-

当搜索量比较大的时候，使用减号 - 通过减号，能够去掉一些无关的搜索。

比如：全栈修炼 -全栈修炼之路

文档搜索：filetype

文档搜索命令 filetype，多数情况下用以查找我们所需要的资料，返回的页面是你搜索的文档相应格式。

如搜 JavaScript权威指南（第四版）的 pdf，就是: filetype:pdf JavaScript权威指南（第四版）

图片搜索

平常在网上考到一张好的图片，可以保持下来，但是由于图片的尺寸过小，或者像素不合适，这个时候，只要用谷歌图片搜索，就能找到许多类似的，或者尺寸清晰度更好的同一张。

比如我上传了一张 node 的 logo 的图片时，结果如下：

Baidu

因为很多同学用不了 google ，所以我觉得还是有必要讲一下百度常用的搜索技巧。

百度常用的技巧，许多和谷歌大同小异，常用的这些命令，这 10 个就够用了，其他高级技巧，不是做 SEO 没得必要去记太多。

普通搜索

普通人是直接搜索关键字。

比如：前端开发

下面介绍直接在百度搜索上用 语法 搜索的高级技巧。

intitle - 搜索范围限定在网页标题

搜索范围限定在包含 keyword 的网页标题中，这也是最普通的搜索。

intitle: 和后面的关键词之间不要有空格。

例如：

intitle:前端开发

对比普通搜索的图，发现搜索到的内容有一点点不一样，但并无太大差别。

site - 搜索范围限定在特定站点中

搜索范围限定在特定站点中。

如果知道某个站点中有自己需要找的东西，就可以把搜索范围限定在这个站点中，提高查询效率。

注意

site: 后面跟的站点域名，不要带 http://
site: 和站点名之间，不要带 空格

例如思否网站：全栈修炼 site:segmentfault.com

例如 GitHub：全栈修炼 site:github.com

inurl 搜索范围限定在 url 链接中

搜索范围限定在 url 链接中.

网页 url 中的某些信息，常常有某种有价值的含义。您如果对搜索结果的 url 做某种限定，可以获得良好的效果。

例如：前端教程 inurl:video

查询词 “前端教程” 是可以出现在网页的任何位置，而 “video” 则必须出现在网页 url 中。

双引号 “”

精确搜索：双引号

查询词加上双引号 “”，则表示查询词不能被拆分，在搜索结果中必需完整出现，可以对查询词精确匹配。
如果不加双引号 “”，经过百度分析后可能会拆分。

比如搜索 "前端开源项目"

书名号`《》`

查询词加上书名号《》有两层特殊功能

一是书名号会出现在搜索结果中；
二是被书名号括起来的内容，不会被拆分。

比如：《JavaScript高级程序设计（第4版）》

书名号在某些情况下特别有效果，比如查询词为手机，如果不加书名号在很多情况下出来的是通讯工具手机，而加上书名号后，《手机》结果就都是关于电影方面的了。

- 不含特定查询词

查询词用减号 - 语法可以帮您在搜索结果中 排除包含特定的关键词 的所有网页。

例子：全栈工程师 -java

查询词 “全栈工程师” 在搜索结果中，“java” 被排除在搜索结果中。

+ 包含特定查询词

查询词用加号 + 语法可以帮您在搜索结果中 必需包含特定的关键词 的所有网页。

例子：全栈工程师 +node

查询词 “全栈工程师” 在搜索结果中，“node” 被必需被包含在搜索结果中。

Filetype 搜索指定文档格式

查询词用 Filetype 语法可以限定查询词出现在指定的文档中，支持文档格式有 pdf，doc，xls，ppt，rtf。对于找文档资料相当有帮助。

比如：filetype:pdf JavaScript高级程序设计（第4版）

不过相对谷歌而已，百度的搜索是把自己的产品，放在前面，见上图，排在前面的都是百度自己的产品，百度文库。

图片搜索

百度和谷歌一样，都是提供了这个功能。

比如我上传的是一张 vue 的图片时，结果如下

百度高级搜索页面

https://www.baidu.com/gaoji/advanced.html

搜索结果：

在百度搜索中，其中 site 命令和双引号关键词 " " 这两个命令用得相对较多，也最容易记住。

最后

看到这里面，是不是又被你发现了新世界？觉得以后还能有 Bug 解决不了的？不可能了！！！

不知不觉，已经写到第 11 期了呢，已经分享了接近 85 个好的前端项目了呢，往期精文请看下方仓库，点击很危险，请慎入！

[前端GitHub]：https://github.com/FrontEndGitHub/FrontEndGitHub

平时如何发现好的开源项目，可以看看这篇文章：如何在 GitHub 上发现优秀开源项目和如何使用 GitHub 进行精准搜索的神仙技巧。

觉得有用？喜欢就收藏，顺便点个赞吧，你的支持是超级猫最大的鼓励！

可以加超级猫的 wx：CB834301747 ，一起闲聊前端。

微信搜 “前端GitHub”，回复 “电子书” 即可以获得 160 本前端精华书籍哦。

往期精文

你最想对超级猫说点啥？

11.2K Star！免费的计算机书籍汇总项目

大家好，我是你们的猫哥，那个不喜欢吃鱼、又不喜欢喵的超级猫 ~

今天给大家推荐一个免费计算机书籍汇总项目。

没有注明语种的，都为英语资源。

一、Web 开发

1.1 JavaScript 语言

The Modern JavaScript Tutorial（中文，英文）
你不知道的 JS
Speaking JavaScript
急性子程序员的 JavaScript 教程
JavaScript 语言教程（中文）
理解 ES6
探索 ES6
探索 ES2016 和 ES2017
探索 ES2018 和 ES2019
ES6 标准入门（中文）
Eloquent JavaScript（第三版）
JavaScript 的前20年（JavaScript: The First 20 Years）
TypeScript 教程
Node.js 入门（中文，英文）
React 编程模式
React 应用开发教程
Acceptance Test Driven Development with React
React.js 小书（中文）
现代 Web 开发：Nodejs + React 的在线互动教程。
Node.js 调试指南
精通 JavaScript 模块
GraphQL 之路
JavaScript 数据可视化
OAuth 2.0 Servers
JAMstack Web 开发
SICP（JavaScript 版）

1.2 其他 Web 开发

二、系统管理

Linux 命令行（The Linux Command Line）, 下载，中译
学习命令行
鸟哥的 Linux 私房菜（中文）
Linux 之旅
Bash 脚本教程（中文）
Pure Bash Bible
Unix 编程艺术
计算机系统导论：以汇编语言与 Linux 系统为例
计算机网络：系统方法
计算机组织导论：以树莓派和 ARM 汇编语言为例
计算机网络：原理，协议和实践
Linux 内核揭密（中文）
运维工程师学校（Ops School）
文件系统设计（Practical File System Design）, 下载
Docker 初学者教程
开源应用程序的体系结构

三、编程语言

3.1 C，C++

3.2 Go

3.3 Python

Python 编程基础（PDF）
Python 编程入门
Python 语法笔记
Python 科学应用入门（Introduction to Python for Computational Science and Engineering）, 下载
Python - 100天从新手到大师（中文）
A Byte of Python，中译：简明 Python 教程
使用 Python 写一个自己的游戏
The Hitchhiker’s Guide to Python!，中译：Python 开发最佳实践指南
廖雪峰 Python 教程（中文）
Python 语言互动教程
Python 算法与数据结构（第二版），中译
SICP（Python 版）（英文，中文）
Python 数据科学手册
Test-Driven Web Development with Python
Automate the Boring Stuff with Python
如何使用 Python3 编程
社交媒体挖掘
数据科学项目 Python 实战
HelloDjango - Django 博客教程（中文）
使用 Python 学习计量经济学（PDF）
黑客的贝叶斯方法：以 Python 为例

3.4 Rust

3.5 其他编程语言

四、数据库

五、软件开发

计算机科学入门
Crafting Interpreters
Emulator 101
计算机程序的结构和解释（SICP）
编写程序（Composing Programs）
从零开始写一个操作系统
编译器教程: 如何写一个最小的 C 语言编译器
System Programming
How to Design Programs（第二版）
算法，by Jeff Erickson，GitHub 仓库
A* 算法教程
逆向工程入门（Reverse Engineering for Beginners，英文，中文卷一, 中文卷二）
逆向工程初学者教程
Qt5 教程
函数式编程：以 Scala 为例
学习 ClojureScript
并行编程
谷歌 SRE（网站可靠性工程）丛书

六、人工智能

七、数学理论

7.1 微积分

进入纯数学
微积分很容易（Calculus made easy）

7.2 统计与概率

Seeing Theory：概率论和统计入门
Statistics Done Wrong
统计小手册
统计学习导论（An Introduction to Statistical Learning）
麻省理工学院统计学课件
Prob 140：概率论教材
预测：原理与实践
数据科学的原理与技巧
概率、统计和随机过程导论
概率，统计和随机过程讲义
随机过程导论

7.3 线性代数

7.4 密码学

7.5 其他理论书籍

计算机图形学教程
计算机科学的理论导论
好奇者的量子计算入门
简单逻辑
写给程序员的范畴论（Category Theory for Programmers）
写给科学家的范畴论（Category Theory for the Sciences）, 下载
图论的 D3 解释
离散数学导论
编译器设计基础（PDF）

八、其他

项目地址

https://github.com/ruanyf/free-books

还有另外一个项目，是推荐豆瓣评分 7 以上，均为值得精读的书籍的项目

地址如下：

https://github.com/biaochenxuying/awesome-books

微信搜 “前端GitHub”，回复 “电子书” 即可以获得上面 160 本前端精华书籍哦，猫哥 WX：CB834301747 。

最后

公众号：前端GitHub，专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

关于猫哥，大家可以看看我的年终总结前端工程师的 2020 年终总结 - 乾坤未定，你我皆黑马。

不知不觉，已经写到第 32 期了呢，往期精文请看下方宝藏仓库，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

往期精文

Vue3 的学习教程汇总、源码解释项目、支持的 UI 组件库、优质实战项目

大家好，我是你们的猫哥，一个不喜欢吃鱼、又不喜欢喵的超级猫 ~

关于猫哥，大家可以看看我的年终总结前端工程师的 2020 年终总结 - 乾坤未定，你我皆黑马。

前言

猫哥是一个常年混迹在 GitHub 上的猫星人，所以发现了不少好的前端开源项目、常用技巧，在此分享给大家。

公众号：前端GitHub，专注于挖掘 GitHub 上优秀的前端开源项目，并以专题的形式推荐，每专题大概 10 个好项目，每周会有一到三篇精华文章推送，与时俱进版前端资源教程。

已经推荐了 面试项目、CSS 奇技淫巧项目、代码规范项目、数据结构与算法项目、JavaScript 奇技淫巧项目、前端必备在线工具 等专题的近 100 个优秀项目了。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

今天给大家推荐的是 Vue3 的源码中文学习教程、支持的 UI 组件库、优质实战项目。

以下为【前端GitHub】的第 16 期精华内容。

1. Vue3 中文文档

先给大家提供 3 个 Vue3 的中文学习网址。

Vue3 中文文档，国内 CDN 加速版

https://vue3js.cn/docs/zh/

Vue3 设计理念

Vue3 设计理念，动机与目的，上手必读。

https://vue3js.cn/vue-composition/

Vue3 相关项目聚合网站

https://vue3js.cn/

2. Vue3 源码

为什么要学习源码 ?

1. 阅读优秀的代码的目的是让我们能够写出优秀的代码。

2. 不给自己设限，不要让你周围人的技术上限成为你的上限。

其实就跟我们写作文一样，你看的高分作文越多，写出高分作文的概率就越大。

基于现在的程序员工作模式(模块化开发，只需要拿到需求做自己的部分)，别说看源码，甚至就连项目里的代码都懒的去看，我认识的很多程序员就是这样的，一个项目摸了两三年，你要问他项目中 webpack 都干了哪些事情，他的回答是不知道，反而趾高气扬的告诉你，那些他从来都用不上，看了也没什么用，也看不懂，这里省略内心千字脏文。

阅读主要目的 是为了帮助我们 积累素材，不要书到用时方恨少，看到美女我们应该能有一万种词语去形容，如气若幽兰，美艳不可方物，一笑倾城，再笑倾国，世间尤物，而不是简短的几个字，我艹，美女!

https://vue3js.cn/start/

3. UI 组件库

Ant-design-vue

ant-design-vue 是 Ant Design 的 Vue 实现，组件的风格与 Ant Design 保持同步, 目前支持 Vue 3.0 的 2.0.0 测试版已发布。

https://antdv.com/docs/vue/introduce-cn/

Vant 3.0

轻量、可靠的移动端 Vue 组件库。

Vant 是有赞前端团队开源的移动端组件库，于 2016 年开源，已持续维护 4 年时间。

目前 Vant 已完成了对 Vue 3.0 的适配工作，并发布了 Vant 3.0 版本

https://vant-contrib.gitee.io/vant/v3/

Element-plus

Element Plus，一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库。

https://element-plus.org/#/zh-CN

element 3

Element 3，一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库。

https://github.com/hug-sun/element3

4. 实战项目

vue-vben-admin

基于 ant-design-vue，typescript，vue3.0，vite 实现的 vue3 风格的后台管理系统。

https://github.com/anncwb/vue-vben-admin

vue-admin-beautiful

基于 vue3.0 的开源 admin 项目，同时支持电脑，手机，平板，🔥🔥🔥默认分支使用vue3.x+antdv 开发，master 分支使用的是 vue2.x+element 开发。

https://github.com/chuzhixin/vue-admin-beautiful

vue-cli

基于 Vue3.0 Composition Api 快速构建实战项目

https://github.com/Wscats/vue-cli

movie-trailer

Vue3 + TypeScript 开发的电影预告片 webAPP，可以查看正在热映与即将上映的电影信息和短片。

https://github.com/lhz960904/movie-trailer

newbee-mall-vue3-app

newbee-mall 项目是一套电商系统，包括 newbee-mall 商城系统及 newbee-mall-admin 商城后台管理系统，基于 Spring Boot 2.X 和 Vue 以及相关技术栈开发。

前台商城系统包含首页门户、商品分类、新品上线、首页轮播、商品推荐、商品搜索、商品展示、购物车、订单结算、订单流程、个人订单管理、会员中心、帮助中心等模块。后台管理系统包含数据面板、轮播图管理、商品管理、订单管理、会员管理、分类管理、设置等模块。

https://github.com/newbee-ltd/newbee-mall-vue3-app

vue3-jd-h5

🔥 基于 vue3.0.0 ，vant3.0.0，vue-router4.0.0-0, vuex^4.0.0-0,vue-cli3，mockjs，仿京东淘宝的，移动端 H5 电商平台！

https://github.com/GitHubGanKai/vue3-jd-h5

最后

关于猫哥，大家可以看看前端工程师的 2020 年终总结 - 3 年之痒，看看猫哥的脸都被打歪的 😂。

前端工程师的 2020 年终总结 - 3 年之痒

不知不觉，已经写到第 16 期了呢，已经分享超过 200 个好的前端项目了呢，往期精文请看下方宝藏仓库，点击很危险，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

平时如何发现好的开源项目，可以看看这篇文章：如何在 GitHub 上发现优秀开源项目和如何使用 GitHub 进行精准搜索的神仙技巧。

觉得有用？喜欢就收藏，顺便点个赞吧，你的支持是超级猫最大的鼓励！

可以加超级猫的 WX：CB834301747 ，一起闲聊前端。

微信搜 “前端GitHub”，回复 “电子书” 即可以获得 160 本前端精华书籍哦。

往期精文

1. github1s

这个项目叫做 github1s，也正如其名，作者对其的解释是：只需 1 秒，就可以用 VS Code 方式来看 GitHub 代码。

毕竟代码嘛，在“原汁原味”的环境下看，还是比较舒服的。

而且操作方式也是非常的简单，只需要在浏览器网址部分中的 “github” 后边，添加一个 “1s” 就可以了。

https://github.com/conwnet/github1s

2. 1s

还有一个项目是「+1s」，有些网站，当我们给它 +1s 时，会有意想不到的奇效。

1、github +1s

在 GitHub 域名后面加 1s 可以直接使用 VSCode Online 打开仓库代码，例如：

https://github1s.com/microsoft/vscode

2、youtube +1s

当你看到喜欢的 YouTube 视频时，可以在 youtube 后面加 1s，直接下载此视频。

https://www.youtube1s.com/watch?v=RGOj5yH7evk

3、tiktok +1s

国外版抖音的视频，可以在 tiktok 后面加 1s，直接下载此视频。

https://www.tiktok1s.com/@rampage_thedancer/video/6905482704012217605?is_copy_url=1&is_from_webapp=v1

是不是很神奇，赶紧去试试吧。

项目地址：

https://github.com/justjavac/1s

最后

初级前端与高级前端之间，很大原因就是投入学习前端的时间、经验的差别，其实就是信息差。

如果有一个地方能又快又好的获得这些优质的前端信息，那么将会大大缩短从初级到高级的时间。

前端GitHub 就是这样一个仓库，能帮助前端开发人员节省时间的仓库！

公众号：前端GitHub，专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

关于猫哥，大家可以看看我的年终总结前端工程师的 2020 年终总结 - 乾坤未定，你我皆黑马。

不知不觉，已经写到第 20 期了呢，往期精文请看下方宝藏仓库，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

往期精文

微信搜 “前端GitHub”，回复 “电子书” 即可以获得 160 本前端精华书籍哦，猫哥 WX：CB834301747 。

10 个 GitHub 上超火和超好看的管理后台模版，后台管理项目有着落了

大家好，我是你们的超级猫，一个不喜欢吃鱼、又不喜欢喵的超级猫 ~

前言

一般人没事的时候刷刷朋友圈、微博、电视剧、知乎，而有些人是没事的时候刷刷 GitHub ，看看最近有哪些流行的项目。

久而久之，这差距就越来越大，因此总会有开源信息的不对称，有哪些优秀的前端开源项目值得学习的也不知道。

初步前端与高级前端之间，最大的差距可能就是信息差造成的。

超级猫从 2016 年加入 GitHub，到现在的 2020 年，快整整 5 个年头了。

从 2018 年开始，我就养成了每天逛 GitHub 的习惯，一般在早上上班前或者中午午休的时候都会逛一下。

看看每天都开源了哪些好的前端项目，还有用到的主流前端技术栈又是哪些，值得我去学习的。

因此也收藏了不少好的开源项目，在此推荐给大家，每周会有一到三篇精华文章推送。

希望你在浏览、学习了超级猫推荐的这些开源项目的过程中，你能学习到更多编程知识、提高编程技巧、找到编程的乐趣。

公众号：前端GitHub，专注于挖掘 GitHub 上优秀的前端开源项目，抹平你的前端信息不对称，涵盖 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS、数据结构与算法等等。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

以下为【前端GitHub】的第 8 期精华内容。

今天给大家带来的是 GitHub 上 10 个超火和超好看管理后台模版，希望你在这里面找到写省时省力的模版！

喵~ 喵~ 喵~ 正文开始了，上车坐稳扶好了~

Web 开发中几乎的平台都需要一个后台管理，但是从零开发一套管理后台模版并不容易，幸运的是有很多开源免费的管理后台模版可以给开发者使用。

那么有哪些优秀的开源免费的管理后台模版呢？

我在 GitHub 上收集了一些优秀的管理后台模版，而且是还在不断更新和维护的项目，并总结得出 Top 10。

1. vue-Element-Admin

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。

同时配套了系列教程文章，如何从零构建后一个完整的后台项目。

手摸手，带你用 vue 撸后台系列一(基础篇)
手摸手，带你用 vue 撸后台系列二(登录权限篇)
手摸手，带你用 vue 撸后台系列三 (实战篇)
手摸手，带你用 vue 撸后台系列四(vueAdmin 一个极简的后台基础模板)
手摸手，带你用 vue 撸后台系列五(v4.0新版本)
手摸手，带你封装一个 vue component
手摸手，带你优雅的使用 icon
手摸手，带你用合理的姿势使用 webpack4（上）
手摸手，带你用合理的姿势使用 webpack4（下）

该项目还在一直维护中。

而且也是配有使用文档的，很不错。

Github Star 数 62.2K， Github 地址：

https://github.com/PanJiaChen/vue-element-admin

2. iview-admin

iView Admin 是基于 Vue.js，搭配使用 iView UI 组件库形成的一套后台集成解决方案，由 TalkingData 前端可视化团队部分成员开发维护。

iView Admin 遵守 iView 设计和开发约定，风格统一，设计考究，并且更多功能在不停开发中。

不过该项目已经一年多没有更新维护了，估计是在等出了配合 Vue3 相关的 iView UI 库再更新了吧。

而且也是配有使用文档的，很不错。

Github Star 数 15.3K，Github 地址：

https://github.com/iview/iview-admin

3. vue-admin-template

这是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。

目前版本为 v4.0+ 基于 vue-cli 进行构建，若你想使用旧版本，可以切换分支到 tag/3.11.0，它不依赖 vue-cli。

极简版，就是 vue-Element-Admin 的简化版，功能简单一点，方便快速开发用的。

而且也是配有使用文档的，很不错。

Github Star 数 12K，Github 地址：

https://github.com/PanJiaChen/vue-admin-template

4. ant-design-pro

开箱即用的中台前端 / 设计解决方案。

Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。

随着『设计者』的不断反馈，我们将持续迭代，逐步沉淀和总结出更多设计模式和相应的代码实现，阐述中后台产品模板/组件/业务场景的最佳实践，也十分期待你的参与和共建。

Ant Design Pro 在力求提供开箱即用的开发体验，为此我们提供完整的脚手架，涉及国际化，权限，mock，数据流，网络请求等各个方面。

为这些中后台中常见的方案提供了最佳实践来减少学习和开发成本。

而且也是配有使用文档的，很不错。

Github Star 数 27.2K，Github 地址：

https://github.com/ant-design/ant-design-pro

5. ngx-admin

基于Angular 10+ 的可定制管理仪表板模，还拥有 6 个惊人的视觉主题。

Github Star 数 21.7K，Github 地址：

https://github.com/akveo/ngx-admin

6. vue-admin-beautiful

vue-admin-beautiful 是一款基于 vue+element-ui 的绝佳的中后台前端开发管理框架（基于 vue/cli 4 最新版，同时支持电脑，手机，平板）。

vue-admin-beautiful-pro 拥有四种布局（画廊布局、综合布局、纵向布局、横向布局）四种主题（默认、海洋之心、绿茵草场，荣耀典藏），共计 16 布局主题种组合，满足所有项目场景。

已支持常规 bug 自动修复，前端代码自动规范，代码一键生成等众多功能，可以在完全不依赖后台的情况下独立开发完成项目，以及接口自动模拟生成，支持 JAVA、PHP、NODE、.NET、Django 等常用所有后台对接，甚至完全放弃 JAVA 等常规后端开发，内置 node 服务支持直接操作数据库进行增删改查，支持当前流行的 unicloud、serverless 云开发。

该项目还在不断更新和维护中，不错。

https://github.com/chuzhixin/vue-admin-beautiful

7. vuestic-admin

这是一个免费与美妙 Vue.js 管理模板，包括 38 以上个定制用户界面组件。

响应布局 | 图表(Charts.js) | 进度表 | 表格 | 选辑 | 日期选择器 | 复选框和单选框 | 静态表与数据表 | medium editor | 平滑设计字体 | 按钮 | 塌缩 | 颜色选择器 | 时间线 | 土司通知 | 工具提示 | 弹窗 | 图标 | 自旋体 | 模式 | 文件上传 | 厚切薯条通知 | 树 | 卡片 | 等级 | 滑动器 | 聊天系统 | 地图(Google, Yandex, Leaflet, amMap) | 登录/注册页模板 | 404页模板 | i18n

Github Star 数 7.6K，Github 地址：

https://github.com/epicmaxco/vuestic-admin

8. antd-admin

一套优秀的中后台前端解决方案。

特性

国际化，源码中抽离翻译字段，按需加载语言包
动态权限，不同权限对应不同菜单
优雅美观，Ant Design 设计体系
Mock 数据，本地数据调试

而且也是配有使用文档的，很不错。

https://github.com/zuiidea/antd-admin

9. eladmin

一个简单且易上手的 Spring boot 后台管理框架

技术栈

使用 SpringBoot、Jpa、Security、Redis、Vue 等前后端前沿技术开发。

模块化

后端采用按功能分模块开发方式，提升开发，测试效率。

高效率

项目简单可配，内置代码生成器，配置好表信息就能一键生成前后端代码。

分离式

前后端完全分离，前端基于 Vue，后端基于 Spring boot。

响应式

支持电脑、平板、手机等所有主流设备访问。

易用性

几乎可用于所有 Web 项目的开发，如 OA、Cms，网址后台管理等。

前后端都有，还是挺不错的。

https://github.com/elunez/eladmin

10. AdminLTE

AdminLTE 是一个完全响应的管理模板。基于 Bootstrap 4.5 框架以及 JS / jQuery 插件。

高度可定制且易于使用。适合从小型移动设备到大型台式机的多种屏幕分辨率。

AdminLTE 的所有 JS，SCSS 和 HTML 文件均经过精心编码，并带有清晰的注释。SCSS 已用于提高代码的可定制性。

ui 风格也不偏向于外国吧，比较简结。

好的地方是还一直在更新和维护，最大的不足就是还依赖于 jQuery 这个旧时代的产物，唉。

Github Star 数 36.8K 也非常高， Github 地址：

https://github.com/almasaeed2010/AdminLTE

最后

最近加班有点严重，经常都是晚上 10、11 点多才下班，所以文章更新慢了很多。

因为文章都是在晚上肝出来的，一篇文章要肝几个晚上才行，肝到这里时，已经过了零晨了，唉。

同是打工猫，生活不易啊！

最后就以一张很治愈的图片来治愈一下疲惫的心灵吧。

好了啦，【前端GitHub】的第 8 期内容已经讲完了啦。

更多精彩内容请关注下方仓库，你将发现更大的前端世界：

原文地址：https://github.com/FrontEndGitHub/FrontEndGitHub

平时如何发现好的开源项目，可以看看这两篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目和恕我直言，你可能连 GitHub 搜索都不会用 - 如何精准搜索的神仙技巧。

可以加超级猫的 wx：CB834301747 ，一起闲聊前端GitHub。

觉得有用？喜欢就收藏，顺便点个赞吧，你的支持是我最大的鼓励！

微信搜 “前端GitHub”，回复 “电子书” 即可以获得 160 本前端精华书籍哦。

往期精文

你最想对超级猫说点啥？

10 个 GitHub 上最火的程序员简历项目，2021 金三银四必备！

大家好，我是你们的猫哥，一个不喜欢吃鱼、又不喜欢喵的超级猫 ~

前言

猫哥是一个常年混迹在 GitHub 上的猫星人，所以发现了不少好的前端开源项目、常用技巧，在此分享给大家。

公众号：前端GitHub，专注于挖掘 GitHub 上优秀的前端开源项目，并以专题的形式推荐，每专题大概 10 个好项目，每周会有一到三篇精华文章推送，与时俱进版前端资源教程。

已经推荐了 面试项目、css 奇技淫巧项目、代码规范项目、数据结构与算法项目、JavaScript 奇技淫巧项目、前端必备在线工具 等专题的近 100 个优秀项目了。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

以下为【前端GitHub】的第 12 期精华内容。

1. ResumeSample

程序员简历模板系列。

包括 PHP 程序员简历模板、iOS 程序员简历模板、Android 程序员简历模板、Web 前端程序员简历模板、Java 程序员简历模板、C/C++ 程序员简历模板、NodeJS 程序员简历模板、架构师简历模板以及通用程序员简历模板。

https://github.com/geekcompany/ResumeSample

2. Markdown-Resume

用 markdown 语法来写的简历模版，非常简结通用。

还介绍了导出 PDF 的方法。

https://github.com/CyC2018/Markdown-Resume

3. awesome-resume

项目包括程序员简历例句，程序员简历范例，Java 简历模版，Python 简历模版，C++ 简历模版。

比如前端：

对前后端分离模式，可视化开发深入理解，对 Vue 和 react 有丰富的开发经验，具备一定的框架设计能力。
对 Javascript 中闭包、函数式语言等概念有清晰的认知，对常见库的源码实现有了解。
熟悉模块化、前端编译和构建工具，熟练运用主流的移动端 JS 库和开发框架，并深入理解其设计原理，例如：Zepto、React 等。
熟悉 Node.js 开发，熟练使用 npm, webpack, gulp 等工具。熟悉前端性能的优化，熟悉使用 Chrome，Safari 等前端调试工具。
熟悉 Node.js 以及 V8 的性能和稳定性优化，能对系统整体性能进行评估，解决内存瓶颈。

https://github.com/resumejob/awesome-resume

4. DeerResume

好用的 MarkDown 在线简历工具，可在线预览、编辑、设置访问密码和生成 PDF。

可自行搭建，任意修改页面样式和风格
免安装，可放置于任何支持静态页面的云和服务器（当然包括GitHub
在线MarkDown编辑器+实时预览
在浏览器中实时保存草稿
支持阅读密码，您可以直接将网址和密码发送，供招聘方在线浏览
一键生成简单雅致的PDF，供邮件发送及打印

https://github.com/geekcompany/DeerResume

5. markdown-resume

支持 Markdown 和富文本的在线简历排版工具，支持切换 4 种模版、自定义和导出功能。

简历的制作过程考验了一个人的两个能力，逻辑能力和细节能力。

https://github.com/mdnice/markdown-resume

6. best-resume-ever

是一个帮助你快速生成漂亮简历的工具，它基于 Vue 和 LESS，生成的简历可导出为 PDF 格式。

https://github.com/salomonelli/best-resume-ever

7. awesome-resume-for-chinese

适合中文的简历模板收集。

该项目收集了好多个中文的简历开源项目模版，比如上图那个。

https://github.com/dyweb/awesome-resume-for-chinese

8. resume

一份优雅简约的简历

优化构建，页面秒开无闪烁
自适应屏幕兼容移动端
Github Action 自动部署部署到 ghpages，可在线浏览
自动生成 PDF，全自动化流程

https://github.com/gwuhaolin/resume

9. biaochenxuying

前端程序员模版，这个模版就是结合前面的几个简历模版，结合笔者自己的工作经验，写的简历，也就是笔者上一年跳槽时的简历 😂，其中部分内容做了处理。

这个是在 VsCode 里面用 markdown 语法写好，然后导出来的，非常简单，而且自由度非常高，随自己怎么修改。

其中装的 VsCode 插件是 markdown-all-in-one 和 markdown-pdf，支持预览 md 文件以及导入各种格式的 md 文件。

支持导出的格式：

markdown-pdf: Export (settings.json)
markdown-pdf: Export (pdf)
markdown-pdf: Export (html)
markdown-pdf: Export (png)
markdown-pdf: Export (jpeg)
markdown-pdf: Export (all: pdf, html, png, jpeg)

上面简历的原文件地址：

https://github.com/biaochenxuying/blog/blob/master/resume/resume.md

10. github-readme-stats

这个项目是在你的 README 中获取动态生成的 GitHub 统计信息！

不过这种简历的方式要对自己的 GitHub 贡献很有信心才好哦。

比如笔者的如下，也不好做为简历来写 😂

不过只要是 readme 文件，放在 自己的用户名的仓库 里面也是可以的，也能达到第 9 个项目中简历的效果。

https://github.com/anuraghazra/github-readme-stats

最后

不知不觉，已经写到第 13 期了呢，已经分享了 100 个好的前端项目了呢，往期精文请看下方宝藏仓库，点击很危险，请慎入！

[前端GitHub]：https://github.com/FrontEndGitHub/FrontEndGitHub

平时如何发现好的开源项目，可以看看这篇文章：如何在 GitHub 上发现优秀开源项目和如何使用 GitHub 进行精准搜索的神仙技巧。

觉得有用？喜欢就收藏，顺便点个赞吧，你的支持是超级猫最大的鼓励！

可以加超级猫的 wx：CB834301747 ，一起闲聊前端。

微信搜 “前端GitHub”，回复 “电子书” 即可以获得 160 本前端精华书籍哦。

往期精文

你最想对超级猫说点啥？

前言

猫哥是一个常年混迹在 GitHub 上的猫星人，所以发现了不少好的前端开源项目、常用技巧，在此分享给大家。

公众号：前端GitHub，专注于挖掘 GitHub 上优秀的前端开源项目，并以专题的形式推荐，每专题大概 10 个好项目，每周会有一到三篇精华文章推送，与时俱进版前端资源教程。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

今天给大家推荐的是学习 TypeScript 的优质项目。

以下为【前端GitHub】的第 15 期精华内容。

TypeScript

TypeScript 是适用于任何规模应用的 JavaScript。

TypeScript 扩展了 JavaScript ，为它添加了类型支持。

TypeScript 可以在您运行代码之前找到错误并提供修复，从而改善您的开发体验。

任何浏览器，任何操作系统，任何运行 JavaScript 的地方，完全开源。

网站	说明
TypeScript	TypeScript 官网，TS 扩展了 JavaScript ，为它添加了类型支持
typescript-tutorial	TypeScript 入门教程，循序渐进的理解 TypeScript
TypeScript	TypeScript 使用手册
typescript-book-chinese	深入理解 TypeScript
clean-code-typescript	适用于TypeScript的简洁代码概念
TypeScript入门	TypeScript 入门的视频教程
typescript-tutorial	TypeScript 速成教程（2小时速成）

1. TypeScript

学习一门技术，最好的方式肯定是看官网的教程啦！

官网上有什么是 TypeScript，为什么要用 TypeScript ，和 api 相关的文档，而且还是一手的学习资料，无疑是最好的学习资料了。

而且还可以通过社区了解最新的进展。

https://github.com/microsoft/TypeScript

2. typescript-tutorial

从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript。

与官方手册不同，本书着重于从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript，希望能给大家一些帮助和启示。

适合人群

本书适合以下人群

熟悉 JavaScript，至少阅读过一遍《JavaScript 高级程序设计》
了解 ES6，推荐阅读 ECMAScript 6 入门
了解 Node.js，会用 npm 安装及使用一些工具
想了解 TypeScript 或者想对 TypeScript 有更深的理解

本书不适合以下人群

没有系统学习过 JavaScript
已经能够很熟练的运用 TypeScript

https://github.com/xcatliu/typescript-tutorial

3. TypeScript

TypeScript 中文使用手册。

这个好像是 TypeScript 官网的中文翻译原文，猫哥不是很确定，不过是个学习 TS 的好仓库。

✔️ TypeScript 语言用于大规模应用的 JavaScript 开发。
✔️ TypeScript 支持类型，是 JavaScript 的超集且可以编译成纯 JavaScript 代码。
✔️ TypeScript 兼容所有浏览器，所有宿主环境，所有操作系统。
✔️ TypeScript 是开源的。

https://github.com/zhongsp/TypeScript

4. typescript-book-chinese

TypeScript Deep Dive 中文版，深入理解 TypeScript。

《TypeScript Deep Dive》是一本很好的开源书，从基础到深入，很全面的阐述了 TypeScript 的各种魔法，不管你是新手，还是老鸟，它都将适应你。

此外，它不同于 TypeScript 官方给出的文档（当然 TypeScript 给出的文档是很好的），在此书中，结合实际应用下的场景用例，你将能更深入的理解 TypeScript。

https://github.com/jkchao/typescript-book-chinese

5. clean-code-typescript

将 Clean Code 的概念适用到 TypeScript，灵感来自 clean-code-javascript。

将源自 Robert C. Martin 的 Clean Code 的软件工程原则适配到 TypeScript 。这不是一个代码风格指南，它是一个使用 TypeScript 来生产可读的，可重用的，以及可重构的软件的指南。

这里的每一项原则都不是必须遵守的，甚至只有更少的能够被广泛认可。这些仅仅是指南而已，但是却是 Clean Code 作者多年经验的结晶。

我们的软件工程行业只有短短的 50 年，依然有很多要我们去学习。当软件架构与建筑架构一样古老时，也许我们将会有硬性的规则去遵守。而现在，让这些指南做为你和你的团队生产的 TypeScript 代码的质量的标准。

比如：使用有意义的变量名

做有意义的区分，让读者更容易理解变量的含义。

👎 反例:

function between<T>(a1: T, a2: T, a3: T) {

  return a2 <= a1 && a1 <= a3;

}

👍 正例:

function between<T>(value: T, left: T, right: T) {

  return left <= value && value <= right;

}

提醒一下，该仓库末尾有中文翻译版。

https://github.com/labs42io/clean-code-typescript

6. TypeScript入门

这个是个视频课程，介绍了 TypeScript 的基本概念、常用语法和高级特性。

http://www.imooc.com/learn/763

7. typescript-tutorial

这个仓库的教程以快速工程实践为目标，旨在让读者速成，能够迅速的 GET 到语言的核心知识点，并付诸实践！

语言始终是一种改进生产力的工具，陌生使用者最迫切的需求应该是快速掌握工具的使用，而不是在连工具都没学会使用的时候，就先沉迷于细枝末叶，奇技淫巧。

真正的熟练：应该是在实践中大量使用、在实践中踩坑、以及在实践中理解的过程中自然形成的。

这个教程真的非常简结，只讲经常使用的知识点，可以说是 2 小时速成 😂。

https://github.com/joye61/typescript-tutorial

最后

关于猫哥，大家可以看看我的 2020 年终总结，看看猫哥的脸都被打歪的 😂。

不知不觉，已经写到第 15 期了呢，已经分享超过 100 个好的前端项目了呢，往期精文请看下方宝藏仓库，点击很危险，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

平时如何发现好的开源项目，可以看看这篇文章：如何在 GitHub 上发现优秀开源项目和如何使用 GitHub 进行精准搜索的神仙技巧。

觉得有用？喜欢就收藏，顺便点个赞吧，你的支持是超级猫最大的鼓励！

可以加超级猫的 WX：CB834301747 ，一起闲聊前端。

微信搜 “前端GitHub”，回复 “电子书” 即可以获得 160 本前端精华书籍哦。

往期精文

1. shanghai_house_knowledge

这份宝典是作者 2020 年 11 月在上海买房经历总结出来的买房购房做的一些功课，本着开源的精神分享给大家。

目前这份宝典在 GitHub 上标星 3.2 k。

这份购房宝典不仅逻辑清晰，而且写得十分透彻，从房产概念、板块知识、地价、配套规划、学区到贷款分析等，一应俱全。

不少房地产业内人士看了也颇为吃惊，把所有房地产知识整理得如此详尽。

在人才引进落户政策部分，作者不仅详细的解读了上海最新的落户政策。

在全文的第三部分买房中，可以看到作者特意加入了砍价与价格谈判，这得是身经百战才有如此痛的领悟啊

如果你打算买房，不妨去 GitHub 上看看有没有攻略。

地址：

https://github.com/ayuer/shanghai_house_knowledge

2. hangzhou_house_knowledge

2017年买房经历总结出来的买房购房知识，这一份杭州购房信息，从房产概念、板块知识、地价、配套规划、学区到区域价值分析等，一应俱全。

对于只知写代码、不了解房地产的程序员来说，这就是一份“购房宝典”，成了他们买房前参考的重要资料。

从杭州版块分析、房子概念、房产信息渠道到地铁交通、拆迁、学区、配套设施分析、杭州各区域规划及价值分析等，整理得可谓是非常得全面且详细，从以下的截图

地址：

https://github.com/houshanren/hangzhou_house_knowledge

最后

初级前端与高级前端之间，很多时候并不是懂的知识点有多难的差别，很大原因就是投入学习前端的时间、经验的差别，其实就是信息差。

如果有一个地方能又快又好的获得这些优质的前端信息，那么将会大大缩短从初级到高级的时间。

前端GitHub 就是这样一个仓库，能帮助前端开发人员节省时间的仓库！

公众号：前端GitHub，专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

关于猫哥，大家可以看看我的年终总结前端工程师的 2020 年终总结 - 乾坤未定，你我皆黑马。

不知不觉，已经写到第 25 期了呢，往期精文请看下方宝藏仓库，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

往期精文

微信搜 “前端GitHub”，回复 “电子书” 即可以获得 160 本前端精华书籍哦，猫哥 WX：CB834301747 。

这个录屏工具在 GitHub 火了，秒杀 33 种同行工具

大家好，我是你们的猫哥，那个不喜欢吃鱼、又不喜欢喵的超级猫 ~

今天要推荐一个强大、功能丰富的屏幕录制工具，它是 Chrome 插件。

功能

🎥 无限记录您的标签页，桌面，任何应用程序和相机
✏️ 通过在屏幕上的任意位置绘制，添加文本和创建箭头进行注释
👀 突出显示您的点击，将注意力集中在鼠标上或将其从录音中隐藏
🎙️ 独立的麦克风和计算机音频控件，一键通等
⚙️ 自定义倒计时，仅在悬停时显示控件，以及许多其他自定义选项
💾 导出为 mp4，gif 和 webm，或将视频直接保存到 Google 云端硬盘
✂️ 修剪或删除录音部分

不需要下载和安装，它可以录制 Chrome 浏览器中打开的任何页面。

允许你对它们进行实时注释，最最关键的一点是，它免费开源，无需注册。

录制长度无限制，独立的麦克风和电脑音频控制，能导出为 mp4、gif 和 webm。

或保存到 Google Drive，且支持简单的裁剪视频。

对比了 33 款同类产品，制作了一个表格，用实际数据证明这款软件是最牛的：

效果预览

地址：

https://github.com/alyssaxuu/screenity

最后

初级前端与高级前端之间，很多时候并不是懂的知识点有多难的差别，很大原因就是投入学习前端的时间、经验的差别，其实就是信息差。

如果有一个地方能又快又好的获得这些优质的前端信息，那么将会大大缩短从初级到高级的时间。

前端GitHub 就是这样一个仓库，能帮助前端开发人员节省时间的仓库！

公众号：前端GitHub，专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

关于猫哥，大家可以看看我的年终总结前端工程师的 2020 年终总结 - 乾坤未定，你我皆黑马。

不知不觉，已经写到第 26 期了呢，往期精文请看下方宝藏仓库，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

往期精文

微信搜 “前端GitHub”，回复 “电子书” 即可以获得 160 本前端精华书籍哦，猫哥 WX：CB834301747 。

1. draw.io

draw.io 是一款免费的在线图表编辑工具, 可以用来编辑工作流, BPM, org charts, UML, ER图, 网络拓朴图等，而且是免费的哦，创建的图表等可能无限哦。

还可以 GitHub 授权登录，然后把自己创建的流程图等保存到 GitHub 仓库，还可以在 GitHub 仓库里面打开自己保存过的流程等图哦！

猫哥就是一直在用这个来画图的，然后自己创建一个私有 GitHub 仓库来存放这些图的，非常好用哦。

https://www.draw.io/

2. ProcessOn

ProcessOn 是一个在线作图工具的聚合平台，它可以在线画流程图、思维导图、UI原型图、UML、网络拓扑图、组织结构图等等，
不管 Mac 还是 Windows，一个浏览器就可以随时随地的发挥创意，规划工作。

缺点就是免费用户能创建 9 个图，不是无限的。

https://www.processon.com/

3. excalidraw

Excalidraw 是一款非常轻量的 在线白板 工具，可以直接在浏览器打开，轻松绘制具有 手绘风格 的图形。

比如可以绘制这样的图形：

一个开源免费的画图软件
个人目前看到的最舒服的画图软件
支持多人协作

https://excalidraw.com/

4. whistle

代理抓包工具，很好很强大。

基于 Node 实现的跨平台 web 调试代理工具，类似的工具有 Windows 平台上的 Fiddler，主要用于查看、修改HTTP、HTTPS、Websocket 的请求、响应，也可以作为 HTTP 代理服务器使用。

不同于 Fiddler 通过断点修改请求响应的方式，whistle 采用的是类似配置系统 hosts 的方式，一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式，且可以通过 Node 模块扩展功能。

https://wproxy.org/whistle/

5. Easy Mock

Easy Mock 是杭州大搜车无线团队出品的一个极其简单、高效、可视化、并且能快速生成模拟数据的在线 mock 服务。以项目管理的方式组织 Mock List，能帮助我们更好的管理 Mock 数据.

不过目前该网站正在备案中，暂时访问不了，要等几天了。

https://www.easy-mock.com

6. Fiddler

Fiddler 是一个蛮好用的抓包工具，可以将网络传输发送与接受的数据包进行截获、重发、编辑、转存等操作。也可以用来检测网络安全。

https://www.telerik.com/fiddler

6. GitHub 统计

GitHub 全球排名：这个排名很权威。

每个在 GitHub 开源的开发者，都想知道自己在 GitHub 上的排名吧，很简单只要在上面输入框输入自己的 GitHub 用户名即可，就可以看到自己的统计数据了。

比如猫哥的统计数据：https://gitstar-ranking.com/biaochenxuying

https://gitstar-ranking.com/

8. 墨刀

原型设计工具，原型、设计、流程图、思维导图......享受创造的乐趣，成就团队和个人

产品设计，何止是快，简单的拖拽，即可快速完成产品设计，将更多的时间留给思考
尺寸灵活，创作不受限，适配各类移动产品、网页设计、后台管理、小程序、活动原型....
支持制作高、低保真原型，不论是工作交流，还是客户展示，都能完美满足团队需求

https://modao.cc/

8. 蓝湖

一款产品文档和设计图的共享平台，帮助互联网团队更好地管理文档和设计图。

蓝湖可以在线展示 Axure，自动生成设计图标注，与团队共享设计图，展示页面之间的跳转关系。

高效的产品设计协作平台
无缝衔接产品、设计、研发流程
降低沟通成本，缩短开发周期，提高工作效率

国内大部分设计师和前端在用这个来对接 ps 文件吧，真的好用！

https://lanhuapp.com

10. PxCook

从设计到代码, 让团队高效协作
高效易用的自动标注工具，生成前端代码，设计研发协作利器

https://www.fancynode.com.cn/pxcook

11. removebg

一个抠图神器类工具，消除图片背景:100% 自动 – 只需 5 秒– 无需点击 – 免费。

Remove.bg 是一款非常神奇强大的在线人像照片/物品图片背景快速去除工具，你只需要上传图片，它就会利用「人工智能」技术全自动帮你扣掉背景，5 秒钟就能给你一张透明的移除背景后的主体照片。整个过程非常的简单傻瓜，你完完全全不需要花费任何精力去自己抠图。

https://www.remove.bg/zh

12. ps-uupoop

PS 在线图片编辑器是一个专业精简的在线 ps 图片照片制作处理软件工具，直接在浏览器打开就可用它修正，调整和美化图像。

相比同类软件，uupoop 支持的文件格式更多，包含 psd、xd、sketch、xcf、raw、pdf 及常见图片格式。

整体体验下来，我觉得 uupoop 拥有了原版PS 80% 的功能，基本可以满足轻量的编辑或应急情况下的编辑需求。

https://www.uupoop.com/

最后

好了，提升个程序员软技能的必备工具项目，今天先推荐这 12 个吧。

往期精文请看下方宝藏仓库，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

不知不觉，FrontEndGitHub 这个开源项目 已经开源了快半年了，一直在高频更新和维护中，原创文章都已经写到第 44 期了呢，几乎每一篇都是猫哥精心挑选的优质开源项目，推送的每一篇文章里面的项目几乎都是对前端开发很有帮助的。

往期精文

前端资源 & 电子书

公众号：前端GitHub，专注于挖掘 GitHub 上优秀的前端开源项目，并以专题的形式推荐，每专题大概 10 个好项目，每周会有一到三篇精华文章推送，已经推荐了面试项目、css奇技淫巧项目、代码规范项目、数据结构与算法项目、管理后台模板、前端必备在线工具等专题的近 300 个优秀项目了。

希望你在浏览、学习了超级猫推荐的这些开源项目的过程中，你能学习到更多编程知识、提高编程技巧、找到编程的乐趣。

有需要的就来拿吧，绝对免费，无套路获取。

如果看到这里，喜欢这篇文章的话，请帮点个好看。

Ｂ站收藏 12.5w+！GitHub 标星 6.6k+！这门神课拯救了我薄弱的计算机基础

大家新年好呀，我是你们的猫哥，我又回来啦 ~

相信大家过年都过得开心吧

过得开心，那么就开始学习了哈 ~

前言

作为一个所谓的计算机科班出身的人来说，特别难为情的是自己的计算机基础很差，相信这不是少数程序员的现状，而是绝大多数程序员的现状。

比如计算机网络当年一度差点挂掉，多亏当时的老师手下留情，给我一个刚及格的分数。

但是猫哥出来工作之后，特别觉得学生的计算机基础特别差，主要原因是老师和教育资源的问题，老师都是照着书本或者 PPT 讲的，十分乏味。

如果有好的学习资源，肯定能激发学习的兴趣的，或者学习起来容易一点，没那么难懂。

当程序员的时间越长好像越明白这些基础知识和原理的重要性，这样说起来简单，但是其中的枯燥就让很多摩拳擦掌的同学折戟沉沙，都说兴趣最重要，怎么提气这个兴趣。

最近猫哥在逛 b 站的时候偶然发现了这么一个课程，通过图文并茂生动形象的介绍计算机的基础知识，看了几集，觉得非常的棒，特地把这个《计算机科学速成课》推荐给大家。

计算机科学速成课

这门 40 集的课真的包含了超多的基础知识：

1 - 早期的计算 - Early Computing

2 - 电子计算 - Electronic Computing

3 - 布尔逻辑与逻辑电路 - Boolean Logic & Logic Gates

4 - 二进制 - Representing Numbers and Letters with Binary

5 - 算术逻辑单元 - How Computers Calculate - the ALU

6 - 寄存器 & 内存 - Registers and RAM

7 - **处理器 - The Central Processing Unit(CPU)

8 - 指令和程序 - Instructions & Programs

9 -  高级 CPU 设计 - Advanced CPU Designs

10 - 编程史话 - Early Programming

11 - 编程语言 - The First Programming Languages

12 - 编程原理：语句和函数 - Programming Basics: Statements & Functions

13 - 算法初步 - Intro to Algorithms

14 - 数据结构 - Data Structures

15 - 阿兰·图灵 - Alan Turing

16 - 软件工程 - Software Engineering

17 - 集成电路、摩尔定律 - Integrated Circuits & Moore’s Law

18 - 操作系统 - Operating Systems

19 - 内存 & 储存介质 - Memory & Storage

20 - 文件系统 - Files & File Systems

21 - 压缩 - Compression

22 - 命令行界面 - Keyboards & Command Line Interfaces

23 - 屏幕 & 2D 图形显示 - Screens & 2D Graphics

24 - 冷战和消费主义 - The Cold War and Consumerism

25 - 个人计算机革命 - The Personal Computer Revolution

26 - 图形用户界面 - Graphical User Interfaces

27 - 3D 图形 - 3D Graphics

28 - 计算机网络 - Computer Networks

29 - 互联网 - The Internet

30 - 万维网 - The World Wide Web

31 - 网络安全 - Cybersecurity

32 - 黑客与攻击 - Hackers & Cyber Attacks

33 - 加密 - Cryptography

34 - 机器学习与人工智能 - Machine Learning & Artificial Intelligence

35 - 计算机视觉 - Computer Vision

36 - 自然语言处理 - Natural Language Processing

37 - 机器人 - Robots

38 - 计算机中的心理学 - Psychology of Computing

39 - 教育型科技 - Educational Technology

40 - (完结) 奇点，天网，计算机的未来 - The Singularity, Skynet, and the Future of Computing

到这里你以为完了么？不！这怎么能够！

译者们还贴心的在每一集的开头放上了 片头总结，让你刚开始就能知道这一集讲了啥。

哪个时间点讲了哪些知识点，真的是炒鸡贴心！

如此贴心的翻译团队，制作出如此良心的一门课。

真的强烈建议大家一定要好好看，沉下心来，认认真真的每天学一点，当复利拐点到了，有一天你会顿悟、和突飞猛进的。

当然这么好看的课当然希望大家能够 多多转发，在看支持，让更多的朋友能够看到，大家一起学习一起进步！

b 站地址：

https://www.bilibili.com/video/av21376839/

GitHub 地址：

https://github.com/1c7/Crash-Course-Computer-Science-Chinese

如果你还想下载这门课，请在关注本公众号，回复 计算机 ，即可获得下载链接了。

之前还写过类似的：推荐 7 个 Github 上近 200k Star 的计算机学习资源，练好内功的秘籍！，相信你会找到宝藏！

最后

初级前端与高级前端之间，很大原因就是投入学习前端的时间、经验的差别，其实就是信息差。

如果有一个地方能又快又好的获得这些优质的前端信息，那么将会大大缩短从初级到高级的时间。

前端GitHub 就是这样一个仓库，能帮助前端开发人员节省时间的仓库！

公众号：前端GitHub，专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

关于猫哥，大家可以看看我的年终总结前端工程师的 2020 年终总结 - 乾坤未定，你我皆黑马。

不知不觉，已经写到第 19 期了呢，往期精文请看下方宝藏仓库，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

往期精文

微信搜 “前端GitHub”，回复 “电子书” 即可以获得 160 本前端精华书籍哦，猫哥 WX：CB834301747 。

Web 趋势榜：上周最有意思又热门的 10 大 Web 项目 - 210709

大家好，我是你们的猫哥，那个不喜欢吃鱼、又不喜欢喵的超级猫 ~

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

1. solid

Solid 是一个用于创建用户界面的声明性 JavaScript 库。它不使用虚拟 DOM。相反，它选择将其模板编译为真实的 DOM 节点，并将更新包装在细粒度的反应中。这样，当您的状态仅更新依赖于它运行的代码时。

https://github.com/solidjs/solid

2. petite-vue

最近，尤雨溪发布了一款针对渐进增强（progressive enhancement）进行优化的 Vue 发行版——petite-vue，大小仅有约 5kb。与标准 Vue 相比，petite-vue 具备相同的模板语法和响应式心理模型，而二者的差别在于 petite-vue 专门针对在服务器框架渲染的一个现有 HTML 页面上 “sprinkle” 少量交互进行了优化。

petite-vue 的亮点不仅在于体积小，还在于它能够使用针对渐进增强的最优实现，后者是它与标准 Vue 的主要区别，也是其主要优势。尤雨溪透露 petite-vue 与 Vue 1 的工作原理类似，但实现细节更优：petite-vue 遍历实际 DOM，并利用 @vue/reactivity 连接 (attach) 细粒度 reactive effects，因此其更新可精确抵达各个binding。

https://github.com/vuejs/petite-vue

3. Milkdown

Milkdown 这个轮子，它提供了一种插件化的开发所见即所得的 Markdown 编辑器的能力，并且提供了一系列官方插件以保证编辑器能够开箱即用，如果你需要定制化能力，也可以通过编写插件来实现。你也可以编写自己的主题，来让编辑器完全按照你需要的样式来展示。

https://github.com/Saul-Mirone/milkdown

4. Fronts

Fronts 是一个用于构建 Web 应用程序的渐进式微前端框架，它基于Webpack的模块联合。

https://github.com/unadlib/fronts

5. vscode-theme-generator

只需几种颜色即可轻松为 VS Code 生成主题。

https://github.com/Tyriar/vscode-theme-generator

6. Qwik

qwik 以 dom，以 rsumumable web-app 框架为中心

通过专注于 HTML 的服务器端渲染的可恢复性，旨在获得最佳时间来互动的开源框架，并进行细粒度延迟加载代码。

https://github.com/BuilderIO/qwik

7. Captain Stack

VSCode 的代码建议。

这个功能有点类似于 Github Copilot 的代码建议。但它没有使用 AI，而是将您的搜索查询发送给 Google，然后检索 StackOverflow 答案并为您自动完成它们。

https://github.com/hieunc229/copilot-clone

8. VSCodeVim

VSCodeVim 是 Visual Studio Code 的 Vim 模拟器。

🚚有关受支持的 Vim 功能的完整列表，请参阅我们的路线图。
📃我们的更改日志概述了版本之间的重大/次要更新。
❓如果您需要提出任何问题，请加入我们的Slack
在 GitHub 上报告缺失的功能/错误。

https://github.com/VSCodeVim/Vim

9. Didact

构建自己的 React 的 DIY 指南。

从头开始重写 React。一步步遵循真实 React 代码的架构，但没有所有优化和非必要功能。

https://github.com/pomber/didact

10. UIkit

UIkit 是 YOOtheme 团队开发的一款轻量级开源的前端框架，可以帮助你快速的开发和创建前端 UI 界面，支持 LESS、模块化、自定义主题、及响应式设计。

https://github.com/uikit/uikit

最后

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

更多精彩项目，请看下方宝藏仓库，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

往期精文

微信搜 “前端GitHub”，回复 “电子书” 即可以获得下面 300 本技术精华书籍哦，猫哥 wx：CB834301747 。

不知不觉，原创文章已经写到第 50 期了呢，几乎每一篇都是猫哥精心挑选的优质开源项目，推送的每一个项目都是对前端开发很有帮助的。

更新并运营大半年不易，大佬们看完文章后给个一键三连吧，就当给猫哥一点鼓励吧，谢谢。

影响了一代代前端人的 20 个里程碑式的顶级开源项目！2021 成为里程碑的项目又是哪个呢？

大家好，我是你们的猫哥，那个不喜欢吃鱼、又不喜欢喵的超级猫 ~

猫哥会在每周的周一给大家推荐一篇上周的 前端周趋势榜的 10 大项目，每月给大家推荐一篇上个月的 前端月趋势榜的 20 大项目，方便大家知道最近都开源了哪些好的前端项目，还有用到的主流前端技术栈又是哪些，以免错过了好的开源项目。

前端GitHub 可以算是很多人主动获取一些开源项目和活跃开发者最好的途径。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

本文介绍 2006 年至 2020 年的 20 个重要的前端项目，每一个都是里程碑式的顶级开源项目。

1. jQuery

2006 年 8 月

jQuery 由 John Resig 创建并于 2006 年发布，在 Ajax 框架与 Prototype.js，Dojo 或 YUI 之类的库的争夺中胜出。

成为几乎所有网页中都包含的事实上的标准库，即使在今天。

一个源于广阔的“插件”生态系统的精美软件。

提供统一的 API 来处理浏览器不一致的工作非常出色。

本月趋势： GitHub上的+ 114 ☆

https://github.com/jquery/jquery

2. Node.js

2009 年 5 月

由 Ryan Dahl 在 JavaScript V8 引擎之上创建的 Node.js 将 JavaScript 带到了服务器端。

强大的 API，命令行工具，IoT 设备和所有现代 Web 开发工具。

本月趋势： GitHub 上的 + 743 ☆

https://github.com/nodejs/node

3. Express

2009 年 6 月

Express 几乎与 Node.js 一样古老，但仍被认为是 Node.js 的标准 Web 框架。

由于其极简的方法，因此拥有深厚的中间件生态系统。

更现代的替代方法包括Nest，Fastify或Next.js。

本月趋势： GitHub 上的 + 402 ☆

https://github.com/expressjs/express

4. D3

2010 年 9 月

Mike Bostok 创建的经典数据可视化库在将近 10 年后仍然有用。

许多图表库都建立在其强大的原语之上。

本月趋势： GitHub 上的 + 351 ☆

https://github.com/d3/d3

5. Angular

2010 年 1 月

2010 年，来自 Google 的 Angular 通过提供可在浏览器中运行的完整框架，开始颠覆开发人员构建应用程序的方式。

它没有增强服务器生成的 DOM，而是将页面的控制移至客户端，从而进入了“单页面应用程序”时代。

Angular 2 在 2014 年作为一个单独的项目发布。

本月趋势： + 2 ☆ 在 GitHub 上

https://github.com/angular/angular.js

6. ember.js

2011 年 5 月

一个 UI框架，该框架倾向于使用强约定以使 Web 开发人员更加高效。

在 JavaScript 的现代化过程中发挥了重要作用。

本月趋势： GitHub 上 + 35 ☆

https://github.com/emberjs/ember.js

7. Bootstrap

2011 年 7 月

Bootstrap 由 Twitter 在 2011 年开源，是一组 JavaScript 和 CSS 元素，用于向网页添加常见的小部件。

得益于整洁的文档，一致的开发人员体验和灵巧设计的响应式设计功能，它闪闪发光。

当开发人员在智能手机上浏览网页时，已帮助开发人员使网页适合移动设备浏览。

本月趋势： GitHub 上的 + 530 ☆

https://github.com/twbs/bootstrap

8. Webpack

2012 年 3 月

Webpack 是前端工具的关键部分，它能够从任何种类的资产生成 JavaScript 捆绑包。

第五版主要版本将于 2020 年仍在 Create React App 或 Next.js 等项目中使用，即将推出。

包裹和汇总是最受欢迎的两种。

本月趋势： + 247 ☆在GitHub上

https://github.com/twbs/bootstrap

9. TypeScript

2012 年 10 月

为 JavaScript 提供静态类型安全性的 JavaScript 的超集。

赢得了转译者与竞争对手 Flow 的战斗，几乎成为前端和后端开发的标准。

DefinitelyTyped 项目为 7000 多个软件包提供了其他类型！

趋势这个月： + 740 ☆ GitHub 上

https://github.com/microsoft/TypeScript

10. electron

2013 年 4 月

使用 Web 技术构建桌面应用程序的解决方案。

由流行的桌面应用程序使用，例如 VS Code，Slack ...

本月趋势： GitHub 上的 + 440 ☆

https://github.com/electron/electron

11. React

2013 年 5 月

React 由 Facebook 开源，以创建动态，快速的 UI。

不是像 Angular 这样的完整框架，因为它仅处理视图层。

它的组件方法和 JSX 语法变得非常流行，并启发了许多项目。

本月趋势： GitHub 上的 + 1646 ☆

https://github.com/facebook/react

12. Vue.js

2013 年 7 月

Vue.js 在 React 之后仅两个月发布，采用了另一种方法来处理反应性。

通常被认为对初学者更友好。

没有像 React 与 Facebook 或 Angular 与 Google 这样的大型公司的支持，而是由 Evan You 创建的。

强大的社区，尤其是在**。

版本 3 提供了巨大的改进，包括更好的 TypeScript 支持和 Composition API。

本月趋势： GitHub 上 + 1415 ☆

https://github.com/vuejs/vue

13. babel

2014 年 9 月

最初称为 6 to 5 的编译器 Babel 帮助使 JavaScript 的 ES6 版本流行，这是 React 成功的关键部分。

让开发人员使用 JavaScript 的最新功能编写代码，而不必担心浏览器的支持。

作为许多项目的依赖项包括在内。

本月趋势： + 184 ☆在 GitHub 上

https://github.com/babel/babel

14. VsCode

2015 年 9 月

基于 Electron 的最流行的 IDE，用于编码 JavaScript 和 TypeScript 应用程序。

GitHub 上的 Atom 于 2012 年推出，它是该概念的先驱：使用 Web 技术构建的代码编辑器，可通过安装插件进行扩展。

凭借其 TypeScript 支持而发光……这两个项目均来自 Microsoft。

本月趋势： GitHub上为+ 1562 ☆

https://github.com/microsoft/vscode

15. react-native

2015 年 1 月

利用 React Native，开发人员可以利用对 React 框架的了解，为 iOS 或 Android 构建移动应用程序。

本月趋势： GitHub 上的 + 577 ☆

https://github.com/facebook/react-native

16. next.js

2016 年 10 月

成为最受欢迎的框架，用于构建全栈 JavaScript 应用程序（在前端和后端均运行的应用程序）。

在前端使用 React，并提供服务器端渲染功能，以提供最佳的用户体验。

本月趋势： GitHub 上的 + 1345 ☆

https://github.com/vercel/next.js

17. puppeteer

2017 年 5 月

一个 Node.js 库，用于控制无头 Chrome 浏览器执行诸如浏览器测试或 Web 抓取之类的操作。

本月趋势： GitHub 上的 + 746 ☆

https://github.com/puppeteer/puppeteer

18. deno

2018 年 5 月

Node.js 发行 9 年后，Ryan Dahl 再次采用新的服务器端 JavaScript 运行时。

旨在解决与 Node.js 相关的几个问题。

没有集中的程序包管理器，可以从任何 URL 加载任何 JavaScript 依赖项。

2020 年最受欢迎的项目之一。

本月趋势： GitHub 上的 + 1304 ☆

https://github.com/denoland/deno

19. snowpack

2019 年 2 月

一种构建工具，可利用有关 JavaScript 模块的最新更改来提供出色的开发人员体验。

本月趋势： GitHub 上的 + 431 ☆

https://github.com/snowpackjs/snowpack

20. Rome

2020 年 2 月

Rome 由 Seb McKenzie 创建，旨在提供一个依赖项来处理所有前端工具（皮棉，测试，构建...）。

这个冒似还不是非常出名，这将是 2020 年的成功项目吗？还将有待时间验证！

本月趋势： GitHub 上的 + 114 ☆

https://github.com/rome/tools

21. Vite ?

2020 年

Vite 下一代前端工具

Vite 是 Vue 的作者尤雨溪开发的 Web 开发构建工具，它是一个基于浏览器原生 ES 模块导入的开发服务器，在开发环境下，利用浏览器去解析 import，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随启随用。同时不仅对 Vue 文件提供了支持，还支持热更新，而且热更新的速度不会随着模块增多而变慢。在生产环境下使用 Rollup 打包。

💡 即时服务器启动
⚡️ 快如闪电的 HMR
🛠️ 丰富的功能
📦 优化的构建
🔩 通用插件接口
🔑 全类型 API

这将是 2021 年的成功项目吗？还将有待时间验证！

本月趋势： GitHub 上的 + 1403 ☆

https://github.com/vitejs/vite

最后

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

前端GitHub 专注于挖掘 GitHub 上优秀的前端开源项目，并以专题的形式推荐，每专题大概 10 个好项目，每周会有一到三篇精华文章推送。

原文链接请看下方宝藏仓库，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

往期精文

微信搜 “前端GitHub”，回复 “电子书” 即可以获得下面 300 本技术精华书籍哦，猫哥 wx：CB834301747 。

不知不觉，原创文章已经写到第 41 期了呢，几乎每一篇都是猫哥精心挑选的优质开源项目，推送的每一篇文章里面的项目几乎都是对前端开发很有帮助的。

程序员最想要的高逼格电脑桌面，都藏在这个开源项目里了！

大家新年好呀，我是你们的猫哥，那个不喜欢吃鱼、又不喜欢喵的超级猫又回来啦 ~

喵~ 喵~ 喵~ 正文开始了，上车坐稳扶好了~

简介

今天推荐一个好项目，直接可以拉高程序员电脑桌面逼格，该项目为生成壁纸的应用，能够将许多东西转换成动态壁纸。

包括视频文件、gif 文件、html 和 web 页面、着色器，甚至包括游戏和游戏模拟器。

也就是说只要是你想要的，都能设置为你自己的专属壁纸，是不是很酷呢？

当全屏运行其他应用或游戏时，壁纸将停止播放，完全不占用 cpu 和显卡。

先上效果图！

又或者是这款非常科幻的黑客帝国风格的壁纸。

还有这款元素周期表壁纸，只要你把鼠标点到相应元素到，还会出现一些有趣的特效。

这个带点 3D 特效的浮世绘冲浪壁纸，这款软件也能轻松驾驭。

不过作为一款壁纸软件，Lively Wallpaper 自带的素材库看起来实在有些些寒酸了，只有 12 款自带的壁纸可以选择。

Lively Wallpaper 是世超目前看到过的所有壁纸软件里，自定义壁纸最为简单方便的。

不过如果出现了断网这种尴尬的情况，软件已经预载的视频壁纸不会受到影响。

但是你切换壁纸时就会因为连接不到网络而加载失败。

如果你看上了一张有意思的动图，同样点击软件的【 + 】号，然后把这张动图的拖动到方框里，只要想一秒这张动图就变成了你的壁纸。

需要提醒的是，差友们尽量选择一张高清一点的动图，要不被软件拉伸之后画质会非常感人。

有点遗憾的是，这个项目目前只支持 window ，如果想要支持 mac 的可以看看往期精文。

项目地址：

https://github.com/rocksdanister/lively

最后

初级前端与高级前端之间，很多时候并不是懂的知识点有多难的差别，很大原因就是投入学习前端的时间、经验的差别，其实就是信息差。

如果有一个地方能又快又好的获得这些优质的前端信息，那么将会大大缩短从初级到高级的时间。

前端GitHub 就是这样一个仓库，能帮助前端开发人员节省时间的仓库！

公众号：前端GitHub，专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

关于猫哥，大家可以看看我的年终总结前端工程师的 2020 年终总结 - 乾坤未定，你我皆黑马。

不知不觉，已经写到第 21 期了呢，往期精文请看下方宝藏仓库，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

往期精文

微信搜 “前端GitHub”，回复 “电子书” 即可以获得 160 本前端精华书籍哦，猫哥 WX：CB834301747 。

1534K Star！排名前十的 10 大前端顶级开源项目

大家好，猫哥今天给大家推荐的是排名前十的 10 大前端开源项目，每个都有 100K 左右的 Star，都开源了些啥？

相信很多人都不知道吧，今天猫哥带大家来了解一下吧。

1. freeCodeCamp

323 K

FreeCodeCamp 是一个自由开源的学习编程的社区，致力于帮助人们利用零散时间学习编程。它的使命是 Learn to code and help nonprofits（学习编程，去帮助那些非盈利组织）。

FCC 涵盖 HTML5、CSS、React、JavaScript、Database 等课程，游戏化程度非常高，学员可以通过线上聊天室和线下社区活动（Coffee and Code）相互帮助。

目前覆盖全球 160+ 个国家、1000+ 个城市，40W+ 开发者在平台学习。

FreeCodeCamp 国内的中文版请看 https://freecodecamp.cn （这是由国内爱好者翻译的中文版本）

https://github.com/freeCodeCamp/freeCodeCamp

2. Vue.js

182K

Vue.js 是一个渐进式 JavaScript 框架，也是目前前端最流行的框架。

易用

已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！

灵活

不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。

高效

20kB min+gzip 运行大小
超快虚拟 DOM
最省心的优化

https://github.com/vuejs/vue

3. React

167K

一个声明性，高效且灵活的 JavaScript 库，用于构建用户界面。

声明式

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。

以声明式编写 UI，可以让你的代码更加可靠，且方便调试。

组件化

创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。

组件逻辑使用 JavaScript 编写而非模板，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。

一次学习，随处编写

无论你现在正在使用什么技术栈，你都可以随时引入 React 来开发新特性，而不需要重写现有代码。

React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。

https://github.com/facebook/react

React 相关的项目可以看: 一个 React 技术揭秘的项目，自顶向下的 React 源码分析。

4. awesome

157K

awesome：令人敬畏的；使人畏惧的；可怕的；极好的

就像我们汇总我们常用的电脑环境软件一样，我们会找一些非常好的适合我们用的软件来做一个总结，awesome 项目也是如此，由于 GitHub 上有大量的开源项目，开发者就会根据需要汇总一些常用的好用的资源，并且根据 awesome 的主题做一下划分，开发语言等也有类似资源汇总。

https://github.com/sindresorhus/awesome

5. bootstrap

149K

流畅，直观且功能强大的前端框架，可更快，更轻松地进行 Web 开发。

使用世界上最流行的前端开源工具包 Bootstrap 快速设计和自定义响应式移动优先站点，它具有 Sass 变量和 mixins，响应式网格系统，大量的预构建组件以及强大的 JavaScript 插件。

https://github.com/twbs/bootstrap

6. You-Dont-Know-JS

136K

该项目为 YDNJS(You Don’t Know JS) 图书系列，包含一系列深入探讨 JavaScript 语言核心机制的书籍。

内容大纲

入门与进阶
作用域与闭包
this 与对象原型
类型与文法
异步与性能
ES6 与未来

https://github.com/getify/You-Dont-Know-JS

7. vscode

114K

Visual Studio Code 是一个运行于 OS X，Windows 和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台编辑器。

也是当今天前端最流行的编辑器！

https://github.com/microsoft/vscode

8. javascript

107K

这个项目是 JavaScript 编程风格指南。

包含了：类型、对象、数组、字符串、函数、属性、变量、提升、比较运算符 & 等号、块、注释、空白、逗号、分号、类型转化、命名规则、存取器、构造函数、事件、模块、jQuery、ECMAScript 5 兼容性、测试、性能、资源、JavaScript 风格指南说明

https://github.com/airbnb/javascript

9. javascript-algorithms

103K

该仓库包含了多种基于 JavaScript 的算法与数据结构。

每种算法和数据结构都有自己的 README，包含相关说明和链接，以便进一步阅读 (还有 YouTube 视频) 。

算法包含了算法主题和算法范式。

其中算法主题又包含了：数学、集合、字符串、搜索、排序、链表、树、图、加密、机器学习。

算法范式：算法范式是一种通用方法，基于一类算法的设计。这是比算法更高的抽象，就像算法是比计算机程序更高的抽象。

算法范式包含了：BF 算法、贪心法、分治法、动态编程、回溯法、Branch & Bound 等等。

这项目还出了对应的教学视频，总共 81 个视频讲解，每个视频大概 5 - 10分钟左右，还能学习英语哦 😉

youtube 的教学视频：https://www.youtube.com/playlist?list=PLLXdhg_r2hKA7DPDsunoDZ-Z769jWn4R8

猫哥之前学习算法的时候，也在这个项目中收益良多呢！

而且这个项目还一直有维护和更新内容哦！真的非常不错的一个项目！

https://github.com/trekhleb/javascript-algorithms

更多算法相关的项目推荐可以看看这篇文章：7 个 GitHub 上超火的前端学习的数据结构与算法项目

10. d3

使用 SVG、Canvas 和 HTML 使数据生动起来。

D3（或D3.js）是一个 JavaScript 库，用于使用 Web 标准可视化数据。D3 可帮助您使用SVG，Canvas 和 HTML 使数据栩栩如生。D3 将强大的可视化和交互技术与数据驱动的 DOM 操作方法相结合，为您提供现代浏览器的全部功能，并为您的数据设计正确的可视界面提供了自由。

https://github.com/d3/d3

最后

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

前端GitHub 专注于挖掘 GitHub 上优秀的前端开源项目，并以专题的形式推荐，每专题大概 10 个好项目，每周会有一到三篇精华文章推送。

原文链接在下方宝库：

https://github.com/FrontEndGitHub/FrontEndGitHub

往期精文

微信搜 “前端GitHub”，回复 “电子书” 即可以获得下面 300 本技术精华书籍哦，猫哥 wx：CB834301747 。

不知不觉，原创文章已经写到第 39 期了呢，几乎每一篇都是猫哥精心挑选的优质开源项目，推送的每一篇文章里面的项目几乎都是对前端开发很有帮助的。

涨姿势了！22 个拓展程序员技术与视野的国外网站，快添加进收藏夹！

大家好，我是你们的猫哥，一个不喜欢吃鱼、又不喜欢喵的超级猫 ~

关于猫哥，大家可以看看我的年终总结前端工程师的 2020 年终总结 - 乾坤未定，你我皆黑马。

前言

初级前端与高级前端之间，很大原因就是投入学习前端的时间、经验的差别，其实就是信息差。

如果有一个地方能又快又好的获得这些优质的前端信息，那么将会大大缩短从初级到高级的时间。

前端GitHub 就是这样一个仓库，能帮助前端开发人员节省时间的仓库！

公众号：前端GitHub，专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

以下为今天【前端GitHub】的第 18 期精华内容。

今天给大家推荐一些程序员经常使用的网站，也是我经常上的一些网站，让大家也一下拓展视野。

猫哥还将网站做了分类整理，方便大家阅读。

1. 项目类

项目是一个面试官非常看重的点，也是拓展视野、挖掘轮子一个的地方。

下面就为你推荐几个程序员都应该 mark 的项目类网站。

1.1 GitHub 代码托管

GitHub 作为全球最大的同性交友网站，也是矿资源非常丰富的矿场。

GitHub 有时比 Google 还有用，如果你不懂如何使用它来挖矿，那你不算一名合格的程序员。

GitHub 是一个宝藏库，可没有藏宝图，GitHub 这个亿计的优秀的开源项目也和你没有关系。

Github 也有非常多好的项目可以推荐，比如我自己的 github (逃了)

https://github.com/biaochenxuying

还有很多非常优秀的 GitHub 项目，比如 FrontEndGitHub、CS-notes、mall 商城项目。

1.2 GitLab

对于有些人，提到 GitHub 就会自然的想到 Gitlab, Gitlab 支持无限的公有项目和私有项目。

GitLab 是一个用于仓库管理系统的开源项目，使用 Git 作为代码管理工具，并在此基础上搭建起来的 web 服务。

猫哥目前公司的项目用的就是 GitLab 平台。

https://about.gitlab.com/

2. 博客类

2.1 dev

dev 社区和国内的掘金社区很相似，技术分类也比较多，各种技术应有尽有，文章质量都很不错。

像 Java、Python、js、分布式等应有尽有，文章质量普遍都还不错，其实如果平时多留意不难发现，掘金上有一些文章是翻译自 dev 社区。

这个社区也是猫哥经常去看的网站，还翻译过几篇该网站的文章呢。

https://dev.to/

2.2 dreamincode

dreamincode 是一个相对小众的技术博客，界面和博客园风格颇为相似，属于简约而不简单的那种，但是内容却不简单。

https://www.dreamincode.net

2.3 bytes

bytes 和 dreamcode 类似，简约但不简单，不多说了。

https://bytes.com

2.4 hongkiat

hongkiat 是与技术、设计领域相关的站点之一，大家可以在这里分享技术文章。

https://www.hongkiat.com/blog/design-dev

2.5 IBM Developer

这里面都是一线工程师，技术性很强，每一篇文章都值得细细观看，认真学习。

https://developer.ibm.com

3. 问答类

3.1 StackOverFlow

作为一名程序员，如果没有听过 Stackoverflow，那么你最好去面壁思过一下。

这是一个由外国人创办的专为程序员提供的国际性问题解答交流社区，正如网站签名：Stack Overflow - Where Developers Learn, Share, & Build Careers。

这个网站非常的纯粹，一般人还真不太习惯用这个，没有一手好英语还看不太懂全英文的技术交流与问答。

当你拋出一个技术问题时，最终是否能得到有用的回答，往往取决于你所提问和追问的方式。 –Eric S. Raymond

https://stackoverflow.com

3.2 Reddit

reddit 是一个非常个性的社区，你可以在这里讨论编程问题，还可以学习学英语，reddit 还很幽默，有古怪的莫名笑点，评论接楼很有意思。

https://www.reddit.com

3.3 daniweb

daniweb 也是一个质量比较高的问答平台，有一种像社交平台的感觉。

https://www.daniweb.com

4. 算法类

4.1 LeetCode

和国内的 leetcode 一样都是刷题用的，但是国际版的 leetcode 汇聚了全球各国大神，看看你和大神的思路是否一样呢。

https://leetcode.com

4.2 LintCode

LintCode 领扣上有数量超过 1000 道的算法题目和人工智能题目，通过刷题熟练掌握数据结构和算法。

完成各大名企的阶梯训练，为你斩获心仪的 offer 打下坚实的基础

https://www.lintcode.com

4.3 Codeforces

Codeforces是全球最著名的在线评测系统之一，这里有高水平的选手，高质量的题目，高密度的比赛。

该网站由俄罗斯的一个团体创立并负责运营。当然，该网站上大部分博客、评论、题面都是英语的。

http://codeforces.com/

4.4 Topcoder

Topcoder 据说是世界上规模最大的编程网站，这里面的题型，比赛形式跟 ACM/ICPC 极不相同。

该网站把**纳入其赛区，大家可以上去那里跟来自全世界的程序员(事实上大多数也是大学生)进行更直接的交流，可能也是 ACM/ICPC 练兵的好地方吧。

该网站每个月都有两到三次在线比赛，根据比赛的结果对参赛者进行新的排名。

参赛者可根据自己的爱好选用 Java, C++, C#, VB 或 python 进行编程。

https://www.topcoder.com

5. 教程类

5.1 tutorialspoint

这是一个在线学习的网站，并且免费，里面有各种技术、各个知识点的讲解和demo，灰常全面，这比查找API方便多了，遇到不明白的知识点直接根据索引找就是了，还有各种电子书。

https://www.tutorialspoint.com/index.htm

5.2 codecademy

学习新语言，敲代码玩就在这里了。这个网站将简化编程学习的过程。比如说网站左边会讲解知识点，右边直接练习。如果出现错误，就会有错误提示，直接给你反馈。所以，使用它不用想太多，直接拼命硬干敲代码入门。

https://www.codecademy.com

5.3 Livecoding.tv

Livecoding.tv由一群欧美程序爱好者共同发起成立，旨在为全球程序员提供一个实时高效的互动平台。特色是使用了录屏直播技术，用户可以在线观看高手实时编程并且可以向对方提问互动，网站现在已经汇集了一大批程序精英。现在Livecoding.TV来到**，希望更多的**程序员加入进来一起切磋技术。

https://www.livecoding.tv/accounts/login/

5.4 Dzone

Dzone是一个技术涵盖比较全面的网站，像云平台、数据库、物联网、开发运维、Java语言等都有。

https://dzone.com

5.5 simpleprogrammer

simpleprogrammer 简单的程序员，这个网站上纯技术文章不多，指导建议性的文章比较多。

讲述一些职场、以及软件开发中的一些“ 潜规则”。

https://simpleprogrammer.com/

5.6 SitePoint

通过 SitePoint 教程，课程和书籍学习 Web 设计和开发 HTML5，CSS3，JavaScript，PHP，移动应用。

这是一个偏向前端方向的网站，在这里包含了各种高质量的前端方面的文章，电子书。

https://www.sitepoint.com/web

5.7 YouTobe

YouTobe 这个网站可算是经典，和国内的哔哩哔哩一样，各类视频汇聚于此，当然各国编程大神也在这啦。

YouTube 是源自美国的视频分享网站，也是当前全球最大的视频搜索和分享平台，让用户上传、观看、分享及评论视频。

此网站没有官方的中文名字，较为广泛使用的俗称有油管、水管、你管等。

https://www.youtube.com/

最后

如果你访问不了国外网站，那就上网站 GitHub 上搜索一下，你会找到属于你的惊喜！！！猫哥只能帮助你到这里了。

好了，这篇文章是今年最后一篇推文了，没什么意外，年后才更文了。

当你看到这篇文章的时候，猫哥已经在回家的路上了。

如果不是为了肝这篇文章，猫哥已经早一天回去了呢。今年真的是整整年都没有回过家了，真的想家了，想家里的亲人了。

今年虽然好迷茫，事业没取得什么重大突破，更没找到女朋友，无颜面对江东父老，但是还是想回家 😬，回家治愈一下，重新找回力量与冲劲，我们 2021 重新出发！

关于猫哥，大家可以看看我另一个号的前端工程师的 2020 年终总结 - 乾坤未定，你我皆黑马，看看猫哥的脸都被打歪的 😂。

最后提前祝大家新年快乐，身体健康，我们来年再见。

不知不觉，已经写到第 18 期了呢，已经分享超过 200 个好的前端项目了呢，往期精文请看下方宝藏仓库，点击很危险，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

平时如何发现好的开源项目，可以看看这两篇文章：如何在 GitHub 上发现优秀开源项目和如何使用 GitHub 进行精准搜索的神仙技巧。

往期精文

微信搜 “前端GitHub”，回复 “电子书” 即可以获得 160 本前端精华书籍哦，加超级猫的 WX：CB834301747 ，一起闲聊前端。

被惊艳到了！适用 Win、Mac、Linux，酷炫的极客界面 eDEX-UI

大家新年好呀，我是你们的猫哥，那个不喜欢吃鱼、又不喜欢喵的超级猫又回来啦 ~

简介

最近在 GitHub 发现了一款比较火的开源软件 ——edex-ui，它深受 DEX-UI 和 TRON Legacy 电影效果的启发，是一个类似于科幻电脑界面的全屏桌面应用程序。

提供了可视化动态监测系统性能的图表、资源列表、触屏键盘等等，使其看起来非常高端大气上档次，另外还完美的支持终端操作，并且支持 Window、macOS、Linux 系统。

作为从小就喜欢黑科技的猫哥来说，已经按耐不住要装 X 啦！

这个项目是基于 electron 和 node 的，前端如果觉得有意思，也可以 clone 下来玩一下哦！

项目地址：

https://github.com/GitSquared/edex-ui

最后

初级前端与高级前端之间，很多时候并不是懂的知识点有多难的差别，很大原因就是投入学习前端的时间、经验的差别，其实就是信息差。

如果有一个地方能又快又好的获得这些优质的前端信息，那么将会大大缩短从初级到高级的时间。

前端GitHub 就是这样一个仓库，能帮助前端开发人员节省时间的仓库！

公众号：前端GitHub，专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

关于猫哥，大家可以看看我的年终总结前端工程师的 2020 年终总结 - 乾坤未定，你我皆黑马。

不知不觉，已经写到第 21 期了呢，往期精文请看下方宝藏仓库，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

往期精文

微信搜 “前端GitHub”，回复 “电子书” 即可以获得 160 本前端精华书籍哦，猫哥 WX：CB834301747 。

白嫖 11 个超火的前端必备在线工具，终于有时间上班摸鱼了

大家好，我是你们的猫哥，一个不喜欢吃鱼、又不喜欢喵的超级猫 ~

前言

猫哥是一个常年混迹在 GitHub 上的猫星人，所以发现了不少好的前端开源项目，在此分享给大家。

公众号：前端GitHub，专注于挖掘 GitHub 上优秀的前端开源项目，收集、整理、推荐业界高品质前端资源合集，优秀的工具、库、好的教程、了解业界更优秀的代码、工具、业界最新的技术，抹平你的前端信息不对称。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

以下为【前端GitHub】的第 9 期精华内容。

这几天简单整理了一下自己日常经常使用的工具网站，把好用的分享给小伙伴们！

所以今天给大家带来的是 10 个 GitHub 上超火的前端实用在线工具，终于有时间上班摸鱼了，嘻嘻~

喵~ 喵~ 喵~ 正文要开始了，上车坐稳扶好了~

1. LightHouse

LightHouse 是一个开源的自动化工具，用于改进网络应用的质量。

可以将其作为一个 Chrome 扩展程序运行，或从命令行运行。

当为 Lighthouse 提供一个要审查的网址，它将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告。

让开发人员根据生成的页面性能的报告，来进行网站优化和完善，提高用户体验。

可以参考失败的测试，看看可以采取哪些措施来改进应用。

在里面你可以看到它给你各个方面的建议，比如图片、css、js 这些文件的处理，还有 html 里面标签的使用，缓存处理等建议，可以根据这些来对网站进行优化。

https://github.com/GoogleChrome/lighthouse

2. Can I Use

这个是一个针对前端开发人员定制的一个查询 CSS、Js 在个中流行浏览器钟的特性和兼容性的网站，可以很好的保证网页的浏览器兼容性。

有了这个工具可以快速的了解到代码在各个浏览器钟的效果。

比如查询 transform 的浏览器支持情况：

再比如 proxy 的浏览器支持情况：

https://caniuse.com/

3. Carbon

Carbon 是一个在线的代码转图片工具。

相信小伙伴们见过很多人的博客上面都有类似这种代码图片吧?

Carbon 可以很容易的为你的代码创建漂亮的图片。

特性

GitHub gist 导入. 只需要在 url 后面加上 github gist id 就可以导入
定制化. 可定制图片的语法主题，窗口样式等
所见即分享. 点下鼠标就可以分享到推特上面

不过有个缺点就是国内网络访问时，复制图片很慢。

https://carbon.now.sh/

4. ios font

IOS 字体支持查询和 IOS 系统自带字体查询。

http://iosfonts.com/

5. web 安全色查询

web color 为了尽量让用户看到色彩相同的网页，请尽量使用 216 色的 web 安全色。

https://www.bootcss.com/p/websafecolors/

6. TinyPNG

PNG/JPG 图片在线压缩利器，智能 PNG 和 JPEG 图片压缩。

TinyPNG 使用智能有损压缩技术将您的 PNG 文件的文件大小降低。通过选择性的减少图片中的颜色，只需要很少的字节数就能保存数据。对视觉的影响几乎不可见，但是在文件大小上有非常大的差别。

https://tinypng.com/

7. 二维码生成器

草料二维码生成器，相信很多人都用过。

常用的工具也很多：

https://cli.im/

8. Shape Divider

定制各种形状的网站分区 SVG 的工具，调整好了自己想要的形状之后，可以一键复制和下载。

https://www.shapedivider.app/

9. json 格式化

这是一个 json 在线解析的网站，是我最常使用的一个网站。

功能包括了：json 在线解析，json 格式化，json 格式验证，json 转 xml，xml 转 json，json 压缩，json 转义，js 混淆加密，JSON 转实体，json 在线，JSON 校验。

http://json.cn/

10. sojson

这是一个功能多到发指的网站！

比如前端WEB工具就包含了以下的工具：

而且还有更多：

JSON 在线工具：JSON 在线解析、JSON 格式化、JSON 对比、JSON 压缩
加密/解密：在线加密/解密 | JS 加密 | JS 解密 | AES | DES | MD5 | Base64
压缩/格式化：在线压缩/格式化/美化 | JSON | JS | HTML | Java | SQL
开发文档：开发文档/API文档
前端 WEB 工具/前端工具
在线转换：在线转换 | 单位转换 | 数据转换 | 格式转换
二维码：二维码生成 | 二维码解析 | 动态二维码 | 二维码美化
正则表达式：正则表达式 | 正则表达式测试工具 | 正则表达式教程
站长工具：备案查询 | SEO 检测 | HTTPS 检测 | 微信防封检测 | DNS 检测 | Robots 生成
HTTP工具：HTTP 模拟请求 | HTTP 测试工具 | HTTP 协议 | GET/POST
房贷计算工具房贷计算器 | 最新房贷计算器 | 2020房贷利率
生活工具：时间 | 万年历 | 放假 | 老黄历 | 测网速 | 天气
修改图片：在线修改图片 | 图片尺寸修改 | 图片压缩 | 图片美化 | 图片批量处理 | 图片水印
JS 加密 / JS 解密：JS 解密 | JS 加密 | JS 美化 | JS 格式化 | JS 混淆

https://www.sojson.com/

11. 站长工具

站长工具是站长的必备工具。

经常上站长工具可以了解 SEO 数据变化。

还可以检测网站死链接、蜘蛛访问、HTML格式检测、网站速度测试、友情链接检查、网站域名IP查询。

SEO 相关类的有 WHOIS 查询，DNS 查询过期域名查询，NsLookup 查询，域名删除时间备案查询删除域名归档备案批量查询等，除此之外，还有 IP 类，百度相关，测速/监控，网页相关，网站优化人员必备。

https://tool.chinaz.com/

最后

最近加班有点严重，经常都是晚上 11 点多才下班，所以文章更新慢了很多。

因为文章都是在晚上肝出来的，一篇文章要肝几个晚上才行，肝到这里时，已经过了零晨了，唉。

同是打工猫，生活不易啊！

鲁迅在《狂人日记》里曾说过：“能打败我的，只有女人和酒精，而不是加班”

每当身处黑暗之时，这句话总能让我看到光。

最后就以一张很治愈的图片来治愈一下疲惫的心灵吧。

好了啦，【前端GitHub】的第 9 期内容已经讲完了啦。

下方仓库很危险，请慎入！

原文地址：https://github.com/FrontEndGitHub/FrontEndGitHub

平时如何发现好的开源项目，可以看看这两篇文章：如何在 GitHub 上发现优秀开源项目和如何使用 GitHub 进行精准搜索的神仙技巧。

平时如何发现好的开源项目，可以看看这篇文章：如何在 GitHub 上发现优秀开源项目和如何使用 GitHub 进行精准搜索的神仙技巧。

可以加超级猫的 wx：CB834301747 ，一起闲聊前端GitHub。

觉得有用？喜欢就收藏，顺便点个赞吧，你的支持是我最大的鼓励！

微信搜 “前端GitHub”，回复 “电子书” 即可以获得 160 本前端精华书籍哦。

往期精文

你最想对超级猫说点啥？

前端代码规范

代码千万行，安全第一行；前端不规范，同事两行泪。

腾讯

包含内容也挺多的：

PC端专题：快速上手、文件目录、页面头部、通用title、通用foot、统计代码、兼容测试

移动端专题：快速上手、文件目录、页面头部、REM布局、通用foot、统计代码、分享组件、兼容要求

双端官网：快速上手、页面跳转

http://tgideas.qq.com/doc/index.html

不过里面也有一些内容是针对其业务的，并不通用。

京东

对比腾讯的代码规范，我更推荐凹凸实验室的代码规范，比较齐全。

HTML规范

基于W3C、苹果开发者等官方文档，并结合团队日常业务需求以及团队在日常开发过程中总结提炼出的经验而约定。

图片规范

了解各种图片格式特性，根据特性制定图片规范，包括但不限于图片的质量约定、图片引入方式、图片合并处理等。

CSS 规范

统一团队 CSS 代码书写和 SASS 预编译语言的语法风格，提供常用媒体查询语句和浏览器私有属性引用，并从业务层面统一规范常用模块的引用。

命名规范

从 “目录命名”、“图片命名”、“ClassName” 命名等层面约定规范团队的命名习惯，增强团队代码的可读性。

JavaScript 规范

统一团队的 JS 语法风格和书写习惯，减少程序出错的概率，其中也包含了 ES6 的语法规范和最佳实践。

凹凸实验室：https://guide.aotu.io/index.html

airbnb

Airbnb Javascript Style Guide：https://github.com/airbnb/javascript

百度

JavaScript编码规范、HTML、CSS、Less、E-JSON 数据传输标准、模块和加载器、包结构、项目目录结构、图表库标准、react 编码规范。

比如：缩进

[强制] 使用 4 个空格做为一个缩进层级，不允许使用 2 个空格或 tab 字符。
[强制] switch 下的 case 和 default 必须增加一个缩进层级。

// good
switch (variable) {

    case '1':
        // do...
        break;

    case '2':
        // do...
        break;

    default:
        // do...

}

// bad
switch (variable) {

case '1':
    // do...
    break;

case '2':
    // do...
    break;

default:
    // do...

}

规范文档：https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md

网易编码规范：

CSS规范：一系列规则和方法，帮助你架构并管理好样式

HTML规范：一系列建议和方法，帮助你搭建简洁严谨的结构

工程师规范：前端页面开发工程师的工作流程和团队协作规范

但是并不止于此，还有更多：

http://nec.netease.com/standard

JavaScript Standard Style

除很多公司组织外，很多个人也在项目中使用的规范。

https://github.com/standard/standard

Vue

这里是官方的 Vue 特有代码的风格指南。

如果在工程中使用 Vue，为了回避错误、小纠结和反模式，该指南是份不错的参考。

不过我们也不确信风格指南的所有内容对于所有的团队或工程都是理想的。

所以根据过去的经验、周围的技术栈、个人价值观做出有意义的偏差是可取的。

官方风格指南： https://cn.vuejs.org/v2/style-guide/index.html

es6

如何将 ES6 的新语法，运用到编码实践之中，与传统的 JavaScript 语法结合在一起，写出合理的、易于阅读和维护的代码。

es6 编程风格：http://es6.ruanyifeng.com/#docs/style

Bootstrap

内容包含 HTML 和 CSS。

HTML

语法、HTML5 doctype、语言属性、IE 兼容模式、字符编码、引入 CSS 和 JavaScript 文件、实用为王、属性顺序、布尔型属性、减少标签的数量、JavaScript 生成的标签。

CSS

语法、声明顺序、不要使用 @import、媒体查询（Media query）的位置、带前缀的属性、单行规则声明、简写形式的属性声明、Less 和 Sass 中的嵌套、Less 和 Sass 中的操作符、注释、class 命名、选择器、代码组织。

Bootstrap 编码规范：https://codeguide.bootcss.com/

ESLint

目前绝大多数前端项目都会用到的可组装的 JavaScrip t和 JSX 检查工具。

发现问题

ESLint 静态分析您的代码以快速发现问题。ESLint 内置于大多数文本编辑器中，您可以将ESLint 作为持续集成管道的一部分运行。

自动修复

ESLint 发现的许多问题都可以自动修复。ESLint 修复程序可识别语法，因此您不会遇到传统的查找和替换算法引入的错误。

定制

预处理代码，使用自定义解析器，并编写与 ESLint 内置规则一起使用的自己的规则。您可以自定义 ESLint，使其完全按照项目所需的方式工作。

ESLint: https://eslint.org/

ESLint 中文网：https://eslint.bootcss.com/

Prettier

Prettier 是一个“有主见”的代码格式化工具。

简而言之，这个工具能够使输出代码保持风格一致。

也是目前绝大多数前端项目都会用到的哦。

Prettier：https://prettier.io/

最后

好了，【前端GitHub】的第 5 期内容已经讲完了，更多精彩请看下方仓库地址：

原文地址：https://github.com/FrontEndGitHub/FrontEndGitHub

觉得有用？喜欢就收藏，顺便点个赞吧，你的支持是我最大的鼓励！

往期精文

GitHub 2W 星：一键生成前后端代码

大家好，我是你们的猫哥，那个不喜欢吃鱼、又不喜欢喵的超级猫 ~

前言

开发在敲代码时哪几个键用的最多？

我相信绝大多数肯定是 Ctrl + C 和 Ctrl + V 吧。

新手在开发中会写大量的重复代码，为了提高开发效率，避免把大量的时间浪费在重复工作上，涌现了很多逆向工程技术。

这种逆向工程技术就是：方便好用的代码生成器，这种方式可极大地减少代码的编写，增加开发效率。

猫哥在工作的第一年，公司项目里面也有一个前后端代码生成器，不仅仅生成数据层的相关代码，控制层、服务层和前端代码都能生成。

当时我使用模板技术完成的，但是仅仅实现了简单的增删改查功能。

jeecg-boot

GitHub 上有一个非常强大的代码生成的开源项目，现在已经接近 2W 的 Star 了。

该项目可一键生成前后端代码，实现低代码开发，帮助解决 Java 项目 70% 的重复工作，让开发者更多关注业务。

既能快速提高效率，节省研发成本，同时又不失灵活性。

并且采用最新主流前后分离框架，后端用的是 Spring Boot + MyBatis，前端用的是 Vue 全家桶 + ant-design-vue 。

功能也非常丰富，除了简单的增删改查，还支持微服务。报表、表单、图标、Excel、在线打印、权限管理等等功能。

下面是系统的截图，支持移动端、Pad 端、PC端。

功能模块

功能也比较齐全。

├─系统管理
│  ├─用户管理
│  ├─角色管理
│  ├─菜单管理
│  ├─权限设置（支持按钮权限、数据权限）
│  ├─表单权限（控制字段禁用、隐藏）
│  ├─部门管理
│  ├─我的部门（二级管理员）
│  └─字典管理
│  └─分类字典
│  └─系统公告
│  └─职务管理
│  └─通讯录
│  └─多租户管理
├─消息中心
│  ├─消息管理
│  ├─模板管理
├─代码生成器(低代码)
│  ├─代码生成器功能（一键生成前后端代码，生成后无需修改直接用，绝对是后端开发福音）
│  ├─代码生成器模板（提供4套模板，分别支持单表和一对多模型，不同风格选择）
│  ├─代码生成器模板（生成代码，自带excel导入导出）
│  ├─查询过滤器（查询逻辑无需编码，系统根据页面配置自动生成）
│  ├─高级查询器（弹窗自动组合查询条件）
│  ├─Excel导入导出工具集成（支持单表，一对多 导入导出）
│  ├─平台移动自适应支持
├─系统监控
│  ├─Gateway路由网关
│  ├─性能扫描监控
│  │  ├─监控 Redis
│  │  ├─Tomcat
│  │  ├─jvm
│  │  ├─服务器信息
│  │  ├─请求追踪
│  │  ├─磁盘监控
│  ├─定时任务
│  ├─系统日志
│  ├─消息中心（支持短信、邮件、微信推送等等）
│  ├─数据日志（记录数据快照，可对比快照，查看数据变更情况）
│  ├─系统通知
│  ├─SQL监控
│  ├─swagger-ui(在线接口文档)
│─报表示例
│  ├─曲线图
│  └─饼状图
│  └─柱状图
│  └─折线图
│  └─面积图
│  └─雷达图
│  └─仪表图
│  └─进度条
│  └─排名列表
│  └─等等
│─大屏模板
│  ├─作战指挥中心大屏
│  └─物流服务中心大屏
│─常用示例
│  ├─自定义组件
│  ├─对象存储(对接阿里云)
│  ├─JVXETable示例（各种复杂ERP布局示例）
│  ├─单表模型例子
│  └─一对多模型例子
│  └─打印例子
│  └─一对多TAB例子
│  └─内嵌table例子
│  └─常用选择组件
│  └─异步树table
│  └─接口模拟测试
│  └─表格合计示例
│  └─异步树列表示例
│  └─一对多JEditable
│  └─JEditable组件示例
│  └─图片拖拽排序
│  └─图片翻页
│  └─图片预览
│  └─PDF预览
│  └─分屏功能
│─封装通用组件	
│  ├─行编辑表格JEditableTable
│  └─省略显示组件
│  └─时间控件
│  └─高级查询
│  └─用户选择组件
│  └─报表组件封装
│  └─字典组件
│  └─下拉多选组件
│  └─选人组件
│  └─选部门组件
│  └─通过部门选人组件
│  └─封装曲线、柱状图、饼状图、折线图等等报表的组件（经过封装，使用简单）
│  └─在线code编辑器
│  └─上传文件组件
│  └─验证码组件
│  └─树列表组件
│  └─表单禁用组件
│  └─等等
│─更多页面模板
│  ├─各种高级表单
│  ├─各种列表效果
│  └─结果页面
│  └─异常页面
│  └─个人页面
├─高级功能
│  ├─系统编码规则
│  ├─提供单点登录CAS集成方案
│  ├─提供APP发布方案
│  ├─集成Websocket消息通知机制
├─Online在线开发(低代码)
│  ├─Online在线表单 - 功能已开放
│  ├─Online代码生成器 - 功能已开放
│  ├─Online在线报表 - 功能已开放
│  ├─Online在线图表(暂不开源)
│  ├─Online图表模板配置(暂不开源)
│  ├─Online布局设计(暂不开源)
│  ├─多数据源管理 - 功能已开放
├─积木报表设计器(低代码)
│  ├─打印设计器
│  ├─数据报表设计
│  ├─图形报表设计（支持echart）
│  ├─大屏设计器(暂不开源)
│─流程模块功能 (暂不开源)
│  ├─流程设计器
│  ├─在线表单设计
│  └─我的任务
│  └─历史流程
│  └─历史流程
│  └─流程实例管理
│  └─流程监听管理
│  └─流程表达式
│  └─我发起的流程
│  └─我的抄送
│  └─流程委派、抄送、跳转
│  └─。。。
└─其他模块
   └─更多功能开发中。。

项目地址：

https://github.com/zhangdaiscott/jeecg-boot

最后

初级前端与高级前端之间，很多时候并不是懂的知识点有多难的差别，很大原因就是投入学习前端的时间、经验的差别，其实就是信息差。

如果有一个地方能又快又好的获得这些优质的前端信息，那么将会大大缩短从初级到高级的时间。

前端GitHub 就是这样一个仓库，能帮助前端开发人员节省时间的仓库！

公众号：前端GitHub，专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

关于猫哥，大家可以看看我的年终总结前端工程师的 2020 年终总结 - 乾坤未定，你我皆黑马。

不知不觉，已经写到第 24 期了呢，往期精文请看下方宝藏仓库，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

往期精文

微信搜 “前端GitHub”，回复 “电子书” 即可以获得 160 本前端精华书籍哦，猫哥 WX：CB834301747 。

前言

猫哥是一个常年混迹在 GitHub 上的猫星人，所以发现了不少好的前端开源项目、常用技巧，在此分享给大家。

公众号：前端GitHub，专注于挖掘 GitHub 上优秀的前端开源项目，并以专题的形式推荐，每专题大概 10 个好项目，每周会有一到三篇精华文章推送，与时俱进版前端资源教程。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

以下为【前端GitHub】的第 14 期精华内容。

今天给大家推荐的是平时学习前端时，经常用到的一些辅助工具类网站。

网址	描述
unbug.github.io/codelf	变量命名智能推荐（支持中文）
www.docschina.org	Web 前端开发人员提供优质中文文档
regexr.com	正则表达式验证匹配
any-rule	正则表达式库，非常全，使用起来很方便
www.toptal.com/developers	多张图片合成雪碧图，并生成对应 css
tool.lu	众多工具集合，包括时间戳转换，进制转换等
www.bootcdn.cn 或 cdn.baomitu.com	国内的CDN库，速度快
www.jsdelivr.com	国外的 cdn 库，支持 github，npm，WordPress
www.gitignore.io	根据选择会去生成 .gitignore 文件
codesandbox.io	在线编辑代码
www.typora.io	实用的 Markdown 写作工具，所见即所得
mdnice.com	使 markdown 语法更加美观，如果你有写博客，那这个非常合适你

1. codelf

有一种痛，不是程序员可能不懂，但如果是程序员一定懂，那就是给变量或函数命名。

随着项目越来越复杂，变量和函数数量越来越多，英语水平貌似也 hold 不住了。

虽然每个编程语言都有各种命名规范，但是也不能解决所有的问题。

每个程序员或多或少都在写代码的时候为变量和函数命名苦恼过！

也可以在自己用的编辑器里安装插件，支持 VS Code、Atom、Sublime Text 和 Chrome。

超级猫就是用 VS Code，也有装这个插件呢。

https://unbug.github.io/codelf/

2. docschina

印象中文，为 Web 前端开发人员提供优质中文文档。

https://www.docschina.org

3. regexr

RegExr 是一个基于 HTML/JS 开发的在线工具，用来创建、测试和学习正则表达式。

特性

输入时，结果会实时更新
支持 JavaScript 和 PHP/PCRE RegEx
将匹配项或表达式移至详细信息
保存并与他人共享表达式
在编辑器中使用 cmd-Z/Y 撤消和重做

https://regexr.com/

4. any-rule

any-rule 正则表达式

any-rule 维护了一个常用正则表达式合集，并且本身是一个支持 Web/VS Code/idea/Alfred Workflow 多平台的正则表达式工具。

https://github.com/any86/any-rule

5. CSS Sprites Generato

在很多前端展示页面需要用到将小图标拼合为一整个图片，然后在使用的时候，自动裁剪为单一图片展示。

这个时候就需要一个便捷的工具，CSS Sprites Generator 就是这样一个便捷的CSS图像拼合工具。

比如多张图片生成雪碧图，还有国内的 CDN 库，赶紧去试一试吧。

https://www.toptal.com/developers/css/sprite-generator

6. tool.lu

众多工具集合，包括时间戳转换，进制转换等

https://tool.lu/

7. bootcdn / baomitu

国内的CDN库，速度快

https://www.bootcdn.cn/ 或 https://cdn.baomitu.com/

8. jsdelivr

国外的 cdn 库，支持 github，npm，WordPress。

https://www.jsdelivr.com

9. gitignore

根据选择会去生成 .gitignore 文件。

根据用户输入的语言类型或者平台类型，自动生成对应的 gitignore 文件。

例如，输入 Vue，React，点击 "Create" 即可。

https://www.gitignore.io/

10. codesandbox

CodeSandbox 是一个在线的代码编辑器，主要聚焦于创建 Web 应用项目。

支持主流的前端相关文件的编辑：JavaScript、TypeScript、CSS、Less、Sass、Scss、HTML、PNG 等。

支持自动代码提示。

比如选择创建相关的项目

可以直接编辑代码运行

https://codesandbox.io/

11. typora

实用的 Markdown 写作工具，所见即所得。

https://www.typora.io

12. mdnice

MDNice 微信 Markdown 编辑器是一款 Markdown 微信编辑器,拥有良好的兼容性、海量主题样式、免费的图床、强大的技术团队,提供文章一键排版,同时支持知乎、掘金、微信。

使 markdown 语法更加美观，如果你有写博客，那这个非常合适你。

这个工具是大鹏大佬开发的，超级猫一直有用这个工具，那个工具仓库 Star 还不到 200 的时候就给它点赞了，因为实在是好用，觉得肯定会火，现在的确是火了，几乎经常写博客的人都知道和用它。

超级猫还贡献了 2 种主题呢，里面的绿意、科技蓝的主题就是笔者贡献的，哈哈。

https://github.com/mdnice/markdown-nice

最后

不知不觉，已经写到第 14 期了呢，已经分享超过 100 个好的前端项目了呢，往期精文请看下方宝藏仓库，点击很危险，请慎入！

[前端GitHub]：https://github.com/FrontEndGitHub/FrontEndGitHub

平时如何发现好的开源项目，可以看看这篇文章：如何在 GitHub 上发现优秀开源项目和如何使用 GitHub 进行精准搜索的神仙技巧。

觉得有用？喜欢就收藏，顺便点个赞吧，你的支持是超级猫最大的鼓励！

可以加超级猫的 wx：CB834301747 ，一起闲聊前端。

微信搜 “前端GitHub”，回复 “电子书” 即可以获得 160 本前端精华书籍哦。

往期精文

你最想对超级猫说点啥？

1. 为什么要学习源码 ?

阅读优秀的代码的目的是让我们能够写出优秀的代码。
不给自己设限，不要让你周围人的技术上限成为你的上限。
其实就跟我们写作文一样，你看的高分作文越多，写出高分作文的概率就越大。

基于现在的程序员工作模式(模块化开发，只需要拿到需求做自己的部分)，别说看源码，甚至就连项目里的代码都懒的去看，我认识的很多程序员就是这样的，一个项目摸了两三年，你要问他项目中 webpack 都干了哪些事情，他的回答是不知道，反而趾高气扬的告诉你，那些他从来都用不上，看了也没什么用，也看不懂，这里省略内心千字脏文。

阅读主要目的是为了帮助我们积累素材，不要书到用时方恨少，看到美女我们应该能有一万种词语去形容，如气若幽兰，美艳不可方物，一笑倾城，再笑倾国，世间尤物，而不是简短的几个字，我艹，美女!

功利性的阅读源码

功利性即指有目的性的，明确知道自己干完某一件事后能得到什么样的回报，所以首先你要知道你想得到什么？

看每一本书都有明确的目的，想学会理财，就得看理财相关的书，想学点技术，就得看点技术相关的书

看源码也是一样，你对 Vue.use 之后发生了什么比较好奇，或者是你觉得现在面试都需要会看点源码，这都很好，至少你有明确的诉求

凡事只要有了功利属性，才更容易走的下去，否则就是真香警告。

2. Vue2

Vue 虽然出到 Vue3 了，也出了不少 Vue3 的源码教程，但是 Vue2 还是很棒的框架，它的源码还是值得细读的，所以先推荐几个 Vue2 的源码项目。

2.1 vue-analysis

👍 Vue.js 源码分析

目前社区有很多 Vue.js 的源码解析文章，但是质量层次不齐，不够系统和全面，这本电子书的目标是全方位细致深度解析 Vue.js 的实现原理，让同学们可以彻底掌握 Vue.js。目前分析的版本是 Vue.js 的最新版本 Vue.js 2.5.17-beta.0，并且之后会随着版本升级而做相应的更新，充分发挥电子书的优势。

这本电子书是作为《Vue.js 源码揭秘》视频课程的辅助教材。电子书是开源的，同学们可以免费阅读，视频是收费的，25+小时纯干货课程，如果有需要的同学可以购买来学习，但请务必支持正版，请尊重作者的劳动成果。

https://github.com/ustbhuangyi/vue-analysis

2.2 vue-design

超级详细 - 逐行级别的分析

所谓逐行并非一行接着一行，逐行指的是讲解的详细程度，这套文章将致力于覆盖所有核心代码，毕竟每一句代码都有他存在的意思，假如我们不讲明白任何一句代码的意义，那又怎么敢说是源码分析呢？

深度分析 - 讲解 issue

我们知道 Vue 这个项目自诞生以来一直都在不断的更新完善，比如添加新的特性，修复已知bug等等。而在这个过程中源码也将越来越完善，这也意味着代码曾经并不完善，本套文章在分析源码时除了告诉你这段代码为什么这么写之外，还会根据相关 issue 分析这段代码之前是怎么写的以及存在的问题。

http://hcysun.me/vue-design/zh/

2.3 vue-family-mindmap

用一张思维导图总结了 Vue | Vue-Router | Vuex 源码与架构要点。

以上内容是笔者最近学习 Vue 源码时的收获与所做的笔记，本文内容大多是开源项目 Vue.js 技术揭秘 的内容，只不过是以思维导图的形式来展现，内容有省略，还加入了笔者的一点理解。

笔者之所以采用思维导图的形式来记录所学内容，是因为思维导图更能反映知识体系与结构，更能使人形成完整的知识架构，知识一旦形成一个体系，就会容易理解和不易忘记。

注意：文章的图片可能上传时会经过压缩，可能有点模糊，不过本文用到的所有 超清图片 都已经放在 github 上，而且还有 pdf 格式、markdown 语法、思维导图的原文件，自己可以根据 思维导图原文件 导出相应的超清图片。

https://github.com/biaochenxuying/vue-family-mindmap

2.4 learnVue

Vue.js 源码分析，记录了个人学习 Vue.js 源码的过程中的一些心得以及收获。以及对于 Vue 框架，周边库的一些个人见解。

在学习的过程中我为Vue.js（2.3.0）、Vuex（2.4.0）、Vue-router（3.0.1）加上了注释，分别在文件夹 vue-src、vuex-src 以及 vue-router-src 中，希望可以帮助有需要的同学更好地学习理解 Vue.js 及周边库的源码。

https://github.com/answershuto/learnVue

2.5 vue

Vue 源码逐行注释分析 +40 多 M 的 Vue 源码程序流程图思维导图（diff 部分待后续更新）

Vue 源码业余时间差不多看了一年，以前在网上找帖子，发现很多帖子很零散，都是一部分一部分说，断章的很多，所以自己下定决定一行行看，经过自己坚持与努力，现在基本看完了。

这个 Vue 源码逐行分析，我基本每一行都打上注释，加上整个框架的流程思维导图，基本上是小白也能看懂的 Vue 源码了。

https://github.com/qq281113270/vue

2.6 vue2.0-source

Vue 源码分析 -- 基于 2.2.6 版本

该源码分析，会带着大家一起学习 Vue 的大部分代码，而不是简单的讲一下它的原理，我会尽可能的多解释每一行主要的代码含义，另外一些辅助方法什么的，大家可以在学习的过程中，自己看一眼就知道了。

https://github.com/liutao/vue2.0-source

3. Vue3

3.1 中文学习网址

先给大家提供 2 个 Vue3 的中文学习网址。

Vue3 中文文档，国内 CDN 加速版

https://vue3js.cn/docs/zh/

Vue3 相关项目聚合网站

https://vue3js.cn/

3.2 Vue3 源码

https://vue3js.cn/start/

最后

更多关于 Vue3 的优质项目，请看往期精文： Vue3 的学习教程汇总、源码解释项目、支持的 UI 组件库、优质实战项目

公众号：前端GitHub，专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

关于猫哥，大家可以看看我的年终总结前端工程师的 2020 年终总结 - 乾坤未定，你我皆黑马。

不知不觉，已经写到第 31 期了呢，往期精文请看下方宝藏仓库，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

往期精文

微信搜 “前端GitHub”，回复 “电子书” 即可以获得 160 本前端精华书籍哦，猫哥 WX：CB834301747 。

原创不易，请给点鼓励。

猛增 110K Star！年增长数最多的 10 大顶级前端学习资源项目！

大家好，我是你们的猫哥，那个不喜欢吃鱼、又不喜欢喵的超级猫 ~

关于猫哥，大家可以看看我的年终总结前端工程师的 2020 年终总结 - 乾坤未定，你我皆黑马。

今天给大家推荐 2020 年增长数最多的 10 大顶级前端学习资源项目！

看完这 10 大顶级项目，你会发现原来 GitHub 上也有这么多的 JavaScript 学习资源！

1. javascript-algorithms

2020 年增长 31.9K

该仓库包含了多种基于 JavaScript 的算法与数据结构。

每种算法和数据结构都有自己的 README，包含相关说明和链接，以便进一步阅读 (还有 YouTube 视频) 。

算法包含了算法主题和算法范式。

其中算法主题又包含了：数学、集合、字符串、搜索、排序、链表、树、图、加密、机器学习。

算法范式：算法范式是一种通用方法，基于一类算法的设计。这是比算法更高的抽象，就像算法是比计算机程序更高的抽象。

算法范式包含了：BF 算法、贪心法、分治法、动态编程、回溯法、Branch & Bound 等等。

这项目还出了对应的教学视频，总共 81 个视频讲解，每个视频大概 5 - 10分钟左右，还能学习英语哦 😉

youtube 的教学视频：https://www.youtube.com/playlist?list=PLLXdhg_r2hKA7DPDsunoDZ-Z769jWn4R8

猫哥之前学习算法的时候，也在这个项目中收益良多呢！

而且这个项目还一直有维护和更新内容哦！真的非常不错的一个项目！

https://github.com/trekhleb/javascript-algorithms

2. nodebestpractices

2020 年增长 20.2K

Node.js 最佳实践。

这个项目是对 Node.js 最佳实践中排名最高的内容的总结和分享。

这里是最大的汇集，且每周都在增长 - 当前，超过 50 个最佳实现，样式指南，架构建议已经呈现。

项目结构实践 (5)
异常处理实践 (11)
编码规范实践 (12)
测试和总体质量实践 (8)
进入生产实践 (16)
新: 安全实践(23)
Performance Practices (coming soon)

比如错误处理最佳实践中使用 Async-Await 和 promises 用于异步错误处理

TL;DR: 使用回调的方式处理异步错误可能是导致灾难的最快的方式(a.k.a the pyramid of doom)。对您的代码来说，最好的礼物就是使用规范的 promise 库或 async-await 来替代，这会使其像 try-catch 一样更加简洁，具有熟悉的代码结构。

否则: Node.js 回调特性, function(err, response), 是导致不可维护代码的一个必然的方式。究其原因，是由于混合了随意的错误处理代码，臃肿的内嵌，蹩脚的代码模式。

https://github.com/goldbergyoni/nodebestpractices

3. You-Dont-Know-JS

2020 年增长 18K

该项目为 YDNJS(You Don’t Know JS) 图书系列，包含一系列深入探讨 JavaScript 语言核心机制的书籍。

内容大纲

入门与进阶
作用域与闭包
this 与对象原型
类型与文法
异步与性能
ES6 与未来

https://github.com/getify/You-Dont-Know-JS

4. clean-code-javascript

2020 年增长 15.1K

优秀的 JS 代码规范。

比如：对相同类型的变量使用相同的关键字

Bad：

getUserInfo(); 
getClientData(); 
getCustomerRecord();

Good：

getUser();

再比如：使用可搜索的命名

在开发过程中，我们阅读代码的时间会远远超过编写代码的时间，因此保证代码的可读性与可搜索会非常重要。

切记，没事不要坑自己。

Bad:

//525600到底啥意思？
for (var i = 0; i < 525600; i++) {
  runCronJob();
}

Good:

// 声明为全局变量
var MINUTES_IN_A_YEAR = 525600;
for (var i = 0; i < MINUTES_IN_A_YEAR; i++) {
  runCronJob();
}

https://github.com/ryanmcdermott/clean-code-javascript

5. 30-seconds-of-code

2020 年增长 13.3K

该项目讲的是满足你所有开发需求的简短代码段，里面都是些经常会用到而且是非常经典的代码，非常值得学习！

比如 JavaScript 模块就分为了 All、Array、Browser、Date、Function、Math、Node、Object、String 方便学习的。

比如：你必须知道的 4 种 JavaScript 数组方法

Array.prototype.map()

const arr = [1, 2, 3];
const double = x => x * 2;
arr.map(double); // [2, 4, 6]

Array.prototype.filter()

const arr = [1, 2, 3];
const isOdd = x => x % 2 === 1;
arr.filter(isOdd); // [1, 3]

Array.prototype.reduce()

const arr = [1, 2, 3];

const sum = (x, y) => x + y;
arr.reduce(sum, 0); // 6

const increment = (x, y) => [...x, x[x.length - 1] + y];
arr.reduce(increment, [0]); // [0, 1, 3, 6]

Array.prototype.find()

const arr = [1, 2, 3];
const isOdd = x => x % 2 === 1;
arr.find(isOdd); // 1

又比如：如何在 JavaScript 中实现睡眠功能？

同步版本

const sleepSync = (ms) => {
  const end = new Date().getTime() + ms;
  while (new Date().getTime() < end) { /* do nothing */ }
}

const printNums = () => {
  console.log(1);
  sleepSync(500);
  console.log(2);
  console.log(3);
};

printNums(); // Logs: 1, 2, 3 (2 and 3 log after 500ms)

异步版本

const sleep = (ms) =>
  new Promise(resolve => setTimeout(resolve, ms));

const printNums = async() => {
  console.log(1);
  await sleep(500);
  console.log(2);
  console.log(3);
};

printNums(); // Logs: 1, 2, 3 (2 and 3 log after 500ms)

其实上面讲到的事例里面还提供 api 和方法的讲解的，方便读者能看懂的，这里就不写出来了。

还想学更多的经典 js 代码片段，请看下面的仓库

https://github.com/30-seconds/30-seconds-of-code

6. javascript

2020 年增长 11.8K

这个项目是 JavaScript 编程风格指南。

https://github.com/airbnb/javascript

7. tech-interview-handbook

2020 年增长 10.6K

技术人员求职面试，单刷leetcode上的大厂题库可能还不够。

简历怎么写才能吸引HR的眼光，可能会被技术老大问到哪些常见问题，拿到Offer之后怎样才能让自己的优势最大化然后优中选优？

面对这些赤果果的问题，目前就职于Facebook的新加坡小哥Yangshun Tay就整理了一份干货。

面试全流程需要注意的事项都在里面了，包含从简历准备、面经和谈判全过程，教你如何避雷不踩坑。

精心策划的内容可帮助您获得下一次技术面试的机会，重点是算法。

除了常见的算法问题外，其他出色的功能还包括：

如何准备编码面试
面试备忘单-直截了当的注意事项
按主题分类的算法技巧和最佳实践问题
“前端面试问题”答案
顶尖科技公司的面试形式
顶尖科技公司提出的行为问题
在面试结束时问您的面试官的好问题
有用的简历提示，以使您的简历受到关注以及注意事项

https://github.com/yangshun/tech-interview-handbook

8. freeCodeCamp

2020 年增长 10.4K

FreeCodeCamp 是一个自由开源的学习编程的社区，致力于帮助人们利用零散时间学习编程。

它的使命是 Learn to code and help nonprofits（学习编程，去帮助那些非盈利组织）。

FCC 涵盖 HTML5、CSS、React、JavaScript、Database 等课程，游戏化程度非常高，学员可以通过线上聊天室和线下社区活动（Coffee and Code）相互帮助。

目前覆盖全球 160+ 个国家、1000+ 个城市，40W+ 开发者在平台学习。

https://github.com/freeCodeCamp/freeCodeCamp

9. Front-End-Checklist

2020 年增长 9.2K

该项目是详尽的关于前端开发的清单，它列出了将 HTML 页面投入生产之前需要进行测试的所有元素。

它基于众多前端开发人员的多年经验，其中一部分整合自其他的开源清单。

内容包含：

Head
HTML
Webfonts
CSS
Images
JavaScript
Security
Performance
Accessibility
SEO

https://github.com/thedaviddias/Front-End-Checklist

10. vanillawebprojects

2020 年增长 8.2K

新手上路最开始用的就是基础的 HTML+CSS+JS 三件套，而在框架和库越来越多的现在，更多的时候使用它们来提高效率是常见的选择。

这个项目则是反过来，是使用老三件套实现的一些小项目合集，不管是为了更好理解框架，还是为了验证一下自己的知识水平，重新操刀老三件套都不失为一个好选择，要知道不管是什么框架和库，基础都是由这三板斧搭建起来的。

https://github.com/bradtraversy/vanillawebprojects

最后

不知不觉，原创文章已经写到第 33 期了呢，几乎每一篇都是猫哥精心挑选的优质开源项目，推送的每一篇文章里面的项目几乎都是对前端开发很有帮助的。

原创不易，一篇优质的文章都是要肝几个晚上才能肝出来的，花费很多时间、精力去筛选和写推荐理由，大佬们看完文章后顺手点个赞或者转发吧，给猫哥一点鼓励吧。

往期精文请看下方宝藏仓库，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

公众号：前端GitHub，专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称，致力于打造最优质的前端开源项目资源库。

微信搜 “前端GitHub”，回复 “电子书” 即可以获得上面 160 本前端精华书籍哦，猫哥 WX：CB834301747 。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

往期精文

原创不易，点个赞吧

GitHub上最火的、最值得前端学习的数据结构与算法项目！

Hello，大家好，我是你们的前端章鱼猫。

简介

前端章鱼猫从 2016 年加入 GitHub，到现在的 2020 年，快整整 5 个年头了。

相信很多人都没有逛 GitHub 的习惯，因此总会有开源信息的不对称，有哪些优秀的前端开源项目值得学习的也不知道。

从 2018 年开始，我就养成了每天逛 GitHub 的习惯，一般在早上上班前或者中午午休的时候都会逛一下。

看看每天都开源了哪些好的前端项目，还有用到的主流前端技术栈又是哪些，值得我去学习的。

因此也收藏了不少好的开源项目，在此推荐给大家，每周会有一到三篇的文章推送。

希望你在浏览、学习了前端章鱼猫推荐的这些开源项目的过程中，你能学习到更多编程知识、提高编程技巧、找到编程的乐趣。

【前端GitHub】，专注于挖掘 GitHub 上优秀的前端开源项目，抹平你的前端信息不对称，涵盖 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS、数据结构与算法等等。

以下为【前端GitHub】的第二期内容。

前言

算法为王。

想学好前端，先练好内功，内功不行，就算招式练的再花哨，终究成不了高手；只有内功深厚者，前端之路才会走得更远。

本文推荐几个 GitHub 上值得前端学习的数据结构与算法项目，包含 gif 图的演示过程与视频讲解。

数据结构与算法

关于数据结构与算法的 GitHub 项目，star 数由高到低排序。

javascript-algorithms

https://github.com/trekhleb/javascript-algorithms

该仓库包含了多种基于 JavaScript 的算法与数据结构。

每种算法和数据结构都有自己的 README，包含相关说明和链接，以便进一步阅读 (还有 YouTube 视频) 。

算法包含了算法主题和算法范式。

其中算法主题又包含了：数学、集合、字符串、搜索、排序、链表、树、图、加密、机器学习。

算法范式：算法范式是一种通用方法，基于一类算法的设计。这是比算法更高的抽象，就像算法是比计算机程序更高的抽象。

算法范式包含了：BF 算法、贪心法、分治法、动态编程、回溯法、Branch & Bound 等等。

这项目还出了对应的教学视频，总共 81 个视频讲解，每个视频大概 5 - 10分钟左右，还能学习英语哦 😉

youtube 的教学视频：https://www.youtube.com/playlist?list=PLLXdhg_r2hKA7DPDsunoDZ-Z769jWn4R8

前端章鱼猫之前学习算法的时候，也在这个项目中收益良多呢！

而且这个项目还一直有维护和更新内容哦！真的非常不错的一个项目！

algorithm-visualizer

https://github.com/algorithm-visualizer/algorithm-visualizer

算法可视化工具是一个交互式的在线平台，可以从代码中可视化算法。

通过可视化方法学习算法变得容易得多。

Algorithm Visualizer 是一款有趣的在线开源工具，内含多种算法并进行了直观可视化呈现, 让学习算法和数据结构更加直观。

目前支持的算法包括回溯法、加密算法、动态规划、图搜索、贪婪算法、搜索算法、排序算法等。

Algorithm Visualizer 的目录区，选择任何算法，中间就会动态演示，日志输出区记录每次搜索的过程。

该算法可视化工具是一个用 React 编写的 web 应用程序。它包含 UI 组件并将命令解释为可视化。

如果你是算法初学者，强烈推荐这个「算法可视化」工具 Algorithm Visualizer，很清晰地绘制了每一个基础算法的原理和运作流程。

algo

algo: https://github.com/wangzheng0822/algo

数据结构和算法必知必会的 50 个代码实现。

包含数组、链表、栈、队列、递归、排序、二分查找、散列表、字符串、二叉树、堆、图、回溯、分治、动态规划等。

每个代码实现有解释，测试用例。

// 选择排序
const selectionSort = (arr) => {
    if (arr.length <= 1) return
    // 需要注意这里的边界, 因为需要在内层进行 i+1后的循环，所以外层需要 数组长度-1
    for (let i = 0; i < arr.length - 1; i++) {
        let minIndex = i
        for (let j = i + 1; j < arr.length; j++) {
            if (arr[j] < arr[minIndex]) {
                minIndex = j // 找到整个数组的最小值
            }
        }
        const temp = arr[i]
        arr[i] = arr[minIndex]
        arr[minIndex] = temp
    }
    console.log(arr)
}

const test = [4, 5, 6, 3, 2, 1]
bubbleSort(test)
const testSort = [4, 1, 6, 3, 2, 1]
insertionSort(testSort)
const testSelect = [4, 8, 6, 3, 2, 1, 0, 12]
selectionSort(testSelect)

该仓库是《数据结构和算法之美》《设计模式之美》专栏作者创建的，前端章鱼猫也学习过他的《数据结构和算法之美》，非常不错的学习教程。

awesome-algorithms

https://github.com/mgechev/javascript-algorithms

此存储库包含不同著名计算机科学算法的 javascript 实现。

该仓库是不错的，不方便学习的地方就是需要安装依赖并运行才能看到效果及文档。

Call:

npm install

To setup repository with documentation

npm run doc

This will build the documentation and open it in your browser.

JS-Sorting-Algorithm

https://github.com/hustcc/JS-Sorting-Algorithm

一本关于排序算法的 GitBook 在线书籍《十大经典排序算法》，使用 JavaScript & Python & Go & Java 实现。

包含冒泡排序、选择排序、插入排序、希尔排序、归并排序、快速排序、堆排序、计数排序、桶排序、基数排序。

该仓库的文章有定义有解释、有代码实现、还有动态图，入门十大经典排序算法是个不错的教程。

JavaScript 数据结构与算法之美

https://github.com/biaochenxuying/blog#-javascript-%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95%E4%B9%8B%E7%BE%8E

包含了十大经典排序算法的**、代码实现、一些例子、复杂度分析、动画、还有算法可视化工具。

这是比较精简的 JavaScript 数据结构与算法的讲解。

该仓库总共写了 10 篇算法入门的文章

时间和空间复杂度
线性表（数组、队列、栈、链表）
实现一个前端路由，如何实现浏览器的前进与后退？
栈内存与堆内存、浅拷贝与深拷贝
递归
非线性表（树、堆）
冒泡排序、选择排序、插入排序
归并排序、快速排序、希尔排序、堆排序
计数排序、桶排序、基数排序
十大经典排序算法汇总
GitHub 上 170K+ Star 的前端学习的数据结构与算法项目

也是非常不错的数据结构与算法的入门学习资料。

daily-algorithms

https://github.com/barretlee/daily-algorithms

算法，每日练习的一个项目。

★ 表示 easy，★★ 表示 medium，★★★ 表示 hard；
题目主要来自 leetcode，可能会适当变换题设，改变难度；
对于 ★ 和 ★★ 难度的题目，每天的量会随机出现 1~5 个，尤其是 ★ 的题目，比较简单。

白天出题，尽量晚上给出参考答案。

项目也不错，是以参与讨论的形式与大家一起学习数据结构与算法的。

就是内容积累还不够多，还不够火。

JavaScript 更多 ...

https://github.com/search?l=JavaScript&o=desc&q=algo&s=stars&type=Repositories

还想知道更多好的数据结构与算法项目，可以点击上面的链接进行搜索。

最后

Star 数最多，但是并不代表该项目就最好并适合你哦，因为有些项目早于几年前就不再更新与维护了。

本文推荐的都是一些真的实用并还在更新的开源仓库，估计都比较适合前端学习。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目。

本文原文 GitHub 地址：https://github.com/biaochenxuying/FrontEndGitHub

觉得有用？喜欢就收藏，顺便点个赞吧，你的支持是我最大的鼓励！

Github标星1.6W+，程序员不得不知的“潜规则”又火了，早知道就不会秃头了

大家好，我是你们的前端章鱼猫，一个不喜欢前端、又不喜欢吃鱼的超级猫 ~

当程序员谈论开发设计时，常常会聊到非常多的定律，而 GitHub 上的一个名为「hacker-laws」的仓库收录了一些最常见的定律、原则等，获得了 16.5k 的 Star。

还记得所有AI教程必提的「奥卡姆剃刀原则」吗？即：如无必要，勿增实体。

这条原则也被收藏，还有一些不太常见的费茨法则、盖尔定律、康威定律等，都被一一收入囊中。

写代码累了困了？这些法则让工作事半功倍。

前端 GitHub 地址：https://github.com/biaochenxuying/FrontEndGitHub

以下为【前端GitHub】的第 3 期内容。

定律

90-9-1 法则（1% 法则）

90-9-1 法则表明，在诸如维基这样的互联网社区中，90% 的用户只看内容并不参与互动，9% 的用户会参与讨论，而只有 1% 的用户会创造内容。

现实世界的例子：2014 年，对四个健康的数字社交网络进行的一项研究发现，排名前 1% 的人创造了 73% 的帖子，紧随其后的 9% 平均占 25%，其余的 90% 的人平均占 2%。

类似的，帕累托法则也指出：生活中大多数事情不是均匀分布的。这个原则也被称为二八法则，重要的少数法则和因素稀疏原则。

帕累托法则 (The Pareto Principle or The 80/20 Rule)

生活中大多数事情不是均匀分布的。

帕累托法则可以帮你认识到大多数结果来自少数投入：

某个软件的 80％代码只占了总分配时间的 20％（相反，最难的 20％代码部分占用了 80％的时间）
20％的努力产生了 80％的结果
20％的工作创造了 80％的收入
20％的错误导致了 80％的崩溃
20％的功能导致了 80％的使用量

在 20 世纪 40 年代，公认为质量控制之父的美国罗马尼亚工程师约瑟夫·朱兰博士，开始将帕累托法则应用于质量问题。

这个原则也被称为二八法则，重要的少数法则和因素稀疏原则。

现实的例子：

微软 2002 年的报告表明，修复最常出现的 20％错误，将消除 Windows 和 Office 中 80％的错误和崩溃。

彼得原理 (The Peter Principle)

在等级制度中，人往往会被提升到他们的“无法胜任的水平”。

这是由劳伦斯·彼得提出的一个管理概念。彼得原理认为，擅长工作的人会得到提升，直到他们达到不再成功的水平 (即他们所“无法胜任的水平”)。基于此，由于他们资历更高，被公司开除的可能性较小 (除非他们表现非常糟糕)。而且他们将继续担任几乎没有本职技能的职位，即使那些原本让他们成功的能力在新工作中并无必要。

有的工程师对此特别感兴趣，它们最初从事的是深度的技术工作，但走上了管理其他工程师的职业道路——这意味着需要一个完全不同的技能树。

技术成熟度曲线法则

技术成熟度曲线是高德纳咨询公司对技术最初兴起和发展的视觉展现。一图胜千言：

简而言之，这个曲线表明，新技术及其潜在影响通常会引发一轮浪潮。

团队快速使用这些新技术，但有时会对结果感到失望，这可能是因为该技术还不够成熟，或者现实应用还没有完全实现。

经过一段时间后，技术的能力提高了，使用它的实际机会会增加，最终团队也可以提高工作效率。

罗伊·阿马拉简洁地总结了这一点：我们倾向于高估技术短期内的影响，并低估其长期效应。

破窗效应

在破窗理论中认为，一些明显的犯罪迹象(或缺乏环保意识)会导致进一步的、更严重的犯罪(或环境的进一步恶化)。

破窗理论已应用于软件开发中，它表明劣质代码可能会影响后续优化的效率，从而进一步造成代码劣化；随着时间的推移，这种效应将会导致代码质量大幅下降。

没那么常见的法则，但也暗藏工作秘诀

阿姆达尔定律

阿姆达尔定律是一个显示计算任务潜在加速能力的公式。这种能力可以通过增加系统资源来实现，通常用于并行计算中。

它可以预测增加处理器数量的实际好处，然而增加处理器数量会受到程序并行性的限制。

举例说明：如果程序由两部分组成，A部分必须由单个处理器执行，B部分可以并行运行。那么向执行程序的系统添加多个处理器只能获得有限的好处。

它可以极大地提升部分 B 的运行速度，但部分 A 的运行速度将保持不变。

下图展示了一些运行速度的提升潜能的例子：

可以看出，50％并行化的程序在使用大于 10 个处理单元之后的速度提升收效甚微，而 95％并行化的程序在使用超过一千个处理单元之后仍然可以显著提升速度。

随着摩尔定律逐渐失效，单个处理器的速度增加缓慢，并行化是提高性能的关键。

图形编程是一个极好的例子，现代着色器可以并行渲染单个像素或片段。这也是现代显卡通常具有数千个处理核心（GPU 单元）的原因。

林纳斯定律

足够多的眼睛，就可让所有问题浮现。

简单地说，能够看到问题的人越多，有人解决过相关的问题或事情的可能性就越高。

最初该定律是用来描述开源模型对于项目的价值的，并适用于任意的软件项目。同时它也可以扩展到开发流程之中——更多的代码审查、更多的静态分析和多重测试可以让问题更加明显和容易识别。

林纳斯定律的一个更正式的说法如下：

如果有足够大的测试员和联合开发人员基础，那么几乎每个问题都能很快被特征化，从而让以前遇到过类似问题的人解决。

德墨忒尔定律

得墨忒耳定律又称最少知识原则，是一条与面向对象语言有关的软件设计原则。

该定律表明，软件的一个单元应该只与其直接合作者交谈。

比如对象 A 引用了对象 B，对象 B 引用了对象 C，则 A 可以直接调用 B 的方法，但不应直接调用 C 的方法。所以如果 C 有一个 dothing() 的方法，A 不应该直接调用，而是用 B.getC().doThis()。

遵循这一定律可以限制代码更改的范围，使其以后更容易维护、更安全。

墨菲定律 (Murphy's Law / Sod's Law)

凡是可能出错的事就一定会出错。

墨菲定律 说明了如果一件事有可能出错，那么就一定会出错。

这是一句开发人员间的俗语，在开发、测试甚至在生产中都有可能会发生一些令人意想不到的事情。而这一定律也可以参考在英式英语中更为常见的 索德定理 ：

如果某件事可能出错，那么它一定会在最糟糕的时候发生。

奥卡姆剃刀 (Occam's Razor)

如无必要，勿增实体。

奥卡姆剃刀指出，在几种可能的解决方案之中，最有可能的解决方案便是概念和假设最少的那个。因为这个解决方案最为简单，只解决了问题，并且没有引入额外的复杂度和可能的负面后果。

坎宁汉姆定律

在网络上想得到正确答案的最好方法不是提问题，而是发布一个错误的答案。

帕金森定理 (Parkinson's Law)

在工作能够完成的时限内，工作量会一直增加，直到所有可用时间都被填满为止。

基于官僚机构的研究背景，该定律被应用于软件开发中。该理论认为，团队在截止日期之前效率低下，然后在截止日期前赶紧完成工作，从而使实际截止日期变得随意。

将这个定理与侯世达定律相结合，则会获得更加悲观的观点：为了在规定时间内完成工作，工作将增多，花费比预期更长的时间。

职场相关的原则

除了以上的这些法则，该仓库还给出了很多的原则。

死海效应原则

"... 那些更有才华，更有效率的 IT 工程师最有可能离开——消失 ... （而那些倾向于）留下来的“剩下的人”——是最没有才华和效率的 IT 工程师。"

死海效应表明，在任何一个组织中，工程师的技能、才华和效能往往与他们在公司的时间呈反比。

通常情况下，技术好的工程师很容易在其他的地方找到工作，并且他们往往也会这样做。而技能过时或技术薄弱的工程师则会留在公司，因为其他地方很难找到工作。如果这些工程师在公司里获得了加薪，他们会更愿意留在公司，因为在其他地方找到同等薪酬的工作会很有挑战性。

呆伯特原则

公司会倾向于系统地将工作能力差的员工提升到管理层，以使他们脱离工作流程，从而限制他们所能造成的损害。

技术相关的原则

单一功能原则

每个模块或者类只应该有一项功能。

SOLID 的第一个原则。这个原则表明模块或者类只应该做一件事。实际上，这意味着对程序功能的单个小更改，应该只需要更改一个组件。例如，更改密码验证复杂性的方式应该只需要更改程序的一部分。

理论上讲，这使代码更健壮，更容易更改。知道正在更改的组件只有一个功能，这意味着测试更改更容易。使用前面的例子，更改密码复杂性组件应该只影响与密码复杂性相关的功能。变更具有许多功能的组件可能要困难得多。

开闭原则

实体应开放扩展并关闭修改。

SOLID 的第二个原则。这个原则指出实体（可以是类、模块、函数等）应该能够使它们的行为易于扩展，但是它们的扩展行为不应该被修改。

举一个假设的例子，想象一个能够将 Markdown 转换为 HTML 的模块。如果可以扩展模块，而不修改内部模块来处理新的 markdown 特征，而无需修改内部模块，则可以认为是开放扩展。如果用户不能修改处理现有 Markdown 特征的模块，那么它被认为是关闭修改。

这个原则与面向对象编程紧密相关，让我们可以设计对象以便于扩展，但是可以避免以意想不到的方式改变其现有对象的行为。

里氏替换原则

可以在不破坏系统的情况下，用子类型替换类型。

SOLID 的第三个原则。该原则指出，如果组件依赖于类型，那么它应该能够使用该类型的子类型，而不会导致系统失败或者必须知道该子类型的详细信息。

举个例子，假设我们有一个方法，读取 XML 文档。如果该方法使用基类型 file，则从 file 派生的任何内容，都能用在该方法中。如果 file 支持反向查找，并且 xml 解析器使用该函数，但是派生类型 network file 尝试反向查找时失败，则 network file 将违反该原则。

该原则与面向对象编程紧密相关，必须仔细建模、层次结构，以避免让系统用户混淆。

接口隔离原则

不应强制任何客户端依赖于它不使用的方法。

SOLID 的第四个原则。该原则指出组件的消费者不应该依赖于它实际上不使用的组件函数。

举一个例子，假设我们有一个方法，读取 XML 文档。它只需要读取文件中的字节，向前移动或向后移动。如果由于一个与文件结构不相关的功能发生更改（例如更新文件安全性的权限模型），需要更新此方法，则该原则已失效。文件最好实现 可查询流 接口，并让 XML 读取器使用该接口。

该原则与面向对象编程紧密相关，其中接口，层次结构和抽象类型用于不同组件的 minimise the coupling。 Duck typing 是一种通过消除显式接口来强制执行该原则的方法。

依赖翻转原则

高级模块不应该依赖于低级实现。

SOLID 的第五个原则。该原则指出，更高级别的协调组件不应该知道其依赖项的详细信息。

举个例子，假设我们有一个从网站读取元数据的程序。我们假设主要组件必须知道下载网页内容的组件，以及可以读取元数据的组件。如果我们考虑依赖反转，主要组件将仅依赖于可以获取字节数据的抽象组件，然后是一个能够从字节流中读取元数据的抽象组件，主要组件不需要了解 TCP、IP、HTTP、HTML 等。

这个原则很复杂，因为它似乎可以反转系统的预期依赖性（因此得名）。实践中，这也意味着，单独的编排组件必须确保抽象类型的正确实现被使用（例如在前面的例子中，必须提供元数据读取器组件、HTTP 文件下载功能和 HTML 元标签读取器）。然后，这涉及诸如 Inversion of Control 和 Dependency Injection 之类的模式。

切斯特森围栏 (Chesterson's Fence)

在了解现有情况背后的原因之前，不应该进行改进。

该原则与软件工程中的消除技术负债 (Technical debt) 相关。程序的每一行最初都是出于某种原因编写的，因此根据切斯特森围栏原则，在更改或删除代码之前，即使看起来似乎是多余的或不正确的，也应该尝试完全理解代码的上下文和含义。

该原则的名字来源于一则故事。一个男人横穿马路**的栅栏，他向市长抱怨这道栅栏没有用还挡路，并要求拆除它。市长问他为什么要在那里建栅栏，那个人回答说不知道。市长接着说：“如果你不知道它的用途，我肯定不会让你把它拆了。你去查查它的用途，之后我可能会允许你拆掉它。”

哲学意味的原则

鲁棒性原则

在自己所做的事情上要保守, 在接受别人的事情上要自由。

通常应用于服务器应用程序开发中，该原则指出，你发送给其他人的内容应尽可能最小且符合要求，并且处理不符合要求的输入。

该原则的目标是构建稳健的系统。如果可以理解意图，它们可以处理不良的输入。但是，接受错误格式的输入可能存在安全隐患，特别是此类的输入未经过充分测试。

不要重复你自己原则

系统中，每一块知识都必须是单一、明确而权威的。

DRY 是 Do not Repeat Yourself 的缩写。这个原则旨在帮助开发人员减少代码的重复性，并将公共代码保存在一个地方。最初由安德鲁·亨特和戴夫·托马斯在 1999 年出版的《程序员修炼之道》中引用。

与 DRY 相反的是 WET（功能实现两次或者喜欢打字 Write Everything Twice or We Enjoy Typing）。

实际上，如果你在两个或更多的地方有相同的功能，你可以使用 DRY 原则将它们合并为一个，并在任何你需要的地方重复使用。

你不需要它法则

只有当你需要某些东西的时候，才去实现它们，而不是在你预见的时候。

极限编程原则告诫开发人员，他们应该只实现当前所需的功能，并避免实现未来需要的功能，仅在必要时才实现。

遵守这一原则可以减小代码库大小，同时避免时间和生产力浪费在没有价值的功能上。

KISS原则

保持简单和直白。

KISS 原则指明了如果大多数的系统能够保持简单而非复杂化，那么他们便能够工作在最佳状态。因此，简单性应该是设计时的关键指标，同时也要避免不必要的复杂度。这个短语最初出自 1960 年的美国海军飞机工程师凯利 · 约翰逊 (Kelly Johnson)。

这一原则的最好例证便是约翰逊给设计工程师一些实用工具的故事。那时的他们正面临着一个挑战，即他们参与设计的喷气式飞机必须能够让普通的机械师在战场上仅仅用这些工具进行维修，因此，“直白”这个词应指的是损坏的事物本身和修复用工具的复杂度两者之间的关系，而非工程师们自身的能力水平。

最后

还有很多的法则和原则没有一一指出，需要的小伙伴请点击下面的链接打开查看。

hacker-laws 中文地址：https://github.com/nusr/hacker-laws-zh

前端 GitHub 地址：https://github.com/biaochenxuying/FrontEndGitHub

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目。

觉得有用？喜欢就收藏，顺便点个赞吧，你的支持是我最大的鼓励！

前言

初级前端与高级前端之间，很大原因就是投入学习前端的时间、经验的差别，其实就是信息差。

如果有一个地方能又快又好的获得这些优质的前端信息，那么将会大大缩短从初级到高级的时间。

前端GitHub 就是这样一个仓库，能帮助前端开发人员节省时间的仓库！

公众号：前端GitHub，专注于挖掘 GitHub 上优秀的前端开源项目。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

以下为今天【前端GitHub】的第 17 期精华内容。

1. build-your-own-x

GitHub stars: 94k

如果你想要做些什么，并且想要获得一些关于如何实现它的指导，这是一个很好的资源。

通过浏览列表，你还会发现很多真正有趣的事情。

比如建立你自己的 Front-end Framework / Library

建立你自己的 Game

地址：

https://github.com/danistefanovic/build-your-own-x

2. javascript-algorithms

GitHub stars: 94k

该仓库包含了多种基于 JavaScript 的算法与数据结构。

每种算法和数据结构都有自己的 README，包含相关说明和链接，以便进一步阅读 (还有 YouTube 视频) 。

算法包含了算法主题和算法范式。

其中算法主题又包含了：数学、集合、字符串、搜索、排序、链表、树、图、加密、机器学习。

算法范式：算法范式是一种通用方法，基于一类算法的设计。这是比算法更高的抽象，就像算法是比计算机程序更高的抽象。

算法范式包含了：BF 算法、贪心法、分治法、动态编程、回溯法、Branch & Bound 等等。

这项目还出了对应的教学视频，总共 81 个视频讲解，每个视频大概 5 - 10分钟左右，还能学习英语哦 😉

youtube 的教学视频：https://www.youtube.com/playlist?list=PLLXdhg_r2hKA7DPDsunoDZ-Z769jWn4R8

前端章鱼猫之前学习算法的时候，也在这个项目中收益良多呢！

而且这个项目还一直有维护和更新内容哦！真的非常不错的一个项目！

还想知道更多好的数据结构与算法项目，可以看看 GitHub 上值得前端学习的 7 个数据结构与算法项目，相信猫哥，你会被惊艳到 ~

地址：

https://github.com/trekhleb/javascript-algorithms

3. computer-science

GitHub stars: 74k

不管你是一个从事编程的人，还是一个已经在业界自学的开发者， OSSU 的课程为所有想要学习计算机科学的人提供了大量的免费学习资源。

OSSU 课程是使用在线材料进行的完整的计算机科学教育。它不仅用于职业培训或专业发展。

它是根据本科计算机科学专业的学位要求减去通识教育（非CS）要求而设计的，因为假定遵循此课程的大多数人已经在CS领域以外接受了教育。

这些课程本身是世界上最好的课程，通常来自哈佛大学，普林斯顿大学，麻省理工学院等。

地址：

https://github.com/ossu/computer-science

类似的项目推荐：7 个 Github 上近 200k Star 的计算机学习资源，练好前端内功的秘籍！相信你会找到你的武功秘籍！

4. 30-seconds-of-code

GitHub stars: 67k

超过 100 个代码段，涵盖了 JavaScript 中的各种内容，从典型的算法，到你可能会发现自己需要完成的常见任务。非常值得一看！

该项目讲的是满足你所有开发需求的简短代码段，里面都是些经常会用到而且是非常经典的代码，非常值得学习！

比如 JavaScript 模块就分为了 All、Array、Browser、Date、Function、Math、Node、Object、String 方便学习的。

地址：

https://github.com/30-seconds/30-seconds-of-code

类似的项目推荐可以看看这篇： 12 个 GitHub 上超火的 JavaScript 奇技淫巧项目，找到写 JavaScript 的灵感！，你会发现新大陆的！

5. realworld

GitHub stars: 53k

有没有想过要学习如何使用特定的语言 / 技术开发适当的应用？

这就是为你准备的 GitHub 仓库！这超出了典型的“ to-do”应用程序， RealWorld 的示例使整个 “Medium-style” 应用程序更加丰富，包括了所有的钟声、哨声和最佳实践！

比如前端项目：

又比如后端项目：

地址：

https://github.com/gothinkster/realworld

6. free-programming-books

GitHub stars: 170k

该仓库主要是免费提供编程书籍。

大量的免费编程书籍可以帮助你的知识和理解更上一层楼。

除了编程书籍，还包含了免费在线课程、互动编程资源。

地址：

https://github.com/EbookFoundation/free-programming-books

7. system-design-primer

GitHub stars: 120k

学习如何设计大型系统。为系统设计面试做准备。

如果你正在寻找高级软件工程（或更高的）职位，那么拥有设计大型系统的能力是很有价值的，很多大型技术公司都希望你具备这一能力。

这也是一个重要技巧，如果你打算为你正在做的任何工作构建任何大型系统的话。

这份指南提供了大量的信息来帮助你做好准备。

地址：

https://github.com/donnemartin/system-design-primer

8. awesome-python

GitHub stars: 92.2k

精选的 Python 框架，库，软件和资源的精选清单。

Python 内建了一系列不同的库、框架和技术的列表。

对那些想要学习一种新的编程语言或仅仅想要提高对已有 Python 的了解的人来说，这是一个极好的指南。

地址：

https://github.com/vinta/awesome-python

9. nodebestpractices

GitHub stars 59k

该仓库是对 Node.js 最佳实践中排名最高的内容的总结和分享。

当前，超过 50 个最佳实现，样式指南，架构建议已经呈现。

每天都有新的 issue 和 PR 被创建，以使这本在线书籍不断更新。

因此，拥有这些详细的指南可以帮助你快速提高技能。

地址：

https://github.com/goldbergyoni/nodebestpractices

10. awesome-machine-learning

GitHub stars: 47.8k

这个 GitHub 仓库包含了精选的很棒的机器学习框架，库和软件的列表。

地址：

https://github.com/josephmisiti/awesome-machine-learning

最后

关于猫哥，大家可以看看前端工程师的 2020 年终总结 - 乾坤未定，你我皆黑马，看看猫哥的脸都被打歪的 😂。

不知不觉，已经写到第 17 期了呢，已经分享超过 200 个好的前端项目了呢，往期精文请看下方宝藏仓库，点击很危险，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

平时如何发现好的开源项目，可以看看这两篇文章：如何在 GitHub 上发现优秀开源项目和如何使用 GitHub 进行精准搜索的神仙技巧。

往期精文

微信搜 “前端GitHub”，回复 “电子书” 即可以获得 160 本前端精华书籍哦，加超级猫的 WX：CB834301747 ，一起闲聊前端。

前端月趋势榜：3 月最热门的 20 个前端开源项目 - 0403

大家好，我是你们的猫哥，那个不喜欢吃鱼、又不喜欢喵的超级猫 ~

关于猫哥，大家可以看看我的年终总结前端工程师的 2020 年终总结 - 乾坤未定，你我皆黑马。

相信很多人都没有逛 GitHub 的习惯，因此总会有开源信息的不对称，有哪些优秀的前端开源项目值得学习的也不知道。

从 2018 年开始，我就养成了每天逛 GitHub 的习惯，一般在早上上班前或者中午午休的时候都会逛一下。

看看每天都开源了哪些好的前端项目，还有用到的主流前端技术栈又是哪些，值得我去学习的。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

1. javascript-algorithms

该仓库包含了多种基于 JavaScript 的算法与数据结构。

每种算法和数据结构都有自己的 README，包含相关说明和链接，以便进一步阅读 (还有 YouTube 视频) 。

这项目还出了对应的教学视频，总共 81 个视频讲解，每个视频大概 5 - 10分钟左右，还能学习英语哦 😉

youtube 的教学视频：https://www.youtube.com/playlist?list=PLLXdhg_r2hKA7DPDsunoDZ-Z769jWn4R8

猫哥之前学习算法的时候，也在这个项目中收益良多呢！

而且这个项目还一直有维护和更新内容哦！真的非常不错的一个项目！

https://github.com/trekhleb/javascript-algorithms

更多算法相关的项目推荐可以看看这篇文章：7 个 GitHub 上超火的前端学习的数据结构与算法项目

2. Vite

Vite，一个基于浏览器原生 ES imports 的开发服务器。

利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。

同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打。

虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。

Vite 具有以下特点：

快速的冷启动
即时热模块更新（HMR，Hot Module Replacement）
真正按需编译

https://github.com/vitejs/vite

3. esbuild

它是一个「JavaScript」Bundler 打包和压缩工具，它可以将「JavaScript」和「TypeScript」代码打包分发在网页上运行。

esbuild 是一个用 Go 语言编写的用于打包，压缩 Javascript 代码的工具库。

它最突出的特点就是打包速度极快（extremely fast），下图是 esbuild 跟 webpack, rollup, Parcel 等打包工具打包效率的一个 benchmark:

https://github.com/evanw/esbuild

4. vscode

Visual Studio Code 是一个运行于 OS X，Windows 和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台编辑器。

也是当今天前端最流行的编辑器！

https://github.com/microsoft/vscode

5. Awesome

Awesome列出了各种有趣的话题。

https://github.com/sindresorhus/awesome

6. next.js

这是一个用于生产环境的 React 框架。

https://github.com/vercel/next.js

7. Front-End-Checklist

该项目是详尽的关于前端开发的清单，它列出了将 HTML 页面投入生产之前需要进行测试的所有元素。

它基于众多前端开发人员的多年经验，其中一部分整合自其他的开源清单。

内容包含：

Head
HTML
Webfonts
CSS
Images
JavaScript
Security
Performance
Accessibility
SEO

https://github.com/thedaviddias/Front-End-Checklist

8. React

一个声明性，高效且灵活的 JavaScript 库，用于构建用户界面。

声明式

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。

以声明式编写 UI，可以让你的代码更加可靠，且方便调试。

组件化

创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。

组件逻辑使用 JavaScript 编写而非模板，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。

一次学习，随处编写

无论你现在正在使用什么技术栈，你都可以随时引入 React 来开发新特性，而不需要重写现有代码。

React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。

https://github.com/facebook/react

React 相关的项目可以看: 一个 React 技术揭秘的项目，自顶向下的 React 源码分析。

9. material-ui

快速构建漂亮的 React 应用程序。

Material-UI 是一个简单且可自定义的组件库，用于构建更快，更美观，更易于访问的 React 应用程序。遵循您自己的设计系统，或从材料设计开始。

https://github.com/mui-org/material-ui

10. tailwindcss

一个实用程序优先的 CSS 框架，用于快速构建自定义用户界面。

无需离开您的 HTML，即可快速建立现代网站。

https://github.com/tailwindlabs/tailwindcss

11. edex-ui

一个跨平台，可定制的科幻小说终端模拟器，具有先进的监控和触摸屏支持。

它深受 DEX-UI 和 TRON Legacy 电影效果的启发，是一个类似于科幻电脑界面的全屏桌面应用程序。

作为从小就喜欢黑科技的猫哥来说，已经按耐不住要装 X 啦！

详情可以看看: 适用 Win、Mac、Linux，酷炫的极客界面 eDEX-UI

https://github.com/GitSquared/edex-ui

12. You-Dont-Know-JS

该项目为 YDNJS(You Don’t Know JS) 图书系列，包含一系列深入探讨 JavaScript 语言核心机制的书籍。

内容大纲

入门与进阶
作用域与闭包
this 与对象原型
类型与文法
异步与性能
ES6 与未来

https://github.com/getify/You-Dont-Know-JS

13. 33-js-concepts

JavaScript开发者应懂的 33 个概念

这个项目是为了帮助开发者掌握 JavaScript 概念而创立的。它不是必备，但在未来学习（JavaScript）中，可以作为一篇指南。

调用堆栈
原始类型
值类型和引用类型
隐式, 显式, 名义和鸭子类型
== 与 ===, typeof 与 instanceof
this, call, apply 和 bind
函数作用域, 块级作用域和词法作用域
闭包
map, reduce, filter 等高阶函数
表达式和语句
变量提升
Promise
立即执行函数, 模块化, 命名空间
递归
算法
数据结构
消息队列和事件循环
setTimeout, setInterval 和 requestAnimationFrame
继承, 多态和代码复用
按位操作符, 类数组对象和类型化数组
DOM 树和渲染过程
new 与构造函数, instanceof 与实例
原型继承与原型链
Object.create 和 Object.assign
工厂函数和类
设计模式
Memoization
纯函数, 函数副作用和状态变化
耗性能操作和时间复杂度
JavaScript 引擎
二进制, 十进制, 十六进制, 科学记数法
偏函数, 柯里化, Compose 和 Pipe
代码整洁之道

而且每个主题都包含了相关的精彩文章和视频，非常适合学习。

https://github.com/leonardomso/33-js-concepts

14. three.js

https://github.com/mrdoob/three.js

15. clean-code-javascript

优秀的 JS 代码规范。

比如：对相同类型的变量使用相同的关键字

Bad：

getUserInfo(); 
getClientData(); 
getCustomerRecord();

Good：

getUser();

再比如：使用可搜索的命名

在开发过程中，我们阅读代码的时间会远远超过编写代码的时间，因此保证代码的可读性与可搜索会非常重要。切记，没事不要坑自己。

Bad:

//525600到底啥意思？
for (var i = 0; i < 525600; i++) {
  runCronJob();
}

Good:

// 声明为全局变量
var MINUTES_IN_A_YEAR = 525600;
for (var i = 0; i < MINUTES_IN_A_YEAR; i++) {
  runCronJob();
}

https://github.com/ryanmcdermott/clean-code-javascript

16. Vue.js

Vue.js 是一个渐进式 JavaScript 框架，也是目前前端最流行的框架。

易用

已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！

灵活

不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。

高效

20kB min+gzip 运行大小
超快虚拟 DOM
最省心的优化

https://github.com/vuejs/vue

17. nodebestpractices

Node.js 最佳实践。

这个项目是对 Node.js 最佳实践中排名最高的内容的总结和分享。

这里是最大的汇集，且每周都在增长 - 当前，超过 50 个最佳实现，样式指南，架构建议已经呈现。

项目结构实践 (5)
异常处理实践 (11)
编码规范实践 (12)
测试和总体质量实践 (8)
进入生产实践 (16)
新: 安全实践(23)
Performance Practices (coming soon)

比如错误处理最佳实践中使用 Async-Await 和 promises 用于异步错误处理

https://github.com/goldbergyoni/nodebestpractices

18. ant-design

一套企业级 UI 设计语言和 React 组件库。

✨ 特性

🌈 提炼自企业级中后台产品的交互语言和视觉风格。
📦 开箱即用的高质量 React 组件。
🛡 使用 TypeScript 开发，提供完整的类型定义文件。
⚙️ 全链路开发和设计工具体系。
🌍 数十个国际化语言支持。
🎨 深入每个细节的主题定制能力。

https://github.com/ant-design/ant-design

19. next.js

这是一个用于生产环境的 React 框架。

https://github.com/vercel/next.js

20. strapi

strapi 是一个先进的 Node.js 内容管理框架（headless-CMS），可以毫不费力地构建强大的 API 。

功能特性

现代化管理面板： 优雅、完全可定制、完全可扩展的管理面板。
默认安全： 可重用策略、CSRF、CORS、P3P、Xframe、XSS 等等。
插件化： 可在几秒钟内安装身份验证系统、内容管理、自定义插件等等。
极速： 基于 Node.js，Strapi 表现惊人。
前端不可知论者（Front-end Agnostic）: 可使用任何前端框架（React、Vue、Angular等）、移动应用，甚至是物联网。
强大的 CLI： 脚手架项目和 API 不停机操作。
SQL & NoSQL 数据库： 使用 Mongo 作为主数据库，同时支持 Postgres、MySQL 等。

https://github.com/strapi/strapi

最后

好了，3 月的前端月趋势榜中最热门的 20 大前端开源项目就是上面那些了。

大家发现了没有，上面的项目中的很多个，猫哥都已经推荐过了的。

这个世界发展的真相就是马太效应，强者越强，弱者越弱。

开源项目也符合上面的规律，好的开源项目， Star 数会越来越多，会得到很多外力的推广(比如猫哥的推荐)，并且是呈现出指数型增长的。

初级前端与高级前端之间，很大原因就是投入学习前端的时间、经验的差别，其实就是信息差。

如果有一个地方能又快又好的获得这些优质的前端信息，那么将会大大缩短从初级到高级的时间。

基于这个初衷，于是就诞生了 前端GitHub，能帮助前端开发人员节省时间的公众号！

前端GitHub 专注于挖掘 GitHub 上优秀的前端开源项目，并以专题的形式推荐，每专题大概 10 个好项目，每周会有一到三篇精华文章推送。

往期精文请看下方宝藏仓库，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

公众号：前端GitHub，专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称，致力于打造最优质的前端开源项目资源库。

微信搜 “前端GitHub”，回复 “电子书” 即可以获得下面 300 本技术精华书籍哦，猫哥 wx：CB834301747 。

往期精文

不知不觉，原创文章已经写到第 36 期了呢，几乎每一篇都是猫哥精心挑选的优质开源项目，推送的每一篇文章里面的项目几乎都是对前端开发很有帮助的。

前端月趋势榜：5 月最热门的 20 个前端开源项目 - 2105

大家好，我是你们的猫哥，那个不喜欢吃鱼、又不喜欢喵的超级猫 ~

相信很多人都没有逛 GitHub 的习惯，因此总会有开源信息的不对称，有哪些优秀的前端开源项目值得学习的也不知道。

从 2018 年开始，我就养成了每天逛 GitHub 的习惯，一般在早上上班前或者中午午休的时候都会逛一下。

看看每天都开源了哪些好的前端项目，还有用到的主流前端技术栈又是哪些，值得我去学习的。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

1. winbox

WinBox 是一个专业的网页 HTML5 窗口管理器：轻量级、出色的性能、无依赖、完全可定制、开源！

https://github.com/nextapps-de/winbox

2. edex-ui

一款比较火的开源软件 ——edex-ui，它深受 DEX-UI 和 TRON Legacy 电影效果的启发，是一个类似于科幻电脑界面的全屏桌面应用程序。

作为从小就喜欢黑科技的猫哥来说，已经按耐不住要装 X 啦！

这个项目是基于 electron 和 node 的，前端如果觉得有意思，也可以 clone 下来玩一下哦！

项目地址：

https://github.com/GitSquared/edex-ui

3. ant-design

一套企业级 UI 设计语言和 React 组件库。

✨ 特性

🌈 提炼自企业级中后台产品的交互语言和视觉风格。
📦 开箱即用的高质量 React 组件。
🛡 使用 TypeScript 开发，提供完整的类型定义文件。
⚙️ 全链路开发和设计工具体系。
🌍 数十个国际化语言支持。
🎨 深入每个细节的主题定制能力。

https://github.com/ant-design/ant-design

4. next.js

这是一个用于生产环境的 React 框架。

https://github.com/vercel/next.js

5. Vite

Vite，一个基于浏览器原生 ES imports 的开发服务器。

利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。

同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打。

虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。

Vite 具有以下特点：

快速的冷启动
即时热模块更新（HMR，Hot Module Replacement）
真正按需编译

https://github.com/vitejs/vite

6. tailwindcss

一个实用程序优先的 CSS 框架，用于快速构建自定义用户界面。

无需离开您的 HTML，即可快速建立现代网站。

https://github.com/tailwindlabs/tailwindcss

7. React

一个声明性，高效且灵活的 JavaScript 库，用于构建用户界面。

声明式

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。

以声明式编写 UI，可以让你的代码更加可靠，且方便调试。

组件化

创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。

组件逻辑使用 JavaScript 编写而非模板，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。

一次学习，随处编写

无论你现在正在使用什么技术栈，你都可以随时引入 React 来开发新特性，而不需要重写现有代码。

React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。

https://github.com/facebook/react

React 相关的项目可以看: 一个 React 技术揭秘的项目，自顶向下的 React 源码分析。

8. tauri

https://github.com/tauri-apps/tauri

9. vscode

Visual Studio Code 是一个运行于 OS X，Windows 和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台编辑器。

也是当今天前端最流行的编辑器！

https://github.com/microsoft/vscode

10. storybook

Storybook 是 UI 组件的开发环境，它允许开发者浏览组件库，查看每个组件的不同状态，以及交互地开发和测试组件。

特点：

附带了许多组件设计、文档、测试、交互性等内容
易于使用的 API 使它易于配置和扩展，甚至被扩展到支持移动的本地开发

https://github.com/storybookjs/storybook

11. Vue.js

Vue.js 是一个渐进式 JavaScript 框架，也是目前前端最流行的框架。

易用

已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！

灵活

不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。

高效

20kB min+gzip 运行大小
超快虚拟 DOM
最省心的优化

https://github.com/vuejs/vue

12. three.js

https://github.com/mrdoob/three.js

13. Cypress

Cypress 是为现代网络而构建的下一代前端测试工具，用于解决开发者和 QA 工程师在测试现代应用程序时面临的关键难题。

https://github.com/cypress-io/cypress

14. chakra-ui

快速构建可访问的 React 应用程序

Chakra UI 提供了一组可访问、可重用和可组合的 React 组件，使创建网站和应用程序变得非常容易。

特征 🚀

易于造型：脉轮UI包含就像一组布局的构成要素中Box，并 Stack通过传递道具让您轻松风格的组成部分。
灵活和可组合：Chakra UI 组件建立在 React UI Primitive 之上，以实现无限的可组合性。
无障碍。Chakra UI 组件遵循 WAI-ARIA 指南规范并具有正确的aria-*属性。
黑暗模式 😍：Chakra UI 中的大多数组件都兼容暗模式。

https://github.com/chakra-ui/chakra-ui

15. axios

易用、简洁且高效的 http 库

Axios 是一个简单的基于 Promise 的 HTTP 客户端，用于浏览器和 node.js。Axios 在一个带有非常可扩展的接口的小包中提供了一个简单易用的库。

https://github.com/axios/axios

16. TypeScript

为 JavaScript 提供静态类型安全性的 JavaScript 的超集。

赢得了转译者与竞争对手 Flow 的战斗，几乎成为前端和后端开发的标准。

DefinitelyTyped 项目为 7000 多个软件包提供了其他类型！

https://github.com/microsoft/TypeScript

更多学习资料请看推荐 7 个学习 TypeScript 的宝库。

17. vue-element-admin

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui 实现。

同时配套了系列教程文章，如何从零构建后一个完整的后台项目。

手摸手，带你用 vue 撸后台系列一(基础篇)
手摸手，带你用 vue 撸后台系列二(登录权限篇)
手摸手，带你用 vue 撸后台系列三 (实战篇)
手摸手，带你用 vue 撸后台系列四(vueAdmin 一个极简的后台基础模板)
手摸手，带你用 vue 撸后台系列五(v4.0新版本)
手摸手，带你封装一个 vue component
手摸手，带你优雅的使用 icon
手摸手，带你用合理的姿势使用 webpack4（上）
手摸手，带你用合理的姿势使用 webpack4（下）

该项目还在一直维护中。

而且也是配有使用文档的，很不错。

Github Star 数 62.2K， Github 地址：

https://github.com/PanJiaChen/vue-element-admin

18. react-flow

https://github.com/wbkd/react-flow

19. esbuild

它是一个「JavaScript」Bundler 打包和压缩工具，它可以将「JavaScript」和「TypeScript」代码打包分发在网页上运行。

esbuild 是一个用 Go 语言编写的用于打包，压缩 Javascript 代码的工具库。

它最突出的特点就是打包速度极快（extremely fast），下图是 esbuild 跟 webpack, rollup, Parcel 等打包工具打包效率的一个 benchmark:

https://github.com/evanw/esbuild

20. prisma

Prisma 是包含以下工具的下一代 ORM：

Prisma Client：针对Node.js和TypeScript的自动生成且类型安全的查询生成器
Prisma Migrate：声明性数据建模和迁移系统
Prisma Studio：用于查看和编辑数据库中数据的GUI
Prisma Client 可以在任何 Node.js 或 TypeScript 后端应用程序（包括无服务器应用程序和微服务）中使用。这可以是 REST API，GraphQL API，gRPC API 或任何其他需要数据库的东西。

https://github.com/prisma/prisma

最后

好了，5 月的前端月趋势榜中最热门的 20 大前端开源项目就是上面那些了。

大家发现了没有，上面的项目中的很多个，猫哥都已经推荐过了的。

这个世界发展的真相就是马太效应，强者越强，弱者越弱。

开源项目也符合上面的规律，好的开源项目， Star 数会越来越多，会得到很多外力的推广(比如猫哥的推荐)，并且是呈现出指数型增长的。

因为上周去大西北旅游了一周，所以上周没更新文章，有空写一篇在大西北旅游途中的所看到的风景呀。

前端GitHub 专注于挖掘 GitHub 上优秀的前端开源项目，并以专题的形式推荐，每专题大概 10 个好项目，每周会有一到三篇精华文章推送。

往期精文请看下方宝藏仓库，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

公众号：前端GitHub，专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称，致力于打造最优质的前端开源项目资源库。

有需要的就来拿吧，绝对免费，无套路获取。

往期精文

不知不觉，原创文章已经写到第 45 期了呢，几乎每一篇都是猫哥精心挑选的优质开源项目，推送的每一篇文章里面的项目几乎都是对前端开发很有帮助的，大佬们看完文章后，顺手来个一键三连吧，就当给猫哥一点鼓励吧。

恕我直言，你可能连 GitHub 搜索都不会用 - 如何精准搜索的神仙技巧

大家好，我是你们的前端章鱼猫，一个不喜欢喵、又不喜欢吃鱼的超级猫 ~

今天给大家带来的是 在 GitHub 上如何精准搜索的神仙技巧。

【前端GitHub】，专注于挖掘 GitHub 上优秀的前端开源项目，抹平你的前端信息不对称，涵盖 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS、数据结构与算法等等。

[前端GitHub] 地址：https://github.com/biaochenxuying/FrontEndGitHub

以下为【前端GitHub】的第 4 期内容。

普通的搜索

相信一般人搜索项目时，都是直接搜索技术栈相关的项目。

高级一点的搜索，会根据最匹配、最多 Star 来进行排序、选择相应的语言、选择仓库或者代码来进行筛选。

但是 GitHub 的搜索功能只支持以上这些而已吗？

No!

如果你只会用以上的功能，那你知道的仅仅是 GitHub 搜索的冰山一角！

GitHub 的搜索是非常强大的！下面介绍更高级的搜索技巧。

搜索语法

搜索 GitHub 时，你可以构建匹配特定数字和单词的查询。

查询大于或小于另一个值的值

您可以使用 >、>=、< 和 <= 搜索大于、大于等于、小于以及小于等于另一个值的值。

查询	示例
`>n`	cats vue:>1000 匹配含有 "vue" 字样、星标超过 1000 个的仓库。
`>=n`	vue topics:>=5 匹配含有 "vue" 字样、有 5 个或更多主题的仓库。
`<n`	vue size:<10000 匹配小于 10 KB 的文件中含有 "vue" 字样的代码。
`<=n`	vue stars:<=50 匹配含有 "vue" 字样、星标不超过 50 个的仓库。

您还可以使用范围查询搜索大于等于或小于等于另一个值的值。

查询	示例
`n..*`	vue stars:10..* 等同于 `stars:>=10` 并匹配含有 "vue" 字样、有 10 个或更多星号的仓库。
`..n*`	*vue stars:..10** 等同于 `stars:<=10` 并匹配含有 "vue" 字样、有不超过 10 个星号的仓库。

查询范围之间的值

您可以使用范围语法 *n*..*n* 搜索范围内的值，其中第一个数字 n 是最低值，而第二个是最高值。

查询	示例
`n..n`	vue stars:10..50 匹配含有 "vue" 字样、有 10 到 50 个星号的仓库。

查询日期

您可以通过使用 >、>=、<、<= 和范围查询搜索早于或晚于另一个日期，或者位于日期范围内的日期。

日期格式必须遵循 ISO8601 标准，即 YYYY-MM-DD（年-月-日）。

查询	示例
`>YYYY-MM-DD`	vue created:>2016-04-29 匹配含有 "vue" 字样、在 2016 年 4 月 29 日之后创建的议题。
`>=YYYY-MM-DD`	vue created:>=2017-04-01 匹配含有 "vue" 字样、在 2017 年 4 月 1 日或之后创建的议题。
`<YYYY-MM-DD`	vue pushed:<2012-07-05 匹配在 2012 年 7 月 5 日之前推送的仓库中含有 "vue" 字样的代码。
`<=YYYY-MM-DD`	vue created:<=2012-07-04 匹配含有 "vue" 字样、在 2012 年 7 月 4 日或之前创建的议题。
`YYYY-MM-DD..YYYY-MM-DD`	vue pushed:2016-04-30..2016-07-04 匹配含有 "vue" 字样、在 2016 年 4 月末到 7 月之间推送的仓库。
`YYYY-MM-DD..*`	vue created:2012-04-30..* 匹配在 2012 年 4 月 30 日之后创建、含有 "vue" 字样的议题。
`..YYYY-MM-DD*`	*vue created:..2012-04-30** 匹配在 2012 年 7 月 4 日之前创建、含有 "vue" 字样的议题。

您也可以在日期后添加可选的时间信息 THH:MM:SS+00:00，以便按小时、分钟和秒进行搜索。这是 T，随后是 HH:MM:SS（时-分-秒）和 UTC 偏移 (+00:00)。

查询	示例
`YYYY-MM-DDTHH:MM:SS+00:00`	vue created:2017-01-01T01:00:00+07:00..2017-03-01T15:30:15+07:00 匹配在 2017 年 1 月 1 日凌晨 1 点（UTC 偏移为 `07:00`）与 2017 年 3 月 1 日下午 3 点（UTC 偏移为 `07:00`）之间创建的议题。 UTC 偏移量 `07:00`，2017 年 3 月 1 日下午 3 点。 UTC 偏移量 `07:00`。
`YYYY-MM-DDTHH:MM:SSZ`	vue created:2016-03-21T14:11:00Z..2016-04-07T20:45:00Z 匹配在 2016 年 3 月 21 日下午 2:11 与 2016 年 4 月 7 日晚上 8:45 之间创建的议题。

排除特定结果

您可以使用 NOT 语法排除包含特定字词的结果。 NOT 运算符只能用于字符串关键词，不适用于数字或日期。

查询	示例
`NOT`	hello NOT world 匹配含有 "hello" 字样但不含有 "world" 字样的仓库。

缩小搜索结果范围的另一种途径是排除特定的子集。您可以为任何搜索限定符添加 - 前缀，以排除该限定符匹配的所有结果。

查询	示例
`-QUALIFIER`	vue stars:>10 -language:javascript 匹配含有 "vue" 字样、有超过 10 个星号但并非以 JavaScript 编写的仓库。
	mentions:biaochenxuying -org:github 匹配提及 @biaochenxuying 且不在 GitHub 组织仓库中的议题

对带有空格的查询使用引号

如果搜索含有空格的查询，您需要用引号将其括起来。例如：

cats NOT "hello world" 匹配含有 "vue" 字样但不含有 "hello world" 字样的仓库。
build label:"bug fix" 匹配具有标签 "bug fix"、含有 "build" 字样的议题。

某些非字母数字符号（例如空格）会从引号内的代码搜索查询中删除，因此结果可能出乎意料。

使用用户名的查询

如果搜索查询包含需要用户名的限定符，例如 user、actor 或 assignee，您可以使用任何 GitHub 用户名指定特定人员，或使用 @me 指定当前用户。

查询	示例
`QUALIFIER:USERNAME`	`author:biaochenxuying` 匹配 @biaochenxuying 创作的提交。
`QUALIFIER:@me`	`is:issue assignee:@me` 匹配已分配给结果查看者的议题

@me 只能与限定符一起使用，而不能用作搜索词，例如 @me main.workflow。

高级的搜索

按仓库名称、说明或自述文件内容搜索

通过 in 限定符，您可以将搜索限制为仓库名称、仓库说明、自述文件内容或这些的任意组合。

如果省略此限定符，则只搜索仓库名称和说明。

限定符	示例
`in:name`	vue in:name 匹配其名称中含有 "jquery" 的仓库。
`in:description`	vue in:name,description 匹配其名称或说明中含有 "vue" 的仓库。
`in:readme`	vue in:readme 匹配其自述文件中提及 "vue" 的仓库。
`repo:owner/name`	repo:biaochenxuying/blog 匹配特定仓库名称，比如：用户为 biaochenxuying 的 blog 项目。

在用户或组织的仓库内搜索

要在 特定用户或组织 拥有的所有仓库中搜索，您可以使用 user 或 org 限定符。

限定符	示例
`user:USERNAME`	user:biaochenxuying forks:>=100 匹配来自 @biaochenxuying、拥有超过 100 复刻的仓库。
`org:ORGNAME`	org:github 匹配来自 GitHub 的仓库。

按仓库大小搜索

size 限定符使用大于、小于和范围限定符查找匹配特定大小（以千字节为单位）的仓库。

限定符	示例
`size:n`	size:1000 匹配恰好为 1 MB 的仓库。
	size:>=30000 匹配至少为 30 MB 的仓库。
	size:<50 匹配小于 50 KB 的仓库。
	size:50..120 匹配介于 50 KB 与 120 KB 之间的仓库。

按关注者数量搜索

您可以使用 followers 限定符以及大于、小于和范围限定符基于仓库拥有的关注者数量过滤仓库。

限定符	示例
`followers:n`	node followers:>=10000 匹配有 10,000 或更多关注者提及文字 "node" 的仓库。
	styleguide linter followers:1..10 匹配拥有 1 到 10 个关注者并且提及 "styleguide linter" 一词的的仓库。

按复刻数量搜索

forks 限定符使用大于、小于和范围限定符指定仓库应具有的复刻数量。

限定符	示例
`forks:n`	forks:5 匹配只有 5 个复刻的仓库。
	forks:>=205 匹配具有至少 205 个复刻的仓库。
	forks:<90 匹配具有少于 90 个复刻的仓库。
	forks:10..20 匹配具有 10 到 20 个复刻的仓库。

按星号数量搜索

您可以使用大于、小于和范围限定符基于仓库具有的星标数量搜索仓库

限定符	示例
`stars:n`	stars:500 匹配恰好具有 500 个星号的仓库。
	stars:10..20 匹配具有 10 到 20 个星号、小于 1000 KB 的仓库。
	stars:>=500 fork:true language:vue 匹配具有至少 500 个星号，包括复刻的星号（以 vue 编写）的仓库。

按仓库创建或上次更新时间搜索

你可以基于创建时间或上次更新时间过滤仓库。

对于仓库创建，您可以使用 created 限定符；
要了解仓库上次更新的时间，您要使用 pushed 限定符。 pushed 限定符将返回仓库列表，按仓库中任意分支上最近进行的提交排序。

两者均采用日期作为参数。日期格式必须遵循 ISO8601 标准，即 YYYY-MM-DD（年-月-日）。

也可以在日期后添加可选的时间信息 THH:MM:SS+00:00，以便按小时、分钟和秒进行搜索。这是 T，随后是 HH:MM:SS（时-分-秒）和 UTC 偏移 (+00:00)。

日期支持 大于、小于和范围限定符。

限定符	示例
`created:YYYY-MM-DD`	vue created:<2020-01-01 匹配具有 "vue" 字样、在 2020 年之前创建的仓库。
`pushed:YYYY-MM-DD`	css pushed:>2020-02-01 匹配具有 "css" 字样、在 2020 年 1 月之后收到推送的仓库。
	vue pushed:>=2020-03-06 fork:only 匹配具有 "vue" 字样、在 2020 年 3 月 6 日或之后收到推送并且作为复刻的仓库。

按语言搜索

您可以基于其编写采用的主要语言搜索仓库。

限定符	示例
`language:LANGUAGE`	vue language:javascript 匹配具有 "vue" 字样、以 JavaScript 编写的仓库。

按主题搜索

您可以查找归类为特定主题的所有仓库。

限定符	示例
`topic:TOPIC`	topic:algorithm 匹配已归类为 "algorithm" 主题的仓库。

估计又有很多人不知道 GitHub 上有话题一说的吧。

按主题数量搜索

您可以使用 topics 限定符以及大于、小于和范围限定符按应用于仓库的主题数量搜索仓库。

限定符	示例
`topics:n`	topics:5 匹配具有五个主题的仓库。
	topics:>3 匹配超过三个主题的仓库。

使用可视界面搜索

还可以使用 search page 或 advanced search page 搜索 GitHub 哦。

这种搜索方式，估计就更少人知道了吧。

advanced search page 提供用于构建搜索查询的可视界面。

您可以按各种因素过滤搜索，例如仓库具有的星标数或复刻数。在填写高级搜索字段时，您的查询将在顶部搜索栏中自动构建。

按许可搜索

您可以按其许可搜索仓库。您必须使用许可关键词按特定许可或许可系列过滤仓库。

限定符	示例
`license:LICENSE_KEYWORD`	license:apache-2.0 匹配根据 Apache License 2.0 授权的仓库。

按公共或私有仓库搜索

您可以基于仓库是公共还是私有来过滤搜索。

限定符	示例
`is:public`	is:public org:github 匹配 GitHub 拥有的公共仓库。
`is:private`	is:private pages 匹配您有访问权限且包含 "pages" 字样的私有仓库。

按公共或私有仓库搜索

您可以根据仓库是否为镜像以及托管于其他位置托管来搜索它们。

限定符	示例
`mirror:true`	mirror:true GNOME 匹配是镜像且包含 "GNOME" 字样的仓库。
`mirror:false`	mirror:false GNOME 匹配并非镜像且包含 "GNOME" 字样的仓库。

基于仓库是否已存档搜索

你可以基于仓库是否已存档来搜索仓库。

限定符	示例
`archived:true`	archived:true GNOME 匹配已存档且包含 "GNOME" 字样的仓库。
`archived:false`	archived:false GNOME 匹配未存档且包含 "GNOME" 字样的仓库。

基于具有 `good first issue` 或 `help wanted` 标签的议题数量搜索

您可以使用限定符 help-wanted-issues:>n 和 good-first-issues:>n 搜索具有最少数量标签为 help-wanted 或 good-first-issue 议题的仓库。

限定符	示例
`good-first-issues:>n`	good-first-issues:>2 javascript 匹配具有超过两个标签为 `good-first-issue` 的议题且包含 "javascript" 字样的仓库。
`help-wanted-issues:>n`	help-wanted-issues:>4 react 匹配具有超过四个标签为 `help-wanted` 的议题且包含 "React" 字样的仓库。

学习

其实，以上很多内容的都是来自于 GitHub 的官方文档，如果你还想学习更多技巧，请看

GitHub 官方文档 : https://docs.github.com/cn

如果你还不了解或者不会使用 GitHub ，可以看看这一章节：

Git 和 GitHub 学习资源：https://docs.github.com/cn/free-pro-team@latest/github/getting-started-with-github/git-and-github-learning-resources

最后

[前端GitHub] 地址：https://github.com/biaochenxuying/FrontEndGitHub

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目。

往期精文

Web 趋势榜：上周最有意思、最热门的 10 大 Web 项目 - 210625

大家好，我是你们的猫哥，那个不喜欢吃鱼、又不喜欢喵的超级猫 ~

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

1. TypeStat

将 JavaScript 转换为 TypeScript，并将 TypeScript 转换为更好的 TypeScript。

https://github.com/JoshuaKGoldberg/TypeStat

2. Package Phobia

⚖️ 查找向项目添加新依赖项的成本
🕗 使用此网络应用程序节省您的时间和磁盘空间
📈 使用图表检测 javascript 膨胀随着时间的推移
🛡️ 为您的 README 获取徽章/盾牌
📡 从 json API 获取大小以集成到任何工具中

https://github.com/styfle/packagephobia

3. DenoDB

🗣支持 PostgreSQL、MySQL、MariaDB、SQLite 和 MongoDB
🔥简单的类型化 API

https://github.com/eveningkid/denodb

4. Size Limit

大小限制是 JavaScript 的性能预算工具。它会检查 CI 上的每个提交，计算最终用户的 JS 实际成本，如果成本超过限制，则会抛出错误。

ES 模块和摇树支持。
向Travis CI、Circle CI、GitHub Actions 或其他 CI 系统添加大小限制，以了解拉取请求是否添加了大量依赖项。
模块化以适应不同的用例：使用自己的打包器的大型 JS 应用程序或包含许多文件的小型 npm 库。
可以计算的时间，将采取浏览器下载和执行你的JS。与以字节为单位的大小相比，时间是一个更加准确和易于理解的指标。
计算包括 JS 中使用的所有依赖项和 polyfill。

https://github.com/ai/size-limit

5. Holmes

在页面内快速轻松搜索。

Holmes 根据输入的值过滤一个元素列表，只需约 2KB。

https://github.com/Haroenv/holmes

6. react-headroom

隐藏您的标题，直到您需要它

https://github.com/KyleAMathews/react-headroom

7. React Interview Questions & Answers

关于排名前 500 的 ReactJS 面试问题和答案列表......编码练习问题即将推出！

https://github.com/sudheerj/reactjs-interview-questions

8. Intro.js

轻量级、用户友好的入门导览库

https://github.com/usablica/intro.js

9. clipboard.js

现代复制到剪贴板。没有 Flash。压缩后只有 3kb。

将文本复制到剪贴板应该不难。它不应该需要几十个步骤来配置或加载数百 KB。

但最重要的是，它不应该依赖于 Flash 或任何臃肿的框架。

这就是 clipboard.js 存在的原因。

https://github.com/zenorocha/clipboard.js

10. next-sitemap

next.js 的站点地图生成器。为所有静态/预渲染/动态/服务器端页面生成站点地图和 robots.txt。

https://github.com/iamvishnusankar/next-sitemap

最后

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

原文链接请看下方宝藏仓库，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

往期精文

不知不觉，原创文章已经写到第 48 期了呢，几乎每一篇都是猫哥精心挑选的优质开源项目，推送的每一篇文章里面的项目几乎都是对前端开发很有帮助的。

更新并运营大半年不易，大佬们看完文章后顺手点个赞或者转发吧，就当给猫哥一点鼓励吧，谢谢。

简介

一般人没事的时候刷刷朋友圈、微博、电视剧、知乎，而有些人是没事的时候刷刷 GitHub ，看看最近有哪些流行的项目。

久而久之，这差距就越来越大，因此总会有开源信息的不对称，有哪些优秀的前端开源项目值得学习的也不知道。

初步前端与高级前端之间，最大的差距可能就是信息差造成的。

前端章鱼猫从 2016 年加入 GitHub，到现在的 2020 年，快整整 5 个年头了。

从 2018 年开始，我就养成了每天逛 GitHub 的习惯，一般在早上上班前或者中午午休的时候都会逛一下。

看看每天都开源了哪些好的前端项目，还有用到的主流前端技术栈又是哪些，值得我去学习的。

因此也收藏了不少好的开源项目，在此推荐给大家，每周会有一到三篇精华文章推送。

希望你在浏览、学习了前端章鱼猫推荐的这些开源项目的过程中，你能学习到更多编程知识、提高编程技巧、找到编程的乐趣。

公众号：前端GitHub，专注于挖掘 GitHub 上优秀的前端开源项目，抹平你的前端信息不对称，涵盖 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS、数据结构与算法等等。

以下为【前端GitHub】的第 6 期精华内容。

今天给大家带来的是 GitHub 上超火的 10 个前端面试项目。

Front-end-Developer-Questions

这个项目里面很多面试题，而且 star 数非常高，最大的缺点就是 没有答案！

包含了：常见问题、HTML 相关问题、CSS 相关问题、JS 相关问题、测试相关问题、效能相关问题、网络相关问题、代码相关问题、趣味问题。

比如 JS 相关问题：

请解释事件代理 (event delegation)。
请解释 JavaScript 中 this 是如何工作的。
请解释原型继承 (prototypal inheritance) 的原理。
你怎么看 AMD vs. CommonJS？
请解释为什么接下来这段代码不是 IIFE (立即调用的函数表达式)：function foo(){ }();，要做哪些改动使它变成 IIFE?
描述以下变量的区别：null，undefined 或 undeclared？该如何检测它们？
什么是闭包 (closure)，如何使用它，为什么要使用它？
请举出一个匿名函数的典型用例？
你是如何组织自己的代码？是使用模块模式，还是使用经典继承的方法？

超级猫觉得可以作为前端自检清单吧。

https://h5bp.org/Front-end-Developer-Interview-Questions/

Daily-Question

这是山月大佬整理的：互联网大厂内推及大厂面经整理，并且每天一道面试题推送。每天五分钟，半年大厂中。

每天至少一个问题，有关前后端，DevOps，微服务以及软技能，促进个人职业成长。

https://github.com/shfshanyue/Daily-Question

还有 掘金前端面试题合集

用简单的命令爬取了掘金的面试集合榜单，还是挺全的。

https://github.com/shfshanyue/blog/blob/master/post/juejin-interview.md

CS-Interview-Knowledge-Map

这是小册作者 yck 大佬花了半年的时间做了一个这个开源项目。在半年的时间里，收集了大量的一线大厂面试题，通过大数据统计出了近百个常考知识点，然后根据这些知识点写成了近十万字的内容。

目前的内容包括 js、网络、浏览器相关、性能优化、安全性、框架、git、数据结构、算法等。

https://github.com/InterviewMap/CS-Interview-Knowledge-Map

Daily-Interview-Question

每天搞定一道前端大厂面试题，祝大家天天进步，一年后会看到不一样的自己。

这项目的问题，很多同学参与回答，内容也很新，作为每日突击的学习，很适合准备跳槽的同学。

https://github.com/Advanced-Frontend/Daily-Interview-Question

fe-interview

这是一份作者总结的关于准备前端面试的一个复习汇总项目，项目不定时更新。

这不仅仅是一份用于求职面试的攻略，也是一份前端 er 用来检视自己，实现突破的宝典。

希望通过这个指南，大家可以打通自己的任督二脉，在前端的路上更进一步。

本仓库大量采用图的形式来传达知识，所谓一图胜千言，希望通过这种图文并茂的表达方式让你更容易记住一些抽象，难以理解的概念。

https://lucifer.ren/fe-interview

fe-interview

该专题的面试内容包含：HTML + CSS + JS + ES6 + Webpack + Vue + React + Node + HTTPS + 数据结构与算法 + Git ，内容还是比较齐全的。

复习前端面试的知识，是为了巩固前端的基础知识，最重要的还是平时的积累！

内容大概是一年前了，内容都在一个 readme 文件里面，阅读不是很方便。

https://github.com/biaochenxuying/blog/blob/master/interview/fe-interview.md

fe-interview

这是一个涉及前端知识题库最多（3000+）、最全，参与人数最多的免费开源项目！

前端面试每日 3+1，以面试题来驱动学习，提倡每日学习与思考，每天进步一点！每天早上 5 点纯手工发布面试题（死磕自己，愉悦大家）。

https://github.com/haizlin/fe-interview

node-interview

该项目的目的是教你如何通过饿了么大前端的面试, 职位是 2~3 年经验的 Node.js 服务端程序员 (并不是全栈)。

需要注意的是, 该项目针对的并不是零基础的同学, 你需要有一定的 JavaScript/Node.js 基础, 并且有一定的工作经验. 另外该项目的重点更准确的说是服务端基础中 Node.js 程序员需要了解的部分。

https://github.com/ElemeFE/node-interview/tree/master/sections/zh-cn

Front-End-Interview-Notebook

这个仓库是笔者校招时的前端复习笔记，主要总结一些比较重要的知识点和前端面试问题，对大家应该有所帮助。

https://github.com/CavsZhouyou/Front-End-Interview-Notebook

FE-Interview

每天 get 一个知识点。

前端面试必备题库，1000+ 面试真题，Html、Css、JavaScript、Vue、React、Node、TypeScript、Webpack、算法、网络与安全、浏览器。

https://github.com/lgwebdream/FE-Interview

更多前端面试开源项目 ...

https://github.com/search?o=desc&p=1&q=%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95&s=&type=Repositories

最后

好了，【前端GitHub】的第 6 期内容已经讲完了，更多精彩请看下方仓库地址：

原文地址：https://github.com/FrontEndGitHub/FrontEndGitHub

觉得有用？喜欢就收藏，顺便点个赞吧，你的支持是我最大的鼓励！

前端最流行的 10 大顶级开源项目！猛增 174K Star！

大家好，我是你们的猫哥，那个不喜欢吃鱼、又不喜欢喵的超级猫 ~

关于猫哥，大家可以看看我的年终总结前端工程师的 2020 年终总结 - 乾坤未定，你我皆黑马。

今天给大家推荐 2020 年最流行的 10 大顶级前端学习资源项目！

在 2020 年里猛增 174K Star！可见其流行程度！

1. deno

2020 年增长 30.2K

一个安全的 JavaScript 和 TypeScript 运行时。

出于多种原因，2020 年是非常特殊的一年。最重要的一个：5 年以来的第一次，新星的总冠军不是 Vue.js，而是 Deno……真是令人惊讶！

Deno 是 Node.js 的创建者 Ryan Dahl 的 JavaScript 运行时。

凭借 10 年的经验和对 Node.js 的迭代经验，它通常被视为 Node.js 的续集，因为它可以修复或改进许多要点。

https://github.com/denoland/deno

2. Vue.js

2020 年增长 22.5K

Vue.js 是一个渐进式 JavaScript 框架，也是目前前端最流行的框架。

易用

已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！

灵活

不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。

高效

20kB min+gzip 运行大小
超快虚拟 DOM
最省心的优化

https://github.com/vuejs/vue

3. React

2020 年增长 19.8K

一个声明性，高效且灵活的 JavaScript 库，用于构建用户界面。

声明式

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。

以声明式编写 UI，可以让你的代码更加可靠，且方便调试。

组件化

创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。

组件逻辑使用 JavaScript 编写而非模板，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。

一次学习，随处编写

无论你现在正在使用什么技术栈，你都可以随时引入 React 来开发新特性，而不需要重写现有代码。

React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。

https://github.com/facebook/react

React 相关的项目可以看: 一个 React 技术揭秘的项目，自顶向下的 React 源码分析。

4. playwright

2020 年增长 19.7K

Node.js 库可通过单个 API 自动化 Chromium，Firefox 和 WebKit。

Playwright 由 Microsoft 创建，是一个开放源代码浏览器自动化框架，使 JavaScript 工程师可以在 Chromium，Webkit 和 Firefox 浏览器上测试其 Web 应用程序。

https://github.com/microsoft/playwright

5. vscode

2020 年增长 19.1K

Visual Studio Code 是一个运行于 OS X，Windows 和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台编辑器。

也是当今天前端最流行的编辑器！

https://github.com/microsoft/vscode

6. esbuild

2020 年增长 16.6K

它是一个「JavaScript」Bundler 打包和压缩工具，它可以将「JavaScript」和「TypeScript」代码打包分发在网页上运行。

esbuild 是一个用 Go 语言编写的用于打包，压缩 Javascript 代码的工具库。

它最突出的特点就是打包速度极快（extremely fast），下图是 esbuild 跟 webpack, rollup, Parcel 等打包工具打包效率的一个 benchmark:

https://github.com/evanw/esbuild

7. vue-element-admin

2020 年增长 16K

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。

https://github.com/PanJiaChen/vue-element-admin

8. edex-ui

2020 年增长 15.7K

一个跨平台，可定制的科幻小说终端模拟器，具有先进的监控和触摸屏支持。

它深受 DEX-UI 和 TRON Legacy 电影效果的启发，是一个类似于科幻电脑界面的全屏桌面应用程序。

作为从小就喜欢黑科技的猫哥来说，已经按耐不住要装 X 啦！

详情可以看看: 适用 Win、Mac、Linux，酷炫的极客界面 eDEX-UI

https://github.com/GitSquared/edex-ui

9. next.js

2020 年增长 15.5K

这是一个用于生产环境的 React 框架。

https://github.com/vercel/next.js

10. tailwindcss

2020 年增长 15.5K

一个实用程序优先的 CSS 框架，用于快速构建自定义用户界面。

无需离开您的 HTML，即可快速建立现代网站。

https://github.com/tailwindlabs/tailwindcss

最后

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

初级前端与高级前端之间，很大原因就是投入学习前端的时间、经验的差别，其实就是信息差。

如果有一个地方能又快又好的获得这些优质的前端信息，那么将会大大缩短从初级到高级的时间。

基于这个初衷，于是就诞生了 前端GitHub，能帮助前端开发人员节省时间的公众号！

前端GitHub 专注于挖掘 GitHub 上优秀的前端开源项目，并以专题的形式推荐，每专题大概 10 个好项目，每周会有一到三篇精华文章推送。

不知不觉，原创文章已经写到第 35 期了呢，几乎每一篇都是猫哥精心挑选的优质开源项目，推送的每一篇文章里面的项目几乎都是对前端开发很有帮助的。

往期精文请看下方宝藏仓库，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

公众号：前端GitHub，专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称，致力于打造最优质的前端开源项目资源库。

微信搜 “前端GitHub”，回复 “电子书” 即可以获得上面 160 本前端精华书籍哦，猫哥 WX：CB834301747 。

往期精文

原创不易，老铁们给个赞吧

frontendgithub / frontendgithub Goto Github PK

frontendgithub's Introduction

简介

目录

文章与项目

软技能

前端趋势榜

Vue3

Vue 源码解密

React 源码解密

面试专题

简历专题

JavaScript

Flutter

TypeScript

前端必备在线工具

计算机内功秘籍

在线的代码转图片

管理后台 admin

逼格满满的 PPT

数据结构与算法

CSS 学习专题

Node.js

小程序

前端监控

接口文档管理

前端的代码规范

程序员必备仓库

拓展程序员技术与视野的国外网站

设计规范

可视化

代码生成器

下载全网视频

酷炫的极客界面

抠图神器

在线绘图

颜色搭配

开发**

技术社区

博客团队

GitHub 统计

前端大会

打包工具

代码托管平台

调试抓包

开发工具

录屏工具

买房实用指南

优质的前端博客

图标

色彩

插画

图片

设计工具

WEB 技术清单

学习资源

推荐项目

服务器

撩我

frontendgithub's People

Contributors

Stargazers

Watchers

Forkers

frontendgithub's Issues

Web 趋势榜：上周最热门的 10 大 Web 项目 - 210410

1. react-spring

2. WMR

3. dumi

4. RESTful API Node Server Boilerplate

5. React Email Editor

6. Pro Git, Second Edition

7. Authelia

8. Frontend Development Bookmarks

9. kolorist

10. Autarky

最后

前端月趋势榜：6 月最流行、最热门的 20 个前端开源项目 - 2106

1. nocodb

2. prisma