2K Star！超過 50 個專題、450 個好項目，大半年來推薦過的重磅項目合集 👍

你們好，我是大家的 貓哥，仍是那個不喜歡吃魚、又不喜歡喵 的超級貓 ~

不知不覺，GitHub 上的倉庫 FrontEndGitHub 都已經更新並運營超過半年了呀, 前端GitHub 的定位是以下的：

專一於挖掘優秀的前端開源項目，抹平你的前端信息不對稱，涵蓋 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS 等。

雖然更新文章的頻率不高，平均一週一更，可是仍是一直在更新的，並且更新的文章內容仍是頗有質量的。

FrontEndGitHub 也收穫了 2K 的 Star！感謝各位大佬的確定與鼓勵。

這大半年來，貓哥已經推薦過超過 50 個專題， 450 個超級好的開源項目了，今天把往期推薦過的文章與項目作個合集吧，方便你們能快速得查閱到想要的項目。

平時如何發現好的開源項目，能夠看看這篇文章：GitHub 上能挖礦的神仙技巧 - 如何發現優秀開源項目

軟技能

• 自從掌握了Google和百度的 16 個高級搜索技巧，我再也沒有解決不了的 bug 了
• 恕我直言，你可能連 GitHub 搜索都不會用 - 如何精準搜索的神仙技巧
• 精彩待續。。。

項目	地址
GitHub 官方文檔：使用、搜索、管理開源項目	docs.github.com/cn

前端趨勢榜

• 影響了一代代前端人的 20 個里程碑式的頂級開源項目！
• 1534K Star！排名前十的 10 大前端頂級開源項目！
• 猛增 110K Star！年增加數最多的 10 大頂級前端學習資源項目！
• 前端最流行的 10 大頂級開源項目！猛增 174K Star！
• 前端月趨勢榜：5 月最熱門的 20 個前端開源項目 - 又增長了那麼多個好的開源項目！ - 2105
• 前端月趨勢榜：4 月最熱門的 20 個前端開源項目 - 又增長了那麼多個好的開源項目！- 2104
• Web 趨勢榜：上週最有意思、最熱門的 10 大 Web 項目 - 210625
• Web 趨勢榜：上週最熱門的 10 大 Web 項目 - 210410
• 前端趨勢榜：上週最熱門的 10 大前端項目 - 210327
• 精彩待續。。。

Vue3

• Vue3 的學習教程彙總、源碼解釋項目、支持的 UI 組件庫、優質實戰項目
• 精彩待續。。。

項目	地址
Vue3 中文文檔	vue3js.cn/docs/zh/
Vue3 設計理念	vue3js.cn/vue-composi…
Vue3 相關項目聚合網站	vue3js.cn/
Vue3 源碼	vue3js.cn/start/
Ant-design-vue	antdv.com/docs/vue/in…
Vant 3.0	vant-contrib.gitee.io/vant/v3/
Element-plus	element-plus.org/#/zh-CN
element 3	github.com/hug-sun/ele…
vue-vben-admin	github.com/anncwb/vue-…
vue-admin-beautiful	github.com/chuzhixin/v…
vue-cli	github.com/Wscats/vue-…
movie-trailer	github.com/lhz960904/m…
newbee-mall-vue3-app	github.com/newbee-ltd/…
vue3-jd-h5	github.com/GitHubGanKa…

Vue 源碼解密

• 推薦 7 個 Vue二、Vue3 源碼解密分析的開源項目 👍
• 精彩待續。。。

項目	地址
vue-analysis：Vue.js 源碼分析	github.com/ustbhuangyi…
vue-design：逐行級別的分析	hcysun.me/vue-design/…
vue-family-mindmap：用一張思惟導圖總結了 Vue、Vue-Router、Vuex 源碼與架構要點	github.com/biaochenxuy…
learnVue：Vue.js 源碼分析	github.com/answershuto…
vue：Vue 源碼逐行註釋分析	github.com/qq281113270…
vue2.0-source：Vue 源碼分析	github.com/liutao/vue2…
Vue3 源碼：Vue3 源碼系列	vue3js.cn/start/

React 源碼解密

• 推薦一個 React 技術揭祕的項目，自頂向下的 React 源碼分析
• 精彩待續。。。

項目	地址
just-react：嚴謹、易懂的 React 源碼分析教程	github.com/BetaSu/just…

面試專題

• 推薦這 10 個 GitHub 上超火的前端面試項目，打造本身的加薪寶庫！
• 精彩待續。。。

