《热门项目》以每周新闻简报的形式提供，请访问www.iainfreestone.com注册，以确保您不会错过任何一期。
一系列库和工具，可帮助您构建自适应、易于访问且强大的用户体验。
Adobe / React Spectrum一系列库和工具，可帮助您构建自适应、易于访问且强大的用户体验。
这是 Adobe 设计系统 Spectrum 的 React 实现。Spectrum 为所有 Adobe 应用程序提供自适应、易用且一致的用户体验。
一个包含未样式化的 React 组件和钩子的库，可帮助您为您的应用程序或设计系统构建易于访问的高质量 UI 组件。
一个 React Hooks 库，为您的设计系统提供跨平台状态管理。
一系列与框架无关的 Web 国际化库。
2020年成为Web开发人员的路线图
kamranahmedse /开发者路线图
面向开发者的社区驱动型路线图、文章和资源
路线图现在是交互式的，您可以点击节点阅读更多有关主题的信息。
以下是现有路线图列表，更多路线图正在积极制定中。
不妨看看入门页面，它或许能帮助你找到方向。
Foam 是一个受 Roam Research 启发而开发的个人知识管理和共享系统，基于 Visual Studio Code 和 GitHub 构建。
👀这是一个正在快速开发的早期项目。想了解最新进展，请加入Foam 社区 Discord！💬
Foam是一个受Roam Research启发而开发的个人知识管理和共享系统，基于Visual Studio Code和GitHub构建。
您可以使用Foam来组织您的研究、保存可重新查找的笔记、撰写长篇内容，并且（可选）将其发布到网络上。
Foam是免费的开源软件，并且具有极强的可扩展性，能够完美契合您的个人工作流程。您拥有使用 Foam 创建的信息的所有权，并且可以自由地与任何人分享和协作。
使用命令以图表形式查看您的笔记是如何相互关联的Foam: Show Graph。
Foam 可以帮助你建立笔记和占位符之间的联系。
Foam 会更新指向已重命名文件的链接，以确保您的笔记保持一致。
OpenAPI/Swagger 生成的 API 参考文档
Redoc 是一个开源工具，用于从 OpenAPI（以前称为 Swagger）定义生成文档。
Redoc 默认提供三面板响应式布局：
如果您想查看 Redoc 如何渲染您的 OpenAPI 定义，您可以在https://redocly.github.io/redoc/在线尝试。
默认情况下会显示 Swagger Petstore API 的一个版本。要使用您自己的 OpenAPI 定义进行测试，请输入您的定义 URL 并选择“试用”。
x-tagGroups规范扩展create-react-app一个基于 Web 的 JavaScript 电子表格
myliang / x-spreadsheet
一个基于 Web 的 JavaScript 电子表格
<link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet@1.1.5/dist/xspreadsheet.css">
<script src="https://unpkg.com/x-data-spreadsheet@1.1.5/dist/xspreadsheet.js"></script>
<script>
x_spreadsheet('#xspreadsheet');
</script>
npm install x-data-spreadsheet
<div id="x-spreadsheet-demo"></div>
import Spreadsheet from "x-data-spreadsheet";
// If you need to override the default options, you can set the override
// const options = {};
// new Spreadsheet('#x-spreadsheet-demo', options);
const s = new Spreadsheet("#x-spreadsheet-demo")
.loadData({}) // load data
.change(data => {
// save data to db
});
// data validation
s.validate()
// default options
{
mode: 'edit', // edit | read
showToolbar: true,
showGrid: true,
showContextmenu: true,
view: {…
一个基于NodeJS构建的现代、轻量级且功能强大的wiki应用程序
Rocket 是一个基于 Rust 的异步 Web 框架，专注于可用性、安全性、可扩展性和速度。
Rocket 是一个基于 Rust 的异步 Web 框架，专注于可用性、安全性、可扩展性和速度。
#[macro_use] extern crate rocket;
#[get("/<name>/<age>")]
fn hello(name: &str, age: u8) -> String {
format!("Hello, {} year old named {}!", age, name)
}
#[launch]
fn rocket() -> _ {
rocket::build().mount("/hello", routes![hello])
}
localhost:8000/hello/John/58例如，访问该页面会触发hello路由，并将字符串Hello, 58 year old named John!发送到浏览器。如果<age>传入的字符串无法解析为字符串u8，则路由不会被调用，从而导致 404 错误。
Rocket 的相关资料非常详尽：
Fastify 是一个专注于以最小的开销和强大的插件架构提供最佳开发者体验的 Web 框架。它借鉴了 Hapi 和 Express 的设计理念，据我们所知，它是目前速度最快的 Web 框架之一。
高效的服务器意味着更低的基础设施成本、更高的负载响应速度和更佳的用户体验。如何在确保处理尽可能多的请求、同时又不牺牲安全验证和便捷开发的前提下，高效地管理服务器资源？
隆重推出 Fastify。Fastify 是一个专注于以最小的开销和强大的插件架构提供最佳开发者体验的 Web 框架。它借鉴了 Hapi 和 Express 的理念，据我们所知，它是目前速度最快的 Web 框架之一。
该main分支指的是 Fastifyv5版本，该版本尚未发布/LTS版本。请查看该4.x分支v4。
创建一个文件夹，并将其设置为当前工作目录：
mkdir my-app
cd my-app
产生…
Handsontable 是一个基于 JavaScript/HTML5 的数据网格组件，具有类似电子表格的外观和体验。
它提供便捷的数据绑定、数据验证、筛选、排序和 CRUD 操作。
Handsontable 是一个 JavaScript 组件，它将数据网格功能与类似电子表格的用户体验相结合。
它提供数据绑定、数据验证、筛选、排序和 CRUD 操作。
Handsontable最受欢迎的功能：
✓ 多列排序
✓ 非连续选择
✓ 数据筛选
✓ 导出到文件
✓ 数据验证
✓ 条件格式
✓ 合并单元格
✓ 冻结行/列
✓ 移动行/列
✓ 调整行/列大小
✓ 隐藏行/列
✓ 上下文菜单
✓ 注释
从npm、Yarn或NuGet获取 Handsontable 。
npm install handsontable
import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" />
<…
只需加水即可实现的 CSS 动画
animate-css / animate.css
使用 npm 安装：
npm install animate.css --save
使用 yarn 安装：
yarn add animate.css
您可以在网站上找到 Animate.css 的文档。
Animate.css 支持prefers-reduced-motion媒体查询，因此对动态效果敏感的用户可以选择关闭动画。在支持的平台（目前涵盖所有主流浏览器和操作系统）上，用户可以在操作系统设置中选择“减少动态效果”，系统会自动关闭 CSS 过渡效果，无需任何其他操作。
Animate.css 采用希波克拉底许可证授权。
本项目及其所有参与者均受《贡献者公约行为准则》约束。参与本项目即表示您同意遵守此准则……
《热门项目》以每周新闻简报的形式提供，请访问www.iainfreestone.com注册，以确保您不会错过任何一期。
如果你喜欢这篇文章，可以关注我的推特账号，我会定期发布与HTML、CSS和JavaScript相关的实用技巧。
文章来源：https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-24th-july-2020-pd5
