掏空收藏夾！22個實用的前端工具全在這了！

大家好，我是零一，轉(zhuǎn)眼又到了 2022 年，相信大家去年收藏夾里一定多了不少寶藏工具，快一起來分享一下吧~ 我先來！

CSS 布局生成器

Layout： https://layout.bradwoods.io/customize

它是一個全功能的 CSS 和 JSX 生成器，用于使用 CSS Grid 布局語法生成不同種類的布局，任意修改 Grid 的屬性，并且實時展示畫面，生成對應(yīng)代碼。當然還有 Flex 布局（不過現(xiàn)在還不是很完善）

Riju

Riju： https://riju.codes/

Riju 是一個繼承了 224 種語言的在線代碼運行平臺，十分簡潔，無廣告，非常推薦

Whirl

Whirl： https://whirl.netlify.app/

Whirl 是一個 CSS 動畫庫，與其它的動畫庫不一樣，它集合了 108 種加載動畫，簡潔且獨特，值得學(xué)習(xí)，所有的源代碼也都能獲取到！

Pikaday

Pikaday： https://pikaday.com/

Pikaday 是一個日期選擇器，無依賴、輕量（5k）、CSS 模塊化，樣式也很簡約，我特別喜歡，令人意外的是，它在 Github 上竟然斬獲了 7k+ Star

Tailwind Components

Tailwind Components： https://tailwindcomponents.com/

Tailwind Components 是一個 Tailwind UI 套件，這個網(wǎng)站是一個由社區(qū)貢獻的各種 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 是一個用于處理數(shù)據(jù)相關(guān)的 JavaScript 庫，它包括 70 多個不同類別的函數(shù)(整理、分組、數(shù)學(xué)、排序等等)

party.js

party.js： https://party.js.org/

party.js 還蠻有意思的，你們應(yīng)該見過很多博客網(wǎng)站，鼠標點擊或拖動時會有很多炫酷的動效，這個庫就是做這個的，你可以輕松地實現(xiàn)那些效果

AI 去背景

baseline： https://baseline.is/tools/background-remover/

baseline 是一款免費的通過 AI 來去除圖片背景的工具網(wǎng)站，支持 JPEG、PNG，最終會返回一個透明背景的 PNG 圖片給你

Layout patterns

Layout patterns： https://web.dev/patterns/layout/

Layout patterns 是 Google Developers 旗下開發(fā)者資源中新增的版塊，里面列舉了使用 CSS 構(gòu)建布局 UI，現(xiàn)在列舉了 11 種布局~ 后續(xù)應(yīng)該還會持續(xù)增加，探索更多可能，建議收藏。*搭梯子訪問。

Lowdefy

Lowdefy： https://lowdefy.com/

Lowdefy 是一個開源的低代碼框架，通過 YAML 來輕松構(gòu)建 web 應(yīng)用、管理面板、BI 儀表板、工作流和 CRUD 應(yīng)用

uncut

uncut： https://uncut.wtf/

uncut 是一個現(xiàn)代字體目錄網(wǎng)站，重點是開源，可免費用于個人和商用，看了一下總共收錄了 90 種字體，任君挑選~

fetoolkit

fetoolkit： https://www.fetoolkit.io/

fetoolkit 是一個前端開發(fā)工具箱，收錄了 20 多種編碼、圖片相關(guān)的工具，包括 CSS、JSON、圖標、SVG、圖像壓縮、npm、regex 等工具

Unicode Arrows

Unicode Arrows： https://unicodearrows.com/

Unicode Arrows 是一個收錄了各式各樣的箭頭相關(guān)的十六進制代碼

components AI

components AI： https://components.ai/

components AI 是一個主題構(gòu)建器，包括語法高亮生成器、漸變、陰影工具、SVG 圖案生成器、動畫背景等等，全部都可以在線調(diào)試，非常好用

Glitter

Glitter： https://wh0.github.io/glitter/

Glitter 是一個熒光字體生成器，項目不復(fù)雜，但很好看，我們可以隨意修改文本，最后導(dǎo)出 SVG

Iconduck

Iconduck： https://iconduck.com/

Iconduck 是一個開源 icon 網(wǎng)站，擁有超過 100,000 個圖標，可以通過關(guān)鍵字搜索，并且都可以在商業(yè)項目中使用

pattern-generator

pattern-generator： https://doodad.dev/pattern-generator/

pattern-generator 是一個幫助你生成背景圖片的網(wǎng)站，就幾十種圖案可選，而且每種圖案里的元素都可以通過交互按鈕任意修改，最后可以導(dǎo)出 JPEG、PNG、SVG、CSS 背景代碼，也支持退出后恢復(fù)上一次操作的內(nèi)容

buttons-generator

buttons-generator： https://markodenic.com/tools/buttons-generator/

buttons-generator 是一個包含了很多種交互形式以及樣式的按鈕的網(wǎng)站，大概有**120+**種，對于有自定義按鈕需求的小伙伴可以作參考

Coding Fonts

Coding Fonts： https://coding-fonts.css-tricks.com/fonts/hack/?language=html&theme=dark

Coding Fonts 是收集了 45 種代碼字體的網(wǎng)站，大部分都是免費的，當然也有收費的，可以選個心儀的放到自己的編輯器里去（小聲 bb 一句，我還是最喜歡 JetBrains Mono，免費又好看）

svgrepo

svgrepo： https://www.svgrepo.com/

svgrepo 是一個 SVG 圖標庫，坐擁 300,000 + 免費使用的 SVG 圖標，大部分也都是可以商用的。網(wǎng)站支持搜索，無需登錄即可收藏（可能是存的 localstorage）~

maplibre

maplibre： https://maplibre.org/

maplibre 是一個 JavaScript 世界地圖庫，開箱即用，同時也支持了 IOS 和 Android 的 SDK

Dopefolio

Dopefolio： https://github.com/rammcodes/Dopefolio

Dopefolio 是一個開箱即用的官網(wǎng)頁面生成器，沒有依賴一堆的三方開源庫，全部是純 HTML、CSS，所以 SEO 做的非常好，Lighthouse 分數(shù)也很高，同時支持頁面響應(yīng)式。有官網(wǎng)頁面需求的小伙伴可以嘗試使用

家底都掏空了，希望對你們有所幫助。獨樂樂不如眾樂樂，如果你還有什么更推薦的網(wǎng)站或工具的話，可以在評論區(qū)留言~

我是零一，分享技術(shù)，不止前端！下期見~

歡迎關(guān)注作者微信公眾號：「前端印象」