MUKI space*
Front-end Development,
Effective Note-Taking.
喜歡研究手帳術與時間管理，
寫過 WordPress 與手帳書籍的
如何使用純 CSS 製作固定於右下角的 CTA 按鈕
本文介紹如何使用純 CSS 製作固定於右下角的 CTA 按鈕，無需依賴 JavaScript。主要方法包括使用 CSS 的 `position: sticky` 和 `position: fixed` 屬性來固定按鈕位置，並利用 `place-self: end` 來調整按鈕在網格中的定位。這樣的設計不僅減少頁面載入時間，還能降低維護成本。
此外，文章還介紹了如何使用 CSS 動畫來增強按鈕的視覺效果，透過 `animation-timeline: scroll()` 語法實現平滑過渡效果。由於某些瀏覽器尚未支援該語法，因此使用 `@supports` 進行兼容性檢查。這些技術使得在不使用 JavaScript 的情況下，仍能創建出互動性強且視覺效果豐富的按鈕。...
我的 2025 年手帳：SUN-STAR MOOMIN 姆明家族 週計畫 開箱介紹
SUN-STAR MOOMIN 姆明家族手帳本以高質感的燙金封面和不喧賓奪主的插畫風格吸引使用者。插畫採用黑白線條和清爽配色，與拼貼風格完美融合，提升手帳的質感，讓使用者在書寫時不受干擾。B6 尺寸的手帳本便於攜帶，適合記錄日常生活，橫式週間格式設計方便查看整週計畫，能有效管理時間。
MOOMIN 手帳本的紙質支持鋼筆書寫，不會暈染，且微粗的紙質適合油性筆書寫，讓使用者感到滿意。這本手帳本不僅具備實用性，還帶有懷舊的情感，成為使用者在 2025 年的理想選擇。...
底層邏輯 <作者：劉潤>
《底層邏輯：看清這個世界的底牌》由劉潤撰寫，探討我們如何在複雜的世界中看清事物本質。書中強調透過「底層邏輯+環境變數」來理解真相，並提倡多角度觀察問題，避免偏見。書中還提到「共贏與感激」和「長期積累與效應」，鼓勵在商業合作中追求雙贏，並提醒成功是長期堅持的結果。
讀者在閱讀後，對自身思考方式有了新的認識，學會從多角度分析問題，並以共贏心態面對合作。這本書不僅提供了知識增長，更是一種心態轉變，幫助讀者在面對挑戰時做出更深刻的判斷和選擇。...
在 Notion 製作 16 強淘汰賽的樹狀圖
有人希望在 Notion 中創建 16 強淘汰賽的樹狀圖，這種圖表類似於體育賽事的賽程表。建議使用心智圖工具如 Gitmind，因其便於修改樣式並匯出圖片放入 Notion。若不想依賴外部工具，可以嘗試使用 Mermaid 語法。雖然 Mermaid 支援心智圖，但控制分支方向有限，建議改用 flowChart 語法，雖然需要製作兩張圖表以達到左右延伸的效果，但這方法可在 Notion 中直接編輯。
最後，提供了 Mermaid 樹狀圖模板的下載鏈接，鼓勵有興趣的人在 Notion 中複製並使用這些模板。使用時需切換 Mermaid 的 block 模式為 code 以便修改內容，並遵守版權使用說明。...
在 CSS 建立響應式輸入欄位的方法
本文介紹了 3 種在 CSS 中建立響應式輸入欄位的方法。首先，使用 `min()` 函數可以根據螢幕尺寸動態調整欄位寬度，確保欄位不會超出容器邊界。其次，`display: flex` 提供更複雜的動態寬度調整，適合多元素的自適應排列。最後，`max-width` 方法透過限制最大寬度，並設置 `width` 為 100%，在不同螢幕上保持彈性。這些方法各有優缺點，`min()` 和 `max-width` 簡單易用，而 `flex` 提供更高的彈性但語法較複雜。
這些方法的範例代碼已放在 CodePen 上，讀者可以透過調整父層寬度觀察輸入欄位的變化。這三種方法能有效地提升表單在各種裝置上的美觀性和實用性，適合不同的開發需求和場景。...
使用 Barrel Files 的好處與大多數人不推薦的原因
Barrel Files 是一種用於簡化模組匯入的技術，通過匯總其他模組，讓程式碼更簡潔易於管理。使用 Barrel Files 可以有效管理模組，提升程式碼的可維護性，並且可以隱藏內部實作的細節。然而，Barrel Files 也存在一些缺點，如可能導致循環引用問題，影響 Tree Shaking 的效果，並使依賴關係變得模糊，進而影響性能和測試的隔離性。
是否應該使用 Barrel Files 是一個有爭議的問題。有些開發者喜歡其結構化優勢，而另一些人則擔心其可能拖慢網站速度並增加測試難度。在考慮使用 Barrel Files 時，需要根據專案的規模和模組之間的依賴關係來做出最佳選擇。總之，Barrel Files 可以簡化匯入匯出，但並非萬能，需謹慎評估後再決定是否採用。...
使用 ts-rest 與 Zod 定義 API 合約和進行資料驗證
本文介紹如何使用 ts-rest 與 Zod 來建立型別安全的 API 合約及進行資料驗證。 ts-rest 是一個專為 TypeScript 設計的工具，能夠幫助開發者輕鬆定義和管理 API 合約，確保前後端的一致性。 Zod 則是一個資料驗證套件，能在執行階段驗證資料的完整性和正確性。文章提供了一個完整的前後端範例，後端使用 Node.js 搭配 Express 框架，前端使用 React.js，並詳細介紹了如何定義 API 路由和使用 Zod 驗證資料。
文章中描述的開發步驟包括：首先使用 ts-rest 定義 API 合約，確保每個 API 路由都有明確的類型定義；接著使用 Zod 驗證資料結構，確保符合預期格式。後端部分，使用 Express 框架建立 API 路由，並透過 ts-rest 將 API 合約與 Express Server 連接，實現資料處理的邏輯。前端則透過 ts-rest 呼叫後端 API，並展示如何在 React 中實作這些功能。文章最後提供了 CodeSandbox 的程式碼範例，供讀者進一步探索和測...
如何免費使用 Algolia Search 服務，免外掛免客製化，美觀又好用
Algolia DocSearch 是一項專為技術文件和部落格提供的免費搜尋服務，使用這項服務不需要安裝 WordPress 外掛或自訂 CSS，實現一鍵安裝且開箱即用。要使用這項服務，需到 Algolia DocSearch 官網申請，經過人工審核後，若符合技術類別，便可獲得使用權限。這項服務提供美觀的搜尋介面和無限次的搜尋次數，非常適合流量不高的技術部落格。
申請成功後，Algolia 會自動為用戶新增一個應用程式，並提供 appID 和 apiKey，讓用戶可以輕鬆整合到網站。DocSearch 的搜尋框樣式統一，建議使用者只需調整其位置即可。若需要重新爬取網站內容，可以透過 Algolia 的後台主動發起爬蟲操作。對於需要高自由度和自訂搜尋畫面的人，可能更適合使用 Algolia 的付費服務。無論選擇哪種方案，Algolia 的核心搜尋功能都能帶來優質的使用體驗。...
什麼是 ts-rest？論 TypeScript Interface 的局限性與前後端導入 ts-rest 的優缺點
在前後端開發中，使用 TypeScript Interface 來定義 API 型別存在一些局限性，如前後端型別不一致和型別驗證不嚴謹等問題。這些問題在專案變得複雜時尤其明顯，因為 API 回應資料來自外部服務，無法保證每次都符合定義的型別。為了解決這些問題，ts-rest 提供了一種自動化的型別同步工具，能夠在前後端之間自動同步 API 型別，並結合 Zod 進行動態驗證，確保資料完整性。
然而，ts-rest 的最佳使用方式是前後端共同導入，這在台灣的產業生態中並不容易實現。即便如此，前端單獨導入 ts-rest 仍能透過 Zod 提供的型別驗證機制，減少錯誤發生的機率，相較於手動建立 TypeScript Interface，ts-rest 能夠提供更強大的型別檢查與資料驗證，特別適合大型或 API 變動頻繁的專案。儘管如此，對於小型或型別驗證需求不高的專案，手動建立 TypeScript Interface 仍然是一個合理的選擇...