🚀GitHub 上面向 Web 开发人员的 10 个热门项目 - 2021 年 10 月 22 日
约哈
现金
React 命令面板
里朱
克伦威尔CMS
rx-query
沉浸式
React 日期选择器
由 Mux 主办的 DEV 全球展示挑战赛:展示你的项目!
《热门项目》以每周新闻简报的形式发布,请在Stargazing.dev 注册, 以确保您不会错过任何一期。
1. YoHa
YoHa 是一款手部追踪引擎,其构建目标是成为实际场景中手部追踪功能的一种多功能解决方案,以增加应用程序的价值。
约哈
一款实用的手部追踪引擎。
注意:Yoha 目前已停止维护。
快速链接:
安装
npm install @handtracking.io/yoha
请注意:
您需要从此处提供文件, node_modules/@handtracking.io/yoha因为库需要从这里下载模型文件。( Webpack 示例 )
您需要使用 https 协议来提供网页服务,以便访问摄像头。( Webpack 示例 )
在某些情况下,您 应该 使用跨域隔离,因为它能提升引擎的性能。( Webpack 示例 )
描述
Yoha 是一款手部追踪引擎,旨在成为实际应用中手部追踪功能增强的通用解决方案。虽然其最终目标是成为一款支持任何手部姿势的通用手部追踪引擎,但该引擎目前主要针对用户/开发者认为有用的特定手部姿势进行优化。这些姿势由引擎检测,从而实现……
2. 现金
一款体积极其小巧的 jQuery 替代方案,适用于现代浏览器。
一款体积极其小巧的 jQuery 替代方案,适用于现代浏览器。
现金
Cash 是一个体积极其小巧的 jQuery 替代方案,适用于现代浏览器(IE11+),并提供类似 jQuery 的语法来操作 DOM。它利用现代浏览器的特性来最小化代码库,开发者可以使用熟悉的链式方法,而文件大小却只有 jQuery 的一小部分。Cash 的目标并非完全实现与 jQuery 的功能对等,但它已经非常接近,足以满足大多数日常使用场景。
比较
尺寸
现金
Zepto 1.2.0
jQuery Slim 3.4.1
未精炼
36.5 KB
58.7 KB
227 KB
精简版
16 KB
26 KB
71 KB
已压缩和压缩
6 KB
9.8 KB
24.4 KB
与 jQuery Slim 相比,体积缩小了 76.6%。如果您需要更小的软件包,我们 也 支持 部分构建 。
特征
现金
Zepto 1.2.0
jQuery Slim 3.4.1
支持旧版浏览器
❌
❌
✔
支持现代浏览器
✔
✔
✔
积极维护
✔
❌
✔
命名空间事件
✔
❌
✔
类型化代码库
✔(TypeScript)
❌
❌
TypeScript
…
3. React 命令面板
符合 WAI-ARIA 标准的 React 命令面板,类似于 Atom 和 Sublime Text 中的那种。
一个易于访问且与浏览器兼容的 JavaScript 命令面板。
React 命令面板
符合 WAI-ARIA 标准的 React 命令面板,类似于 Atom 和 Sublime Text 中的那种。
现场游乐场
要查看命令面板的实际应用示例,请转到
或者
要在您的计算机上运行该演示:
用法
将其安装到您的项目中
$ npm i --save react-command-palette
将其导入到你的 React 应用中并传递命令
import { createRoot } from 'react-dom/client' ;
import CommandPalette from 'react-command-palette' ;
const commands = [ {
name : "Foo" ,
command ( ) { }
} , {
name : "Bar" ,
command ( ) { }
}
. . .
] ;
const container = document . getElementById ( 'app' ) ;
const root = createRoot ( container ) ;
root . render ( < CommandPalette commands = { commands } / > )
Enter fullscreen mode
Exit fullscreen mode
道具
4. 罗伊
在类似电子表格的用户界面中管理 Firestore 数据,在浏览器中轻松编写云函数,并连接到您喜爱的第三方平台,例如 SendGrid、Twilio、Algolia、Slack 等。
低代码后端平台。在类似电子表格的用户界面上管理数据库,并在浏览器中使用 JS/TS 构建云函数工作流。
✨ 类似 Airtable 的数据库管理界面 ✨ 无需编写代码,即可构建任何自动化流程 ✨
连接数据库,无需离开浏览器即可使用低代码创建云函数。 专注于构建您的应用程序。适用于 Firebase 和 Google Cloud 的低代码
在线演示🛝
💥 在实时演示环境 中体验 Rowy 💥
特色✨
20211004-RowyWebsite.mp4
功能强大的 Firestore 电子表格界面
Firestore 的 CMS
CRUD 操作
批量导入或导出数据 - CSV、JSON、TSV
按行值排序和筛选
锁定、冻结、调整大小、隐藏和重命名列
同一系列的多种视图
利用云函数和现成的扩展程序实现自动化
基于字段级数据变更构建云函数工作流
使用预置代码块连接到您最喜欢的工具,或者创建您自己的代码块。
SendGrid、Algolia、Twilio、BigQuery 等
丰富且灵活的数据字段
5. 里尤
适用于所有编程语言的超高速在线实验平台。
里朱
Riju 是一个非常快速的在线平台,支持所有编程语言。不到一秒钟,你就可以开始使用 Python 解释器或编译 INTERCAL 代码。
请访问https://riju.codes 查看 !请注意,由于支持旧协议的成本较高,Riju 仅在支持 IPv6 的网络上可用。如果您的网络 不支持 IPv6 ,请联系您的网络管理员或服务提供商,让他们支持现代互联网标准。您也可以考虑使用 VPN 访问 Riju 作为替代方案。
服务正常运行时间可在 https://radian.statuspage.io/ 上查看。
是免费的吗?
Riju 将永远免费供所有人使用。我从 Radian LLC 的企业账户支付网站托管费用,该账户的资金来源于捐款和我个人的积蓄。如果您想帮助 Riju 继续运营并看到更多类似的项目,可以点击以下链接……
6. 克伦威尔CMS
Cromwell CMS 是一款免费开源的无头 TypeScript CMS,可用于使用 React 和 Next.js 创建速度极快的网站。它拥有强大的插件/主题系统,并提供类似 WordPress 的丰富管理面板 GUI 用户体验。
适用于 Next.js 网站的类似 WordPress 的内容管理系统
克伦威尔CMS
Cromwell CMS 是一款免费开源的无头 TypeScript CMS,可用于使用 React 和 Next.js 创建速度极快的网站。它拥有强大的插件/主题系统,并提供类似 WordPress 的丰富管理面板 GUI 用户体验。我们致力于让内容创作者和零编程知识的用户都能轻松便捷地在项目中使用 CMS 的所有功能。
Cromwell CMS的主要特点:
在线商店和博客平台管理系统。
拖放式主题编辑器。
轻松安装来自官方商店的主题和插件,并进行本地管理。
免费提供功能齐全的在线商店和博客主题,并附带多个插件。
集成数据库。支持使用 SQLite、MySQL、MariaDB 和 PostgreSQL。
开发者友好体验。利用 Next.js、Nest.js、TypeORM、TypeGraphQL 以及 CMS API 的强大功能,构建任何类型的网站。
安装
请参阅我们的文档
示例
查看演示网站:前端 + 管理面板
贡献
有问题吗?
在Discord 服务器 上询问
有 …
7. API平台
创建 REST 和 GraphQL API,搭建 Jamstack Web 应用程序,实时传输更改。
🕸️ 创建 REST 和 GraphQL API,搭建 Jamstack Web 应用程序,实时传输更改。
API平台是一个新一代Web框架,旨在轻松创建API优先的项目,同时又不影响可扩展性和灵活性:
8. rx-query
内置电池,轻松获取库数据,为用户提供更佳体验
❗此软件包已停止维护。❗
rx-query
内置电池,轻松获取库数据,为用户提供更佳体验
为什么
特征
重试
缓存
按间隔刷新,集中注意力,在线
变异数据
基础知识
不带参数的查询
最简单的查询是不带参数的查询,它只是对 Observable 的一个封装。该 query方法需要一个回调方法来调用查询。
import { query } from "rx-query" ;
characters$ = query ( "characters" , ( ) =>
this . rickAndMortyService . getCharacters ( ) ,
) ;
Enter fullscreen mode
Exit fullscreen mode
使用静态参数进行查询
带有静态参数(值不会随时间改变)的查询可以像没有参数的查询一样编写。
import { query } from "rx-query" ;
characters$ = query ( "character" , ( …
Enter fullscreen mode
Exit fullscreen mode
9. 浸入
通过修改当前状态来创建下一个不可变状态。
10. React 日期选择器
一个简单且可复用的 React 日期选择器组件
React 日期选择器
一个简单且可复用的 React 日期选择器组件( 演示 )
安装
该软件包可通过npm 安装 :
npm install react-datepicker --save
或者通过 yarn :
yarn add react-datepicker
由于 React 和 PropTypes 这两个依赖项未包含在软件包中,因此您需要单独安装它们。如果您需要使用除默认 en-US 之外的其他语言环境,则还需要从 date-fns 中将其导入到您的项目中(请参阅下方的“本地化”部分)。以下是一个在 React 视图中使用 Datepicker 的简单示例。您还需要引入此软件包中的 CSS 文件(或者提供您自己的 CSS 文件)。如果您的构建系统支持引入 CSS 文件(例如 Webpack),则以下示例展示了如何引入此软件包中的 CSS 文件。
import React , { useState } from "react" ;
import DatePicker from "react-datepicker" ;
import "react-datepicker/dist/react-datepicker.css" ; …
Enter fullscreen mode
Exit fullscreen mode
观星📈
JavaScript 算法 +1,066 星
剧作家 +1,036 颗星
公共 API +800 星
Uptime Kuma +792 星
超棒的速查表 +716 星
空间键盘导航 +32%
DOM 到 SVG 转换率 +18%
新的 CSS 重置 +15%
Giscus +14%
ct +13%
公共 API +5,262 星
Uptime Kuma +4,655 星
JavaScript 算法 +3,288 星
超赞 +3,201 星
打造你自己的 X +2,905 颗星
Kuma正常运行时间 +134%
Nice Modal React +101%
Pico +52%
Purity UI 控制面板 +49%
React Web 编辑器 +43%
想要查看最新排名,请访问 Stargazing.dev
《热门项目》以每周新闻简报的形式发布,请在Stargazing.dev 注册, 以确保您不会错过任何一期。
如果你喜欢这篇文章,可以 关注我的 推特账号,我会定期发布关于HTML、CSS和JavaScript的内容。
文章来源:https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-22nd-october-2021-lck