Oli 的小站

收藏夹公开：最近在看的四个技术视频

Mon, 12 Oct 2026 00:00:00 GMT

带新人的时候总被问"有没有视频可以推荐"，每次现找太麻烦，干脆把收藏夹公开。下面四个都免费，都看过至少一遍，按主题排列。

Event Loop：Philip Roberts 的经典演讲

2014 年 JSConf EU 的演讲，二十多分钟把 JavaScript 事件循环讲得干干净净，配合浏览器开发者工具现场演示，看完再去看宏任务微任务的各种总结文章就不晕了。准备前端面试背题之前，先把这个看了。

前端入门：pink 老师的 HTML + CSS

两千万播放的课，五百多集，从 HTML 标签一路讲到移动端布局实战。我这种后端出身、偶尔被拉去救火前端的人，翻的就是它——零基础友好，跳着看也跟得上。已经出了新版，入门内容大同小异，看哪版都行。

Linux 入门：韩顺平的一周学会 Linux

讲得细，节奏慢，适合完全没有命令行经验的人。我把它当"新人入职第一周教材"用，比我自己讲省事，也比大多数公司内训靠谱。

30 分钟速览：GeekHour 的 Linux 入门

时间紧就看这个，半小时建立对 Linux 的全局认知，知道命令行能干什么，之后再按需深入。适合在完整课程和"我只想快速了解一下"之间犹豫的人。

列表会不定期更新，看到值得二刷的再补进来。

博客搬家：域名忘了续费

Sun, 20 Sep 2026 00:00:00 GMT

上周最离谱的一件事：打开自己博客，跳转到一个域名出售页面。第一反应是被黑了，冷静下来一查——域名过期了，宽限期也过了，被域名贩子抢注，挂着一口价在卖。

事情经过

这个域名当时是随手注册的，没开自动续费，注册商的提醒邮件又躺在垃圾箱里。过期到被抢注之间其实有大概一个多月的窗口，我愣是一点没察觉。

试着联系对方买回来，开口就是四位数，算了。

索性搬家

新域名注册好、证书签好、DNS 切过来，前后不到半小时。所有文章和 RSS 内容都迁移到了新域名，旧 RSS 地址作废，订阅的朋友麻烦换一下。

:::note 以后所有域名一律开自动续费 + 日历双重提醒。便宜域名续费一年也就一杯奶茶钱，被抢注了赎回可是十倍不止。 :::

一点感想

域名这东西平时完全无感，出事的时候才知道它是一切的入口。数据我都有备份和源文件，损失的就是一个用了快一年的地址，不算心疼，但教训到位了。

记一次 nginx upstream 调优：buffer 太小引起的 502

Fri, 18 Sep 2026 00:00:00 GMT

前两天一个反代服务开始间歇性 502，有意思的是重启之后好一阵子，然后又冒出来，频率不高但很烦。打开 error.log 一看，关键行是：

upstream sent too big header while reading response header from upstream

原因

上游是一个走 Akamai 的站点，响应头里塞了一大串 set-cookie。nginx 默认的 proxy_buffer_size 只有 4k（新版本是 8k），响应头一旦超了就直接掐断，客户端看到的就是 502。

修复

proxy_buffer_size 16k;
proxy_buffers 8 16k;

改完 reload，观察了两天没再出现。顺手还把 proxy_connect_timeout 和 proxy_read_timeout 收紧了一点，免得上游抽风时 worker 被拖死。

一点感想

这类参数默认值在小流量场景完全够用，所以平时根本注意不到。等上游换了 CDN 或者开始发大 cookie 的时候就突然爆雷，而且日志里的关键字和"网关挂了"的第一直觉完全对不上，容易往错误方向查。

CSS 原生嵌套：可以扔掉预处理器了

Sat, 05 Sep 2026 00:00:00 GMT

CSS 嵌套从新奇特性变成 Baseline 已经两年多，这次重构我把一个老项目的 Sass 全部拆掉了，构建链少一个依赖，样式行为零变化。

基本语法

.card {
  padding: 1rem;

  & .title {
    font-size: 1.25rem;
  }

  &:hover {
    background: var(--bg-hover);
  }

  @media (width >= 768px) {
    padding: 2rem;
  }
}

和 Sass 最大的区别是元素选择器必须带 &。Sass 里可以直接写 .card { h2 {} }，原生语法要求写成 & h2，否则浏览器不认。迁移时脚本批量替换这一处就能跑通大半。

