誰不喜歡一個好的前端工具？在本綜述中，您將找到去年流行的有用的前端工具，它們將幫助您加快開發工作流程。讓我們深入了解一下！

在過去的 12 個月里，我在我的時事通訊 Web Tools Weekly[1] 中分享了數百種工具。我為前端和全棧開發人員提供了大量實用的庫、幫助程序和其他有用的東西。這些工具涵蓋許多類別，包括 JavaScript 庫和實用程序、Web 框架、CSS 生成器、數據庫工具、React 組件、CLI 工具，甚至 ChatGPT 和基于 AI 的工具，后者是我在過去一年中開始定期介紹的工具。

本文中的 60 個工具是我的時事通訊中 2023 年點擊次數最多的 Web 開發人員工具。正如您將看到的，其中大多數對于前端和全棧開發都非常實用，因此您可能會發現很多您希望將其添加為書簽或在即將進行的項目中使用。該列表的受歡迎程度大致按相反順序排列，因此請務必向下滾動查看今年最受歡迎的工具是什么！

Kuma UI

Kuma UI[2] 將自己描述為“CSS-in-JS 的未來”，是一個無頭、實用程序優先、零運行時的組件庫，其中包括自己的 CSS-in-JS 解決方案。

圖片

Kuma UI 的與眾不同之處在于它的混合方法，允許在運行時動態更改樣式，同時仍然保持零運行時 CSS-in-JS 的性能優勢。

Boxslider

雖然近年來漸漸不再提倡使用 carousel 組件，但是我的客戶仍然會使用它們，開發人員也一直在尋找它們，Boxslider[3] 就是其中之一。

圖片

這個輪播，或者內容滑塊，包括七個幻燈片過渡效果，你可以在演示頁面上嘗試，包括3D立方體效果、平鋪翻轉和簡單的漸變。

Effect

Effect[4] 被描述為“一個強大的 TypeScript 庫，旨在幫助開發人員輕松創建復雜的、同步的和異步的程序”。

圖片

這種效果背后的理念是通過一種叫做結構化并發的方式來幫助開發人員構建健壯且可擴展的應用程序，結構化并發是一種允許多個復雜操作同時運行的編程范例。

HatTip

如果你使用 Express.js 構建 Node.js 應用，你可能會想看看 HatTip[5]，它提供了類似于 Express.js 的解決方案，但采用了更通用的方法。

圖片

HatTip 是一套用于構建 HTTP 服務器應用程序的 JavaScript 包，允許您編寫可以在任何地方部署的服務器代碼 - AWS、Cloudflare Workers、Vercel 等。

LiveViewJS

LiveViewJS[6] 是一個簡單而強大的框架，用于在 Node.js 和 Deno 中構建 “LiveViews”，LiveViews 在 Elixir 的 Phoenix 框架中得到了推廣，它涉及將狀態管理和事件處理轉移到服務器，并通過 WebSockets 進行 HTML 更新。

圖片

該技術允許您構建單頁應用程序體驗，具有快速首次繪制、實時和多人游戲功能、無需客戶端路由解決方案等功能。

Scrollbar.App

Scrollbar.app[7] 是一個用于自定義瀏覽器滾動條的一站式參考和代碼生成工具。您可以直接在頁面上實時測試和調整滾動條，然后復制 CSS。

圖片

滾動條代碼涉及使用特定于供應商的偽元素，但也包含面向未來的 scrollbar-color 。

OpenGPT

OpenGPT[8] 是過去一年左右流行的眾多基于 ChatGPT 的工具之一。這是一個開源人工智能平臺，允許任何人使用和創建基于 ChatGPT 的應用程序。

圖片

該服務的主平臺本身允許您搜索超過 11,000 個 ChatGPT 應用程序的分類目錄。

Free Icons

圖標集似乎總能登上年終榜單。Free Icons[9] 是一套包含 22000 多個圖標的通用圖標集，其中既有品牌圖標，也有通用圖標。

圖片

所有內容均為 SVG 格式，您可以在主頁上按關鍵字進行過濾，或通過 GitHub 存儲庫獲取全部內容。

Materialize

Materialise[10] 是一個基于 Google Material Design 指南的 UI 組件開源框架。