項目	地址
Front-end-Developer-Questions：前端面試題	h5bp.org/Front-end-D…
javascript-questions：JavaScript 進階問題列表	github.com/lydiahallie…
Daily-Question：天天一道大廠面經推送	github.com/shfshanyue/…
CS-Interview-Knowledge-Map：一線大廠面試題	github.com/InterviewMa…
Daily-Interview-Question：天天搞定一道前端大廠面試題	github.com/Advanced-Fr…
fe-interview：前端面試的一個複習彙總項目	lucifer.ren/fe-intervie…
fe-interview：前端面試專題	github.com/biaochenxuy…
fe-interview：前端知識題庫	github.com/haizlin/fe-…
node-interview：餓了麼大前端的面試	github.com/ElemeFE/nod…
Front-End-Interview-Notebook：前端複習筆記	github.com/CavsZhouyou…
FE-Interview：前端面試必備題庫	github.com/lgwebdream/…
web-interview：Vue 面試題庫	github.com/febobo/web-…

簡歷專題

• 10 個 GitHub 上最火的程序員簡歷項目，2021 金三銀四必備！
• 精彩待續。。。

項目	地址
ResumeSample：程序員簡歷模板系列	github.com/geekcompany…
Markdown-Resume：用 markdown 語法來寫的簡歷模版，很是簡結通用	github.com/CyC2018/Mar…
awesome-resume：程序員簡歷例句，程序員簡歷範例	github.com/resumejob/a…
DeerResume：好用的 MarkDown 在線簡歷工具，可在線預覽、編輯、設置訪問密碼和生成 PDF	github.com/geekcompany…
markdown-resume：在線簡歷排版工具，支持切換 4 種模版、自定義和導出功能	github.com/mdnice/mark…
best-resume-ever：快速生成漂亮簡歷的工具，它基於 Vue 和 LESS	github.com/salomonelli…
awesome-resume-for-chinese：適合中文的簡歷模板收集	github.com/dyweb/aweso…
resume：一份優雅簡約的簡歷	github.com/gwuhaolin/r…
biaochenxuying：很是自由的自定義的前端程序員模版	github.com/biaochenxuy…
github-readme-stats：在你的 README 中獲取動態生成的 GitHub 統計信息	github.com/anuraghazra…

JavaScript

• 12 個 GitHub 上超火的 JavaScript 奇技淫巧項目，找到寫 JavaScript 的靈感！
• 精彩待續。。。

項目	地址
30-seconds-of-code：簡短代碼段，常常會用到並且是很是經典的代碼	github.com/30-seconds/…
33-js-concepts：JavaScript開發者應懂的 33 個概念	github.com/leonardomso…
javascript-questions：JavaScript 進階問題列表	github.com/lydiahallie…
JavaScript 30：使用原生 JavaScript 在 30 天內完成 30 個項目	github.com/wesbos/Java…
Codewars：和 leetcode 有點相似，也是在平臺上和其餘人一塊兒完成真實的代碼挑戰，提高你的技術	www.codewars.com/
ES6 入門教程：開源的 JavaScript 語言教程，全面介紹 ECMAScript 6 新引入的語法特性	es6.ruanyifeng.com/
JavaScript 教程：全面介紹 JavaScript 核心語法，覆蓋了 ES5 和 DOM 規範的全部內容	wangdoc.com/javascript/
現代 JavaScript 教程：以最新的 JavaScript 標準爲基準。從基礎到高階的 JavaScript 相關知識	zh.javascript.info/
MDN：提供開放網絡(Open Web)技術有關的信息,包括用於網站和漸進式網絡應用的 HTML、CSS 和 API	developer.mozilla.org/zh-CN/
clean-code-javascript：優秀的 JS 代碼規範	github.com/ryanmcdermo…
TypeScript 入門教程：從 JavaScript 程序員的角度總結思考，按部就班的理解 TypeScript	ts.xcatliu.com
w3school：前端必須知道的 Web 技術教程平臺	www.w3school.com.cn/js/index.as…
three.js：JavaScript編輯3D模型，各類各樣炫酷的效果以及Documentation值得你去了解three.js	three.js](threejs.org/)

Flutter

• 推薦 4 個基於 Flutter 的重磅高仿開源項目
• 精彩待續。。。

網站	說明
dy_flutter	鬥魚 APP
flutter_tiktok	精仿抖音
flutter-osc	開源中國客戶端
FlutterDouBan	豆瓣客戶端

TypeScript

• 推薦 7 個學習 TypeScript 的寶庫，2021 是時候給本身加薪了！
• 精彩待續。。。

網站	說明
TypeScript	TypeScript 官網，TS 擴展了 JavaScript ，爲它添加了類型支持
typescript-tutorial	TypeScript 入門教程，按部就班的理解 TypeScript
TypeScript	TypeScript 使用手冊
typescript-book-chinese	深刻理解 TypeScript
clean-code-typescript	適用於TypeScript的簡潔代碼概念
TypeScript入門	TypeScript 入門的視頻教程
typescript-tutorial	TypeScript 速成教程（2小時速成）

前端必備在線工具