真正的好处

少一层编译，样式调试时 Sources 面板里看到的行号就是源文件行号
媒体查询可以写在选择器内部，响应式样式不再割裂在文件两头
和 :has()、层叠层（@layer）这些新能力组合使用，选择器权重问题好控多了

兼容性处理

老项目还要照顾旧浏览器的话，PostCSS 一行配置就能垫平：

postcssPresetEnv({ features: { 'nesting-rules': true } })

新项目我建议直接裸写，不做任何转译。不支持嵌套的浏览器如今和不支持 flexbox 的占比差不多，为它们多养一个构建步骤不划算。

Let's Encrypt 自动续期踩坑：证书续了，服务却没重载

Sun, 02 Aug 2026 00:00:00 GMT

帮朋友排查一个"证书过期"的问题，翻日志发现 acme.sh 每次续期都是成功的，证书文件也是新的，但浏览器里看到的证书还是两个月前那张。

问题在哪

他当初装证书时 --reloadcmd 写的是 nginx -s reload，但真正用证书的是另一个进程，nginx 只是路过。证书续了、文件换了，那个进程却从头到尾没重启过，内存里还是旧证书。

正确姿势

acme.sh --install-cert -d example.com --ecc \
  --fullchain-file /path/fullchain.pem \
  --key-file /path/key.pem \
  --reloadcmd "systemctl restart 你的服务"

关键是 reloadcmd 必须指向真正加载证书的那个服务，而不是想当然写个 nginx。

验证方法

echo | openssl s_client -connect 你的域名:443 -servername 你的域名 2>/dev/null \
  | openssl x509 -noout -dates

另外建议在日历上设个提醒，每两个月看一眼线上证书的 notAfter，别完全信任自动续期。

用 View Transitions API 给页面切换加动画

Fri, 10 Jul 2026 00:00:00 GMT

给客户的后台加页面切换动画，以前要么上 framer-motion，要么手写 opacity 加 transform。这次直接用 View Transitions API，零依赖，旧浏览器优雅降级成瞬间切换，没有任何报错。

多页应用的用法

Chrome 126 起支持跨文档过渡，只要一行 CSS：

@view-transition {
  navigation: auto;
}

列表页和详情页各自声明过渡名：

.item-image {
  view-transition-name: item-image;
}

浏览器会自动截图新旧状态做交叉淡入淡出。想定制动画，覆盖两个伪元素：

::view-transition-old(item-image),
::view-transition-new(item-image) {
  animation-duration: 0.25s;
}

单页应用

SPA 里在改 DOM 前包一层：

document.startViewTransition(() => updateListUI());

浏览器对函数执行前后各截一帧，中间的过程自动补间。

几个坑

view-transition-name 必须全页唯一，列表里循环渲染的元素不能共用一个名字，否则动画直接失效
页面根元素默认有一个 root 过渡名，不想要整页淡入淡出就把它禁掉
Firefox 和 Safari 的跨文档过渡支持滞后，做好渐进增强的预期，别把核心交互押在动画上

小内存服务器上跑服务的几点经验

Thu, 21 May 2026 00:00:00 GMT

一台 1G 内存的小鸡，跑了 nginx、两个 Go 写的小服务、一个 Telegram bot 和一堆 cron，一年多没重启过，内存稳定在 60% 左右。几点流水账经验。

swap 要给，但别太大

给 1G swap 图个安心，但 swap 不是内存不够的解药，是 OOM 的缓冲垫。如果 free 里 swap 用量持续上涨，说明该砍服务了，而不是加大 swap。

systemd 内存限制

[Service]
MemoryMax=200M

给每个服务设上限，谁漏内存谁死，别连累整机。Go 服务尤其要留意 RSS，默认 GC 策略在小内存机器上会多吃不少。

日志是隐形杀手

journald 默认不限制磁盘占用，小机器上务必设 SystemMaxUse=200M。nginx 日志记得 logrotate，access log 里全是扫描器流量的话，一个月能吃掉几个 G。

能不常驻就不常驻

很多"服务"其实一个 cron 脚本就能解决，cron 跑完就退，内存零占用。每次想装新东西前先问自己：它真的需要 7x24 在内存里呆着吗？

原生 dialog 元素：模态框的正确打开方式

