在過去的12個月裡，我在我的時事通訊《Web Tools Weekly》中分享了數百個工具。 我為前端和全棧開發人員提供了大量實用的庫、助手和其他有用的東西。 這些工具跨越了許多類別，包括JavaScript庫和實用程式、Web框架、CSS生成器、資料庫工具、React元件、CLI工具，甚至基於ChatGPT和AI的工具，在過去的一年裡，我開始定期報道後者。
本文中的60個工具是我2023年時事通訊中被點選最多的網路開發人員工具。 如您所見，其中大多數對於前端和全棧開發來說非常實用，因此您可能會發現許多您想在即將到來的專案中新增為書籤或使用的東西。 就受歡迎程度而言，該列表大致按相反的順序排列，因此請務必向下滾動，檢視今年最受歡迎的工具是什麼！
Kuma UI
Kuma UI, 它自稱是“CSS-in-JS的未來”，是一個無頭、實用優先、零執行時元件庫，包括自己的CSS-in-JS解決方案。
Kuma UI的不同之處在於其混合方法，該方法允許在執行時動態更改樣式，同時仍然保留零執行時CSS-in-JS的效能優勢。
Boxslider
儘管近年來人們不鼓勵使用旋轉木馬元件，但我的客戶仍然要求使用它們，開發人員總是在尋找它們。 Boxslider 就是這樣的一個元件。
這個旋轉木馬或內容滑塊包括七個幻燈片過渡效果，您可以在演示頁面上嘗試，包括3D立方體效果、瓷磚翻轉和簡單的淡出。
Effect
Effect 被描述為“一個強大的TypeScript庫，旨在幫助開發人員輕鬆建立複雜、同步和非同步程式。”
該效果背後的想法是幫助開發人員透過稱為結構化併發的東西來構建強大和可擴充套件的應用程式，這是一種允許多個複雜操作同時執行的程式設計正規化。
網路表單是每個有意義的互動的核心。 認識Adam Silver的表單設計模式，這是為網路設計和構建表單的實用指南。
HatTip
如果您使用Express.js來構建Node.js應用程式，您將需要檢視 HatTip。 它提供了一個類似於Express.js的解決方案，但具有更通用的方法。
HatTip是一組用於構建HTTP伺服器應用程式的JavaScript軟體包，允許您編寫可以部署在任何地方的伺服器程式碼——AWS、Cloudflare Workers、Vercel等。
LiveViewJS
LiveViewJS 是一個簡單而強大的框架，用於在Node.js和Deno中構建“LiveViews”。 LiveViews在Elixir的Phoenix框架中普及，涉及將狀態管理和事件處理移至伺服器，並透過WebSockets進行HTML更新。
這項技術允許您構建單頁應用程式體驗，具有快速首次繪畫、實時和多人功能等功能，無需客戶端路由解決方案等。
Scrollbar.app
Scrollbar.app是一個用於自定義瀏覽器捲軸的一站式參考和程式碼生成工具。 您可以直接在頁面上進行實時測試和調整捲軸，然後複製CSS。
捲軸程式碼涉及使用特定於供應商的偽元素，但也結合了對未來友好的捲軸顏色。
OpenGPT
OpenGPT 是過去一年左右一直在迴圈的眾多基於ChatGPT的工具之一。 這是一個開源的人工智慧平臺，允許任何人使用和建立基於ChatGPT的應用程式。
服務本身的主平臺允許您搜尋超過11,000個ChatGPT應用程式的分類目錄。
Free Icons
圖示集似乎總是製作這些年終列表。 Free Icons 是一組由22,000多個圖示組成的通用名稱，包括品牌圖示和通用圖示。
全部為SVG格式，您可以在主頁上按關鍵字進行過濾，或透過GitHub儲存庫獲取整個批次。
Materialize
Materialize 是基於谷歌材料設計指南的UI元件的開源框架。
該專案包括20多個類別的元件，是一個不再維護的舊專案的分叉。
Qr-Code
qr-code是一個基於SVG的Web元件，可以生成可動畫和可定製的二維碼。 有一個互動式演示頁面，您可以在其中嘗試不同的動畫效果。
生成的二維碼基於SVG，元件沒有依賴項，易於自定義。
GradientGenerator
GradientGenerator 是一個互動式CSS漸變構建器，允許您構建高階分層漸變。 您可以使用一大堆不同的設定和功能自定義分層漸變。
該應用程式還允許您將漸變儲存到庫中，甚至匯入社群構建的漸變。
IDraw.js
iDraw.js 是一個簡單的JavaScript框架，用於建立允許基於Canvas繪圖的應用程式。
在現場遊樂場中有一些很好的例子，你可以看到API的簡單性和易用性。
VanJS
VanJS 是一個類似於React的UI庫，但不使用JSX、虛擬DOM、transpiling等。 這個想法是避免通常與使用React等庫相關的配置開銷。
該庫聲稱是世界上最小的UI庫，低於1kb。 與React、Vue等相比，它對TypeScript具有一流的支援，並且自然而然地擁有強大的效能。
Mamba UI
Mamba UI 是列入今年列表的多個基於尾風的工具中的第一個。 這是一個基於流行的實用優先CSS框架的150多個元件和模板的UI庫。
該庫包括40多個類別的預樣式元件，您可以快速獲取HTML、Vue或JSX格式的任何元件的程式碼。
Termino.js
Termino.js 是一個無依賴的JavaScript元件，允許您將基於終端的嵌入式動畫、遊戲和應用程式新增到網頁中。
它是可定製的，可以輕鬆構建鍵盤打字效果等終端動畫。 演示頁面包括一些簡單的示例，包括一個嵌入式終端應用程式，使用者可以在其中獲取任何GitHub配置檔案上的資訊。
SVG Chart Generator
SVG Chart Generator 是一個設計精美的圖表生成器，允許您以行或條形格式生成基於SVG的圖表。
生成器允許您透過寬度/高度設定、點數、平滑度等以互動方式自定義圖表。 您還可以匯入您自己的資料點。
PeepsLab
PeepsLab 是一個簡單的線上工具，用於自定義您自己的獨特插圖使用者頭像。 您可以透過迴圈瀏覽膚色、頭髮顏色、面部毛髮、配飾、頭部、臉部樣式等不同的選項來構建自己的頭像。
或者，在以PNG格式下載之前，您只需點選“隨機化”按鈕即可生成隨機頭像。
Ribbon Shapes
Ribbon Shapes是一個純CSS絲帶的線上畫廊，幾乎可以想象到的任何絲帶格式。
畫廊包括100多個功能區，每個功能區都由單個HTML元素建立，並且使用CSS變數易於自定義。
Big-AGI
big-AGI 是一個由GPT驅動的個人應用程式，被描述為“需要功能、形式、簡單性和速度的專業人士的GPT應用程式”。
它具有響應迅速、移動友好的介面，包括人工智慧角色、文字到影象、語音、響應流、程式碼高亮顯示和執行、PDF匯入等功能。
Easy Email
Easy Email 是一個基於流行的HTML電子郵件創作框架MJML的拖放電子郵件編輯器。
此解決方案允許您將結構化的JSON資料轉換為與主要電子郵件客戶端相容的HTML。 包括輕鬆自定義塊、元件和配置主題的功能。
CSS Components
CSS Components 用這個新的解決方案向CSS-in-JS空間致敬，被描述為“不是另一個造型系統”。
此解決方案是對將CSS-in-JS工具與React Server Components一起使用所固有的挑戰的回應，該庫的靈感來自另一個此類工具Stitches，並承諾改善開發人員體驗。
Toaster
Toaster 是一個實驗性的純CSS 3D編輯器，允許您使用帶有CSS變換的純HTML構建模型。
作者承認該工具不太實用，目前只能以JSON格式匯出/匯入（無CSS匯出）。 隨著效能的提高，這可能是一個有用的工具。
Fontpair
Fontpair 不是新資源，但它在今年的名單上。 這是一個字型目錄，專門用於查詢在您的設計中很好地匹配的字型。
所有字型都來自谷歌字型，配對由作者手動策劃。
Breadit
Breadit 是一個由Next.js App Router、TypeScript和Tailwind構建的現代全棧Reddit克隆。
這是一個學習和實驗的好應用程式，具有無限滾動、NextAuth、影象上傳、功能豐富的帖子編輯器、巢狀評論等。
Keep React
Keep React 是一個基於Tailwind和React的元件庫，包括40多個元件和互動式元素。
元件是預先設計的，但所有元件都很容易使用尾風類進行定製，幾乎適用於任何專案。
TW Elements
TW Elements 是一個包含500多個Bootstrap元件的龐大庫，使用Tailwind CSS重新建立。 對於那些已經熟悉Bootstrap並正在尋找現代替代品的人來說，這是一個不錯的選擇。
與Bootstrap框架中的原始元件相比，該庫擁有更好的整體設計和功能，您可以輕鬆地從主頁按關鍵字搜尋元件。
Autocomplete
Autocomplete 是一個開源、生產就緒的JavaScript庫，用於為表單輸入和搜尋欄位構建可定製的自動完成體驗。
您可以透過定義容器、填充它的資料以及任何虛擬DOM解決方案（JS、React、Vue、Preact等）輕鬆構建自動完成體驗。
CSS Loaders
CSS Loaders 是一個由600多個CSS載入動畫組成的龐大集合，分為30多個類別。
此畫廊幾乎包括您能想到的任何風格的載入器，只需單擊一下，您就可以輕鬆複製/貼上任何載入器的HTML/CSS。
Flectofy
Flectofy 是一個互動式工具，提供了一個介面，允許您構建獨特的SVG形狀。
這裡的形狀樣式相當利基，因此它們在太多上下文中沒有用處，但介面的工作方式和形狀的外觀肯定不同。
Picyard
Picyard 是一個生成具有吸引力背景的螢幕截圖的應用程式，用於模型、社交媒體帖子等。
影象/背景工具是免費的，但該應用程式還包括用於生成有吸引力的程式碼片段、圖表、思維導圖、時間線等的高階功能。
UI Content
UI Content 被描述為“查詢專業佔位符文字的最佳場所”。 包括七個不同類別下的佔位符文字，還包括虛擬SVG徽標。
這裡的想法是避免典型的“lorem ipsum”，而是使用實際內容，以確保您的設計看起來更接近最終產品。
Vessel.js #
Vessel.js 這是我在過去一年裡發現的更獨特的專案之一。 這是一個基於WebGL庫Three.js的JavaScript庫，用於概念船舶設計，換句話說，建造船隻。
您可以在畫廊中檢視一些示例，還有一個教程，讓您快速瞭解使用庫的最佳實踐——假設這恰好是您的利基市場！
Modern Font Stacks
Modern Font Stacks 是一個資源，可以幫助您識別效能最好的字型堆疊。 也就是說，堆疊基於預裝的預設作業系統字型。
您可以從特定的排版類別中進行選擇，如傳統、舊風格、新怪誕、等空間程式碼、手寫等。 同樣，這些通常是Windows、Mac、Linux、iOS和Android上已經可用的字型，在不需要額外的資源請求的情況下為您提供最佳支援。
FancySymbol
FancySymbol 是一個準備複製/貼上的特殊字元、文字符號、外語符號等的巨大儲存庫。
包括50多個類別的符號，還允許您建立獨特和花哨的可複製/貼上文字，如倒立文字或用“隱形墨水”書寫的文字等。
Observable Plot
Observable Plot 是一個JavaScript庫，用於使用基於SVG的圖表建立探索性資料視覺化（即“圖”）。
圖的介面可以包括特定特徵，如刻度、投影、圖例、曲線、標記等。 您必須檢視文件，瞭解這些不同功能的情況，這些功能使用許多互動式示例進行了說明。
Washington Post Design System
《華盛頓郵報》設計系統是專門為與《華盛頓郵報》相關的房產構建的UI套件，《華盛頓郵報》是美國受歡迎的日報和新聞媒體。
雖然它是為WaPo的工程師設計的，但它是麻省理工學院許可的，並使用Stitches和Radix UI內建了React。 因此，如果您使用類似的技術堆疊，可定製的元件和其他資產可能會有用。
FormSpamPrevention
FormSpamPrevention 這不是一個受歡迎的專案，但當我去年分享它時，它得到了相當大的牽引力。 它提供了一個簡單的香草JavaScript和HTML解決方案，以防止表單垃圾郵件。
該指令碼基於將自定義HTML標籤轉換為有效HTML標籤的表單內容。
Chatbox
Chatbox 是適用於Windows、Mac和Linux的原生應用程式，可讓您訪問桌面上的人工智慧副駕駛。
這個特定的工具並不嚴格專注於網路開發，但它利用了各種LLM模型，可以作為各種日常技術相關任務的整體生產力應用程式。
CSS Generators
CSS Generators 不是一個單一的工具，而是CSS生成器的一小部分，這是一種在前端開發人員中流行的工具。
我喜歡這套生成器，因為它有幾種你在其他地方看不到的型別：兩個發光生成器（用於文字和元素）和一個下劃線生成器。
Leporello.js
Leporello.js 是JavaScript的互動式函數語言程式設計IDE。 這意味著您的程式碼在您鍵入時會立即執行，這可能會改善除錯過程。
我們大多數人可能會使用特定的IDE，但如果你喜歡嘗試新的IDE，這可能是一個不錯的檢視。
Calligrapher.ai
Calligrapher.ai 是一個人工智慧生成的手寫樣本的線上工具，您可以下載為SVG。
無需“寫”任何東西；只需鍵入一些文字並自定義筆畫寬度和可讀性，人工智慧將完成剩下的工作。 在生成樣本之前，您可以從9種不同的列印和草書樣式中進行選擇。
Clone UI
Clone UI 是一個基於人工智慧的工具，允許您透過簡單的文字提示生成UI元件。
該應用程式包括五個免費的每日積分，幷包括使用者生成的現有UI元件的展示。
Float UI
Float UI 是一組100多個響應式和可訪問的UI元件，支援RTL。 還包括五個模板。
元件和模板是用尾風構建的，易於自定義。 您可以將它們與React、Vue和Svelte一起使用，或者您可以簡單地將HTML與Tailwind類一起使用。
Calendar.js
Calendar.js 是眾多可用的日期選擇器和日曆庫之一。 這個解決方案重量輕，沒有依賴性。
它完全可配置，包括事件的拖放、匯出功能、從iCal和JSON匯入等。
PCUI
PCUI 是另一個基於React的元件庫，它製作了一個列表。 這個提供了一組預樣式的元件。
有一本演示所有基本元件的故事書，您還可以檢視一些UI示例，這些示例顯示了一些執行中的高階示例（待辦事項列表和儲存UI狀態“歷史記錄”的示例）。
Accessible Color Palette Generator
Accessible Color Palette Generator 是確保您的任何設計都以一組可訪問的顏色選擇開始的好方法。
您可以生成隨機可訪問調色盤或輸入任何顏色，該工具將根據您選擇的顏色為您生成可訪問調色盤。
Picography
Picography 是流行的Unsplash的替代品，同樣提供高解析度、免版稅的庫存照片。
這些照片經過分類和可搜尋，可在商業專案中免費使用。
Mailo
Mailo 是一個基於元件的互動式HTML電子郵件佈局設計器，可幫助您輕鬆構建跨客戶端和響應式HTML電子郵件。
Mailo包括預建的元件和團隊功能，這些元件旨在與幾乎任何電子郵件客戶端配合使用。
Pines
Pines 是一個恰當命名的UI元件庫，由Tailwind和Alpine構建，Tailwind和Alpine是流行的JavaScript框架，類似於現代版本的jQuery。
Pines包括數十個元件，包括動畫、滑塊、工具提示、手風琴、模態等。
Park UI
Park UI 是一組設計精美的元件，建立在Ark UI之上，它本身就是一組可訪問和可定製的元件。
Park UI可以幫助您構建自己的設計系統，主頁包含一個整潔的互動式小部件，展示了元件的樣式是多麼容易。 您可以將Park UI與React、Vue、Solid、Panda CSS和Tailwind一起使用。
Iconhunt
Sailboat UI
Sailboat UI 是一個基於Tailwind的UI元件庫，包括150多個開源元件。
這些元件非常具有Bootstrap風格，您可以在文件中搜尋和檢視元件的實時預覽。
Shaper
Shaper 是UI介面的生成設計工具，允許您直觀地擺弄許多不同的介面功能來自定義您自己的UI。
它包括自定義排版、間距、垂直節奏等設定，之後您可以將設計令牌複製並貼上為CSS變數。
Maily
Maily 是一個開源編輯器，使用一組預建元件可以輕鬆建立漂亮的HTML電子郵件。
它目前包括類別的元件，包括按鈕、變數、文字格式、影象、徽標、對齊、分隔符、間隔、頁尾、列表和引號，還有更多正在進行中。
Realtime Colors
Realtime Colors 提供一個互動式網站，讓您實時測試真實UI元素上的調色盤和排版。
您可以使用該工具生成調色盤和指向特定調色盤的深度連結，以便與他人共享或在深色或淺色模式下演示介面。
Strawberry
Strawberry 被描述為一個“小”的前端框架，提供零依賴、無構建步驟、gzip壓縮不到3KB的反應性和可組合性。
這裡的想法不是提供React或Vue的替代品，而是用於更簡單的應用程式和其他低維護專案。
Swap.js
Swap.js 是一個JavaScript微圖書館，它使用HTML屬性來促進在不到100行程式碼的網頁中的Ajax風格導航。
這與HTMX和Hotwire等庫相同，允許您透過從伺服器傳送請求作為HTML片段來替換頁面上的內容。
RestorePhotos.io
restorePhotos.io 是一個開源工具，它使用人工智慧來嘗試恢復或更正舊的、模糊的或損壞的照片。
您可以在本地部署您自己的版本，或使用他們的線上工具每天免費恢復最多5張照片。
Better Select
Better Select 是一個提供最小自定義選擇元素的Web元件，這是Web開發人員幾十年來一直在努力實現的！
此解決方案提供了一個回退選項，並透過自定義功能和外觀的屬性包括一小組選項。
Space.js
2023年你最喜歡的工具是什麼？
今年最熱門的前端工具綜述到此結束。 我相信在未來幾個月裡，你會發現其中至少有幾個可以用於新專案。
