🚀GitHub 上针对 Web 开发者的 10 个热门项目 - 2022 年 2 月 11 日 zx React Awesome Reveal Mailwind Staticman 安装入门 ma​​tch-sorter find-up mande

2025-06-08

🚀GitHub 上面向 Web 开发者的 10 个热门项目 - 2022 年 2 月 11 日

Zx 标志佐克

React Awesome 揭秘

邮件风

静电人覆盖范围 构建状态 JavaScript 样式指南

安装

入门

匹配分类器

查找

曼德ci npm 包 代码验证 谢谢

热门项目以每周新闻通讯的形式提供,请在Stargazing.dev上注册以确保您不会错过任何一期。

1. 新泽西州

njt(npm 跳转到):npm 包的快速导航工具

GitHub 徽标 卡奇卡耶夫/ njt

njt(npm 跳转到):npm 包的快速导航工具

🐸 njt 🐸

🐸 npm 跳转到 🐸
njt.vercel.app

您是否会在搜索引擎中输入软件包名称,然后导航到其源代码、主页、更新日志等等?🕐🕑🕒🕓🕔

通过快速跳转到正确的 URL,可以节省数千次五秒钟的时间:

🐸✨🐸✨🐸
njt <package> [destination]
🐸✨🐸✨🐸
Enter fullscreen mode Exit fullscreen mode

可用目的地

  • b→ 在bundlephobia.com上估算包裹成本
  • c→ 变更日志
  • g→ github(gitlab 等)仓库根目录
  • h→ 主页(别名为w网站或d文档)
  • i→ 问题
  • n→ npmjs.com上的软件包信息
  • p→ 拉取请求(别名与m合并请求相同)
  • r→ GitHub 发布列表
  • s→ 源(通常与存储库根目录相同,但如果是 monorepo,则可以是其子目录)
  • t→ git 标签列表
  • u→ 在unpkg.com上预览软件包内容
  • v→ npmjs.com上的软件包版本列表(含日期)
  • y→ 包裹页面在…

2.zx

一个编写更优质脚本的工具。Bash 很棒,但说到编写脚本,它就更棒了。JavaScript 是完美的选择,但使用标准 Node.js 库之前需要额外考虑。zx 包提供了 child_process 的实用包装器,可以转义参数并提供合理的默认值。

GitHub 徽标 谷歌/ zx

编写更好脚本的工具

Zx 标志佐克

#!/usr/bin/env zx

await $`cat package.json | grep name`

const branch = await $`git branch --show-current`
await $`dep deploy --branch=${branch}`

await Promise.all([
  $`sleep 1; echo 1`,
  $`sleep 2; echo 2`,
  $`sleep 3; echo 3`,
])

const name = 'foo bar'
await $`mkdir /tmp/${name}`
Enter fullscreen mode Exit fullscreen mode

Bash 很棒,但在编写更复杂的脚本时,许多人更喜欢更便捷的编程语言。JavaScript 是一个完美的选择,但 Node.js 标准库在使用前需要额外的考虑。该zx包提供了实用的包装器child_process,转义了参数并提供了合理的默认值。

安装

npm install zx
Enter fullscreen mode Exit fullscreen mode

文档

阅读google.github.io/zx上的文档

执照

Apache-2.0

免责声明:这不是 Google 官方支持的产品。


3. React Awesome Reveal

使用 Intersection Observer API 和 CSS Animations 添加显示动画的 React 组件

GitHub 徽标 awesome-reveal / react-awesome-reveal

使用 Intersection Observer API 和 CSS Animations 来 React 组件添加显示动画。

React Awesome 揭秘

版本 最后提交 下载 尺寸 执照 在 Openbase 上评分

提示

如果您喜欢这个库,请考虑支持它的创建者

React Awesome Reveal是一个用 TypeScript 编写的 React 应用库,它使用 Intersection Observer API 添加显示动画,以检测元素何时出现在视口中。动画由Emotion内部提供,并以 CSS 动画的形式实现,以充分利用硬件加速。

目录

特征

  • 🎁现代堆栈– 它是为现代 React 构建的,并支持 React 18
  • 🏷 TypeScript 支持– 它用 TypeScript 编写,以改进 DX
  • 🍃轻量级– 对你的项目占用极小的空间
  • ⚙️使用原生 API – 所有浏览器现在都支持 Intersection Observer 和 CSS Animations
  • 🚀快速– 由于使用而获得如黄油般顺滑的体验……





4. Mailwind

使用 Tailwind CSS 设计 HTML 电子邮件。

GitHub 徽标 soheilpro / mailwind

使用 Tailwind CSS 设计 HTML 电子邮件。

邮件风

使用 Tailwind CSS 设计 HTML 电子邮件。

