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

🚀GitHub 上 10 个热门 Web 开发项目 - 2021 年 7 月 30 日 tracking.js Welcome UI Waypoint Database Client for Visual Studio Code Create Eth App flag-icons Mermaid Babylon.js

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

tracking.js

欢迎界面

航点

Visual Studio Code 数据库客户端

创建以太坊应用程序搭配 Prettier 承诺友好 许可证:MIT 欢迎公关稿

jsii

旗帜图标

美人鱼

Babylon.js

《热门项目》以每周新闻简报的形式提供,请访问www.iainfreestone.com注册,以确保您不会错过任何一期。

1. tracking.js

tracking.js 库将各种计算机视觉算法和技术引入浏览器环境。通过使用现代 HTML5 规范,我们使您能够进行实时颜色跟踪、人脸检测以及更多功能——所有这些都集成在一个轻量级核心(约 7 KB)和直观的界面中。

GitHub 标志 eduardolundgren / tracking.js

一种用于网络计算机视觉的现代方法

横幅

👉 #395 👈


tracking.js

构建状态 开发依赖项状态

tracking.js 库将各种计算机视觉算法和技术引入浏览器环境。通过使用现代 HTML5 规范,我们使您能够进行实时颜色跟踪、人脸检测以及更多功能——所有这些都集成在一个轻量级核心(约 7 KB)和直观的界面中。

安装

可通过Bowernpm安装,或下载 zip 文件安装:

bower install tracking
npm install tracking

示例

演示 1 演示 2 演示 3 演示 4 演示 5

特征

浏览器支持

你可以将tracking.js插入到一些受良好支持的 HTML 元素中,例如<canvas><div><video>和 <span> <img>

IE 铬合金 火狐浏览器 歌剧 狩猎之旅
IE 9+ ✔ 最新 ✔ 最新 ✔ 最新 ✔ 最新 ✔

但是,如果您请求用户的摄像头(这依赖于getUserMedia API),浏览器的支持情况可能会有所不同……


2. 欢迎界面

欢迎使用 Welcome to the jungle 创建的 Welcome UI 库,这是一个使用 react、styled-components、styled-system 和 reakit 创建的可定制设计系统。

GitHub 标志 WTTJ /欢迎界面

来自 Welcome to the jungle (@wttj) 的可定制设计系统,采用 react、typescript、styled-components、ariakit 和满满的爱 💛 在这里,您可以找到创建令人愉悦的 webapp 所需的所有核心组件。

欢迎界面

欢迎使用Welcome to the jungle创建的Welcome UI 库,这是一个可定制的设计系统,包含 react、typescript、styled-components、styled-system 和 ariakit。

在这里,您将找到创建一款出色的 Web 应用程序所需的所有核心组件。

🌴探索所有组成部分


执照 代码格式化 代码风格 欢迎公关稿 传统承诺


安装

1 - 安装下面列出的对等依赖项

yarn add @xstyled/styled-components react styled-components
Enter fullscreen mode Exit fullscreen mode

2 - 安装核心组件以及您的 Web 应用程序所需的任何其他组件,例如,如果您只需要一个按钮……

yarn add @welcome-ui/core @welcome-ui/button
Enter fullscreen mode Exit fullscreen mode

导入库和主题

入门

