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

🚀GitHub 上 10 个热门 Web 开发项目 - 2021 年 4 月 30 日 Script Kit v3 🧁 vanilla-extract Tiptap Editor DOMPurify puppeteer-extra Documentation Inkline

🚀GitHub 上面向 Web 开发人员的 10 个热门项目 - 2021 年 4 月 30 日

WinBox.js:一款现代化的 HTML5 Web 窗口管理器。

脚本工具包 v3

🧁 香草精

Tiptap 编辑器

DOM净化

木偶师-群众演员下载

文档

墨线

《热门项目》以每周新闻简报的形式提供,请访问www.iainfreestone.com注册,以确保您不会错过任何一期。

1. WinBox

WinBox 是一款专业的 HTML5 网页窗口管理器:轻量级、性能卓越、无依赖项、完全可定制、开源!

GitHub 标志 nextapps-de / winbox

WinBox 是一款现代化的 HTML5 网页窗口管理器:轻量级、性能卓越、无依赖项、完全可定制、开源!

WinBox.js:一款现代化的 HTML5 Web 窗口管理器。

现代网页窗口管理器:轻量级、性能卓越、无依赖项、完全可定制、开源!

演示  •  入门指南  •  选项  •  API  •  主题  •  自定义  •  更新日志

在线演示和代码示例

https://nextapps-de.github.io/winbox/

支持此项目

大家好,我叫托马斯,也叫 ts-thomas。这是一个完全利用业余时间开发的个人项目。为了增加曝光度,它托管在我所在公司 Nextapps 的 GitHub 账号上。正如一些朋友可能已经猜到的,由于这是一个免费开源项目,我从未从 Nextapps 公司获得过任何资金支持。我很高兴 WinBox.js 获得了如此多的积极反馈和功能请求。如果您愿意,可以通过个人捐赠来支持我,这将极大地帮助我维持项目的运行,并提供所有必要的功能……


2. 脚本工具包

面向开发者的自动化工具,自动化一切!让脚本的运行、编写和共享变得轻松简单。

GitHub 标志 约翰·林德奎斯特/套件

脚本工具包。自动化一切。

脚本工具包 v3

https://scriptkit.com/

加入讨论

https://github.com/johnlindquist/kit/discussions

文档

https://github.com/johnlindquist/kit-docs

⭐️赞助 Script Kit 即可解锁 Script Kit Pro ⭐️

❤️在 GitHub 上赞助我❤️

仅限赞助商功能

已发货 计划
内置调试器 将脚本同步到 GitHub 仓库
脚本日志窗口 以 GitHub Actions 方式远程运行脚本
通过 Discord 提供支持 高级组件
屏幕截图
屏幕录制
桌面颜色选择器
测量工具
从 IDE 进行调试

先决条件

安装 pnpm:

https://pnpm.io/installation

克隆工具包 SDK

克隆并安装:

git clone https://github.com/johnlindquist/kit.git
cd kit
pnpm install

构建工具包 SDK

pnpm build

构建命令会将 SDK 构建到 ~/.kit 目录。

npm 链接到应用程序(仅限首次运行)

npm(由于pnpm构建/原生方面的原因,该应用需要使用其他方式)

  1. 切换到 ~/.kit
  2. npm 链接
  3. 切换到你克隆 KitApp 的位置
  4. npm 链接@johnlindquist /kit




3. 香草精

使用 TypeScript 实现零运行时样式表。用 TypeScript(或 JavaScript)编写样式,使用局部作用域的类名和 CSS 变量,然后在构建时生成静态 CSS 文件。

GitHub 标志 vanilla-extract-css / vanilla-extract

TypeScript 中的零运行时样式表

🧁 香草精

TypeScript 中的零运行时样式表。

使用 TypeScript(或 JavaScript)编写样式,采用局部作用域类名和 CSS 变量,然后在构建时生成静态 CSS 文件。

基本上,它就是 TypeScript 中的 CSS 模块”,但增加了作用域 CSS 变量以及更多功能。

🔥 所有样式均在构建时生成——就像SassLess等一样。

✨ 基于标准 CSS 的极简抽象。

🦄 可与任何前端框架配合使用——甚至无需前端框架也能使用。

🌳 局部作用域类名 — 就像CSS Modules 一样。

🚀 局部作用域的CSS变量规则。@keyframes@font-face

🎨 高级主题系统,支持同时运行多个主题。无需全局变量!

🛠 用于生成基于变量的calc表达式的实用程序。

💪 通过CSSType实现类型安全的样式。

🏃‍♂️ 可选的运行时版本,用于开发和测试。

🙈 动态运行时主题的可选 API。


🌐查看文档网站,获取设置指南、示例和 API 文档。


🖥   亲自体验一下吧……


4. 蒂普塔普

面向网页开发者的无头编辑器框架。

GitHub 标志 ueberdosis / tiptap

面向网页开发者的无头富文本编辑器框架。

Tiptap 编辑器