Mon, 20 Apr 2026 00:00:00 GMT

上周拆掉项目里一个 300 行的手写模态框组件，换成原生 <dialog> 元素，组件文件从 300 行缩到 40 行。这东西值得单独记一篇。

为什么它更好

手写模态框绕不开三个坑：焦点会跑到页面背后、Esc 关不掉、z-index 层层加码还是被浮层盖住。<dialog> 把三个问题全部内建解决：

showModal() 打开后焦点圈定在对话框内，Tab 键出不去
Esc 自动触发 close 事件
渲染在 top layer，永远盖在普通层叠上下文之上，不用管 z-index

基本用法

<dialog id="confirm">
  <p>确认删除这条记录？</p>
  <form method="dialog">
    <button value="cancel">取消</button>
    <button value="ok">删除</button>
  </form>
</dialog>

const dlg = document.querySelector('#confirm');
dlg.showModal();
dlg.addEventListener('close', () => {
  if (dlg.returnValue === 'ok') doDelete();
});

form method="dialog" 会自动关闭对话框并把按钮的 value 塞进 returnValue，连事件监听都省了。

样式

遮罩用 ::backdrop 伪元素：

dialog::backdrop {
  background: rgb(0 0 0 / 40%);
  backdrop-filter: blur(2px);
}

打开时有默认的居中定位，可以用 margin: auto 微调。出场动画建议用 transition 配合 allow-discrete，比 JS 控制 class 干净得多。

唯一要注意的：show() 和 showModal() 是两种东西，前者是普通 inline 弹层，没有遮罩也不圈定焦点，别调混了。

nginx 日志分析组合拳：awk 管道的几个实战姿势

Wed, 25 Mar 2026 00:00:00 GMT

接手一台流量异常的机器，没装任何监控，只有一份 2G 的 access log。十分钟后问题定位完毕，靠的是几条管道。这类命令每次现查文档太慢，整理在这里。

请求数 Top 10 的来源 IP

awk '{print $1}' access.log | sort | uniq -c | sort -rn | head

这条管道值得拆开记：uniq -c 只统计相邻重复行，所以前面必须先 sort；后面再 sort -rn 按计数倒序。三段式是日志分析的万能起手式。

状态码分布

awk '{print $9}' access.log | sort | uniq -c | sort -rn

4xx 占比突然升高，配合上一条基本能锁死是谁在扫。

每小时请求量

awk '{print substr($4, 14, 2)}' access.log | sort | uniq -c

$4 是时间字段，substr 掐出小时位。画在脑子里就是一张流量曲线，哪个小时被打了 Peak 一目了然。

找出响应最慢的请求

awk '($NF > 2){print $NF, $7}' access.log | sort -rn | head

前提是 log_format 里把 $request_time 放在最后一个字段。超过 2 秒的请求按耗时倒序，URL 跟在后面。

旋转过的压缩日志

zcat access.log.*.gz | awk '{print $1}' | sort | uniq -c | sort -rn | head

zcat 直接读 gzip，不用先解压落盘。排查上周的问题 logrotate 已经转走了，这条是救命用的。

一点体会：管道思维的本质是把大问题拆成每条命令只做一件事。真到几十 G 的日志再上 Go 写的专用工具，日常这几条够用十年。

jq：命令行里处理 JSON 的瑞士军刀

Sat, 28 Feb 2026 00:00:00 GMT

API 返回的 JSON 越来越肥，肉眼读不动，Python 起进程又嫌重。jq 编译成 C，处理几百 MB 的文件也是瞬间的事，值得把常用表达式背下来。

看结构

curl -s https://api.github.com/repos/vercel/next.js | jq '. | keys'

拿到陌生接口先列 key，比翻文档快。

过滤和取值

jq '.items[] | select(.stargazers_count > 1000) | .full_name'

.[] 展开数组，select 按条件过滤，竖线串联。读法接近自然语言：取出每项，筛出星数过千的，留下全名。

统计

jq '[.[] | select(.state == "open")] | length'

中括号把过滤结果重新收集成数组，length 计数。

改造结构

jq 'map({name: .full_name, stars: .stargazers_count})'

map 加对象构造，输出干净得可以直接贴进报告。再配 -r 去掉字符串引号，输出直接能进 shell 循环。

转成 TSV 交给 awk

jq -r '.[] | [.name, .size, .default_branch] | @tsv' | column -t

