🚀 GitHub 上面向 Web 开发人员的 10 个热门项目 - 2021 年 6 月 4 日 AWS SDK for JavaScript v3 Html5-QRCode Peacock for Visual Studio Code Microbundle NocoDB 开源 Airtable 替代方案加入我们的社区安装无聊的头像 simple-git-hooks

2025-06-08

🚀GitHub 上面向 Web 开发者的 10 个热门项目 - 2021 年 6 月 4 日

适用于 JavaScript 的 AWS 开发工具包 v3

HTML5二维码

Peacock for Visual Studio Code

微束npm 特拉维斯 许可证

开源 Airtable 替代方案

加入我们的社区

安装

无聊的头像

简单的 git 钩子

《Trending Projects》以每周简讯形式提供,请在www.iainfreestone.com上注册,以确保您不会错过任何一期。

1.SigNoz

监控您的应用程序并解决已部署应用程序中的问题,这是 DataDog、New Relic 等的开源替代方案

GitHub 徽标 SigNoz / signoz

SigNoz 是一个开源可观测性平台,原生于 OpenTelemetry,将日志、追踪和指标集成在一个应用程序中。它是 DataDog、NewRelic 等的开源替代方案。🔥 🖥。👉 开源应用程序性能监控 (APM) 和可观测性工具

SigNoz 徽标

监控您的应用程序并解决已部署应用程序中的问题,这是 DataDog、New Relic 等的开源替代品。

下载 GitHub 问题 鸣叫

SigNoz 帮助开发人员监控应用程序并排除已部署应用程序中的问题。使用 SigNoz,您可以:

👉 在单一窗格中可视化指标、跟踪和日志

👉 您可以查看 p99 延迟、服务错误率、外部 API 调用和各个端点等指标。

👉 您可以通过查看导致问题的确切跟踪并查看各个请求跟踪的详细火焰图来找到问题的根本原因。

👉 对跟踪数据进行聚合以获取业务相关指标

👉 过滤和查询日志,根据日志中的属性构建仪表板和警报

👉 使用 Python、Java、Ruby 和 Javascript 自动记录异常

👉简单...





2.适用于 JavaScript v3 的 AWS 开发工具包

模块化 AWS SDK for JavaScript。每个服务都有一个单独的软件包。它还包含许多常用功能,例如一流的 TypeScript 支持和新的中间件堆栈。

GitHub 徽标 AWS / AWS SDK JS-V3

适用于 JavaScript 的模块化 AWS 开发工具包。

适用于 JavaScript 的 AWS 开发工具包 v3

构建状态 代码验证 代码风格:Prettier

AWS SDK for JavaScript v3是 v2 的重写版,包含一些出色的新功能。与版本 2 一样,它使您能够轻松使用Amazon Web Services,但采用模块化架构,每个服务都有单独的软件包。它还包含许多常用功能,例如一流的 TypeScript 支持新的中间件堆栈。有关更多详细信息,请访问关于模块化 AWS SDK for JavaScript 正式发布的博客文章

要开始使用 JavaScript SDK 版本 3,请访问我们的开发人员指南API 参考

如果您要使用 AWS SDK for JavaScript v3 启动新项目,则可以参考aws-sdk-js-notes-app,其中展示了在笔记应用程序中调用多个 AWS 服务的示例;如果您要从 v2 迁移到 v3,则可以访问我们构建为基本版本的自助式研讨会……


3. Html5-QRCode

跨平台 HTML5 QR 码阅读器

GitHub 徽标 mebjas / html5-qrcode

跨平台 HTML5 二维码读取器。端到端实现请见:https://scanapp.org

HTML5二维码

重要 - 为该项目寻找新主人。

如果有兴趣,请联系minhazav@gmail.com

HTML5二维码

重要提示:该项目目前处于维护模式,直至另行通知。作者暂时无法修复任何错误或进行改进。拉取请求也暂时无法合并。如果您有可以维护的分支,请将详细信息发送至minhazav@gmail.com。我很乐意在这里发布!您可以按原样使用该项目。例如:scanapp.org

轻量级、跨平台的 Web 二维码和条形码扫描库

使用这个轻量级库可以轻松/快速地将二维码、条形码和其他常见的代码扫描功能集成到您的 Web 应用程序中。

主要亮点


4. Peacock for Visual Studio Code

巧妙地改变 Visual Studio Code 工作区的颜色。当您拥有多个 VS Code 实例、使用 VS Live Share 或 VS Code 的远程功能,并且希望快速识别您的编辑器时,这是理想的选择。

GitHub 徽标 johnpapa / vscode-peacock

巧妙地改变 Visual Studio Code 工作区的颜色。当您拥有多个 VS Code 实例、使用 VS Live Share 或 VS Code 的远程功能,并且想要快速识别您的编辑器时,这是理想的选择。

Peacock for Visual Studio Code

孔雀图标

