发布于 2026-01-05 0 阅读
0

🚀2021年10月22日,GitHub上十大热门Web开发者项目:Yoha Cash React Command Palette、Riju Cromwell CMS、rx-query、Immer React Date Picker。DEV's Worldwide Show and Tell Challenge Presented by Mux: Pitch Your Projects!

🚀GitHub 上面向 Web 开发人员的 10 个热门项目 - 2021 年 10 月 22 日

约哈
约哈

现金

React 命令面板

里朱

克伦威尔CMS

API平台

rx-query

沉浸式

React 日期选择器

由 Mux 主办的 DEV 全球展示挑战赛:展示你的项目!

《热门项目》以每周新闻简报的形式发布,请在Stargazing.dev注册,以确保您不会错过任何一期。

1. YoHa

YoHa 是一款手部追踪引擎,其构建目标是成为实际场景中手部追踪功能的一种多功能解决方案,以增加应用程序的价值。

GitHub 标志 handtracking-io / yoha

一款实用的手部追踪引擎。

约哈
约哈

一款实用的手部追踪引擎。

注意:Yoha 目前已停止维护。

快速链接:

安装

npm install @handtracking.io/yoha

请注意:

  • 您需要从此处提供文件,node_modules/@handtracking.io/yoha因为库需要从这里下载模型文件。(Webpack 示例
  • 您需要使用 https 协议来提供网页服务,以便访问摄像头。(Webpack 示例
  • 在某些情况下,您应该使用跨域隔离,因为它能提升引擎的性能。(Webpack 示例

描述

Yoha 是一款手部追踪引擎,旨在成为实际应用中手部追踪功能增强的通用解决方案。虽然其最终目标是成为一款支持任何手部姿势的通用手部追踪引擎,但该引擎目前主要针对用户/开发者认为有用的特定手部姿势进行优化。这些姿势由引擎检测,从而实现……


2. 现金

一款体积极其小巧的 jQuery 替代方案,适用于现代浏览器。

GitHub 标志 fabiospampinato /现金

一款体积极其小巧的 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 中的那种。

GitHub 标志 asabaylus / react-command-palette

一个易于访问且与浏览器兼容的 JavaScript 命令面板。

React 命令面板

符合 WAI-ARIA 标准的 React 命令面板,类似于 Atom 和 Sublime Text 中的那种。

置信区间 代码发现 npm 语言等级:JavaScript react-command-palette

截屏

现场游乐场

要查看命令面板的实际应用示例,请转到

故事书

或者

要在您的计算机上运行该演示:

用法

将其安装到您的项目中

$ 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

道具

  • open一个布尔值,当设置为…


4. 罗伊

在类似电子表格的用户界面中管理 Firestore 数据,在浏览器中轻松编写云函数,并连接到您喜爱的第三方平台,例如 SendGrid、Twilio、Algolia、Slack 等。

GitHub 标志 rowyo / rowy

低代码后端平台。在类似电子表格的用户界面上管理数据库,并在浏览器中使用 JS/TS 构建云函数工作流。

✨ 类似 Airtable 的数据库管理界面 ✨ 无需编写代码,即可构建任何自动化流程 ✨

连接数据库,无需离开浏览器即可使用低代码创建云函数。
专注于构建您的应用程序。适用于 Firebase 和 Google Cloud 的低代码

在线演示🛝

💥 在实时演示环境中体验 Rowy 💥

特色✨

20211004-RowyWebsite.mp4

功能强大的 Firestore 电子表格界面

  • Firestore 的 CMS
  • CRUD 操作
  • 批量导入或导出数据 - CSV、JSON、TSV
  • 按行值排序和筛选
  • 锁定、冻结、调整大小、隐藏和重命名列
  • 同一系列的多种视图

利用云函数和现成的扩展程序实现自动化

  • 基于字段级数据变更构建云函数工作流
    • 使用任何 NPM 模块或 API。
  • 使用预置代码块连接到您最喜欢的工具,或者创建您自己的代码块。
    • SendGrid、Algolia、Twilio、BigQuery 等

丰富且灵活的数据字段


5. 里尤

适用于所有编程语言的超高速在线实验平台。

GitHub 标志 radian-software / riju

⚡ 适用于所有编程语言的超快在线实验环境。

里朱

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 用户体验。

GitHub 标志 CromwellCMS / Cromwell

适用于 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 应用程序,实时传输更改。

GitHub 标志 api-platform / api-platform

🕸️ 创建 REST 和 GraphQL API,搭建 Jamstack Web 应用程序,实时传输更改。

API平台

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. 浸入

通过修改当前状态来创建下一个不可变状态。

GitHub 标志 immerjs / immer

通过修改当前状态来创建下一个不可变状态。

沉浸式

npm 构建状态 覆盖范围状态 代码风格:更美观 开放集体 开放集体 Gitpod Ready-to-Code

只需修改当前状态树,即可创建下一个不可变状态树。

荣获2019 年React 开源项目“年度突破奖”和JavaScript 开源项目“最具影响力贡献奖”。

通过一键式在线设置进行贡献

您可以使用 Gitpod(一款类似 VS Code 的免费在线 IDE)进行在线贡献。只需单击一下,它就会启动一个工作区并自动执行以下操作:

  • 克隆 immer 代码库。
  • 安装依赖项。
  • 跑步yarn run start

这样你就可以立即开始编写代码了。

在 Gitpod 中打开

文档

该软件包的文档托管在https://immerjs.github.io/immer/

支持

Immer 是否对您的项目有所帮助?加入开放社区:https://opencollective.com/immer

发布说明

https://github.com/immerjs/immer/releases





10. React 日期选择器

一个简单且可复用的 React 日期选择器组件

GitHub 标志 Hacker0x01 / react-datepicker

一个简单且可复用的 React 日期选择器组件

React 日期选择器

npm 版本 测试套件 代码发现 下载

一个简单且可复用的 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

观星📈

过去7天涨幅最大的股票🔗

  1. JavaScript 算法+1,066 星
  2. 剧作家+1,036 颗星
  3. 公共 API +800 星
  4. Uptime Kuma +792 星
  5. 超棒的速查表+716 星

过去 7 天增长最快的百分比🔗

  1. 空间键盘导航+32%
  2. DOM 到 SVG 转换率+18%
  3. 新的 CSS 重置+15%
  4. Giscus +14%
  5. ct +13%

过去30天涨幅最大的股票🔗

  1. 公共 API +5,262 星
  2. Uptime Kuma +4,655 星
  3. JavaScript 算法+3,288 星
  4. 超赞+3,201 星
  5. 打造你自己的 X +2,905 颗星

过去 30 天增长最快的百分比🔗

  1. Kuma正常运行时间+134%
  2. Nice Modal React +101%
  3. Pico +52%
  4. Purity UI 控制面板+49%
  5. 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