🚀2021年11月26日,GitHub上面向Web开发者的十大热门项目
欢迎来到 Remix!
TypeScript 项目中的实用装饰器
特征
开始使用
节点之路
CKEditor 5
react-intersection-observer
useStreak- 一个基本的连胜计数器
欢迎使用 Pivot.js
用法
mdsvex
《热门项目》以每周新闻简报的形式发布,请在Stargazing.dev注册,以确保您不会错过任何一期。
1. 混音
构建更优质的网站。运用网络基础知识,打造现代化、高弹性的用户体验。
构建更优质的网站。运用网络基础知识,打造现代化、高弹性的用户体验。
欢迎来到 Remix!
我们很高兴您能来!
Remix是一个全栈 Web 框架,它让您可以专注于用户界面,并反向推导 Web 基础知识,从而提供快速、流畅且富有弹性的用户体验,该体验可以部署到任何 Node.js 服务器,甚至可以部署到 Cloudflare Workers 等边缘的非 Node.js 环境。
想了解更多?请阅读混音技术说明。
此仓库包含 Remix 的源代码。由于此仓库仍在开发中,感谢您的耐心等待。
文档
有关 Remix 的文档,请访问我们的网站。
另外,请加入我们的Discord社区。
每次发布新版本时,文档都会根据目录中的文件自动生成docs。
贡献
如果您有兴趣贡献代码和/或文档,请参阅我们的贡献指南。
行为守则
如有任何疑问,请参阅我们的行为准则……
2. 有帮助的装饰者
TypeScript 项目的实用装饰器