• 白嫖 11 個超火的前端必備在線工具，終於有時間上班摸魚了
• 推薦 12 個學習前端必備的神仙級工具類項目與網站
• 精彩待續。。。

項目	地址
LightHouse：一個開源的自動化工具，用於改進網絡應用的質量	github.com/GoogleChrom…
Can I Use：查詢 CSS、Js 在箇中流行瀏覽器鐘的特性和兼容性的網站	caniuse.com/
ios font：IOS 字體支持查詢和 IOS 系統自帶字體查詢	iosfonts.com/
web 安全色：儘可能讓用戶看到色彩相同的網頁，請儘可能使用 216 色的 web 安全色	www.bootcss.com/p/websafeco…
TinyPNG：PNG/JPG 圖片在線壓縮利器，智能 PNG 和 JPEG 圖片壓縮	tinypng.com/
二維碼生成器：草料二維碼生成器	cli.im/
Shape Divider：定製各類形狀的網站分區 SVG 的工具	www.shapedivider.app/
json 格式化： json 在線解析的網站	json.cn/
sojson：前端WEB工具大合集	www.sojson.com/
站長工具：站長的必備工具	tool.chinaz.com/
codelf：變量命名智能推薦（支持中文）	unbug.github.io/codelf/
印象筆記：Web 前端開發人員提供優質中文文檔	www.docschina.org
regexr：正則表達式驗證匹配	regexr.com/
any-rule：正則表達式庫，很是全，使用起來很方便	github.com/any86/any-r…
bootcdn：國內的CDN庫，速度快	www.bootcdn.cn 或 cdn.baomitu.com
jsdelivr：國外的 cdn 庫，支持 github，npm，WordPress	www.jsdelivr.com
gitignore：根據選擇會去生成 .gitignore 文件	www.gitignore.io/
codesandbox：在線編輯代碼	codesandbox.io/
typora：實用的 Markdown 寫做工具，所見即所得	www.typora.io
mdnice：使 markdown 語法更加美觀，寫做工具(強烈推薦)	mdnice.com
toptal：多張圖片合成雪碧圖，並生成對應 css	www.toptal.com/developers/…
tool：衆多工具集合，包括時間戳轉換，進制轉換等	tool.lu/

計算機內功祕籍

• 推薦 7 個 Github 上近 200k Star 的計算機學習資源，練好前端內功的祕籍！
• Ｂ站收藏 12.5w+！GitHub 標星 6.6k+！這門神課拯救了我薄弱的計算機基礎
• 精彩待續。。。

項目	地址
Crash-Course-Computer-Science-Chinese：計算機科學速成課	github.com/1c7/Crash-C…
computer-science：通往計算機科學免費自學教育之路！	github.com/ossu/comput…
CS-Notes：技術面試必備基礎知識、Leetcode、計算機操做系統、計算機網絡、系統設計、Java、Python、C++	github.com/CyC2018/CS-…
REKCARC-TSC-UHT：清華大學計算機系課程攻略	github.com/PKUanonym/R…
zju-icicles：浙江大學課程攻略共享計劃	github.com/QSCTech/zju…
TeachYourselfCS-CN：僅僅依靠本身，你就能夠得到世界一流水平的教育	github.com/keithnull/T…
CS-Xmind-Note：計算機專業課（408）思惟導圖和筆記	github.com/SSHeRun/CS-…
awesome-books：160+ 本開源技術類精華電子書，包括 前端、後端、數據結構與算法、計算機基礎、設計模式、數據庫等書籍	github.com/biaochenxuy…

在線的代碼轉圖片

項目	地址
Carbon：在線的代碼轉圖片工具	carbon.now.sh/
glorious.codes：在線的代碼轉圖片工具	glorious.codes/demo
codezen：在線的代碼轉圖片工具	codezen.rishimohan.me/
codeimg：在線的代碼轉圖片工具	codeimg.io/

管理後臺 admin

• 10 個 GitHub 上超火和超好看的管理後臺模版，後臺管理項目有着落了單
• 精彩待續。。。

項目	地址
vue-Element-Admin：後臺前端解決方案，它基於 vue 和 element-ui 實現	github.com/PanJiaChen/…
iview-admin：基於 Vue.js，搭配使用 iView UI 組件庫造成的一套後臺集成解決方案	github.com/iview/iview…
vue-admin-template：極簡的 vue admin 管理後臺	github.com/PanJiaChen/…
ant-design-pro：Ant Design Pro 是基於 Ant Design 和 umi 的封裝的一整套企業級中後臺前端/設計解決方案	github.com/ant-design/…
ngx-admin：基於Angular 10+ 的可定製管理儀表板模，還擁有 6 個驚人的視覺主題	github.com/akveo/ngx-a…
vue-admin-beautiful：基於 vue+element-ui 的絕佳的中後臺前端開發管理框架	github.com/chuzhixin/v…
vuestic-admin：免費與美妙 Vue.js 管理模板，包括 38 以上個定製用戶界面組件	github.com/epicmaxco/v…
antd-admin：一套優秀的中後臺前端解決方案	github.com/zuiidea/ant…
eladmin：SpringBoot、Jpa、Security、Redis、Vue 等先後端前沿技術開發	github.com/elunez/elad…
AdminLTE：是一個徹底響應的管理模板。基於 Bootstrap 4.5 框架以及 JS / jQuery 插件	github.com/almasaeed20…

