Jérémie Patonnier 的这个演示令人难以置信。确保在 Firefox 中查看它，因为某些 Chrome 错误显然会阻止整个内容正常工作。

主要思想是整个演示是一个<rect>元素。 就这样。 它在需要时使用<use>元素复制，每个单独的复制通过 CSS 进行样式化，可以控制诸如stroke、fill、x、y等内容。

假设你有一个设计系统，你正在经历一个它没有你需要的東西的时刻。 你需要偏离并创造一些新的东西。 Yesenia Perez-Cruz 将这些时刻从本质上归类为哎呀到不错

设计中会出现三种类型的偏差
系统

• 无意偏差通常发生在设计师找不到他们要查找的信息时。 他们可能不知道系统中存在某种解决方案，因此他们创建了自己的样式。 清晰、易于查找的文档和使用指南可以帮助你的团队避免无意偏差。
• 有意但无必要的偏差通常是由于设计师不想被系统束缚，或者认为他们有更好的解决方案。 确保你的团队知道如何反驳并为系统做出贡献，可以帮助缓解这种偏差。
• 有意、有意义的偏差是表达性设计系统的目标。 在这种情况下，偏差是有意义的，因为它解决了一个非常具体的用户问题，而现有模式无法解决。

我们要使有意、有意义的变化成为可能。

继续阅读 →

我为 Layout 写了一篇文章，这是我的托管赞助商 Flywheel 的博客。

在这个领域待上一段时间，你会看到这些库、语言、构建流程，甚至构建网站的整个理念都像缓慢的潮汐一样来来去去。​​

你可能会看到一些老家伙不时挥舞着拳头，大喊大叫说我们应该从过去的错误中吸取教训。 你也可能会看到一些特别喧闹的年轻人挥舞着拳头一样高，宣布过去是一个不相关的背景，不再是一个有用的谈话点。

​​他们可能都对。 只要没有人恶意，这一切都是流程的一部分。

今年我一直在思考，我认为前端开发人员这个术语仍然很有意义，尽管存在分歧。 角色的扩大带来了更多机会。

我发现这七种方法都很巧妙且有用。

我特别喜欢在你可以偷偷地将变体添加到你通常必须重新声明一大块代码的地方使用自定义属性。

.some-element {
  background-color: hsla(
    var(--h, 120),
    var(--s, 50),
    var(--l, 50),
    var(--a, 1)
  );
}

.some-element.darker {
  --l: 20;
}

不错。

我最近查看了 Web Alamanc 的 CSS 章，并有一些想法。 在这里，Stefan Judis 浏览了整个内容，并总结了他认为最有趣的部分。 以下是其中大部分

继续阅读 →

HeroDevs 团队刚刚发布了 Scully 的 alpha 版本，这是一个针对 Angular 的静态网站生成器。 没错，Angular 以前没有直观的方式来创建 JAMstack 应用程序，但现在可以了！

Scully 使用节点 CLI 应用程序来运行 Angular schematics，因此你无需学习任何新的语言或语法。 你可以在新的dist文件夹中看到你的静态文件，该文件夹名为static，位于你的应用程序文件夹旁边。

为了观看完整的设置过程，Tara Manicsic 在 Learn with Jason Twitch 直播中进行了设置过程。 如果你想开始使用，可以在这里查看。

一个 box-shadow 很酷，但请查看 Philipp Brumm 用于构建逗号分隔的多个框阴影的工具，这些阴影会产生更平滑、更自然的外观。

这让我非常想起了 缓动线性渐变 的想法。 在渐变中，这种平滑效果是通过具有位置和颜色缓动（斜坡）而不是线性（直线）的多个停止来处理的。 结果是明显更平滑，外观更令人愉悦。

继续阅读 →

市场上有很多排名跟踪软件工具，它们允许你跟踪你的网站在搜索引擎的特定关键词搜索结果页 (SERP) 中的位置。 但是，当你试图以编程方式聚合搜索结果时，这些工具绝对不够。

这正是 Zenserp 允许你做的事情：REST-API 允许你以 JSON 格式检索你选择的搜索查询的搜索引擎结果页。 这在无数用例中都可能很有用。 举几个例子

跟踪你自己的网站或创业公司的排名

定期检查你的网站对你最重要的关键词的排名，看看你的 SEO 活动是否真的有效。 它还允许你检查你的 SERP 排名在不同国家/地区的差异。

构建高度定制的 SEO 报告

你正在为客户构建定制的 SEO 报告？ 那么，在数据聚合和显示聚合数据方面，你需要很大的灵活性。 我们的 API 正是你构建高度定制的报告以满足客户期望所需的一切。

使用 SERP 作为数据聚合的一般数据点

在调整搜索查询时，SERP 中有很多有用且有价值的数据。 由于它们以 JSON 格式提供，因此你可以自动将其馈送到你的业务流程中。

Zenserp 提供免费计划，每月 50 次 API 请求，适用于基本用例。 付费计划一直到企业级别，以支持具有高请求级别的更大项目。

该 API 支持大多数现代编程语言，并附带一个搜索请求构建器，可以帮助你入门。 此外，Zenserp 还提供免费的咨询服务，如果你需要任何帮助来集成服务，可以联系他们。

我不确定该怎么称呼 Astrit Malsija 的这些图标。 标题是“500 多个 CSS 图标，可自定义，视网膜就绪和 API”，URL 是“css.gg”，但它们并没有真正命名任何东西。

无论如何，他们的卖点是

🌎 世界上第一个由代码设计的图标库。

其理念是它们不使用clip-path，它们不是图标字体，甚至不是 SVG。 它们本质上只是使用 CSS 形状 和 伪元素（如果需要）进行绘制的<i>标签。 这是一种非常巧妙的方法。 它们会像内联 SVG 一样非常快地渲染，因为它们不需要任何其他资源。 它们不能很好地缩放，因为所有内容都以px为单位进行大小调整，但它们具有用于少量预定义大小的修饰符类。 我可能不会在生产环境中使用它们 (内联 SVG 是最好的选择)，但无论如何，它很巧妙。

我也不会称它为世界上第一个。 Nicolas Gallagher 10 年前（！）设计了类似的图标集。

来自 Matthew Ström 的一个巧妙的想法

[…] 设计 API 看起来并不遥不可及。 基于 API 的方法是目前正在进行的设计系统工作（包括标记和标准化项目）的自然延伸。

如果你相信 设计标记 的理念，那么它会表现为包含颜色和间距值等内容的 JSON 块。 没有理由 API 不能提供这些内容，它可能使构建过程能够从中心位置提取最新的决策。