MFS

MFS 项目主要是用来做书签整理的 其中部分项目是有基础的实例的会在URL后面做相应的备注。项目涵盖了CSS、JS、HTML、VUE、React、React-Native、Webpack、等流行的框架以及一些非常有特色的库、收集整理了某个领域的先关文章。(不是越多越好，而是越适合自己越好)

• [MFS](#mfshttpsgithubcomlixia9mfs)
  • 前端的范畴
  • 前端教程网站
  • 开发规范
  • VUE
  • React
  • React_Native
  • Nodejs Server
  • 设计模式
  • 经常浏览的网站
  • 前端自动化测试
  • UI
  • Http
  • 前端性能优化
  • CSS3 动画 和其他动画
  • Nginx
  • 构建打包
  • 小程序
  • 你可能不需要jQuery
  • TypeScript
  • 游戏开发
  • 图形UI
  • 技术周刊
  • 技术博客
  • JS技巧
  • 面试题
  • Author

前端的范畴

前端开发者手册
前端大杂烩
developer-roadmap

前端教程网站

w3cplus melonteam
w3ctech
你学的不仅仅是技术，还可能是梦想
efe
qqfe
web前端开发
v2ex
爱思

开发规范

w3cschool前端开发规范

VUE

vue
vuecli
vueloader
vuerouter
vuex
nuxtjs
element
v-charts
Vue.js 组件编码规范
vue-apollo

React

reactjs
react学习需要准备什么技能
react中文
redux中文
element-react
ant
react-day-picker,时间组件比较重要，这个单拿出来

React_Native

reactnative
reactnavigation->导航组件
nativebase->非常好的UI组件
react-native-swiper
React Native应用部署、热更新-CodePush
ui-toolkit
ui-teaset
react-native-material

Nodejs Server

nestjs
github-nestjs
eggjs
egg_mysql_eg
sailsjs
thinkjs

设计模式

design-patterns
设计模式1
设计模式2

经常浏览的网站

前端基础--推荐
css学习的
凹凸实验室
各种漂亮的特效

前端自动化测试

karma
jestjs
vue-test-utils
Puppeteer
vue单元测试

UI

21个vueui库
bulma
手绘风格的HTML
muse-ui
onsen
h-ui
mint-ui
nowUI
layui

Http

大型网站的 HTTPS 实践
http协议缓存机制
HTTP缓存详解

前端性能优化

网站性能优化实战——从12.67s到1.06s的故事

CSS3 动画 和其他动画

animejs
mojs
driven-animation
加载动画
转场动画

Nginx

nginx
nginxCN
nginx跨域

构建打包

webpack
poi
gruntjs
glup
parceljs
rollup

小程序

mpvue
wepy

你可能不需要jQuery

你可能不需要jQuery

TypeScript

TypeScript
TS 报告

游戏开发

threejs
createjs
layabox
白鹭
cocos2d

图形UI

花瓣
isux
tgideas
牛大拿

技术周刊

前端精读周刊
奇舞周刊--推荐
百度FEX
javascriptweekly

技术博客

cssforest
小胡子哥
吕小鸣前端博客
阿城的日志

JS技巧

JavaScript专题系列20篇
最全正则
JavaScript 的常见注意点
28 个 JavaScript 编程黑科技
史上最全JS验证

面试题

37个JavaScript基本面试问题和解答
JavaScript深入之闭包 2018阿里巴巴前端面试总结(题目+答案)
每个 JavaScript 工程师都应当知道的 10 个面试题
JS三座大山 原型 闭包 异步
面试的信心来源于过硬的基础
你可以写一个vue的双向数据绑定吗？
前端面试合集1
前端面试合集2

Author

lixiaolong: github

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

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

简介

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

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

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

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

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

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

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

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

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

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

欢迎关注公众号：前端GitHub，每周会有一到三篇的文章推送，后台回复 “电子书”，获取 160+ 本前端精华电子书哦。

文章

| 软技能

• 恕我直言，你可能连 GitHub 搜索都不会用 - 如何精准搜索的神仙技巧
• 精彩待续。。。

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

---

| 面试专题

• 推荐这 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

---

| 前端必备在线工具

• 白嫖 11 个超火的前端必备在线工具，终于有时间上班摸鱼了
• 精彩待续。。。

项目	地址
LightHouse：一个开源的自动化工具，用于改进网络应用的质量	https://github.com/GoogleChrome/lighthouse
Can I Use：查询 CSS、Js 在个中流行浏览器钟的特性和兼容性的网站	https://caniuse.com/
Carbon：在线的代码转图片工具	https://carbon.now.sh/
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/

---

| 管理后台 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

---

| WEB 技术清单

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

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

---

| 数据结构与算法

• 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 学习专题

• [10 个 GitHub 上超火的 CSS 技巧项目，找到写 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/
stylus：富有表现力、动态、健壮的 CSS	https://stylus-lang.com/

---

| 前端的代码规范

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

项目	地址
腾讯	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/

---

| 开发思想

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

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

---

| JavaScript

项目	地址
JavaScript 教程	https://wangdoc.com/javascript/
ES6 入门教程	https://es6.ruanyifeng.com/
JavaScript 30：使用原生 JavaScript 在 30 天内完成 30 个项目	https://javascript30.com/
Codewars：和其他人一起完成真实的代码挑战，提升你的技术	https://www.codewars.com/
JavaScript 教程：现代 JavaScript 教程	https://zh.javascript.info/
TypeScript 教程	https://github.com/xcatliu/typescript-tutorial
TypeScript 入门教程	https://ts.xcatliu.com/
Node.js学习	https://blog.poetries.top/node-learning-notes/

---

| 技术社区

项目	地址
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/
淘宝FED 淘宝前端团队	http://taobaofed.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/

| 调试抓包

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

| 开发工具

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

| 图标

项目	地址
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：681 枚可定制的开源 SVG 图标	https://tablericons.com/

| 色彩

项目	地址
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

| 学习资源

• 1. 160+ 本技术类常用精华电子书开源了，包括 前端、后端、数据结构与算法、计算机基础、设计模式、数据库等书籍
• 2. 极客时间上的《TypeScript 开发实战》课程资源，包含课件、思维导图、课程源代码
• 3. 视频资料分享 - Vue、React、Node、MongoDB 全栈、打造商城系统、实战项目汇总

撩我

大家可以向我推荐好的开源项目哦！

欢迎关注公众号：前端GitHub，每周会有一到三篇的文章推送，后台回复 “电子书”，获取 160+ 本前端精华电子书哦。

微信：CB834301747