现在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 方法来使用的。

pikaz-excel-js 是项目中已经使用的 Excel 导入导出库。简单的配置一下表头、表格数据就可以完成表格的导出操作了，使用起来非常简单。文档也非常的简单明了，并且有提供简单的参考示例模板：

• ver_1.x 的 JS 示例
• ver_0.2.x 的 VueJS 示例

但是文档中关于单元格样式（cellStyle）的说明就有点 “太简单” 了 👇

其他属性与表格全局样式设置方式一致

如果没有阅读示例代码，直接跳到文档中的这部分查看配置项就会有点不知道如何书写。

i18n Ally 这个插件，很早之前就从各种的 VS Code 插件分享贴中了解到，但是一直都没有好好利用起来。特别是我当前开发的项目是我自己魔改的一个国际化维护方式 i18n Ally 并不能很好的支持。
而我的一些个人项目，并不会使用到国际化。所以即使安装了这个插件已经有将近一年了，也没有使用起来。

这几天正巧要新增加一个语言到项目中，所以趁着这次机会就决定把插件使用起来。也可以做一次内部分享，方便一下同事。现在新增了很多国际化的需求，应该可以提供一些便利。

23年整体来说，还是按照计划稳步推进的正常年份，不管是工作还是工作之外。除了说 23Q2 出现过一波离职潮还是比较意外，其他的都算处于预料之内，所以其实今年没有什么好总结的内容。

✋ Part1. 回顾

先看一下年初立下的一些 Flag 🚩

• 开始AI辅助编程(Copilot、ChatGPT);
  
• 获得思否的2023年度 Top Writer;
  
• 完结掉2个自己的个人项目；
  
• 发布最少20篇笔记/文章;
  
• 在思否回答1000个问题;
  

完成度其实很不怎么样，主要是笔记和文章的分享。比预期的完成度要低很多，原来是预期每个月能写2篇自己比较感兴趣的内容并且同步发布到各大社区平台。但是实际只完成了9篇，其中有4篇还是在12月底的时候急急忙忙完成的填坑……
个人项目也是一样，本来是想着今年应该可以完成2个项目的开发。但其实只结束了一个项目，另一个迟迟不能完成交付进入运维阶段。并且开发周期已经从预计的2个季度，拉长到了以年来计算。

最近社区和社群里面有好多小伙伴在说怎么 npm 用不了，安装不了依赖了。
一看报错信息：request to https://npm.taobao.org/xxx failed, reason: certificate has expired

😂 很明显就是 npm.taobao.org 的域名证书过期了，一看果然。已经在1月22日的时候过期了。

所以切换到的“新”的域名上面就好了：

$ npm config set registry https://registry.npmmirror.com

也可以使用 NRM 来切换。

昨天刷到在思否遇到一个想要限制CPU性能的问题。在我的认知里对于 DevTools 的使用是没办法限制CPU性能的，认为只能够限制网络条件（也就是在 Network 面板中通过修改 throttling 设置来限制网络条件，也错误的把OP的截图当成了调整网络条件的设置了）。
所以会想着通过系统自带的”节电模式”之类的来实现性能限制，或者借助外部的软件来调整CPU、GPU、内存相关的功率来实现性能限制。

但是OP在傍晚自己找到了解决办法，我才知道原来 DevTools 也可以限制CPU的。

一直以来只知道 HTTP Cache 是有缓存总量上限的，但是不知道对于单个文件的体积大小也是有限制的。

在这次接盘的3D可视化项目中就遇到了这个问题。因为模型文件体积比较大，在实际使用中经常会反馈说载入时间过长。所以在拿到服务器权限之后就改了一下 Nginx 的配置文件开启了静态资源的 HTTP cache，以为完事大吉就和一线说载入时间慢的问题解决好了。现在进入项目会使用本地缓存，在第一次载入的时候会慢一些，后面再次进入就会快很多了。

但是实际使用中反馈过来的时依旧会有很长的载入时间。以为是 Nginx 的配置项写错了，就又去确认了一下。确实是开启了缓存的，首页的各种静态资源也是会被缓存，但是等我进入到模型展示页的时候就发现问题了！
最外层展示的模型是可以被缓存的，但是操作数据下钻之后开始展示内部模型从 Network 面板中看到的 glb 模型文件不是每一个都会从 disk cache 读取，有一些模型依旧会发起请求。

所以就想着浏览器是不是可以有配置项可以修改，但是并没有（可以通过给快捷方式添加启动命令来修改，但不可能要求所有设备都这样做）。所以只能想其他法子来解决这个问题，自然就找到了 Service Worker