这些神仙代码库值得每一个前端开发者收藏

小咪咪 2023-02-14 13:13 29阅读 0赞

![format_png][]

![format_png 1][]

原文地址: https://dev.to/sayanide/best-github-repos-for-web-developers-9id

经常会有小伙伴让推荐好的代码库，最近看到了这篇文章，都是非常棒的代码库，供大家学习参考。

![format_png 2][]

手头有大量的资源????总是一件很棒的事。

作为一个码农，我们需要专注于功能和最佳实践，而不是一遍遍地编写样板代码。消除无用功，投入时间学习使用正确的工具或者懂得使用有用的资源可以极大的帮助我们节省时间。

通过本篇文章，我们将会了解一些能够极大的帮助我们提升 `WEB` 开发技能的 `GitHub` 库，这些库也会帮助你编写更好的代码。

### Node.js Best Practices ###

![format_png 3][]

这个库是一个很棒的地方，可以让你随时了解 `Node` 世界，并在使用时了解最佳实践。拥有 `40k` Star 和 133 位贡献者，这个库几乎每天都有更新。

该库对排名较高 `Node.js` 的最佳实践进行了总结和整理，包括 `Node.js + Docker` 最佳实践。目前拥有超过80多种最佳实践，风格指南和结构建议等。

> 一些常见的最佳做法包括：

*  更好地组织项目
 *  错误处理实践
 *  代码风格实践
 *  测试和整体质量实践
 *  进行生产实践等等

仓库地址: https://github.com/goldbergyoni/nodebestpractices

### HTML5 Boilerplate ###

![format_png 4][]

`HTML5 Boilerplate` 是一个专业的前端模板，用于构建快速、健壮和适应性强的 `Web` 应用程序或者网站。

该项目是多年迭代开发和社区知识的产物。它没有强加特定的开发理念或者框架，所以你可按照自己的方式自由地构建代码。

> 包括像如下的预定义功能：

*  Normalize.css
 *  jQuery with CDN
 *  Apache Server Configs
 *  有用的 `CSS` 助手类
 *  默认样式，性能优化等

根据你想要用的内容以及使用方法，将所需文件复制粘贴到你的工程目录里即可。这样就为你提供了一个配置好的模板，从而加快了开发速度。

仓库地址: https://github.com/h5bp/html5-boilerplate

### RealWorld    ###

![format_png 5][]

掌握一个新框架的核心概念和意识形态并不是一件令人沮丧的事情。