@tsv 是关键一步，jq 的输出和文本工具的输入在这里接上头。JSON 世界和 Unix 世界本来隔着一层，这条管道把它们焊在一起。

一个省 finger 的技巧

交互式排查时用 jq 'keys' 比翻官方文档 schema 快得多，接口字段都摆在明处。写脚本时再把确定下来的表达式固化进去，避免盲猜字段名。

把家里的 DNS 换成 AdGuard Home 之后

Wed, 14 Jan 2026 00:00:00 GMT

家里路由器原厂固件的 DNS 比较弱，广告过滤全靠各设备上的客户端插件，维护成本高。周末把一台吃灰的树莓派翻出来装了 AdGuard Home，全家设备统一走它。

部署

Docker 一条命令起服务，端口 53 记得别被 systemd-resolved 占了。路由器 DHCP 里把 DNS 指到树莓派的内网 IP，所有设备无感切换。

上游怎么选

试了几个组合，最后稳定在 DoH 上游 + 并发查询。国内环境直连 8.8.8.8 的 53 端口体验很差，DoH 虽然稍微慢一点但胜在稳定。AdGuard Home 支持"最快响应优先"，把几个上游都填上让它自己选。

效果

常用 App 的开屏广告少了一大半，页面加载明显干净。拦截统计里最狠的一天挡了三千多条请求，都是那几个视频 App 发的。

踩的坑

树莓派 SD 卡写日志容易写坏，日志等级调低或者干脆丢内存盘
某些国产 App 检测到 DNS 拿不到广告域名会硬切自家 HTTP DNS，这种就没辙了，只能靠客户端规则补

磁盘又满了：df 和 du 对不上的排查思路

Sun, 14 Dec 2025 00:00:00 GMT

凌晨收到磁盘告警，登上去 df -h 显示 97%，du -sh /* 从根目录一路扫下来却对不上账，所有目录加起来少了一半。这种 df 和 du 对不上的场景，八成是同一个原因。

标准排查路径

df -h
du -xh --max-depth=1 / 2>/dev/null | sort -rh | head

-x 限定单文件系统，跳过挂载点，不然 du 会把别的盘也算进来。逐层往下钻，先定位到目录级。

df 和 du 对不上：找已删除文件

lsof +L1

这条列出所有「文件已删除但句柄还开着」的进程。Unix 的删除语义是解链接，只要还有进程攥着文件句柄，空间就不会释放，df 统计的是这块空间，du 看不见它。

日志进程是惯犯：日志被 logrotate 挪走或被人手动 rm，进程还按老句柄继续写。解决分两步：

# 清空内容释放空间，进程无感
> /proc/23842/fd/4

# 根治：重启或 reload 对应服务，让它重新打开文件
systemctl reload app

注意顺序：先 reload 再删文件是正解。先 rm 再以为完事，空间根本不会回来，下次告警还是它。

常见的三个藏污点

/var/log/journal：journalctl --vacuum-size=200M 直接约束
Docker：docker system prune -a --volumes 一把梭之前，先 docker system df 看看都占在哪
邮件队列和 core dump：/var/spool 和 /var/crash 值得单查

预防

在这类机器上放一个 cron：df --output=pcent / | tail -1 超过 85 就告警。等用户喊着「磁盘满了」再登上去，排查窗口已经被挤没了。

SSH 改造：密钥登录 + fail2ban

Sun, 30 Nov 2025 00:00:00 GMT

新开一台 VPS，装完服务第一件事看 auth.log，好家伙，上线两小时爆破尝试已经刷了几百条，全冲着 root 来的。顺手把老三样做了个记录。

密钥登录

ssh-keygen -t ed25519
ssh-copy-id root@服务器

确认密钥能登之后，/etc/ssh/sshd_config 里改两处：PasswordAuthentication no、PermitRootLogin prohibit-password。

:::caution 改完别断当前会话，开个新终端验证能登再退出，否则容易被自己锁在门外。 :::

fail2ban

默认的 sshd jail 就够用，maxretry 调到 3，bantime 拉长到一天。装完看下 fail2ban-client status sshd，当天就能看到 ban 列表在涨。

换端口值不值

改个非标准端口能挡掉九成无脑扫描，日志清净很多，但安全性上是防君子不防小人——真定向扫描你照样暴露。我的结论是：改，主要为了日志干净，不是当安全手段。