Viki 的碎碎念小角落，记录生活中的点滴想法和言论，共 149 条内容，月均 31 条，累计 13,019 字。
同一个服务，访问 localhost 连接重置，换成 127.0.0.1 却一切正常。原因在于 localhost 是个域名，系统 hosts 文件里通常同时配了 127.0.0.1 和 ::1 两条解析记录，浏览器优先走 IPv6 解析到了 ::1，而服务只监听了 IPv4 的 127.0.0.1，协议族不匹配，导致访问不通。
有三种方案解决这个问题：
最佳实践是直接用 127.0.0.1，语义明确、稳定、不依赖 DNS 解析。
第一次见把邮箱验证码做成图片的... 离谱
写了一个简单的 Shell 函数来快速获取 GitHub 仓库基本信息，主要关注仓库大小、创建时间等无法直接在仓库页看到的信息。每次用 GitHub 来 Clone 或者打包下载一些带资源的仓库时，你都得猜它有多大、还要下多久，十分讨厌。
源码 & 使用方式参考 repo.sh - GitHub Gist。
乐，Claude Code 的完整源码以 Sourcemap 源码映射文件的方式泄漏了，这是哪个粗心大手子干的好事。相信马上 Codex、Gemini CLI 以及各大国产闭源 AI Coding 工具将迎来一波史诗级增强更新。
Axios 也被投毒了…… 🤷
Jina 可以将 URL 转换为大模型友好的输入，也支持实时搜索，有需要自己实现 WebFetch / WebSearch 类似功能的可以集成试试，效果真的不错的同时还非常省 Token。
最近在看 CC (Claude Code) 的东西，一些浅显的收获：
<system-reminder> 追加到用户消息中，CC 自己也是这么做的。ESC 可以回溯历史，快速重新编辑消息、撤销文件改动、回滚会话等，非常好用。RTK，建议设置环境变量 RTK_TELEMETRY_DISABLED=1 屏蔽匿名数据收集。defer_loading 标记为 true，默认不加载到上下文，搭配 ToolSearch 可实现按需加载。/clear 和 /compact 看得多，用得少，还是得多用，搭配 /context 和 /memory 管理好上下文。感觉自己精力很有限，已经玩不动年轻人的游戏了…
🤬……
我宣布，今晚的 MVP 是 《那天下雨了》，最佳助攻 《七月的极光》。
技术人最可爱的时刻，就是为了热爱真的把东西做出来。
为了调试产品，让 AI 锐评我的 GitHub 和博客内容看看效果。AI 给出的评论，我很喜欢。
昨天抢了大半天的成果
Chrome 146 Canary 版本开始支持 WebMCP，在 chrome://flags 页面开启 WebMCP 功能后，可以通过 navigator.modelContext.registerTool() 等方法进行注册和管理。
WebMCP 是由 Chrome 提出的一项 Web 标准草案，可以让网站向浏览器内的 AI 代理暴露结构化工具接口，旨在代替当前只能通过截图或 DOM 猜测操作等过于低效的交互方式。
多说一嘴：Chrome 144 版本带来了官方 DevTools MCP，在 chrome://inspect#remote-debugging 页面开启后，可搭配 chrome-devtools-mcp 直接控制浏览器。
Web 滤镜不只有 CSS 的 filter 内置值，还可以通过 SVG Filter 定义更复杂的滤镜效果。通过 <svg> 元素定义滤镜，然后使用 filter: url(#filter-id) 方式引用。webkit.org 就利用了 SVG Filter 在夜间模式下实现图片素材的亮度反转效果。
SVG Filter 内容可参考 svg-filter.txt。
宇宙也许并没有提前宣布我们来到这里的唯一目的。可这不一定是坏事 —— 它反而意味着，意义不是被动领取的答案，而是主动生成的过程。
对一些人来说，意义来自关系：爱别人、被别人需要、陪伴家人朋友。对另一些人来说，意义来自创造：写作、工作、发明、种花、做饭、把混乱变得有一点秩序。还有些人会觉得，意义来自体验本身：看一次晚霞、理解一个道理、认真度过一个普通下午。
科学更擅长解释我们怎样出现，哲学更擅长追问我们为何而活，而真正落在每个人身上的，往往是日常生活中的具体选择。也许存在的意义，不是找到一个放之四海皆准的标准答案，而是在有限生命里，逐渐形成你愿意为之投入时间、情感和行动的东西。
在开发 AI 应用的时候顺手测试的一句 “存在有什么意义”，AI 给出的回答。
🎉 开心，R2 Web 被 阮一峰 大佬的科技周刊推荐了: 科技爱好者周刊（第 387 期）：你是领先的
一直用的 sm.ms 图床最近升级迁移到 s.ee 了，定位不再是仅图床服务，主观感觉有点臃肿，不符合我最早用它的初衷：简单、纯粹。于是开始用一直没怎么深度用的 Cloudflare R2 做自建图床。找了一圈没合适的 Web 端管理应用，要么审美不在线要么功能不到位。需求这不就来了？所以我用 Claude 搓了个 R2 Web 项目来管理，一切在浏览器完成，能充当图床角色，支持私有部署，尤其注重轻量、用户体验。这个项目年前写的，快一个月了，觉得其他人也可能会需要，于是去阮一峰大佬的周刊投稿，然后被推荐了。
60 级记录留念，三块金土地。
最近写了一个开发单文件应用的自用 Skill，顺手写了几个小游戏、小项目测试了一下，感觉效果还行。基本上一行提示词就能呈现不错的效果，然后辅以局部细节微调就能长期用了。快来玩扫雷和推箱子！虽然小时候在老式电视上玩推箱子，基本玩不到第十关...
第一次试水煮溏心蛋，还不错。实测冷藏蛋也差不多六分半，冷水代替冰水大概八到十分钟。 下图我做的这个，沸水煮了七分钟，冷水浸了八分钟。
NestJS 拖了很久的全量 ESM 终于要来了。这主要得益于 require(ESM) 的推进。新版本还集成了 Vitest 和 Zod 等校验库，更加现代化。
Node.js SEA (Single Executable Application) 已支持 ESM，可将 ESM 代码打包成单文件可执行程序：
node --build-sea sea.config.json
# sea.config.json
# { "main": "main.mjs", "mainFormat": "module", "output": "main" }对于 TypeScript 项目，可以用 tsdown (>= 0.21) 一步到位：
tsdown --exe main.ts除了 Node.js SEA，Bun 和 Deno 也支持生成单文件可执行程序：
bun build --compile --target bun-darwin-arm64 main.ts
deno compile --target aarch64-apple-darwin main.ts浅浅期待一下手游（搓手
重要通知 ❗❗❗
请元宵节晚上赏月的朋友把赏月费打款到我账户，每人 16 元。收费按国家规定执行，十五的月亮 16 元。
谢谢 🤝
Node.js 发布计划即将更新：主要版本发布频率将从每年两个降低为每年一个，并引入全新的 Alpha 测试渠道作为奇数版本号的补充。新计划废弃了奇偶数版本区分 LTS 的方式，每年仅发布一个主要版本，且每个版本都将进入 LTS 阶段。新计划从即将在 2027 年发布的 Node.js 27.x 起实施。
官方解释更新原因：基于十年使用数据，奇数版本采用率极低；奇偶版本的区分让新手感到困惑；许多组织完全跳过奇数版本，只升级到 LTS 版本；每年两版导致维护线过多，志愿者难以持续更新。
也就是说 2027 年发布 Node.js 27，2028 年发布 Node.js 28... 通过年份就知道当前最新版本号了，好耶 😆
发现了一个 macOS 端宝藏应用「Dorso」。它可以通过摄像头或者 AirPods 精确捕捉你的坐姿，然后通过模糊屏幕等方式来提醒你别驼背。我自己非常需要这个功能，实测搭配自己的 AirPods 4 体感非常好，反应很灵敏，应用又是纯开源，UX 也不错。推荐有相关需求和设备的小伙伴装个试试。
每次看到 First name 和 Last name 都得愣个一秒该怎么填。 GitHub Handle 原来也可以指 GitHub 账户 ID。
今年春节极其忙碌。赶顺风车、赶飞机、赶高铁… 短短几天多省奔波。各段行程虽有小堵，好在都顺利赶上了，春节计划圆满完成。 🎉
又该回归打工人的牛马生活了。
生活中常用的身份证、公交卡、门禁卡，其实都是 IC 卡。IC 是集成电路（Integrated Circuit）的缩写，你可以理解为卡片里藏了个微型电脑芯片。
这卡片自己不带电，是个名副其实的「懒汉」。当你把它贴到读卡器上，它才会通过线圈感应「借」点电（类似无线充电），芯片这才开始工作。
数据读写则像俩人「对暗号」。读卡器发指令，卡片加密回应。如果是身份证，就把信息念给机器听；如果是公交卡扣款，机器说「扣两块」，卡片就乖乖在自己的小账本上改余额。整个过程一眨眼就完成了。
坐高铁就是要吃大餐 🍜
🎉 60s API 位列 HelloGitHub 年度盘点 第四名。
HelloGitHub 在公众号、知乎、头条、博客园、掘金、开源中国、V2EX、Linux.do 等平台都有运营，有幸受到大家的关注和喜欢，非常开心～ 感谢支持！
偷菜，速来 🌽
可爱捏 ʕ・ᴥ・ʔ
终于把公司电脑升到 macOS 26 了。新版本紧凑的菜单栏腾出了不少空间，终于可以放更多喜欢的小工具了。APP Launch Pad 不再全屏了，紧凑高效。还有 iPhone 镜像 APP 方便 随时摸鱼 处理手机提醒。
一直感觉 Referer 拼写怪怪的但没特别留意过。原来从一开始 HTTP 规范里就写错了吗？🤷 后来人只能将错就错写 Referer 而不是 Referrer 了 -.-
Gravatar 在 2023 年偷偷 添加了对 SHA256 的支持并将其作为首选哈希算法，但官网找不到任何更新说明。
也就是说，现在构造 Gravatar URL 时可以使用 SHA256 哈希，不再强制要求客户端安装 MD5 库来生成 MD5 哈希了，因为 Web Crypto API 已经原生支持 SHA256，浏览器可以直接调用。当然，MD5 仍然受支持，只是官方推荐使用 SHA256 了。
你咋不写 8736 小时？
抓娃娃最快乐的地方不在于抓到娃娃，而是接连发现了好多个投了一两个币的娃娃机。 是的，我是捡漏王。😎
艰难的两位数
《爱情公寓》 第一季第 15 集，吕子乔在 Party 上拿着酒瓶醉醺醺地对害怕失败的展博说：
勇敢点，冲上去。这就好比，有一辆列车在你面前，列车员问你，小伙子要上车吗？你就问，这车去哪？下一站什么时候到？车上还有座位吗？火车早就开走了，你只能等下一辆。可是下一辆来了，你还是面临同样的问题。等了很久，别人已经到西伯利亚了，你还在车站上。管它呢，上去啊，火车是朝前开的，去哪并不重要，关键在于窗外的风景。等你下了火车，你就会感谢我的，因为就算有辆飞机停在旁边，你也会二话不说地冲上去的，因为你嫌火车太慢了。
清理 iPhone 系统数据的一些方法：
绿龙怎么没打过 PV，被让一追二了，这让 zweih 赢了？？？
APTX-4869 💊
一个新的身份：「开往」项目组的一员。
就好这一口 😋
❄️ 南京昨晚下了好大的雪，不过这次不再是一个人 💕
也是看完了，上次看到的一千多天还是刚进高中时的高考倒计时。
骑过最干净的一辆美团单车，一看就是刚投放两三天 🚴
「王婆卖瓜，自卖自夸」的故事发生在宋朝的都城开封。故事的主角其实是个名叫王坡的男人，只因做事说话絮叨，才得了「王婆」这个外号。他在集市上大声吆喝、切瓜让人品尝的，是从西域传来的哈密瓜，而不是常被误解的西瓜。后来连宋神宗也尝了他的瓜，并笑称「王婆卖瓜，自卖自夸」，这句话便流传开来，成了比喻自我宣传的成语。
原来卖瓜的并非婆婆，卖的也不是西瓜。
当使用浏览器不支持的 HTML 标签时，该标签会被回退到 HTMLUnknownElement，该元素继承自 HTMLElement 接口，但未实现任何额外的属性或方法。
可以利用这一点，在内部添加兼容性的逻辑或者 UI 起到兼容效果。例如：
<unsupported-tag>
<p>Your browser does not support this feature.</p>
</unsupported-tag>在不支持 <unsupported-tag> 的浏览器中，用户会看到 <p> 元素中的内容，从而提供了一个降级的体验。
Joshua Comeau 发布了一篇 SVG 介绍文章 A Friendly Introduction to SVG，文章除了基础文字科普，还提供了一些可视化、可交互的 Demo，对了解一些 SVG 特性很有帮助。
这家伙怎么死得这么像活人，远处看着探个头出来，给我吓一激灵。
博客加入了「开往」，一个由开源社区发起的友链接力公益项目。我就喜欢这种有意义的事儿~ 😎
XDG 是指 Cross-Desktop Group，由 freedesktop.org 维护的 一组 社区规范（Specifications）， 用于 规范 Linux/Unix 桌面环境和应用的行为，非强制。
其中 XDG Base Directory Specification 是 XDG 规范中最常被用到的一条，它迫使开发者先确定「这是什么文件」再决定「它应该放在哪里」，并由此延伸了配置、数据、缓存等数据类型及其目录规范。
具体来说：
$XDG_CONFIG_HOME 控制配置目录，默认为 $HOME/.config（可编辑的）$XDG_DATA_HOME 控制数据目录，默认为 $HOME/.local/share（用户数据）$XDG_CACHE_HOME 控制缓存目录，默认为 $HOME/.cache（可随时删）$XDG_STATE_HOME 控制状态目录，默认为 $HOME/.local/state（日志、历史）这明明是给 Linux 的规范，可 Windows/macOS 下也到处都能见到这种配置形式的身影 🤷
各平台推荐目录：
~/.config/，缓存一般放在 ~/.cache/%APPDATA%\Roaming，缓存一般放在 %LOCALAPPDATA%\Local~/Library/Preferences/，缓存一般放在 ~/Library/Caches/PS: 可以用 env-paths 获取各个最佳实践的应用目录。
加了个游戏页面，专门显示 Steam 状态和最近在玩的游戏等，方便视奸我 x
「苕（sháo）粉」其实原材料是红薯 🍠，也就是用红薯淀粉做成的粉条。「苕」在这里指的就是红薯，有些地方也称之为「红苕」。
HLTV 2025 年度 TOP 榜单。
不征集「Aa 建材批发」友链了，现在按随机排序，搭配 ViewTransition 自然过渡。
昨晚梦到和 donk 在一个教室上课，NiKo 给我们教数学，一口奇怪的中文口音哈哈哈哈哈哈。
现公开征集一个名叫「Aa 建材批发」的友链，来顶到我 博客友链 的最前面。
原来黑曼巴蛇 🐍 身体不是黑色的啊？！ 🤔
黑曼巴蛇是一种身体修长、体色多为灰褐色的剧毒蛇类，主要分布于非洲撒哈拉以南地区，栖息于灌木丛、草原等开阔干燥地带。「黑曼巴」这个名字，源于其标志性的黑色口腔，当它张嘴威吓时最为明显，并非因为其身体颜色。它是陆地上速度最快的蛇之一，日间活动，受威胁时会抬起身体前部并张开黑色大口进行威吓。
最开始看柯南还是初中十几年前了，一晃到今年柯南已经 30 周年了啊。官方发布了 TV 版「水族馆事件」的重置版，有部分剧情补充和元素优化，作为给柯迷的 2026 新年礼物~ 🎁 最后，新兰永恒！
已经是老油条了（摊手
知乎问答：为什么很多物理代码不开源？ 这张图精准的说明了什么是屎山代码。
只要把 X-Real-IP 和 X-Forwarded-For 请求头设置成国内 IP，就能绕过不少服务的地区限制。
之前用 CloudFlare Worker 部署 60s API 的 B 站热搜接口一直失效，因为 B 站会限制海外 IP。最近在 NeteaseCloudMusicApi 项目的 Issue 里偶然学到这个方法，亲测有效，思路很巧妙。其实 60s API 项目的
/ip接口本身返回的 IP 也是从这些请求头里取的，刚好 B 站也是这样判断 IP 的，所以用这个办法就能让 CF Worker 也能正常访问 B 站热搜数据了。
好歹毒的面，哪个小机灵鬼想出来的。
我的 2025 年终总结（简短版）：
<2025>
🥽 🛋️ Comfort in VRChat
❓ Question Mark / qm
🐈 🎂 Cola turned one
🏠 New cozy nest
💼 💸 A modest salary increase
🎧 R&B, Rap, DT, 小宇 & T
🥰 At last with Mio
🥽 🎓 Graduated from VRChat
🎮 CS2, It Takes Two and HoK
✈️ Flew to see Mio in Chengdu
😋 Durian, Durian and Durian!
🏺 Making crafts together
✍️ 💬 New blog, new thoughts
🤖 👋 Hi mioki! Bye KiviBot
🎆 🥂 New Year‘s Eve together
</2025>
对象：（突然严肃起床穿衣服）
我：（疑惑脸）你起这么早干嘛？
对象：（头也不回的）起来打 CS
我：啊？（大脑飞速运转）
之前和我线上打 CS，她打的一点游戏体验都没有，后面就没怎么一起玩了。昨晚重新手把手教她好好打了会 CS，了解了一些基础知识，没想到竞技模式还杀了不少人，有点天赋，打的还可以。但没想到竟然玩上瘾了，一大早就爬起来打 CS。🤷
我不允许有人没吃过白象的大辣娇板面。🍜 😋
为什么没有榴莲的 emoji 啊？=.=
关于 B 站投稿视频 ID 的历史和现状：
av 开头加上数字 ID，如 av80433022，按上传顺序发放序号，URL 参数名为 aidBV 开头的固定 12 位字符串，如 BV1GJ411x7h7，URL 参数名为 bvidBV 号和 AV 号的转换算法，来自 bilibili-API-collect：
const XOR_CODE = 23442827791579n
const MASK_CODE = 2251799813685247n
const MAX_AID = 1n << 51n
const BASE = 58n
const data = 'FcwAPNKTMug3GV5Lj7EJnHpWsx4tb8haYeviqBz6rkCy12mUSDQX9RdoZf'
function av2bv(aid: number) {
const bytes = ['B', 'V', '1', '0', '0', '0', '0', '0', '0', '0', '0', '0']
let bvIndex = bytes.length - 1
let tmp = (MAX_AID | BigInt(aid)) ^ XOR_CODE
while (tmp > 0) {
bytes[bvIndex] = data[Number(tmp % BigInt(BASE))]
tmp = tmp / BASE
bvIndex -= 1
}
;[bytes[3], bytes[9]] = [bytes[9], bytes[3]]
;[bytes[4], bytes[7]] = [bytes[7], bytes[4]]
return bytes.join('')
}
function bv2av(bvid: string) {
const bvidArr = Array.from<string>(bvid)
;[bvidArr[3], bvidArr[9]] = [bvidArr[9], bvidArr[3]]
;[bvidArr[4], bvidArr[7]] = [bvidArr[7], bvidArr[4]]
bvidArr.splice(0, 3)
const tmp = bvidArr.reduce((pre, bvidChar) => pre * BASE + BigInt(data.indexOf(bvidChar)), 0n)
return Number((tmp & MASK_CODE) ^ XOR_CODE)
}
console.log(av2bv(80433022))
console.log(bv2av('BV1GJ411x7h7'))JavaScript 的 sort() 函数的默认行为：
const sorter = (a, b) => String(a) > String(b) ? 1 : String(a) < String(b) ? -1 : 0🎄 Merry Christmas!
如果不需要额外的属性和状态，可以使用抽象类并结合静态方法来避免类实例化，从而降低运行时开销。
// Abstract class with static method
export abstract class Service {
static handle(name: string): string {
return `Hi ${name}!`;
}
}
// Usage
Service.handle('Mio') // "Hi Mio!"嘻嘻
Punycode（国际化域名编码）是一种表示统一码和 ASCII 码的有限的字符集，它将非 ASCII 字符转换为仅包含 ASCII 字符的字符串，实现了「兼容现有域名系统的同时支持多语言字符」的能力。例如中文「上海」经过 Punycode 编码后为「fhqz97e」，浏览器访问「上海.com」其实是访问「xn--fhqz97e.com」。其中，「xn--」是国际化域名的前缀，也被称为 ACE Prefix（ASCII Compatible Encoding）。
电脑硬盘格式限制升不了 Win11 25H2，插 U 盘进 PE 将系统盘从 MBR 转为 GPT 格式，创建 ESP 和 MSR 分区，然后修复 UEFI 引导，重开发现进不了系统了，一直转圈圈… 😓 不知道哪里点错被我搞坏了，好在没什么重要东西就索性重装了，另外 1T 多的游戏和综艺都在另一张固态里，装完重新导入 Steam 就好了，系统现在干净如初。
习惯备注「外卖挂门上」好久了，第一次听到有骑手提醒我「开门的时候注意别弄掉了」，有点暖心（虽然他把外卖放在门把手最内侧，开门基本不会掉）。因为之前确实有骑手挂在门把手外侧而不是转轴内侧，一开门外卖就会摔到地上，别问我是怎么知道的。
工作笔记应有的逻辑及其四个内容维度。 有写过一阵子的工作笔记，现在工作内容不算多，大多数时间摸鱼去了，懒得写，但对以后去到下家公司后的工作记录还是很有参考价值的。
是开心的一刻 🥰 🏦
轮播图的现代化方案:
之前有提到可以 自定义 <select> 元素，具体来说是通过设置 CSS 属性 appearance 为 base-select 来实现的，不得不说，效果确实很牛批，不仅是样式可自定义，连布局排版都可以高度定制化。目前已在 Chrome 135 可用，Chrome 官方发布了一篇文章说明这个功能: 现在可以使用 CSS 自定义 <select> 元素，团队成员 Una 也发了篇个人博客来讲述技术细节: Updates to the customizable select API
这种聚光灯、调整布局的功能原来不是 VitePress 自带的，是众多社区插件中的一个，叫 @nolebase/vitepress-plugin-enhanced-readabilities。
好耶，mxx 和宗主终于回来了！mxx 担任指挥，有他队内氛围也好了，chopper 换 tN1R 等于火力补强了，宗的自由人更是有自己的一套打法，期待一下明年的比赛。🤩 一分钱不花换了两个 Major 冠军上来，哪家俱乐部还有这种手笔？
新的小玩具 o (￣▽￣) ブ 猛戳这里试用
强烈谴责，动不动就扣我五毛钱！
一只迷路的蚂蚁和另一只蚂蚁走在路上。
迷路的蚂蚁：「你都如何回蚁窝？」
被问的蚂蚁：「带着笑或是很沉默？」
之前有提到 无 token 的 npm 包发布方案，今天下午尝试了之后，踩了几个坑卡了好久，记下来长个记性。😭
😎
12 月 4 号爆出的 React RSC 漏洞 虽然修了，但只修了一点点... -_-||| 被发现还 存在 DoS 和源码泄漏问题。手快的人（比如我）还得再把 React 相关包升级到 19.2.3 及以上版本才行。
大表哥带领 FaZe Clan 从第一阶段一路打到总决赛，最终拿到 Major 亚军。有点励志，虽然没夺冠有点可惜，但也正如「总监」 Twistzz 所说：无论输赢，这都是一段值得骄傲的旅程。
donk 都 C 麻了还是输了，打完给人气哭了都。FaZe 这个队伍让人看得赏心悦目，依旧地狱归来。
也是上过荣耀王者的人了，Mio 打得真不错。
一种主动缓解 npm 包供应链攻击的可选方案，通过 --before 标志安装指定日期之前发布的包版本，让整个 npm 生态有时间来响应和修复潜在的安全问题。pnpm 也提供了 minimumReleaseAge 配置来达到类似目的。
npm install express --before="$(date -v -7d)"熬大夜没白看，zweih 发力 ACE 五杀了，2-0 带走猎鹰！三个 donk 怎么打！
基于 ViewTransition API 实现的页面同一内容自然过渡效果，要求较新的浏览器版本，鸽了好久，终于有机会给博客整上了 🤤
存档一下随机结果，看看是随机对的多还是自己选对的多。
Francisco Miranda 构建了一个完全流式传输、即时加载的 GitHub 仓库视图，保留了原生浏览器搜索功能，移除了蓝色加载条，体验比原版快得多，如 Next.js 的仓库主页。之前发的 CSS 原生的长页面渲染优化 灵感正来源此项目。
什么时候可以改掉一紧张就语速飞快的毛病（─.─|||）
使用原生 CSS 属性 content-visibility: auto 开启 尺寸局限 并搭配 contain-intrinsic-size 指定尺寸局限尺寸，可以大幅提升长页面渲染性能，被认为是传统虚拟滚动的现代化可选方案。一些区别:
几行 CSS 实现的带有模糊背景的固定比例图片效果，核心代码如下，目前已经应用到「碎碎念」和「Mio 说」板块的图片元素，这是为了统一图片高度防止加载过程中的布局抖动而采取的一种妥协方案。
如果对这个实现感兴趣，你也可以在 React Online 上在线调试这种图片背景效果。
.image-wrapper {
display: grid;
/* background: var(--bg) 50% / cover; */
&::before,
img {
z-index: 1;
grid-area: 1/1;
aspect-ratio: 16 / 9;
object-fit: contain;
}
&::before {
backdrop-filter: blur(8px) brightness(0.8) contrast(0.7);
content: '';
}
}优雅的 Toast 库 Sonner 的作者 Emil Kowalski 最近分享了一篇文章: Build a Toast Component，讲述了 Sonner 的从头到尾，包括命名、设计和实现细节等，挺有参考价值。有意思的是，文章最后提到了他的动画课程的卖课网站，果然程序员的尽头都是卖课么。
强烈推荐阅读由微软 Edge 平台产品经理 Patrick Brosset 发布的博客文章：Masonry: Things You Won’t Need A Library For Anymore。文中他详细阐述了一系列现代网络特性和替代方案，这些特性和方案可以帮助开发者减少对第三方库的依赖，从而简化代码库并提升性能。
阅读笔记：
当子元素滚动到边缘时继续滚动，这个时候父元素的滚动行为可以通过 CSS 属性 overscroll-behavior 来控制，即：浏览器在到达滚动区域边界时的行为。这种滚动行为的默认链式表现，也叫 滚动链。
depx.co 这个服务可以让你生成指定 npm 包的依赖数的 Badge 图，适合大小敏感、关心依赖数的项目展示在 README 里。比如下面这个 Badge 展示了 Vue 依赖数。
拭目以待。
一个值得思考的 useMediaQuery 实现:
function useMediaQuery(query) {
return useSyncExternalStore(
(callback) => {
const mql = window.matchMedia(query);
mql.addEventListener('change', callback);
return () => mql.removeEventListener('change', callback);
},
() => window.matchMedia(query).matches,
() => false // SSR fallback
);
}Zig 项目（Bun 的主要开发语言）因 GitHub 工程衰退和 CI 系统崩溃而将代码仓库 迁移至 Codeberg，建议捐赠者转向 Every.org。
最近在 npm 生态链中传播的 Shai-Hulud 2.0 蠕虫病毒 的攻击步骤。
周杰伦阔别三年，携手方文山、黄俊郎共同打造音乐大碟《催什么催》，名字别具一格，每一首歌都相当硬核，延续周氏曲风...
为什么会有水果蛋糕这种东西？把切开的草莓、蓝莓放到甜奶油上面，吃的时候不会感觉到草莓不仅不甜，反而觉得很酸、影响口感吗... ┑(￣Д ￣)┍
在第三阶段 2-0 组晋级赛，绿龙拿下老鼠之后，donk 给教练当翻译。🤣
CookieStore API 在今年七月被正式列入 基线特性，相比传统的 document.cookie，它更现代、结构化、异步、安全，适合复杂和高安全需求场景。
// 写入指定 Cookie
await cookieStore.set({
name: 'username',
value: 'Viki',
expires: new Date(Date.now() + 24 * 60 * 60 * 1000),
domain: 'viki.moe',
})
// 读取指定 Cookie
const cookie = await cookieStore.get('username')
const cookie = await cookieStore.get({ name: 'username' })
// 读取所有 Cookie
const cookies = await cookieStore.getAll()
const cookies = await cookieStore.getAll('username')
const cookies = await cookieStore.getAll({ url: 'https://viki.moe/' })
// 删除指定 Cookie
await cookieStore.delete('username')
// 监听 Cookie 变化
cookieStore.addEventListener('change', (event) => {
console.log('Cookie changed:', event.changed)
console.log('Cookie deleted:', event.deleted)
})发现了一个挺有想法的浏览器插件 Ad Break。正如其名称一样，它用小游戏来覆盖广告界面让用户玩游戏休息一下（Break），不仅能够低成本地解决「广告越来越难屏蔽」的问题，还不影响作者的广告收益，最终减少了用户的广告厌恶感，算是一个双赢的方案。同时，它也保留了时间进度和跳过广告的功能，如果用户不想玩游戏也可以仅显示空白界面。
广告你尽管放，该给视频主的广告播放时长我一定支持，但广告内容我是一点没看 —— 玩玩小游戏先。 🤪
原来 JavaScript 还支持这种语法，真第一次见... 参考 Static initialization blocks（静态初始化块）。
class AppConfig {
static platform;
static config;
static {
this.platform = typeof window === 'undefined' ? 'server': 'client';
try {
this.config = JSON.parse(localStorage.getItem('config'));
} catch {
this.config = {};
}
}
}CSS 自定义属性 (CSS Custom Properties) 和 CSS 变量 (CSS Variables) 本质是 同一个东西，只是叫法不同。日常交流叫 CSS 变量，因为其用法类似于编程语言中的变量，强调的是它的功能，存储和复用值，类似编程语言中的变量概念。但在正式场合、技术文档中，一般叫 CSS 自定义属性，强调的是它在 CSS 中的本质，是一种特殊的属性（以 -- 开头）。
交作业了，这次也是一起选的。FaZe 给我赢 ε=(o｀ω′) ノ
听 Tom Forsyth 讲述在 半条命 2 (Half Life 2) 的 VR 版本移植过程中发生的趣事：一个由「门」引发并存在了十几年的严重游戏 bug。（剧透提示：这个 bug 是由于浮点运算精度变化导致的。2004 年编译用 32 位精度，2013 年用 64 位精度，小数点差异造成守卫脚趾位置偏移几毫米，碰到了门导致门无法打开。）
标记为 Secret 的 GitHub Gist 实际上 是公开的？？ 拿到链接的任何人都能随意访问，66666 🤷
没想到 React 也整了个致命漏洞，还挺严重的。
React 19 版本正式引入的 RSC (React Server Component) 存在致命 RCE（Remote Code Execution，远程代码执行）漏洞，评分 10.0。攻击者可在服务端执行任意危险代码，覆盖 19.0, 19.1, 19.2 等版本，影响了包括 Next.js, Waku, React Router 等在内的主流前端框架，只有「仅客户端应用」幸免。参考 CVE-2025-55182 和 React 官方公告。
TC39 成员 Marco Ippolito最近分享了一篇 我在夏天发布了类型剥离功能，讲述了将 TypeScript 带到 Node.js 的故事，挺有意思的。他最近正在推进 --experimental-config-fileconfig。没想到的是，开源大神 Anthony Fu 竟然还 赞助 了他。
都是神队，第二阶段作业 果然给我炸光了，只对了三个。不过好消息是，大家都彼此彼此，哈哈哈哈哈哈哈哈。 可惜天禄还是没把握住机会啊，本来能多赢两图的。
接 #16，以下类型解决了 Omit 在复杂 联合类型 下的局限性。它通过 K extends keyof T 来确保 K 必须是 T 的键之一，并利用 分布式条件类型 来处理联合类型情况下的 T。DistributiveOmit<A | B, K> 实际上等价于 Omit<A, K> | Omit<B, K>，而不是 Omit<A | B, K>。
type DistributiveOmit<T, K extends keyof T> = T extends any ? Omit<T, K> : never;
type TypeBase = { name: string; };
type TypeA = TypeBase & { type: 'A' };
type TypeB = TypeBase & { type: 'B' };
type Result = DistributiveOmit<TypeA | TypeB, 'name'>;
// Result => { type: 'A' } | { type: 'B' }
type BrokenResult = Omit<TypeA | TypeB, 'name'>;
// BrokenResult => { type: 'A' | 'B' }通过 Mac 系统内置的「音频 MIDI 设置」APP，可以添加并配置「多输出设备」，实现同时输出到多个音频设备的效果。如果你家里有多台音响设备，就可以营造更好的环绕声效果。或者如果你有对象，可以同时输出到两台蓝牙耳机，方便一起听音乐或看电影。
关于 <input type="number" /> 的一些笔记：
<input type="text" inputmode="numeric" pattern="\d+" />0 开头时不要使用 type="number"Bun 宣布加入 Anthropic，但其核心路线不变，变的是 Claude Code 及其 SDK 因 Bun 团队而受益。Bun 在 22 年暑假发布了 v0.1.0，开始在前端领域掀起大浪。比较认同 Bun 的核心理念，性能、效率、Just Work，只是目前 Bun 在生态和兼容性上仍需完善。
VS Code 1.106 现在支持 使用两个冒号通过字符长度定位代码位置。对比来说，之前只支持使用一个冒号通过行号来定位。近期还支持了 私有扩展市场 功能。
如果面向 Node.js 的包想标记一个方法为弃用，除了使用 JSDoc 的 @deprecated 注释指令让编辑器展示删除线样式外，还可以使用 Node.js 内置的 util.deprecate() 函数，它会在运行时发出警告，提醒开发者该方法已被弃用。
继 npm 支持 Provenance 以验证发布来源之后，又支持了 Trusted Publisher 以配置 OIDC 来支持「无 Token 发布」，也是对近期 npm 包供应链攻击频发 而强制使用有到期时间的 Token 的一种用户体验和安全双保障的改进措施。
Node.js, Yes! ✌️
- node --disable-warning=ExperimentalWarning --experimental-transform-types index.ts
+ node index.ts<Tooltip /> 这种组件确实非常不友好，在规范的 Web 开发中很可能出现过度使用、误用、可访问性差、信息隐藏和不确定性等问题。 GitHub 官方的 Primer 设计系统 有提到 Tooltip 的替代方案。另可参考这篇博客 Tooltip Components Should Not Exist。
原来 幸运咖 也是蜜雪旗下的。🤔
早在 20 年初就了解到 Ink （中文意为「墨水」）这个「React in Terminal」库，它提供了一个终端渲染器，类似终端下的 react-dom，通过 React 来开发终端程序。包括 GitHub 的 CLI gh 和 CloudFlare 的 Wrangler 在内的很多早期知名的 CLI 项目都基于它开发，非常看好。
出于兴趣，在 24 年也基于它写过一个终端 QQ，叫 Chatee，用来摸鱼的，但随着 ICQQ 的闭源和 QQ 协议的更新，已经基本废弃了。
25 年 2 月，基于 Ink 的 Claude Code 发布，Ink 也被更多人熟知。随之而来的是 Gemini CLI 等一批基于 Ink 的终端应用，Ink 生态也逐渐活跃起来，非常感慨。截止 25 年 12 月，Ink 已收获 33K+ Star，npm 周下载量 200 万 +。
通过将 TypeScript 类型包装在元组 [T] 和 [U] 中，可以禁用 分布式条件类型。
type AllExtend<T, U> = [T] extends [U] ? true : false // ✅
type AllExtendBroken<T, U> = T extends U ? true : false // ❌
type WrapInArray<T> = [T] extends [unknown] ? T[] : never // ✅
type WrapInArrayBroken<T> = T extends unknown ? T[] : never // ❌
type Result1 = AllExtend<'cat' | 42, string> // false ✅
type Result2 = AllExtendBroken<'cat' | 42, string> // true | false ❌
type Result3 = WrapInArray<'cat' | 42> // ('cat' | 42)[] ✅
type Result4 = WrapInArrayBroken<'cat' | 42> // 'cat'[] | 42[] ❌一些常见的 ECMAScript 规范与运行时的兼容性、API 对比工具网站：
第二阶段，和 Mio 一起选的，希望能过～
Major 第一阶段作业 开局 3-0、0-3 炸差不多了还能救回来是我没想到的 😂。LVG 和 RA 怎么双双 0-3 回家，一图都没赢啊？？RNM 退钱 😡。Faze 依旧地狱归来 👻。菊花果然被淘汰了，真给力啊 (๑¯◡¯๑)，不救我的 3-0 那就直接淘汰让其他人作业都爆炸吧。💥 后面就看天禄了，加油。
通过修改 NITZ（网络标识和时区）下发规则实现的运营商名称广告和百度地图的路面广告一样流氓。🤷
建议全世界奶茶店都学习一下这种糖分标注。每次看到「不额外加糖」都得想一想到底是多少糖。😑
压力我，小心我变爆米花蹦你。
糯米粘牙是支链淀粉结构导致的。吃糯米饭需要注意趁热、慢嚼、少量。🍚
交作业交作业，LVG 加油 (ง・_・)ง
开个「Mio 说」板块，应该不会被说成公开秀恩爱吧，大概。💖
博客重构到晚上九点半才下班，果然摸鱼是第一生产力。卡点打卡拒被动加班，摸鱼拿钱做人生赢家。
测试一下发布碎碎念的 API 以及 Markdown 渲染格式是否正常。
code下面是代码块。
const message = "Hello world!"下面是测试图片。
完整的 URL 结构中还包含 Text Fragments，用于在 URL 中指定具体文本，浏览器打开即可高亮对应的文本，方便定位分享。基于 Chromium 的浏览器已经在右键菜单内置了复制命令。尝试点击这个 文本高亮链接 试试看，它会重新打开当前页面，并突出高亮「记录生活」这四个字。
最近看到一篇文章: High-Performance Syntax Highlighting with CSS Highlights API，并了解到了 CSS.highlights API。这种高亮方式通过消除对包裹 DOM 元素的需求，提供更高的性能，同时让代码更简洁、更易维护，对于代码高亮来说是一个颠覆性的创新。
除了常见的 CPU、GPU、APU 处理器之外，还有 NPU、TPU、DSP、FPGA。
使用 all: unset 可以快速重置按钮样式，相比于 div 方案更加语义化且易于维护。
- <div role="button" tabindex="0" />
+ <button /> + { all: unset; }