这是一堂大师课来自 Dave

当你撞上不可消除的复杂性墙时，任何“进步”都是一个障眼法，它带来了向下传递给用户的权衡……你通过转移复杂性的位置来获得“进步”。

你不会获得复杂性的免费减少。在 CSS 领域，你无法选择一些样式策略并让所有问题消失。这里有很多细微差别，但总体上无论你选择什么技术，你只是将复杂性放置在不同的桶中。

继续阅读 →

Cassie Evans 制作了一幅可爱的自我插画，然后使用 Greensock 为其添加了一系列动画来完成它。Cassie 写了一系列关于她如何做到的文章

在这篇文章中，我们将介绍如何从鼠标移动中获取值并将它们插入动画中。这是我对 SVG 动画的最爱。不是鼠标移动本身，而是交互性。将动画导出为 mp4 很酷，但你不能玩它。在网络上进行动画制作打开了如此多的酷炫可能性！

说到将很棒的插画与令人印象深刻的动画相结合，Jhey Tompkins 最近分享了他从构建复杂的 CSS 插图中学到的很多技巧。第一个建议？这需要时间，要有耐心。我相信他需要世界上所有的耐心才能完成他的动画俄罗斯套娃。

就像 Kickstarter，但用于 Web 平台功能。

这是对来自 Igalia 的开放优先级的概括。Igalia 是一家独立公司，致力于浏览器。他们实际上为所有不同的开源浏览器提交代码以实现（和修复）我们都使用的功能。现在他们正在询问：哪些浏览器功能对您很重要？它们是否重要到您愿意认捐一些资金来实现它们？

我认为这是一个聪明的想法，我希望它能够获得足够的关注，从而真正开始运作，并且能够获得足够的资金，使 Igalia 能够将资源投入到人们用钱投票认为最重要的功能中。

例如，我认捐了 20 美元来为 Firefox 获取d: path(); 支持。太棒了！如果它开始接近那个目标，我知道我可能会很想增加认捐金额，以便让它最终实现，但首先需要建立一些势头。

继续阅读 →

我知道这有点超出了 CSS-Tricks 正常范围的内容，但我发现现货实例的整个概念很有意思。以下是来自一个非专家（我）的要点。你可以简单地购买和支付网络服务器，例如，Amazon EC2。如果你以“保留实例”的形式购买它们，你可以节省一大笔钱，这意味着你事先同意你需要长时间使用它们（例如一年）并预先支付部分或全部费用。

但是，有一种方法可以节省更多资金，那就是使用现货实例。Blake Stoddard

现货实例使我们能够以比一年期保留实例或节省计划更低的折扣获得所需的计算能力，而无需同样的承诺。将价格与自动扩展组的无缝集成相结合，使其成为我们大多数工作负载的不二之选。

现货实例的最大问题是什么？AWS 可以提前两分钟通知你收回它们。

继续阅读 →

Gatsby 团队发布了对其WordPress 源插件的更新，将其升级为 beta 版本。新版本为Gatsby 的无头 WordPress配置带来了新的一系列功能，它将WPGraphQL和WPGatsby整合在一起，为从 WordPress 中提取数据的 Gatsby 前端提供支持。

如果你以前没有遇到过这些插件，那可能是因为它们只在 GitHub 上可用，而不是在 WordPress 插件目录中。

如果你想知道这有什么大不了的，那么你将会得到一份礼物，因为这很可能是使用 React 和 WordPress 的最直接的路径。WPGraphQL 将 WordPress 变成一个 GraphQL API 服务器，提供一个端点来访问 WordPress 数据。WPGatsby 优化 WordPress 数据以符合 Gatsby 架构。现在，使用最新版本的gatsby-source-wordpress@v4，不仅 GraphQL 架构与 Gatsby 架构合并，而且 Gatsby Cloud 也加入了其中。

继续阅读 →

让我总结一下