圖片

該項目包括 20 多類組件，是一個不再維護的老項目的分叉。

Qr-Code

qr-code[11] 是一個基于 SVG 的 Web 組件，可生成可動畫且可自定義的二維碼。有一個交互式演示頁面，您可以在其中嘗試不同的動畫效果。

圖片

生成的二維碼是基于 SVG 的，組件沒有依賴關系，并且易于定制。

GradientGenerator

GradientGenerator[12] 是一個交互式 CSS 漸變生成器，可讓您構建高級分層漸變。您可以使用一系列不同的設置和功能來自定義分層漸變。

該應用還允許你將漸變效果保存到你的資料庫，甚至導入社區制作的漸變效果。

IDraw.Js

iDraw.js[13] 是一個簡單的 JavaScript 框架，用于創建允許基于 Canvas 繪圖的應用程序。

圖片

playground 中有一些很好的示例，您可以在其中看到 API 的簡單性和易用性。

VanJS

VanJS[14] 是一個類似于 React 的 UI 庫，但不使用 JSX、虛擬 DOM、轉譯等。這個想法是為了避免通常與使用像 React 這樣的庫相關的配置開銷。

圖片

該庫聲稱是世界上最小的 UI 庫，大小不到 1kb。它對 TypeScript 有著一流的支持，自然擁有比 React、Vue 等強大的性能。

Mamba UI

Mamba UI[15] 是今年上榜的多個基于 Tailwind 的工具中的第一個。這是一個包含 150 多個組件和模板的 UI 庫，基于流行的實用程序優先 CSS 框架。

該庫包含 40 多個類別的預樣式組件，您可以快速獲取 HTML、Vue 或 JSX 格式的任何組件的代碼。

Termino.Js

Termino.js[16] 是一個無依賴關系的 JavaScript 組件，可讓您向網頁添加嵌入式基于終端的動畫、游戲和應用程序。

圖片

它是可定制的，可以輕松構建終端動畫，例如鍵盤打字效果。演示頁面包含一些簡單的示例，其中包括一個嵌入式終端應用程序，用戶可以在其中獲取有關任何 GitHub 配置文件的信息。

SVG Chart Generator

SVG Chart Generator[17] 是一款設計精美的圖表生成器，可讓您生成基于 SVG 的折線或條形格式的圖表。

圖片

該生成器允許您交互式地自定義圖表的寬度/高度設置、點數、平滑度等。您還可以導入自己的數據點。

PeepsLab

PeepsLab[18] 是一個簡單的在線工具，用于定制您自己獨特的插圖用戶頭像。您可以通過循環選擇膚色、頭發顏色、面部毛發、配飾、頭部、面部樣式等不同選項來構建自己的頭像。

或者，您可以簡單地點擊“隨機化”按鈕生成隨機頭像，然后以 PNG 格式下載。

Ribbon Shapes

Ribbon Shapes[19] 是一個純 CSS 彩帶在線圖庫，包含您能想象到的任何彩帶格式。

該庫包含 100 多個功能區，每個功能區均使用單個 HTML 元素創建，并且可以使用 CSS 變量輕松自定義。

Big-AGI

big-AGI[20] 是一款基于 GPT 的個人應用程序，被描述為“為需要功能、形式、簡單性和速度的專業人士提供的 GPT 應用程序”。

圖片

它具有響應式、適合移動設備的界面，包括 AI 角色、文本到圖像、語音、響應流、代碼突出顯示和執行、PDF 導入等功能。

Easy Email

Easy Email[21] 是一款基于 MJML（流行的 HTML 電子郵件創作框架）的拖放式電子郵件編輯器。

圖片

該解決方案允許您將結構化 JSON 數據轉換為與主要電子郵件客戶端兼容的 HTML。包括輕松自定義塊、組件和配置主題的功能。

CSS Components

CSS Components[22] 通過這個全新的解決方案進軍 CSS-in-JS 領域，被描述為“不是另一個樣式系統”。

該解決方案是為了應對在 React Server Components 中使用 CSS-in-JS 工具所固有的挑戰，該庫受到另一個此類工具 Stitches 的啟發，并承諾改善開發人員體驗。

Toaster

