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;
- 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">
- 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, 对移动设备完全响应.
开发者可在开源项目中自由使用这一存储库, 但如果想在商业环境中使用, 则必须购买许可证.
这一存储库非常酷炫, 值得一看!
希望大家能够在自己的项目中或在其他地方使用以上存储库.
来源: http://www.tuicool.com/articles/QruiYjf