2023 顶级前端工具

本文属于是语冰的直男翻译了属于是，略有删改，仅供粉丝参考。英文原味版请传送 Top Front-End Tools Of 2023。

本期共享的是 —— 2023 人气最高的 Web 开发者工具，这些工具涵盖许多类别，包括 JS 库、Web 框架、CSS 生成器、数据库工具、React 组件、CLI 工具，甚至 ChatGPT 和AI 筑基的工具。

Effect

Effect 被描述为“一个给力的 TS 库，旨在辅助开发者轻松创建复杂的同步和异步程序。”

Effect 的幕后动机是辅助开发者通过所谓的结构化并发 —— 一种允许多个复杂操作同时运行的编程范式，构建鲁棒可扩展的 App。

VanJS

VanJS 是一个类似 React 的 UI 库，但不使用 JSX、虚拟 DOM、转译等。此想法是为了避免通常与使用诸如 React 之类的库相关的配置开销。

VanJS 声称是地球上最小的 UI 库，大小不到 1kb。它对 TS 有一流的支持，天然拥有比 React/Vue 等给力的性能。

CSS Loaders

CSS Loaders 是一个庞大的集合，包含 30 多个类别下的 600 多个 CSS 加载动画。

CSS Loaders 包含我们能想到的几乎任何样式的加载程序，只需单击一下即可轻松复制粘贴任何加载程序的 HTML/CSS。

Kuma UI

Kuma UI 自诩为“CSS-in-JS 的未来”，是一个 headless、实用程序优先、零运行时的组件库，其中包括自己的 CSS-in-JS 解决方案。

Kuma UI 的与众不同之处在于其混合方案，允许在运行时动态更改样式，同时仍然保持零运行时 CSS-in-JS 的性能优势。

OpenGPT

OpenGPT 是过去一年里人气爆棚的众多 ChatGPT 筑基的工具之一。这是一个开源 AI 平台，允许任何人使用和创建 ChatGPT 筑基的 App。

该服务的主平台本身允许我们搜索超过 11_000 个 ChatGPT App 的分类目录。

Free Icons

Free Icons 是一个包含 22_000 多个图标的通用名称集，其中包括品牌图标和通用图标。

所有内容均为 SVG 格式，我们可以在主页上按关键字进行过滤，或通过 GitHub 获取全部内容。

GradientGenerator

GradientGenerator 是一个交互式 CSS 渐变生成器，可让我们构建高级分层渐变。我们可以使用一系列不同的设置和功能来自定义分层渐变。

该 App 还允许我们将渐变保存到库中，甚至导入社区构建的渐变。

SVG Chart Generator

SVG Chart Generator 是一款设计精美的图表生成器，可让我们生成基于 SVG 的折线或条形格式的图表。

SVG 图表生成器允许我们交互式地自定义图表的宽高设置、平滑度等。我们还可以导入自己的数据点。

PeepsLab

PeepsLab 是一个简单的在线工具，用于定制我们自己独特的插图用户头像。我们可以通过循环选择肤色、发色、配饰、面部样式等不同选项来构建自己的头像。

或者，我们可以简单地点击“随机”按钮生成随机头像，然后以 PNG 格式下载。

Ribbon Shapes

Ribbon Shapes 是一个纯 CSS 丝带的在线画廊，几乎具有可以想象到的任何丝带格式。

Ribbon Shapes 包含 100 多个功能区，每个功能区均使用单个 HTML 元素创建，并且可以使用 CSS 变量轻松自定义。

Picyard

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

图像/背景工具是免费的，但该 App 还包括生成代码片段、图表、思维导图、时间表等高级功能。

Observable Plot

Observable Plot 是一个 JS 库，使用 SVG 筑基的图表，创建探索性数据可视化。

绘图界面可以包括特定功能，比如比例、投影、曲线等。我们必须查看文档，了解这些不同功能的内幕，这些功能使用大量交互式示例进行说明。

CSS Generators

CSS Generators 不是一个单一的工具，而是 CSS 生成器的一个小集合，是前端开发者中人气爆棚的一种工具。

我喜欢这套生成器，因为它有几种我们在其他地方看不到的类型，比如下划线和荧光生成器。

Clone UI

Clone UI 是一个 AI 筑基的工具，可让我们使用简单的文本提示生成 UI 组件。

Clone UI 包含五个免费的每日积分，并展示了用户生成的现有 UI 组件。

Calendar.Js

Calendar.js 是众多可用的日期选择器和日历库之一。该解决方案是轻量级的，且没有依赖性。

Calendar.js 完全可配置，包括事件拖放、导出功能、从 JSON 导入等等。

Accessible Color Palette Generator

Accessible Color Palette Generator 是易访问的调色板生成器，这是确保我们的任何设计都以一组易访问的颜色选择开始的好方案。

我们可以生成随机可访问的调色板或输入任何颜色，该工具将根据我们选择的颜色生成可访问的调色板。

Iconhunt

Iconhunt 是一个图标搜索引擎，可让我们访问 170_000 多个免费开源图标。

图标可以以各种格式下载，包括 Notion、Figma、SVG 或 PNG，并且我们可以在下载前自定义选择的任何图标的颜色。

RestorePhotos.Io

RestorePhotos.io 是一款开源工具，它使用 AI 尝试恢复或纠正旧的、模糊的或损坏的照片。

我们可以在本地部署自己的版本，或使用在线工具每天免费恢复最多 5 张照片。

Space.Js

有趣的是，Space.js 最终成为点击次数最多的工具。

Space.js 基于 Three.js 的两个兄弟库之一。主要的一个用于创建 UI 和面板组件，另一个 Alien.js 用于 3D 实用程序、材质、着色器和物理。

Picography

Picography 是人气爆棚的 Unsplash 的备胎，同样提供高分辨率、免版税的库存照片。

这些照片经过分类、可搜索，并可在商业项目中免费使用。

本期话题是 —— 你有没有什么好用或好玩的前端开发工具想推荐？

欢迎在本文下方群聊自由言论，文明共享。谢谢大家的点赞，掰掰~

《前端 9 点半》每日更新，坚持阅读，自律打卡，每天一次，进步一点。