Toaster[23] 是一個實驗性的純 CSS 3D 編輯器，允許您使用純 HTML 和 CSS 轉換來構建模型。

圖片

作者承認該工具不太實用，目前只能以 JSON 格式導出/導入（無法導出 CSS）。隨著性能的提高，這可能是一個有用的工具。

Fontpair

Fontpair[24] 并不是一個新資源，但它進入了今年的名單。它是一個字體目錄，專門用于查找與您的設計完美匹配的字體。

圖片

所有字體均來自 Google Fonts，并且配對由作者手動策劃。

Breadit

Breadit[25] 是一個現代的全棧 Reddit 克隆，使用 Next.js App Router、TypeScript 和 Tailwind 構建。

這是一個很好的學習和實驗應用程序，具有無限滾動、NextAuth、圖像上傳、功能豐富的帖子編輯器、嵌套評論等等。

Keep React

Keep React[26] 是一個基于 Tailwind 和 React 的組件庫，包含 40 多個組件和交互元素。

圖片

這些組件是預先設計的，但所有組件都可以使用 Tailwind 類輕松自定義，并且幾乎適用于任何項目。

TW Elements

TW Elements[27] 是一個龐大的庫，包含使用 Tailwind CSS 重新創建的 500 多個 Bootstrap 組件。對于那些已經熟悉 Bootstrap 并正在尋找現代替代方案的人來說，這是一個很好的選擇。

圖片

與Bootstrap框架中的原始組件相比，該庫具有更好的整體設計和功能，并且您可以在主頁中輕松地通過關鍵字搜索組件。

Autocomplete

Autocomplete[28] 是一個開源、可用于生產的 JavaScript 庫，用于為表單輸入和搜索字段構建可定制的自動完成體驗。

圖片

您可以通過定義容器、填充容器的數據以及任何虛擬 DOM 解決方案（JS、React、Vue、Preact 等）輕松構建自動完成體驗。

CSS Loaders

CSS Loaders[29] 是一個龐大的集合，包含 30 多個類別下的 600 多個 CSS 加載動畫。

圖片

該庫包含您能想到的幾乎任何樣式的加載程序，只需單擊一下即可輕松復制/粘貼任何加載程序的 HTML/CSS。

Flectofy

Flectofy[30] 是一款交互式工具，它提供的界面可讓您構建獨特的 SVG 形狀。

圖片

這里的形狀樣式非常小眾，因此在很多情況下都用不上，但界面的工作方式和形狀的外觀肯定與眾不同。

Picyard

Picyard[31] 是一款應用程序，可以生成具有吸引人的背景的屏幕截圖，用于mockups、社交媒體帖子等。

圖片

圖像/背景工具是免費的，但該應用程序還包括用于生成有吸引力的代碼片段、圖表、思維導圖、時間表等的高級功能。

UI Content

UI Content[32] 被譽為“查找專業占位符文本的最佳位置”。包含七個不同類別的占位符文本，還包括虛擬 SVG 徽標。

這里的想法是避免典型的“lorem ipsum”并使用實際內容來確保您的設計看起來更接近最終產品。

Vessel.Js

Vessel.js[33] 是我在過去一年中發現的比較獨特的項目之一。它是一個基于 Three.js（WebGL 庫）的 JavaScript 庫，用于概念船舶設計，換句話說，就是建造船只。

圖片

您可以查看圖庫中的許多示例，還有一個教程可以幫助您加快使用該庫的最佳實踐——假設這恰好是您的利基市場！

Modern Font Stacks

Modern Font Stacks[34]（現代字體堆棧）是一個幫助你識別性能最佳的字體堆棧的資源。也就是說，這些堆?；陬A裝的默認操作系統字體。

圖片

您可以從特定的印刷類別中進行選擇，例如傳統、舊式、新怪誕、等寬代碼、手寫等等。同樣，這些字體通常已經在 Windows、Mac、Linux、iOS 和 Android 上可用，為您提供最好的支持，而無需額外的資源請求。

FancySymbol

FancySymbol[35] 是一個巨大的存儲庫，包含可復制/粘貼的特殊字符、文本符號、外語符號等。

圖片

包括 50 多個類別的符號，還允許您創建獨特且精美的可復制/粘貼文本，例如顛倒文本或用“隱形墨水”書寫的文本等。

