Notes / 39
文章與製作筆記
開發紀錄、踩坑筆記，以及製作這些實驗時留下的想法。
文章時間軸
依發布日期排列 · 新到舊
2026
30 POSTS
AI 與工具
Claude Code / Codex CLI 常用指令速查表
整理 Claude Code 與 Codex CLI 的常用斜線指令、快捷操作與進階功能，方便需要時快速查找。
AI 與工具
Codex 模型簡單怎麼選？
整理 Codex 各模型在速度、能力與使用情境上的差異，提供從簡單修改到大型端到端任務的選擇方向。
AI 與工具
Claude 模型簡單怎麼選？
整理 Claude 各模型在速度、能力與使用情境上的差異，提供從輕量工作到複雜任務的選擇方向。
AI 與工具
Claude Code 與 Codex：不同模型怎麼選？
比較 Claude Code 與 Codex 不同模型的速度、能力與成本取捨，依工作難度整理實用的選擇方向。
AI 與工具
AI 相關紀錄 v1｜Claude Code / Codex CLI 初始化與基本概念
從 Claude Code 與 Codex CLI 開始，整理 CLI、Coding Agent、Context、/init 與 CLAUDE.md／AGENTS.md 這幾個一開始最容易搞混的概念，以及在既有專案中的安裝與啟動方式。
AI 與工具
AI 相關紀錄 v10｜基本概念小結論
用一篇快速整理 CLAUDE.md、AGENTS.md、設定檔、Rules、Commands、Skills、Agent 與 MCP 的角色和差異。
AI 與工具
AI 相關紀錄 v9｜MCP：讓 AI 使用其他工具與資料
介紹 MCP 如何讓 AI 使用外部工具與資料，並以 Pencil MCP 說明實際用途、權限風險及與 Skill 的差異。
AI 與工具
AI 相關紀錄 v8｜Agent / Subagent：什麼時候真的需要分工？
整理 Agent、Subagent 與 Custom Agent 的用途，說明何時適合分工，以及它們和 Rules、Skills 的差異。
AI 與工具
AI 相關紀錄 v7｜Skills：把重複工作流程整理起來
介紹 Claude Code 與 Codex Skills，整理適合保存成 Skill 的重複流程、基本結構與使用方式。
AI 與工具
AI 相關紀錄 v6｜Commands / Slash Commands：CLI 裡的 `/` 指令是什麼？
介紹 Claude Code 與 Codex CLI 的 Slash Commands，整理常用內建指令、自訂指令與 Skills 的差異。
AI 與工具
AI 相關紀錄 v5｜Rules：專案規則多了之後怎麼拆？
整理 Claude Code Rules 與 Codex AGENTS.md 的拆分方式，說明何時該拆、怎麼依目錄管理專案規則。
AI 與工具
AI 相關紀錄 v4｜Claude Code settings / Codex config 基本設定
整理 Claude Code settings.json 與 Codex config.toml 的設定層級、權限控制和常見基本設定。
AI 與工具
AI 相關紀錄 v3｜Claude Code `.claude/` / Codex CLI 設定位置：全域與專案設定基本概要介紹
整理 Claude Code 與 Codex CLI 的使用者層級、專案層級設定位置，以及 rules、skills、agents 等目錄的用途。
AI 與工具
AI 相關紀錄 v2｜CLAUDE.md / AGENTS.md 怎麼寫？專案規範與實際範例
整理 CLAUDE.md 與 AGENTS.md 的用途、適合記錄的專案規範，以及可直接參考的設定範例。
前端開發
Google App 內建瀏覽器：about:blank 佔位頁被關閉的排查紀錄
記錄 iOS Google App 內建瀏覽器在非同步開啟外部頁面時，about:blank 佔位分頁被自動關閉，導致第三方登入或外部導轉失敗的排查與解法。
前端開發
iOS 第三方登入後回不到原頁？分頁開啟關係與回頁行為實測
記錄 iOS Safari 與 Chrome 在多分頁第三方登入流程中，登入頁關閉後不一定回到原頁的實測，以及分頁開啟關係、window.close 與 window.focus 的限制。
前端開發
iOS iframe 串接 Google 登入出現空白頁：Popup 與頁面回收問題排查紀錄
記錄 iframe 內串接 Google 第三方登入時，部分 iOS 裝置因背景頁面遭到回收並重新載入，導致 Popup 登入流程中斷，以及最後透過 Redirect 分流與登入狀態接回機制處理的過程。
前端開發
Nuxt 3 / 4 的 routeRules：重新導向與頁面設定
整理 Nuxt 3 與 Nuxt 4 的 routeRules 用法，可以依照不同網址設定重新導向、預渲染、SSR 與快取，並簡單對照 Nuxt 2 的舊做法。
前端開發
Nuxt 3 / 4 的 Route Middleware：進頁面前先做判斷
整理 Nuxt 3 與 Nuxt 4 的 Route Middleware，用 defineNuxtRouteMiddleware 在進入頁面前檢查登入狀態，搭配 navigateTo 重新導向，並說明一般 middleware、global middleware 與 definePageMeta 的用法。
前端開發
Nuxt 4 建立專案：和 Nuxt 3 有哪些不同
整理 Nuxt 4 建立專案的基本流程與目錄結構，並對照 Nuxt 3 的差異，包括 app/ 目錄、路徑別名、TypeScript，以及目前常用的 ESLint 與 Tailwind CSS 4 設定。
前端開發
Nuxt 3 / 4 用 Server API 做代理與轉發
整理 Nuxt 3 與 Nuxt 4 使用 server/api 轉發第三方 API 的方式，可以避免瀏覽器 CORS 問題、隱藏 API Key，也能在伺服器端加入快取。
前端開發
Screen Wake Lock API：不用套件也能讓頁面保持亮著
整理 Screen Wake Lock API 的基本用法，說明 HTTPS、頁面可見性、切換分頁後重新取得 wake lock，以及 Vue／Nuxt 計時器使用時的注意事項。
其他筆記
把 Node + PostgreSQL 的 backend 裝進 Docker：Dockerfile、.dockerignore 與 compose
從「本機裝了就跑」到打包成容器的通用做法——Dockerfile 每一行的理由與 layer cache 為什麼決定了指令順序、.dockerignore 漏掉 node_modules 對原生模組是災難級的問題、容器之間為什麼不能用 localhost 互相找到對方，以及怎麼驗證資料真的寫進了 volume。
前端開發
現在的 HTML meta 標籤怎麼寫
整理現在一個新頁面該有的 meta 標籤骨架——viewport 補上 viewport-fit=cover 因應瀏海與圓角螢幕、color-scheme 讓表單控制項跟著深色模式換色、theme-color 決定行動瀏覽器工具列顏色，以及基本的 SEO 與 Open Graph 標籤。
前端開發
JavaScript 動態載入：import() 與 Vue 非同步元件
整理靜態 import、動態 import() 與 Vue defineAsyncComponent 的使用方式，並簡單補充 Vite import.meta.glob 的用途。
問題研究
structuredClone()：終於有內建的深層拷貝
整理 JavaScript structuredClone() 的深層拷貝用法，說明 Date、Map、Set、循環參考的處理方式，以及 Function、class 與 Vue reactive Proxy 的注意事項。
前端開發
ES Module 現在的樣子：Node ESM、exports 與 import maps
整理現代 JavaScript ES Module 的常見用法，包括 Node.js 原生 ESM、package.json exports、瀏覽器 import maps、JSON import attributes，以及 Vite 動態載入的注意事項。
前端開發
day.js 搭配 Vue 3 的日期格式化
整理 Vue 3 日期格式化的常見做法，使用 day.js 取代舊專案常見的 moment.js，並以 method 或 computed 取代 Vue 2 filter，也補充原生 Intl.DateTimeFormat 的使用方式。
前端開發
Dart Sass 遷移筆記：node-sass 之後怎麼裝 Sass
node-sass 與 LibSass 已停止維護，現在改用 Dart Sass。整理 webpack 與 Vite 的安裝方式，以及為什麼不再像 node-sass 一樣容易遇到 Node.js 版本與原生編譯問題。
問題研究
現在處理編碼：TextEncoder、Uint8Array 的 Base64 方法與 URLSearchParams
整理 JavaScript 現代編碼方式，使用 TextEncoder、TextDecoder 與 Uint8Array 處理 UTF-8 與 Base64，並說明 Base64URL、URLSearchParams 與 encodeURIComponent 的差異。
2025
03 POSTS
前端開發
E2E 測試現在選什麼：Playwright 與 Cypress 的實際差異
對照幾年前用 Cypress 的做法，說明 Playwright 為什麼變成多數新專案的預設選擇：真正的多瀏覽器支援、免費的平行執行、trace viewer 除錯，以及兩者在架構上的根本差異與各自仍然適合的場景。
其他筆記
現在怎麼 debug 手機網頁：從裝一堆工具到幾乎不用裝
對照 2022 年那套 scoop、iTunes、remotedebug-ios-webkit-adapter 的繁瑣設定，整理現在偵錯手機網頁的做法：Android 無線偵錯、iOS 的實際選項、on-device console、Playwright 裝置模擬，以及本機 HTTPS 的處理。
其他筆記
npm 發布流程
紀錄 Vue 2 元件的 npm 發布、dist-tag 與打包流程。
2024
02 POSTS
2020
02 POSTS
前端開發
Flexbox 對齊與彈性尺寸筆記
記錄 Flexbox 的主軸與交錯軸對齊、flex-direction、flex-wrap，以及 flex-grow、flex-shrink、flex-basis 等常用屬性。
前端開發
JavaScript 物件導向：建構函式、prototype 與繼承三步驟
整理 ES5 時代用建構函式加 prototype 手刻物件導向的完整流程——封裝屬性與方法、共用函式為什麼要掛在 prototype 上、以及繼承的三個步驟（call 借用母類別建構子、Object.create 接上原型鏈、修正 constructor 指向），並附上物件縮寫與計算屬性這兩個順便學到的 ES6 寫法。