• CodePen 有嵌入式 Pen。在 CodePen 上构建一个 Pen，然后将其嵌入到任何其他网站中。
• 我们还提供预填充嵌入，它消除了第一步。使用预填充嵌入，Pen 不需要在 CodePen 上存在。你通过页面上的代码块传入你想要在嵌入中出现的代码和设置（渐进增强！）。现在这个代码可以存放在你的 Git 仓库或数据库中，这可能会提供更理想的控制级别。
• Stephen Shaw 详细介绍了如何通过用户交互（例如，单击“运行此代码”按钮）按需创建这些预填充嵌入，因此它们只在用户想要查看它们时才会出现。这是一种超级轻量级的方式，可以为任何博客文章或文档添加可选的交互性。

继续阅读 →

Scott Jehl 认为，首次内容绘制和最大内容绘制等性能指标并没有真正反映出每个人对网站体验的全部情况

这些指标通常被吹捧为可用性或意义的衡量标准，但它们并不一定对每个人都有意义。特别是，依赖辅助技术（例如屏幕阅读器）的用户可能在 DOM 完成后才感知到页面加载过程中的步骤，甚至更晚，具体取决于 JavaScript 如何阻止该过程。此外，在页面变得完全交互式之前，页面可能对辅助技术不可用，因为许多应用程序通常通过外部 JavaScript 提供可访问的交互性

然后 Scott 记下了一些关于我们如何做到这一点的想法。我认为这始终非常有用，要记住：我们在网站上的体验，以及我们衡量的体验，可能并非全部情况。

Julia Evans:

我决定通过添加和删除 CSS 类来实现几乎所有 UI，如果我想要动画化过渡，则使用CSS 过渡。

网站上的大量 JavaScript（如果不是完全由 JavaScript 构建）是单击该东西，切换类——这就是 jQuery 如此出色以及像Alpine.js这样的库能找到快乐的开发者群体的原因。

我曾经做过一个名为“嘿，设计师，如果你只知道关于 JavaScript 的一件事，这就是我推荐的“的屏幕录制，它基本上是：学习切换类。从那里

有时，为了开始学习某个庞大而复杂的东西的旅程，你需要学习一些小而简单的东西。JavaScript 庞大而复杂，但你可以通过学习一些小而简单的东西来逐步进入它。如果你是一名网页设计师，我认为有一件事你可以学习，它非常强大。

这就是我想让你学习的：当你单击某个元素时，更改某个元素上的类。

Chris Ferdinandi 的一个不错的提示

我的node_modules目录包含了 50MB 的东西，规模很小，在某些情况下，文件超过了 200MB。在几十个项目中，这真的加起来！

二十多个项目中有 200 MB 的node_modules？对于一堆你可能已经忘记了的东西，它几乎占用了 5 GB 的空间，而且没有做任何事情，如果你需要重新使用，只需要一个命令就能完成。我觉得应该有一个专门用于这些文件夹的清理程序，如果它们几周没有被触碰，就将其删除。

继续阅读 →

这正是我想从任何浏览器供应商那里听到的

在浏览器兼容性方面，仍然存在太多缺失的功能和边缘情况错误。但情况并非一定如此。如果浏览器供应商能够理解导致最大痛苦的原因并采取措施解决这些问题，那么情况就会变得更好，而且也会变得更好。在 Chrome 中，我们正在尽力倾听，我们正在尽力解决我们听到的问题。我们希望它有所帮助，我们期待着 2021 年更加兼容的局面。

我喜欢对那个超级聪明的在每个浏览器中看起来都不一样的 div的认可。这是 Stephen McGruer 的一份可靠清单。我最喜欢的

就像 Flexbox 一样，CSS Grid 是现代布局的重要组成部分。查看早期的调查结果，似乎 Chromium 中的 CSS Grid 支持情况相当不错（我们要感谢来自Igalia的朋友们！）。有一个明显的例外——Chromium 仍然不支持subgrid。

希望，它不会成为例外太久。这还处于早期阶段，但我很高兴地分享，微软 Edge 的一个团队正在重新构建 Chromium 的 Grid 支持，以使用新的 LayoutNG 引擎——并且作为其中的一部分，他们打算添加 subgrid 支持！

并非每个人都应该放松，但我认为现在可能是我们见过的最好的浏览器兼容性级别。