Observable Plot

Observable Plot[36] 是一個 JavaScript 庫，用于使用基于 SVG 的圖表創建探索性數據可視化（即“繪圖”）。

圖片

繪圖界面可以包括特定功能，如比例、投影、圖例、曲線、標記等。您必須查看文檔以了解這些不同功能的內幕，這些功能使用大量交互式示例進行了說明。

Washington Post Design System 華盛頓郵報設計系統

華盛頓郵報設計系統[37]是專門為與美國流行的日報和新聞媒體《華盛頓郵報》相關的屬性構建的 UI 套件。

圖片

雖然它是為 WaPo 的工程師設計的，但它是 MIT 許可的，并且使用 Stitches 和 Radix UI 內置 React。因此，如果您使用類似的技術棧，可定制的組件和其他資產可能會很有用。

FormSpamPrevention 表單垃圾郵件預防

FormSpamPrevention[38] 并不是一個受歡迎的項目，但當我去年分享它時，它獲得了相當大的關注。它提供了一個簡單的普通 JavaScript 和 HTML 解決方案來防止表單垃圾郵件。

圖片

該腳本基于對表單內容使用自定義 HTML 標簽，并將其轉換為有效的 HTML 標簽。

Chatbox

Chatbox[39] 是一款適用于 Windows、Mac 和 Linux 的本機應用程序，可讓您在桌面上訪問 AI Copilot。

圖片

這個特殊的工具并不嚴格專注于 Web 開發，但它利用了各種 LLM 模型，并且可以用作各種日常技術相關任務的整體生產力應用程序。

CSS Generators

CSS Generators[40] 不是一個單一的工具，而是 CSS 生成器的一個小集合，是前端開發人員中流行的一種工具。

圖片

我喜歡這套生成器，因為它有幾種您在其他地方看不到的類型：兩個輝光生成器（用于文本和元素）和一個下劃線生成器。

Leporello.Js

Leporello.js[41] 是一個用于 JavaScript 的交互式函數式編程 IDE。這意味著您的代碼會在您鍵入時立即執行，從而可能改善調試過程。

圖片

我們大多數人可能會開始使用特定的 IDE，但如果您想嘗試新的 IDE，那么這可能是一個不錯的選擇。

Calligrapher.Ai

Calligrapher.ai[42] 是一個用于 AI 生成的手寫樣本的在線工具，您可以將其下載為 SVG。

圖片

不需要“寫”任何東西；只需輸入一些文本并自定義筆畫寬度和易讀性，人工智能將完成剩下的工作。在生成示例之前，您可以從 9 種不同的印刷和草書樣式中進行選擇。

Clone UI

Clone UI[43] 是一個基于 AI 的工具，可讓您使用簡單的文本提示生成 UI 組件。

圖片

該應用程序包含五個免費的每日積分，并展示了用戶生成的現有 UI 組件。

Float UI

Float UI[44] 是一組 100 多個響應式且可訪問的 UI 組件，支持 RTL。還包括五個模板。

圖片

組件和模板是使用 Tailwind 構建的，并且易于自定義。您可以將它們與 React、Vue 和 Svelte 一起使用，也可以簡單地將 HTML 與 Tailwind 類一起使用。

Calendar.Js

Calendar.js[45] 是眾多可用的日期選擇器和日歷庫之一。該解決方案是輕量級的并且沒有依賴性。

圖片

它是完全可配置的，包括事件拖放、導出功能、從 iCal 和 JSON 導入等等。

PCUI

PCUI[46] 是另一個列出的基于 React 的組件庫。這個提供了一組預先設計樣式的組件。

圖片

有一本 storybook 演示了所有基本組件，您還可以查看一些 UI 示例，其中顯示了一些正在運行的高級示例（待辦事項列表和保留 UI 狀態“歷史”的示例）。

Accessible Color Palette Generator 可訪問的調色板生成器

易于訪問的調色板生成器[47]是確保您的任何設計都以一組易于訪問的顏色選擇開始的好方法。

圖片

您可以生成隨機可訪問的調色板或輸入任何顏色，該工具將根據您選擇的顏色為您生成可訪問的調色板。

