🚀2021年9月3日，GitHub上面向Web开发者的十大热门项目 Uptime Kuma React渲染跟踪器 Tailwind Nextjs 入门博客 IndexedDB 的易用性。 安装 htmlparser2 AMP ⚡ Mammoth .docx 转 HTML 转换器 Bulletproof React 🛡️ ⚛️ 《热门项目》以每周新闻简报的形式发布，请在Stargazing.dev 注册， 以确保您不会错过任何一期。
1. Uptime Kuma 一款功能强大的自托管监控工具。用于监控 HTTP(s) / TCP / Ping / DNS 记录的正常运行时间。
Uptime Kuma Uptime Kuma 是一款易于使用的自托管监控工具。
🥔 在线演示 试试吧！
演示服务器（地点：德国法兰克福）： https://demo.kuma.pet/start-demo
这是一个临时的在线演示，所有数据将在10分钟后删除。由 Uptime Kuma Sponsors 赞助。
⭐ 特点
监控 HTTP(s) / TCP / HTTP(s) 关键字 / HTTP(s) JSON 查询 / Ping / DNS 记录 / 推送 / Steam 游戏服务器 / Docker 容器的正常运行时间 精美、响应迅速、运行流畅的用户界面/用户体验 可通过 Telegram、Discord、Gotify、Slack、Pushover、电子邮件 (SMTP) 以及 90 多种通知服务接收通知，点击此处查看完整列表 20秒间隔 多语言 多个状态页面 将状态页面映射到特定域 Ping 图表 证书信息 代理支持 双因素身份验证支持
🔧 如何安装
🐳 Docker
docker run -d --restart=always -p 3001:3001 -v uptime-kuma:/app/data --name uptime-kuma louislam/uptime-kuma:1
Enter fullscreen mode
Exit fullscreen mode
Uptime Kuma 现在在 http://0.0.0.0:3001 上运行。
警告
像NFS （网络文件系统） 这样的文件系统 并非 ……
2. React渲染跟踪器 React渲染跟踪器——一个用于发现与意外重新渲染和卸载相关的性能问题的工具
React渲染跟踪器——一个用于发现与意外重新渲染和卸载相关的性能问题的工具
React渲染跟踪器 React Render Tracker – 一款用于发现与意外重新渲染相关的性能问题的工具。
React Render Tracker (RRT) 会呈现组件树随时间变化的状态，以及与选定组件（fiber）或其子树相关的事件日志。它并不提供组件的完整状态，而是展示组件状态之间的差异。RRT 并非 React Devtools 的替代品，而是对其的补充，专注于调查应用程序组件树的变化（例如挂载、更新和卸载）及其原因。
React Render Tracker v0.6 – 概述与说明
支持 React v16.9+（对于 React 开发版本来说功能齐全，但对于性能分析和生产版本来说，它无法捕获某些数据，请参阅 问题 #25 ）
特征：
组件树随时间变化的状态，包括已卸载的组件（可通过右上角的切换按钮隐藏）和更新（重新渲染）次数。 两种类型……
3. Tailwind Nextjs Starter 博客 这是一个基于 Next.js 和 Tailwind CSS 的博客入门模板。它开箱即用，并已配置了最新技术。同时，它也易于配置和自定义。
这是一个基于 Next.js 和 Tailwind CSS 的博客入门模板。它开箱即用，预装了最新技术，让技术写作变得轻松便捷。该模板易于配置和自定义，是现有 Jekyll 和 Hugo 个人博客的理想替代方案。
Tailwind Nextjs 入门博客
这是一个基于 Next.js 和 Tailwind CSS 的 博客入门模板。版本 2 基于 Next App 目录，使用 React 服务器组件 ，并使用 Contentlayer 管理 Markdown 内容。
这可能是目前功能最丰富的 Next.js Markdown 博客模板。易于配置和自定义。完美替代现有的 Jekyll 和 Hugo 个人博客。
请查看以下文档以开始使用。
遇到问题？请查看 常见问题解答页面 并搜索以往的问题。如果之前没有发布过相关问题，欢迎您提交新的问题。
有功能建议？请查看之前的讨论，看看是否有人提出过。如果没有，欢迎发起新的讨论帖。我们欢迎所有想法！
变体 注意 ：这些是社区贡献的分支，使用了不同的框架或对代码库进行了重大更改 - 不受官方支持。
Astro 的替代方案 - Tailwind Astro 模板 。
混音运行…
4. xstate 现代 Web 的状态机和状态图。
基于 Actor 的状态管理和复杂应用程序逻辑的编排。
5. 具有可用性的 IndexedDB 这是一个基于 Promise 的 IndexedDB 库。它体积小巧（使用 Brotli 编译后约 1.09k 行），基本复刻了 IndexedDB 的 API，但进行了一些小的改进，显著提升了易用性。
IndexedDB 的易用性。 这是一个非常小的（约 1.19kB，使用 Brotli 压缩后）库，它主要模仿 IndexedDB API，但进行了一些小的改进，从而大大提高了可用性。
安装 变化 浏览器支持 API
openDBdeleteDBunwrapwrap通用增强功能 IDBDatabase增强功能 IDBTransaction增强功能 IDBCursor增强功能 异步迭代器 示例 TypeScript
安装
使用 npm
npm install idb
Enter fullscreen mode
Exit fullscreen mode
假设你使用的是模块兼容系统（例如 webpack、Rollup 等）：
import { openDB , deleteDB , wrap , unwrap } from 'idb' ;
async function doDatabaseStuff ( ) {
const db = await openDB ( … ) ;
}
Enter fullscreen mode
Exit fullscreen mode
直接在浏览器中
直接通过 jsdelivr 使用 modules 方法：
< script type ="module ">
import { openDB , deleteDB , wrap , unwrap } from 'https://cdn.jsdelivr.net/npm/idb@8/+esm' ;
async function doDatabaseStuff ( ) {
const db = await openDB ( … ) ;
}
</ script >
Enter fullscreen mode
Exit fullscreen mode
使用外部脚本引用
< script …
Enter fullscreen mode
Exit fullscreen mode
6. htmlparser2 快速且容错性高的 HTML 和 XML 解析器
htmlparser2
快速且容错性高的HTML/XML解析器。
htmlparser2 是 速度最快的 HTML 解析器 ，它采用了一些捷径来实现这一目标。如果您需要严格遵循 HTML 规范，请查看 parse5 。
安装 AST Explorer 上 htmlparser2提供了 实时演示 。
生态系统
用法 htmlparser2它本身提供了一个回调接口，允许以最小的内存分配来使用文档。为了获得更符合人体工程学的体验，请阅读下文 “获取 DOM” 。
import * as htmlparser2 from "htmlparser2" ;
const parser = new htmlparser2 . Parser ( {
onopentag ( name , attributes ) {
/*
* This fires when a new …
Enter fullscreen mode
Exit fullscreen mode
7. React Virtuoso React 中最强大的虚拟列表组件。开箱即用，支持可变大小的列表项；无需手动测量或硬编码列表项高度。
React Virtuoso—— 最完整的 React 虚拟化渲染列表/表格/网格组件系列。
有关实时示例和文档，请查看 文档网站 。
赞助商 如果您在工作中使用 Virtuoso， 请赞助它 。任何捐赠都对项目的开发和维护大有帮助。
开始使用
npm install react-virtuoso
Enter fullscreen mode
Exit fullscreen mode
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { Virtuoso } from 'react-virtuoso'
const App = ( ) => {
return < Virtuoso …
Enter fullscreen mode
Exit fullscreen mode
8. 放大器 AMP Web 组件框架，可轻松创建以用户为中心的网站、故事、广告、电子邮件等。
AMP ⚡ ⚡⚡⚡
工具
AMP 是一个 Web 组件框架，可以轻松创建以用户为中心的网站、故事、广告、电子邮件等等。
AMP 是一个开源项目，我们非常欢迎您帮助我们使其变得更好！
想了解更多关于AMP的信息吗？
amp.dev 是了解 AMP 的最佳去处——当然，本网站就是使用 AMP 制作的！ 对于使用 AMP 的开发者来说，amp.dev 包含
使用 AMP 时遇到问题？
想帮助改进 AMP 吗？
9. 猛犸象 Mammoth 旨在将 .docx 文档（例如 Microsoft Word、Google Docs 和 LibreOffice 创建的文档）转换为 HTML 格式。
将 Word 文档（.docx 文件）转换为 HTML
Mammoth .docx 转 HTML 转换器 Mammoth 旨在将 Microsoft Word、Google Docs 和 LibreOffice 等软件创建的 .docx 文档转换为 HTML。Mammoth 的目标是利用文档中的语义信息，忽略其他细节，从而生成简洁清晰的 HTML 代码。例如，Mammoth 会将任何带有特定样式的段落转换 Heading 1为 h1元素，而不是试图精确复制标题的样式（字体、字号、颜色等）。
.docx 文件的结构与 HTML 文件的结构存在较大差异，这意味着对于更复杂的文档，转换效果可能不尽如人意。Mammoth 最适合仅使用样式对文档进行语义标记的情况。
目前支持以下功能：
10. 防弹反应 一个简单、可扩展且功能强大的架构，用于构建可用于生产环境的 React 应用程序。
🛡️ ⚛️ 一个简单、可扩展且功能强大的架构，用于构建可用于生产环境的 React 应用程序。
Bulletproof React 🛡️ ⚛️
一个简单、可扩展且功能强大的架构，用于构建可用于生产环境的 React 应用程序。
介绍 React 是构建前端应用程序的优秀工具。它拥有丰富的生态系统，数百个优秀的库几乎可以满足你的任何需求。然而，如此多的选择也可能让人不知所措。React 非常灵活，你可以用任何你喜欢的方式编写 React 应用程序，但这种灵活性是有代价的。由于没有预定义的架构可供开发者遵循，这往往会导致代码库混乱、不一致且过于复杂。
本仓库旨在展示一种利用 React 生态系统中一些最佳工具创建 React 应用的方法，并构建一个可扩展性极佳的项目结构。根据我与众多不同代码库的合作经验，这种架构被证明是最有效的。
我们的目标是服务……
观星📈
免费编程书籍 +2,173 星 公共 API +1,299 星 面向初学者的 Web 开发 +942 星 Discord.js +861 星 打造你自己的 X +569 颗星
塑形者 +75% 海洋 +39% Svelte Society +18% 针数 +11% LemonadeJS +11%
公共 API +8,983 星 免费编程书籍 +3,893 星 面向初学者的 Web 开发 +3,094 星 打造你自己的 X +3,000 颗星星 金牛座 +2,753 颗星
Svelte Society +67% 防弹反应 +54% 乳清蛋白 +53% html转图像 +49% 有丝分裂 +42%
想要查看最新排名，请访问 Stargazing.dev
《热门项目》以每周新闻简报的形式发布，请在Stargazing.dev 注册， 以确保您不会错过任何一期。
如果你喜欢这篇文章，可以 关注我的 推特账号，我会定期发布关于HTML、CSS和JavaScript的内容。
文章来源：https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-3rd-september-2021-427a 
