---
url: https://sugarat.top/weekly/2024-09-08.md
description: >-
  ① style-observer - 监听 CSS 变化 ② Jimp - JS 图片处理库 ③ yocto-spinner - 终端旋转 loading
  ④ revideo - Code 生成视频 ⑤ button-stealer - 按钮收藏 ⑥ 免费头像合集 ⑦ 应该使用的HTML TOP5 特性 ⑧
  3.78MB 大小的 JS 服务 Docker 镜像
---

# 视野修炼第100期 | CSS observer

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

*🎉 不知不觉 100 期了 💐*

\[\[toc]]

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

## 🔥强烈推荐

### [1. style-observer](https://www.bram.us/2024/08/31/introducing-bramus-style-observer-a-mutationobserver-for-css/) - 监听 CSS 变化

允许使用 js 监听 CSS的变化。

比如监听 body 元素的背景颜色变化：

```js
import CSSStyleObserver from '@bramus/style-observer'

const properties = ['background-color']

const cssStyleObserver = new CSSStyleObserver(properties, (values) => {
  console.log(values['background-color'])
})

cssStyleObserver.attach(document.body)
```

### [2. Jimp](https://jimp-dev.github.io/jimp/) - JS 图片处理库

支持 Node 和 浏览器。

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

### [3. yocto-spinner](https://github.com/sindresorhus/yocto-spinner?tab=readme-ov-file) - 终端旋转 loading

轮子哥近期的新作品，终端旋转 loading。

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

```js
import yoctoSpinner from 'yocto-spinner'

const spinner = yoctoSpinner({ text: 'Loading…' }).start()

setTimeout(() => {
  spinner.success('Success!')
}, 2000)
```

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

### [4. revideo](https://github.com/redotvideo/revideo) - Code 生成视频

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

一个 React 组件。支持将内容转为视频输出。

### [5. button-stealer](https://chromewebstore.google.com/detail/button-stealer/iiikidmnimlpahbeknmkeonmemajpccj) - 按钮收藏

一个有趣的 Chrome 插件，自动从你打开的每个网站自动保存一个按钮。

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

### [6. 免费头像合集](https://alohe.github.io/avatars/)

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

支持下载，也提供 CDN 地址。

## 📚教程&文章

### [7. 应该使用的HTML TOP5 特性](https://dev.to/safdarali/top-5-html-features-youre-not-using-but-should-be-2i0e)

挑 2 个：

1. dialog 元素

```html
<dialog id="myDialog">
    <p>This is a modal dialog</p>
    <button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>

<button onclick="document.getElementById('myDialog').showModal()">Open Dialog</button>
```

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

2. details 元素

```html
<details>
    <summary>More Information</summary>
    <p>This is the hidden content that will be revealed when you click on "More Information".</p>
</details>
```

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

### [8. 3.78MB 大小的 JS 服务 Docker 镜像](https://shenzilong.cn/record/How%20I%20Created%20a%203.78MB%20Docker%20Image%20for%20a%20JavaScript%20Service)

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

"要实现如此小的 Docker 镜像，Node.js 不再是一个可行的选择。最流行的轻量级 JavaScript 运行时是 QuickJS。"

基于 QuickJS 的更成熟的微 JavaScript 运行时包括 txiki.js 和 llrt。

作者使用 `llrt` 作为运行时，实现了一个 字体裁剪工具的迁移。

## 😛趣图

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

## ⭐️强力推荐关注

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

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