---
url: https://sugarat.top/weekly/2025-06-21.md
description: >-
  ① figlet.js - 终端生成 ASCII 艺术字体 ② state-in-url ③ 语法高亮组件 ④ log-vwer - 轻量的日志监控面板 ⑤
  网站链接检测 ⑥ 小恐龙二维码生成 ⑦ 3D 拟物图标资源 ⑧ Biome V2
---

# 视野修炼第124期 | 终端艺术字

欢迎来到第 124 期的【视野修炼 - 技术周刊】，下面是本期的精选内容简介

\[\[toc]]

下面开始本期内容的介绍**ღ( ´･ᴗ･\` )比心**。

## 🔥强烈推荐

### [1. figlet.js](https://github.com/patorjk/figlet.js) - 终端生成 ASCII 艺术字体

```js
var figlet = require("figlet");

figlet("Hello World!!", function (err, data) {
  console.log(data);
});
```

```md
  _   _      _ _        __        __         _     _ _ _
 | | | | ___| | | ___   \ \      / /__  _ __| | __| | | |
 | |_| |/ _ \ | |/ _ \   \ \ /\ / / _ \| '__| |/ _` | | |
 |  _  |  __/ | | (_) |   \ V  V / (_) | |  | | (_| |_|_|
 |_| |_|\___|_|_|\___/     \_/\_/ \___/|_|  |_|\__,_(_|_)
```

还有 CLI 版本支持

![](https://cdn.upyun.sugarat.top/mdImg/sugar/ac3c43e2426be6df92693bf38a38861c)

收藏起来，写CLI能用上！

### [2. state-in-url](https://state-in-url.dev/)

将状态信息存储在URL中，便于持久化当下的用户操作后的页面数据，也便于分享复现。

目前支持Next，React Router，Remix。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/8136fd31ab264f82c964210030ff4adc)

### [3. 语法高亮组件](https://github.com/andreruffert/syntax-highlight-element)

![](https://cdn.upyun.sugarat.top/mdImg/sugar/4d09e55a4f0efaccce38ebfcfb3ae232)

原生的 web component，用于代码高亮。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/9ebe7cfaa0c9a63f67b6d4bab7244895)

```js
import 'syntax-highlight-element';
```

```html
<syntax-highlight lang="js">
const a = 1;
</syntax-highlight>
```

使用非常简单！基于 CSS 自定义高亮API实现。

## 🔧开源工具&技术资讯

### [4. log-vwer - 轻量的日志监控面板](https://github.com/iamqitmeer/log-vwer)

![](https://cdn.upyun.sugarat.top/mdImg/sugar/b51675437f03617372d20cb01ef1220e)

用于监控 Node.js 应用程序日志的仪表板，实现应用自托管。

使用也比较简单，支持多种日志存储方式！(数据库，文件，内存)

```js
// Import the necessary tools
const express = require('express');
const { setupLogger, viewerMiddleware } = require('log-vwer');

// Create your Express app
const app = express();
const PORT = process.env.PORT || 3000;

// This is an async function to make sure we connect to the database *before* starting the server.
async function startServer() {
    // === Part 1: Set up the logger ===
    const logger = await setupLogger({
      serviceName: 'My Awesome E-Commerce App',
      store: 'mongodb',
      mongoUrl: 'mongodb://localhost:27017/my_app_logs',
    });

    // === Part 2: Activate the dashboard ===
    // This tells your app: "When someone goes to /_logs, first check the password, then show the log dashboard."
    app.use('/_logs', myAuthMiddleware, viewerMiddleware(logger));

    // Start your server only after everything is ready
    app.listen(PORT, () => {
      logger.warn(`Server is alive on port ${PORT}. Ready to rock!`);
      console.log(`Log dashboard is live at: http://localhost:${PORT}/_logs`);
    });
}

// Run the function to start the server!
startServer();
```

### [5. 网站链接检测](https://github.com/isixe/LinkChecker)

![](https://cdn.upyun.sugarat.top/mdImg/sugar/08110ca24d5e7daefa6f651ad08b0803)

可以检测网页中的外链，死链等情况。

### [6. 小恐龙二维码生成](https://liuliangsir.github.io/chromium-style-qrcode-generator-with-wasm/)

![](https://cdn.upyun.sugarat.top/mdImg/sugar/17336bc59518637d6541532256293ba4)

*Chrome 同款风格*

### [7. 3D 拟物图标资源](https://www.thiings.co/things)

![](https://cdn.upyun.sugarat.top/mdImg/sugar/31fcb6d6abb7bc34d05827f1e733aefe)

### [8. Biome V2](https://biomejs.dev/blog/biome-v2/)

宣称是首个无需依赖 TypeScript 编译器(`tsc`)、却仍能提供类型感知规则的 JavaScript 和 TypeScript 代码检查工具。

## 😛趣图

![](https://cdn.upyun.sugarat.top/mdImg/sugar/ecd5925e27f46da327f82c94f2e742f9)

## ⭐️强力推荐关注

> 周刊部分内容来源如下渠道，推荐大家关注。

* [阮一峰: 科技爱好者周刊](https://www.ruanyifeng.com/blog/archives.html) - 记录每周值得分享的科技内容，周五发布
* [前端 RSS](https://fed.chanceyu.com/) - 根据 RSS 订阅源抓取最新前端技术文章
* [值得一读技术博客](https://daily-blog.chlinlearn.top/) - 每天进步一点点，每天分享有料的技术文章！
* [FRE123 技术周刊精选](https://www.fre321.com/weekly) - 技术周刊精选推荐信息流