目前在用的工具#

最近整理專案時發現，有些工具已經不知不覺用了很久，成為開發流程中不可或缺的一部分。記錄一下這些目前還在使用的工具，主要是給自己做個備忘，順便分享一些實際使用心得。

都是在實際專案中經過考驗的工具，有些可能不是最熱門的選擇，但確實解決了我遇到的具體問題。

讓網站活起來的互動元件#

用戶進到網站，第一眼看到的往往就是這些會動、會響應的元素。輪播圖滑得順不順？彈窗會不會跑版？動畫效果是驚艷還是卡頓？這些細節直接決定了用戶會不會繼續停留。

• Splide.js:

  • 輕量級、無依賴的現代輪播套件，支援觸控滑動和多種顯示模式。
  • 安裝： npm install @splidejs/splide 或直接使用 CDN
  • 適用場景： 產品展示、圖片輪播、內容滑動展示
  • 個人心得： 極其輕量但功能完整，容易客製化，效能比 Swiper 更好，幾乎適用於所有輪播需求。CSS 變數支援讓樣式調整變得非常直覺。

• Floating UI:

  • 用於創建定位浮動元素的低級工具庫，是 Popper.js 的繼任者。
  • 安裝： npm install @floating-ui/dom
  • 適用場景： Tooltip、下拉選單、彈出框、上下文選單
  • 個人心得： 無論是做 tooltip、dropdown 還是複雜的上下文選單，都能精確定位且處理各種邊緣情況。與各大框架的整合也很順暢，是建構高品質 UI 元件的基礎工具。

• Canvas Confetti:

  • 輕量級的五彩紙屑效果生成庫，可為網頁添加慶祝或成就解鎖的視覺效果。
  • 個人心得： 只有不到 4KB，卻能創造出令人驚艷的粒子效果，用於慶祝頁面或成功提示時非常適合，簡單幾行代碼就能實現高質量的互動體驗。

• Motion One:

  • 現代化的網頁動畫庫，基於 Web Animations API，提供流暢高效的動畫效果。
  • 個人心得： 比 GSAP 更輕量，同時保持了極佳的性能和流暢度，API 設計簡潔明了，非常適合需要高品質動畫但又不想引入大型庫的專案。

圖示選擇不再是難題#

還記得以前為了找一個合適的圖示要翻遍各種網站嗎？或是為了統一風格要在 Font Awesome、Material Icons 之間糾結？現在有更好的解決方案了。

• Iconify:

  • 超過 150,000 個開源圖示的集合，支援所有主流的圖示集，如 Material Design、Font Awesome 等。
  • 個人心得： 按需加載機制讓它比其他圖示庫更有效率，整合各種框架的組件讓使用變得極其簡單，是我目前最推薦的圖示解決方案。

• Heroicons:

  • 由 Tailwind CSS 團隊精心製作的 SVG 圖示庫，提供 316 個高品質手工圖示，有 Outline、Solid、Mini、Micro 四種風格。
  • 安裝： npm install @heroicons/react 或 npm install @heroicons/vue
  • 適用場景： 需要風格統一、品質精良的圖示，特別適合使用 Tailwind CSS 的專案
  • 個人心得： 圖示設計非常精緻，風格統一性很好。雖然數量不如 Iconify 龐大，但每個圖示都經過精心設計，很適合追求品質勝過數量的專案。React 和 Vue 的整合也很順暢。

讓我每天都離不開的開發神器#

有些工具用了就回不去了。它們可能不是最熱門的，但絕對是讓我工作效率翻倍的秘密武器。特別是當你習慣了鍵盤操作流之後，會發現世界變得不一樣了。

• Homerow:

  • macOS 鍵盤導航工具，允許用戶通過鍵盤快捷鍵來點擊、滾動和執行任務，完全無需滑鼠操作。
  • 個人心得： 對於習慣鍵盤操作的開發者來說是必備工具，類似於瀏覽器的 Vimium 擴充套件，但適用於整個 macOS 系統。能大幅提升工作效率，減少手部在鍵盤和滑鼠間的移動。

• Todiagram:

  • 視覺化 JSON 結構的工具，幫助開發者快速理解和分析複雜的 JSON 資料。
  • 個人心得： 特別適合處理複雜的 API 回應或大型配置文件，透過直觀的視覺化呈現，讓 JSON 結構更容易理解，大大提高了除錯和開發效率。

• Raycast:

  • macOS 上的應用程式啟動器和生產力工具，整合了文件搜尋、剪貼板管理、文字片段、視窗管理等功能。
  • 安裝： 直接從官網下載或 brew install raycast
  • 適用場景： 應用程式快速啟動、文件搜尋、剪貼板歷史管理、文字片段擴展、視窗管理
  • 個人心得： 用過就回不去的 macOS 工具，特別是剪貼板歷史和文字片段功能超實用。豐富的擴充功能生態讓它幾乎可以取代很多單一功能的小工具。唯一缺點是只支援 macOS，期待 Windows 版本。

寫在最後#

前端工具的世界變化很快，每個月都有新的「革命性」工具出現。但經過這幾年的摸索，我發現最重要的不是追最新的，而是找到真正適合自己工作流程的工具。 上面推薦的這些工具，有些可能不是最熱門的，但它們都在我的實際專案中證明了自己的價值。工具只是手段，最終還是要回到解決問題本身。

💭 備註：工具使用是很個人的事情，適合我的不一定適合所有人。這份記錄會隨著時間持續更新。