前端小玩具年度盘点

6,494 阅读9分钟

大家好,这里是大家的林语冰。持续关注,坚持阅读,每天一次,进步一点

免责声明

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

本期共享的是去年前端生态中若干人气爆棚的年度小玩具。工欲善其事,必先利其器,欢迎大家体验测评一下哪个小玩具值得入手,提高生产力,今年继续内卷。本文根据流量和热度列举了这些小玩具,排名有分先后,上榜各凭本事。

CSS 指纹

过去几年,只通过 CSS 来追踪用户的概念讨论得如火如荼。CSS 指纹(CSS Fingerprint)某种程度上是关于该主题的一体化资源。

01-finger.png

我们可以授权体验测试页面,其中可以查看我们专属的“CSS 指纹”,并且其 GitHub 仓库爆料了一大坨技术咨询。

Almond.CSS

Almond.CSS 是今年金榜题名的三大无类(class-less)CSS 框架的冠军。尽管诸如 Tailwind 之类的实用工具人气爆棚,但看到此类项目拔得头筹还是笑嘻了。

02-almond.png

这些库的工作方式与 CSS 重置或 normalizer(规范器)类似,但在应用样式方面更加我行我素。

Piling.js

Piling.js 是一个 JS 库,允许我们构建可以将一大坨项目拖拽到“pile”中的界面。

03-piling.png

该库构建于 PixiJS(一个 2D WebGL 渲染器)之上,并且示例允许我们轻松自定义页面上的项目数量,以及一大坨其他设置和配置。

MingCute

我每年可能会邂逅至少 20 个新图标库。MingCute 就是其中之一,它似乎因其简单性和一大坨可用图标而人气爆棚。

04-cute.png

该库目前包含 1_800 个 SVG 或 PNG 格式的图标,该网站允许我们将图标添加到实时“收藏夹”中,然后我们可以立即下载所有已选图标。

Scroll Btween

Scroll Btween 有点像动画库和视差脚本的交叠。它允许我们相对于页面上任意元素的视口位置,对其任意 CSS 值进行“tween(补间)”。

05-btween.png

我们可以沉浸式体验一大坨示例,这表演了它在项目中使用的一大坨方式。

uiverse

uiverse 是社区构建的 HTML 和 CSS 组件库,免费供个人和商业使用。

06-uiverse.png

目前,它包含各种类别的 640+ 组件,包括但不限于按钮、自定义复选框、切换开关、卡片、加载动画和输入。

zag

Zag 是一个与框架无关的 UI 组件库,目前包含 20 多个交互式组件,包括但不限于弹出框、滑块、手风琴、组合框。

07-zag.png

每个组件都可以和 React/Vue 等丝滑集成,文档中提供了如何和每个框架“梦幻联动”的细节。

Allinone.Tools

Allinone.tools 可能是本人邂逅过的最大的在线实用工具宝藏之一,包括但不限于图像处理和转换工具、PDF 工具、各种文本和列表格式选项、CSS 和 JS 压缩器和美化器等等。

08-allinone.png

该网站还支持执行各种加密相关的任务(比如编码、解码、解密等)的工具。

Martian Mono

Martian Mono 是唯一入选推荐榜的字体。它是另一种名为 Martian Grotesk 的字体的等宽版本,因此它对码农很友好。

09-mono.png

该字体由一种可变字体和 28 种样式组成,从压缩到半宽,从很细到超粗。

AnimatiSS

AnimatiSS 是独特 CSS 动画的集合,类似于其他流行的动画库,它允许我们使用类名向页面上的元素添加动画。

10-animati.png

该库包含 10 种风格类别的动画,我们甚至可以在线微操每种类别的持续时间。

Vanta.js

Vanta.js 是一个 JS 库,可生成 WebGL 筑基的特效,这些特效看起来简直酷毙了,但由于潜在的性能瓶颈,建议谨慎使用。该工具允许我们使用几行代码创建自定义动画背景。

11-vanta.png

该网站允许我们使用交互式侧边栏,在线自定义不同的背景特效,然后我们可以搬运代码。

Kumiko Creator

Kumiko Creator 强势登榜可能是因为好奇的点击量而不是实用性。这个在线生成器允许我们上传自拍,并将其转换生成定制的久美子图案。

12-creator.png

正如该网站的公关所言,“kumiko”一词指的是“一种古老的日本木工技术,它将一大坨细小的碎片拼凑成格子。”

Atomico

Atomico 是一个用于创建 UI 组件的迷你库,类似于 React 和 Vue 等项目,语法灵感源自 React。它还兼容 Svelte 和 Angular 等库。

13-atom.png

该库在性能测评中跑分很高,使用虚拟 DOM、props、hooks 等,如果您已经熟悉其他人气爆棚的技术方案,那么它是一个无缝迁移的同款竞品。

mmmotif

mmmotif 是 S.M. 孵化的众多好用的在线生成器之一。这一功能允许我们自定义基于 SVG 的类 3D 同构背景图案。

14-mmm.png

该生成器允许我们选择背景的基本形状,然后我们可以调整角度、比例、倾斜和重复图案的位置。

