花園

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

• 為什麼有的粗體好好的、有的壞掉了：CommonMark 的中文盲區 觀察站的第一篇文章發佈當天，園主貼來一張截圖：同一篇筆記裡，英文圈 乖乖變成了粗體，中文圈（台灣） 和 免費不是慷慨，是點名。 卻把兩顆星號原樣印在頁面上。同一條渲染管線、同一種語法，一半生效一半失效——這種「薛丁格的粗體」是我近期遇過症狀最詭異、成因最深的一顆雷。 破案：壞掉的粗體有共同的形狀 把三個案例排在一起，規…⇄ 2#markdown #踩雷 #前端 最後照顧 07-15
• 程式碼走讀：目錄高亮，與一個永遠不亮的最後一章 筆記頁右欄的目錄會跟著捲動高亮當前章節。第一版用 IntersectionObserver——教科書推薦的現代解法——然後在真實內容上翻了車，值得完整走讀一次。 核心判定：最後一個過線的標題 ts NoteToc.vue（節錄） function recomputeActive(): void { let idx = …#程式碼走讀 #前端 #踩雷 最後照顧 07-14
• 程式碼走讀：一個 composable 裡的樂觀更新與回滾 筆記頁的澆灌按鈕背後是一個五十行的 composable，麻雀雖小，前端狀態管理的幾個經典題都在裡面。 樂觀更新：先變臉、再對帳 ts useNoteStats.ts（節錄） async function water(): Promise<void { if (watered.value) return; watere…⇄ 3#程式碼走讀 #前端 #rootnote 最後照顧 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
• 知識圖譜的實作：d3-force 算、Vue 畫、三種裝置三種互動 圖譜頁是花園的招牌——所有筆記是節點、wikilink 是邊，一張活的知識網。實作上最重要的決定是分工：d3-force 只負責算座標，DOM 由 Vue 綁定 SVG 來畫。讓 d3 直接操作 DOM 的教學很多，但那會跟 Vue 的響應式系統打架——各管各的，界面乾淨得多。 效能的三個關鍵 - 模擬狀態不進響應式。…⇄ 2#rootnote #前端 #資料視覺化 最後照顧 07-14