🚀GitHub 上 10 个面向 Web 开发者的热门项目 - 2021 年 10 月 1 日 🧠 ct.css – 来看看你的 <head> Partytown 🎉 已弃用 ⚠️ 已存档。Prestige React 电子表格 espub React JS 登陆页面模板 🛎️🛎️ 好消息！全新改进的 V2 版现已发布

2025-06-08

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

🧠 ct.css– 让我们看看你的<head>

派对小镇🎉

已弃用

⚠️ 已存档。

声望

反应电子表格

espub

React JS登陆页面模板

🛎️🛎️ 好消息！全新升级的V2 版本现已发布

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

1. ct.css

ct.css 是一个诊断性 CSS 代码片段，可以揭示页面中的潜在性能问题

标签。

GitHub 徽标 csswizardry / ct

让我们看一下你的<head>...

🧠 ct.css– 让我们看看你的<head>

头部计算机断层扫描使用一系列 X 射线对头部进行 CT 扫描……
— wikipedia.org/Computed_tomography_of_the_head

这<head>是页面中最大的渲染阻塞部分 - 确保其格式正确至关重要。ct.css是一个诊断性 CSS 代码片段，可揭示页面<head>标签中的潜在性能问题。

示例输出

  • 红色：这是一个错误，应该解决。
  • 橙色：在某些情况下这可能会有问题。
  • 格林：这很好，纯粹是提供信息。
  • 确定：此文件存在问题。
  • 虚线：另一个文件导致此文件出现问题。

简单使用

将其粘贴到 HTML 中的任何位置：

<link rel="stylesheet" href="https://csswizardry.com/ct/ct.css" class="ct" />
Enter fullscreen mode Exit fullscreen mode

Chrome代码片段

使用 Chrome DevTools 在任何页面上运行 JavaScript 代码片段

