---
url: https://sugarat.top/weekly/2026-08-23.md
description: >-
  ① 屏幕边缘光影效果 ② Blossom Carousel - 轮播组件 ③ 10. Virtua - 快且小的虚拟滚动库 ④ Dot Matrix =
  点阵动画 ⑤ Stolen Buttons - 可供参考的一大批按钮 ⑥ termdom - 使用3剑客构建终端应用 ⑦ Ant - 仅 9 MB的运行时
  ⑧ gridstack.js ⑨ tslog - Beautiful logging  ⑩ import defer ⑪ hucre - 0 依赖的
  Excel 处理库 ⑫ scriptc - TS2Native ⑬ Node 新文档站
---

# 视野修炼第130期 | 光影效果

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

\[\[toc]]

又 🕊 了好几个月了，VibeCoding 多了都没顾上刷资讯了，最近补一下，有趣的还挺多。

## 🔥强烈推荐

### [1. 屏幕边缘光影效果](https://edge-aura.js.org/)

![](https://img.cdn.sugarat.top/mdImg/sugar/70cebdf01f85cce9784471497d5c407b)

类似手机助手唤起时（如苹果的 Siri/超级小爱）周围的柔和发光效果。

### [2. Blossom Carousel](https://www.blossom-carousel.com/docs/getting-started/introduction) - 轮播组件

基于浏览器原生滚动 API 的轮播组件。部分场景可以实现0外部依赖，

![](https://img.cdn.sugarat.top/mdImg/sugar/b2bbe137c6efd1ba31f876041b838a76)

### [3. Virtua](https://github.com/inokawa/virtua) - 快且小的虚拟滚动库

支持 React、Vue、Solid 等，API 简单。

|    Vue   |  React     |
| :---: | :---: |
|   ![](https://cdn.upyun.sugarat.top/mdImg/sugar/d89b89c561ed6ca2bd4aade4fd095436)    |  ![](https://cdn.upyun.sugarat.top/mdImg/sugar/a62800788e0894c269456c83b3aa7591)     |

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

### [4. Dot Matrix](https://dotmatrix.zzzzshawn.cloud/) = 点阵动画

![](https://img.cdn.sugarat.top/mdImg/sugar/25fd83d2fe35d73f28f22067d410bd4c)

*先收藏，以后没准能用上*

### [5. Stolen Buttons](https://anatolyzenkov.com/stolen-buttons) - 可供参考的一大批按钮

![](https://img.cdn.sugarat.top/mdImg/sugar/bee3f0d7bb873f7d0e48a6838124e4de)

印象之前有一个插件也是类似这样，会将访问过的网站收集一个按钮。

**Button Stealer**

![](https://img.cdn.sugarat.top/mdImg/sugar/9e7e46f66aa9548ca74116ebe0586802)

![](https://img.cdn.sugarat.top/mdImg/sugar/01ca13a1fb74e1e4502cd05cce5e4669)

### [6. termdom](https://github.com/bikeshaving/termdom) - 使用3剑客构建终端应用

使用熟悉的dom API 来操作构建终端应用。

![](https://img.cdn.sugarat.top/mdImg/sugar/2944183e097ed4a128fb2e520235dc82)

![](https://img.cdn.sugarat.top/mdImg/sugar/0de7624434b83269b4a61f7ebfeca2e8)

### [7. Ant](https://antjs.org/) - 仅 9 MB的运行时

C 语言构建的 JavaScript 运行时，仅 9MB。

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

### [8. gridstack.js](https://gridstackjs.com/)

可用于创建可灵活拖拽的大盘页面。

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

### [9. tslog](https://tslog.js.org/) - Beautiful logging

多运行时支持的日志库，运行时 0 外部依赖。

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

*看着不错，引入项目里用用看。*

### [10. import defer](https://nitayneeman.com/blog/introducing-import-defer-in-ecmascript/)

7月底进入 stage 3，延迟加载模块的语法。

在此之前动态加载的版办法。

```js
// cjs
exports.renderReport = function (data) {
  const chartRenderer = require('chart-renderer')
  return chartRenderer.render(data)
}

// esm
export async function renderReport(data) {
  const { render } = await import('chart-renderer')
  return render(data)
}
```

defer 语法。

```ts
// 此时会导入，但不执行
import defer * as ns from "some-module";


function useFeature() {
  // 首次读取的时候才执行模块里的代码
  return ns.feature(); // reading this is what triggers evaluation
}

// or 动态导入
const ns = await import.defer("some-module");
```

*又学到一手*

### [11. hucre](https://github.com/productdevbook/hucre) - 0 依赖的 Excel 处理库

![](https://img.cdn.sugarat.top/mdImg/sugar/3abf52495e0c80f37c368c8b46ac0cc5)

支持读写XLSX、CSV、ODS、JSON、NDJSON、XML等格式。服务端客户端都可以使用。

### [12. scriptc](https://scriptc.dev/introduction) - TS2Native

将TS脚本编译成可执行文件。

![](https://img.cdn.sugarat.top/mdImg/sugar/69fadd64aa4e3d78471a8d66c12e8f98)

## 📚教程&文章

### [13. Node 新文档站](https://beta.docs.nodejs.org/)

https://beta.docs.nodejs.org/

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

## ⭐️强力推荐关注

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

* [frontendfoc](https://frontendfoc.us/issues) - 🚀 Frontend **Focus**
* [JavaScript Weekly](https://javascriptweekly.com/issues) - A newsletter of JavaScript articles, news and cool projects
* [nodejs Weekly](https://nodeweekly.com/issues) - A free, once–weekly e-mail round-up of Node.js news and articles.