现在CSS写的是越来越少了，以至于刷到这样一个问题 👉 前端文章页的内容获取自后台编辑器，如何让他不受全局样式影响？。
思维惯性下就开始考虑各种样式隔离方案，而完全忽略掉了还有一种使用CSS的样式还原方式（all: revert） 来避免全局样式对于富文本内容的样式污染问题。

相比于各种前端的CSS样式隔离方案的高成本，使用 all: revert 方式来简易实现局部区域的样式还原，仅仅需要配置一条这样的样式规则：

<template>
  <div id="test">
    <div v-html="html"></div>
  </div>
</template>
<style>
#test * {
  all: revert;
}
</style>

但因为CSS样式的权重问题，你看到了我是使用的 ID选择器，而不是 Class选择器。
所以如果说全局样式有使用 #app 来匹配的话，就没办法使用 all: revert 的方式来还原浏览器默认样式了。这也是这个方案的短板，不过大部分情况下的样式都是可以被重置的。

如果 overflow-x 或 overflow-y 中的一个值不是 visible 或者 clip 的话，给 overflow 设置的 visible/clip 值会被自动处理成 auto/hidden。

昨天下班之前看了一眼思否问答，发现思否的导航栏出现BUG了。所以想着在官方修复前自己改CSS样式临时凑合一下。
但看到 #sf-header 元素上面的 overflow-x:hidden 属性时候，我突然就卡壳了。开始困惑如果我给元素设置了 overflow-x: hidden 之后，垂直方向上的内容溢出时展现方式应该是怎么样的？是应该是如当前看到的出现滚动条还是应该超出显示。

一直以来项目的日志功能只记录了用户的登录和接口请求操作日志，用来辅助我们定位和解决反馈的异常问题。这些日志大多数情况下并不会记录用户是如进行操作的，只记录发起请求时携带的参数信息。大多数情况下这些日志已经足够帮助我们发现和解决问题了。
但在一些非常独特的问题反馈中，我们没有办法了解到用户是如何触发这些异常请求的。还需要去主动联系用户询问当时的操作场步骤去复现，或者按照日志中的参数去猜测用户是如何操作的。

最近正在听 Web Worker 这档播客节目，有一期节目邀请到了 Aryu 大佬，就发现了 rrweb 这个项目。有兴趣的话可以从项目的主页中在线尝试录制和回放功能，预设了3个业务场景的录制体验Demo。

可以看到录制效果非常不错。能录制到鼠标轨迹、滚轮操作、各种元素的聚焦、下拉和光标位置等各种各样的操作记录。

• 但因为是DOM级别的录制，所以浏览器原生提供的功能，并不会被录制到。比如说 <select> 元素提供的下拉操作和 <input type="file"> 提供的文件选择操作。
• 从 v1.0.0 开始以插件的形式增加了控制台录制的功能。

而且使用起来非常简单，只需要引入和执行 record 方法就可以启动录制了，然后按照自己的需求去存储即可。

import { record } from 'rrweb'

let events = [];
record({
  emit(event) {
    // 将用户操作的 event 存入 events 数组中
    events.push(event);
  },
});

看到一个帖子提到了 VueUse 中的一个函数 useTimeAgo，比较好奇这个函数是干什么的就点开了帖子看了一下。
其实就是一个相对时间对比的函数，输入一个目标时间（允许时间戳或者格式化日期字符串），返回目标距离现在的文本内容。

举个例子：

import { useTimeAgo } from '@vueuse/core'

useTimeAgo(new Date()) // just now
useTimeAgo(new Date('2024-06-01')) // 2 weeks ago

但是 useTimeAgo 函数返回的文本内容是固定的英文字符串。所以，如果在中文环境下使用就可能会被挑战说需要展示中文的相对时间文本。
🔗 vueuse/packages/core/useTimeAgo/index.ts at main · vueuse/vueuse

看了一下 useTimeAgo 的实现，是支持自己做一份国际化配置，然后传入给 useTimeAgo 方法来使用的。