视野修炼-技术周刊第100期 | CSS observer

粥里有勺糖

7个月前更新

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

不知不觉 100 期了

强烈推荐

style-observer – 监听 CSS 变化
Jimp – JS 图片处理库
yocto-spinner – 终端旋转 loading

开源工具&技术资讯

revideo – Code 生成视频
button-stealer – 按钮收藏
免费头像合集

教程&文章

应该使用的HTML TOP5 特性
3.78MB 大小的 JS 服务 Docker 镜像

下面开始本期内容的介绍，预计阅读时间 6 分钟。

强烈推荐

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. 应该使用的HTML TOP5 特性

挑 2 个：

dialog 元素

<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>

details 元素

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