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

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

Effect

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

圖片

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

VanJS

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

圖片

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

CSS Loaders

CSS Loaders 是一個(gè)龐大的集合，包含 30 多個(gè)類(lèi)別下的 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 的分類(lèi)目錄。

Free Icons

Free Icons 是一個(gè)包含 22_000 多個(gè)圖標(biāo)的通用名稱(chēng)集，其中包括品牌圖標(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 的折線(xiàn)或條形格式的圖表。

圖片

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

PeepsLab

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

圖片

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

Ribbon Shapes

Ribbon Shapes 是一個(gè)純 CSS 絲帶的在線(xiàn)畫(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*-------------------------------------------------------------------------------------------------------------------繪圖界面可以包括特定功能，比如比例、投影、曲線(xiàn)等。我們必須查看文檔，了解這些不同功能的內(nèi)幕，這些功能使用大量交互式示例進(jìn)行說(shuō)明。

CSS Generators

CSS Generators 不是一個(gè)單一的工具，而是 CSS 生成器的一個(gè)小集合，是前端開(kāi)發(fā)者中人氣爆棚的一種工具。

圖片

我喜歡這套生成器，因?yàn)樗袔追N我們?cè)谄渌胤娇床坏降念?lèi)型，比如下劃線(xiàn)和熒光生成器。

Clone UI

Clone UI 是一個(gè) AI 筑基的工具，可讓我們使用簡(jiǎn)單的文本提示生成 UI 組件。

圖片

Clone UI 包含五個(gè)免費(fèi)的每日積分，并展示了用戶(hù)生成的現(xiàn)有 UI 組件。

Calendar.Js

Calendar.js 是眾多可用的日期選擇器和日歷庫(kù)之一。該解決方案是輕量級(jí)的，且沒(méi)有依賴(lài)性。

圖片

Calendar.js 完全可配置，包括事件拖放、導(dǎo)出功能、從 JSON 導(dǎo)入等等。

Accessible Color Palette Generator

Accessible Color Palette Generator 是易訪(fǎng)問(wèn)的調(diào)色板生成器，這是確保我們的任何設(shè)計(jì)都以一組易訪(fǎng)問(wèn)的顏色選擇開(kāi)始的好方案。

圖片

我們可以生成隨機(jī)可訪(fǎng)問(wèn)的調(diào)色板或輸入任何顏色，該工具將根據(jù)我們選擇的顏色生成可訪(fǎng)問(wèn)的調(diào)色板。

Iconhunt

Iconhunt 是一個(gè)圖標(biāo)搜索引擎，可讓我們?cè)L問(wèn) 170_000 多個(gè)免費(fèi)開(kāi)源圖標(biāo)。

圖片

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

RestorePhotos.Io

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

圖片

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

Space.Js

有趣的是，Space.js 最終成為點(diǎn)擊次數(shù)最多的工具。

圖片

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

Picography

Picography 是人氣爆棚的 Unsplash 的備胎，同樣提供高分辨率、免版稅的庫(kù)存照片。

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