🚀GitHub 上面向 Web 开发人员的 10 个热门项目 - 2021 年 7 月 30 日
tracking.js
欢迎界面
航点
Visual Studio Code 数据库客户端
创建以太坊应用程序


旗帜图标
美人鱼
Babylon.js
《热门项目》以每周新闻简报的形式提供,请访问www.iainfreestone.com注册,以确保您不会错过任何一期。
1. tracking.js
tracking.js 库将各种计算机视觉算法和技术引入浏览器环境。通过使用现代 HTML5 规范,我们使您能够进行实时颜色跟踪、人脸检测以及更多功能——所有这些都集成在一个轻量级核心(约 7 KB)和直观的界面中。

tracking.js

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

特征
浏览器支持
你可以将tracking.js插入到一些受良好支持的 HTML 元素中,例如<canvas><div><video>和 <span> <img>。
 |
 |
 |
 |
 |
| IE 9+ ✔ |
最新 ✔ |
最新 ✔ |
最新 ✔ |
最新 ✔ |
但是,如果您请求用户的摄像头(这依赖于getUserMedia API),浏览器的支持情况可能会有所不同……
2. 欢迎界面
欢迎使用 Welcome to the jungle 创建的 Welcome UI 库,这是一个使用 react、styled-components、styled-system 和 reakit 创建的可定制设计系统。
来自 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
2 - 安装核心组件以及您的 Web 应用程序所需的任何其他组件,例如,如果您只需要一个按钮……
yarn add @welcome-ui/core @welcome-ui/button
导入库和主题
入门
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'…
3. 航点
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 等数据库。
Visual Studio Code 数据库客户端
此仓库包含数据库客户端的早期源代码,新版本为闭源版本。
Visual Studio Code 数据库客户端
在线文档已迁移至https://doc.database-client.com。
本项目是 VSCode 的数据库客户端,支持MySQL/MariaDB、PostgreSQL、SQLite、Redis、ClickHouse、达梦和ElasticSearch等数据库管理器,并可作为SSH客户端使用,助您最大限度地提高工作效率!
项目站点:vscode-database-client ,中文文档

特征
安装
从 vscode marketplace 安装vscode-database-client。
连接
- 打开数据库资源管理器面板,然后单击
+按钮。
- 选择数据库类型,输入连接配置,然后单击连接按钮。

创建两个面板是因为在某些情况下,您需要同时查看 SQL 和 NoSQL 数据,您可以通过长按将面板拖动到另一个面板。
桌子
- 点击表格即可打开表格视图。
- 点击旁边的按钮……
5. 创建以太坊应用程序
只需一条命令即可创建基于以太坊的应用程序。
只需一条命令即可创建基于以太坊的应用程序。
Create Eth App 可在 macOS、Windows 和 Linux 系统上运行。
如果遇到任何问题,请提交 issue。
如有任何疑问或需要帮助,请在我们的Discord社区提问。
快速概览
yarn create eth-app my-eth-app
cd my-eth-app
yarn react-app:start
如果您之前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:

创建应用
您的本地开发机器需要安装 Node 16 或更高版本(但服务器端不需要)。您可以使用nvm(macOS/Linux)或nvm-windows在不同项目之间切换 Node 版本。
你会……
6. JSii
jsii 允许任何语言的代码与 JavaScript 类进行自然交互。正是这项技术使得 AWS 云开发工具包能够从单一代码库交付多语言库!
jsii 允许任何语言的代码与 JavaScript 类进行自然交互。正是这项技术使得 AWS 云开发工具包能够从单一代码库交付多语言库!