Tailwind 让网站设计变得非常简单,为什么不用它来设计 HTML 邮件呢?我一直在用它设计volt.fmpikaso.me,它让我的工作轻松了很多。

安装

npm install -g mailwind

用法

使用 Tailwind 实用程序类设计您的 HTML 电子邮件,就像您通常在 Web 上设计电子邮件一样。

然后运行以下命令生成相应的CSS文件:

mailwind --input-html email.html --output-css style.css

或者运行此命令来生成内联 HTML 文件:

mailwind --input-html email.html --output-html email-inlined.html

选项

--input-css

基础 CSS 文件的路径。如果您需要编写自定义 CSS,请使用此项。默认为style.css

--input-html

HTML 电子邮件文件的路径。

--output-css

将生成的 CSS 文件的路径。

--output-html

将生成的内联 HTML 文件的路径。

--tailwind-config

路径…


5. 静电人

Staticman 是一个 Node.js 应用程序,它接收用户生成的内容并将其作为数据文件上传到 GitHub 和/或 GitLab 仓库。实际上,这允许你将动态内容(例如博客文章评论)作为完全静态网站的一部分。

GitHub 徽标 eduardoboucas / staticman

💪 由 Git 驱动的网站的用户生成内容

静电人覆盖范围 构建状态 JavaScript 样式指南

拥有超能力的静态网站

介绍

Staticman 是一个 Node.js 应用程序,它接收用户生成的内容,并将其作为数据文件上传到 GitHub 和/或 GitLab 仓库。实际上,这允许你将动态内容(例如博客文章评论)作为完全静态网站的一部分,只要你的网站在每次推送到 GitHub 和/或 GitLab 时自动部署,就像在GitHub PagesGitLab PagesNetlify和其他平台上看到的那样。

它由一个小型 Web 服务组成,用于处理POST来自表单的请求,运行您定义的各种验证和操作,并最终将其作为数据文件推送到您的代码库。您可以选择启用审核功能,这意味着文件将被推送到单独的分支,并创建一个拉取请求以供您审批;或者,您可以选择完全禁用审核功能,这意味着文件将自动推送到主分支。

你…


6. React-Spring-底部表单

react-spring-bottom-sheet 建立在 react-spring 和 react-use-gesture 之上。它打破了人们关于可访问性、支持键盘导航和屏幕阅读器与赏心悦目、美观且高度动画化的 UI 相冲突的迷思。

GitHub 徽标 stipsan / React-Spring-Bottom-Sheet

方便♿️、令人愉悦✨、快速🚀

npm stat npm 版本 gzip 大小 尺寸 模块格式:cjs、es 和 Modern

带有文字“无障碍、愉悦、高效”的徽标

react-spring-bottom-sheet构建于react-springreact-use-gesture之上。它打破了人们关于可访问性、支持键盘导航和屏幕阅读器与赏心悦目、美观且高度动画化的 UI 相冲突的迷思。所有动画和过渡都使用 CSS 自定义属性,而非直接操作,从而允许仅通过 CSS 完全掌控用户体验。

安装

npm i react-spring-bottom-sheet
Enter fullscreen mode Exit fullscreen mode

入门

基本用法

import { useState } from 'react'
import { BottomSheet } from 'react-spring-bottom-sheet'
// if setting up the CSS is tricky, you can add this to your page somewhere:
// <link rel="stylesheet" href="https://unpkg.com/react-spring-bottom-sheet/dist/style.css" crossorigin="anonymous">
import 'react-spring-bottom-sheet/dist/style.css'

export default function Example() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <button onClick={() => setOpen(true)}>Open</button>
      <BottomSheet open={open}>My awesome
Enter fullscreen mode Exit fullscreen mode

7. React 搜索框

使用 React 构建的自动完成搜索框。

GitHub 徽标 ghoshnimalya /反应搜索框

🎨 使用 React 构建的自动完成搜索框

反应搜索框

npm 包大小 新公共管理 npm npm 在 Codesandbox 上编辑

安装

# npm
npm i react-search-box --save
# yarn
yarn add react-search-box
Enter fullscreen mode Exit fullscreen mode

用法

import React, { Component } from "react";
import ReactSearchBox from "react-search-box";

export default class App extends Component {
  data = [
    {
      key: "john",
      value: "John Doe",
    },
    {
      key: "jane",
      value: "Jane Doe",
    },
    {
      key: "mary",
      value: "Mary Phillips",
    },
    {
      key: "robert",
      value: "Robert",
    },
    {
      key: "karius",
      value: "Karius",
    },
  ];