Picography

Picography[48] 是流行的 Unsplash 的替代品，同樣提供高分辨率、免版稅的庫存照片。

圖片

這些照片經過分類、可搜索，并可在商業項目中免費使用。

Mailo

Mailo[49] 是一個基于組件的交互式 HTML 電子郵件布局設計器，可幫助您輕松構建跨客戶端和響應式 HTML 電子郵件。

圖片

Mailo 包含預構建的組件和團隊功能，這些組件旨在與幾乎任何電子郵件客戶端配合使用。

Pines

Pines[50] 是一個用 Tailwind 和 Alpine（一種流行的 JavaScript 框架，類似于現代版的 jQuery）構建的 UI 組件庫，它的名字非常貼切。

圖片

Pines 包含數十個組件，包括動畫、滑塊、工具提示、手風琴、模式等。

Park UI

Park UI[51] 是一組構建在 Ark UI 之上的設計精美的組件，而 Ark UI 本身也是一組可訪問和可定制的組件。

圖片

Park UI 可以幫助您構建自己的設計系統，并且主頁包含一個簡潔的交互式小部件，它演示了設置組件樣式是多么容易。您可以將 Park UI 與 React、Vue、Solid、Panda CSS 和 Tailwind 結合使用。

Iconhunt

Iconhunt[52] 是一個圖標搜索引擎，可讓您訪問 170,000 多個免費開源圖標。

圖片

圖標可以以各種格式下載，包括 Notion、Figma、SVG 或 PNG，并且您可以在下載之前自定義您選擇的任何圖標的顏色。

Sailboat UI

Sailboat UI[53] 是一個基于 Tailwind 的 UI 組件庫，包含 150 多個開源組件。

圖片

這些組件非常類似于 Bootstrap，您可以在文檔中搜索并查看組件的實時預覽。

Shaper

Shaper[54] 是一種 UI 界面生成設計工具，可讓您以視覺方式擺弄許多不同的界面功能來自定義您自己的 UI。

圖片

它包括自定義排版、間距、垂直節奏等的設置，之后您可以將設計標記復制并粘貼為 CSS 變量。

Maily

Maily[55] 是一個開源編輯器，可以使用一組預構建的組件輕松創建漂亮的 HTML 電子郵件。

圖片

目前，它包含的組件類別涵蓋按鈕、變量、文本格式、圖像、徽標、對齊方式、分隔符、間隔符、頁腳、列表和引號，并且還會有更多組件。

Realtime Colors

Realtime Colors[56] 提供了一個交互式網站，可讓您實時測試真實 UI 元素上的調色板和版式。

圖片

您可以使用該工具生成調色板和指向特定調色板的 deep 鏈接，以便與其他人共享或在深色或淺色模式下演示界面。

Strawberry

Strawberry[57] 被描述為一個“微型”前端框架，它提供零依賴性的反應性和可組合性，無構建步驟，壓縮后的大小小于 3KB。

圖片

這里的想法不是提供 React 或 Vue 的替代品，而是提供用于更簡單的應用程序和其他低維護項目的東西。

Swap.Js

Swap.js[58] 是一個 JavaScript 微型庫，它使用 HTML 屬性，以不到 100 行的代碼在網頁中實現 Ajax 式導航。

圖片

這與 HTMX 和 Hotwire 等庫是一樣的，允許您通過從服務器以 HTML 片段的形式發送請求來替換頁面上的內容。

RestorePhotos.Io

RestorePhotos.io[59] 是一款開源工具，它使用 AI 嘗試恢復或糾正舊的、模糊的或損壞的照片。

圖片

您可以在本地部署自己的版本或使用他們的在線工具每天免費恢復最多 5 張照片。

Better Select

Better Select[60] 是一個提供最小自定義選擇元素的 Web 組件，這是 Web 開發人員幾十年來一直在努力實現的目標！

圖片

該解決方案提供了一個后備選項，并包括一小組通過自定義功能和外觀的屬性的選項。

Space.Js

有趣的是，Space.js[61] 最終成為我的時事通訊中點擊次數最多的工具。

圖片

它是基于 Three.js 的兩個兄弟庫之一。主要的一個用于創建“未來”UI 和面板組件，另一個（稱為 Alien.js）用于 3D 實用程序、材質、著色器和物理。