Tiptap 编辑器是一款无头、框架无关的富文本编辑器,可通过扩展程序进行自定义和扩展。其无头特性意味着它没有预设的用户界面,从而提供完全的设计自由(如需快速入门,请参阅下方链接的UI 模板)。Tiptap 基于高度可靠的ProseMirror库。

Tiptap 编辑器与开源协作后端Hocuspocus相辅相成。编辑器和 Hocuspocus 共同构成了Tiptap 套件的基础

构建状态 版本 下载 执照 聊天 赞助

Tiptap 编辑器是如何工作的?

  • 无头框架: Tiptap 不依赖用户界面,因此无需重写类或编写代码。如果您需要示例用户界面,请浏览下方链接的用户界面模板。
  • 框架无关: Tiptap 编辑器旨在跨不同前端框架运行。这意味着无论您使用的是 Vue、React 还是纯 JavaScript,Tiptap 都能无缝集成,不会出现兼容性问题。
  • 基于扩展: Tiptap 中的扩展允许……

5. DOMPurify

DOMPurify - 一款仅针对 DOM、速度极快、对 HTML、MathML 和 SVG 具有超强容忍度的 XSS 清理器。

GitHub 标志 cure53 / DOMPurify

DOMPurify 是一款仅针对 DOM 的超快、超高容错性的 XSS 安全工具,支持 HTML、MathML 和 SVG。DOMPurify 默认提供安全保护,同时还提供了丰富的配置选项和接口。演示:

DOM净化

npm 版本 构建和测试 下载 npm 包已最小化 gzip 压缩大小(选择导出项) GitHub 代码大小(字节) 家属

NPM

DOMPurify 是一款仅针对 HTML、MathML 和 SVG 的 DOM 专用、超快、超强容错性的 XSS 清理器。

它使用起来也非常简单,很容易上手。DOMPurify于 2014 年 2 月启动,目前已更新至v3.1.7版本。

DOMPurify 使用 JavaScript 编写,可在所有现代浏览器(Safari (10+)、Opera (15+)、Edge、Firefox 和 Chrome,以及几乎所有使用 Blink、Gecko 或 WebKit 内核的浏览器)中运行。它不会在 MSIE 或其他旧版浏览器上出现问题,只是不会执行任何操作。

请注意,DOMPurify v2.5.7是支持 MSIE 的最新版本。如需与 MSIE 兼容的重要安全更新,请使用2.x 分支

我们的自动化测试目前涵盖19 种不同的浏览器,未来还将支持更多浏览器。我们也支持 Node.js v16.x、v17.x、v18.x 和 v19.x 版本,并在jsdom上运行 DOMPurify 。已知旧版本的 Node.js 也能正常工作,但……我们无法保证。

DOMPurify是由一群安全专家编写的……


图 6

Fig 为你的终端添加了 VSCode 风格的自动补全功能。

GitHub 标志 withfig /自动完成

为现有终端和 shell 提供 IDE 风格的自动补全功能

徽章:macOS 徽章:文档 徽章:贡献者

Amazon Q Developer 在命令行中git为数百种常用 CLI 命令(例如`cd`、npm docker`cd` 和 `cd` )添加了 IDE 风格的自动补全功能aws。开始输入后,Amazon Q 会自动填充与上下文相关的子命令、选项和参数。

⚡️安装

注意:下载完成后,启动应用程序以设置 Amazon Q 的命令行!


演示 Amazon Q 的命令行自动补全功能


👋 什么是“完成规格”?

补全规范是一种声明式模式,它为 CLI 工具指定了补全subcommands、补全options和补全建议。Amazon Q 使用这些模式来生成建议。args


😎 不到 3 分钟即可贡献您的第一个规范

按照以下步骤操作,或参阅我们的入门指南:fig.io/docs

先决条件:

  • 下载 Amazon Q 命令行版
  • Node 和 Pnpm

步骤

  1. 请确保您已pnpm 安装……


7. 木偶师-群众演员

通过插件教木偶师新技巧。

GitHub 标志 berstend / puppeteer-extra

💯 通过插件教木偶师新技巧。

木偶师-群众演员下载

这是 的单体仓库puppeteer-extra, 是一个模块化的插件框架puppeteer。 :-)

🌟有关主要文档,请前往软件包puppeteer-extra

我们最近也推出了对 Playwright 的支持,如果您对此感兴趣,请前往playwright-extra

单体仓库

贡献

贡献

欢迎提交 PR 和新插件!插件 APIpuppeteer-extra简洁易用。您可以先查看PuppeteerExtraPlugin基类文档快速上手,并参考现有插件(例如anonymize-ua插件)进行开发。

我们使用基于Lerna(以及 yarn workspaces)的monorepo ,用ava进行测试,使用标准样式进行代码检查,并大量使用JSDoc根据代码自动生成 Markdown文档。:-)

勒纳

勒纳

这个单体仓库由Lerna和 yarn workspaces提供支持。

初始设置

# Install deps
yarn
# Bootstrap the packages in the current Lerna repo.
# Installs all of their
Enter fullscreen mode Exit fullscreen mode

8. swc