import React from 'react'
import { createTheme, WuiProvider } from '@welcome-ui/core'
import { Button } from '@welcome-ui/button'
// Add theme options (if you want)
const options = {
  defaultFontFamily: 'Helvetica',
  headingFontFamily: 'Georgia',
  colors: {
    primary: {
      500: '#124C80',
    },
    success: {
      500: '#32CD32'
Enter fullscreen mode Exit fullscreen mode

3. 航点

Waypoint 允许开发人员将应用程序的构建、部署和发布生命周期定义为代码,通过一致且可重复的工作流程缩短部署交付时间。

GitHub 标志 hashicorp / waypoint

一款可以在任何平台上构建、部署和发布任何应用程序的工具。

图像


HashiCorp Waypoint 社区版已停止维护。如需了解 Waypoint 新愿景的更多信息,请查看此博客文章HCP Waypoint 文档


航点

Waypoint 允许开发人员将应用程序的构建、部署和发布生命周期定义为代码,通过一致且可重复的工作流程缩短部署交付时间。

Waypoint 开箱即用支持多种构建方法和目标平台,并且可以通过插件轻松添加更多支持:

  • 云原生构建包
  • Docker
  • Kubernetes
  • AWS EC2 和 ECS
  • Azure容器实例
  • Google Cloud Run
  • 还有更多……

Waypoint 可在 Linux、Mac OS X 和 Windows 系统上运行。

请注意:我们非常重视 Waypoint 的安全性和用户的信任。如果您认为在 Waypoint 中发现了安全问题,请通过security@hashicorp.com联系我们,负责任地披露该问题。

快速入门

快速入门……


4. VS Code 数据库客户端

适用于 Visual Studio Code 的数据库客户端。它支持 MySQL/MariaDB、Microsoft SQL Server、PostgreSQL、SQLite、MongoDB、Redis 和 ElasticSearch 等数据库。

GitHub 标志 cweijan / vscode-database-client

Visual Studio Code 数据库客户端

此仓库包含数据库客户端的早期源代码,新版本为闭源版本。

Visual Studio Code 数据库客户端

在线文档已迁移至https://doc.database-client.com


GitHub

本项目是 VSCode 的数据库客户端,支持MySQL/MariaDB、PostgreSQL、SQLite、Redis、ClickHouse、达梦ElasticSearch等数据库管理器,并可作为SSH客户端使用,助您最大限度地提高工作效率!

项目站点:vscode-database-client ,中文文档

标识

特征

安装

从 vscode marketplace 安装vscode-database-client

连接

  1. 打开数据库资源管理器面板,然后单击+按钮。
  2. 选择数据库类型,输入连接配置,然后单击连接按钮。

联系

创建两个面板是因为在某些情况下,您需要同时查看 SQL 和 NoSQL 数据,您可以通过长按将面板拖动到另一个面板。

桌子

  1. 点击表格即可打开表格视图。
  2. 点击旁边的按钮……

5. 创建以太坊应用程序

只需一条命令即可创建基于以太坊的应用程序。

GitHub 标志 WalletConnect /创建以太坊应用

使用一条命令创建基于以太坊的应用程序

创建以太坊应用程序搭配 Prettier 承诺友好 许可证:MIT 欢迎公关稿

只需一条命令即可创建基于以太坊的应用程序。

Create Eth App 可在 macOS、Windows 和 Linux 系统上运行。
如果遇到任何问题,请提交 issue
如有任何疑问或需要帮助,请在我们的Discord社区提问。

快速概览

yarn create eth-app my-eth-app
cd my-eth-app
yarn react-app:start
Enter fullscreen mode Exit fullscreen mode

如果您之前create-eth-app通过全局安装过yarn global add create-eth-app,我们建议您使用卸载该软件包yarn global remove create-eth-app,并使用yarn create eth-app简写形式来确保您使用的是最新版本。

然后打开http://localhost:3000/查看您的应用。
准备部署到生产环境时,使用以下命令创建压缩包yarn run react-app:build

yarn react-app:start

创建应用

您的本地开发机器需要安装 Node 16 或更高版本(但服务器端不需要)。您可以使用nvm(macOS/Linux)或nvm-windows在不同项目之间切换 Node 版本。

你会……


6. JSii

jsii 允许任何语言的代码与 JavaScript 类进行自然交互。正是这项技术使得 AWS 云开发工具包能够从单一代码库交付多语言库!

GitHub 标志 aws / jsii

jsii 允许任何语言的代码与 JavaScript 类进行自然交互。正是这项技术使得 AWS 云开发工具包能够从单一代码库交付多语言库!

jsii

加入聊天:https://cdk.Dev 所有贡献者 构建状态 npm Docker

概述

jsii它允许任何语言的代码与 JavaScript 类自然地交互。正是这项技术使得AWS 云开发工具包能够从单一代码库交付多语言库!

用TypeScript编写的类库不仅可以用于用TypeScriptJavascript(通常情况下)编写的项目,还可以用于PythonJavaC#(以及其他.NET系列语言)等项目……

❓ 文档

请访问我们的文档网站

jsii 工具链分布在多个代码库中:

  • aws/jsii-compilerjsii编译器的维护位置(但该1.x系列中的版本除外,这些版本在此存储库中维护)。
  • aws/jsii-rosettajsii-rosetta示例代码转写工具的维护位置(但该1.x系列中的版本除外,这些版本维护在本存储库中)。
  • aws/jsii是维护其余工具链的地方,包括
    • @jsii/spec.jsii定义程序集规范的软件包
    • jsii-config

7. 标志图标 CSS

包含所有国家/地区国旗的 SVG 格式合集,以及便于集成的 CSS 代码

GitHub 标志 lipis /旗帜图标

🎏 精选所有国家/地区的 SVG 格式国旗合集——以及便于集成的 CSS 文件

旗帜图标

精选所有国家/地区的国旗 SVG 格式合集,并附有 CSS 代码,方便集成。查看演示

安装

您可以直接下载整个项目,也可以通过 npm 或 Yarn 安装:

npm install flag-icons
# or
yarn add flag-icons
Enter fullscreen mode Exit fullscreen mode

用法

首先,你需要导入CSS:

import "/node_modules/flag-icons/css/flag-icons.min.css";
Enter fullscreen mode Exit fullscreen mode

或者使用 CDN:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.2.3/css/flag-icons.min.css"
/>
Enter fullscreen mode Exit fullscreen mode

要在文本中内嵌使用国旗,请将类名.fi.fi-xx(其中xx国家/地区的ISO 3166-1-alpha-2 代码<span>)添加到空的 元素中。如果您想要使用方形版本的国旗,则fis还需要添加类名。例如:

<span class="fi fi-gr"></span> <span class="fi fi-gr fis"></span>
Enter fullscreen mode Exit fullscreen mode

你也可以将此方法应用于任何元素,但那样的话……


8. 美人鱼

以类似于 Markdown 的方式从文本生成图表和流程图

GitHub 标志 mermaid-js /美​​人鱼

以类似于 Markdown 的方式,从文本生成流程图或序列图等图表。

美人鱼

从类似 Markdown 的文本生成图表

实时编辑!

📖 文档| 🚀 入门指南| 🌐 CDN | 🙌 加入我们

简体中文

试用实时编辑器预览未来版本:开发|下一步



NPM 构建 CI 状态 npm 压缩后的 gzip 打包大小 覆盖范围状态 CDN状态 NPM 下载 加入我们的Discord! Twitter关注 由 Argos 视觉测试公司承保 OpenSSF 记分卡

🏆 Mermaid 荣获2019 年 JS 开源奖“最激动人心的技术应用”奖项!

感谢所有参与者,感谢提交 pull request 的人,感谢回答问题的人!🙏

深入探索 Mermaid.js,获取真实案例、创建者提供的技巧和窍门……首部 Mermaid 官方书籍现已发售,快来看看吧!

目录

展开内容

关于

Mermaid 是一款基于 JavaScript 的图表绘制工具,它使用类似 Markdown 的文本定义和渲染器来创建和修改复杂的图表。Mermaid 的主要目的是帮助文档编写跟上开发进度。

Doc-Rot 是一个进退两难的困境,而美人鱼则帮助解决了这个问题。

绘制图表和编写文档会耗费开发人员宝贵的时间,而且很快就会过时。但是,没有图表或文档会降低生产力,损害组织效率……


9. Babylon.js

Babylon.js 是一个功能强大、美观、简单且开放的游戏和渲染引擎,它被封装在一个友好的 JavaScript 框架中。

GitHub 标志 BabylonJS / Babylon.js

Babylon.js 是一个功能强大、美观、简单且开放的游戏和渲染引擎,它被封装在一个友好的 JavaScript 框架中。

Babylon.js

准备入门?使用我们的Playground直接体验 Babylon.js API 。它还包含大量示例,帮助您学习如何使用它。

npm 版本 构建状态 解决问题的平均时间 未解决问题百分比 构建尺寸 叽叽喳喳 Discourse 用户

有任何疑问?欢迎访问我们的官方论坛

CDN

⚠️ 警告:请勿在生产环境中使用此 CDN。我们的 CDN 仅用于向正在学习如何使用 Babylon 平台或进行小型实验的用户提供软件包。一旦您构建好应用程序并准备将其分享给更多用户,则应使用您自己的 CDN 提供所有软件包。

预览版请使用以下网址:

更多参考文献请点击此处查看。

npm

BabylonJS 及其模块已发布在 npm 上,并提供完整的类型支持。安装方法如下:

npm install babylonjs --save

或者,您现在可以依赖我们的ES6 包。使用 ES6 版本将……


10. Dinero.js

货币非常复杂,语言的基本功能不足以准确地表示它。Dinero.js 是一个 JavaScript 库,它不仅可以表示货币值,还可以执行修改、转换、比较、格式化等操作,从而让应用程序中的货币操作更加轻松安全。

GitHub 标志 dinerojs / dinero.js

使用 JavaScript 和 TypeScript 创建、计算和格式化货币。

Dinero.js

稳定性:α CircleCI NPM

Dinero.js 允许您使用 JavaScript 和 TypeScript 安全地创建、计算和格式化货币。v2.dinerojs.com/
docs


货币非常复杂,语言的基本功能不足以准确地表示它。Dinero.js 是一个 JavaScript 库,它不仅可以表示货币值,还可以执行修改、转换、比较、格式化等操作,从而让应用程序中的货币操作更加轻松安全。

ℹ️ Dinero.js v2 目前处于 alpha 测试阶段。如需了解 v1 版本,请查看v1分支文档

📦 安装

npm install dinero.js@alpha

# or

yarn add dinero.js@alpha
Enter fullscreen mode Exit fullscreen mode

⚡️快速入门

Dinero对象数量极少。每个函数都dinero.js没有副作用,因此您可以只打包实际使用的部分。

import { USD } from '@dinero.js/currencies';
import { dinero, add } from 'dinero.js';
const d1 = dinero({ amount: 500, currency: USD });
const d2 = dinero({ amount: 800, currency
Enter fullscreen mode Exit fullscreen mode

观星📈

过去7天涨幅最大的股票

  1. 编程面试大学+2,546 星
  2. 公共 API +2,509 星
  3. NocoDB +1,038 星
  4. Bulletproof React +1,037 星
  5. Supabase +735 星

过去 7 天增长幅度最大(%)

  1. 防弹反应+71%
  2. 使用 Cookie 同意+34%
  3. 使用颜色+25%
  4. Vechai UI +17%
  5. 新版 CSS 重置+15%

过去 30 天涨幅最大的股票

  1. 公共 API +11,622 星
  2. 编程面试大学+5,094 星
  3. JavaScript 算法+3,408 星
  4. 3121颗星
  5. 免费编程书籍+3,080 星

过去 30 天增长幅度最大(%)

  1. 安全评分卡+179%
  2. Fullstack 样板+171%
  3. 框架信息+147%
  4. Astro +72%
  5. 50天内完成50个项目,完成率提高65%

《热门项目》以每周新闻简报的形式提供,请访问www.iainfreestone.com注册,以确保您不会错过任何一期。

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

文章来源:https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-30th-july-2021-bnc