TypeScript 项目中的实用装饰器
安装
npm install helpful-decorators
yarn add helpful-decorators
用法
delay-setTimeout为该方法添加功能
import { delay } from 'helpful-decorators';
class Test {
@delay(1000)
method() {
// ...
}
}
debouncedebounce-为方法添加功能(选项)
import { debounce } from 'helpful-decorators';
class Test {
@debounce(1000, options)
method() {
// ...
}
}
throttlethrottle-为方法添加功能(选项)
import { throttle } from 'helpful-decorators';
class Test {
@throttle(1000, options)
method() {
// ...
}
}
once-once为该方法添加功能
import { once } from 'helpful-decorators';
class Test {
@once
method() {
// This will run only once…
3. 微差法
一个快速、零依赖的对象和数组比较库。速度远超大多数其他深度比较库,并完全支持 TypeScript。
一个快速、零依赖的对象和数组比较库。速度远超大多数其他深度比较库,并且完全支持 TypeScript。

Microdiff 是一个体积小巧(目前小于 1kb)、速度快、零依赖的对象和数组比较库。它比大多数其他深度比较库速度快得多,并且完全支持 TypeScript。
💡 我推荐阅读这篇博文:
构建最快的对象和数组有所不同,这解释了 Microdiff 如何实现其大小和速度。

特征
- 🚀 速度比其他对象差异库快一倍以上
- 📦 超轻量级,压缩后小于1kb
- 🌎 支持 Deno、Node、Web 甚至 Service Worker。还内置了 TypeScript 类型定义。
- 🔰 非常易于使用,只有一个
diff()功能
- 📅 完全支持类似
new Date()和这样的对象new RegExp()
开始使用
首先,安装 Microdiff。
如果您使用的是 Deno,您可以从 Deno.land 通过链接导入https://deno.land/x/microdiff@VERSION/index.ts(请记住更改@VERSION为您想要使用的版本)。
安装完成后,导入并……
4. 节点方式
构建可扩展、可维护且美观的Node.js应用程序的设计模式和最佳实践。
构建可扩展、可维护且美观的 Node.js 应用程序的设计模式和最佳实践。现在附带网站!
5. CKEditor 5
功能强大的富文本编辑器框架,采用模块化架构,集成了现代技术,并具备协作编辑等功能。
功能强大的富文本编辑器框架,采用模块化架构,集成了现代技术,并具备协作编辑等功能。
CKEditor 5


CKEditor 5 是一款现代化的 JavaScript 富文本编辑器,采用 MVC 架构、自定义数据模型和虚拟 DOM,完全使用 TypeScript 从零开始编写,并对现代打包工具提供卓越的支持。它提供各种你能想到的 WYSIWYG 编辑解决方案,并拥有强大的协作支持。从类似 Google Docs 和 Medium 的编辑器,到类似 Slack 或 Twitter 的应用,所有这些都可以在同一个编辑框架内实现。作为市场领导者,CKEditor 5 不断扩展和更新。

目录
快速入门
请参阅快速入门指南,了解有关 CKEditor 5 安装的更多信息。
CKEditor 5 构建器
开始使用 CKEditor 5 及其所有所需功能的最简单方法……
6. react-intersection-observer
React 实现的 Intersection Observer API,用于告诉你元素何时进入或离开视口。
React 实现的 Intersection Observer API,用于告诉你元素何时进入或离开视口。
react-intersection-observer

这是 Intersection Observer API的 React 实现,用于通知您元素何时进入或离开视口。它同时包含Hooks、渲染属性和纯子元素实现。
特征
- 🪝使用Hooks 或组件 API,
useInView监控元素变得前所未有的轻松
- ⚡️性能优化- 尽可能重用交叉观察者实例
- ⚙️与原生 API 匹配- 使用直观
- 🛠使用 TypeScript 编写- 它能完美融入您现有的 TypeScript 项目
- 🧪准备测试- 模拟交叉点观察者,方便使用Jest或Vitest进行测试
- 🌳可摇树优化- 仅包含您使用的部分
- 💥小巧的软件包- 大约1.15kB和
useInView1.6kB<InView>

安装
使用您选择的软件包管理器安装该软件包:
npm install react-intersection-observer --save
用法
useInView钩
// Use object destructuring, so you don't need to remember the exact order
const { ref, inView,…
7. 连胜计数器
一个用于追踪你连续学习天数的计数器(类似于多邻国)
一个连续学习天数计数器,用于跟踪您的连续学习天数(类似于多邻国)。
useStreak- 一个基本的连胜计数器

这是一个基本的连续学习计数器 - 受 Duolingo 启发 - 使用 TypeScript 编写,专为浏览器设计(使用localStorage)。
安装
yarn add use-streak
npm install use-streak
用法
import { useStreak } from "use-streak";
const today = new Date();
const streak = useStreak(localStorage, today);
// streak returns an object:
// {
// currentCount: 1,
// lastLoginDate: "11/11/2021",
// startDate: "11/11/2021",
// }


执照
MIT许可证。请务必注明此代码库的出处。
8. Pivot.js
Pivot.js 提供了一种简单便捷的方式来访问您的数据。它允许您直接在浏览器中创建高度可定制的独特表格视图。
欢迎使用 Pivot.js
Pivot.js 提供了一种简单便捷的方式来访问您的数据。它允许您直接在浏览器中创建高度可定制的独特表格视图。
在数据处理中,透视表是一种数据汇总工具,常见于电子表格或商业智能软件等数据可视化程序中。透视表工具的功能包括自动对存储在一个表格或电子表格中的数据进行排序、计数、总计或计算平均值。它将结果显示在第二个表格(称为“透视表”)中,该表格汇总了数据。
在本例中,结果(或透视表)将以 HTML 表格的形式显示,该表格基于输入数据(CSV 或 JSON)进行透视。事不宜迟,让我们开始使用吧。
用法
第一步是初始化透视对象。它需要以下属性:
9. mdsvex
Svelte 的 Markdown 预处理器。Svelte 中的 Markdown。
mdsvex
Svelte 的 Markdown 预处理器。Svelte 中的 Markdown。
mdsvex.com
包裹
这是一个包含mdsvex所有支持软件包的单体仓库。每个仓库都有自己的 README 文件,其中包含更多详细信息。
贡献
欢迎贡献代码。本仓库使用变更集来管理变更日志和版本控制。所有拉取请求都需要附带一个变更集文件(提交到文档网站的拉取请求不需要变更集文件)。如果您了解变更集的工作原理,请随意添加一个变更集文件,其中包含相应的软件包、版本信息以及变更描述。如果您不了解变更集的工作原理,也无需担心,我很乐意添加一个(……
10. pnPm
快速、节省磁盘空间的软件包管理器
简体中文|日本语| 한국어 |意大利|巴西葡萄牙语

快速、节省磁盘空间的软件包管理器:
- 速度快。比其他方案快 2 倍(参见基准测试)。
- 高效。文件之间
node_modules通过单个内容寻址存储进行链接。
- 非常适合单体仓库。
- 严格。一个包只能访问其自身文件中指定的依赖项
package.json。
- 确定性的。有一个名为“.”的锁定文件
pnpm-lock.yaml。
- 用作 Node.js 版本管理器。请参阅pnpm env 的使用。
- 适用范围广。支持 Windows、Linux 和 macOS 系统。
- 久经考验。自 2016 年以来,已被各种规模的团队用于生产制造。
- 查看 npm 和 Yarn 的完整功能比较。
引用Rush乐队的话:
微软在 Rush 仓库中使用 pnpm,该仓库每天有数百个项目和数百个 PR,我们发现它非常快速可靠。

白金赞助商
黄金赞助商
白银赞助商
请成为赞助商,支持本项目。
背景
pnpm 使用…
观星📈
- 美杜莎+1,604 颗星
- Web 开发入门指南+1,134 星
- ML 入门指南+1,076 星
- 编程面试大学+907 星
- Budibase +892 星
- 美杜莎+87%
- Twitter Together +29%
- 下次运行时长+25%
- React Location +25%
- vsCode Front Matter +23%
- 机器学习入门+3,623 星
- 公共 API +3,013 星
- 超赞+2,815 星
- 《秘密知识之书》 +2,355 星
- 编程面试大学+2,256 星
- 香水店+637%
- 美杜莎+171%
- ct +112%
- EBS 设计+79%
- Web API 游乐场+74%
想要查看最新排名,请访问Stargazing.dev
《热门项目》以每周新闻简报的形式发布,请在Stargazing.dev注册,以确保您不会错过任何一期。
如果你喜欢这篇文章,可以关注我的推特账号,我会定期发布关于HTML、CSS和JavaScript的内容。
文章来源:https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-26th-november-2021-4p6e