John H 的個人網站

Notes

文章筆記

工作與 side project 裡踩過的坑、做過的優化，以及一些生活中的技術小教學。

擴充 popup：國家自動選了台灣，預設節點是 cn-sdjn-fx-01-01
技術分享9 min

如何真正徹底解決 Bilibili 卡頓

海外看 B 站為什麼熱門片很順、冷門片卡死：CDN 快取與回源、最窄的那一段決定速度、換 DNS 和開 VPN 為什麼時靈時不靈，以及我的擴充怎麼用台灣 14 家網路業者的實測挑出預設節點。

繁體中文 / English

閱讀文章
LINE 購物直播大廳的雙欄直播列表，標出畫面 20%～50% 的播放區與每張卡片 30% 處的 trigger 線，只有一張卡片在播放
技術分享4 min

滑動自動播放 — 直播影片列表

仿 TikTok 直播列表捲動自動播放：捲動時只播放一支影片、避免快速滑動時閃爍切換，離開視窗即時釋放資源。

繁體中文 / English

以演唱會場館俯視座位圖呈現 SiyaMap 架構：舞台位置是一張實拍視角照，內圈座位區標出 Route 53、CloudFront、S3，外圈標出 Neon、apps/web（Lambda · Next.js + Hono）、image-processor（Lambda · sharp）
技術分享13 min

SiyaMap 系統架構

演唱會場館座位視角分享平台的全端架構：AWS Serverless 基礎設施、圖片浮水印與縮圖管線、PostgreSQL 資料庫建模、Hono 後端分層與設計模式。

繁體中文 / English

深色監控面板對照記憶體曲線：優化前一路升到記憶體上限後 OOM、exit 1；優化後逐 batch 載入與釋放，維持在上限之下並在時間上限前跑完
技術分享4 min

大規模帳單明細驗重監控優化

將 10 萬筆以上帳單資料的重複規則檢查腳本，從逾時／OOM 優化到能穩定在時間與記憶體限制內完成的每日排程監控。

繁體中文 / English