🚀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的补间动画引擎,是一个轻量级库,旨在被更高级别的工具封装使用。
Shifty——网络上速度最快的TypeScript动画引擎

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})`
},…
2. readme.so
一款在线拖放式编辑器,可轻松创建 README 文件
一款在线拖放式编辑器,可轻松创建 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 文档。
Epub.js v0.3

Epub.js 是一个 JavaScript 库,用于在浏览器中跨多种设备渲染 ePub 文档。
Epub.js 提供了一个接口,用于实现常见的电子书功能(例如渲染、持久化和分页),无需开发专门的应用程序或插件。更重要的是,它采用非常宽松的FreeBSD许可证。
边读《白鲸》边试试。
为什么选择 EPUB 格式

EPUB标准是一种广泛使用且易于转换的格式。目前许多书籍都采用这种格式,而且它可以转换为许多其他格式(例如 PDF、Mobi 和 iBooks)。
解压后的 EPUB3 文件包含 HTML5 文件、CSS、图像和其他媒体文件,就像其他网站一样。但它遵循一套书籍组件架构,使我们能够根据受控词汇表渲染书籍及其各个部分。
更具体地说,EPUB 模式规范了目录,并提供了一个清单文件以启用缓存……
4. 增强用户界面
Amplify UI 是一个开源 UI 库,它具有云连接组件,可无限定制、易于访问,并且可以集成到任何应用程序中。
Amplify UI 是一系列易于访问、可定制主题、高性能的 React(及其他!)组件,可以直接连接到云端。
AWS Amplify

Amplify UI

Amplify UI 是一个开源 UI 库,它包含可云端连接的组件,这些组件具有无限的可定制性、易于访问,并且可以集成到任何应用程序中。Amplify UI 包括:
- 可简化复杂云连接工作流程的互联组件,例如身份验证器。
- 基本组件可在整个 Amplify UI 中保持一致性,并允许您构建符合您品牌的完整应用程序,例如按钮和徽章。
- 数据绑定组件,使显示动态数据变得容易,例如 DataStoreCollections。
- 主题功能允许您自定义 Amplify UI 的外观,使其与您的品牌相匹配。
文档
入门
组件矩阵
| 互连组件 |
React |
React Native |
角 |
观景台 |
| 验证器 |
✅ |
✅ |
✅ |
✅ |
| 应用内消息 |
✅ |
✅ |
| 地理(地图视图) |
✅ |
| 账户设置 |
✅ |
| 存储(文件上传器) |
✅ |
| 存储(存储映像) |
✅ |
| 活跃度(FaceLivenessDetector) |
✅ |
| 基本元素 |
React |
角 |
观景台 |
| 警报 |
✅ |
| 自动完成 |
✅ |
| 徽章 |
✅ |
| 按钮 |
✅ |
| 卡片 |
✅ |
| 复选框字段 |
✅ |
…
5. 计划
新一代项目生成器。projen 可以根据用 JavaScript 编写的类型良好的定义,合成项目配置文件,例如 package.json、tsconfig.json、.gitignore、GitHub 工作流、eslint、jest 等。
投影
通过代码定义和维护复杂的项目配置
文档·更新日志·项目类型·加入社区

projen可以根据用 JavaScript 编写的类型良好的定义,合成项目配置文件,例如package.json、tsconfig.json、 、GitHub 工作流、eslint、jest 等。.gitignore
与现有的模板/脚手架工具不同,projen并非一次性生成器。生成的文件绝不应手动编辑(事实上,projen 强制要求这样做)。要修改项目设置,用户需要与功能丰富的强类型类交互,并执行相应的命令projen来更新项目配置文件。
通过定义自定义项目类型并在多个存储库中使用 projen,可以跨数十个(甚至数百个!)项目更新配置文件和 CI/CD 工作流。
来看看projen的创始人带来的这段演讲。
入门
projen无需安装。您将使用npx运行projen,它会自动完成所有必要的设置步骤。
为了创造……
6. tsup
打包 TypeScript 库的最简单快捷的方法。
打包 TypeScript 库的最简单快捷的方法。
tsup

使用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
您也可以全局安装,但不建议这样做。
📖 用法
捆绑文件
tsup [...files]
文件被写入./dist。
您可以一次性打包多个文件:
tsup src/index.ts src/cli.ts
这将输出dist/index.js和dist/cli.js。
📚 文档
如需了解完整用法,请查阅文档。
有关所有配置选项,请参阅API 文档。
💬 讨论
请前往讨论区分享您的想法。
赞助商


项目统计数据

执照
麻省理工学院 © EGOIST
7. 樱花
一个极简的无类 CSS 框架/主题。Sakura 支持极其简便的主题定制,使用变量即可实现双色调配色方案。

[前往GitHub仓库]

完美的花朵极为罕见。即使你穷尽一生去寻找它,也绝不会虚度此生。
只需打开sakura.css任何网页,就能在短短 0 秒内,将一个丑陋的 1900 年代网站变成一个漂亮、现代的网站。
Sakura 易于定制和扩展。
Sakura 支持使用变量轻松实现双色调配色方案的主题定制。它自带多个预设主题,可以在css此仓库的文件夹中找到。
演示
对比启用和禁用樱花图案的实时页面。
另外,我的博客也是一个不错的去处,可以查看樱花主题在大量文字下的实际效果(顶部还有一个“更改主题”按钮):
书签
我不想用Sakura进行开发,而是想把它用在网站上……
8. Visual Studio Code 远程开发和 GitHub Codespaces
VS Code Remote - Containers 扩展和 GitHub Codespaces 的开发容器定义库
注意:此仓库的大部分内容已迁移到新的 devcontainers GitHub 组织 (https://github.com/devcontainers)。有关创建您自己的模板的信息,请参阅 https://github.com/devcontainers/template-starter 和 https://github.com/devcontainers/feature-starter!
9. A字形
用于构建虚拟现实体验的Web框架。
A型框架

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

示例






更多示例请参见首页、《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
适用于网页的完整工具提示、弹出框、下拉菜单和菜单解决方案
Tippy.js
适用于网页的完整工具提示、弹出框、下拉菜单和菜单解决方案
演示和文档
➡️点击此处查看最新演示和文档
迁移指南
安装
软件包管理器
# npm
npm i tippy.js
# Yarn
yarn add tippy.js
导入tippy构造函数和核心 CSS:
import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';
CDN
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
核心 CSS 已通过默认的 unpkg 导入方式打包。
用法
有关详细使用信息,请访问文档。
组件包装器
执照
麻省理工学院
观星📈
- 基础电脑游戏+1,371 星
- 超赞+1,232 星
- 超棒的自托管+795 星
- Tauri +646 颗星
- 免费编程书籍+617星
- 基础电脑游戏+69%
- MindAR +58%
- 滚动捕捉+43%
- 菲涅尔系数+16%
- fuite +10%
- Tabby +6,033 颗星
- 超赞+4,444 星
- 免费编程书籍+3,747 星
- 超棒的自托管服务+3,723 星
- JavaScript 算法+3,311 星
- 皮科+400%
- Rakkas +141%
- md-block +107%
- 基础电脑游戏+70%
- 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