"JavaScript"
- JS/TS 平台適配
CORS 限制、Service Worker 攔截、SPA 路由變換偵測 — 瀏覽器環境中 SDK 需要處理的平台特殊問題
- 客製 UI 留 framework 邊界外、用 CSS 控制視覺位置
Svelte / React 等框架對自己管轄的 DOM 子樹有完整渲染週期 — 客製 UI 注入這個子樹會被框架重繪清掉。本文展開「邊界外 + CSS 視覺定位」這條策略：為什麼 framework 會清外來節點、CSS 怎麼達到注入想要的視覺效果、什麼時候這條策略不適用。
- 排版精度的工具選擇：CSS-only vs JS-assisted
CSS 適合 build-time 可決定的 layout、JS 適合 runtime 才知道的尺寸與 DOM 移動。混淆兩者會讓 layout 跟 framework 渲染週期競爭。本文展開選擇規則。
- JS 操作 framework 元件：邊界辨識與安全規則
操作 framework 管的 DOM 前先界定『動什麼、邊界在哪、state 由誰維護』。本文展開邊界辨識的決策樹、整節點 reparent 的具體 do/don't 規則、灰區操作的 fail-safe 設計。
- Selector 精準度：讓 query 只命中你想要的元素
JS 的 DOM query 是 sanity 防線、不是優化選項。從『起點 / 範圍 / 過濾』三層收斂、避免誤命中、避免未來頁面結構變動讓 query 撈到不該撈的東西。本文是 selector 設計的完整指引。
- runtime 量測模式統一
對齊基準上的所有元素、要嘛全部寫死、要嘛全部用 ResizeObserver 量測 — 不要混搭。混搭時某些字型 / theme 變化會打破對齊、且難以重現。
- 以 class toggle 取代 inline `display: none !important`
JS 用 `el.style.setProperty('display', 'none', 'important')` 是低層次 hack。在 CSS Layers 環境下、用語意化 class + JS toggle 可以更乾淨、更易 debug。
- MutationObserver 範圍與觸發頻率：監聽最少必要的變動
MutationObserver 是非同步監聽工具、跟同步 selector 是不同議題。範圍寬會頻繁觸發、option 勾多會在不關心的變動上跑邏輯、apply 自己改 DOM 會觸發無限循環。本文是 observer 設計的完整指引。
- setTimeout 輪詢換 MutationObserver
等元素出現的場景、用 MutationObserver 監聽 DOM 變化、看到目標就 disconnect — 沒延遲、CPU 不被輪詢吃。本文展開兩種等待機制的差異。
- Init function 是 orchestrator、職責拆出獨立 function
一個 init function 同時做多件事 → 按職責拆成多個獨立函式、各自有清楚的 input / output、init 退化為組合各職責的 orchestrator。Debug 時知道哪個壞了、也容易單獨重用。
- Reactive 監聽器的效能 audit：跨 listener 類型盤點觸發頻率
MutationObserver / ResizeObserver / event listener 各自的觸發頻率怎麼盤點。本文是效能 audit 視角 — 找問題用、跟 #29 (observer 設計指引) 互補不重複。
- Runtime 計算成本：每筆迭代與正則
Scope filter 對每筆結果跑 regex — 結果數量大時成為 frame budget 的主要消耗。本文盤點此類「每筆迭代 + per-item 計算」的風險點與評估方法。
- 動態 DOM 移動時的 focus 管理
Filter slot 跨 viewport 搬節點、scope filter 隱藏結果 — 這類 DOM 變動會讓鍵盤 focus 跑掉或停在不可見位置。本文盤點動態 DOM 對 focus 的影響與檢查方法。
- Pattern：Document 全文件 query
`document.querySelector` 從整個頁面找元素 — 是探索期與一次性 script 的合理工具、不是 production 客製的預設。本文展開這個 pattern 的適用邊界。
- Pattern：元件根變數 query
把元件根 `var shell = document.querySelector('.shell')` 一次存變數、之後所有 query 從 shell 開始 — 是 production 客製的預設起點。本文展開這個 pattern 的設計細節與邊界。
- Pattern：起點當函式參數
把元件根當函式參數傳入 — `function setup(shell) { shell.querySelector(...) }`、外部呼叫 `forEach(setup)` 處理多實例。本文展開純函式設計與多實例支援的取捨。
- Pattern：closest 反向找根
事件處理時用 `e.target.closest('.shell')` 從事件目標反向找元件根 — 適合動態元件、SPA 路由切換、事件委派場景。本文展開反向定位 pattern 的應用邊界。
- Pattern：DOM attribute idempotency 標記
用 `:not([data-x])` 過濾 + 處理後 `setAttribute('data-x', 'true')` 保證每元素只處理一次 — 是 production apply 函式的預設 idempotency 工具。本文展開命名、生命週期、跟 framework 共處的設計細節。
- Pattern：WeakMap idempotency 紀錄
用 `WeakMap` 紀錄已處理的元素 — 不污染 DOM、適合第三方 library、跟 framework 衝突場景。本文展開 GC 行為、debug 替代方案、跟 attribute 標記的取捨。
- Pattern：跨 slot 同節點搬遷
Stateful UI 在兩個 slot 之間用 `appendChild` 搬同一個 DOM 節點、不複製兩份 — 避免 state 分歧。本文展開搬遷 pattern 的設計細節與適用邊界。
- CSS / JS Boundary — CSS / JS 邊界與 specificity 處理
frontend-with-playwright reference：CSS-only vs JS-assisted 判準、class toggle 取代 inline style、CSS layers 取代 specificity 戰、variable 單一定義位置、檔案拆分。
- Frontend with Playwright — SKILL 入口
框架無關的前端開發 + Playwright 驗證 SKILL 入口：三大支柱、六大原則速查、六份情境 reference 的觸發路由。
- Hugo 部落格側邊章節導航 (TOC) 完整實現指南
Hugo 側邊章節導航的實作：滾動高亮當前位置、手機版回頁首按鈕、響應式適配。