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

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

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

Kuma UI

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

圖片

Kuma UI 的與眾不同之處在于它的混合方法，允許在運(yùn)行時(shí)動(dòng)態(tài)更改樣式，同時(shí)仍然保持零運(yùn)行時(shí) CSS-in-JS 的性能優(yōu)勢。

Boxslider

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

圖片

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

Effect

Effect[4] 被描述為“一個(gè)強(qiáng)大的 TypeScript 庫，旨在幫助開發(fā)人員輕松創(chuàng)建復(fù)雜的、同步的和異步的程序”。

圖片

這種效果背后的理念是通過一種叫做結(jié)構(gòu)化并發(fā)的方式來幫助開發(fā)人員構(gòu)建健壯且可擴(kuò)展的應(yīng)用程序，結(jié)構(gòu)化并發(fā)是一種允許多個(gè)復(fù)雜操作同時(shí)運(yùn)行的編程范例。

HatTip

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

圖片

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

LiveViewJS

LiveViewJS[6] 是一個(gè)簡單而強(qiáng)大的框架，用于在 Node.js 和 Deno 中構(gòu)建 “LiveViews”，LiveViews 在 Elixir 的 Phoenix 框架中得到了推廣，它涉及將狀態(tài)管理和事件處理轉(zhuǎn)移到服務(wù)器，并通過 WebSockets 進(jìn)行 HTML 更新。

圖片

該技術(shù)允許您構(gòu)建單頁應(yīng)用程序體驗(yàn)，具有快速首次繪制、實(shí)時(shí)和多人游戲功能、無需客戶端路由解決方案等功能。

Scrollbar.App

Scrollbar.app[7] 是一個(gè)用于自定義瀏覽器滾動(dòng)條的一站式參考和代碼生成工具。您可以直接在頁面上實(shí)時(shí)測試和調(diào)整滾動(dòng)條，然后復(fù)制 CSS。

圖片

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

OpenGPT

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

圖片

該服務(wù)的主平臺本身允許您搜索超過 11,000 個(gè) ChatGPT 應(yīng)用程序的分類目錄。

Free Icons

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

圖片

所有內(nèi)容均為 SVG 格式，您可以在主頁上按關(guān)鍵字進(jìn)行過濾，或通過 GitHub 存儲(chǔ)庫獲取全部內(nèi)容。

Materialize

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

圖片

該項(xiàng)目包括 20 多類組件，是一個(gè)不再維護(hù)的老項(xiàng)目的分叉。

Qr-Code

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

圖片

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

GradientGenerator

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

該應(yīng)用還允許你將漸變效果保存到你的資料庫，甚至導(dǎo)入社區(qū)制作的漸變效果。

IDraw.Js

iDraw.js[13] 是一個(gè)簡單的 JavaScript 框架，用于創(chuàng)建允許基于 Canvas 繪圖的應(yīng)用程序。

圖片

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

VanJS

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

圖片

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

Mamba UI

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

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

Termino.Js

Termino.js[16] 是一個(gè)無依賴關(guān)系的 JavaScript 組件，可讓您向網(wǎng)頁添加嵌入式基于終端的動(dòng)畫、游戲和應(yīng)用程序。

圖片

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

SVG Chart Generator

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

圖片

該生成器允許您交互式地自定義圖表的寬度/高度設(shè)置、點(diǎn)數(shù)、平滑度等。您還可以導(dǎo)入自己的數(shù)據(jù)點(diǎn)。

PeepsLab

PeepsLab[18] 是一個(gè)簡單的在線工具，用于定制您自己獨(dú)特的插圖用戶頭像。您可以通過循環(huán)選擇膚色、頭發(fā)顏色、面部毛發(fā)、配飾、頭部、面部樣式等不同選項(xiàng)來構(gòu)建自己的頭像。

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

Ribbon Shapes

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

該庫包含 100 多個(gè)功能區(qū)，每個(gè)功能區(qū)均使用單個(gè) HTML 元素創(chuàng)建，并且可以使用 CSS 變量輕松自定義。

Big-AGI

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

圖片

它具有響應(yīng)式、適合移動(dòng)設(shè)備的界面，包括 AI 角色、文本到圖像、語音、響應(yīng)流、代碼突出顯示和執(zhí)行、PDF 導(dǎo)入等功能。

Easy Email

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

圖片

該解決方案允許您將結(jié)構(gòu)化 JSON 數(shù)據(jù)轉(zhuǎn)換為與主要電子郵件客戶端兼容的 HTML。包括輕松自定義塊、組件和配置主題的功能。

