开拓视野第1期 | CSS observer

• 🔥强烈推荐
  • 1. style-observer - 监听 CSS 变化
  • 2. Jimp - JS 图片处理库
  • 3. yocto-spinner - 终端旋转 loading
• 🔧开源工具&技术资讯
  • 4. revideo - Code 生成视频
  • 5. button-stealer - 按钮收藏
  • 6. 免费头像合集
• 📚教程&文章
  • 7. 3.78MB 大小的 JS 服务 Docker 镜像

🔥强烈推荐

1. style-observer - 监听 CSS 变化

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

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

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 - JS 图片处理库

支持 Node 和 浏览器。

3. yocto-spinner - 终端旋转 loading

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

import yoctoSpinner from 'yocto-spinner'

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

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

🔧开源工具&技术资讯

4. revideo - Code 生成视频

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

5. button-stealer - 按钮收藏

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

6. 免费头像合集

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

📚教程&文章

7. 3.78MB 大小的 JS 服务 Docker 镜像

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

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

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