🚀2021年12月10日 GitHub 上面向 Web 开发人员的十大热门项目 Turborepo Statsig 的开源状态页面 超棒的软件架构 REACT COOL IMG 克利普斯 在线演示 支持 简易 Git 安装 系统依赖关系 用法 戒指 这是什么？ 《热门项目》以每周新闻简报的形式发布，请在Stargazing.dev 注册， 以确保您不会错过任何一期。
1. Turborepo 适用于 JavaScript 和 TypeScript 代码库的高性能构建系统
构建系统针对 JavaScript 和 TypeScript 进行了优化，使用 Rust 编写。
2. Statsig 的开源状态页面 一个基于 GitHub Pages 和 Actions 的简单、零依赖、纯 js/html 状态页面。
一个基于 GitHub Pages 和 Actions 的简单、零依赖、纯 js/html 状态页面。
Statsig 的开源状态页面 我们尝试了各种状态页面，并出于兴趣爱好，开发了这个功能，旨在让状态页面尽可能简单易用。
演示
安装说明
Fork 模板仓库 。 更新内容 urls.cfg，添加您的网址。
key1=https://example.com
key2=https://statsig.com
Enter fullscreen mode
Exit fullscreen mode
更新 index.html并更改标题。
< title > My Status Page</ title >
< h1 > Services Status</ h1 >
Enter fullscreen mode
Exit fullscreen mode
为您的代码仓库设置 GitHub Pages。
它是如何运作的？ 本项目使用 GitHub Actions 每小时唤醒并运行一个 shell 脚本（ health-check.sh）。该脚本会处理 curl配置中的每个 URL，并将运行结果追加到日志文件中，然后提交到代码仓库。之后，该日志会动态地从代码仓库中提取 index.html并以易于理解的方式显示。您也可以从自己的基础设施运行该脚本……
3. 出色的软件架构 精选了一系列优秀的文章、视频和其他资源，供您学习和实践软件架构、模式和原则。
🚀 精选一系列精彩的文章、视频和其他资源，供您学习和实践软件架构、模式和原则。
4. React Cool 图片 React 组件让您像专业人士一样处理图像用户体验和性能！
😎 🏞 React <Img /> 组件让您像专业人士一样处理图像用户体验和性能！
5. 克利普斯 Klipse 是一个 JavaScript 插件，用于在技术博客中嵌入交互式代码片段。
Klipse 是一个 JavaScript 插件，用于在技术博客中嵌入交互式代码片段。
克利普斯 Klipse 是一个 JavaScript 插件，用于在技术博客中嵌入交互式代码片段。请访问 https://blog.klipse.tech/查看示例。
从技术上讲，Klipse 是一小段 JavaScript 代码，用于在浏览器中执行代码片段，并且可以插入到任何网页中。
如果您喜欢这些内容，请考虑在Patreon 上进行（小额捐赠） 。
插件 klipse 插件是一个 JavaScript标签（详见 下文 ），它可以将 html 页面的静态代码片段转换为实时交互式代码片段：
实时 ：代码在您的浏览器中执行。 交互式 ：您可以修改代码，代码会在您输入时实时执行。
代码执行是在浏览器中完成的：完全不需要服务器参与！
在线演示 使用klipse插件，代码会在您输入时实时执行……
这里有一个 将 Klipse 嵌入网页的 实时演示。
JavaScript 红宝石
PHP Clojure
支持 …
6. 简易 Git 一个轻量级的接口，用于在任何 node.js 应用程序中运行 git 命令。
一个轻量级的接口，用于在任何 node.js 应用程序中运行 git 命令。
简易 Git
一个轻量级的接口，用于在任何 node.js git应用程序中运行命令 。
安装 使用您喜欢的软件包管理器：
npm ： npm install simple-git纱线 ： yarn add simple-git
系统依赖关系 需要 安装 git git ，并且可以使用命令调用它。
用法 使用 common js 将其包含到您的 JavaScript 应用程序中：
// require the library, main export is a function
const simpleGit = require ( 'simple-git' ) ;
simpleGit ( ) . clean ( simpleGit . CleanOptions . FORCE ) ;
// or use named properties
const { simpleGit, CleanOptions } = require ( 'simple-git' ) ;
simpleGit ( ) . clean ( CleanOptions . FORCE ) ;
Enter fullscreen mode
Exit fullscreen mode
将其作为 ES 模块包含到您的 JavaScript 应用程序中：
import { simpleGit , CleanOptions } from 'simple-git' ;
simpleGit ( ) . clean ( CleanOptions . FORCE ) ;
Enter fullscreen mode
Exit fullscreen mode
在 TypeScript 应用中包含以下代码……
7. 平拨片 轻量级、功能强大的无依赖项 JavaScript 日期时间选择器
轻量级、功能强大的无依赖项 JavaScript 日期时间选择器
flatpickr - JavaScript 日期时间选择器
动机 几乎所有大型单页应用或项目都需要输入日期和时间。浏览器原生实现的日期和时间功能不一致且有限。大多数其他库都需要引入 jQuery、Bootstrap 和 moment.js 等大量依赖项。我想要的是一个开箱即用、界面美观、无依赖、功能强大且可扩展的工具。
功能概述：
无依赖项（无臃肿的软件包） 简洁、精致的用户体验 日期和时间输入 范围选择 能够选择多个日期 可以仅用作时间选择器 以易于理解的格式显示日期 使用任意逻辑轻松禁用特定日期、日期范围或任何日期。 周数 51个地点 8 种色彩缤纷的主题（包括暗黑系和材质系） 众多插件 适用于 React、Angular、Vue、Ember 等框架的库
flatpickr 以远小于其他库的体积提供了更多的功能。
兼容性 IE9 及更高版本、Edge、iOS Safari 6+、Chrome 8+、Firefox 6+
…
8. ring-client-api 适用于 Ring 门铃、摄像头、报警系统和智能照明的非官方 API
Ring门铃、摄像头、报警系统和智能照明的非官方软件包
9. 极客食谱 《极客食谱》是一系列指南，指导您如何建立自己的高可用性“私有云”，并使用它来运行自托管服务，例如 GitLab、Plex、NextCloud 等。
《极客食谱》是一系列指南，指导您如何建立自己的高可用性“私有云”，并使用它来运行自托管服务，例如 GitLab、Plex、NextCloud 等。
10. 浮动界面 用于工具提示、弹出框、下拉菜单等的 JavaScript 定位库
一个用于定位浮动元素并为其创建交互的 JavaScript 库。
Floating UI 是一个小型库，可帮助您创建“浮动”元素，例如工具提示、弹出框、下拉菜单等等。
它具有两大主要特点：
锚定定位 ：将浮动元素（例如工具提示）锚定到另一个元素（例如按钮）上，同时通过避免碰撞来确保其尽可能始终在视图中。此功能适用于所有平台。 React 用户交互 ：用于组合交互以创建易于访问的浮动 UI 组件的 Hooks 和组件。
自述文件赞助商
您可以通过Open Collective 上的多种方式赞助 Floating UI 。
为什么 浮动元素采用绝对定位，通常锚定到另一个 UI 元素上。确保浮动元素始终锚定在另一个元素旁边可能具有挑战性，尤其是在一些特殊情况下……
观星📈
Tabby +1,739 颗星 开发者路线图 +1,558 星 公共 API +1,504 星 每个程序员都应该知道 +1,307 颗星 Appsmith +1,229 星
公开交易 +108% 阿格里帕 +73% 代码的惊人发展 +31% JSX Lite +23% Remix Auth +19%
免费编程书籍 +4,424 星 超赞 +4,391 星 开发者路线图 +3,788 星 公共 API +3,637 星 编程面试大学 +3,554 星
美杜莎 +205% 香水店 +108% 氢气 +102% Nice Modal React +82% 阿格里帕 +80%
想要查看最新排名，请访问 Stargazing.dev
《热门项目》以每周新闻简报的形式发布，请在Stargazing.dev 注册， 以确保您不会错过任何一期。
如果你喜欢这篇文章，可以 关注我的 推特账号，我会定期发布关于HTML、CSS和JavaScript的内容。
文章来源：https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-10th-december-2021-28l1 
