一年又過(guò)去了，我再次榮幸地回顧了過(guò)去12個(gè)月的《Web Tools Weekly》新聞通訊檔案，尋找2021年讀者認(rèn)為最有趣的幾款前端工具。因此，為了開啟2022年，我整理了一份最受歡迎的60款工具的清單。我相信這里至少有一兩款工具您可以從今天開始在您的前端項(xiàng)目中使用。

有些前端工具非常實(shí)用，而另一些工具可能只是因?yàn)楹闷嫘牟派习瘢ㄎ腋鶕?jù)唯一點(diǎn)擊次數(shù)來(lái)判斷）。由於許多進(jìn)入我的年度榜單的工具都比較新，我認(rèn)為這很好地表明了未來(lái)一年哪些前端工具將會(huì)流行。

從上往下數(shù)！

- 60. Open Props

• 59. NextUI
• 58. Dopefolio
• 57. Vizzu
• 56. 10015 Tools
• 55. Snoweb
• 54. Tails
• 53. MapLibre
• 52. SVG Repo
• 51. Animated Backgrounds
• 50. Pico.css
• 49. Coding Fonts
• 48. UI-Neumorphism
• 47. Beautiful CSS Buttons
• 46. Shaper
• 45. Prestige
• 44. HTML.cafe
• 43. Charts.css
• 42. Buttons Generator
• 41. Doodad Pattern Generator
• 40. Kaboom
• 39. Skuawk
• 38. Glassmorphism CSS Generator
• 37. Kalia
• 36. AdminJS
• 35. Pancake
• 34. Mosaic Lite
• 33. Iconduck
• 32. Luxa CSS
• 31. Glitter
• 30. Components AI
• 29. Unicode Arrows
• 28. Type Scale Clamp Generator
• 27. AnimXYZ
• 26. Frontend Toolkit
• 25. colorpalettes.earth
• 24. Uncut
• 23. Lowdefy
• 22. JavaScript Booster
• 21. Layout Patterns
• 20. Baseline Background Remover
• 19. Theatre.js
• 18. Transition.css
• 17. The Component Gallery
• 16. party.js
• 15. Headless UI
• 14. Turbo
• 13. tidy.js
• 12. Tail-Kit
• 11. Tailwind Components
• 10. Pikaday
• 9. HTML Boilerplates
• 8. Whirl
• 7. Riju
• 6. DevUI
• 5. Pollen
• 4. AlterNight
• 3. UIsual
• 2. Supabase UI
• 1. CSS Layout Generator
• 您最喜歡的2021年前端工具是什麼？

### 60. Open Props

Open Props 提供了一套手工製作的設(shè)計(jì)令牌，由CSS 自定義屬性組成。由於使用了這種特殊的CSS 功能，我可以看到這類工具會(huì)越來(lái)越普遍。它們?cè)试S您引入小型且有用的自定義屬性集合，例如animations.css、borders.css、fonts.css、zindex.css 等，更多內(nèi)容即將推出?；蛘吣梢灾皇褂弥饕腛pen Props 文件來(lái)一次性獲取所有內(nèi)容。

這絕對(duì)是一款值得關(guān)注的前端工具，如果您想幫助構(gòu)建可用的令牌庫(kù)，它也是一個(gè)不錯(cuò)的貢獻(xiàn)目標(biāo)。

59. NextUI

一個(gè)現(xiàn)代化的React 庫(kù)，它使用流行的CSS-in-JS 解決方案Stitches，並包含開箱即用的明暗UI 組件以及一個(gè)默認(rèn)調(diào)色板，這對(duì)於快速構(gòu)建登錄頁(yè)面或其他最初未與任何品牌相關(guān)的內(nèi)容可能很有用。

它目前被列為Alpha 階段的開發(fā)，所以這是另一個(gè)值得在來(lái)年關(guān)注的工具。

58. Dopefolio

如果您正在尋找一種輕鬆創(chuàng)建自己的開發(fā)者作品集的方法，Dopefolio 是一種快速解決方案，它針對(duì)SEO 進(jìn)行了優(yōu)化，並且開箱即用就具有很高的Lighthouse 分?jǐn)?shù)。