swc 是一个用 rust 编写的超快编译器;它能够根据现代标准和 typescript 生成广泛支持的 javascript。

GitHub 标志 swc-project / swc

基于 Rust 的 Web 平台

swc

加快网站(开发)速度

下载(@swc/core) 下载(第三方)

不明确的 GitHub 发布(最新语义化版本)

GitHub 代码大小(字节) 节点当前(作用域)

Discord

SWC(全称 SWC Speedy Web Compiler)是一个用 Rust 编写的超快 TypeScript/JavaScript 编译器。它同时是一个 Rust 和 JavaScript 库。如果您在 Rust 中使用 SWC,请参阅rustdoc。对于大多数用户来说,使用该库的入口点是`parser`

此外,SWC 还努力确保

如果选择每个箱子的最新版本,就可以正常工作。

适用于 Rust 用户。

箱子的 MSRV 目前为1.73

要更新所有使用的 SWC crate,您可以运行此脚本curl https://raw.githubusercontent.com/swc-project/swc/main/scripts/update-all-swc-crates.sh | bash -s。该脚本会将所有依赖项更新到最新版本,并运行cargo build以确保一切正常运行。请注意,您需要

  • jq
  • cargo upgrade

运行脚本的命令。


如果您正在使用 JavaScript 中的 SWC,请参阅网站上的文档

文档

查看…


9. 墨线

Inkline 是一个可定制的 Vue.js UI/UX 库,旨在创建完美响应式网站。

GitHub 标志 墨线/墨线

Inkline 是一个直观的 UI 组件库,它为开发者提供了一个友好的基础,用于构建高质量、易于访问且可定制的 Vue.js 3 设计系统。

墨线

墨线

Inkline 是一个直观的 UI 组件库,它为开发者提供了一个友好的基础,用于构建高质量、易用且可定制的 Vue.js 3 设计系统。Inkline由@alexgrozav

编写和维护。首页·文档· Storybook · Playground · Issue Tracker


Vue.js UI/UX 库 - Inkline


npm 版本 建造 覆盖范围状态 下载 Discord

目录

安装

请阅读入门指南或选择以下指南之一。Inkline 提供 Vite.js(推荐)、Vue.js CLI 和 Nuxt.js 的官方集成,但也可以轻松安装以进行自定义 Vue.js 配置。

Nuxt.js 安装 - Inkline Nuxt.js 安装 - Inkline Vue CLI 安装 - Inkline 定制安装 - Inkline CDN 安装 - Inkline

错误报告和功能请求

遇到 bug 或有功能需求?请先搜索已关闭的 issue。如果你的问题或想法尚未被解答,请提交新的 issue

社区

获取 Inkline 开发的最新动态,并与项目维护者和社区成员交流。


10. 小马驹

基于 TypeScript 的优雅且功能全面的 Node.js Web 框架。

GitHub 标志 小马驹/小马

功能齐全的Node.js框架🚀


https://foalts.org

许可证:MIT 已知漏洞 提交活动 最后一次提交

什么是小马驹?

Foal(或FoalTS)是一个用于创建 Web 应用程序的 Node.js 框架。

它提供了一套即用型组件,让您无需每次都重复造轮子。在一个平台上,您就能拥有构建 Web 应用程序的完整环境。这包括命令行界面 (CLI)、测试工具、前端实用程序、脚本、高级身份验证、对象关系映射 (ORM)、部署环境、GraphQL 和 Swagger API、AWS 实用程序等等。您不再需要费力地在 npm 上搜索软件包并让它们协同工作。一切都已准备就绪。

尽管提供了所有这些功能,但该框架依然保持简洁。我们摒弃了复杂性和不必要的抽象,力求提供最直观、最具表现力的语法。我们相信,简洁优雅的代码是开发和维护应用程序的最佳方式。它还能让您将更多时间用于编写代码,而不是试图理解……





观星📈

过去7天涨幅最大的股票

  1. 免费编程书籍+2,453 星
  2. 自建 X +2,383 颗星
  3. Web 开发者路线图+2,178 星
  4. 公共 API +1,804 星
  5. JavaScript 算法+1,341 星

过去 7 天增长幅度最大(%)

  1. JS Image Carver +37%
  2. party.js +26%
  3. Choc UI +24%
  4. 超级板+22%
  5. +8%

过去 30 天涨幅最大的股票

  1. 编程面试大学+7,913 星
  2. 免费编程书籍+4,655 星
  3. Web 开发者路线图+4,498 星
  4. 公共 API +4,497 星
  5. 克隆战争+3,905 星

过去 30 天增长幅度最大(%)

  1. Appsmith +105%
  2. React Flow +84%
  3. 更简单的状态+59%
  4. 克隆战争+59%
  5. 无头用户界面+55%

《热门项目》以每周新闻简报的形式提供,请访问www.iainfreestone.com注册,以确保您不会错过任何一期。

如果你喜欢这篇文章,可以关注我的推特账号,我会定期发布与HTML、CSS和JavaScript相关的实用技巧。

文章来源:https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-30th-april-2021-efn