把一些我覺得還不錯的套件給集合起來。
ICON
- Material-Icon Google 的 Icon
- heroicons 複製貼上即可用的 Icon
- iconmonstr 複製貼上即可用的 SVG
- fontawesomeicons 複製貼上即可用的 SVG
CSS
- Ant Design 做後台系統很有名的 UI library
- chakra-u 看起來還不錯的 UI library
- mui 用過 React 的應該都知道
- Tocas UI 我覺得很舒服的 UI library
- Milligram 提供輕量、舒服的現成樣式
- Bootstrap5 這個大家應該都知道，但還是貼一下。
- Bootstrap5-Examples 可以參考的 BS 範例，還不錯。
- Bootswatch 快速打造不同的 BS 主題
- Flex-Cheatsheet 快速查 Flex 屬性
- Grid-Cheatsheet 快速查 Grid 屬性
- Animista - CSS Animations on Demand CSS 動畫線上 Demo
- convertacolor 快速轉換顏色格式
- Box Shadow CSS Generator 陰影製造器
- color-gradient 製作漸層背景
- fontawesome fontawesome v5 版本
- animista 開箱即用的各種 CSS 動畫
Node.js
- request 讓你在 Node.js 上發出 request
- dotenv 讀取環境變數，好用！
- jest FB 開源出來的 unit test 的套件
- bcrypt 存密碼會用到的雜湊函式
- pm2 一個幫你在背景跑 process 的猛套件
- node-fetch 在 Node.js 上用 fetch
JavaScript
- convertsimple 把 JS 轉成 JSON 格式
- highlightjs 程式碼高亮樣式
- highlightjs-line-numbers.js 幫 highlightjs 加上行數的套件
- you-might-not-need-jquery 好用的 JavaScript 懶人包
- jQuery Quick API Reference jQuery 快速查表
- regex101 測試 RegExp 的匹配對象，很方便的網站！
- Manage HTML DOM 操作 DOM 的 cheet sheet
- CKEditor 5 強大的文字編輯器
- Event queue Event loop 的 Demo 網站
- jquery-loading 輕鬆做出 loading 效果！
- momentjs 操作 Date 的好幫手（已停止維護）
- dayjs 操作 Date 的好幫手
- date-fns 一樣跟日期有關（最厲害的應該是計算時間間隔的功能）
- greensock 不想寫用 CSS 寫動畫？試試看這個吧
- swiperjs 提到幻燈片時最常出現的名字
- echarts 開箱即用的圖表工具
- pdf.js 把 pdf 轉成 canvas
- jspdf 輸出 pdf 的工具
- fabric.js 讓 canvas 更好操作的工具
React
- React-loading-overlay 在 React 上用的載入效果
- react-md-editor 很好用的 markdown 編輯器
- classnames 管理 class name 的好東西
- formik 表單處理的小幫手
- yup 表單驗證的小幫手
- react-card-flip 卡片翻轉效果，方便！
- React Icons 必備的 icon 神器
- @tanem/react-nprogress 覺得官方文件很優秀的進度條效果
- spinners-react 簡單、輕量、好用的 Spinner
- React Select 方便處理 SelectBox 的套件
- notistack 彈跳通知好幫手
- idle-timer 靠它來做閒置登出的功能
- react-loader-spinner 漂亮的 loading（一）
- react-spinners 漂亮的 loading（二）
React Native
- react-native-vector-icons Icon 必裝
- react-native-bouncy-checkbox 小清新的 checkbox！
- react-native-google-places-autocomplete google 搜尋地址神器
- React Native Elements UI 庫~
- lottie-react-native 很厲害的動畫圖案
CDN
- jQuery 就是 jQuery
- font-awesome 好用的 font-awesome CDN
- moment.js 操作 Date 的好幫手
MySQL
- Visual JOIN 視覺化的 SQL join 語法
API
- mocky 非常好用的自製 API
- reqres 可以直接使用，也很簡潔的 API
- restcountries 查詢國家資料的 API
- Twitch API 就是 Twitch，但它的 API 文件實在有點雜，所以貼在這比較方便查閱。
- picsum 假圖產生 API
- gorest 測試用 API
- bigdatacloud 可以用經緯度查地址的 API（縣市 / 區域）
- yelp 餐廳相關的 API
圖片
- Pexels 圖片素材
- pixabay 圖片素材
- unDraw MTR04 官網的圖片素材
- loading-svg 一些免費 loading SVG 圖片。
其他
- frontend tools 前端大集結！？
- DirtyMarkup 把壓縮過後的原始碼打回原形
- jsonlint 檢查 JSON 格式是否合法
- OG 分享偵錯工具 檢查 SEO 的 OG 效果
- Color Hunt 需要顏色上的靈感嗎？來這裡吧！
- Colors 找單一顏色的話參考這裡
- Apache JMeter 用來對 server 做壓力測試的好工具
- chmod 計算機 Linux 的權限設定。懶得自己算的話可以參考這裡
- stackblitz 跟 Codesandbox 差不多的東西
- prettier VS Code 排版必備
- whiteboardfox 線上畫圖的好東西
- sketchpad 更好用的線上畫板
- snappify 幫你的 code 拍出美顏秀秀
- tree generator 線上產生資料夾結構文字
- Z-library 沒錢買原文書的好網站
- Favicon Generator 快速產生 favicon 的圖片與原始碼