MUKI space*
Front-end Development,
Effective Note-Taking.
喜歡研究手帳術與時間管理，
寫過 WordPress 與手帳書籍的
Notion 小工具 四款各具特色的番茄鐘
番茄鐘是一種有效的時間管理工具，本文介紹四款 Notion 小工具。StudyWithMe.io 提供漂亮背景圖與內建音樂，無需註冊即可使用。Pomofocus.io 知名度高，介面簡單，適合多平台，能新增待辦事項。Pomodor 設計簡潔，支持循環設定，不需註冊會員。PomodoroTimer 特色在於像素文字風，具 Webhook 功能，適合創建自動化服務。
這些工具均免費且可嵌入 Notion，適合學生、工作者提高生產力。根據需求選擇適合的工具，能更有效管理時間。...
如何在 Vue.js 中不使用 CSS 框架(ex.Element Plus )，自行寫出表格和分頁功能
JavaScript 和 CSS 框架常被用來加速網站開發，但不一定需要使用。Vue.js 可以不依賴 CSS 框架，自行實現表格和分頁功能。首先安裝 vue-router，設定路由。接著可使用假資料或 API 取得資料，並在表格中顯示第一頁內容。使用 vue-router 實現頁碼，透過 query 參數控制頁面顯示。監聽 route.query.page 變化，根據新頁碼更新資料。完整範例可在線上 DEMO 網址查看，提供了無需 CSS 框架的實作方式。...
7. 使用 MUI X 的 Data Grid 製作台股報價資料
使用 MUI X 的 Data Grid 可以輕鬆製作台股即時報價表格。透過 MUI 的分頁元件和資料分割功能，可實現換頁效果。Data Grid 提供自動排序、索引和過濾等功能，無需額外程式碼。雖然免費版功能有限，但對於開源專案來說已足夠使用。
安裝 @mui/x-data-grid 後，只需定義資料欄位並帶入資料，即可展現強大效果。客製化方面，可調整頁碼顯示與資料顏色，甚至能限制每頁顯示筆數。MUI X 的功能強大，雖然文件複雜，但仍值得使用。...
使用 Element Plus 分頁處理前端的大量資料，並使用工廠函式優化程式碼
通常在網站上顯示大量資料，前端會從後端 API 獲取分頁資料，但若後端未提供分頁功能，可使用 Vue3 與 Element Plus 實現前端分頁。Element Plus 的 el-table 和 el-pagination 元件需自行處理。
利用工廠函式 (Factory Function) 可優化重複的分頁功能。工廠函式可接收參數並返回需要的資料，減少重複程式碼。透過工廠函式建立分頁狀態、處理資料過濾及跳頁功能，達到重用與減少冗餘程式碼的目的。...
6. 完善 Server actions 至前端呼叫 API 的錯誤處理
在 Server 使用 throw new Error 不能讓前端接收錯誤，需在後端捕獲錯誤並傳到前端。用 JSON.stringify 和 JSON.parse 處理錯誤資料，讓前端可接收物件格式錯誤。API 成功或失敗都需返回資料給前端，提升使用體驗。
使用 Material UI 的 Fade 和 CircularProgress 增加前端提示和 loading 功能。Next.js 的 error.tsx 可處理未捕獲的錯誤，但會停止渲染，適合處理意外錯誤。自己能掌控的錯誤，建議用 catch{} 處理，以免影響其他功能。...
用 Next.js 的 Server Components 時，該用 fetch() 還是 axios 呼叫 api？
在 Next.js 的 Server Components 中，選擇使用 fetch() 或 axios 呼叫 API 是常見的問題。fetch() 是內建於瀏覽器的函式，支援 Promise 和 async/await 語法；axios 是第三方函式庫，提供額外功能如請求進度監聽和自動 JSON 轉換。Next.js 特別針對 fetch() 進行優化，包括自動記憶請求、資料快取和重新驗證功能，使 fetch() 在 Server Components 中更具優勢。
由於這些優化，建議在使用 Server Components 時考慮使用 fetch()。切換至 fetch() 時需注意將回傳資料轉成 JSON 格式、使用 URLSearchParams() 處理參數，以及檢查 response.ok 以確保沒有 HTTP 錯誤。選擇哪種方法應根據需求和偏好決定。...
做工的人
阿祈和阿欽兄弟在 11 年前的公共工程中結識了昌哥和阿全，成為好友。阿祈發現兒子小傑疏遠他，阿全無家可歸，昌哥因交通罰單求助律師方淼。阿祈希望參加實境節目《幸運到誰家》圓發財夢。
電影版重現了電視劇的劇情，阿祈再次追求發財夢，卻因選擇錯誤失去獎金。小傑最終理解父親，阿欽默默照顧大家。結局在小傑婚禮上，大家重聚，阿祈和阿欽的友情令人感動。...
5. 串接 TradingView 開發的圖表套件，並透過 Server 端呼叫外部的富果 API
「股票小特助」第五篇介紹如何串接 TradingView 圖表套件，並透過 Server 端呼叫富果 API。首頁功能包括一年內的大盤指數及台股即時報價。使用富果 API 提供的行情和交易 API，並建議未開戶者使用台灣證券交易所的 openAPI。
使用 TradingView 的 Lightweight Charts 套件，方便地將富果 API 的股市資料轉換成圖表。Next.js 的 Server Components 用於從 Server 端呼叫 API，提高首次繪製速度及 SEO。兩種 API 呼叫方法：'use client' 和 'use server'，分別適用於前後端的資料處理與畫面渲染。...
在 Notion 使用熱力圖工具 Heat Map 呈現各種打卡追蹤數據
在數位化時代，追蹤數據變得重要。使用 Notion 的 Heat Map 工具能直觀呈現健康、效率等數據。Heat Map 以顏色深淺顯示數據量，適合用於 Habit Tracker。Life of Discipline 網站提供的 Habit Tracker widget 可嵌入 Notion，免費版限 5 個，付費版無限。
註冊後可選 Number 或 Checkbox 格式追蹤習慣，並嵌入 Notion。也可用 HabitGrids APP 同步追蹤，支持 iOS。這些工具讓數據追蹤更便捷，幫助識別模式與趨勢，提升追蹤效率。...