經(jīng)常會(huì)有小伙伴讓推薦好的代碼庫(kù)，最近看到了 sayanide 寫的文章，都是非常棒的代碼庫(kù)，供大家學(xué)習(xí)參考。

手頭有大量的資源📚總是一件很棒的事。

作為一個(gè)碼農(nóng)，我們需要專注于功能和最佳實(shí)踐，而不是一遍遍地編寫樣板代碼。消除無(wú)用功，投入時(shí)間學(xué)習(xí)使用正確的工具或者懂得使用有用的資源可以極大的幫助我們節(jié)省時(shí)間。

通過本篇文章，我們將會(huì)了解一些能夠極大的幫助我們提升 WEB 開發(fā)技能的 GitHub 庫(kù)，這些庫(kù)也會(huì)幫助你編寫更好的代碼。

這個(gè)庫(kù)是一個(gè)很棒的地方，可以讓你隨時(shí)了解 Node 世界，并在使用時(shí)了解最佳實(shí)踐。擁有 40k Star 和 133 位貢獻(xiàn)者，這個(gè)庫(kù)幾乎每天都有更新。

該庫(kù)對(duì)排名較高 Node.js 的最佳實(shí)踐進(jìn)行了總結(jié)和整理，包括 Node.js + Docker 最佳實(shí)踐。目前擁有超過80多種最佳實(shí)踐，風(fēng)格指南和結(jié)構(gòu)建議等。

一些常見的最佳做法包括：

•  更好地組織項(xiàng)目
•  錯(cuò)誤處理實(shí)踐
•  代碼風(fēng)格實(shí)踐
•  測(cè)試和整體質(zhì)量實(shí)踐
•  進(jìn)行生產(chǎn)實(shí)踐等等

倉(cāng)庫(kù)地址:

https://github.com/goldbergyoni/nodebestpractices

HTML5 Boilerplate 是一個(gè)專業(yè)的前端模板，用于構(gòu)建快速、健壯和適應(yīng)性強(qiáng)的 Web 應(yīng)用程序或者網(wǎng)站。

該項(xiàng)目是多年迭代開發(fā)和社區(qū)知識(shí)的產(chǎn)物。它沒有強(qiáng)加特定的開發(fā)理念或者框架，所以你可按照自己的方式自由地構(gòu)建代碼。

包括像如下的預(yù)定義功能：

•  Normalize.css
•  jQuery with CDN
•  Apache Server Configs
•  有用的 CSS 助手類
•  默認(rèn)樣式，性能優(yōu)化等

根據(jù)你想要用的內(nèi)容以及使用方法，將所需文件復(fù)制粘貼到你的工程目錄里即可。這樣就為你提供了一個(gè)配置好的模板，從而加快了開發(fā)速度。

倉(cāng)庫(kù)地址: https://github.com/h5bp/html5-boilerplate

掌握一個(gè)新框架的核心概念和意識(shí)形態(tài)并不是一件令人沮喪的事情。

如果你沒有正確理解這個(gè)概念的話，你需要閱讀文檔，運(yùn)行示例代碼，拆解示例應(yīng)用程序并將其重新組合在一起，在本地安裝 CLI 等等，它需要花費(fèi)太多的經(jīng)歷，令人沮喪。

RealWorld 允許你選擇任何前端（React,Angular2 等）和任何后端（Node , Django 等），并將它們集成在一起以查看應(yīng)用程序的真實(shí)示例。

由于這些實(shí)現(xiàn)和技術(shù)棧相關(guān)，它們顯然不能混用，但它們?nèi)匀蛔裱嗤墓δ芎蚒X規(guī)范。

一些常用集成實(shí)例：

•  Angular + ngrx + nx
•  ClojureScript + re-frame
•  React / MobX
•  Go + Gin
•  NestJS + TypeORM/Prisma

你可以在倉(cāng)庫(kù)中找到無(wú)窮無(wú)盡的示例。盡情去尋找吧！

倉(cāng)庫(kù)地址: https://github.com/gothinkster/realworld

這是一系列深入研究 JavaScript 語(yǔ)言核心機(jī)制的書籍。

所有的書籍均為免費(fèi)，你可以隨時(shí)在線閱讀。

作者建議閱讀的順序?yàn)椋?/p>

•  Get Started
•  Scope & Closures
•  Objects & Classes (還未開始)
•  Types & Grammar (還未開始)
•  Sync & Async (還未開始)
•  ES.Next & Beyond (還未開始)

倉(cāng)庫(kù)地址: https://github.com/getify/You-Dont-Know-JS

這是 Airbnb 提供的非常精確和專業(yè)的風(fēng)格指南。

本指南將通過深入基礎(chǔ)知識(shí)和代碼片段來(lái)幫助你由深入淺地理解 JavaScript。

本指南涉及的一些熱門內(nèi)容如下：

•  箭頭函數(shù)
•  變量提升
•  解構(gòu)
•  注釋
•  性能
•  測(cè)試

倉(cāng)庫(kù)地址: https://github.com/airbnb/javascript

Storybook 是 UI 組件的開發(fā)環(huán)境，它允許你瀏覽組件庫(kù)，查看每個(gè)組件的不同狀態(tài)，以及交互地開發(fā)和測(cè)試組件。

Storybook 在 app 之外運(yùn)行，這允許你獨(dú)立開發(fā) UI 組件，提高組件的重用性、測(cè)試性和開發(fā)速度。你可以快速構(gòu)建，而不必?fù)?dān)心應(yīng)用程序特定的依賴關(guān)系。

它附帶了一個(gè) CLI 和一些代碼示例，供你熟悉 Storybook.

倉(cāng)庫(kù)地址: s/storybook" _fcksavedurl="https://github.com/storybookjs/storybook">https://github.com/storybookjs/storybook

Front-End-Checklist 是一個(gè)詳盡的列表，列出了在網(wǎng)站或者 HTML 頁(yè)面投入使用前所需要具備或者測(cè)試的所有元素。

它是一個(gè)基于前端 Web 開發(fā)的倉(cāng)庫(kù)，更關(guān)注性能、安全性和 SEO 等。

Front-End-Checklist 中的所有項(xiàng)目對(duì)于大多數(shù)工程都是必須的，但其中有些元素可以省略。

包括：

•   文檔或者文章
•   在線工具/測(cè)試工具
•   媒體或者視頻內(nèi)容

倉(cāng)庫(kù)地址: https://github.com/thedaviddias/Front-End-Checklist

靈感和資源

這篇文章的令該來(lái)源于 Tech Sapien 和他所有令人驚嘆的工作。庫(kù)中的圖片📷 也是取自同一處。

總結(jié)

上面提到的所有的庫(kù)并不是唯一可用的資源，除此之外我敢肯定還有大量的令人驚嘆的項(xiàng)目。這些是其中一些我覺得很有用的資源，同時(shí)我自己也經(jīng)常沉浸其中。

不要忘了給這些庫(kù)點(diǎn) Star。以感謝所有出色的貢獻(xiàn)者，感謝他們?yōu)槲覀儎?chuàng)造了如此有用的資源。