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

🚀GitHub 上 10 个热门 Web 开发项目 - 2022 年 1 月 7 日 Shifty - 网络上速度最快的 TypeScript 动画引擎 readme.so Epub.js v0.3 Amplify UI tsup sakura:一个极简的、无类 CSS 框架/主题。A-Frame Tippy.js 由 Mux 主办的 DEV 全球展示挑战赛:展示你的项目!

🚀GitHub 上面向 Web 开发人员的 10 个热门项目 - 2022 年 1 月 7 日

Shifty——网络上速度最快的TypeScript动画引擎

readme.so

Epub.js v0.3

Amplify UI

tsup

sakura:一个极简的、无类CSS框架/主题

A型框架

Tippy.js

由 Mux 主办的 DEV 全球展示挑战赛:展示你的项目!

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

1. 狡猾的

Shifty是目前网络上速度最快的JavaScript动画引擎。它是一个用于JavaScript的补间动画引擎,是一个轻量级库,旨在被更高级别的工具封装使用。

GitHub 标志 jeremyckahn / shifty

网络上速度最快的 TypeScript 动画引擎

Shifty——网络上速度最快的TypeScript动画引擎

当前Shifty版本

  • main置信区间

Shifty 是一个用于 TypeScript 的动画引擎。它是一个轻量级库,旨在被更高级别的工具封装。Shifty 的核心功能包括:

  • 一流的动画性能
  • 对单个动画的播放控制
  • 动画生命周期关键点的可扩展性接口
  • Promise支持async/await编程

这非常有用,因为它提供了构建可自定义动画所需的最少功能。Shifty 经过优化,能够以最小的处理和内存开销运行。

