Skip to content
滑鼠測試能測出什麼：瀏覽器滑鼠事件看得到與看不到的做線上滑鼠測試工具才發現，網頁只看得到瀏覽器送來的事件。這篇用白話整理 button 與 buttons 的差別、兩顆鍵同時按的坑、怎麼排除觸控與鍵盤，以及 DPI、回報率、系統雙擊速度為什麼測不到。讀這篇筆記 
Emoji 組合的意思從哪來：投稿、去重、排行與檢舉機制Emoji 組合的意思從哪來？顏文字花園先放了 168 組 emoji 組合，也開放大家投稿。這篇記錄意思怎麼寫、怎麼認出重複的組合、排行怎麼防灌票，以及投稿不先審核時，靠哪些機制擋垃圾內容。讀這篇筆記 
YouTube 字幕怎麼切成句子：英文跟讀的斷句與 CEFR 分級英文跟讀會把 YouTube 英文字幕切成一句一句，再標上 CEFR 難度。這篇用白話拆解斷句規則：句點什麼時候不算句尾、沒有標點的字幕怎麼辦、難度怎麼算，以及為什麼不給發音分數。讀這篇筆記 
郵遞區號站英文版怎麼蓋：官方對照檔與組合引擎郵遞區號站「地址中翻英」開發筆記：為什麼翻譯不能用猜的、怎麼在 build 階段 join 官方路街對照檔的 3 萬筆譯名、組合引擎處理哪些魔王格式，以及沒有標準答案時的三層驗證。讀這篇筆記 
Cloudflare Zero Trust 教學：自架服務的免費安全防線自架服務上線後，用 Cloudflare Zero Trust 免費方案補上防線：Access 登入驗證、Gateway 網域過濾、Service Token 機器存取與稽核日誌，讓後台與 side project 不被陌生人亂連。讀這篇筆記 
網頁戰鬥陀螺對戰遊戲：完整遊玩規則與必殺技拆解網頁戰鬥陀螺雙人對戰的完整規則：瞄準發射一次定生死、看回放決勝負，拆解續航條與耐久條、攻防續重四圍屬性、四類型互剋、五大必殺技、競技場與計分賽制。讀這篇筆記 
雙人線上對戰遊戲怎麼全免費：Cloudflare 技術架構解析拆解雙人線上戰鬥陀螺遊戲怎麼跑在 Cloudflare 免費額度內：確定性批次模擬讓伺服器只算一次，搭配 Durable Objects 的 WebSocket Hibernation，以及 Vue 3、D1 與 R2 的分工。讀這篇筆記 
Cloudflare Tunnel 教學：把家裡的 Mac mini 變成伺服器不用租 VPS、不用固定 IP、不用開 port，用 Cloudflare Tunnel 把家裡的 Mac mini 變成對外伺服器：建立 Tunnel、安裝 cloudflared、綁定子網域，一台機器跑多個服務。讀這篇筆記 
了解開站初衷：免費、開箱即用、盡量在瀏覽器裡運算為什麼我把這些小工具集中成一個站？這篇說明口袋工具的定位、工具共同的原則，以及我用 Vue 3、Vite、vite-ssg、Cloudflare 與 VitePress 打造它們的方式。讀這篇筆記 
Cloudflare Workers Static Assets 部署靜態網站實戰用 Cloudflare Workers 的 Static Assets 模式部署靜態網站：wrangler.jsonc 關鍵欄位、綁定自訂網域、wrangler deploy 流程，以及 SPA 與預渲染網站的 404 處理差異。讀這篇筆記 
Cloudflare R2 入門：零 egress 費用的物件儲存怎麼用Cloudflare R2 物件儲存入門：S3 相容、不收 egress 流量費，用 wrangler 建 bucket、從 Worker 綁定讀寫，並說明它和 Workers Static Assets 怎麼分工，附程式碼與設定。讀這篇筆記 
Ubersuggest MCP 教學：讓 AI 幫你做 SEO 關鍵字研究用 MCP 把 Ubersuggest 接上 Claude，讓 AI 直接查關鍵字搜尋量與難度、做 SERP 與競品分析、產內容點子，以複利計算機與郵遞區號查詢為實例，附可直接複製的 prompt。讀這篇筆記 
會眨眼、會揮手的顏文字 Logo：CSS 動態 emoji 拆解拆解顏文字工具站那顆會眨眼、揮手、掀桌的動態 emoji Logo：用 span 逐字拼出顏文字、純 CSS @keyframes 做動畫、每 3.2 秒輪播換臉，附關鍵程式碼與 SSR 注意事項。讀這篇筆記 
GitHub Actions 自動部署 Node.js 到 VPS（PM2 實作）用 GitHub Actions + SSH + rsync + PM2，讓 Node.js 專案 push 之後自動部署到 VPS，從 SSH 金鑰、GitHub Secrets 到 workflow 設定一次講清楚。讀這篇筆記 
JavaScript 物件迴圈：keys、values、entries 一次搞懂物件沒有 forEach、map 可以用？用白話搞懂 Object.keys、Object.values、Object.entries 三種把物件轉成陣列的迴圈手法，以及實戰怎麼選，從此不必再寫 for...in。讀這篇筆記 
nvm 安裝教學：Mac 與 Windows 切換 Node.js 版本手把手安裝 nvm（Node Version Manager），在 Mac 與 Windows 上自由切換 Node.js 版本，解決團隊環境不一致與 command not found 等常見問題。讀這篇筆記
BEHIND THE TOOLS
工具背後的小筆記
從第一個點子到真正能用，記下設計、程式與 AI 協作的過程。
滑鼠測試能測出什麼：瀏覽器滑鼠事件看得到與看不到的做線上滑鼠測試工具才發現，網頁只看得到瀏覽器送來的事件。這篇用白話整理 button 與 buttons 的差別、兩顆鍵同時按的坑、怎麼排除觸控與鍵盤，以及 DPI、回報率、系統雙擊速度為什麼測不到。讀這篇筆記 Emoji 組合的意思從哪來：投稿、去重、排行與檢舉機制Emoji 組合的意思從哪來？顏文字花園先放了 168 組 emoji 組合，也開放大家投稿。這篇記錄意思怎麼寫、怎麼認出重複的組合、排行怎麼防灌票，以及投稿不先審核時，靠哪些機制擋垃圾內容。讀這篇筆記 YouTube 字幕怎麼切成句子：英文跟讀的斷句與 CEFR 分級英文跟讀會把 YouTube 英文字幕切成一句一句，再標上 CEFR 難度。這篇用白話拆解斷句規則：句點什麼時候不算句尾、沒有標點的字幕怎麼辦、難度怎麼算，以及為什麼不給發音分數。讀這篇筆記 郵遞區號站英文版怎麼蓋：官方對照檔與組合引擎郵遞區號站「地址中翻英」開發筆記：為什麼翻譯不能用猜的、怎麼在 build 階段 join 官方路街對照檔的 3 萬筆譯名、組合引擎處理哪些魔王格式，以及沒有標準答案時的三層驗證。讀這篇筆記 Cloudflare Zero Trust 教學：自架服務的免費安全防線自架服務上線後，用 Cloudflare Zero Trust 免費方案補上防線：Access 登入驗證、Gateway 網域過濾、Service Token 機器存取與稽核日誌，讓後台與 side project 不被陌生人亂連。讀這篇筆記 網頁戰鬥陀螺對戰遊戲：完整遊玩規則與必殺技拆解網頁戰鬥陀螺雙人對戰的完整規則：瞄準發射一次定生死、看回放決勝負，拆解續航條與耐久條、攻防續重四圍屬性、四類型互剋、五大必殺技、競技場與計分賽制。讀這篇筆記 雙人線上對戰遊戲怎麼全免費：Cloudflare 技術架構解析拆解雙人線上戰鬥陀螺遊戲怎麼跑在 Cloudflare 免費額度內：確定性批次模擬讓伺服器只算一次，搭配 Durable Objects 的 WebSocket Hibernation，以及 Vue 3、D1 與 R2 的分工。讀這篇筆記 Cloudflare Tunnel 教學：把家裡的 Mac mini 變成伺服器不用租 VPS、不用固定 IP、不用開 port，用 Cloudflare Tunnel 把家裡的 Mac mini 變成對外伺服器：建立 Tunnel、安裝 cloudflared、綁定子網域，一台機器跑多個服務。讀這篇筆記 了解開站初衷：免費、開箱即用、盡量在瀏覽器裡運算為什麼我把這些小工具集中成一個站？這篇說明口袋工具的定位、工具共同的原則，以及我用 Vue 3、Vite、vite-ssg、Cloudflare 與 VitePress 打造它們的方式。讀這篇筆記 Cloudflare Workers Static Assets 部署靜態網站實戰用 Cloudflare Workers 的 Static Assets 模式部署靜態網站：wrangler.jsonc 關鍵欄位、綁定自訂網域、wrangler deploy 流程，以及 SPA 與預渲染網站的 404 處理差異。讀這篇筆記 Cloudflare R2 入門：零 egress 費用的物件儲存怎麼用Cloudflare R2 物件儲存入門：S3 相容、不收 egress 流量費，用 wrangler 建 bucket、從 Worker 綁定讀寫，並說明它和 Workers Static Assets 怎麼分工，附程式碼與設定。讀這篇筆記 Ubersuggest MCP 教學：讓 AI 幫你做 SEO 關鍵字研究用 MCP 把 Ubersuggest 接上 Claude，讓 AI 直接查關鍵字搜尋量與難度、做 SERP 與競品分析、產內容點子，以複利計算機與郵遞區號查詢為實例，附可直接複製的 prompt。讀這篇筆記 會眨眼、會揮手的顏文字 Logo：CSS 動態 emoji 拆解拆解顏文字工具站那顆會眨眼、揮手、掀桌的動態 emoji Logo：用 span 逐字拼出顏文字、純 CSS @keyframes 做動畫、每 3.2 秒輪播換臉，附關鍵程式碼與 SSR 注意事項。讀這篇筆記 GitHub Actions 自動部署 Node.js 到 VPS（PM2 實作）用 GitHub Actions + SSH + rsync + PM2，讓 Node.js 專案 push 之後自動部署到 VPS，從 SSH 金鑰、GitHub Secrets 到 workflow 設定一次講清楚。讀這篇筆記 JavaScript 物件迴圈：keys、values、entries 一次搞懂物件沒有 forEach、map 可以用？用白話搞懂 Object.keys、Object.values、Object.entries 三種把物件轉成陣列的迴圈手法，以及實戰怎麼選，從此不必再寫 for...in。讀這篇筆記 nvm 安裝教學：Mac 與 Windows 切換 Node.js 版本手把手安裝 nvm（Node Version Manager），在 Mac 與 Windows 上自由切換 Node.js 版本，解決團隊環境不一致與 command not found 等常見問題。讀這篇筆記