我是如何做設計的：先找到自己的世界觀，再把每一道接縫接好
現在做網站很快，卻常常大同小異，作者認為問題多半出在不知道自己要什麼。這篇把作者的做法整理成步驟：從自己真正喜歡的東西出發，拿它回答每個站都會遇到的問題，變成一套世界觀。做大選擇時先算代價，像整站做成 3D，換到了宇宙的寬闊，也得補上效能和閱讀的負擔。接著用減法收斂，只留點和線，顏色先定角色再挑色，並做黑白測試。判斷標…
来自这个博客的文章
Chrome 157 的 HTML-in-Canvas 實戰：把網頁字卡畫進 WebGPU，主執行緒少了七成
這篇記錄作者用 Chrome 157 正式推出的 HTML-in-Canvas,把首頁土星旁的 DOM 字卡畫進跑在 worker 裡的 WebGPU canvas。正式版 API 改過名字,網路上多數教學仍是舊寫法。three.js 內建的 HTMLTexture 既用舊命名、又假設 canvas 在主執行緒,只能自…
為什麼我把 Mermaid 換成 Obsidian 開源的 pele：快 20 倍，渲染器剩三成
這篇記錄作者把部落格的 Mermaid 渲染器從官方套件、beautiful-mermaid 一路換到 Obsidian 團隊開源的 pele 的過程。作者拿站上 136 張圖實測,pele 全部渲染成功、比 beautiful-mermaid 快約 9 倍、SVG 小四成,畫出來的版面也乾淨很多。文中附上接進 Tan…
把部落格翻新成一片宇宙：572 天的累積、四天的翻新，和一顆串起每一頁的琥珀點
這篇是作者在網站誕生第 572 天整站翻新後寫下的心路歷程。半年前作者就覺得一頁一頁分開改的版面少了沉浸感,十月花四天定下只用點、線和一個琥珀色的基調,把每一頁畫成一個天體,收藏頁改了四次才定成從地球發出的訊號。作者最在意的是換頁轉場的銜接,讓一顆琥珀點像電影追焦一樣串起每一頁。文末也寫了還沒做好的部分,以及給想自己動…
把寵物餵食器攝影機接進 Frigate 和 Home Assistant：拆十個品牌的 APK 選機，逆向「美國 FurSpark」
作者想替客廳的 Frigate 補一顆餵食區的近拍鏡頭,查了十個品牌的寵物餵食器攝影機,發現沒有一台開放影像串流。文中說明怎麼在購買前下載 App 安裝檔、從裡面的影像 SDK 判斷有沒有機會接出畫面,最後選了開發商其實是深圳盯盯拍的 FurSpark Big Eye:在 TCP 6200 找到私有的 H.264 串流…
用 Frigate + Home Assistant 自製 Furbo 寵物保母：本機 AI 寫貓咪日記，但分不出我的兩隻貓
作者原本差點被廣告說服買 Furbo,查完台灣官網才發現回看錄影全綁在寵物保姆訂閱裡,而且只存 AI 判斷有寵物的片段,於是改用 Frigate 加 Home Assistant 自己做:錄影回看、事件通知、每日貓咪日記和精華影片,全部跑在家裡的伺服器上。文中附上從零架設的完整步驟(Tapo RTSP、Ollama、M…
Home Assistant 接 Google Home 語音控制：用 Matter 免雲端，和兩個都叫「找不到裝置」的坑
作者想用語音控制 Home Assistant 裡的燈,選了不走雲端的路:用 home-assistant-matter-hub 把 HA 實體包成 Matter 橋接器,由客廳的 Google TV Streamer 4K 當中樞。配對時 Google Home 兩次顯示「找不到裝置」,原因卻完全不同:第一次是橋接器…
用 NT$220 讓自發電開關接上 Home Assistant：RM4 Pro 錄不到的 433MHz 訊號，和一組完美的假碼
作者家裡的吸頂燈是搬進來就有的,用的是一顆來路不明、沒有型號的自發電無線開關。為了讓 Home Assistant 控制它,作者先用 Broadlink RM4 Pro 試了一整個通宵:868MHz 的「學到了」是雜訊、裝置回報的 433.46MHz 是掃頻器閒置時的停駐值、自己寫的工具還少了一整個頻率欄位,最後確認 …
Trakt 刪了我的 API app：把「在看什麼」整條管線遷到 Simkl
2026 年 7 月 30 日,Trakt 在沒有任何公告的情況下把免費帳號建立 API app 的功能改成 VIP 限定,而既有的 app 也一併消失——作者的「在看什麼」頁面因此靜靜地停止更新,後端只留下 `client not found` 這一句話。這篇從查證開始:trakt-web 的 PR #3057 只寫…
為什麼我開始使用 Zed 編輯器：從 VS Code 搬家，23 個擴充最後剩 8 個
Zed 團隊的上一個作品是 Atom,而 Atom 催生的 Electron 後來成了 VS Code 的地基。這篇記錄作者從 VS Code Remote-SSH 搬到 Zed 的完整過程:本機端 4,067 MB 對 204 MB、伺服器端 7.9 GB 對 107 MB,23 個擴充搬完只剩 8 個。內容涵蓋官方…
VS Code Remote-SSH 把我的伺服器燒到 96°C：rust-analyzer 無限重跑 cargo check
一台跑著三十幾個容器、同時被 VS Code Remote-SSH 連進去開發的家用伺服器,溫度釘在 90°C 撐了四十分鐘、load 從 8 衝到 196,最後失去回應。而把它燒掉的不是那些服務,是編輯器。這篇記錄整個追查過程:三條看起來很有說服力但都是錯的線索(SMU 當掉後感測器說謊、重開機就好、CPU 只有 3…
UPS 加 NUT 讓伺服器斷電自動關機：設定全紀錄，和一條被貓咬過的電源線
這篇把 UPS 加 NUT 的完整設定寫成一份可照做的教學:UPS 選型的三個條件(PFC 純正弦波、AVR、NUT 支援)、NUT 的 driver / upsd / upsmon 三層架構與五個設定檔各管什麼、upsmon.conf 逐行說明、POWERDOWNFLAG 為什麼不能漏,以及 BIOS 那個選錯就前功…
CrowdSec 取代 fail2ban：六天擋下 1619 次掃描，和我把自己封鎖的三次
這篇記錄了作者把伺服器防護從 fail2ban 換成 CrowdSec 的完整過程,並整理成一份可照做的教學。起因不是被入侵而是被吵:掃描器整天敲 /wp-login.php、/.env,把監控通知洗版。當時 fail2ban 已封過 614 個 IP,但作者發現對手一直在換 IP,封 IP 這條路贏不了——後來的數據…
跟另一個站長互相監控：Uptime Kuma 交叉託管，和 Trust Proxy 開了反而更危險
這篇記錄了作者跟另一位自架站長交叉監控的完整過程,並整理成一份可照做的教學。起點是自架服務的一個尷尬處境:監控自己的那台機器,自己掛了就沒人通知得了。解法是互相盯,但一開始兩人都卡在同一個錯誤前提上——以為要走 HTTPS 就得交換憑證。真正的答案是不用交換:對方把子網域 A 紀錄指向你的 IP,TLS 就在你這裡終結…
幫朋友架一台幻獸帕魯專用伺服器：Docker 自架，和最容易卡關的 UDP 連線
這篇記錄了作者幫朋友用 Docker 在自己 24/7 的家用機上架設幻獸帕魯(Palworld)專用伺服器的完整過程,整理成一份能照做的教學。緣起是朋友原本用 Radmin VPN 連線,但那類 P2P 服務穿不過 NAT 就會退回中繼、流量繞經第三方,作者索性用自己的常開主機自架。文章先破除一個迷思:主機商規格頁清…
Linux 伺服器被植入挖礦程式：從 load average 10.65 揪出整條攻擊鏈
這篇記錄了作者在一次例行效能健檢中,意外撞見自己家用伺服器被植入挖礦程式的完整抓賊過程,並整理成一份人人可照做的可疑進程自檢清單。起點是一個不該出現的數字:一台 16 執行緒的機器 load average 卻卡在 10.65。作者用 top 與 docker stats 揪出一個吃滿 10 核、隨機大小寫檔名的可疑程…
暫借半年的呼嚕聲: 一隻不屬於我的貓，和牠留在被窩裡的味道
這篇記錄了作者高三那年與一隻名叫牛奶的賓士貓相處的半年。牠是同學在大雨的夜裡從路邊撿到的,家裡不允許收留,於是託給了從小就想養貓的作者,說好三個月,最後住了半年。文章從家裡的態度寫起:媽媽也愛貓卻始終不養,外婆則說自己討厭貓、理由多得可疑——但作者後來才拼湊出,外婆討厭的其實不是貓,而是「經歷離開」這件事,二十年前那隻…
部落格文章渲染策略: 從 CSR 空殼、SSG／ISR，到會 eval 的 MDX 與首幀不再閃
這篇記錄了作者把 koimsurai.com 的部落格,從一個 100% CSR 的 React SPA(真人只拿到空殼、爬蟲靠 user-agent 硬塞 meta)一路改造成 SSG／ISR 的完整渲染策略與踩坑。從選型談起——為什麼是 SSG hybrid、為什麼評估過 Next 卻選了 TanStack Sta…
3D 星空背景效能長征：OffscreenCanvas Worker → WebGPU/TSL 重寫
這篇記錄了作者為個人網站 koimsurai.com 那片 3D 星空背景走過的三階段效能長征。背景最初只是一堆各自為政的 three.js 裝飾特效——黑洞、粒子、星空、土星——東西還少時並不重,是愈疊愈多、真正拿去量之後才逐步走上優化:先把星空搬進 OffscreenCanvas Worker 讓渲染離開主執行緒(…
幫巴哈動畫瘋寫一個沒人寫過的 SDK: 逆向 API、自我掏空的 cookie，與讀不到的 HttpOnly
為了讓部落格那頁「在看什麼」能顯示我真實的動畫瘋觀看紀錄,我一路從逆向巴哈的 history API,做成一個開源的 npm SDK `anigamer`。這篇記錄整條坑:七顆 cookie 裡哪顆才是關鍵、封面藏在 og:image 的隨機 hash、每部動畫只顯示一集的 nested history bug,以及最…