逼格滿滿的 PPT

• GitHub 標星 54K + 2K！這纔是程序員寫逼格滿滿的 PPT 的正確姿式！
• 精彩待續。。。

項目	地址
reveal-md：使用 Markdown 來作 PPT 展現的開源項目	github.com/webpro/reve…
reveal.js：使用 html、markdown 寫靜態的文本，建立功能齊全且美觀的 PPT	github.com/hakimel/rev…

數據結構與算法

• 7 個GitHub上最火的、最值得前端學習的數據結構與算法項目！沒有之一
• 精彩待續。。。

項目	地址
javascript-algorithms：含了多種基於 JavaScript 的算法與數據結構	github.com/trekhleb/ja…
algorithm-visualizer：算法可視化工具是一個交互式的在線平臺，能夠從代碼中可視化算法	github.com/algorithm-v…
algo：數據結構和算法必知必會的 50 個代碼實現	github.com/wangzheng08…
awesome-algorithms：包含不一樣著名計算機科學算法的 javascript 實現	github.com/mgechev/jav…
JS-Sorting-Algorithm：關於排序算法的 GitBook 在線書籍 《十大經典排序算法》	github.com/hustcc/JS-S…
JavaScript 數據結構與算法之美：包含了 十大經典排序算法 的思想、代碼實現、一些例子、複雜度分析、動畫	github.com/biaochenxuy…
daily-algorithms：算法，每日練習的一個項目	github.com/barretlee/d…
JavaScript 更多 ...	github.com/search?l=Ja…

CSS 學習專題

• [10 個 GitHub 上超火的 CSS 技巧項目，找到寫 CSS 的靈感！]
• 精彩待續。。。

項目	地址
You-need-to-know-css： CSS 的各類效果實現，尤爲是動畫效果	lhammer.cn/You-need-to…
CSS-Inspiration：找到使用或者是學習 CSS 的靈感	github.com/chokcoco/CS…
css_tricks： 總結了一些經常使用的 CSS 的新屬性和一點奇技淫巧	github.com/QiShaoXuan/…
animista： 各類 CSS 實現的效果，還有代碼演示，方便直接複製代碼	animista.net/
spinkit： 聚集了實現各類加載效果的 CSS 代碼片斷	tobiasahlin.com/spinkit/
十天精通 CSS3： CSS3 教程	www.imooc.com/learn/33
Animate： 有趣的，跨瀏覽器的 css3 動畫庫	animate.style/
sass：Sass 是一種 CSS 的預編譯語言，Sass 爲 CSS 賦予了更強大的功能	sass.bootcss.com/documentati…
less：Less 是一門 CSS 預處理語言,它擴展了 CSS 語言,增長了變量、Mixin、函數等特性	less.bootcss.com/
cssdeck：在線 CSS 前端代碼 Demo 樣式效果	cssdeck.com/
codepen：前端炫酷樣式效果，各類 loading 效果，在線編程，Vue 組件也特別多	codepen.io/
cubic-bezier：CSS3 貝塞爾曲線在線調試工具	cubic-bezier.com/
Snapsvg：SVG 動效的 JS 庫,各類炫酷的效果。	snapsvg.io/
Cool Backgrounds：超酷的背景圖片，漸變的色彩的圖片背景都有，看起來很酷。	coolbackgrounds.io/

Node.js

• 推薦 9 個 Node.js 學習、進階、debugging 分析、實戰 的重磅開源項目 👍
• 精彩待續。。。

項目	地址
node：最佳的學習資源確定是 最權威的 Node.js 的官方項目啦。	github.com/nodejs/node
node-api-cn：Node.js API 中文文檔項目	github.com/nodejscn/no…
node-in-debugging： Node.js 調試指南的項目	github.com/nswbmw/node…
nodebestpractices：對Node.js最佳實踐中排名最高的內容的總結和分享	github.com/goldbergyon…
deep-into-node：深刻理解 Node.js：核心思想與源碼分析	github.com/yjhjstz/dee…
Nodejs-Roadmap：Node.js 服務端所涉及的技術棧	github.com/qufei1993/N…
NeteaseCloudMusicApi：網易雲音樂 Node.js API service	github.com/Binaryify/N…
node-elm：這是基於 node.js + Mongodb 構建的後臺系統	github.com/bailicangdu…
awesome-nodejs：Node.js 資源合集	github.com/sindresorhu…