import { tween } from 'shifty'
;(async () => {
  const element = document.querySelector('#tweenable')
  const { tweenable } = await tween({
    render: ({ scale, x }) => {
      element.style.transform = `translateX(${x}px) scale(${scale})`
    },
Enter fullscreen mode Exit fullscreen mode

2. readme.so

一款在线拖放式编辑器,可轻松创建 README 文件

GitHub 标志 octokatherine / readme.so

一款在线拖放式编辑器,可轻松创建 README 文件

readme.so

Readme.so 是一个在线编辑器,旨在帮助开发者为其项目创建 readme 文件。

生产环境链接:readme.so

特征

  • 从列表中选择要添加到 README 文件中的章节。
  • 编辑各部分的内容
  • 拖放即可重新排列各部分
  • 下载您的自述文件

贡献

我们随时欢迎投稿!

请参阅CONTRIBUTING.md 文件,了解入门方法。

技术栈

运行开发服务器

要运行开发服务器,请运行npm run dev并导航至localhost:3000

反馈

欢迎提出反馈意见!请在Twitter上联系我们或提交新问题!

执照

麻省理工学院

这个自述文件是用readme.so生成的:)





3. Epub.js

Epub.js 是一个 JavaScript 库,用于在浏览器中跨多种设备渲染 ePub 文档。

GitHub 标志 futurepress / epub.js

浏览器中的增强型电子书。

Epub.js v0.3

FuturePress观点

Epub.js 是一个 JavaScript 库,用于在浏览器中跨多种设备渲染 ePub 文档。

Epub.js 提供了一个接口,用于实现常见的电子书功能(例如渲染、持久化和分页),无需开发专门的应用程序或插件。更重要的是,它采用非常宽松的FreeBSD许可证。

边读《白鲸》边试试。

为什么选择 EPUB 格式

为什么选择 EPUB 格式

EPUB标准是一种广泛使用且易于转换的格式。目前许多书籍都采用这种格式,而且它可以转换为许多其他格式(例如 PDF、Mobi 和 iBooks)。

解压后的 EPUB3 文件包含 HTML5 文件、CSS、图像和其他媒体文件,就像其他网站一样。但它遵循一套书籍组件架构,使我们能够根据受控词汇表渲染书籍及其各个部分。

更具体地说,EPUB 模式规范了目录,并提供了一个清单文件以启用缓存……


4. 增强用户界面

Amplify UI 是一个开源 UI 库,它具有云连接组件,可无限定制、易于访问,并且可以集成到任何应用程序中。

GitHub 标志 aws-amplify / amplify-ui

Amplify UI 是一系列易于访问、可定制主题、高性能的 React(及其他!)组件,可以直接连接到云端。

AWS Amplify 标志AWS Amplify


Amplify UI 标志

Amplify UI

GitHub Discord 未解决的漏洞 功能请求 通用航空里程碑

Amplify UI 是一个开源 UI 库,它包含可云端连接的组件,这些组件具有无限的可定制性、易于访问,并且可以集成到任何应用程序中。Amplify UI 包括:

  1. 可简化复杂云连接工作流程的互联组件,例如身份验证器。
  2. 基本组件可在整个 Amplify UI 中保持一致性,并允许您构建符合您品牌的完整应用程序,例如按钮和徽章。
  3. 数据绑定组件,使显示动态数据变得容易,例如 DataStoreCollections。
  4. 主题功能允许您自定义 Amplify UI 的外观,使其与您的品牌相匹配。

文档

入门

组件矩阵

互连组件 React React Native 观景台
验证器
应用内消息
地理(地图视图)
账户设置
存储(文件上传器)
存储(存储映像)
活跃度(FaceLivenessDetector)
基本元素 React 观景台
警报
自动完成
徽章
按钮
卡片
复选框字段

5. 计划

新一代项目生成器。projen 可以根据用 JavaScript 编写的类型良好的定​​义,合成项目配置文件,例如 package.json、tsconfig.json、.gitignore、GitHub 工作流、eslint、jest 等。

GitHub 标志 projen / projen

利用高级配置管理快速构建现代应用程序

投影

通过代码定义和维护复杂的项目配置

文档·更新日志·项目类型·加入社区

Apache 2.0 许可证 Gitpod 即用型代码 发布徽章 提交活动

projen可以根据用 JavaScript 编写的类型良好的定​​义,合成项目配置文件,例如package.jsontsconfig.json、 、GitHub 工作流、eslint、jest 等。.gitignore

与现有的模板/脚手架工具不同,projen并非一次性生成器。生成的文件绝不应手动编辑(事实上,projen 强制要求这样做)。要修改项目设置,用户需要与功能丰富的强类型类交互,并执行相应的命令projen来更新项目配置文件。

通过定义自定义项目类型并在多个存储库中使用 projen,可以跨数十个(甚至数百个!)项目更新配置文件和 CI/CD 工作流。

来看看projen的创始人带来的这段演讲。

入门

projen无需安装。您将使用npx运行projen,它会自动完成所有必要的设置步骤。

为了创造……


6. tsup

打包 TypeScript 库的最简单快捷的方法。

GitHub 标志 利己主义者/ tsup

打包 TypeScript 库的最简单快捷的方法。

tsup

npm 版本 npm 下载

使用esbuild打包您的 TypeScript 库,无需任何配置

👀它可以捆绑哪些产品?

Node.js 原生支持的所有功能,例如.js.json.mjs。以及 TypeScript.ts.tsx。CSS支持目前处于实验阶段

⚙️ 安装

将其安装到您的项目文件夹中:

npm i tsup -D
# Or Yarn
yarn add tsup --dev
# Or pnpm
pnpm add tsup -D
Enter fullscreen mode Exit fullscreen mode

您也可以全局安装,但不建议这样做。

📖 用法

捆绑文件

tsup [...files]
Enter fullscreen mode Exit fullscreen mode

文件被写入./dist

您可以一次性打包多个文件:

tsup src/index.ts src/cli.ts
Enter fullscreen mode Exit fullscreen mode

这将输出dist/index.jsdist/cli.js

📚 文档

如需了解完整用法,请查阅文档

有关所有配置选项,请参阅API 文档

💬 讨论

请前往讨论区分享您的想法。

赞助商

利用 Storybook 的自动化工作流程更快地交付 UI

赞助商

项目统计数据

另类

执照

麻省理工学院 © EGOIST







7. 樱花

一个极简的无类 CSS 框架/主题。Sakura 支持极其简便的主题定制,使用变量即可实现双色调配色方案。

GitHub 标志 oxalorg /樱花

🌸 一个极简的 CSS 框架/主题。

sakura:一个极简的、无类CSS框架/主题

npm

[前往GitHub仓库]

樱花

完美的花朵极为罕见。即使你穷尽一生去寻找它,也绝不会虚度此生。

只需打开sakura.css任何网页,就能在短短 0 秒内,将一个丑陋的 1900 年代网站变成一个漂亮、现代的网站。

Sakura 易于定制和扩展。

Sakura 支持使用变量轻松实现双色调配色方案的主题定制。它自带多个预设主题,可以在css此仓库的文件夹中找到。

演示

对比启用禁用樱花图案的实时页面

另外,我的博客也是一个不错的去处,可以查看樱花主题在大量文字下的实际效果(顶部还有一个“更改主题”按钮):

书签

我不想用Sakura进行开发,而是想把它用在网站上……


8. Visual Studio Code 远程开发和 GitHub Codespaces

VS Code Remote - Containers 扩展和 GitHub Codespaces 的开发容器定义库

GitHub 标志 微软/ vscode-dev-containers

注意:此仓库的大部分内容已迁移到新的 devcontainers GitHub 组织 (https://github.com/devcontainers)。有关创建您自己的模板的信息,请参阅 https://github.com/devcontainers/template-starter 和 https://github.com/devcontainers/feature-starter!

重要提示:开发容器项目已迁至开发容器 GitHub 组织的新址,并进行了扩展!我们非常期待在那里与您互动。如需了解更多信息,请查看我们的迁移公告

该存储库已不再活跃,并于 2023 年 11 月存档。作为开放的 Dev Container 规范工作的一部分,我们已将该存储库的大部分内容迁移到devcontainers GitHub 组织

  • 由 Dev Container 规范维护者(例如 VS Code 团队)管理的功能现在位于devcontainers/features中。
  • 由 Dev Container 规范维护者管理的定义/模板现在位于devcontainers/templates中。
  • mcr.microsoft.com/devcontainers现在,镜像mcr.microsoft.com/vscode/devcontainers已从devcontainers/images发布。

对于新的模板/功能,您现在可以自行发布,并可选择将其在工具内显示,只需按照快速入门库中的步骤操作即可:模板快速入门功能快速入门。无需……


9. A字形

用于构建虚拟现实体验的Web框架。

GitHub 标志 aframevr / aframe

🅰️ 用于构建虚拟现实体验的 Web 框架。

A型框架

A型框架

用于构建虚拟现实体验的Web框架。

覆盖范围状态 下载 版本 执照

示例


超级飞船


画家


超中等


A-Blast


周六晚上


音乐森林,作者:@googlecreativelab

更多示例请参见首页《A-Frame 一周回顾》《WebVR 目录》

特征

👓虚拟现实变得简单:A-Frame 处理了在包括移动设备、桌面设备和所有头戴式设备(兼容支持 WebXR 的浏览器)在内的平台上运行所需的 3D 和 WebXR 样板代码,只需将其放入即可<a-scene>

❤️声明式HTML:HTML易于阅读和复制粘贴。由于A-Frame可以从HTML中使用,因此A-Frame对所有人开放:Web开发人员、VR和AR爱好者、教育工作者、艺术家、创客、儿童。

🔌实体组件架构:A-Frame 是一个基于 three.js 的强大框架,为 three.js 提供声明式、可组合、可重用的实体组件结构。A-Frame 可以直接在 HTML 中使用,同时开发者还可以无限制地访问 JavaScript、DOM API、three.js、WebXR 和 WebGL。

⚡…


10. Tippy.js

适用于网页的完整工具提示、弹出框、下拉菜单和菜单解决方案

GitHub 标志 atomiks / tippyjs

工具提示、弹出框、下拉菜单和菜单库

Tippy.js 标志

Tippy.js

适用于网页的完整工具提示、弹出框、下拉菜单和菜单解决方案

npm 每月下载量 MIT许可证

演示和文档

➡️点击此处查看最新演示和文档

迁移指南

安装

软件包管理器

# npm
npm i tippy.js

# Yarn
yarn add tippy.js
Enter fullscreen mode Exit fullscreen mode

导入tippy构造函数和核心 CSS:

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';
Enter fullscreen mode Exit fullscreen mode

CDN

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
Enter fullscreen mode Exit fullscreen mode

核心 CSS 已通过默认的 unpkg 导入方式打包。

用法

有关详细使用信息,请访问文档

组件包装器

执照

麻省理工学院





观星📈

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

  1. 基础电脑游戏+1,371 星
  2. 超赞+1,232 星
  3. 超棒的自托管+795 星
  4. Tauri +646 颗星
  5. 免费编程书籍+617星

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

  1. 基础电脑游戏+69%
  2. MindAR +58%
  3. 滚动捕捉+43%
  4. 菲涅尔系数+16%
  5. fuite +10%

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

  1. Tabby +6,033 颗星
  2. 超赞+4,444 星
  3. 免费编程书籍+3,747 星
  4. 超棒的自托管服务+3,723 星
  5. JavaScript 算法+3,311 星

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

  1. 皮科+400%
  2. Rakkas +141%
  3. md-block +107%
  4. 基础电脑游戏+70%
  5. Peeky +70%

想要查看最新排名,请访问Stargazing.dev


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

如果你喜欢这篇文章,可以关注我的推特账号,我会定期发布关于HTML、CSS和JavaScript的内容。

文章来源:https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-7th-january-2022-c9i