最近有一个官网开发的需求，本来是准备利用老的技术栈，快速开发、快速结束。比如说找一个 PHP 或者 JSP 技术栈的成熟 CMS 框架。前端只需要写一个主题模板，然后用插值表达式做一下循环和动态内容的渲染就行了。

可团队内没有 PHP 技术栈。Java 小伙伴也忙的要死，没有时间现学一个 CMS 框架来配合我。但项目上线时间又安排的非常近，没办法一直等。
就想着先使用有 SSG 功能的前端全栈框架先把项目搞起来，把需求先做完。后面再看情况是做 SSR 也行。如果不做 SEO 没有很多文章发布的场景，也可以仅靠 SSG 和钩子触发自动部署即可。

正巧在播客里面听到一个新的全栈框架 Astro，满足了我上便提到的 SSG 和 SSR 需求。前期可以通过撰写 markdown 文档作为 content 资源来满足项目前期的文章发布需求。

而且 Astro 提出的 群岛 概念非常让我感兴趣！

const { foo, bar } = defineProps(['foo', 'bar'])

在思否刷到一个问题 🔗 Vue3: 响应式 props 解构得到的变量将不是响应式？也不会更新？ 按照问题中引用的文档描述来说确实是不能够解构返回值的。但是问题主提供的两个例子又说明了实际情况下，defineProps() 的返回值是能够被解构的。

VueJS 的 <script setup> 文档 中关于 defineProps() 的部分也没有针对其返回值是否能够解构做出说明。
我在Vue3项目的开发过程中并没有考虑到过这个问题，一直都是通过 props.xx 的形式来使用的。一下子就命中了我的知识盲区，还是 Vue3 写的少了啊。

不过在问题主引用的文档开头有一个响应性语法糖被 移除 的提示，所以去看了一下提示中链接的 废弃原因。

现在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 来切换。