小程序

項目	地址
mpvue：基於 Vue.js 的小程序開發框架，從底層支持 Vue.js 語法和構建工具體系	github.com/Meituan-Dia…
wepy：小程序組件化開發框架	github.com/Tencent/wep…
westore：微信小程序解決方案 - 1KB javascript 覆蓋狀態管理、跨頁通信、插件開發和雲數據庫開發	github.com/Tencent/wes…
ColorUI：鮮亮的高飽和色彩，專一視覺的小程序組件庫	github.com/weilanwl/Co…
Gitter：採用 Taro 框架 + Taro UI 進行開發的 demo ， 多是目前顏值最高的 GitHub 微信小程序客戶端	github.com/huangjianke…
Taro：多端統一開發框架，支持用 React 的開發方式編寫一次代碼	github.com/NervJS/taro
Painter：小程序生成圖片庫，輕鬆經過 json 方式繪製一張能夠發到朋友圈的圖片	github.com/Kujiale-Mob…
kbone：Web 與小程序同構解決方案，微信官方	github.com/wechat-mini…

前端監控

• 推薦 GitHub 2K+ 星：前端監控工具 - webfunny 項目！
• 精彩待續。。。

網站	說明
前端監控工具 - webfunny 項目	一款輕量級前端異常監控和前端性能監控系統

前端的代碼規範

• 恕我直言，這幾個大廠的前端代碼規範你可能還不會 - 能精進前端的代碼規範
• 精彩待續。。。

項目	地址
騰訊	tgideas.qq.com/doc/index.h…
京東	guide.aotu.io/index.html
airbnb	github.com/airbnb/java…
百度	github.com/ecomfe/spec…
JavaScript Standard Style	github.com/standard/st…
Vue	cn.vuejs.org/v2/style-gu…
ES6	es6.ruanyifeng.com/#docs/style
Bootstrap	codeguide.bootcss.com/
ESLint	eslint.org/
Prettier	prettier.io/

程序員必備倉庫

• 推薦程序員必備的 10 大 GitHub 倉庫，前端佔了 7 個！
• 精彩待續。。。

項目	地址
build-your-own-x：構建本身想作的應用	github.com/danistefano…
javascript-algorithms：多種基於 JavaScript 的算法與數據結構	github.com/trekhleb/ja…
computer-science：爲全部想要學習計算機科學的人提供了大量的免費學習資源	github.com/ossu/comput…
30-seconds-of-code：超過 100 個代碼段，涵蓋了 JavaScript 中的各類內容	github.com/30-seconds/…
nodebestpractices：Node.js 最佳實踐中排名最高的內容的總結和分享	github.com/goldbergyon…
realworld：如何使用特定的語言 / 技術開發適當的應用	github.com/gothinkster…
free-programming-books：免費提供編程書籍	github.com/EbookFounda…
system-design-primer：學習如何設計大型系統，爲系統設計面試作準備	github.com/donnemartin…
awesome-python：精選的 Python 框架，庫，軟件和資源的精選清單	github.com/vinta/aweso…
awesome-machine-learning：精選的很棒的機器學習框架，庫和軟件的列表	github.com/josephmisit…

國外網站

• 漲姿式了！22 個拓展程序員技術與視野的國外網站！
• 精彩待續。。。

項目	地址
GitHub：開源項目倉庫	github.com
GitLab：倉庫管理系統的開源項目	about.gitlab.com/
dev.to：技術博客社區	dev.to/
dreamincode：小衆的技術博客	www.dreamincode.net
bytes：和 dreamcode 相似，簡約但不簡單	bytes.com
hongkiat：技術、設計領域相關的技術文章	www.hongkiat.com/blog/design…
IBM Developer：一線工程師，技術性很強的文章	developer.ibm.com
StackOverFlow：專爲程序員提供的國際性問題解答交流社區	stackoverflow.com
Reddit：很是個性的社區，你能夠討論編程問題，還能夠學習學英語	www.reddit.com
daniweb：質量比較高的問答平臺	www.daniweb.com
LeetCode：國內的 leetcode 同樣都是刷題用的	leetcode.com
LintCode：LintCode 領釦上有數量超過 1000 道的算法題目和人工智能題目	www.lintcode.com
Codeforces：全球最著名的在線評測系統之一	codeforces.com/
Topcoder：世界上規模最大的編程網站	www.topcoder.com
tutorialspoint：在線學習的網站，而且免費，裏面有各類技術、各個知識點的講解和demo	www.tutorialspoint.com/index.htm
codecademy：簡化編程學習的過程	www.codecademy.com
Livecoding.tv：爲全球程序員提供一個實時高效的互動平臺	www.livecoding.tv/accounts/lo…
Dzone：技術涵蓋比較全面的網站	dzone.com
simpleprogrammer：純技術文章很少，指導建議性的文章比較多	simpleprogrammer.com/
SitePoint：學習 Web 設計和開發 HTML5，CSS3，JavaScript，PHP，移動應用	www.sitepoint.com/web
YouTobe：國內的嗶哩嗶哩同樣，各種視頻匯聚於此，固然各國編程大神也在這啦	www.youtube.com/

