🚀GitHub 上面向 Web 开发者的 10 个热门项目 - 2022 年 2 月 11 日
佐克
React Awesome 揭秘
邮件风
静电人
安装
入门
匹配分类器
查找
曼德
热门项目以每周新闻通讯的形式提供,请在Stargazing.dev 上注册 以确保您不会错过任何一期。
1. 新泽西州
njt(npm 跳转到):npm 包的快速导航工具
njt(npm 跳转到):npm 包的快速导航工具
🐸 njt 🐸
🐸 npm 跳转到 🐸 njt.vercel.app
您是否会在搜索引擎中输入软件包名称,然后导航到其源代码、主页、更新日志等等?🕐🕑🕒🕓🕔
通过快速跳转到正确的 URL, 可以节省数千次五秒钟的时间:
🐸✨🐸✨🐸
njt <package> [destination]
🐸✨🐸✨🐸
Enter fullscreen mode
Exit fullscreen mode
可用目的地
2.zx
一个编写更优质脚本的工具。Bash 很棒,但说到编写脚本,它就更棒了。JavaScript 是完美的选择,但使用标准 Node.js 库之前需要额外考虑。zx 包提供了 child_process 的实用包装器,可以转义参数并提供合理的默认值。
佐克
#!/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 组件
使用 Intersection Observer API 和 CSS Animations 来 React 组件添加显示动画。
React Awesome 揭秘
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 电子邮件。
使用 Tailwind CSS 设计 HTML 电子邮件。
邮件风
使用 Tailwind CSS 设计 HTML 电子邮件。
Tailwind 让网站设计变得非常简单,为什么不用它来设计 HTML 邮件呢?我一直在用它设计 volt.fm 和 pikaso.me ,它让我的工作轻松了很多。
安装
用法
使用 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 仓库。实际上,这允许你将动态内容(例如博客文章评论)作为完全静态网站的一部分。
拥有超能力的静态网站
介绍
Staticman 是一个 Node.js 应用程序,它接收用户生成的内容,并将其作为数据文件上传到 GitHub 和/或 GitLab 仓库。实际上,这允许你将动态内容(例如博客文章评论)作为完全静态网站的一部分,只要你的网站在每次推送到 GitHub 和/或 GitLab 时自动部署,就像在 GitHub Pages 、 GitLab Pages 、 Netlify 和其他平台上看到的那样。
它由一个小型 Web 服务组成,用于处理 POST来自表单的请求,运行您定义的各种验证和操作,并最终将其作为数据文件推送到您的代码库。您可以选择启用审核功能,这意味着文件将被推送到单独的分支,并创建一个拉取请求以供您审批;或者,您可以选择完全禁用审核功能,这意味着文件将自动推送到主分支。
你…
6. React-Spring-底部表单
react-spring-bottom-sheet 建立在 react-spring 和 react-use-gesture 之上。它打破了人们关于可访问性、支持键盘导航和屏幕阅读器与赏心悦目、美观且高度动画化的 UI 相冲突的迷思。
react-spring-bottom-sheet 构建于 react-spring 和 react-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 构建的自动完成搜索框。
安装
# 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 中数组的简单、预期和确定性最佳匹配排序
JavaScript 中数组的简单、预期和确定性最佳匹配排序
匹配分类器
JavaScript 中数组的简单、预期和确定性最佳匹配排序
演示
问题
你有几十个、几百个或几千个项目的列表
您想要智能地过滤和排序这些项目(也许您为用户提供了过滤输入)
您希望对项目进行简单、预期和确定性的排序(没有花哨的数学算法,在输入时花哨地改变排序)
此解决方案
它遵循简单合理(用户友好)的算法,让您能够根据给定的输入轻松过滤和排序项目列表。项目会根据合理的标准进行排序,从而带来更好的用户体验。
为了解释排名系统,我将以国家为例:
区分大小写,等于 :区分大小写,等于所有条件优先。这些条件将优先匹配。(例如, France匹配 France,但不匹配 france)
EQUALS :不区分大小写的相等性(例如, France将匹配...
9. 查找
通过遍历父目录来查找文件或目录
查找
通过遍历父目录来查找文件或目录
安装
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 字节方便且现代的包装器,带有智能可扩展的默认值
<700 字节方便且现代的包装器,带有智能可扩展的默认值
简单、轻量且可扩展的 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
观星📈
编码面试大学 +2,026 颗星
构建您自己的 X +1,285 颗星
美杜莎 +1,147 颗星
30 天 JavaScript +1,132 星
太棒了 +1,111 颗星
美杜莎 +18%
VSCode 前言 +14%
基础电脑游戏 +10%
NextUI +10%
特效 +9%
公共 API +5,786
编码面试大学 +5,521 颗星
太棒了 +4,464颗星
NextUI +3,812 颗星
金牛座 +3,319 颗星
NextUI +363%
了解 web3 Dapp +47%
曼汀 +42%
百分比 +39%
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