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

🚀GitHub 上 10 个热门 Web 开发项目 - 2021 年 8 月 13 日 📠 小状态机 xicons 颜色窃贼 3 个对你有益的东西 网站介绍 如何使用此库 giscus AriaNg

🚀2021年8月13日,GitHub上面向Web开发者的十大热门项目

📠 小状态机

xicons许可证:MIT

偷色贼

对你有利的三件事

网站

介绍

如何使用此库。

吉斯库斯

AriaNg

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

1. 有丝分裂

一次编写组件,到处运行。可编译为 Vue、React、Solid、Angular、Svelte 等多种框架。

GitHub 标志 BuilderIO /有丝分裂

一次编写组件,到处运行。可编译为 React、Vue、Qwik、Solid、Angular、Svelte 等多种框架。



有丝分裂标志

编写一次组件,即可编译成所有框架

代码风格:更美观 欢迎公关稿 执照 类型

概述

Mitosis提供跨所有框架的统一开发体验,使您能够在单个代码库中构建组件并将其编译为 React、Vue、Angular、Svelte、Solid、Alpine、Qwik 等。

利用有丝分裂,你可以:

  • 在多个框架中保持一致的设计系统(例如
  • 将 Figma 中的设计系统同步到代码,并将其发布到 npm,以便在不同框架中使用。
  • 通过编译为原生框架代码来避免Web 组件的陷阱

PS:我们正在积极寻找有兴趣成为 Mitosis 项目贡献者的朋友。如果您有兴趣,请查看我们推荐的入门级问题列表,或通过Discord联系我们。

有丝分裂发育的GIF示例

快速入门

要从头开始创建一个新的有丝分裂项目,请运行以下create命令:

npm create @builder.io/mitosis@latest
Enter fullscreen mode Exit fullscreen mode

项目完成后,请务必阅读README.md新项目中生成的文档。文档将解释项目的结构,并提供……





2. React 套件

React Suite 是一套面向企业系统产品的 React 组件库。它是一个设计精良且对开发者友好的 UI 框架。

GitHub 标志 rsuite / rsuite

🧱 一套 React 组件。

React Suite 标志

English |中文版

npm GitHub Actions npm 包大小 代码发现 Discord 吉特 吉特 Gitpod 即用型代码

React Suite 是一套 React 组件。它致力于提供高质量、全面的 React 组件,帮助开发者快速构建 Web 应用程序。

支持的平台

浏览器

React Suite 支持所有主流浏览器和平台的最新稳定版本。自 React Suite 5.0 起,不再支持 IE10 及更早版本。React Suite 的设计和实现主要面向现代桌面浏览器,而非移动浏览器。

IE 边缘 火狐浏览器 铬合金 狩猎之旅
≥11 ≥14 ≥ 45 ≥ 49 ≥ 10

服务器

React Suite 支持服务器端渲染,并支持使用Next.js构建应用程序。

安装

React Suite 是一个npm 包

# with npm
npm install rsuite

# with Yarn
yarn add rsuite

# with pnpm
pnpm add rsuite

# with Bun
bun add rsuite
Enter fullscreen mode Exit fullscreen mode

用法

import { Button } from 'rsuite';
import 'rsuite/styles/index.less'; // or 'rsuite/dist/rsuite.min.css'
function App() {
  return <Button
Enter fullscreen mode Exit fullscreen mode

3. 小状态机

React 自定义钩子,用于持久化状态管理

GitHub 标志 beekai-oss /小状态机

📠 React 自定义钩子,用于持久化状态管理

📠 小状态机

国家管理变得超级简单

npm 下载 npm npm

✨ 特点

  • 体积小巧,无任何依赖项,而且很简单(gzip 压缩后 715B )
  • 默认情况下持久化状态(sessionStoragelocalStorage
  • 使用 React Hooks 构建

📦 安装

$ npm install little-state-machine

🕹 API

🔗StateMachineProvider

这是一个提供程序组件,用于包装您的整个应用程序以创建上下文。

<StateMachineProvider>
  <App />
</StateMachineProvider>
Enter fullscreen mode Exit fullscreen mode

🔗createStore

用于初始化全局存储的函数,在应用程序根目录(应用程序所在的位置<StateMachineProvider />)调用。

function log(store) {
  console.log(store);
  return store;
}
createStore(
  {
    yourDetail: { firstName: '', lastName: '' } // it's an object of your state
  },
  {
     name?: string; // rename the store
     middleWares?: [ log ]; // function to invoke each action
     storageType?: 
Enter fullscreen mode Exit fullscreen mode

4. 图标

SVG Vue/React 组件集成了 fluentui-system-icons、ionicons、ant-design-icons、material-design-icons、Font-Awesome、tabler-icons 和 carbon icons。

GitHub 标志 07akioni / xicons

集成了来自 fluentui-system-icons、ionicons、ant-design-icons、material-design-icons、Font-Awesome、tabler-icons 和 carbon icons 的 SVG Vue/React 组件。(Vue3、Vue2、React、SVG)

xicons许可证:MIT

英语·中文

包含vicons(vue3)、ricons(react)、sicons(svg) 和v2icons(vue2)。

fluentui-system-icons集成了来自、ioniconsant-design-iconsmaterial-design-iconsSVG Vue/React组件Font-Awesometabler-iconscarbon

此外,还提供了用于自定义颜色和大小的实用图标组件。

图标预览和搜索

https://www.xicons.org

安装

图标安装

# Install packages on your demand
# For react
npm i -D @ricons/fluent
npm i -D @ricons/ionicons4
npm i -D @ricons/ionicons5
npm i -D @ricons/antd
npm i -D @ricons/material
npm i -D @ricons/fa # font awesome
npm i -D @ricons/tabler
npm i -D @ricons/carbon
# For vue3
npm i -D @vicons/fluent
npm i -D @vicons/ionicons4
npm i -D @vicons/ionicons5
npm i -D @vicons/antd
npm i -D @vicons/material
npm i -D @vicons/fa # font awesome
npm i -D @vicons/tabler
npm i -D @vicons/carbon
# For vue2
npm i -D @v2icons/fluent
npm i -D @v2icons/ionicons4
npm i -D @v2icons/ionicons5
npm
Enter fullscreen mode Exit fullscreen mode

5. 偷色贼

仅使用 JavaScript 从图像中提取调色板。支持浏览器和 Node.js 环境。

GitHub 标志 lokesh /颜色窃贼

仅使用 JavaScript 从图像中提取调色板。支持浏览器和 Node.js 环境。

偷色贼

仅使用 Javascript 从图像中提取调色板。可在浏览器和 Node 环境中运行。

查看演示页面,了解示例、API 文档等更多信息。


贡献

项目结构

  • build/- 一个简单的脚本,可以将文件复制并重命名到 /dist 文件夹中。
  • cypress/- 浏览器测试。
  • dist/- 由microbundle包生成的发行文件,以及通过构建脚本复制的一些文件。
  • examples/- index.html 示例页面的 CSS、JS 和图像。
  • src/color-thief-node.js- 适用于 Node (commonjs) 的脚本版本的源代码。
  • src/color-thief.js- 适用于浏览器(ES6、AMD、全局变量)的脚本版本源代码。
  • src/core.js- 脚本的节点版本和浏览器版本之间共享的功能。
  • test/- Node 集成测试。使用 Chai。
  • index.html- 示例页面。

运行测试

共有两组测试:

  1. 使用Cypress运行浏览器测试
  2. 使用KarmaMocha运行 Node 测试

到…


6. 集成测试最佳实践

掌握 Node.js 最强大的测试技术:组件测试。包含极其全面的最佳实践列表和示例应用程序。

GitHub 标志 testjavascript / nodejs-integration-tests-best-practices

✅ 超越 Node.js 测试的基础知识。包含一份非常全面的最佳实践列表和一个示例应用程序(2024 年 3 月)

标题


掌握最强大的后端测试技术

对你有利的三件事

组件/集成测试是端到端测试和单元测试的混合体。它正变得越来越流行,并且根据测试钻石模型,它被认为是现代后端开发的默认技术。其核心思想是通过 API 对整个组件(例如微服务)进行原样测试,测试内容包括数据库在内的所有层,但模拟任何无关内容。这既能带来高度的可靠性,又能带来良好的开发体验。然而,要正确、快速、全面地进行测试并最大化其价值,需要一定的学习和技能。这正是本仓库的使命宣言。警告:你可能会爱上测试💚

此仓库包含:

1. ✅ 40+ 条最佳实践列表 -详细说明如何正确编写组件测试,包括代码示例和示例应用程序参考

2. 📊 应用示例 -


7. jsEncrypt

一个用于执行 OpenSSL RSA 加密、解密和密钥生成的 Javascript 库。

GitHub 标志 travist / jsencrypt

一个零依赖的 Javascript 库,用于执行 OpenSSL RSA 加密、解密和密钥生成。

网站

http://travistidwell.com/jsencrypt

介绍

在互联网上寻找 RSA Javascript 加密的好解决方案时,你会发现很多库基本上都采用了 Tom Wu 在http://www-cs-students.stanford.edu/~tjw/jsbn/所做的出色工作,然后修改代码来实现他们想要的功能。

然而,我找不到的是一个简单的库封装器,它基本上完全不修改该库,但添加了一个封装器来解析使用 OpenSSL 生成的实际私钥和公钥对。

这个图书馆就是这些努力的成果。

如何使用此库。

这个库应该能与 OpenSSL 完美配合。接下来,我们将介绍如何使用这个库。

  • 在终端(Unix操作系统)中输入以下命令。
openssl genrsa -out rsa_1024_priv.pem 1024
  • 这将生成一个私钥,您可以通过执行以下操作查看该私钥……
cat rsa_1024_priv.pem
  • 然后您可以将此内容复制并粘贴到私钥中……

8. 吉斯库斯

一个由 GitHub Discussions 提供支持的评论系统。让访客通过 GitHub 在您的网站上发表评论和反馈!

GitHub 标志 吉斯库斯/吉斯库斯

一个由 GitHub Discussions 提供支持的评论系统。 :octocat: 💬 💎

一个由GitHub Discussions提供支持的评论系统。让访客通过 GitHub 在您的网站上发表评论和反馈!其设计灵感主要来源于utterances

请注意, Giscus 仍在积极开发中。GitHub 也仍在积极开发讨论区及其 API。因此,Giscus 的某些功能可能会随着时间的推移而失效或发生变化。

工作原理

当 giscus 加载时,它会使用GitHub Discussions 搜索 API,根据选定的映射(URL、标签等)查找与该页面关联的讨论pathname<title>如果找不到匹配的讨论,giscus 机器人会自动创建一个新的讨论……


9. 成长手册

开源A/B测试平台

GitHub 标志 成长手册/成长手册

开源功能标记和 A/B 测试平台

GrowthBook - 开源功能标记和 A/B 测试

开源功能标记和 A/B 测试

构建状态 发布 加入我们的 Slack 群组

只需 1 分钟即可快速上手:

git clone https://github.com/growthbook/growthbook.git
cd growthbook
docker-compose up -d
Enter fullscreen mode Exit fullscreen mode

然后访问http://localhost:3000

GrowthBook 截图

我们的理念

排名前 1% 的公司花费数千小时在内部构建自己的功能标记和 A/B 测试平台,而其他 99% 的公司则只能付费购买昂贵的第三方 SaaS 工具,或者拼凑无人维护的开源库。

我们希望让所有公司都能拥有功能齐全的内部平台的灵活性和强大功能,而无需自行构建。

主要特点

  • 🏁 具有高级定向、逐步推出和实验功能的特性开关
  • 💻 提供ReactJavascriptPHPRubyPythonGoAndroidiOS平台的 SDK !
  • 🆎 强大的 A/B 测试分析功能,支持高级统计分析(CUPED、序贯测试、贝叶斯分析、SRM 检查等)
  • ❄️ 使用您现有的数据堆栈——BigQuery、Mixpanel、Redshift、Google Analytics……

10. AriaNg

AriaNg,一个现代化的 Web 前端,让 aria2 更易于使用。

GitHub 标志 梅斯温德/ AriaNg

AriaNg,一个现代化的 Web 前端,让 aria2 更易于使用。

AriaNg

执照 最新版本 最新版本

介绍

AriaNg 是一个现代化的 Web 前端,旨在简化aria2的使用。AriaNg 使用纯 HTML 和 JavaScript 编写,因此无需任何编译器或运行时环境。您只需将 AriaNg 部署到 Web 服务器,即可在浏览器中打开它。AriaNg 采用响应式布局,支持所有桌面和移动设备。

特征

  1. 纯HTML和JavaScript,无需运行时环境
  2. 响应式设计,支持桌面和移动设备
  3. 用户友好界面
    • 对任务(按名称、大小、进度、剩余时间、下载速度等)、文件、BT下载节点进行排序
    • 搜索任务
    • 重试任务
    • 拖动即可调整任务顺序
    • 更多任务信息(健康百分比、BT 同伴客户信息等)
    • 按指定的文件类型(视频、音频、图片、文档、应用程序、压缩文件等)或文件扩展名筛选文件
    • 多目录任务的树状视图
    • aria2 或单任务的下载/上传速度图表
    • 完全支持 aria2 设置
  4. 深色主题
  5. URL命令行…

观星📈

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

  1. 公共 API +1,467 星
  2. JavaScript 算法+842 星
  3. 机器学习入门+633 星
  4. 打造你自己的 X +540 颗星
  5. 开发者路线图+537 星

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

  1. html转图像+17%
  2. 有丝分裂+16%
  3. VSCode 数据库客户端+13%
  4. +11%
  5. Vuestic UI +7%

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

  1. 公共 API +8,558 星
  2. 机器学习入门+5,734 星
  3. 编程面试大学+5,387 星
  4. 面向初学者的 Web 开发+2,912 星
  5. NocoDB +2,899 星

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

  1. 使用颜色+111%
  2. html转图像+88%
  3. 黛西UI +73%
  4. Astro +58%
  5. 机器学习入门+53%

想要查看最新排名,请访问Stargazing.dev


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

如果你喜欢这篇文章,可以关注我的推特账号,我会定期发布与HTML、CSS和JavaScript相关的实用技巧。

文章来源:https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-13th-august-2021-4bf2