設計規範

項目	地址
iPhone各設備屏幕尺寸	www.paintcodeapp.com/news/ultima…
移動屏幕尺寸設計規範	screensiz.es/phone
微信官方小程序UI樣式庫	weui.io/
各大尺寸設備響應式屏幕效果顯示	www.responsinator.com/

可視化

• 推薦 brick design全場景可視化拖拽低代碼前端框架
• 精彩待續。。。

項目	地址
brick-design：全場景可視化拖拽低代碼前端框架	github.com/brick-desig…

代碼生成器

• GitHub 2W 星：一鍵生成先後端代碼
• 精彩待續。。。

項目	地址
jeecg-boot：一鍵生成先後端代碼	github.com/zhangdaisco…

下載全網視頻

• GitHub 5W 星：一行命令下載全網視頻的兩個開源項目
• 精彩待續。。。

項目	地址
you-get：一行命令下載全網視頻	github.com/soimort/you…
annie：一行命令下載全網視頻	github.com/iawia002/an…

酷炫的極客界面

• 被驚豔到了！適用 Win、Mac、Linux，酷炫的極客界面 eDEX-UI
• 程序員最想要的高逼格，都藏在這個開源項目裏了！
• 精彩待續。。。

項目	地址
eDEX-UI：酷炫的極客界面	github.com/GitSquared/…
lively：拉高程序員電腦桌面逼格	screensiz.es/phone

摳圖神器

項目	地址
removebg	www.remove.bg/zh
在線 ps-uupoop	www.uupoop.com/

在線繪圖

項目	地址
ProcessOn	www.processon.com/
draw.io	www.draw.io/
excalidraw	excalidraw.com/

顏色搭配

項目	地址
中科院色譜的中國傳統色	zhongguose.com/#yuhong
在線快速配色生成工具	coolors.co/
天天更新一組簡潔舒服的配色方案	colorhunt.co/
MaterialDesign強大的在線配色	www.materialpalette.com/blue/purple
經過網址獲取分析網站配色	webcolourdata.com/
炫酷多邊形背景色塊生成	trianglify.io/
色彩搜索引擎	picular.co/
流行的網格漸變背景免費下載	webgradients.com/
上傳並匹配提取圖片風格的顏色	www.colorfavs.com/

開發思想

• Github標星1.6W+，程序員不得不知的「潛規則」又火了，早知道就不會禿頭了
• 精彩待續。。。

項目	地址
hacker-laws：最多見的定律、原則等	github.com/nusr/hacker…

技術社區

項目	地址
GitHub：高質量的內容創做和分享平臺	github.com/
stackoverflow：一個回答技術問題的網站	stackoverflow.com/
掘金：目前來看，國內的不少優質前端文章，都在掘金上	juejin.cn/
博客園：一個很純粹的技術博客平臺	www.cnblogs.com/
知乎：不少作技術的同窗也開始玩知乎了，阿里的很多前端大牛在知乎上就很是活躍	www.zhihu.com/
segmentfault：比較低調的技術博客平臺	segmentfault.com/
CSDN：廣告太多，但奈何你這麼老牌	www.csdn.net/
v2ex：一個關於分享和探索的地方	www.v2ex.com/
Node.js專業中文社區	www.jstips.co/
JS技巧：天天推出一個JS技巧的網站	cnodejs.org/
W3cplus：是一個致力於推廣國內前端行業的技術博客	www.w3cplus.com/
印記中文：是最權威是技術中文文檔社區	docschina.org/

博客團隊

項目	地址
騰訊AlloyTeam	www.alloyteam.com/
騰訊社交用戶體驗ISUX	isux.tencent.com/
淘系前端團隊	fed.taobao.org/
阿里巴巴國際UED	www.aliued.com/
京東 凹凸實驗室	aotu.io/
餓了麼前端	zhuanlan.zhihu.com/ElemeFE
百度前端研發部FEX	fex.baidu.com/
360 奇舞團	75team.com/
美團技術團隊	tech.meituan.com/
夜盡天明	github.com/biaochenxuy…

GitHub 統計

項目	地址
GitHub 全球排名：這個排名很權威	gitstar-ranking.com/
GitHub 中文排行榜、高分優秀中文項目	github.com/kon9chunkit…

前端大會