實(shí)時(shí)演示可以讓您了解它的外觀（響應(yīng)式等等），並且它包含一個(gè)顏色選擇器組件，因此您可以實(shí)時(shí)測(cè)試您自己的首選模板主色。

57. Vizzu

這是今年前端工具榜單上一個(gè)獨(dú)特的工具。 Vizzu 是一個(gè)開源的JavaScript 庫(kù)，用於創(chuàng)建動(dòng)畫數(shù)據(jù)故事和可視化效果。也許它的流行是由於如今創(chuàng)建和嵌入醫(yī)療數(shù)據(jù)的需求。

這個(gè)庫(kù)允許您輕鬆構(gòu)建靜態(tài)數(shù)據(jù)圖表、動(dòng)畫圖表和數(shù)據(jù)故事。您可以查看動(dòng)畫圖表或數(shù)據(jù)故事的一些實(shí)時(shí)示例，其中包括一個(gè)數(shù)據(jù)故事，展示了在電視劇《老友記》的整個(gè)運(yùn)行過(guò)程中哪個(gè)客串角色的臺(tái)詞最多。

56. 10015 Tools

我似乎每年都會(huì)找到一些這樣的前端工具。 10015 Tools 是一組前端工具，而不是單個(gè)工具。它包括文本工具、圖像工具、CSS 工具、編碼工具（例如縮小器）、顏色工具、社交媒體工具以及其他一些雜項(xiàng)類別下的工具。

這絕對(duì)是我見過(guò)的更全面的多合一解決方案之一，因此我相信您會(huì)在這裡找到一些有用的前端工具，您可以隨時(shí)回來(lái)使用。

55. Snoweb

圖標(biāo)集總是很受歡迎，我每年都會(huì)遇到至少十幾款新的圖標(biāo)集。這款圖標(biāo)集包含優(yōu)化的SVG 圖標(biāo)，其中許多圖標(biāo)在您將鼠標(biāo)懸停在其上時(shí)具有內(nèi)置的動(dòng)畫效果（如打開/關(guān)閉信封圖標(biāo)）。

像許多圖標(biāo)網(wǎng)站一樣，您可以按關(guān)鍵字搜索或按類別篩選，其中一個(gè)類別是“品牌”類別，其中包含Twitter、Facebook、Vimeo、YouTube、Snapchat 等的圖標(biāo)。

54. Tails

這是第一個(gè)進(jìn)入榜單的基於Tailwind 的工具；隨著Tailwind 越來(lái)越受歡迎，這在過(guò)去幾年一直是一種趨勢(shì)。這款前端工具是一個(gè)用於使用Tailwind CSS 的項(xiàng)目的拖放式頁(yè)面構(gòu)建器。

它為15 個(gè)類別中的每一個(gè)類別都包含兩個(gè)免費(fèi)的“塊”，所以這裡有很多免費(fèi)的東西，您可以每月付費(fèi)解鎖其餘部分。

53. MapLibre

這個(gè)開源地圖庫(kù)於3 月份推出，並在全年廣受歡迎。它包含一個(gè)JavaScript 庫(kù)以及一個(gè)用於在iOS 和Android 應(yīng)用程序中顯示地圖的SDK。

如果您想了解基於Web 的前端工具的可能性，文檔中包含許多使用JavaScript 的示例。

52. SVG Repo

SVG Repo 完全是基於數(shù)量才上榜的。它是一個(gè)擁有超過(guò)300,000 個(gè)免費(fèi)、優(yōu)化的基於SVG 的圖形和圖標(biāo)的資源庫(kù)，其中大部分都允許用於商業(yè)用途。

您選擇的每個(gè)圖標(biāo)都會(huì)告訴您它屬於哪種許可證。您可以按關(guān)鍵字搜索並“保存”您喜歡的圖標(biāo)以備後用（無(wú)需登錄）。

51. Animated Backgrounds

這款工具今年進(jìn)入前60 名，但可能不是其中最實(shí)用的前端工具。正如我在開頭所說(shuō)，有些東西只是出於純粹的好奇心而被點(diǎn)擊。它是一個(gè)動(dòng)畫背景庫(kù)，來(lái)自各種CodePen 演示。