(function(){
  var ct = document.createElement('link')
  ct.rel = 'stylesheet';
  ct.href = 'https://csswizardry.com/ct/ct.css';
  ct.classList.add('ct');
…
在 GitHub 上查看

2. 精炼

refine 是一个基于 React 的框架，用于快速构建数据密集型应用程序

GitHub 徽标 refinedev / refine

用于构建内部工具、管理面板、仪表板和 B2B 应用程序的 React 框架，具有无与伦比的灵活性。



对于 CRUD 密集型应用来说，Refine 是低代码/无代码与“从零开始”之间的最佳平衡点。Refine
是一个面向企业的开源 React 元框架。它为从管理面板到仪表盘和内部工具的所有内容提供了无头解决方案。

惊人的 OpenSSF 最佳实践 npm 版本 贡献者契约

不和谐 Twitter 关注


精炼工作原理

Refine 是什么？

Refine是一个 React 元框架，适用于 CRUD 密集型 Web 应用程序。它涵盖了广泛的企业用例，包括内部工具、管理面板、仪表板和 B2B 应用。

Refine 的核心钩子和组件通过为项目的关键方面（包括身份验证、访问控制、路由、网络、状态管理和i18n）提供行业标准解决方案来简化开发过程。

Refine 的无头架构通过将业务逻辑与 UI 和路由分离，支持构建高度可定制的应用程序。这允许与以下组件集成：

  • 任何自定义设计或 UI 框架（如TailwindCSS ） ，以及内置支持……

在 GitHub 上查看

3.派对小镇

将资源密集型的第三方脚本从主线程移到 Web 工作线程中。

GitHub 徽标 BuilderIO / partytown

将资源密集型第三方脚本从主线程移至 Web Worker。🎉

派对小镇🎉

Partytown github 适合 2x

第三方脚本的有趣存放地点

Partytown 是一个延迟加载库，可帮助将资源密集型脚本迁移到Web Worker中，而不是主线程中。其目标是通过将主线程专用于代码并将第三方脚本卸载到 Web Worker 来帮助加快网站速度。

注意：Partytown 仍处于测试阶段，不保证在所有情况下都能正常运行。请参阅我们的常见问题解答和权衡部分了解更多信息。

其理念是，主线程应该专用于你的代码，所有不需要位于关键路径的脚本都应该移至 Web Worker。主线程的性能……

在 GitHub 上查看

4. 纳米色彩

一个小型且快速的 Node.js 库，用于将 ANSI 颜色输出到终端。比 chalk 快 4 倍，并且在 node_modules 中占用的空间减少 5 倍

GitHub 徽标 人工智能/纳米颜色

请使用 picocolors。它体积小 3 倍，速度快 50%。

已弃用

已弃用：改用picocolors它，体积小 3 倍，速度快 50%。

node_modules 中的空间包括子依赖项：

- nanocolors   16 kB
+ picocolors    7 kB
Enter fullscreen mode Exit fullscreen mode

库加载时间：

- nanocolors     0.885 ms
+ picocolors     0.470 ms
Enter fullscreen mode Exit fullscreen mode

复杂用例的基准：

- nanocolors     1,088,193 ops/sec
+ picocolors     1,772,265 ops/sec
Enter fullscreen mode Exit fullscreen mode

旧文档

一个小巧而快速的 Node.js 库，用于将 ANSI 颜色输出到终端。

import { green, bold } from 'nanocolors'

console.log(
  green(`Task ${bold('1')} was finished`)
)
Enter fullscreen mode Exit fullscreen mode

最初是@jorgebucaran的一个分支，借鉴了@lukeed的colorette技巧。查看 Nano Colors 和 之间的变化。kleurcolorette

纳米色彩输出


由邪恶火星人赞助

替换chalk

  1. 替换导入并使用命名导出：

    - import chalk from 'chalk'
+ import { red, bold } from 'nanocolors'
    Enter fullscreen mode Exit fullscreen mode

  2. 取消前缀调用：

    - chalk.red(text)
+ red(text)
    Enter fullscreen mode Exit fullscreen mode

  3. 将链替换为嵌套调用：

    - chalk.red.bold(text)
+ red(bold(text))
    Enter fullscreen mode Exit fullscreen mode

  4. 如果…

在 GitHub 上查看

5. Twitter，一起来！

从存储库发推文的 GitHub 操作

GitHub 徽标 gr2m / twitter-together

⚠️ 已存档。查看新版本：https://github.com/twitter-together/action

在 GitHub 上查看

6. 威望

浏览器中基于文本的 HTTP 客户端。无界面的 Postman。

GitHub 徽标 sharat87 /威望

浏览器中基于文本的 HTTP 客户端。无界面的 Postman。

声望

Shri开发的基于文本的 HTTP 客户端。可在prestige.dev获取。

在所有抽象概念之下，它只是星尘与文本的交互。

这是一个功能强大的、基于文本的、浏览器内的HTTP 客户端应用程序，面向 Web 开发人员和 API 测试专业人​​员。

查看用户指南，了解 Prestige 如何成为您工具集的强大补充。

在 Hacker News 上讨论。欢迎在Discord上加入我们。

Prestige 灯光模式截图 Prestige 黑暗模型截图

如果您遇到任何问题或有建议，请联系 Discord或创建问题。

特征

  • 以纯文本形式定义请求，点击Ctrl+Enter（或Cmd+Enter）执行并查看结果。
  • 编写简单、熟悉的 Javascript 来在您的请求中进行模板化。
  • 如果请求重定向，则显示重定向链中的所有响应。
  • 将您的 Prestige 文档保存到 Gist。
  • 将请求导出为 cURL 命令。如果您想查看更多导出格式，请提交问题。
  • 隔离的 cookie 管理。
  • …
在 GitHub 上查看

7. React 电子表格

简单、可定制且性能卓越的 React 电子表格

GitHub 徽标 iddan / React-spreadsheet

简单、可定制且性能卓越的 React 电子表格

反应电子表格

简单、可定制且性能卓越的 React 电子表格。

截屏 CI 覆盖状态

npm install react react-dom scheduler react-spreadsheet
Enter fullscreen mode Exit fullscreen mode

或者

yarn add react react-dom scheduler react-spreadsheet
Enter fullscreen mode Exit fullscreen mode

特征

  • 简单直接的 API 专注于常见用例，同时保持灵活性
  • 高性能（但未虚拟化）
  • 实施 Just Components™

演示

文档

故事书

在 GitHub 上查看

8. 纳米束

另一个由 esbuild 提供支持的微型模块捆绑器

GitHub 徽标 cometkim / espub

完美的库构建工具，由 esbuild 提供支持

在 GitHub 上查看

9. React JS 登陆页面模板

适用于初创公司/公司的简单反应式单页登陆页面模板。

GitHub 徽标 issaafalkattan / React-Landing-Page-Template

适用于初创公司/公司的简单反应单页登陆页面模板

React JS登陆页面模板

**

🛎️🛎️ 好消息！全新升级的V2 版本现已发布

**

现场演示

描述

这是一个基于 ReactJS 的落地页模板，适用于单页浏览的初创公司/服务。其设计灵感源自Free-CSS.com的模板。所有“可视化”数据都可以通过修改 data.json 文件轻松修改。

让它成为你的！

1. 准备

您需要在您的电脑上安装Node JS 。

2. 克隆文件

克隆文件后，您必须在 CLI 中yarn运行yarn start

3. 添加您自己的数据

更改文件中的数据data.json以及添加任何图像public/img/您还可以通过修改文件来更改样式public/css如果您需要联系表单工作，您还需要创建一个 EmailJS 帐户，并修改src/components/contact.jsx文件以替换您自己的服务……

在 GitHub 上查看

10. 实时查询

使用 JavaScript 进行实时 GraphQL 实时查询

GitHub 徽标 n1ru4l / graphql-实时查询

使用 JavaScript 进行实时 GraphQL 实时查询

GraphQL 实时查询

任何模式或传输的实时性

为什么要使用实时查询？ -阅读介绍文章-了解实时查询跟踪的工作原理



此存储库中的软件包

包裹 描述 统计数据
@n1ru4l/in-memory-live-query-store 实时查询实现。 npm 版本 npm 下载
@n1ru4l/graphql-live-query 实时查询实现的实用程序。 npm 版本 npm 下载
@n1ru4l/graphql-live-query-patch-json-patch 使用 JSON 补丁减少实时查询负载大小 npm 版本 npm 下载
@n1ru4l/graphql-live-query-patch-jsondiffpatch 使用以下方法减少实时查询负载大小@n1ru4l/json-patch-plus npm 版本 npm 下载
@n1ru4l/socket-io-graphql-server Socket.io 上的 GraphQL - 服务器中间件 npm 版本 npm 下载
@n1ru4l/socket-io-graphql-client Socket.io 上的 GraphQL - 客户端 npm 版本 npm 下载
todo-example-app Todo App 具有跨客户端状态同步功能。 -

动机

目前还没有成熟的实时查询实现能够脱离任何特定的数据库或 SaaS 产品。本实现应该作为示例，展示如何将实时查询添加到任何 GraphQL.js 架构中，并支持（几乎）任何 GraphQL 传输方式。

GraphQL 已经有一个实时解决方案：订阅。它是响应事件的正确工具。例如，当有人戳你时触发声音或显示提示消息……

在 GitHub 上查看

观星📈

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

  1. 秘密知识之书+1,464 颗星
  2. 很棒的指南+765 颗星
  3. 公共 API +731 颗星
  4. 免费编程书籍+689 颗星
  5. 程序员应该访问的最佳网站+676 颗星

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

  1. 运行 WASM +250%
  2. 前言+63%
  3. 代码库+41%
  4. 阿格里帕+21%
  5. React Windows UI +20%

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

  1. 公共 API +6,466 颗星
  2. 免费编程书籍+5,110 颗星
  3. 机器学习初学者+4,940 星
  4. 30秒编程+3,971 星
  5. 免费代码营+3,405 颗星

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

  1. Milkdown +136%
  2. React 渲染追踪器+133%
  3. Viteshot +81％
  4. 超级配方+46%
  5. 奥塞利亚+44%

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

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

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

鏂囩珷鏉ユ簮锛�https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-1st-october-2021-og4
Devto 翻译
PREV
🚀GitHub 上面向 Web 开发者的 10 个热门项目 - 2020 年 8 月 21 日 Alpine.js RSSHub selectize.js wa-automate-nodejs jsQR joi
NEXT
🚀GitHub 上面向 Web 开发者的 10 个热门项目 - 2021 年 1 月 1 日 IconPark Fre TypeScript Deep Dive Vendure Turbo react-worker-components Smoldash - 微型 2kb Lodash 替代品 Bulma