項目	地址
Vue.js 開發者大會：Vue.js 開發者大會中國	fequan.com/
中國 JS 開發者大會：一場專一於 JavaScript 和 Node.js 技術的國際性大會	jsconfchina.com/
中國 CSS 開發者大會：提升 css 開發姿式的大會	css.w3ctech.com/
D2 前端技術論壇：阿里巴巴舉辦，分享技術的樂趣，探討行業的發展	d2forum.alibaba-inc.com/

打包工具

項目	地址
NPM	www.npmjs.com/
Yarn	yarnpkg.com/zh-Hans/
Webpack	webpack.js.org/
Gulp	www.gulpjs.com.cn/
Babel	babeljs.io/
ESLint：可組裝的 JavaScript 和 JSX 檢查工具	cn.eslint.org/
PostCSS：用 JavaScript 工具和插件轉換 CSS 代碼的工具	www.postcss.com.cn/
rollup: 打包 npm 庫	github.com/rollup/roll…
parcel: 和 webpack 相似的打包工具	github.com/parcel-bund…
systemjs：針對一些特殊場景會比較有用，好比雲 ide，支付寶小程序 IDE 等	github.com/systemjs/sy…
microbundle：基於 rollup，簡化配置	github.com/developit/m…
bili：基於 rollup，同上	github.com/egoist/bili
vue-cli：vue 命令行工具	github.com/vuejs/vue-c…
create-react-app：react 官方腳手架	github.com/facebook/cr…
prepack：經過預先執行的方式優化打包結果	github.com/facebook/pr…
swc：基於 rust 的語法轉換器，babel 的競爭者	github.com/swc-project…
nathan/pax：基於 rust，聽說是這個星球最快的 JavaScript 打包工具	github.com/nathan/pax
pikapkg/web： 瀏覽器裏跑 npm 依賴，面向現代瀏覽器	github.com/pikapkg/web
lebab/lebab：把 es5 代碼轉成 es6，反向 babel	github.com/lebab/lebab
snowpack：現代Web的更快打包工具系統	github.com/pikapkg/sno…

代碼託管平臺

項目	地址
coding：代碼託管平臺	coding.net/
碼雲：代碼託管平臺	gitee.com/
github：代碼託管平臺	github.com/
SVN：代碼託管平臺	svnbucket.com/?ADTAG=bdss…
SVN：代碼託管中心	www.svnchina.com/
git：官網	git-scm.com/
阿里雲	www.aliyun.com
騰訊雲	cloud.tencent.com/

調試抓包

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

開發工具

• 推薦 12 個提高程序員軟技能與效率的必備工具，愛了愛了 👍
• 精彩待續。。。

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

錄屏工具

• 推薦 GitHub 上很火的錄屏工具，秒殺 33 種同行工具
• 精彩待續。。。

項目	地址
screenity	github.com/alyssaxuu/s…

買房實用指南

• 推薦 2 個 Github 上超火的程序員買房必備實用指南！
• 精彩待續。。。

項目	地址
hangzhou_house_knowledge: 杭州	github.com/houshanren/…
hangzhou_house_knowledge：上海	github.com/ayuer/shang…

優質的前端博客

公衆號	做者	微信	地址	簡介
全棧修煉	夜盡天明	CB834301747	github.com/biaochenxuy…	分享大前端開發相關的技術文章，熱點資源，全棧程序員的成長之路
前端下午茶	SHERlocked93	qianyu443033099	github.com/SHERlocked9…	分享前端相關的技術博客、精選文章，期待在這裏和你們一塊兒進步！
前端UpUp	每天	DayDay2021	github.com/daydaylee12…	leetcode算法相關的，從0到1刷leetcode。
前端從進階到入院	ssh	sshsunlight	github.com/sl1673495/b…	📖全網 100w+ 閱讀量的進階前端技術博客倉庫，Vue 源碼解析，React 深度實踐，TypeScript 進階藝術，工程化，性能優化實踐……
iCSS前端趣聞	Coco	coco1s	github.com/chokcoco/iC…	9300+ Stars 的 CSS 倉庫，各類 CSS 奇技淫巧，在這裏，都有。
若川視野	若川	ruochuan12	github.com/lxchuan12/b…	學習源碼總體架構系列多篇，前端面試高頻源碼
前端佈道師	蘇南	su-south	github.com/meibin08/co…	一個用漫畫演繹程序員平常軼事、分享前端前沿技術、大廠面經與乾貨的公衆號，號主是個愛畫畫的前端切圖崽，熱愛代碼的同時，也但願用漫畫的形式讓更多瞭解程序員。
秋風的筆記	秋風	qiufengblue	github.com/hua1995116/…	分享工程化、開源知識、有趣的前端知識。
前端食堂	童歐巴	hungryturbo	github.com/Geekhyt/fro…	你的前端食堂，吃好每一頓飯🍥
深圳灣碼農	Rock	ruanxiongbiao	github.com/qappleh/Int…	分享BAT大廠面試題，天天攻破一道題，帶你從0到1系統構建web全棧完整的知識體系！
進擊的大前端	蔣鵬飛	ffx313	github.com/dennis-jian…	成體系的前端進階知識
小鹿動畫學編程	小鹿	lxq17853556107	github.com/luxiangqian…	全Github惟一動畫倉庫，用動畫的形式把前端技術講的淋漓盡致！也包括本身整理的前端面試和進階文章分享，歡迎關注哦！
編程如畫	大鵬	aaron875499765	github.com/guanpengchn…	全網最特別的畫解算法，mdnice做者官方博客
前端思惟框架	ViktorHub	viktorhub	github.com/ViktorWong/…	建設Web全棧數字圖書館，揭祕Web全棧架構師，打造我的核心競爭力。