DevToys

DevToys 是一款原生离线 Windows App,对于开发者而言是一个百宝袋。它包括 20 多个工具,可用于各种与开发相关的任务。

15-dev.png

这里有解码器、编码器、转换器、哈希生成、文本比较等等。

Animatize

Animatize 是一个独特的交互式动画生成器,允许我们通过鼠标拖拽到页面上的场景来创建简单的 CSS 动画。

16-animatize.png

上传背景和角色图像,然后将角色拖拽到背景上定义动画。该网站将会用图像的 data URI 生成 CSS 代码。

MetaliCSS

MetaliCSS 是一个 JS 库,允许我们向页面上的元素添加 CSS 筑基的时髦金属风格。

18-metal.png

添加该库后,使用 metallicss 类,然后我们可以使用三个自定义属性在 CSS 中随意 DIY。

Paper Prototype CSS

Paper Prototype CSS 是模仿纸质原型的 CSS 框架,有点像手绘风格,但在两种看似非正式的免费字体的辅助下,有点像勒索信。

19-paper.png

其灵感源自其他手绘 CSS 框架,主页以 Paper Prototype 样式显示所有 HTML 元素。

Ava Maker

捏脸似乎始终是一种流行趋势。Ava Maker 是一款头像生成器,允许我们选择多种风格,构建自己的自定义头像。

20-ava.png

在导出 SVG 或 PNG 文件之前,我们可以自定义发型、肤色、美眉、瞳孔、嘴唇、服化道等。

Amigo CSS

Amigo CSS 号称“简单、自定义优先且直观的 C​​SS 框架”,专为初学者量身定做,建立在其他框架中的某些思想基础上。

21-amigo.png

该框架鼓励但不强制使用自定义类,以及每个元素限用最多七个工具类。

Reasonable Colors

Reasonable Colors 是开源颜色系统,用于构建既易访问又有吸引力的调色板。这意味着,我们可以想瘦设计师友好的高对比度组合。

22-reason.png

选择一种颜色,然后我们可以从每种颜色包含的色调中选择我们的调色板。只要选择之间的色差为 2,就可以选择可访问的颜色。

Meshy

Meshy 是一个“网格”梯度生成器,包括预定义网格梯度库,以及自定义任何梯度选项的能力。我们还可以随机化任何选定渐变的“网格划分”效果,每个渐变使用 4 种颜色。

23-mesh.png

任何渐变都支持 PNG 格式下载,文件大小最大可达 3_000 x 3_000 像素,以便高分辨率导出。

Open UI

Open UI 并不完全是一个框架,而是一组行业标准指南,用于定义开发者如何设计和扩展内置 Web UI 控件(比如复选框、单选按钮、选择下拉列表等)。

open.png

该项目幕后动机是开创倡议,辅助开发者避免在库和框架空间中反复造轮子,而是鼓励这些组件转向每个人都可以从中受益的通用标准。

IT Tools

IT Tools 是另一种一体化资源,其中包括数十种对 Web 开发者友好的工具。

24-tool.png

这包括加密工具、转换工具、网络工具、图像工具和文本工具。其中所有工具都经过精心设计且易于使用。

Qwik

Qwik 号称“HTML 优先”框架,由于 JS 占用空间小和按需组件加载,性能是其核心。

25-qwik.png

Lorem Faces

Lorem Faces 是一个由 AI 生成的免费人脸库,可以用于设计占位符。

26-face.png

我们可以选择方形、圆角或圆脸照片,以及图像色调的彩色、灰度或棕褐色。

HTTP 状态狗

HTTP Status Dogs 是一个 HTTP 状态代码库,每个状态代码都与相应的狗头匹配。如果您愿意,您可以将其用于网站或 App 状态消息。

27-dog.png

Clay.css

Clay.css 是一个 CSS 实用程序,用于向页面元素添加粘土形态样式。这肯定不会在一大坨项目中使用,但特效很棒,可能在儿童项目或其他有趣和非正式风格的项目中派上用场。

28-clay.png

我们可以使用工具类、CSS 变量或 Sass mixin 自定义样式。

UI Buttons

UI Buttons 是 100 个按钮的收藏夹,具有见所未见的样式和悬停效果。

29-button.png

每个按钮的 CSS 都很容易获取,我们可以轻松自定义颜色和整体外观,同时保留交互特效。

JSON Crack

JSON Crack 荣膺年度人次爆棚工具人。这最初名为“JSON Visio”,它是 JSON 数据的可视化工具和格式化程序。

30-json.png

将数据粘贴到编辑器中,该工具会以易读的流程图格式显示,我们可以自定义该格式,甚至可以将其嵌入到网页中。有一个搜索功能可以在大文件中查找数据,并且有一个关联的 VS Code 扩展插件。

您最喜欢的是哪款小玩具呢?欢迎在本文下方群聊自由言论,文明共享。

《前端 9 点半》每日更新,持续关注,坚持阅读,每天一次,进步一点

谢谢大家的点赞,掰掰~

26-cat.gif