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

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

派对小镇🎉

已弃用

⚠️ 已存档。

声望

反应电子表格

espub

React JS登陆页面模板

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

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

1. ct.css

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

标签。

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" />

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 的框架，用于快速构建数据密集型应用程序

refinedev / refine

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

主页|文档|示例| Discord |博客

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

Refine 是什么？

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

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

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

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

在 GitHub 上查看

3.派对小镇

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

BuilderIO / partytown

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

派对小镇🎉

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

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

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

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

在 GitHub 上查看

4. 纳米色彩

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

人工智能/纳米颜色

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

已弃用

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

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

- nanocolors   16 kB
+ picocolors    7 kB

库加载时间：

- nanocolors     0.885 ms
+ picocolors     0.470 ms

复杂用例的基准：

- nanocolors     1,088,193 ops/sec
+ picocolors     1,772,265 ops/sec

旧文档

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

import { green, bold } from 'nanocolors'

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

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

替换`chalk`

替换导入并使用命名导出：
```
- import chalk from 'chalk'
+ import { red, bold } from 'nanocolors'
```
取消前缀调用：
```
- chalk.red(text)
+ red(text)
```
将链替换为嵌套调用：
```
- chalk.red.bold(text)
+ red(bold(text))
```
如果…

在 GitHub 上查看

5. Twitter，一起来！

从存储库发推文的 GitHub 操作

gr2m / twitter-together

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

⚠️ 已存档。

请使用新操作：twitter-together/action

在 GitHub 上查看

6. 威望

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

sharat87 /威望

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

声望

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

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

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

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

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

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

特征

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

在 GitHub 上查看

7. React 电子表格

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

iddan / React-spreadsheet

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

反应电子表格

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

npm install react react-dom scheduler react-spreadsheet

或者

yarn add react react-dom scheduler react-spreadsheet

特征

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

演示

文档

故事书

在 GitHub 上查看

8. 纳米束

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

cometkim / espub

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

espub

espub 的 Monorepo：由esbuild提供支持的完美库构建工具

笔记

espub 正在开发中，最终将完全取代 nanobundle。您可以在这里找到 nanobundle 的文档。

贡献者✨

感谢这些出色的人（表情符号键）：

金 _慧星
💻🚧

_朴镇浩

执照

麻省理工学院

在 GitHub 上查看

9. React JS 登陆页面模板

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

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 实时查询

n1ru4l / graphql-实时查询

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

任何模式或传输的实时性

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

此存储库中的软件包

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