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

🚀GitHub 上 10 个热门 Web 开发者项目 - 2021 年 11 月 26 日 欢迎使用 Remix! TypeScript 项目的实用装饰器 功能 入门指南 以 Node 方式使用 CKEditor 5 react-intersection-observer useStreak - 一个基本的连胜计数器 欢迎使用 Pivot.js 用法 mdsvex

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

欢迎来到 Remix!

TypeScript 项目中的实用装饰器

特征

开始使用

图标节点之路

CKEditor 5鸣叫

react-intersection-observer

useStreak- 一个基本的连胜计数器

欢迎使用 Pivot.js

用法

mdsvex

《热门项目》以每周新闻简报的形式发布,请在Stargazing.dev注册,以确保您不会错过任何一期。

1. 混音

构建更优质的网站。运用网络基础知识,打造现代化、高弹性的用户体验。

GitHub 标志 混音版/混音

构建更优质的网站。运用网络基础知识,打造现代化、高弹性的用户体验。

欢迎来到 Remix!

我们很高兴您能来!

Remix是一个全栈 Web 框架,它让您可以专注于用户界面,并反向推导 Web 基础知识,从而提供快速、流畅且富有弹性的用户体验,该体验可以部署到任何 Node.js 服务器,甚至可以部署到 Cloudflare Workers 等边缘的非 Node.js 环境。

想了解更多?请阅读混音技术说明。

此仓库包含 Remix 的源代码。由于此仓库仍在开发中,感谢您的耐心等待。

文档

有关 Remix 的文档,请访问我们的网站

另外,请加入我们的Discord社区

每次发布新版本时,文档都会根据目录中的文件自动生成docs

贡献

如果您有兴趣贡献代码和/或文档,请参阅我们的贡献指南

行为守则

如有任何疑问,请参阅我们的行为准则……


2. 有帮助的装饰者

TypeScript 项目的实用装饰器

GitHub 标志 NetanelBasal /有帮助的装饰师

TypeScript 项目的实用装饰器

npm 构建状态 承诺友好 语义释放 惊人的

TypeScript 项目中的实用装饰器

安装

npm install helpful-decorators
yarn add helpful-decorators
Enter fullscreen mode Exit fullscreen mode

用法

delay-setTimeout为该方法添加功能

import { delay } from 'helpful-decorators';

class Test {
 @delay(1000)
 method() {
   // ...
 }
}
Enter fullscreen mode Exit fullscreen mode

