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

🚀GitHub 上 10 个热门 Web 开发项目 - 2021 年 7 月 23 日 Fiddly NProgress useCookieConsent hook for pure JavaScript projects @ant-design/charts Welcome JSbooks regexgen Welcome to Utopia 🏝 仅限贡献者:在您的机器上安装 Utopia web3-react (beta)

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

草皮

繁琐的

NProgress

纯 JavaScript 项目的 useCookieConsent 钩子

@ant-design/charts

欢迎

JSbooks

正则表达式生成器

欢迎来到乌托邦🏝

仅限贡献者:在您的机器上安装 Utopia

web3-react(测试版)

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

1. 草坪

Turf 是一个用于空间分析的 JavaScript 库。它包括传统的空间操作、用于创建 GeoJSON 数据的辅助函数,以及数据分类和统计工具。

GitHub 标志 Turfjs /草坪

一个用 JavaScript 和 TypeScript 编写的模块化地理空间引擎。

草皮

GitHub Actions 状态 版本徽章 Gitter聊天 Open Collective 的支持者 Open Collective 上的赞助商 覆盖范围状态

一个用 JavaScript 编写的模块化地理空间引擎。

turfjs.org


Turf是一个用于空间分析的JavaScript 库。它包含传统的空间运算、用于创建GeoJSON数据的辅助函数,以及数据分类和统计工具。您可以将 Turf 作为客户端插件添加到您的网站,也可以使用Node.js在服务器端运行 Turf(详见下文)。

安装

在 Node.js 中

# get all of turf
npm install @turf/turf

# or get individual packages
npm install @turf/helpers
npm install @turf/buffer
Enter fullscreen mode Exit fullscreen mode

在浏览器中

下载压缩后的文件,并将其包含在脚本标签中。这将公开一个名为 . 的全局变量turf

<script src="turf.min.js" charset="utf-8"></script>
Enter fullscreen mode Exit fullscreen mode

您也可以直接从 CDN 中包含它:

<script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

TypeScript

每个模块都打包了 TypeScript 定义,无需 DefinitelyTyped 包。

其他语言

Turf.js 的端口…


2. 繁琐的

从您的 Readme.md 文件创建美观简洁的 HTML 页面

GitHub 标志 SaraVieira /繁琐

从您的 Readme.md 文件创建美观简洁的 HTML 页面

繁琐的

从您的 Readme.md 文件创建美观简洁的 HTML 页面

  • 🛠 无配置
  • 👩‍💻 代码高亮
  • 💯 表情符号支持
  • ✨ 创建静态文件(Prism 仅支持 JS)
  • 🏳️‍🌈 美丽的页面
  • 🦄 可定制
  • 🖼 图片压缩
  • 🧠 自定义元标签
  • 🇳🇱 CodeSandbox和 iframe 支持
yarn add fiddly --dev
Enter fullscreen mode Exit fullscreen mode
npm install fiddly --save-dev
Enter fullscreen mode Exit fullscreen mode

用法

