使用 Driverjs 快速创建新用户引导交互效果

Hello，大家好。这里是妙才的周刊第 44 期，这里将会分享笔者每周接触到的科技内容亦或是 Web 开发的一些新知识，甚至是一些有趣的非技术性人、事、物 🚀

封面图：我的小闪电~

以下是本周分享的内容：

Driverjs

Driver.js 是一个用户提供产品用户引导交互效果的第三方 JavaScript 库，使用 TypeScript 编写并且无第三方依赖。如果你的产品需要做一个新手引导交互，或许可以考虑Driver.js!

这个库的用法非常简单，直接使用CDN脚本或npm安装都可以，举个例子：

import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  showProgress: true,
  steps: [
    { element: '.page-header', popover: { title: 'Title', description: 'Description' } },
    { element: '.top-nav', popover: { title: 'Title', description: 'Description' } },
    { element: '.sidebar', popover: { title: 'Title', description: 'Description' } },
    { element: '.footer', popover: { title: 'Title', description: 'Description' } },
  ]
});

driverObj.drive();

如此即可提供一个具有多个步骤的用户引导交互，其样式和动画笔者体验之后感觉还是不错的。

Yazi

sxyazi/yazi: ⚡️ Blazing fast terminal file manager written in Rust, based on async I/O. 基于Rust Async I/O开发的终端文件管理器！

支持终端搜索、文件预览、代码高亮等功能，速度很快，喜欢终端的朋友或许可以看看。

Web Interface Guidelines

Web Interface Guidelines：这份文档概述了构建一个良好（的网页）界面所需的细节，并且这是一个活跃的文档，根据学习经验定期更新。其中存在一些主观观念，但大多适用于所有网站。笔者在此真诚地分享这个文档给其他 web 开发者亦或是正在阅读的你。

Vesper

Vesper - Visual Studio Marketplace 是一款暗色系的VS Code编辑器主题。

Aplayer-react

aplayer-react – Nextra：以aplayer为原型的React播放器组件实现，支持SSR。

作者将之应用到了自己的Gatsby博客中，效果如下：

对于开发者来说，我想我们或许可以从其源代码：SevenOutman/aplayer-react: The missing APlayer for your React applications 之中学习到如何开发一个第三方的组件，以及一些良好的代码范式和编写方法。

Ts-lib-starter

egoist/ts-lib-starter: My minimal TypeScript library starter：作者在 github 上分享了自己的最小化TypeScript库开发源代码，如果你对使用TypeScript开发一个库感兴趣，推荐阅读。

这个仓库的主要功能特色如下：

使用pnpm管理包依赖
使用semantic-release管理自动版本发布
使用tsup打包TypeScript源代码
使用Vitest进行测试

如果你对这部分知识感兴趣，欢迎和我一起阅读这个仓库的代码。

MingCute Icon

目前已经发布了 2400+ 免费 Icon 资源，支持下载svg或png文件，亦或是复制svg代码，并且支持一定的编辑功能。

MingCute Icon是一个简单而精美的开源图标库。无论您是设计师还是开发人员，它都非常适合在Web和移动应用中使用。

Get TT/X icons back

pionxzh/Get-Twitter-Icons-Back: Restore the icon of Twitter. No more 𝕏.!

众所周知，马斯克把Logo直接改了。于是乎有开发者写了这个油猴脚本来替换旧版Logo，如果你需要（眼不见为净），自取 😂

书籍：经济旋涡

https://drive.google.com/file/d/1RdgJne7nLdr9x4Z5inywT_LWdfu12Nw7/view 谷歌云盘

最后

好了，今天的分享就先到这里，大家下周见~

ps: 🎉 Erin 获得了177个用户~ 开心！