debouncedebounce-为方法添加功能(选项

import { debounce } from 'helpful-decorators';

class Test {
 @debounce(1000, options)
 method() {
   // ...
 }
}
Enter fullscreen mode Exit fullscreen mode

throttlethrottle-为方法添加功能(选项

import { throttle } from 'helpful-decorators';

class Test {
 @throttle(1000, options)
 method() {
   // ...
 }
}
Enter fullscreen mode Exit fullscreen mode

once-once为该方法添加功能

import { once } from 'helpful-decorators';
class Test {
 @once
 method() {
   // This will run only once
Enter fullscreen mode Exit fullscreen mode

3. 微差法

一个快速、零依赖的对象和数组比较库。速度远超大多数其他深度比较库,并完全支持 TypeScript。

GitHub 标志 AsyncBanana / microdiff

一个快速、零依赖的对象和数组比较库。速度远超大多数其他深度比较库,并且完全支持 TypeScript。

微差标志

Microdiff 是一个体积小巧(目前小于 1kb)、速度快、零依赖的对象和数组比较库。它比大多数其他深度比较库速度快得多,并且完全支持 TypeScript。

💡 我推荐阅读这篇博文:

构建最快的对象和数组有所不同,这解释了 Microdiff 如何实现其大小和速度。

迷你压缩尺寸(来自 Bundlephobia) 执照 依赖项数量

特征

  • 🚀 速度比其他对象差异库快一倍以上
  • 📦 超轻量级,压缩后小于1kb
  • 🌎 支持 Deno、Node、Web 甚至 Service Worker。还内置了 TypeScript 类型定义。
  • 🔰 非常易于使用,只有一个diff()功能
  • 📅 完全支持类似new Date()和这样的对象new RegExp()

开始使用

首先,安装 Microdiff。

npm i microdiff

如果您使用的是 Deno,您可以从 Deno.land 通过链接导入https://deno.land/x/microdiff@VERSION/index.ts(请记住更改@VERSION为您想要使用的版本)。

安装完成后,导入并……


4. 节点方式

构建可扩展、可维护且美观的Node.js应用程序的设计模式和最佳实践。

GitHub 标志 FredKSchott / the-node-way

构建可扩展、可维护且美观的 Node.js 应用程序的设计模式和最佳实践。现在附带网站!

图标节点之路

构建可扩展、可维护且美观的Node.js应用程序的设计模式和最佳实践。

介绍

什么是节点之道?

掌握基本功

理解错误优先回调
测试要点

开始建造

单例设计、
自定义类型设计
、工厂设计

变得花哨

require()危险的模块设计模式究竟是如何运作的?


访问thenodeway.io,了解其运作方式。
所有代码示例和网站更新都将添加到此代码库中。敬请关注新发布的帖子、文章等内容。

© 2016 Fred K. Schott版权所有。保留所有权利。





5. CKEditor 5

功能强大的富文本编辑器框架,采用模块化架构,集成了现代技术,并具备协作编辑等功能。

GitHub 标志 ckeditor / ckeditor5

功能强大的富文本编辑器框架,采用模块化架构,集成了现代技术,并具备协作编辑等功能。

CKEditor 5鸣叫

npm 版本 覆盖范围状态 CircleCI TypeScript 支持

订阅电子报 关注推特

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

一组屏幕截图,展示了 CKEditor 5 富文本编辑器的各种功能。

目录

快速入门

请参阅快速入门指南,了解有关 CKEditor 5 安装的更多信息。

CKEditor 5 构建器

开始使用 CKEditor 5 及其所有所需功能的最简单方法……


6. react-intersection-observer

React 实现的 Intersection Observer API,用于告诉你元素何时进入或离开视口。

GitHub 标志 thebuilder / react-intersection-observer

React 实现的 Intersection Observer API,用于告诉你元素何时进入或离开视口。

react-intersection-observer

版本徽章 压缩后的大小 测试 执照 下载

这是 Intersection Observer API的 React 实现,用于通知您元素何时进入或离开视口。它同时包含Hooks渲染属性纯子元素实现。

特征

  • 🪝使用Hooks 或组件 APIuseInView监控元素变得前所未有的轻松
  • ⚡️性能优化- 尽可能重用交叉观察者实例
  • ⚙️与原生 API 匹配- 使用直观
  • 🛠使用 TypeScript 编写- 它能完美融入您现有的 TypeScript 项目
  • 🧪准备测试- 模拟交叉点观察者,方便使用JestVitest进行测试
  • 🌳可摇树优化- 仅包含您使用的部分
  • 💥小巧软件包- 大约1.15kBuseInView1.6kB<InView>

在 StackBlitz 中打开

安装

使用您选择的软件包管理器安装该软件包:

npm install react-intersection-observer --save
Enter fullscreen mode Exit fullscreen mode

用法

useInView

// Use object destructuring, so you don't need to remember the exact order
const { ref, inView,
Enter fullscreen mode Exit fullscreen mode

7. 连胜计数器

一个用于追踪你连续学习天数的计数器(类似于多邻国)

GitHub 标志 jsjoeio / use-streak

一个连续学习天数计数器,用于跟踪您的连续学习天数(类似于多邻国)。

useStreak- 一个基本的连胜计数器

npm

这是一个基本的连续学习计数器 - 受 Duolingo 启发 - 使用 TypeScript 编写,专为浏览器设计(使用localStorage)。

安装

yarn add use-streak
Enter fullscreen mode Exit fullscreen mode
npm install use-streak
Enter fullscreen mode Exit fullscreen mode

用法

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",
// }
Enter fullscreen mode Exit fullscreen mode

连胜演示截图

编辑 bursting-wood-o8m7w

执照

MIT许可证。请务必注明此代码库的出处。





8. Pivot.js

Pivot.js 提供了一种简单便捷的方式来访问您的数据。它允许您直接在浏览器中创建高度可定制的独特表格视图。

GitHub 标志 rwjblue / pivot.js

从 CSV/JSON 数据构建透视表

欢迎使用 Pivot.js

Pivot.js 提供了一种简单便捷的方式来访问您的数据。它允许您直接在浏览器中创建高度可定制的独特表格视图。

在数据处理中,透视表是一种数据汇总工具,常见于电子表格或商业智能软件等数据可视化程序中。透视表工具的功能包括自动对存储在一个表格或电子表格中的数据进行排序、计数、总计或计算平均值。它将结果显示在第二个表格(称为“透视表”)中,该表格汇总了数据。

在本例中,结果(或透视表)将以 HTML 表格的形式显示,该表格基于输入数据(CSV 或 JSON)进行透视。事不宜迟,让我们开始使用吧。

查看示例或查看文档了解更多信息。

用法

第一步是初始化透视对象。它需要以下属性:

  • csv其中应该包含……

9. mdsvex

Svelte 的 Markdown 预处理器。Svelte 中的 Markdown。

GitHub 标志 pngwn / MDsveX

Svelte 的 Markdown 预处理器。

mdsvex

Svelte 的 Markdown 预处理器。Svelte 中的 Markdown。

mdsvex.com

包裹

这是一个包含mdsvex所有支持软件包的单体仓库。每个仓库都有自己的 README 文件,其中包含更多详细信息。

贡献

欢迎贡献代码。本仓库使用变更集来管理变更日志和版本控制。所有拉取请求都需要附带一个变更集文件(提交到文档网站的拉取请求不需要变更集文件)。如果您了解变更集的工作原理,请随意添加一个变更集文件,其中包含相应的软件包、版本信息以及变更描述。如果您不了解变更集的工作原理,也无需担心,我很乐意添加一个(……


10. pnPm

快速、节省磁盘空间的软件包管理器

GitHub 标志 pnpm / pnpm

快速、节省磁盘空间的软件包管理器

简体中文|日本语| 한국어 |意大利|巴西葡萄牙语

快速、节省磁盘空间的软件包管理器:

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

引用Rush乐队的话:

微软在 Rush 仓库中使用 pnpm,该仓库每天有数百个项目和数百个 PR,我们发现它非常快速可靠。

npm 版本 加入 Discord 聊天 开放集体 开放集体 X 关注 与乌克兰站在一起

白金赞助商

黄金赞助商

白银赞助商

请成为赞助商,支持本项目

背景

pnpm 使用…


观星📈

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

  1. 美杜莎+1,604 颗星
  2. Web 开发入门指南+1,134 星
  3. ML 入门指南+1,076 星
  4. 编程面试大学+907 星
  5. Budibase +892 星

过去 7 天增长最快的百分比🔗

  1. 美杜莎+87%
  2. Twitter Together +29%
  3. 下次运行时长+25%
  4. React Location +25%
  5. vsCode Front Matter +23%

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

  1. 机器学习入门+3,623 星
  2. 公共 API +3,013 星
  3. 超赞+2,815 星
  4. 《秘密知识之书》 +2,355 星
  5. 编程面试大学+2,256 星

过去 30 天增长最快的百分比🔗

  1. 香水店+637%
  2. 美杜莎+171%
  3. ct +112%
  4. EBS 设计+79%
  5. 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