GitHub网站上包含了目前所有与web开发相关的内容,提供一站式服务。这里有框架,有演示,包罗万象,可能没有什么是你找不到的。但这也是问题所在——其中有很多有趣的东西,但也许你永远不会知道,原因就在于GitHub上可用的存储库实在太多。
所以,小芯决定在此介绍一些GitHub上比较流行的存储库,其中每个存储库都至少拥有30000颗星星。
1、 Realworld
首先要推荐的存储库是Realworld,其创造者称之为“演示应用程序之母”。这个说法自然很大胆,但却不夸张。
Realworld是Medium.com的一个典型翻版(没错,可能就是你正在浏览的这个平台!)。不仅如此,Realworld允许开发者在不同的前端和后端实现之间进行选择,甚至可以将两者结合。
Vue.js+Node/Express或React/Redux+Rust,都能搞定!
通过Realworld,开发者会发现,同一个社交软件却可以用任何不同的流行语言或框架进行建构,这不神奇吗?
2、You Don’t Know JS Yet
这一存储库实际上是一套十分流行的系列丛书,作者为Kyle Simpson,以笔名Getify广为人知。这套书深入探讨了JavaScript的机制,涵盖了以下内容:
- 开始着手
- 作用域和闭包
- 对象和类
- 类型和语法
- 同步和异步
- ES.Next及其他
这套书的优点在于对读者完全开放!这绝对是关于JavaScript最好的系列丛书之一,它也帮助笔者理解了JavaScript的真正含义。即使你认为自己很懂JavaScript,也应该好好读这套书,你一定会得到意外的收获!
3、 Airbnb JavaScript Style Guide
学习JavaScript最合理的途径
Airbnb JavaScript Style Guide是最常见也比较流行的风格指南之一,可以帮助开发者编写更好的JS代码,在团队合作中或者在与ESLint结合时特别实用。
下面是来自文件中的一个示例,使用了const而非var:
// bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2;
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
4、 Storybook
Storybook 是一个用于UI组件的开发环境。它允许开发者浏览组件库,查看每个组件的不同状态,并交互式地开发和测试组件,同时支持React、Vue、Angular、React Native、Ember、Web等众多组件!
Storybook的运行独立于应用程序。这就允许开发者单独开发UI组件,从而提高组件的重用性、可测试性和开发速度。开发者可以快速构建,而不必担心与特定应用程序之间的依赖关系。
5、HTML5 Boilerplate
HTML5Boilerplate是一个专业的前端模板,也是网络上比较流行的前端模板之一。它可以帮助开发者建立快速、耐用、适应性强的网站或应用程序,微软、NASA和耐克等公司都在使用。
以下是HTML5 Boilerplate的一些重要特征:
- 配置HTML5。
- 设计时考虑到渐进增强。
- 包括:Normalize.css、jQuery和Modernizer。
- 通过配置提高网站的性能和安全性。
- 占位符CSS媒体查询。
- 默认打印样式,性能优化。
- 谷歌通用分析工具平台的优化版本。
6、Node.js Best Practices
这一存储库广泛整合了有关Node.js开发的各种优秀实践,它目前由80多个优秀实践、样式指南和架构技巧组成。
其中包含以下内容:
- 项目结构实践
- 错误处理实践
- 代码风格实践
- 测试和总体质量实践
- 投入生产实践
- 安全性实践
- 效果实践
这无疑是一个优秀的存储库,包含了众多信息。如果想尝试Node.js开发,这一存储库会是不错的选择!
7、Front-End Checklist
在启动web应用程序之前,你是否问过自己其中需要包含哪些东西?需要进行哪些测试?Front-End Checklist中就涵盖了这些!
以下所列对大多数项目来说都是必须的,其架构方式如下:
- 标题
- HTML
- 网络字体
- CSS
- 图像
- JavaScript
- 安全
- 性能
- 可实现性
- SEO
- 翻译
以下是来自苹果网站应用MetaData的示例:
<!-- Apple Touch Icon (atleast 200x200px) -->
<link rel="apple-touch-icon" href="/custom-icon.png">
<!-- To run web application in full-screen -->
<meta name="apple-mobile-web-app-capable"content="yes">
<!-- Status Bar Style (see Supported Meta Tags below for available values)-->
<!-- Has no effect unless you have the previous meta tag -->
<meta name="apple-mobile-web-app-status-bar-style"content="black">
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
8、NW.js
NW.js是一个基于Chromium和node.js的应用程序运行时。在NW.js上,开发者可以用HTML和JavaScript编写本地应用程序。它还允许开发者直接从DOM调用Node.js模块,形成一种编写本地应用程序的新方法,对任何Web技术都适用。
以下为它的主要功能:
- 使用现代HTML5、CSS3、JS和WebGL编写应用程序。
- 完全支持Node.js API及其所有第三方模块。
- 性能良好:Node和WebKit运行在同一线程中。
- 易于打包和分发应用程序。
- 可在Linux、Mac OS X和Windows上使用。
9、fullPage.js
Alvaro Trigo提供的fullPage.js是一个简单易用的存储库,它允许开发者创建SPA(单页应用程序)和横向滑块,可用于Vue、React和Angular,对移动设备完全响应。
开发者可在开源项目中自由使用这一存储库,但如果想在商业环境中使用,则必须购买许可证。
这一存储库非常酷炫,值得一看!
希望大家能够在自己的项目中或在其他地方使用以上存储库。