2023 頂級(jí)前端工具，你知道幾個(gè)？

作者：大家的林語(yǔ)冰 2024-02-26 00:00:00

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

大家好，這里是大家的林語(yǔ)冰。堅(jiān)持閱讀，自律打卡，每天一次，進(jìn)步一點(diǎn)。

本期共享的是 —— 2023 人氣最高的 Web 開(kāi)發(fā)者工具，這些工具涵蓋許多類別，包括 JS 庫(kù)、Web 框架、CSS 生成器、數(shù)據(jù)庫(kù)工具、React 組件、CLI 工具，甚至 ChatGPT 和AI 筑基的工具。

Effect

Effect 被描述為“一個(gè)給力的 TS 庫(kù)，旨在輔助開(kāi)發(fā)者輕松創(chuàng)建復(fù)雜的同步和異步程序。”

圖片

Effect 的幕后動(dòng)機(jī)是輔助開(kāi)發(fā)者通過(guò)所謂的結(jié)構(gòu)化并發(fā) —— 一種允許多個(gè)復(fù)雜操作同時(shí)運(yùn)行的編程范式，構(gòu)建魯棒可擴(kuò)展的 App。

VanJS

VanJS 是一個(gè)類似 React 的 UI 庫(kù)，但不使用 JSX、虛擬 DOM、轉(zhuǎn)譯等。此想法是為了避免通常與使用諸如 React 之類的庫(kù)相關(guān)的配置開(kāi)銷。

圖片

VanJS 聲稱是地球上最小的 UI 庫(kù)，大小不到 1kb。它對(duì) TS 有一流的支持，天然擁有比 React/Vue 等給力的性能。

CSS Loaders

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

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

Kuma UI

Kuma UI 自詡為“CSS-in-JS 的未來(lái)”，是一個(gè) headless、實(shí)用程序優(yōu)先、零運(yùn)行時(shí)的組件庫(kù)，其中包括自己的 CSS-in-JS 解決方案。

圖片

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

OpenGPT

OpenGPT 是過(guò)去一年里人氣爆棚的眾多 ChatGPT 筑基的工具之一。這是一個(gè)開(kāi)源 AI 平臺(tái)，允許任何人使用和創(chuàng)建 ChatGPT 筑基的 App。

圖片

該服務(wù)的主平臺(tái)本身允許我們搜索超過(guò) 11_000 個(gè) ChatGPT App 的分類目錄。

Free Icons

Free Icons 是一個(gè)包含 22_000 多個(gè)圖標(biāo)的通用名稱集，其中包括品牌圖標(biāo)和通用圖標(biāo)。

圖片

所有內(nèi)容均為 SVG 格式，我們可以在主頁(yè)上按關(guān)鍵字進(jìn)行過(guò)濾，或通過(guò) GitHub 獲取全部?jī)?nèi)容。

GradientGenerator

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

圖片

該 App 還允許我們將漸變保存到庫(kù)中，甚至導(dǎo)入社區(qū)構(gòu)建的漸變。

SVG Chart Generator

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

圖片

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

PeepsLab

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

圖片

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

Ribbon Shapes

Ribbon Shapes 是一個(gè)純 CSS 絲帶的在線畫(huà)廊，幾乎具有可以想象到的任何絲帶格式。

圖片

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

Picyard

Picyard 是一款 App，可以生成吸睛的背景屏幕截圖，用于模型、社交媒體帖子等。

圖片

圖像/背景工具是免費(fèi)的，但該 App 還包括生成代碼片段、圖表、思維導(dǎo)圖、時(shí)間表等高級(jí)功能。

Observable Plot

Observable Plot 是一個(gè) JS 庫(kù)，使用 SVG 筑基的圖表，創(chuàng)建探索性數(shù)據(jù)可視化。

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