不可錯過的實用前端工具，你知道幾個？
又到周五啦，提前祝大家周末愉快!今天來分享一些實用的前端工具!
1. Small Dev tools
Small Dev Tools 是一個前端工具網站，包含了很多實用的功能，比如JSON解碼器、JSON格式化程序、UTF8編碼、Base64編碼、Base64解碼、CSS格式化程序、CSS壓縮器等。
官網：https://smalldev.tools/
2. Carbon
Carbon 是一個在線工具，可以生成漂亮的不同風格的代碼圖片。
官網：https://carbon.now.sh/
3. UI Design Daily
UI 設計日報，提供免費優質的 UI 資源。
官網：https://www.uidesigndaily.com/
4. Color Hunt
ColorHunt，即顏色獵人，是一個在線設計配色的網站，其最大的特點就是使用飽和度調配配色方案。每天會根據瀏覽量進行更新排版，并可以直接使用。
官網：https://colorhunt.co/
5. SCHEME COLOR
SCHEME COLOR 是一個在線的配色工具網站，可以根據顏色、類型等查找合適的配色方案。
官網：https://www.schemecolor.com/
6. Keyframes
Keyframes 可以用來創建動畫、陰影和使用顏色，幫助我們編寫更好的CSS。
官網：https://keyframes.app/
7. Design Resources
Design Resources 是一個設計資源的集合。
官網：https://www.designresourc.es/
8. Omatsuri
Omatsuri 是一個開源項目，包含12個實用的前端工具。
官網：https://omatsuri.app/
9. UI Snippets
UI Snippets 是一個前端動畫合集，可以通過右鍵點擊想要的動畫直接復制對應的 CSS 或 SCSS 代碼。
官網：https://ui-snippets.dev/
10. Pattern CSS
Pattern CSS 可以用漂亮的圖案填充空白背景。
官網：https://bansal.io/pattern-css
11. Can I use
Can I use 可以用來查詢 HTML5、CSS、JS、SVG 在各種流行瀏覽器中的特性和兼容性。
官網：https://caniuse.com/
12. CSS Gradient
CSS Gradient 是一個用來快速方便的創建 CSS 漸變的網站。
官網：https://cssgradient.io/
13.CSS matic
CSS matic 是一個 CSS 工具，目前包含4個很有用的工具，分別是：支持各種顏色和透明度的漸變工具，使用漸變工具，可以創建漸變平滑的色彩變化效果和微妙的透明膠片;邊框圓角工具可以幫助你方便的實現需要的圓角效果;噪聲紋理可以幫助你創造奇妙的背景圖案，能夠實時預覽結果;盒陰影工具可以控制模糊半徑的變化，顏色變化，陰影大小，可以實現你想要的任何效果。
官網：https://www.cssmatic.com/
14.Am I Responsive
Am I Responsive 用來測試響應式網頁。輸入鏈接即可生成預覽，Am I Responsive 能幫我們測試出頁面在手機、平板電腦、筆記本電腦和桌面端設備上的瀏覽體驗。
官網：http://ami.responsivedesign.is/
15. CSS Generator
這是一個實用的 CSS 生成器，可以實時查看調試效果。
官網：https://html-css-js.com/css/generator/
16. My Brand New Logo
My Brand New Logo 是一個CSS 調色板生成器，用來創建一致的調色板方案。
官網：https://mybrandnewlogo.com/color-palette-generator
17. 裁剪路徑生成器
CSS cli-path 功能能夠構建復雜的形狀，該工具讓我們可以輕松地以交互方式構建該多邊形。
官網：https://bennettfeely.com/clippy/
18. CSS Grid Generator
CSS Grid Generator 是一個 Grid 布局生成器，通過這個工具可以快速創建自定義CSS Grid布局。
官網：https://cssgrid-generator.netlify.app/
19. CSS Layout Generator
CSS Layout Generator 布局生成器可以為布局組件創建 CSS 和 HTML 的工具。
官網：https://layout.bradwoods.io/
20. Fluid-responsive font-size calculator
Fluid-responsive font-size calculator 即響應式字體計算器，可以輕松創建流暢的排版體驗。它有更廣泛的支持，可以用幾行 CSS 來實現。
官網：https://websemantics.uk/tools/responsive-font-calculator/
21. regex101
Regex101是學習、測試正則表達式的工具網站。
官網：https://regex101.com/
22. Regex-Vis
Regex-Vis 是一個正則表達式可視化器和編輯器。
官網：https://regex-vis.com/
23. Loupe
Loupe 是一個可視化工具，可幫助我們了解 JavaScript 的調用堆棧/事件循環/回調隊列是如何執行的。
官網：http://latentflip.com/loupe/
24. RunJS
RunJS 是一個桌面應用程序，可幫助我們編寫專門的 Javascript 和 Typescript 代碼。它的一些優勢是可以快速測試代碼，輕松導入和測試庫代碼，并且能夠修改界面、主題和字體以適應偏好。
官網：https://runjs.dev/
25. Wrap SVG Online
Wrap SVG Online 通過拖放從計算機上傳圖像，可以輕松地編輯網頁的 SVG 圖像。
官網：https://pavellaptev.github.io/warp-svg/
26. SVG Path Visualizer
SVG Path Visualizer 可以幫助我們通過輸入 SVG 路徑數據來快速直觀地查看 SVG 圖像。此外，該工具還提供了詳細的說明，以便了解如何創建基本的 SVG 形狀，如直線、曲線、三角形等。
官網：https://svg-path-visualizer.netlify.app/
27. BGJar
BGJar 是一個在線工具，可以輕松快速地為網站創建 SVG 背景。只需編輯必要的信息，它將自動導出圖像或代碼供我們應用到網站。
官網：https://bgjar.com/
28. Wavesnippets
Wavesnippets 可以將代碼分步設置為動畫、視頻或 GIF。
官網：https://www.wavesnippets.com/
29. Generate SVG Waves
Generate SVG Waves 可以用來創建 SVG 波形背景。
官網：https://svgwave.in/
30. CodeSandbox
CodeSandbox 是一個為 Web 應用程序開發而構建的在線編輯器，支持多種主流框架。
官網：https://codesandbox.io/
31. Openbase
Openbase 幫助開發人員在數以百萬計的開源軟件包中進行選擇和使用。
官網：https://openbase.com/
32. CodePen
CodePen 是一個在線的前端代碼編輯工具，可用于制作測試頁面、代碼調試，所見即所得。
官網：https://codepen.io/
33. JSONLint
JSONLint 是一個 JSON 調試工具，如果遺漏了語法中的某些內容，它會進行檢查。JSONLint 是處理大型 JSON 格式的絕佳工具，而且很容易上手。
官網：https://jsonlint.com/
34. Minify
Minifier 可以對 JavaScript 和 CSS 代碼進行壓縮，通過縮小可以提高網站加載速度。Minifier 通過刪除 .js 和 .css 文件中的空白并重新格式化它們以減小大小。
官網：https://www.minifier.org/
35. Unminify
Unminify 和 Minifier 恰恰相反。使用 Unminify 可以使 .js 或 .css 文件可讀。這兩種工具都非常容易使用。
官網：https://unminify.com/
36. CRADIENT.ART
CRADIENT.ART 是一個高級 CSS 漸變編輯器，使用帶有分層、設計工具和免費云存儲的功能豐富的編輯器設計插圖、圖案、圖標等。
官網：https://gra.dient.art/
37. 3DPop
3DPop 可以使用 CSS 生成很棒的 3D 文本效果。
官網：https://textpop3d.web.app/
38. CSS Photo Filters
CSS Photo Filters 是一個CSS圖片濾鏡工具，提供了 36 個 CSS 過濾器供我們使用。
官網：https://baseline.is/tools/css-photo-filters/