CSS Components

CSS Components[22] 通過這個(gè)全新的解決方案進(jìn)軍 CSS-in-JS 領(lǐng)域，被描述為“不是另一個(gè)樣式系統(tǒng)”。

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

Toaster

Toaster[23] 是一個(gè)實(shí)驗(yàn)性的純 CSS 3D 編輯器，允許您使用純 HTML 和 CSS 轉(zhuǎn)換來構(gòu)建模型。

圖片

作者承認(rèn)該工具不太實(shí)用，目前只能以 JSON 格式導(dǎo)出/導(dǎo)入（無法導(dǎo)出 CSS）。隨著性能的提高，這可能是一個(gè)有用的工具。

Fontpair

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

圖片

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

Breadit

Breadit[25] 是一個(gè)現(xiàn)代的全棧 Reddit 克隆，使用 Next.js App Router、TypeScript 和 Tailwind 構(gòu)建。

這是一個(gè)很好的學(xué)習(xí)和實(shí)驗(yàn)應(yīng)用程序，具有無限滾動(dòng)、NextAuth、圖像上傳、功能豐富的帖子編輯器、嵌套評論等等。

Keep React

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

圖片

這些組件是預(yù)先設(shè)計(jì)的，但所有組件都可以使用 Tailwind 類輕松自定義，并且?guī)缀踹m用于任何項(xiàng)目。

TW Elements

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

圖片

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

Autocomplete

Autocomplete[28] 是一個(gè)開源、可用于生產(chǎn)的 JavaScript 庫，用于為表單輸入和搜索字段構(gòu)建可定制的自動(dòng)完成體驗(yàn)。

圖片

您可以通過定義容器、填充容器的數(shù)據(jù)以及任何虛擬 DOM 解決方案（JS、React、Vue、Preact 等）輕松構(gòu)建自動(dòng)完成體驗(yàn)。

CSS Loaders

CSS Loaders[29] 是一個(gè)龐大的集合，包含 30 多個(gè)類別下的 600 多個(gè) CSS 加載動(dòng)畫。

圖片

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

Flectofy

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

圖片

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

Picyard

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

圖片

圖像/背景工具是免費(fèi)的，但該應(yīng)用程序還包括用于生成有吸引力的代碼片段、圖表、思維導(dǎo)圖、時(shí)間表等的高級功能。

UI Content

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

這里的想法是避免典型的“l(fā)orem ipsum”并使用實(shí)際內(nèi)容來確保您的設(shè)計(jì)看起來更接近最終產(chǎn)品。

Vessel.Js

Vessel.js[33] 是我在過去一年中發(fā)現(xiàn)的比較獨(dú)特的項(xiàng)目之一。它是一個(gè)基于 Three.js（WebGL 庫）的 JavaScript 庫，用于概念船舶設(shè)計(jì)，換句話說，就是建造船只。

圖片

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

Modern Font Stacks

Modern Font Stacks[34]（現(xiàn)代字體堆棧）是一個(gè)幫助你識別性能最佳的字體堆棧的資源。也就是說，這些堆棧基于預(yù)裝的默認(rèn)操作系統(tǒng)字體。

圖片

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

FancySymbol

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

圖片

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

Observable Plot

Observable Plot[36] 是一個(gè) JavaScript 庫，用于使用基于 SVG 的圖表創(chuàng)建探索性數(shù)據(jù)可視化（即“繪圖”）。

圖片

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

Washington Post Design System 華盛頓郵報(bào)設(shè)計(jì)系統(tǒng)

華盛頓郵報(bào)設(shè)計(jì)系統(tǒng)[37]是專門為與美國流行的日報(bào)和新聞媒體《華盛頓郵報(bào)》相關(guān)的屬性構(gòu)建的 UI 套件。

圖片

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

FormSpamPrevention 表單垃圾郵件預(yù)防

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

圖片

該腳本基于對表單內(nèi)容使用自定義 HTML 標(biāo)簽，并將其轉(zhuǎn)換為有效的 HTML 標(biāo)簽。

Chatbox

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

圖片

這個(gè)特殊的工具并不嚴(yán)格專注于 Web 開發(fā)，但它利用了各種 LLM 模型，并且可以用作各種日常技術(shù)相關(guān)任務(wù)的整體生產(chǎn)力應(yīng)用程序。

CSS Generators

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

圖片

我喜歡這套生成器，因?yàn)樗袔追N您在其他地方看不到的類型：兩個(gè)輝光生成器（用于文本和元素）和一個(gè)下劃線生成器。

