《Trending Projects》以每周简讯形式提供，请在www.iainfreestone.com上注册，以确保您不会错过任何一期。
开源 Web 应用程序可在您构建自己的 SaaS 产品时节省数周的工作时间。
异步实验室/ SaaS这款开源 Web 应用可帮助您在构建自己的 SaaS 产品时节省大量时间。样板文件包含许多基本的 SaaS 功能（请参阅下方的功能），让您可以专注于打造差异化的产品功能。
如果您想了解如何从头开始构建这个项目，请查看我们的书：https://builderbook.org/book
开源项目位于saas文件夹中。如果您购买了我们的书，本书各章节的代码库都位于该book文件夹中。
查看借助此开源应用构建的项目。欢迎通过创建拉取请求 (Pull Request) 来添加您自己的项目。
使用 React 实现美观且易于访问的列表拖放功能
Atlassian / React-beautiful-dnd
我们创建了一个免费课程egghead.io react-beautiful-dnd帮助您尽快开始。
拖放式网站构建器 JavaScript 库。编辑器默认自带 Bootstrap 4 和 Widgets 组件，并可添加任何类型的组件和输入框进行扩展。
对于使用 VvvebJs 的全功能 CMS，请查看Vvveb CMS
使用 jQuery 和 Bootstrap 4 构建。
使用Startbootstrap 登录页面作为演示页面和 Bootstrap 4 组件。
默认情况下，编辑器附带 Bootstrap 4 和 Widgets 组件，并且可以使用任何类型的组件和输入进行扩展。
<!-- jquery-->
< script src =" js/jquery.min.js " > </ script >
< script src =" js/jquery.hotkeys.js " > </ script >
<!-- 引导程序-->…
一个更简单的静态网站生成器。Jekyll 的替代品。用 JavaScript 编写。将包含各种类型的模板目录转换为 HTML。
一个更简单的静态网站生成器。Jekyll 的替代品。用 JavaScript 编写。将包含各种类型的模板目录转换为 HTML。
适用于 HTML、Markdown、Liquid、Nunjucks、Handlebars、Mustache、EJS、Haml、Pug 和 JavaScript 模板文字。
npm install @11ty/eleventy --save-dev
阅读我们的入门指南。
npm run test
BetterScroll 是一款针对移动端（PC 端已支持）滚动问题而设计的插件。其核心灵感来源于 iscroll 的实现，因此 BetterScroll 的 API 基本兼容 iscroll。此外，BetterScroll 还基于 iscroll 扩展了一些功能并进行了性能优化。
ustbhuangyi / better-scroll
注意：
1.x未维护。请尽快迁移您的版本
npm install better-scroll -S #安装 2.x，包含完整功能插件。
npm install @better-scroll/core #仅安装 CoreScroll
从“better-scroll”导入BetterScroll
让 bs = new BetterScroll ( '.wrapper' , {
可移动: true ,
缩放: true
} )
从'@better-scroll/core'导入BScroll
让 bs = new BScroll ( '.wrapper' , { } )
BetterScroll 具有全功能插件。
< script src = " https://unpkg.com/better-scroll@latest/dist/better-scroll.js " > </script>
<!-- 最小化 -->
< script src =" https://unpkg.com/better-scroll@latest/dist/better-scroll.min.js " > </ script >
让 包装器 = 文档. getElementById ( “包装器” )
让 bs = BetterScroll . createBScroll (包装器， { } )
仅限 CoreScroll
<脚本 src =“ https://unpkg.com/@better-scroll/core@latest/dist/core.js ” > </脚本>
<!-- 最小化 -->
< script src =" https://unpkg.com/@better-scroll/core@latest/dist/core.min.js " > </ script >
让…
使用 HTML5 和 JavaScript 重新实现 Winamp 2.9。
captbaritone / webamp
使用 HTML5和JavaScript 重新实现 Winamp 2.9，并提供完整皮肤支持，如TechCrunch 、Motherboard、Gizmodo、Hacker News（1、2、3、4 ）和其他地方所见。
查看此Twitter 帖子，查看图文并茂的功能列表。适用于 Edge、Firefox、Safari 和 Chrome 的现代版本。不支持IE 。
以下是将 Webamp 添加到页面的最简单的示例：
< div id = " app " > </ div >
< script src = " https://unpkg.com/webamp " > </ script >
< script >
const app = document . getElementById ( "app" )
const webamp = new Webamp ( ) ;
webamp . renderWhenReady ( app ) ;
</ script >
有关更多示例，包括如何添加音频文件，请查看examples/目录和API 文档。
高度可定制且功能多样的 GraphQL 客户端
FormidableLabs / urql
@urql/exchange-graphcacheurqlurql是一个 GraphQL 客户端，它为多个框架提供了一组辅助函数。它高度可定制且功能多样，因此您可以从第一个 GraphQL 项目入门，一直到构建复杂的应用程序并尝试使用 GraphQL 客户端。
虽然 GraphQL 是一种优雅的协议和模式语言，但如今的客户端库通常占用大量的 API。我们的目标是创建更轻量级的库。
yarn add urql graphql
#或者
npm install --save urql graphql
该文档包含您需要了解的有关urql...的所有信息。
Reactjs-popup 是一个简单的反应弹出组件，可帮助您为下一个 React App 创建简单和复杂的模态框、工具提示和菜单。
yjose / reactjs-popup
Reactjs-popup是一个简单的反应弹出组件，可帮助您为下一个 React App 创建简单和复杂的模态框、工具提示和菜单。
您应该考虑使用 reactjs-popup，原因如下：
这是一个简单的演示，用于演示如何使用创建模态框、工具提示和菜单reactjs-popup。
此软件包在 NPM 仓库中以 reactjs-popup 的形式提供。它可以与所有流行的打包工具兼容。
npm 安装 reactjs-popup --save
使用纱线
学习使用 Docker 轻松构建分布式应用程序并将其部署到云中
Spectre.css 是一个轻量级、响应迅速且现代的 CSS 框架。
picturepan2 /幽灵
Spectre.css 是一个轻量级、响应迅速且现代的 CSS 框架。
Spectre 是一个基于多年大型 Web 服务项目 CSS 开发经验的副项目。Spectre 仅包含现代基础样式、响应式布局系统、CSS 组件和实用程序，您可以使用 Sass/Scss 编译器根据项目需求进行修改。
Spectre.css 完全免费使用。如果您喜欢它，请考虑通过 Paypal或Patreon 进行捐赠，以支持其进一步开发。
有 5 种方法可以在项目中使用 Spectre CSS 框架。您可以手动安装，也可以使用 NPM、Yarn 和 Bower。
下载已编译并压缩的Spectre CSS 文件。并将其spectre.css包含在/docs/dist您的网站或 Web 应用程序的 <head> 部分中。
<link rel="stylesheet" href="spectre.min.css">
《Trending Projects》以每周简讯形式提供，请在www.iainfreestone.com上注册，以确保您不会错过任何一期。
如果您喜欢这篇文章，您可以在 Twitter 上关注我，我会定期发布与 HTML、CSS 和 JavaScript 相关的简短技巧。
鏂囩珷鏉ユ簮锛�https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-11th-september-2020-42fd