  render() {
    return (
      <ReactSearchBox
        placeholder="Placeholder"
        value="Doe"
        data={this.data}
        callback={(record) => console.log(record)}
      />
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

道具

支柱 描述
占位符 输入框的占位符文本
数据

8. 匹配分类器

JavaScript 中数组的简单、预期和确定性最佳匹配排序

GitHub 徽标 kentcdodds /匹配分类器

JavaScript 中数组的简单、预期和确定性最佳匹配排序

匹配分类器

JavaScript 中数组的简单、预期和确定性最佳匹配排序


演示

构建状态 代码覆盖率 版本 下载 MIT 许可证 所有贡献者 欢迎 PR 行为守则 示例

问题

  1. 你有几十个、几百个或几千个项目的列表
  2. 您想要智能地过滤和排序这些项目(也许您为用户提供了过滤输入)
  3. 您希望对项目进行简单、预期和确定性的排序(没有花哨的数学算法,在输入时花哨地改变排序)

此解决方案

它遵循简单合理(用户友好)的算法,让您能够根据给定的输入轻松过滤和排序项目列表。项目会根据合理的标准进行排序,从而带来更好的用户体验。

为了解释排名系统,我将以国家为例:

  1. 区分大小写,等于:区分大小写,等于所有条件优先。这些条件将优先匹配。(例如,France匹配France,但不匹配france
  2. EQUALS:不区分大小写的相等性(例如,France将匹配...

9. 查找

通过遍历父目录来查找文件或目录

GitHub 徽标 sindresorhus /查找

通过遍历父目录来查找文件或目录

查找

通过遍历父目录来查找文件或目录

安装

npm install find-up
Enter fullscreen mode Exit fullscreen mode

用法

/
└── Users
    └── sindresorhus
        ├── unicorn.png
        └── foo
            └── bar
                ├── baz
                └── example.js

example.js

import path from 'node:path';
import {findUp, pathExists} from 'find-up';

console.log(await findUp('unicorn.png'));
//=> '/Users/sindresorhus/unicorn.png'

console.log(await findUp(['rainbow.png', 'unicorn.png']));
//=> '/Users/sindresorhus/unicorn.png'

console.log(await findUp(async directory => {
    const hasUnicorns = await pathExists(path.join(directory, 'unicorn.png'));
    return hasUnicorns && directory;
}, {type: 'directory'}));
//=> '/Users/sindresorhus'
Enter fullscreen mode Exit fullscreen mode

API

findUp(名称,选项?)

findUp(匹配器,选项?)

返回Promise路径或undefined无法找到路径的情况。

findUp([...名称],选项?)

返回Promise第一条路径的...


10. 曼德

600 字节方便且现代的包装器,带有智能可扩展的默认值

GitHub 徽标 波斯瓦/曼德

<700 字节方便且现代的包装器,带有智能可扩展的默认值

曼德ci npm 包 代码验证 谢谢

简单、轻量且可扩展的 fetch 包装器,具有智能默认值

需要fetch支持。

mande有更好的默认设置来使用 API 进行通信fetch,因此不要这样写:

// creating a new user
fetch('/api/users', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'Dio',
    password: 'irejectmyhumanityjojo',
  }),
})
  .then((response) => {
    if (response.status >= 200 && response.status < 300) {
      return response.json()
    }
    // reject if the response is not 2xx
    throw new Error(response.statusText)
  })
  .then((user) => {
    // ...
  })
Enter fullscreen mode Exit fullscreen mode

你可以写:

const users = mande('/api/users')
users
  .post(
Enter fullscreen mode Exit fullscreen mode

观星📈

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

  1. 编码面试大学+2,026 颗星
  2. 构建您自己的 X +1,285 颗星
  3. 美杜莎+1,147 颗星
  4. 30 天 JavaScript +1,132 星
  5. 太棒了+1,111 颗星

过去 7 天内最高增长 (%) 🔗

  1. 美杜莎+18%
  2. VSCode 前言+14%
  3. 基础电脑游戏+10%
  4. NextUI +10%
  5. 特效+9%

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

  1. 公共 API +5,786
  2. 编码面试大学+5,521 颗星
  3. 太棒了+4,464颗星
  4. NextUI +3,812 颗星
  5. 金牛座+3,319 颗星

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

  1. NextUI +363%
  2. 了解 web3 Dapp +47%
  3. 曼汀+42%
  4. 百分比+39%
  5. Remix Auth +38%

欲了解最新排名,请访问Stargazing.dev


热门项目以每周新闻通讯的形式提供,请在Stargazing.dev上注册以确保您不会错过任何一期。

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

鏂囩珷鏉ユ簮锛�https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-11th-february-2022-4agj
PREV
🚀GitHub 上 10 个 Web 开发者热门项目 - 2021 年 6 月 11 日 幻灯片 Haunted 🦇 🎃 Windmill React UI mini-typescript Pinia Squoosh! 隐私 开发 贡献 javascript 地图 CSSgram
NEXT
10+ 资源,助您重现复古老派用户界面!复古桌面 UI