Leporello.Js

Leporello.js[41] 是一個(gè)用于 JavaScript 的交互式函數(shù)式編程 IDE。這意味著您的代碼會(huì)在您鍵入時(shí)立即執(zhí)行，從而可能改善調(diào)試過程。

圖片

我們大多數(shù)人可能會(huì)開始使用特定的 IDE，但如果您想嘗試新的 IDE，那么這可能是一個(gè)不錯(cuò)的選擇。

Calligrapher.Ai

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

圖片

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

Clone UI

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

圖片

該應(yīng)用程序包含五個(gè)免費(fèi)的每日積分，并展示了用戶生成的現(xiàn)有 UI 組件。

Float UI

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

圖片

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

Calendar.Js

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

圖片

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

PCUI

PCUI[46] 是另一個(gè)列出的基于 React 的組件庫。這個(gè)提供了一組預(yù)先設(shè)計(jì)樣式的組件。

圖片

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

Accessible Color Palette Generator 可訪問的調(diào)色板生成器

易于訪問的調(diào)色板生成器[47]是確保您的任何設(shè)計(jì)都以一組易于訪問的顏色選擇開始的好方法。

圖片

您可以生成隨機(jī)可訪問的調(diào)色板或輸入任何顏色，該工具將根據(jù)您選擇的顏色為您生成可訪問的調(diào)色板。

Picography

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

圖片

這些照片經(jīng)過分類、可搜索，并可在商業(yè)項(xiàng)目中免費(fèi)使用。

Mailo

Mailo[49] 是一個(gè)基于組件的交互式 HTML 電子郵件布局設(shè)計(jì)器，可幫助您輕松構(gòu)建跨客戶端和響應(yīng)式 HTML 電子郵件。

圖片

Mailo 包含預(yù)構(gòu)建的組件和團(tuán)隊(duì)功能，這些組件旨在與幾乎任何電子郵件客戶端配合使用。

Pines

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

圖片

Pines 包含數(shù)十個(gè)組件，包括動(dòng)畫、滑塊、工具提示、手風(fēng)琴、模式等。

Park UI

Park UI[51] 是一組構(gòu)建在 Ark UI 之上的設(shè)計(jì)精美的組件，而 Ark UI 本身也是一組可訪問和可定制的組件。

圖片

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

Iconhunt

Iconhunt[52] 是一個(gè)圖標(biāo)搜索引擎，可讓您訪問 170,000 多個(gè)免費(fèi)開源圖標(biāo)。

圖片

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

Sailboat UI

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

圖片

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

Shaper

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

圖片

它包括自定義排版、間距、垂直節(jié)奏等的設(shè)置，之后您可以將設(shè)計(jì)標(biāo)記復(fù)制并粘貼為 CSS 變量。

Maily

Maily[55] 是一個(gè)開源編輯器，可以使用一組預(yù)構(gòu)建的組件輕松創(chuàng)建漂亮的 HTML 電子郵件。

圖片

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

Realtime Colors

Realtime Colors[56] 提供了一個(gè)交互式網(wǎng)站，可讓您實(shí)時(shí)測試真實(shí) UI 元素上的調(diào)色板和版式。

圖片

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

Strawberry

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

圖片

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

Swap.Js

Swap.js[58] 是一個(gè) JavaScript 微型庫，它使用 HTML 屬性，以不到 100 行的代碼在網(wǎng)頁中實(shí)現(xiàn) Ajax 式導(dǎo)航。

圖片

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

RestorePhotos.Io

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

圖片

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

Better Select

Better Select[60] 是一個(gè)提供最小自定義選擇元素的 Web 組件，這是 Web 開發(fā)人員幾十年來一直在努力實(shí)現(xiàn)的目標(biāo)！

圖片

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

Space.Js

有趣的是，Space.js[61] 最終成為我的時(shí)事通訊中點(diǎn)擊次數(shù)最多的工具。

圖片

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

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

今年最熱門前端工具的綜述就到此為止了。我相信您會(huì)發(fā)現(xiàn)其中至少有一些可以在未來幾個(gè)月的新項(xiàng)目中使用。

一如既往，我一直在為前端開發(fā)人員尋找最新的工具，所以請隨時(shí)在評論中發(fā)布您過去一年中最喜歡的工具，如果您想跟上新的工具，您可以訂閱 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]華盛頓郵報(bào)設(shè)計(jì)系統(tǒng): 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]調(diào)色板生成器: 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/