巧妙地改变 Visual Studio Code 工作区的颜色。当您拥有多个 VS Code 实例、使用 VS Live Share 或 VS Code 的远程功能,并且想要快速识别您的编辑器时,这是理想的选择。

点击此处阅读详尽的文档,其中包括有关如何使用 Peacock 的指南和更新日志

Visual Studio Code 扩展 johnpapa.vscode-peacock 的版本徽章 安装 下载 等级 实时共享

MIT 许可证 所有贡献者

构建状态

安装

  1. 在 Visual Studio Code 中打开扩展侧边栏面板,然后选择查看 → 扩展的菜单选项
  2. 搜索Peacock
  3. 单击“安装”
  4. 如果需要,请单击“重新加载”

文档

点击此处阅读详尽的文档,其中包括有关如何使用 Peacock 的指南和更新日志

快速使用

让我们看看孔雀的实际行动!

  1. 创建/打开 VSCode 工作区(Peacock 仅在工作区中工作
  2. 按下F1打开命令面板
  3. 类型Peacock
  4. 选择Peacock: Change to a favorite color
  5. 选择一种预定义的颜色并观察它如何变化……

5. dnd 套件

适用于 React 的现代、轻量、高性能、可访问且可扩展的拖放工具包。

GitHub 徽标 克劳德里克/ dnd-kit

用于 React 的现代、轻量、高性能、可访问且可扩展的拖放工具包。

@dnd-kit – 用于 React 的现代拖放工具包

稳定版本 构建状态 gzip 大小 在 Twitter 上关注我们

  • 功能丰富:可定制的碰撞检测算法、多个激活器、可拖动覆盖、拖动手柄、自动滚动、约束等等。
  • 专为 React 构建:公开诸如useDraggable和之类的钩子useDroppable。并且不会强迫您重新构建应用程序或创建额外的包装器 DOM 节点。
  • 支持广泛的用例:列表、网格、多个容器、嵌套上下文、可变大小的项目、虚拟化列表、2D 游戏等。
  • 零依赖且模块化:该库的核心压缩后大小约为 10kb,且无任何外部依赖。它基于内置的 React 状态管理和上下文构建,从而保持了库的精简。
  • 内置对多种输入方法的支持:指针、鼠标、触摸和键盘传感器。
  • 完全可定制且可扩展:自定义每个细节:动画、过渡、行为、样式。构建您自己的传感器、碰撞检测算法、自定义按键绑定等等。
  • 可访问性:键盘支持、合理的默认 aria 属性、可定制的屏幕阅读器说明和内置的实时区域。
  • 表现:

6. 微捆绑

用于微型模块的零配置捆绑器。

GitHub 徽标 开发/微捆绑

📦 用于微型模块的零配置捆绑器。

微束

微束npm 特拉维斯 许可证

Rollup提供支持的微型模块零配置捆绑


指南 → 设置格式现代模式使用和配置所有选项


✨ 特点

  • 仅使用一个依赖项即可捆绑您的库package.json
  • 支持 ESnext 和 async/await (通过Babelasync-to-promises
  • 为所有输入生成微小的、优化的代码
  • 支持多个输入模块cli.js+index.js等)
  • 为每个条目创建多种输出格式(CJS、UMD 和 ESM)
  • 0 配置 TypeScript 支持
  • 内置 Terser 压缩和 gzip 压缩包大小跟踪

🔧 安装和设置

1️⃣通过运行安装:npm i -D microbundle

2️⃣设置您的package.json

{
  "name": "foo",                      // your package name
  "type": "module",
  "source": "src/foo.js",             // your source code
  "exports": {
    "require": "./dist/foo.cjs",      // used for require() in Node 12+
    "default": "./dist/foo.modern.js" // where to generate the
Enter fullscreen mode Exit fullscreen mode

7. NocoDB

开源 Airtable 替代品。可将任何 MySQL、PostgreSQL、SQL Server、SQLite 和 MariaDB 转换为智能电子表格。

GitHub 徽标 nocodb / nocodb

🔥 🔥 🔥 开源 Airtable 替代品

开源 Airtable 替代方案

NocoDB 是在线构建数据库的最快、最简单的方法

网站 Discord社区 Twitter Reddit文档

视频 avi

查看其他语言 »

加入我们的社区



Stargazers 仓库名册 @nocodb/nocodb

安装

Docker 与 SQLite

docker run -d --name noco 
           -v "$(pwd)"/nocodb:/usr/app/data/ 
           -p 8080:8080 
           nocodb/nocodb:latest
Enter fullscreen mode Exit fullscreen mode

Docker 与 PG

docker run -d --name noco 
           -v "$(pwd)"/nocodb:/usr/app/data/ 
           -p 8080:8080 
            # replace with your pg connection string
           -e NC_DB="pg://host.docker.internal:5432?u=root&p=password&d=d1" 
           # replace with a random secret
           -e NC_AUTH_JWT_SECRET="569a1821-0a93-45e8-87ab-eb857f20a010"  
           nocodb/nocodb:latest
Enter fullscreen mode Exit fullscreen mode

自动安装

Auto-upstall 只需一条命令即可在服务器上设置 NocoDB 以供生产使用。它会在后台自动生成 docker-compose 文件。

bash <(curl -sSL http://install.nocodb.com/noco.sh) <(mktemp)
Enter fullscreen mode Exit fullscreen mode

自动安装执行以下操作:🕊

  • 🐳 自动安装所有先决条件,如 docker、docker-compose
  • 🚀 自动安装 NocoDB 与 PostgreSQL、Redis、Minio……

8. Vitro

独立构建并展示你的 React 组件。Vitro 是 Storybook 的替代方案,构建速度提升 20 倍

GitHub 徽标 悔恨/体外

独立构建和展示你的 React 组件





9.无聊的头像

Boring avatars 是一个小型 JavaScript React 库,可以根据任何用户名和调色板生成自定义的、基于 SVG 的圆形头像。

GitHub 徽标 boringdesigners / boring-avatars

Boring avatars 是一个开源 React 库,可以根据任何用户名和调色板生成自定义的基于 SVG 的头像。

无聊的头像

Boring avatars 是一个小型 JavaScript React 库,可以根据任何用户名和调色板生成自定义的、基于 SVG 的头像

你好

安装

npm install boring-avatars

用法

import Avatar from 'boring-avatars';

<Avatar name="Maria Mitchell" />;
Enter fullscreen mode Exit fullscreen mode

道具









































支柱 类型 默认
尺寸 数字或字符串 40px
正方形 布尔值 false
标题 布尔值 false
姓名 细绳 Clara Barton
变体 其中之一marble,,,,,,beampixelsunsetringbauhaus
marble
颜色 大批 ['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']

姓名

nameprop 用于生成头像。可以是用户名、邮箱或任意随机字符串。

<Avatar name="Maria Mitchell"/>
Enter fullscreen mode Exit fullscreen mode

变体

variant道具用于更改角色形象的主题。可用的变体包括marblebeampixelsunsetringbauhaus

<Avatar name="Alice Paul" variant="beam"/>
Enter fullscreen mode Exit fullscreen mode

尺寸

这…





10. 简单的 git 钩子

适用于小型项目的简单 git hooks 管理器

GitHub 徽标 toplenboren / simple-git-hooks

适用于小型项目的简单 git hooks 管理器

简单的 git 钩子

测试

一个让你轻松管理 git hooks 的工具

该软件包最近已从 重命名simple-pre-commit

请参阅发布文档simple-pre-commit和更新日志

  • 零依赖

  • 小型配置(package.json 中 1 个对象)

  • 轻的:

    包裹 未包装尺寸 随着 deps
    哈士奇v44.3.8 53.5 kB ~1 mB
    哈士奇V88.0.3 6.44 kB 6.44 kB
    预先提交1.2.2 ~80 kB ~850 kB
    简单的 git 钩子 2.11.0 10.9 kB 10.9 kB

谁使用 simple-git-hooks?

什么是 git hook?

git hook 是一个命令或脚本,每次执行 git 操作时都会运行,例如git commitgit push

如果 git hook 执行失败,则 git 操作将中止。

例如,如果您想linter在每次提交时运行以确保项目的代码质量,那么您可以……


观星📈

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

  1. 编码面试大学+2,958 颗星
  2. 免费编程书籍+1,496 颗星
  3. 面向初学者的 Web 开发+905 星
  4. Slidev +751 颗星
  5. JavaScript 算法+691 星

过去 7 天最高增长 (%)

  1. 黛西UI +20%
  2. CandyGraph +15%
  3. react-img-carousel +14%
  4. 无花果+13%
  5. Vuestic UI +12%

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

  1. 编码面试大学+8,048 颗星
  2. 公共 API +5,202 颗星
  3. 免费编程书籍+4,336 颗星
  4. 面向初学者的 Web 开发+3,773 星
  5. 开发者路线图+3,509 颗星

过去 30 天内最高增长 (%)

  1. 使用状态机+530%
  2. 无花果+181%
  3. github-elements +94%
  4. 反应图标模糊+83%
  5. 赢宝盒子+70%

《Trending Projects》以每周简讯形式提供,请在www.iainfreestone.com上注册,以确保您不会错过任何一期。

如果您喜欢这篇文章,您可以在 Twitter 上关注我,我会定期发布与 HTML、CSS 和 JavaScript 相关的简短技巧。

鏂囩珷鏉ユ簮锛�https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-4th-june-2021-4j1b
PREV
🚀GitHub 上面向 Web 开发人员的 10 个热门项目 - 2020 年 6 月 5 日 Snowpack HTML5 Boilerplate Airbnb JavaScript 样式指南() { Definitely Typed Ant Design 机器学习系统设计 Supabase Realtime
NEXT
🚀GitHub 上面向 Web 开发者的 10 个热门项目 - 2020 年 10 月 2 日 技术面试手册 Apollo Client GGEditor 免费 React / Next.js 登陆页面模板 Renovate