這些熱門GitHub代碼庫，每個前端開發者都應該收藏
經常會有小伙伴讓推薦好的代碼庫，最近看到了 sayanide 寫的文章，都是非常棒的代碼庫，供大家學習參考。
手頭有大量的資源📚總是一件很棒的事。
作為一個碼農，我們需要專注于功能和最佳實踐，而不是一遍遍地編寫樣板代碼。消除無用功，投入時間學習使用正確的工具或者懂得使用有用的資源可以極大的幫助我們節省時間。
通過本篇文章，我們將會了解一些能夠極大的幫助我們提升 WEB 開發技能的 GitHub 庫，這些庫也會幫助你編寫更好的代碼。
這個庫是一個很棒的地方，可以讓你隨時了解 Node 世界，并在使用時了解最佳實踐。擁有 40k Star 和 133 位貢獻者，這個庫幾乎每天都有更新。
該庫對排名較高 Node.js 的最佳實踐進行了總結和整理，包括 Node.js + Docker 最佳實踐。目前擁有超過80多種最佳實踐，風格指南和結構建議等。
一些常見的最佳做法包括：
- 更好地組織項目
- 錯誤處理實踐
- 代碼風格實踐
- 測試和整體質量實踐
- 進行生產實踐等等
倉庫地址:
https://github.com/goldbergyoni/nodebestpractices
HTML5 Boilerplate 是一個專業的前端模板，用于構建快速、健壯和適應性強的 Web 應用程序或者網站。
該項目是多年迭代開發和社區知識的產物。它沒有強加特定的開發理念或者框架，所以你可按照自己的方式自由地構建代碼。
包括像如下的預定義功能：
- Normalize.css
- jQuery with CDN
- Apache Server Configs
- 有用的 CSS 助手類
- 默認樣式，性能優化等
根據你想要用的內容以及使用方法，將所需文件復制粘貼到你的工程目錄里即可。這樣就為你提供了一個配置好的模板，從而加快了開發速度。
倉庫地址: https://github.com/h5bp/html5-boilerplate
掌握一個新框架的核心概念和意識形態并不是一件令人沮喪的事情。
如果你沒有正確理解這個概念的話，你需要閱讀文檔，運行示例代碼，拆解示例應用程序并將其重新組合在一起，在本地安裝 CLI 等等，它需要花費太多的經歷，令人沮喪。
RealWorld 允許你選擇任何前端（React,Angular2 等）和任何后端（Node , Django 等），并將它們集成在一起以查看應用程序的真實示例。
由于這些實現和技術棧相關，它們顯然不能混用，但它們仍然遵循相同的功能和UX規范。
一些常用集成實例：
- Angular + ngrx + nx
- ClojureScript + re-frame
- React / MobX
- Go + Gin
- NestJS + TypeORM/Prisma
你可以在倉庫中找到無窮無盡的示例。盡情去尋找吧！
倉庫地址: https://github.com/gothinkster/realworld
這是一系列深入研究 JavaScript 語言核心機制的書籍。
所有的書籍均為免費，你可以隨時在線閱讀。
作者建議閱讀的順序為：
- Get Started
- Scope & Closures
- Objects & Classes (還未開始)
- Types & Grammar (還未開始)
- Sync & Async (還未開始)
- ES.Next & Beyond (還未開始)
倉庫地址: https://github.com/getify/You-Dont-Know-JS
這是 Airbnb 提供的非常精確和專業的風格指南。
本指南將通過深入基礎知識和代碼片段來幫助你由深入淺地理解 JavaScript。
本指南涉及的一些熱門內容如下：
- 箭頭函數
- 變量提升
- 解構
- 注釋
- 性能
- 測試
倉庫地址: https://github.com/airbnb/javascript
Storybook 是 UI 組件的開發環境，它允許你瀏覽組件庫，查看每個組件的不同狀態，以及交互地開發和測試組件。
Storybook 在 app 之外運行，這允許你獨立開發 UI 組件，提高組件的重用性、測試性和開發速度。你可以快速構建，而不必擔心應用程序特定的依賴關系。
它附帶了一個 CLI 和一些代碼示例，供你熟悉 Storybook.
Front-End-Checklist 是一個詳盡的列表，列出了在網站或者 HTML 頁面投入使用前所需要具備或者測試的所有元素。
它是一個基于前端 Web 開發的倉庫，更關注性能、安全性和 SEO 等。
Front-End-Checklist 中的所有項目對于大多數工程都是必須的，但其中有些元素可以省略。
包括：
- 文檔或者文章
- 在線工具/測試工具
- 媒體或者視頻內容
倉庫地址: https://github.com/thedaviddias/Front-End-Checklist
靈感和資源
這篇文章的令該來源于 Tech Sapien 和他所有令人驚嘆的工作。庫中的圖片📷 也是取自同一處。
總結
上面提到的所有的庫并不是唯一可用的資源，除此之外我敢肯定還有大量的令人驚嘆的項目。這些是其中一些我覺得很有用的資源，同時我自己也經常沉浸其中。
不要忘了給這些庫點 Star。以感謝所有出色的貢獻者，感謝他們為我們創造了如此有用的資源。
