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

有些前端工具非常實用，而另一些工具可能只是因為好奇心才上榜（我根據(jù)唯一點擊次數(shù)來判斷）。由於許多進入我的年度榜單的工具都比較新，我認為這很好地表明了未來一年哪些前端工具將會流行。

從上往下數(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è)計令牌，由CSS 自定義屬性組成。由於使用了這種特殊的CSS 功能，我可以看到這類工具會越來越普遍。它們允許您引入小型且有用的自定義屬性集合，例如animations.css、borders.css、fonts.css、zindex.css 等，更多內(nèi)容即將推出。或者您可以只使用主要的Open Props 文件來一次性獲取所有內(nèi)容。

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

59. NextUI

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

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

58. Dopefolio

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

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

57. Vizzu

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

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

56. 10015 Tools

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

這絕對是我見過的更全面的多合一解決方案之一，因此我相信您會在這裡找到一些有用的前端工具，您可以隨時回來使用。

55. Snoweb

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

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

54. Tails

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

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

53. MapLibre

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

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

52. SVG Repo

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

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

51. Animated Backgrounds

這款工具今年進入前60 名，但可能不是其中最實用的前端工具。正如我在開頭所說，有些東西只是出於純粹的好奇心而被點擊。它是一個動畫背景庫，來自各種CodePen 演示。

該庫很有用，因為它將背景顯示為預(yù)先錄製的視頻，因此您不必擔(dān)心所有演示都會加載並導(dǎo)致瀏覽器選項卡崩潰。謹慎使用這些工具（如果有的話），因為它們通常會使用大量的JavaScript 和CSS。

50. Pico.css

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

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

49. Coding Fonts

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

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

48. UI-Neumorphism

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

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

47. Beautiful CSS Buttons

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

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

46. Shaper

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

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

45. Prestige

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

正如作者解釋的那樣，“我創(chuàng)建Prestige 是因為我在工作時需要這樣的應(yīng)用程序……並與外部API 進行交互?！?/p>

44. HTML.cafe

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

它沒有像CodePen 那樣的單獨CSS 或JavaScript 窗口，但如果您願意，可以輕鬆地在