概述
jsii它允许任何语言的代码与 JavaScript 类自然地交互。正是这项技术使得AWS 云开发工具包能够从单一代码库交付多语言库!
用TypeScript编写的类库不仅可以用于用TypeScript或Javascript(通常情况下)编写的项目,还可以用于Python、Java、C#(以及其他.NET系列语言)等项目……
❓ 文档
请访问我们的文档网站!
jsii 工具链分布在多个代码库中:
7. 标志图标 CSS
包含所有国家/地区国旗的 SVG 格式合集,以及便于集成的 CSS 代码
🎏 精选所有国家/地区的 SVG 格式国旗合集——以及便于集成的 CSS 文件
旗帜图标
精选所有国家/地区的国旗 SVG 格式合集,并附有 CSS 代码,方便集成。查看演示。
安装
您可以直接下载整个项目,也可以通过 npm 或 Yarn 安装:
npm install flag-icons
# or
yarn add flag-icons
用法
首先,你需要导入CSS:
import "/node_modules/flag-icons/css/flag-icons.min.css";
或者使用 CDN:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.2.3/css/flag-icons.min.css"
/>
要在文本中内嵌使用国旗,请将类名.fi和.fi-xx(其中xx是国家/地区的ISO 3166-1-alpha-2 代码<span>)添加到空的 元素中。如果您想要使用方形版本的国旗,则fis还需要添加类名。例如:
<span class="fi fi-gr"></span> <span class="fi fi-gr fis"></span>
你也可以将此方法应用于任何元素,但那样的话……
8. 美人鱼
以类似于 Markdown 的方式从文本生成图表和流程图
以类似于 Markdown 的方式,从文本生成流程图或序列图等图表。

美人鱼
从类似 Markdown 的文本生成图表

实时编辑!
📖 文档| 🚀 入门指南| 🌐 CDN | 🙌 加入我们
简体中文
试用实时编辑器预览未来版本:开发|下一步


🏆 Mermaid 荣获2019 年 JS 开源奖“最激动人心的技术应用”奖项!
感谢所有参与者,感谢提交 pull request 的人,感谢回答问题的人!🙏

目录
展开内容
关于
Mermaid 是一款基于 JavaScript 的图表绘制工具,它使用类似 Markdown 的文本定义和渲染器来创建和修改复杂的图表。Mermaid 的主要目的是帮助文档编写跟上开发进度。
Doc-Rot 是一个进退两难的困境,而美人鱼则帮助解决了这个问题。
绘制图表和编写文档会耗费开发人员宝贵的时间,而且很快就会过时。但是,没有图表或文档会降低生产力,损害组织效率……
9. Babylon.js
Babylon.js 是一个功能强大、美观、简单且开放的游戏和渲染引擎,它被封装在一个友好的 JavaScript 框架中。
Babylon.js 是一个功能强大、美观、简单且开放的游戏和渲染引擎,它被封装在一个友好的 JavaScript 框架中。
Babylon.js
准备入门?使用我们的Playground直接体验 Babylon.js API 。它还包含大量示例,帮助您学习如何使用它。

有任何疑问?欢迎访问我们的官方论坛。
CDN
⚠️
警告:请勿在生产环境中使用此 CDN。我们的 CDN 仅用于向正在学习如何使用 Babylon 平台或进行小型实验的用户提供软件包。一旦您构建好应用程序并准备将其分享给更多用户,则应使用您自己的 CDN 提供所有软件包。
预览版请使用以下网址:
更多参考文献请点击此处查看。
npm
BabylonJS 及其模块已发布在 npm 上,并提供完整的类型支持。安装方法如下:
npm install babylonjs --save
或者,您现在可以依赖我们的ES6 包。使用 ES6 版本将……
10. Dinero.js
货币非常复杂,语言的基本功能不足以准确地表示它。Dinero.js 是一个 JavaScript 库,它不仅可以表示货币值,还可以执行修改、转换、比较、格式化等操作,从而让应用程序中的货币操作更加轻松安全。
使用 JavaScript 和 TypeScript 创建、计算和格式化货币。

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
⚡️快速入门
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…
观星📈
过去7天涨幅最大的股票
- 编程面试大学+2,546 星
- 公共 API +2,509 星
- NocoDB +1,038 星
- Bulletproof React +1,037 星
- Supabase +735 星
过去 7 天增长幅度最大(%)
- 防弹反应+71%
- 使用 Cookie 同意+34%
- 使用颜色+25%
- Vechai UI +17%
- 新版 CSS 重置+15%
过去 30 天涨幅最大的股票
- 公共 API +11,622 星
- 编程面试大学+5,094 星
- JavaScript 算法+3,408 星
- 3121颗星
- 免费编程书籍+3,080 星
过去 30 天增长幅度最大(%)
- 安全评分卡+179%
- Fullstack 样板+171%
- 框架信息+147%
- Astro +72%
- 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