MUKI space*
Front-end Development,
Effective Note-Taking.
如何免費使用 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 仍然是一個合理的選擇...
用 Dify 和 Firecrawl 建構自己的知識庫
Dify 和 Firecrawl 是兩個強大的工具，正在改變知識庫的建構和管理方式。Dify 是一個開源的 LLM 工具，專注於知識管理和內容生產，提供開箱即用的模板和框架，並支持多種知識庫來源和第三方 API 的整合。Firecrawl 則是一個自動化資料抓取工具，能從多個來源提取資料並整理成適合的格式，方便用戶將網路公開資訊或企業內部數據納入知識庫，確保資料的更新和準確性。
通過結合 Dify 和 Firecrawl，用戶可以輕鬆建構和管理自己的知識庫。例如，使用 Firecrawl 提取 Next.js 官方文件資料，再利用 Dify 的功能來建立和管理知識庫。這種組合不僅提高了知識管理的效率，還降低了實現的難度，適合企業和個人使用。這樣的工具組合為知識庫建構提供了一個全新且高效的解決方案，讓知識獲取和應用更加簡單和便捷。...
使用 Ngrok 掛 API 代理出現 err_ngrok_6024 的解決方法
使用 Ngrok 免費版代理 API 時，因為前導頁導致出現 ERR_NGROK_6024 錯誤。這是因為 API 網址被導向前導頁，無法直接訪問 API 資料。由於 API server 是本機測試環境，無法修改 header 或使用攔截器解決。
可以透過 Chrome Extension Requestly 來解決此問題。安裝後，設定 HTTP 規則，添加 URL 規則：https://.ngrok-free.app/ 和 https://*.ngrok-free.app，並加入 ngrok-skip-browser-warning: true。這樣就能跳過 Ngrok 的介紹頁，成功取得 API 資料。此方法適用於本機開發，如需正式上線，建議使用 Ngrok 付費版。...
只用 ESLint 處理程式碼格式與規則，並在存檔時自動調整格式
ESLint 將於 2023 年 10 月起不再支援格式設定規則，建議使用 ESLint Stylistic 取代。Anthony Fu 將持續維護這些規則，使用者可安裝相關套件來保持程式碼格式的一致性。若需自動格式化功能，可在 VSCode 設定中加入 "eslint.run": "onSave"。
若需在開發網站時顯示 ESLint 警告，需安裝 vite-plugin-eslint 並修改 vite.config.js。安裝 ESLint 與相關插件後，設定 eslint.config.js 來管理規則。對於 Vue3 和 TypeScript 專案，需安裝特定版本的 ESLint 套件，並在 VSCode 中設定自動格式化。...
Warp：使用 AI 協作提高生產力的終端機，強大的筆記功能，讓我再也不用記指令啦
Warp 是一款利用 AI 提高生產力的終端機工具，取代了傳統的 iTerm 和 Oh My Zsh。它能自動補全指令，減少手誤，並提供指令筆記功能，讓使用者不再需要外部記錄工具如 Obsidian。Warp Drive 是其核心功能之一，允許用戶儲存和分享指令工作流，支持團隊協作，並採用靜態加密保障安全。
Warp 還有筆記功能，能直接執行筆記中的指令，方便管理複雜操作。主題設置中發現的台南紡織背景圖帶來驚喜。Warp 採取邀請制，使用邀請連結註冊可獲得神秘禮物。...
如何製作 GitHub issue 和 PR 的 template
公司專案從 GitLab 轉移到 GitHub，為了團隊協作更順利，建立了 PR 和 issue template。PR template 放在 .github 資料夾，檔名為 PULL_REQUEST_TEMPLATE.md。issue template 有 markdown 和 yml 兩種格式，yml 支援表單元件，推薦使用 yml。建立多個 issue template 時，資料夾命名為 ISSUE_TEMPLATE，並建立 config.yml 檔案。所有更改需推到預設 branch 才能自動載入 template。...
如何使用 GitHub 的 Actions 自動產生 Release 文件
公司從 GitLab 遷移到 GitHub，需重新設定自動生成 Release 文件。GitHub Actions 提供便捷性，內建 Release template 省去額外配置。需開啟專案權限，進入 Settings > Actions > General，調整權限並分別儲存。建立 .github 資料夾，放入 yml 檔案，設定 tags 格式為 v*.*.* 後推送，即可自動生成 Release。
發 Pull Request 時需設標籤，Release 文件會根據標籤分類。可自訂 release.yml 與標籤對應，發 PR 並設標籤後，Add Tag 並推送，workflow 自動生成 Release 文件。最後在 Actions 頁籤查看執行狀態，確保流程順利。...
Zeabur：簡單好用的一鍵部署服務，支援前後端與多語言，讓部署變得輕鬆簡單
Zeabur 是一個簡單好用的一鍵部署服務，能直接從 Github 部署專案，支援多種後端語言如 PHP、Node.js 和 Python，整合前後端，提升部署效率。Zeabur 是台灣唯一在 Product Hunt 獲得第一名的新創公司，提供 24 小時繁體中文客服，並與 Google Cloud 和 AWS 合作。
Zeabur 採用彈性付費機制，僅需支付實際使用的資源費用，透明公開。相比傳統虛擬主機，Zeabur 自動化部署更省時省力，適合個人和小型團隊。它支援多種後端語言和框架，提供一站式服務，並有免費試用一個月的贊助專案。...