2023 年您最喜歡的工具是什么？

今年最熱門前端工具的綜述就到此為止了。我相信您會發現其中至少有一些可以在未來幾個月的新項目中使用。

一如既往，我一直在為前端開發人員尋找最新的工具，所以請隨時在評論中發布您過去一年中最喜歡的工具，如果您想跟上新的工具，您可以訂閱 Web Tools Weekly[62] 定期做事！

https://www.smashingmagazine.com/2024/01/top-frontend-tools-2023/

參考資料

[1]Web Tools Weekly: https://webtoolsweekly.com/

[2]Kuma UI: https://www.kuma-ui.com/

[3]Boxslider: https://github.com/p-m-p/slider

[4]Effect: https://effect.website/

[5]HatTip: https://github.com/hattipjs/hattip

[6]LiveViewJS: https://www.liveviewjs.com/

[7]Scrollbar.app: https://scrollbar.app/

[8]OpenGPT: https://github.com/futantan/OpenGpt

[9]Free Icons: https://free-icons.github.io/free-icons/

[10]Materialise: https://materializeweb.com/

[11]qr-code: https://github.com/bitjson/qr-code

[12]GradientGenerator: https://ggradient.com/

[13]iDraw.js: https://idraw.js.org/

[14]VanJS: https://vanjs.org/

[15]Mamba UI: https://mambaui.com/

[16]Termino.js: https://github.com/MarketingPipeline/Termino.js

[17]SVG Chart Generator: https://www.magicpattern.design/tools/svg-chart-generator

[18]PeepsLab: https://peepslab.com/

[19]Ribbon Shapes: https://css-generators.com/ribbon-shapes/

[20]big-AGI: https://github.com/enricoros/big-agi

[21]Easy Email: https://github.com/zalify/easy-email

[22]CSS Components: https://www.css-components.net/

[23]Toaster: https://petertyliu.github.io/toaster/

[24]Fontpair: https://www.fontpair.co/

[25]Breadit: https://github.com/joschan21/breadit

[26]Keep React: https://react.keepdesign.io/

[27]TW Elements: https://tw-elements.com/

[28]Autocomplete: https://github.com/algolia/autocomplete

[29]CSS Loaders: https://css-loaders.com/

[30]Flectofy: https://flectofy.flecto.io/

[31]Picyard: https://www.picyard.in/

[32]UI Content: https://uicontent.co/

[33]Vessel.js: https://shiplab.github.io/vesseljs/

[34]Modern Font Stacks: https://modernfontstacks.com/

[35]FancySymbol: https://fancysymbol.com/

[36]Observable Plot: https://observablehq.com/plot/

[37]華盛頓郵報設計系統: https://build.washingtonpost.com/

[38]FormSpamPrevention: https://github.com/rodenacker/FormSpamPrevention

[39]Chatbox: https://chatboxai.app/

[40]CSS Generators: https://cssbud.com/css-generator/

[41]Leporello.js: https://leporello.tech/

[42]Calligrapher.ai: https://www.calligrapher.ai/

[43]Clone UI: https://clone-ui.design/

[44]Float UI: https://floatui.com/

[45]Calendar.js: https://calendar-js.com/

[46]PCUI: https://github.com/playcanvas/pcui/

[47]調色板生成器: https://venngage.com/tools/accessible-color-palette-generator

[48]Picography: https://picography.co/

[49]Mailo: https://mailo.app/

[50]Pines: https://devdojo.com/pines

[51]Park UI: https://park-ui.com/

[52]Iconhunt: https://www.iconhunt.site/

[53]Sailboat UI: https://sailboatui.com/

[54]Shaper: https://shaper.design/

[55]Maily: https://maily.to/

[56]Realtime Colors: https://www.realtimecolors.com/

[57]Strawberry: https://strawberry.quest/

[58]Swap.js: https://github.com/josephernest/Swap

[59]RestorePhotos.io: https://www.restorephotos.io/

[60]Better Select: https://github.com/siit-dev/better-select

[61]Space.js: https://github.com/alienkitty/space.js

[62]Web Tools Weekly: https://webtoolsweekly.com/