該庫(kù)很有用，因?yàn)樗鼘⒈尘帮@示為預(yù)先錄製的視頻，因此您不必?fù)?dān)心所有演示都會(huì)加載並導(dǎo)致瀏覽器選項(xiàng)卡崩潰。謹(jǐn)慎使用這些工具（如果有的話），因?yàn)樗鼈兺ǔ?huì)使用大量的JavaScript 和CSS。

50. Pico.css

這與當(dāng)今流行的CSS 框架不同。它有點(diǎn)像反Tailwind 工具，更像是一個(gè)啟動(dòng)CSS 文件（如重置）而不是一個(gè)成熟的框架。

Pico.css 為所有原生HTML 元素提供優(yōu)雅的默認(rèn)樣式（您可以在此處預(yù)覽），而無(wú)需向您的標(biāo)記添加大量類——並且整個(gè)文件縮小並gzip 後小於10kb。

49. Coding Fonts

編碼字體似乎是最近令人興奮的新趨勢(shì)，而CSS-Tricks 利用這一點(diǎn)創(chuàng)建了這個(gè)小的交互式信息應(yīng)用程序。

在左側(cè)選擇一種字體以顯示示例代碼、字體信息（連字、斜體等）、成本（大多數(shù)是免費(fèi)的），以及顯示HTML、CSS 或JavaScript 示例代碼的選項(xiàng)。

48. UI-Neumorphism

這個(gè)React 庫(kù)基於幾年前似乎已經(jīng)過(guò)時(shí)的舊擬物化趨勢(shì)。這種趨勢(shì)會(huì)捲土重來(lái)嗎？可能不會(huì)。事實(shí)上，即使我去年第一次分享了這個(gè)React 庫(kù)，它也有大約兩年的歷史了。

該庫(kù)包含大量不同的組件，所有這些組件都實(shí)現(xiàn)了“新擬物化”外觀。有趣的是，但可能不適合許多項(xiàng)目。

47. Beautiful CSS Buttons

幾乎每個(gè)應(yīng)用程序或網(wǎng)站都需要按鈕，因此這樣的集合總是很受歡迎。許多這些按鈕與您可能在其他地方看到的不同。

許多按鈕都包含有趣的懸停效果，您可以輕鬆地直接在頁(yè)面上複製和粘貼任何單個(gè)按鈕的HTML 和CSS。

46. Shaper

這個(gè)交互式工具允許您實(shí)時(shí)在頁(yè)面上調(diào)整各種UI 設(shè)置以構(gòu)建不同的頁(yè)面元素。一旦您根據(jù)自己的喜好調(diào)整了內(nèi)容，您可以獲取代碼，該代碼使用CSS 自定義屬性。

您可以切換演示視圖和“規(guī)格”視圖（即代碼以及其他有用的信息）。此工具特別關(guān)注排版以及其餘UI 樣式，這是使佈局看起來(lái)正確的關(guān)鍵部分。

45. Prestige

這是瀏覽器中的基於文本的HTTP 客戶端——就像Postman，但沒(méi)有界面。它允許您以純文本定義請(qǐng)求，您可以選擇將其保存為Gist。它包括隔離的Cookie 管理，並且具有明暗兩種模式。

正如作者解釋的那樣，“我創(chuàng)建Prestige 是因?yàn)槲以诠ぷ鲿r(shí)需要這樣的應(yīng)用程序……並與外部API 進(jìn)行交互。”

44. HTML.cafe

這可能是整個(gè)列表中最簡(jiǎn)單的工具。 HTML.cafe 或多或少是一個(gè)簡(jiǎn)陋的CodePen，缺乏更好的術(shù)語(yǔ)。我不認(rèn)為人們會(huì)對(duì)這種事情感興趣，因?yàn)橐呀?jīng)有強(qiáng)大的工具可以做到它能做的事情。儘管如此，它是一個(gè)非常簡(jiǎn)單的HTML 編輯器，具有實(shí)時(shí)預(yù)覽功能。

它沒(méi)有像CodePen 那樣的單獨(dú)CSS 或JavaScript 窗口，但如果您願(yuàn)意，可以輕鬆地在