前端小玩具年度盘点
大家好，这里是大家的林语冰。持续关注，坚持阅读，每天一次，进步一点。
免责声明
本文属于是语冰的直男翻译了属于是，略有删改，仅供粉丝参考。英文原味版请传送 Top Front-End Tools Of 2022。
本期共享的是去年前端生态中若干人气爆棚的年度小玩具。工欲善其事，必先利其器，欢迎大家体验测评一下哪个小玩具值得入手，提高生产力，今年继续内卷。本文根据流量和热度列举了这些小玩具，排名有分先后，上榜各凭本事。
CSS 指纹
过去几年，只通过 CSS 来追踪用户的概念讨论得如火如荼。CSS 指纹（CSS Fingerprint）某种程度上是关于该主题的一体化资源。
我们可以授权体验测试页面，其中可以查看我们专属的“CSS 指纹”，并且其 GitHub 仓库爆料了一大坨技术咨询。
Almond.CSS
Almond.CSS 是今年金榜题名的三大无类（class-less）CSS 框架的冠军。尽管诸如 Tailwind 之类的实用工具人气爆棚，但看到此类项目拔得头筹还是笑嘻了。
这些库的工作方式与 CSS 重置或 normalizer（规范器）类似，但在应用样式方面更加我行我素。
Piling.js
Piling.js 是一个 JS 库，允许我们构建可以将一大坨项目拖拽到“pile”中的界面。
该库构建于 PixiJS（一个 2D WebGL 渲染器）之上，并且示例允许我们轻松自定义页面上的项目数量，以及一大坨其他设置和配置。
MingCute
我每年可能会邂逅至少 20 个新图标库。MingCute 就是其中之一，它似乎因其简单性和一大坨可用图标而人气爆棚。
该库目前包含 1_800 个 SVG 或 PNG 格式的图标，该网站允许我们将图标添加到实时“收藏夹”中，然后我们可以立即下载所有已选图标。
Scroll Btween
Scroll Btween 有点像动画库和视差脚本的交叠。它允许我们相对于页面上任意元素的视口位置，对其任意 CSS 值进行“tween（补间）”。
我们可以沉浸式体验一大坨示例，这表演了它在项目中使用的一大坨方式。
uiverse
uiverse 是社区构建的 HTML 和 CSS 组件库，免费供个人和商业使用。
目前，它包含各种类别的 640+ 组件，包括但不限于按钮、自定义复选框、切换开关、卡片、加载动画和输入。
zag
Zag 是一个与框架无关的 UI 组件库，目前包含 20 多个交互式组件，包括但不限于弹出框、滑块、手风琴、组合框。
每个组件都可以和 React/Vue 等丝滑集成，文档中提供了如何和每个框架“梦幻联动”的细节。
Allinone.Tools
Allinone.tools 可能是本人邂逅过的最大的在线实用工具宝藏之一，包括但不限于图像处理和转换工具、PDF 工具、各种文本和列表格式选项、CSS 和 JS 压缩器和美化器等等。
该网站还支持执行各种加密相关的任务（比如编码、解码、解密等）的工具。
Martian Mono
Martian Mono 是唯一入选推荐榜的字体。它是另一种名为 Martian Grotesk 的字体的等宽版本，因此它对码农很友好。
该字体由一种可变字体和 28 种样式组成，从压缩到半宽，从很细到超粗。
AnimatiSS
AnimatiSS 是独特 CSS 动画的集合，类似于其他流行的动画库，它允许我们使用类名向页面上的元素添加动画。
该库包含 10 种风格类别的动画，我们甚至可以在线微操每种类别的持续时间。
Vanta.js
Vanta.js 是一个 JS 库，可生成 WebGL 筑基的特效，这些特效看起来简直酷毙了，但由于潜在的性能瓶颈，建议谨慎使用。该工具允许我们使用几行代码创建自定义动画背景。
该网站允许我们使用交互式侧边栏，在线自定义不同的背景特效，然后我们可以搬运代码。
Kumiko Creator
Kumiko Creator 强势登榜可能是因为好奇的点击量而不是实用性。这个在线生成器允许我们上传自拍，并将其转换生成定制的久美子图案。
正如该网站的公关所言，“kumiko”一词指的是“一种古老的日本木工技术，它将一大坨细小的碎片拼凑成格子。”
Atomico
Atomico 是一个用于创建 UI 组件的迷你库，类似于 React 和 Vue 等项目，语法灵感源自 React。它还兼容 Svelte 和 Angular 等库。
该库在性能测评中跑分很高，使用虚拟 DOM、props、hooks 等，如果您已经熟悉其他人气爆棚的技术方案，那么它是一个无缝迁移的同款竞品。
mmmotif
mmmotif 是 S.M. 孵化的众多好用的在线生成器之一。这一功能允许我们自定义基于 SVG 的类 3D 同构背景图案。
该生成器允许我们选择背景的基本形状，然后我们可以调整角度、比例、倾斜和重复图案的位置。
DevToys
DevToys 是一款原生离线 Windows App，对于开发者而言是一个百宝袋。它包括 20 多个工具，可用于各种与开发相关的任务。
这里有解码器、编码器、转换器、哈希生成、文本比较等等。
Animatize
Animatize 是一个独特的交互式动画生成器，允许我们通过鼠标拖拽到页面上的场景来创建简单的 CSS 动画。
上传背景和角色图像，然后将角色拖拽到背景上定义动画。该网站将会用图像的 data URI 生成 CSS 代码。
MetaliCSS
MetaliCSS 是一个 JS 库，允许我们向页面上的元素添加 CSS 筑基的时髦金属风格。
添加该库后，使用 metallicss 类，然后我们可以使用三个自定义属性在 CSS 中随意 DIY。
Paper Prototype CSS
Paper Prototype CSS 是模仿纸质原型的 CSS 框架，有点像手绘风格，但在两种看似非正式的免费字体的辅助下，有点像勒索信。
其灵感源自其他手绘 CSS 框架，主页以 Paper Prototype 样式显示所有 HTML 元素。
Ava Maker
捏脸似乎始终是一种流行趋势。Ava Maker 是一款头像生成器，允许我们选择多种风格，构建自己的自定义头像。
在导出 SVG 或 PNG 文件之前，我们可以自定义发型、肤色、美眉、瞳孔、嘴唇、服化道等。
Amigo CSS
Amigo CSS 号称“简单、自定义优先且直观的 CSS 框架”，专为初学者量身定做，建立在其他框架中的某些思想基础上。
该框架鼓励但不强制使用自定义类，以及每个元素限用最多七个工具类。
Reasonable Colors
Reasonable Colors 是开源颜色系统，用于构建既易访问又有吸引力的调色板。这意味着，我们可以想瘦设计师友好的高对比度组合。
选择一种颜色，然后我们可以从每种颜色包含的色调中选择我们的调色板。只要选择之间的色差为 2，就可以选择可访问的颜色。
Meshy
Meshy 是一个“网格”梯度生成器，包括预定义网格梯度库，以及自定义任何梯度选项的能力。我们还可以随机化任何选定渐变的“网格划分”效果，每个渐变使用 4 种颜色。
任何渐变都支持 PNG 格式下载，文件大小最大可达 3_000 x 3_000 像素，以便高分辨率导出。
Open UI
Open UI 并不完全是一个框架，而是一组行业标准指南，用于定义开发者如何设计和扩展内置 Web UI 控件（比如复选框、单选按钮、选择下拉列表等）。
该项目幕后动机是开创倡议，辅助开发者避免在库和框架空间中反复造轮子，而是鼓励这些组件转向每个人都可以从中受益的通用标准。
IT Tools
IT Tools 是另一种一体化资源，其中包括数十种对 Web 开发者友好的工具。
这包括加密工具、转换工具、网络工具、图像工具和文本工具。其中所有工具都经过精心设计且易于使用。
Qwik
Qwik 号称“HTML 优先”框架，由于 JS 占用空间小和按需组件加载，性能是其核心。
Lorem Faces
Lorem Faces 是一个由 AI 生成的免费人脸库，可以用于设计占位符。
我们可以选择方形、圆角或圆脸照片，以及图像色调的彩色、灰度或棕褐色。
HTTP 状态狗
HTTP Status Dogs 是一个 HTTP 状态代码库，每个状态代码都与相应的狗头匹配。如果您愿意，您可以将其用于网站或 App 状态消息。
Clay.css
Clay.css 是一个 CSS 实用程序，用于向页面元素添加粘土形态样式。这肯定不会在一大坨项目中使用，但特效很棒，可能在儿童项目或其他有趣和非正式风格的项目中派上用场。
我们可以使用工具类、CSS 变量或 Sass mixin 自定义样式。
UI Buttons
UI Buttons 是 100 个按钮的收藏夹，具有见所未见的样式和悬停效果。
每个按钮的 CSS 都很容易获取，我们可以轻松自定义颜色和整体外观，同时保留交互特效。
JSON Crack
JSON Crack 荣膺年度人次爆棚工具人。这最初名为“JSON Visio”，它是 JSON 数据的可视化工具和格式化程序。
将数据粘贴到编辑器中，该工具会以易读的流程图格式显示，我们可以自定义该格式，甚至可以将其嵌入到网页中。有一个搜索功能可以在大文件中查找数据，并且有一个关联的 VS Code 扩展插件。
您最喜欢的是哪款小玩具呢？欢迎在本文下方群聊自由言论，文明共享。
《前端 9 点半》每日更新，持续关注，坚持阅读，每天一次，进步一点。
谢谢大家的点赞，掰掰~
