花園

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

• 程式碼走讀：一個 composable 裡的樂觀更新與回滾 筆記頁的澆灌按鈕背後是一個五十行的 composable，麻雀雖小，前端狀態管理的幾個經典題都在裡面。 樂觀更新：先變臉、再對帳 ts useNoteStats.ts（節錄） async function water(): Promise<void { if (watered.value) return; watere…⇄ 3#程式碼走讀 #前端 #rootnote 最後照顧 07-14
• 程式碼走讀：計數器為什麼不能 load–mutate–save 這個站的澆灌與到訪計數背後是一張極簡的表：noteId、views、waters。它的 repository 是全站唯一寫原生 SQL 的地方，值得走讀一次「為什麼」。 錯誤版本：教科書寫法的競態 DDD 的直覺寫法是 load–mutate–save： ts const stats = await repo.find…⇄ 3#程式碼走讀 #資料庫 #rootnote 最後照顧 07-14
• 與 AI 設計師協作：交接包、拍板權與閱後即焚 這個站的視覺不是我設計的——是 AI 設計師出的稿，我實作。幾輪合作下來長出一套穩定的流程，記下來，因為「怎麼跟 AI 協作」本身就是這個時代值得種的筆記。 交接包的形狀 每個設計案交付一個資料夾：一份 README（設計決策、規格、色票對照、硬約束清單）加一份瀏覽器直開的 mock HTML。README 負責「為什…⇄ 1#rootnote #心路 #流程 最後照顧 07-14
• 結緣、澆灌與一封確認信：匿名網站的信任設計 這個站沒有會員系統——訪客是匿名的。但有兩個功能需要「某種程度的身分」：訂閱常青通知，和澆灌的一人一票。怎麼在不建帳號的前提下設計信任，是我在這個站上最喜歡的一組取捨。 訂閱：double opt-in 填了信箱不算訂閱，點了確認信裡的連結才算。這不是形式主義：沒有這一步，任何人都能拿別人的信箱亂訂，你的系統就成了騷擾…⇄ 7#rootnote #nestjs #安全 最後照顧 07-14
• Wikilinks 與 backlinks：用算的，還是落表？答案是一半一半 花園的靈魂是 雙向連結——我在筆記裡寫 某篇的slug，那篇筆記的頁尾自動長出「誰連到我」。實作上第一個要回答的問題：backlinks 是算出來的還是存起來的？ 第一版：純用算的 語法解析是 domain 的純函式：從 body 抽出所有 wikilink slug。backlinks 就是反向索引——把所有已發佈筆…⇄ 3#rootnote #ddd #架構 最後照顧 07-14
• Rootnote：這座花園本身就是一件作品 你現在看的這個網站，是我為了學 SSR 與 SEO 實務而種下的專案——與其做一個假想的部落格範例，不如讓「學習的載體」直接變成「學習的成果」。所以這座花園的每一個功能，背後都對應一段真實的取捨。 為什麼叫 Rootnote root × note——根與筆記，諧音 footnote（註腳）。個人網站說到底就是一個人的…⇄ 12#project #rootnote #心路 最後照顧 07-14
• 知識圖譜的實作：d3-force 算、Vue 畫、三種裝置三種互動 圖譜頁是花園的招牌——所有筆記是節點、wikilink 是邊，一張活的知識網。實作上最重要的決定是分工：d3-force 只負責算座標，DOM 由 Vue 綁定 SVG 來畫。讓 d3 直接操作 DOM 的教學很多，但那會跟 Vue 的響應式系統打架——各管各的，界面乾淨得多。 效能的三個關鍵 - 模擬狀態不進響應式。…⇄ 2#rootnote #前端 #資料視覺化 最後照顧 07-14