如果你没有正确理解这个概念的话，你需要阅读文档，运行示例代码，拆解示例应用程序并将其重新组合在一起，在本地安装 `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

### You Don't Know JS Yet    ###

![format_png 6][]

这是一系列深入研究 `JavaScript` 语言核心机制的书籍。

所有的书籍均为免费，你可以随时在线阅读。

> 作者建议阅读的顺序为：

*  Get Started
 *  Scope & Closures
 *  Objects & Classes (还未开始)
 *  Types & Grammar (还未开始)
 *  Sync & Async (还未开始)
 *  ES.Next & Beyond (还未开始)

仓库地址: https://github.com/getify/You-Dont-Know-JS

### Airbnb JavaScript Guide    ###

![format_png 7][]

这是 `Airbnb` 提供的非常精确和专业的风格指南。

本指南将通过深入基础知识和代码片段来帮助你由深入浅地理解 `JavaScript`。

> 本指南涉及的一些热门内容如下：

*  箭头函数
 *  变量提升
 *  解构
 *  注释
 *  性能
 *  测试

仓库地址: https://github.com/airbnb/javascript

### Storybook    ###

![format_png 8][]

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

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

它附带了一个 `CLI` 和一些代码示例，供你熟悉 `Storybook`.

仓库地址: https://github.com/storybookjs/storybook

### Front-End-Checklist    ###

![format_png 9][]

`Front-End-Checklist` 是一个详尽的列表，列出了在网站或者 `HTML` 页面投入使用前所需要具备或者测试的所有元素。

它是一个基于前端 `Web` 开发的仓库，更关注性能、安全性和 `SEO` 等。

`Front-End-Checklist` 中的所有项目对于大多数工程都是必须的，但其中有些元素可以省略。

> 包括：

*  ????文档或者文章
 *  ????在线工具/测试工具
 *  ????媒体或者视频内容

仓库地址: https://github.com/thedaviddias/Front-End-Checklist

### 灵感和资源    ###

这篇文章的令该来源于 Tech Sapien 和他所有令人惊叹的工作。库中的图片???? 也是取自同一处。

### 总结 ###

上面提到的所有的库并不是唯一可用的资源，除此之外我敢肯定还有大量的令人惊叹的项目。这些是其中一些我觉得很有用的资源，同时我自己也经常沉浸其中。

不要忘了给这些库点 `Star`????。以感谢所有出色的贡献者，感谢他们为我们创造了如此有用的资源✌????

> 最后：

如果有翻译的不对的地方，请多多指正，希望有所帮助。

◆ ◆ ◆  ◆ ◆

### 学习交流 ###

*  关注公众号【前端宇宙】,每日获取好文推荐
 *  添加微信,入群交流

![format_png 10][]

“在看和转发”就是最大的支持

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6L3lxVkFxb1p2RGliRzMxMzBZMmhBWGt0R0hMVWg5MjhSSm0zbXlycWtoZUxPWUZ2SElqRXJETVdsM1F3bWU4b09DdnZTWm1pYUM2eWtyUmdWTFRIOUF6Z0EvNjQw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9ubmljN0NrajlOcTEwcVlSSEFMMHRFT2F6dmlhMkppYUFiaWJRQkx4VmliRENMSWJIMG9SMUNEV0NyNFZmTTlUVUU2UlFTcFZ1V2liekhBWUlIV1lUc2NaRnNkZy82NDA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9ubmljN0NrajlOcTEwcVlSSEFMMHRFT2F6dmlhMkppYUFiaWJsNUlESEdQbWEwbFg1alRFVzdQRlR6QTV3VXNJaWJ3VGljdmdrbDRCa0dLRWtXSUdQdVdjY2dUdy82NDA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9ubmljN0NrajlOcTEwcVlSSEFMMHRFT2F6dmlhMkppYUFiaWJDVjlzUXk2eGJVREI2OHlNc3l1YWFpYjJxSEt5TmQ0OEo4TmhmTHdPTjRUWjh5QXhTQWxndVhnLzY0MA?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9ubmljN0NrajlOcTEwcVlSSEFMMHRFT2F6dmlhMkppYUFiaWJmSnFRR0ZkcUNKdzBZekxTaWI0NWFhYU1IeURBNmd6c2VJbGljaWMyVFV0NkRpY3hid1RMWnpQaWJQZy82NDA?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9ubmljN0NrajlOcTEwcVlSSEFMMHRFT2F6dmlhMkppYUFiaWJxWFFaa2VRcWRJeXR2bGgwbG1yd3pDV2NMSGh1d2p3ZjR3UXc0TzNSYk5xZENETWZjOFdQVHcvNjQw?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9ubmljN0NrajlOcTEwcVlSSEFMMHRFT2F6dmlhMkppYUFiaWJzMGZrQVA4UkZ6bE1KZVBTcFhid0dEbmlhaWN1ZkhHZ3phZnIzSXA2d2ZhTDZMUzVpYW03MzdOeUEvNjQw?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9ubmljN0NrajlOcTEwcVlSSEFMMHRFT2F6dmlhMkppYUFiaWJLSGRtU3FzemZkVUt4Zmg4WmlhYVgyZTQ2UnU3cUZ2eW1lUTA3Zm5WWEpCUXJxTk5KOTJPMG1BLzY0MA?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9ubmljN0NrajlOcTEwcVlSSEFMMHRFT2F6dmlhMkppYUFiaWJ1cUJCMXRPQ2I5NnRFb1lOSDBGQWhEbGEzMEZXVnFTbjRXanlIMTF1aWJUdnV1cG96R2JHUEJBLzY0MA?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9ubmljN0NrajlOcTEwcVlSSEFMMHRFT2F6dmlhMkppYUFiaWJ2R01OdWhpYXdWSE9McmxCN2lhdVlZM1JjQnhSUzFWUDlYVDZsV3A1NVF4cnVwNXFocDNBWDdLdy82NDA?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9ubmljN0NrajlOcTJQT1hMSmJqc2dYcDJtQjRZTFNpYWR5cWlhM2liRmd4ajBsbHZNOWZ2WldyWUc5ejMwOUZkWEN5WTVIZzFveVZjcWtpY1Z6ZndtSVRHdGFnLzY0MA?x-oss-process=image/format,png