{
  ...
  "scripts": {
    "build:demo": "fiddly",
    ....
  }
Enter fullscreen mode Exit fullscreen mode

自动部署到 Netlify 🎉

Netlify 的自述文件

这份自述文件采用白色主题

与 npx 一起使用

如果您只是想要从 Readme 中快速生成一个漂亮的 HTML 页面,但并不关心在持续部署中运行它,您也可以使用npx它来运行一次。

  npx fiddly
Enter fullscreen mode Exit fullscreen mode

在根文件夹中运行此命令,您还将获得一个公共文件夹。

选项

选项被放置在某个位置.fiddly.config.json,或者作为它fiddly中的一个键package.json……


3. NProgress

适用于 Ajax 应用的纤细进度条。灵感来自 Google、YouTube 和 Medium。

GitHub 标志 rstacruz / nprogress

对于像 YouTube、Medium 等平台上那种简洁的进度条来说

NProgress

地位 npm 版本 jsDelivr 命中

极简进度条

适用于 Ajax 应用的纤细进度条。灵感来自 Google、YouTube 和 Medium。

安装

将nprogress.jsnprogress.css添加到您的项目中。

<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>
Enter fullscreen mode Exit fullscreen mode

NProgress 可通过bowernpm获取。

$ npm install --save nprogress

也可通过unpkg CDN 获取:

基本用法

只需调用start()即可done()控制进度条。

NProgress.start();
NProgress.done();
Enter fullscreen mode Exit fullscreen mode

Turbolinks(版本 5+)

请确保您使用的是 Turbolinks 5 或更高版本,并使用以下方法:(详情请见此处

$(document).on('turbolinks:click', function() {
  NProgress.start();
});
$(document).on('turbolinks:render', function() {
  NProgress.done();
  NProgress.remove();
}
Enter fullscreen mode Exit fullscreen mode

4. 使用 Cookie 同意

用于管理 GDPR cookie 同意状态的 React hook。

GitHub 标志 引进灌木丛/使用 Cookie 同意

用于管理 GDPR cookie 同意状态的小型(压缩后约 1kB)钩子。

纯 JavaScript 项目的 useCookieConsent 钩子

建造 NPM 版本 NPM 下载 Codecov 压缩后的大小 执照

“请我喝杯咖啡”

用于 GDPR Cookie 同意的无头状态管理

  • 无头模式——你来负责你的样式,我们负责逻辑。
  • 基于 Hook 的实现方式——对于 React 开发人员来说非常直观,但也可以在任何 JavaScript 应用程序中使用。
  • - 小于2kBgzip 压缩后的大小。

碳

库特定软件包

本仓库旨在与框架无关,因此您可以在任何 JavaScript 项目中使用它。如果您使用我们支持的 UI 库,为了获得最佳体验,您应该使用该库对应的软件包。

描述

本软件包遵循GDPR Cookie指南,该指南描述了 GDPR 合规性要求。此钩子主要关注处理不同类型 Cookie 的同意状态,如页面“Cookie 类型”部分所述。总结上述文档,Cookie 的分类方式有三种:

  • Cookie 有效期
    • 会话 cookie
    • 持久性 Cookie
  • 饼干来源
    • 第一方 Cookie
    • 第三方 Cookie
  • Cookie 用途





5. 蚂蚁设计图

一个基于 G2Plot、G6、X6、L7 的 React 图表库。

GitHub 标志 ant-design / ant-design-charts

React 图表库

@ant-design/charts

一个基于G2G6X6L7 的React 图表库。

npm npm GitHub 星标 npm 许可证

网站快速入门示例常见问题解答

案件

统计图表

✨ 特点

  • 便于使用
  • TypeScript
  • 漂亮又轻巧
  • 响应式
  • 评书

📦 安装

$ npm install @ant-design/charts
Enter fullscreen mode Exit fullscreen mode

🔨 用法

import React from 'react';
import { Line } from '@ant-design/charts';
const Page: React.FC = () => {
  const data = [
    { year: '1991', value: 3 },
    { year: '1992', value: 4 },
    { year: '1993', value: 3.5 },
    { year: '1994', value: 5 },
    { year: '1995', value: 4.9 },
    { year: '1996', value: 6 },
    { year: '1997', value: 7 },
    { year: '1998', value: 
Enter fullscreen mode Exit fullscreen mode

6.面向开发者的实用密码学

这是一本面向开发人员的现代实用密码学书籍,包含代码示例,涵盖了哈希、MAC 码、对称密码和认证加密等核心概念。

GitHub 标志 nakov /面向开发者的实用密码学书籍

面向开发者的实用密码学:哈希、消息认证码 (MAC)、密钥派生、DHKE、对称和非对称密码、公钥密码系统、RSA、椭圆曲线、椭圆曲线密码学 (ECC)、secp256k1、ECDH、ECIES、数字签名、ECDSA、EdDSA

欢迎

注意:本书尚未完成!我仍在撰写部分章节。完成后,我会以PDF和EPUB格式发布。请耐心等待。

面向开发者的实用密码学——斯维特林·纳科夫著免费电子书——封面

这是一本面向开发人员的现代实用密码学书籍包含代码示例,涵盖以下核心概念:哈希(如 SHA-3 和 BLAKE2)、消息认证码(如 HMAC 和 GMAC)、密钥派生函数(如 Scrypt、Argon2)、密钥协商协议(如 DHKE、ECDH)、对称密码(如 AES 和 ChaCha20、密码块模式、认证加密、AEAD、AES-GCM、ChaCha20-Poly1305)、非对称密码公钥密码系统(RSA、ECC、ECIES)、椭圆曲线密码学(ECC、secp256k1、curve25519)、数字签名(ECDSA 和 EdDSA)、安全随机数(PRNG、CSRNG)和量子安全密码学,以及密码和开发人员工具,并提供大量Python 和其他语言的代码示例。

作者:Svetlin Nakov博士 - https://nakov.com

贡献者:Milen Stefanov、Marina Shideroff

赞助商:SoftUni(软件大学) - https://softuni.org

ISBN:978-619-00-0870-5


7. JSbooks

JSbooks 是一个展示最佳免费 JavaScript 电子书的网站。

GitHub 标志 revolunet / JSbooks

免费 JavaScript 电子书目录

JSbooks

JSbooks 是一个展示最佳免费 JavaScript 电子书的网站。

在这里,您可以找到关于您最喜欢的编程语言的最佳出版物,而且无需花费任何费用!

请访问:http://jsbooks.revolunet.com

我们也有Python版本:http://pythonbooks.revolunet.com

如何添加您的出版物

如果你找到一本不错的关于 Javascript 的电子书,欢迎 fork JSbooks 并按照以下几个步骤将其添加进来:

  • 将信息粘贴到 JSON 文件中。
  • 请附上封面的 .png 文件:小于 100Ko。
  • 提交一个拉取请求。

或者,您也可以发送电子邮件至JSbooks@revolunet.com提供书籍信息。

提前感谢!

历史

从历史上看,这个项目原本应该是苹果公司一款实验性的“报刊亭”应用程序。

经过几周的努力,我们发现仅仅拥有一个功能完善的应用程序是不够的。

您还需要遵守各种苹果公司的指导方针并使用一些苹果公司的库才能与“报刊亭”兼容。

所以…


8. 正则表达式生成器

生成与一组字符串匹配的正则表达式。

GitHub 标志 devongovett /正则表达式生成器

生成与一组字符串匹配的正则表达式

正则表达式生成器

生成与一组字符串匹配的正则表达式。

安装

regexgen可以使用npm安装:

npm install regexgen

例子

最简单的用法就是直接传递一个字符串数组regexgen

const regexgen = require('regexgen');

regexgen(['foobar', 'foobaz', 'foozap', 'fooza']); // => /foo(?:zap?|ba[rz])/
Enter fullscreen mode Exit fullscreen mode

您也可以Trie直接使用该类:

const {Trie} = require('regexgen');

let t = new Trie;
t.add('foobar');
t.add('foobaz');

t.toRegExp(); // => /fooba[rz]/
Enter fullscreen mode Exit fullscreen mode

命令行界面

regexgen它还提供了一个简单的 CLI,可以使用命令行输入生成正则表达式。

$ regexgen
Usage: regexgen [-gimuy] string1 string2 string3...
Enter fullscreen mode Exit fullscreen mode

第一个可选参数是要添加到正则表达式中的标志-i(例如,用于不区分大小写的匹配)。


9. 乌托邦

Utopia 是一个集成的 React 设计和开发环境。它以 React 代码为唯一数据源,并允许您通过编辑代码和使用一系列设计工具来实时更改组件。

GitHub 标志 具体乌托邦/乌托邦

设计❤️代码

相对置信区间 所有贡献者

欢迎来到乌托邦🏝

Utopia 是一个集成的 React 设计和开发环境。它以 React 代码为唯一数据源,并允许您通过编辑代码和使用一系列设计工具来实时更改组件。它目前仍处于早期阶段,但您可以立即试用,查看示例项目,或在我们的博客上了解更多信息

立即体验乌托邦!

乌托邦截图

启动编辑器

仅限贡献者:在您的机器上安装 Utopia

请注意:要使用 Utopia,请访问utopia.app。本地安装仅用于 Utopia 本身的功能开发:速度较慢,有时甚至会慢很多。它仍然需要连接到我们的服务器。如果您将其安装在本地,则无法编辑计算机上文件系统中的项目。

要为 Utopia 做贡献,您需要克隆代码库,安装必要的组件,然后运行编辑器……


10. web3-react

一个简单、可扩展性强、依赖项最少的框架,用于构建现代以太坊去中心化应用(dApp)。

GitHub 标志 Uniswap / web3-react

一个简单、可扩展性强、依赖项最少的框架,用于构建现代以太坊去中心化应用(dApp)。

web3-react(测试版)

置信区间

正在寻找此库的先前版本?它位于v6 分支上。

这是示例的托管版本

包裹

开始使用

  • yarn
  • yarn start

除了以监视模式编译每个包之外,这还会启动localhost:3000上的/example 服务

运行测试

  • yarn build
  • yarn test --watch

发布

  • yarn lerna publish [--dist-tag]

文档

web3-react 目前仍处于 beta 测试阶段,因此文档目前还比较简略。/example示例、TSDoc 注释以及源代码是了解其工作原理的最佳途径。随着开发的推进,我们将优先完善文档!

升级连接器依赖项

某些连接器有一个或多个……


观星📈

过去7天涨幅最大的股票

  1. 公共 API +3,021 星
  2. Awesome-Selfhosted +1,104 星
  3. Astro +977颗星
  4. 编程面试大学+967 星
  5. Discord.js +754 星

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

  1. 使用颜色+37%
  2. 百利甜酒+35%
  3. Astro +21%
  4. Leetcode 题型+20%
  5. 正面+19%

过去 30 天涨幅最大的股票

  1. 公共 API +9,308 星
  2. 《秘密知识之书》 +4,982 星
  3. 面向初学者的 Web 开发+4,316 星
  4. JavaScript 算法+4,018 星
  5. 30 秒代码+3,599 颗星

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

  1. 安全评分卡+179%
  2. 类型状态+152%
  3. Fullstack 样板+146%
  4. SigNoz +106%
  5. Astro +93%

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

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

文章来源:https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-23rd-july-2021-524