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

繁琐的
NProgress
纯 JavaScript 项目的 useCookieConsent 钩子
@ant-design/charts
欢迎
JSbooks
正则表达式生成器
欢迎来到乌托邦🏝
仅限贡献者:在您的机器上安装 Utopia
web3-react(测试版)
《热门项目》以每周新闻简报的形式提供,请访问www.iainfreestone.com注册,以确保您不会错过任何一期。
1. 草坪
Turf 是一个用于空间分析的 JavaScript 库。它包括传统的空间操作、用于创建 GeoJSON 数据的辅助函数,以及数据分类和统计工具。
一个用 JavaScript 和 TypeScript 编写的模块化地理空间引擎。

一个用 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
在浏览器中
下载压缩后的文件,并将其包含在脚本标签中。这将公开一个名为 . 的全局变量turf。
<script src="turf.min.js" charset="utf-8"></script>
您也可以直接从 CDN 中包含它:
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>
TypeScript
每个模块都打包了 TypeScript 定义,无需 DefinitelyTyped 包。
其他语言
Turf.js 的端口…
2. 繁琐的
从您的 Readme.md 文件创建美观简洁的 HTML 页面
从您的 Readme.md 文件创建美观简洁的 HTML 页面
繁琐的
从您的 Readme.md 文件创建美观简洁的 HTML 页面
- 🛠 无配置
- 👩💻 代码高亮
- 💯 表情符号支持
- ✨ 创建静态文件(Prism 仅支持 JS)
- 🏳️🌈 美丽的页面
- 🦄 可定制
- 🖼 图片压缩
- 🧠 自定义元标签
- 🇳🇱 CodeSandbox和 iframe 支持
yarn add fiddly --dev
npm install fiddly --save-dev
用法
{
...
"scripts": {
"build:demo": "fiddly",
....
}
自动部署到 Netlify 🎉
Netlify 的自述文件
这份自述文件采用白色主题
与 npx 一起使用
如果您只是想要从 Readme 中快速生成一个漂亮的 HTML 页面,但并不关心在持续部署中运行它,您也可以使用npx它来运行一次。
npx fiddly
在根文件夹中运行此命令,您还将获得一个公共文件夹。
选项
选项被放置在某个位置.fiddly.config.json,或者作为它fiddly中的一个键package.json……
3. NProgress
适用于 Ajax 应用的纤细进度条。灵感来自 Google、YouTube 和 Medium。
对于像 YouTube、Medium 等平台上那种简洁的进度条来说
NProgress

极简进度条
适用于 Ajax 应用的纤细进度条。灵感来自 Google、YouTube 和 Medium。
安装
将nprogress.js和nprogress.css添加到您的项目中。
<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>
NProgress 可通过bower和npm获取。
$ npm install --save nprogress
也可通过unpkg CDN 获取:
基本用法
只需调用start()即可done()控制进度条。
NProgress.start();
NProgress.done();
Turbolinks(版本 5+)
请确保您使用的是 Turbolinks 5 或更高版本,并使用以下方法:(详情请见此处)
$(document).on('turbolinks:click', function() {
NProgress.start();
});
$(document).on('turbolinks:render', function() {
NProgress.done();
NProgress.remove();
}…
4. 使用 Cookie 同意
用于管理 GDPR cookie 同意状态的 React hook。
用于管理 GDPR cookie 同意状态的小型(压缩后约 1kB)钩子。
纯 JavaScript 项目的 useCookieConsent 钩子


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

库特定软件包
本仓库旨在与框架无关,因此您可以在任何 JavaScript 项目中使用它。如果您使用我们支持的 UI 库,为了获得最佳体验,您应该使用该库对应的软件包。
描述
本软件包遵循GDPR Cookie指南,该指南描述了 GDPR 合规性要求。此钩子主要关注处理不同类型 Cookie 的同意状态,如本页面“Cookie 类型”部分所述。总结上述文档,Cookie 的分类方式有三种:
- Cookie 有效期
- 饼干来源
- Cookie 用途
5. 蚂蚁设计图
一个基于 G2Plot、G6、X6、L7 的 React 图表库。
@ant-design/charts
案件
统计图表

✨ 特点
- 便于使用
- TypeScript
- 漂亮又轻巧
- 响应式
- 评书
📦 安装
$ npm install @ant-design/charts
🔨 用法
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: …
6.面向开发者的实用密码学
这是一本面向开发人员的现代实用密码学书籍,包含代码示例,涵盖了哈希、MAC 码、对称密码和认证加密等核心概念。
面向开发者的实用密码学:哈希、消息认证码 (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 电子书的网站。
JSbooks
JSbooks 是一个展示最佳免费 JavaScript 电子书的网站。
在这里,您可以找到关于您最喜欢的编程语言的最佳出版物,而且无需花费任何费用!
请访问:http://jsbooks.revolunet.com
我们也有Python版本:http://pythonbooks.revolunet.com
如何添加您的出版物
如果你找到一本不错的关于 Javascript 的电子书,欢迎 fork JSbooks 并按照以下几个步骤将其添加进来:
- 将信息粘贴到 JSON 文件中。
- 请附上封面的 .png 文件:小于 100Ko。
- 提交一个拉取请求。
或者,您也可以发送电子邮件至JSbooks@revolunet.com提供书籍信息。
提前感谢!
历史
从历史上看,这个项目原本应该是苹果公司一款实验性的“报刊亭”应用程序。
经过几周的努力,我们发现仅仅拥有一个功能完善的应用程序是不够的。
您还需要遵守各种苹果公司的指导方针并使用一些苹果公司的库才能与“报刊亭”兼容。
所以…
8. 正则表达式生成器
生成与一组字符串匹配的正则表达式。
正则表达式生成器
生成与一组字符串匹配的正则表达式。
安装
regexgen可以使用npm安装:
例子
最简单的用法就是直接传递一个字符串数组regexgen:
const regexgen = require('regexgen');
regexgen(['foobar', 'foobaz', 'foozap', 'fooza']); // => /foo(?:zap?|ba[rz])/
您也可以Trie直接使用该类:
const {Trie} = require('regexgen');
let t = new Trie;
t.add('foobar');
t.add('foobaz');
t.toRegExp(); // => /fooba[rz]/
命令行界面
regexgen它还提供了一个简单的 CLI,可以使用命令行输入生成正则表达式。
$ regexgen
Usage: regexgen [-gimuy] string1 string2 string3...
第一个可选参数是要添加到正则表达式中的标志-i(例如,用于不区分大小写的匹配)。
…
9. 乌托邦
Utopia 是一个集成的 React 设计和开发环境。它以 React 代码为唯一数据源,并允许您通过编辑代码和使用一系列设计工具来实时更改组件。

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

启动编辑器
仅限贡献者:在您的机器上安装 Utopia
请注意:要使用 Utopia,请访问utopia.app。本地安装仅用于 Utopia 本身的功能开发:速度较慢,有时甚至会慢很多。它仍然需要连接到我们的服务器。如果您将其安装在本地,则无法编辑计算机上文件系统中的项目。
要为 Utopia 做贡献,您需要克隆代码库,安装必要的组件,然后运行编辑器……
10. web3-react
一个简单、可扩展性强、依赖项最少的框架,用于构建现代以太坊去中心化应用(dApp)。
一个简单、可扩展性强、依赖项最少的框架,用于构建现代以太坊去中心化应用(dApp)。
web3-react(测试版)

正在寻找此库的先前版本?它位于v6 分支上。
这是示例的托管版本。
包裹
开始使用
除了以监视模式编译每个包之外,这还会启动localhost:3000上的/example 服务。
运行测试
yarn build
yarn test --watch
发布
yarn lerna publish [--dist-tag]
文档
web3-react 目前仍处于 beta 测试阶段,因此文档目前还比较简略。/example示例、TSDoc 注释以及源代码是了解其工作原理的最佳途径。随着开发的推进,我们将优先完善文档!
升级连接器依赖项
某些连接器有一个或多个……
观星📈
过去7天涨幅最大的股票
- 公共 API +3,021 星
- Awesome-Selfhosted +1,104 星
- Astro +977颗星
- 编程面试大学+967 星
- Discord.js +754 星
过去 7 天增长幅度最大(%)
- 使用颜色+37%
- 百利甜酒+35%
- Astro +21%
- Leetcode 题型+20%
- 正面+19%
过去 30 天涨幅最大的股票
- 公共 API +9,308 星
- 《秘密知识之书》 +4,982 星
- 面向初学者的 Web 开发+4,316 星
- JavaScript 算法+4,018 星
- 30 秒代码+3,599 颗星
过去 30 天增长幅度最大(%)
- 安全评分卡+179%
- 类型状态+152%
- Fullstack 样板+146%
- SigNoz +106%
- Astro +93%
《热门项目》以每周新闻简报的形式提供,请访问www.iainfreestone.com注册,以确保您不会错过任何一期。
如果你喜欢这篇文章,可以关注我的推特账号,我会定期发布与HTML、CSS和JavaScript相关的实用技巧。
文章来源:https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-23rd-july-2021-524