22 個實用的前端工具
一、CSS 佈局生成器
Layout：https://layout.bradwoods.io/customize
它是一個全功能的 CSS 和 JSX 生成器，用於使用 CSS Grid 佈局語法生成不同種類的佈局，任意修改 Grid 的屬性，並且實時展示畫面，生成對應代碼。當然還有 Flex 佈局（不過現在還不是很完善）
二、Riju
Riju：https://riju.codes/
Riju 是一個繼承了 224 種語言的在線代碼運行平臺，十分簡潔，無廣告，非常推薦
三、Whirl
Whirl：https://whirl.netlify.app/
Whirl 是一個 CSS 動畫庫，與其它的動畫庫不一樣，它集合了 108 種加載動畫，簡潔且獨特，值得學習，所有的源代碼也都能獲取到！
四、Pikaday
Pikaday：https://pikaday.com/
Pikaday 是一個日期選擇器，無依賴、輕量（5k）、CSS 模塊化，樣式也很簡約，我特別喜歡，令人意外的是，它在 Github 上竟然斬獲了 7k+ Star
五、Tailwind Components
Tailwind Components：https://tailwindcomponents.com/
Tailwind Components 是一個 Tailwind UI 套件，這個網站是一個由社區貢獻的各種 Tailwind 組件
六、Tail-Kit
Tail-Kit：https://www.tailwind-kit.com/
Tail-Kit 是第一個非常棒的 Tailwind UI 組件庫，它有超過 250 個開源組件，同時兼容 React、 Vue 和 Angular
七、tidy.js
tidy.js：https://pbeshai.github.io/tidy/
tidy.js 是一個用於處理數據相關的 JavaScript 庫，它包括 70 多個不同類別的函數 (整理、分組、數學、排序等等)
八、party.js
party.js：https://party.js.org/
party.js 還蠻有意思的，你們應該見過很多博客網站，鼠標點擊或拖動時會有很多炫酷的動效，這個庫就是做這個的，你可以輕鬆地實現那些效果
九、AI 去背景
baseline：https://baseline.is/tools/background-remover/
baseline 是一款免費的通過 AI 來去除圖片背景的工具網站，支持 JPEG、PNG，最終會返回一個透明背景的 PNG 圖片給你
十、Layout patterns
Layout patterns：https://web.dev/patterns/layout/
Layout patterns 是 Google Developers 旗下開發者資源中新增的版塊，裏面列舉了使用 CSS 構建佈局 UI，現在列舉了 11 種佈局~ 後續應該還會持續增加，探索更多可能，建議收藏
十一、Lowdefy
Lowdefy：https://lowdefy.com/
Lowdefy 是一個開源的低代碼框架，通過 YAML 來輕鬆構建 web 應用、管理面板、 BI 儀表板、工作流和 CRUD 應用
十二、uncut
uncut：https://uncut.wtf/
uncut 是一個現代字體目錄網站，重點是開源，可免費用於個人和商用，看了一下總共收錄了 90 種字體，任君挑選~
十三、fetoolkit
fetoolkit：https://www.fetoolkit.io/
fetoolkit 是一個前端開發工具箱，收錄了 20 多種編碼、圖片相關的工具，包括 CSS、 JSON、圖標、 SVG、圖像壓縮、 npm、 regex 等工具
十四、Unicode Arrows
Unicode Arrows：https://unicodearrows.com/
Unicode Arrows 是一個收錄了各式各樣的箭頭相關的十六進制代碼
十五、components AI
components AI：https://components.ai/
components AI 是一個主題構建器，包括語法高亮生成器、漸變、陰影工具、SVG 圖案生成器、動畫背景等等，全部都可以在線調試，非常好用
十六、Glitter
Glitter：https://wh0.github.io/glitter/
Glitter 是一個熒光字體生成器，項目不復雜，但很好看，我們可以隨意修改文本，最後導出 SVG
十七、Iconduck
Iconduck：https://iconduck.com/
Iconduck 是一個開源 icon 網站，擁有超過 100,000 個圖標，可以通過關鍵字搜索，並且都可以在商業項目中使用
十八、pattern-generator
pattern-generator：https://doodad.dev/pattern-generator/
pattern-generator 是一個幫助你生成背景圖片的網站，就幾十種圖案可選，而且每種圖案裏的元素都可以通過交互按鈕任意修改，最後可以導出 JPEG、 PNG、SVG 、CSS 背景代碼，也支持退出後恢復上一次操作的內容
十九、buttons-generator
buttons-generator：https://markodenic.com/tools/buttons-generator/
buttons-generator 是一個包含了很多種交互形式以及樣式的按鈕的網站，大概有 120+ 種，對於有自定義按鈕需求的小夥伴可以作參考
二十、Coding Fonts
Coding Fonts：https://coding-fonts.css-tricks.com/fonts/hack/?language=html&theme=dark
Coding Fonts 是收集了 45 種代碼字體的網站，大部分都是免費的，當然也有收費的，可以選個心儀的放到自己的編輯器裏去（小聲 bb 一句，我還是最喜歡JetBrains Mono，免費又好看）
二十一、svgrepo
svgrepo：https://www.svgrepo.com/
svgrepo 是一個 SVG 圖標庫，坐擁 300,000 + 免費使用的 SVG 圖標，大部分也都是可以商用的。網站支持搜索，無需登錄即可收藏（可能是存的 localstorage）~
二十一、maplibre
maplibre：https://maplibre.org/
maplibre 是一個 JavaScript 世界地圖庫，開箱即用，同時也支持了 IOS 和 Android 的 SDK
二十二、Dopefolio
Dopefolio：https://github.com/rammcodes/Dopefolio
Dopefolio 是一個開箱即用的官網頁面生成器，沒有依賴一堆的三方開源庫，全部是純 HTML、CSS，所以 SEO 做的非常好，Lighthouse 分數也很高，同時支持頁面響應式。有官網頁面需求的小夥伴可以嘗試使用
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/QORuLkY3KaRQtvDlqRlg3w