圖標

項目	地址
Font Awesome：網站開發最流行的圖標集	www.fontawesome.com.cn/
Feather：簡潔美觀的開源圖標	feathericons.com/
Ionicons：精心繪製的開源圖標	ionicons.com/
Simple Icons：常見品牌的 SVG 圖標：輕快、精美的符號圖標，包括常見操做和事項	simpleicons.org/
Material Design Icons	material.io/resources/i…
Tabler Icons：681 枚可定製的開源 SVG 圖標	tablericons.com/

色彩

項目	地址
Material Design Colors	www.materialui.co/colors
Flat UI Colors：14 組配色、280 種顏色	flatuicolors.com/
Color Hunt：分享色彩搭配的自由開放平臺，包括成千上萬人工選取的配色，能夠從中獲取配色的靈感	colorhunt.co/
Color Space：配色方案、CSS 顏色漸變生成工具	mycolor.space/
uiGradients：美觀的顏色漸變	www.uigradients.com/
Colors and Fonts：色彩和字體工具	colorsandfonts.com/
Coolors：配色方案生成工具	coolors.co/

插畫

項目	地址
Undraw：持續更新的精美的 SVG 插畫集	undraw.co/illustratio…
manypixels：免費插畫集	gallery.manypixels.co/
IRA Design：經過調配漸變色、搭配手繪組件定製插畫	iradesign.io/gallery/ill…
Free Illustrations by Lukasz Adam：免費 SVG 插畫	lukaszadam.com/illustratio…
Blobmaker：在線 SVG 形狀生成器	www.blobmaker.app/
Get Waves：在線 SVG 波形生成器	getwaves.io/

圖片

項目	地址
Unsplash：可供無償使用的圖片	unsplash.com/
Pexels：精美的免費圖片和視頻	www.pexels.com/
Burst：免費高分辨率圖片，可用於網站和商業用途	burst.shopify.com/
ISO Republic：使用 CC0 許可的免費高分辨率圖片和視頻	isorepublic.com/
Pixabay：使人驚歎的免費（公共領域）圖片和視頻站點	pixabay.com/
StockSnap：精美的免費圖片，一樣使用 CC0 許可	stocksnap.io/
Photopea：在線圖片編輯工具，支持大量高級功能	www.photopea.com/
Online Image Compressor：在線圖片壓縮工具，一次能夠壓縮多達 20 張圖片	imagecompressor.com/
Bulk Resize Photos：最快的在線圖片縮放工具（圖片縮放和壓縮在本地完成，無需上傳到服務器	bulkresizephotos.com/en

設計工具

項目	地址
墨刀：原型設計工具	modao.cc/
藍湖：一款產品文檔和設計圖的在線協做平臺	lanhuapp.com
PxCook（像素大廚）：高效易用的自動標註工具	www.fancynode.com.cn/pxcook

WEB 技術清單

• 2020-WEB開發路線圖，和即將到來的 2021-WEB技術清單
• 精彩待續。。。

項目	地址
developer-roadmap：開發人員路線圖，按部就班的指南和路徑，以學習不一樣的工具或技術	github.com/kamranahmed…

前端

後端

運維

最後

好了，貓哥這大半年來推薦過的好開源項目就是上面那些了。

時間會讓一件件平凡的事情變得不平凡。

不知不覺，原創文章已經寫到第 47 期了呢，幾乎每一篇都是貓哥精心挑選的優質開源項目，推送的每一篇文章裏面的項目幾乎都是對前端開發頗有幫助的。

原創不易，更新並運營大半年更是不易，花費了不少時間、精力去篩選和寫推薦理由，大佬們看完文章後，順手來個一鍵三連吧，就當給貓哥一點鼓勵吧。

往期精文請看下方寶藏倉庫，請慎入！

github.com/FrontEndGit…

微信搜索 前端GitHub，回覆 電子書 就送你 1000+ 本精華編程電子書；回覆 1024 送你一套完整的 前端 視頻教程。

更新並運營大半年不易，日後還會不斷更新，感謝各位讀者那麼久的陪伴，曾經的點贊與分享，對貓哥的文章的確定與鼓勵，謝謝。