花園

10 則筆記正在生長。清除篩選 ✕

行動裝置收尾雷合集：16px、自動聚焦與 passive 事件把整個站在手機與 iPad 上收尾的過程，攢下一小把「文件上不會告訴你、真機一碰就爆」的雷。集中記錄，每一條都是實際踩過的。輸入框字級 < 16px，iOS 自動放大頁面 Safari 的「貼心」：聚焦到字級小於 16px 的輸入框，整頁自動 zoom in 幫你看清楚——然後不會自動 zoom 回去。版面精心調的 …⇄ 1#踩雷 #前端 #ios 最後照顧 07-14
深色模式的防閃爍：一段必須跑在最前面的腳本深色模式的難點不在 CSS——變數換值而已——在於 SSR 的第一幀。伺服器不知道訪客偏好哪個主題，吐出的 HTML 只能預設淺色；等 JS 掛載後讀 localStorage 再切換，深色使用者就會看到「白屏一閃、再轉黑」。這一閃在深夜的螢幕上刺眼得像個 bug。解法：在首次繪製前釘住主題一段幾行的 inline…⇄ 1#前端 #nuxt 最後照顧 07-14
iPad 上拖不動的圖譜節點：touch-action 對 SVG 子元素無效首頁的知識圖譜可以拖曳節點——桌機上手感很好，iPad 上完全拖不動：手指一動，整頁跟著捲，拖曳中斷。教科書解法為什麼失效標準做法是對可拖曳元素設 touch-action: none，告訴瀏覽器「這個元素上的觸控手勢交給 JS，不要啟動捲動」。桌機的觸控模擬器一切正常——然後 iPad Safari 直接無視它。…⇄ 2#踩雷 #前端 #ios 最後照顧 07-14
程式碼走讀：目錄高亮，與一個永遠不亮的最後一章筆記頁右欄的目錄會跟著捲動高亮當前章節。第一版用 IntersectionObserver——教科書推薦的現代解法——然後在真實內容上翻了車，值得完整走讀一次。核心判定：最後一個過線的標題 ts NoteToc.vue（節錄） function recomputeActive(): void { let idx = …#程式碼走讀 #前端 #踩雷最後照顧 07-14
程式碼走讀：一個 composable 裡的樂觀更新與回滾筆記頁的rootnote-origin|澆灌按鈕背後是一個五十行的 composable，麻雀雖小，前端狀態管理的幾個經典題都在裡面。樂觀更新：先變臉、再對帳 ts useNoteStats.ts（節錄） async function water(): Promise<void { if (watered.value…⇄ 3#程式碼走讀 #前端 #rootnote 最後照顧 07-14
知識圖譜的實作：d3-force 算、Vue 畫、三種裝置三種互動圖譜頁是花園的招牌——所有筆記是節點、wikilinks-backlinks|wikilink 是邊，一張活的知識網。實作上最重要的決定是分工：d3-force 只負責算座標，DOM 由 Vue 綁定 SVG 來畫。讓 d3 直接操作 DOM 的教學很多，但那會跟 Vue 的響應式系統打架——各管各的，界面乾淨得多。 …⇄ 2#rootnote #前端 #資料視覺化最後照顧 07-14
編輯器的溫室工程：自動儲存、補全與一個吃字的 bug 後台的筆記編輯器是全頁雙欄：左邊寫、右邊markdown-pipeline|同管線預覽。它是我在這個專案裡對「寫作手感」投資最重的地方，幾個工程點值得記。自動儲存：debounce 之外的三個細節打字停頓 1.5 秒送一次 PATCH，這是基本款。魔鬼在邊角： - flush 時機——發佈前、離開頁面前，必須先把未…⇄ 3#rootnote #前端最後照顧 07-14
一條 markdown 管線：後台預覽與前台渲染禁止分家筆記用 markdown 寫，渲染發生在兩個地方：公開前台的文章頁、後台編輯器的即時預覽。這裡有一條我立得很早的紅線：全站只准有一條 markdown 管線。為什麼這麼嚴兩套實作的漂移是漸進且不可逆的：前台升級了語法高亮、後台忘了；後台的 wikilinks-backlinks|wikilink 樣式調了、前台沒跟…⇄ 3#rootnote #前端最後照顧 07-14
前端殼的三道客製縫：整頁、碎片、配色後端有 forge-monorepo|platform 套件，前端對應的是 web-kit——登入、版型、選單、主題這些每個後台都要的殼。難題跟後端不同：前端的客製需求是視覺的、瑣碎的、無孔不入的。如果每個 app 想改個顏色都要 fork 整個殼，套件就死了。我的答案是把客製收斂成三道明確的縫，由粗到細： 1. 整…⇄ 2#前端 #架構 #平台最後照顧 07-14
倉儲管理與 three.js：第一個吃平台的 app 種子WMS（倉儲管理系統）是平台基底的第一個真實消費者，也是transaction-runner|跨模組交易最重的使用者——容器、儲位、任務三個模組在一次入庫動作裡同生共死，AsyncLocalStorage 交易傳染那套設計就是被它逼出來的。前端有一塊我很喜歡的部分：three.js 的 3D 倉儲佈局。儲位、貨架、容…⇄ 1#project #前端種下 07-14