这是 Nicolas Chevobbe 关于 Firefox DevTools 团队去年所做的事情的精彩文章。 让我印象深刻的是他们发布了多少改进 - 从大型视觉设计改进到微小的可用性修复，帮助我们确保我们的代码按预期在控制台中运行。

这里还有很多关于 Firefox DevTools 未来发展的有趣提示。 例如，与 MDN 的更紧密集成，以及 Nicolas 在该帖子中提到的，使它感觉像一个游乐场，您可以在其中改进设计，而不仅仅是修复问题。 无论如何，我已经觉得 Firefox DevTools 在任何浏览器中都拥有最好的排版功能（一定要查看检查器中的“字体”选项卡）。 我迫不及待地想看看接下来会发生什么！

Remy Sharp 的这个小网站清楚地表明 JavaScript 方法是否会更改原始数组（又称变异）。

实际上，我前几天就被这个问题困扰了。 我需要数组中的最后一个元素，所以我记住了 .pop() 并使用了它。

const arr = ["doe", "ray", "mee"];
const last = arr.pop();
// mee, but array is now ["doe", "ray"]

这当然一开始就非常有效，但我没有意识到原始数组已经发生了变化，它导致了一个问题。 相反，我不得不找到非变异的替代方案

const arr = ["doe", "ray", "mee"];
const last = arr.slice(-1);
// ["mee"], arr is unchanged

相关：数组浏览器

我被这个想法吸引了，即您不应该关心您编写的代码最终如何在浏览器中呈现。 它已经被压缩了。 它已经被 gzip 压缩了。 它已经被变形了（真实词语！) 那些对它进行补丁的东西，那些将其转换为旧浏览器可以理解的代码的东西，那些使它运行得更快的东西，那些删除未使用的位的东西，以及那些将它分解成超出我理解范围的技术块的东西。

趋势是，我们编写的代码越来越远离我们编写的代码，正如我所说，我被这个想法吸引了，因为通常，这样做是为了让网站对用户来说更快。

但正如 Dave 指出的，当出现问题时……

随着工具链的增长和变得更加复杂，除非您非常熟悉它们，否则我们的代码中到底发生了哪些转换并不清楚。 跟踪输入和输出之间的差异以及代码所经历的过程可能会让人不知所措。 当出现问题时，越来越难以跳入流水线并诊断问题，并且通常没有精确的修复方法。

大多数在线表单解决方案要么过于复杂，要么过于昂贵。

我们认为你不应该花几个小时为你的企业创建在线表单。 这就是我们构建 WPForms 的原因，它是一款拖放式 WordPress 表单构建器，既简单又强大。

继续阅读 →

我并没有那么保护 CSS，以至于我不能听到它被批评，但我当然同意这里所说的。 CSS 并不糟糕。 我喜欢这篇帖子如何将当前的 CSS 功能炒作起来，就像其他语言和工具的功能一样。

想象一下，如果一个科技人员在会议上登台并说出以下内容：

“这种声明式语言将在失败时优雅地继续，允许您编写全局和作用域代码，并且它将在您的整个前端堆栈中工作，无论它是由框架、CMS 还是静态 HTML 文件渲染的。”

…… 现在，如果我对它进行略微修改，反响可能正好相反。

“CSS 将在失败时优雅地继续，允许您编写全局和作用域代码，并且它将在您的整个前端堆栈中工作，无论它是由框架、CMS 还是静态 HTML 文件渲染的。”

Sarah Dayan 对实用（原子）CSS 的相当完整有力的论据（或者更确切地说，是对反对论据的回应）。 我最近想知道重新设计是否可能是这些类型的系统的弱点（大量拆除类），Sarah 承认这一点，并建议更多抽象来帮助解决这个问题。

我还在想工作流程。 我有点要求在提供 样式注入 的环境中工作，因此使用 CSS 感觉很流畅。 我还担心每次我想修改设计时都必须更改 HTML 会导致刷新。 我想，如果你身处热模块重新加载的环境中，那就可以了。

此外，这似乎可以 走得太远。 在某个时刻，改变一个空格分隔的字符串来执行所有你想做的事情具有符合人体工程学的局限性。

Tim Kadlec 谈论围绕糟糕的网络性能的问题，以及为什么我们如此重视让我们的网站尽可能快。

糟糕的性能会导致排斥，而且确实会导致排斥。 这一点现在已经被充分证明，但值得重复。 使用过量资源的网站，无论是在网络上还是在设备上，不仅会导致缓慢的体验，还会将整个群体排除在外。

高端设备可以处理的内容与中低端设备可以处理的内容之间存在着越来越大的差距。 当我们构建包含大量 CPU 密集型任务的网站和应用程序（嗨，JavaScript）时，这些网站和应用程序在使用那些更实惠、功能更受限制的设备的人身上最多会变得非常缓慢。 最糟糕的是，我们确保我们的网站根本无法为他们工作。

别再将今年的设备与几年前的设备进行比较了。 排斥也可能发生在全新的设备上。 网络的增长主要由低成本、低性能的 Android 设备推动，这些设备经常难以处理当今的网络。

不过，正如 Tim 在文章结尾提到的，人们很容易忘记网络性能，有时很难为让网站变快而辩护。 它通常被视为锦上添花，而不是像语义标记和无障碍合规性那样本身就是一个核心功能。

不过，我对围绕这个主题的讨论正在改善现状感到乐观。 在浏览器中直接内置了像 Lighthouse 这样的工具使事情变得更容易，以及像 Calibre 这样的测试工具的丰富存在让我们能够准确地了解问题在哪里以及可能存在的问题。 但我们也需要记住，这不仅仅是一个技术问题 - 也是一个伦理问题。

我非常喜欢 CSS Grid，并且在几乎每个项目中都使用它。 然而，其中有一部分让事情变得比实际需要复杂得多：缺乏子网格。 在这篇关于这方面问题的文章中，Ken Bellows 解释了它们为什么如此有用

但 Level 1 规范中仍然缺少的一点是创建子网格的能力，即一个具有自己网格的网格项，该网格在一个或两个维度上与父网格对齐。 它最初计划包含在 Level 1 中，但工作组认为他们需要更多时间来解决细节问题，因此将其删除，它将在 CSS Grid Layout Module Level 2 中发布，该模块似乎即将完成。

继续阅读 →

不要错过 Heydon 的这段深入探讨 CSS 布局的视频。 他将基础知识（例如元素的流动方式、换行方式以及可以具有边距的方式）与新的布局方法（如 Flexbox 和 Grid）结合起来（并提供具体的示例）的方式非常棒。 尤其值得注意的是，他对 Flexbox 和 Grid 如何帮助避免不断干预媒体查询以影响响应式布局的需要进行了清晰的演示。

继续阅读 →

Kirupa 提供了一个详细的教程，介绍了如何提供一个具有持久化选项的 UI 来控制动画是否运行。

诀窍是控制运动的自定义属性

body {
  --toggle: 0;
  --playState: "paused";
}

它用于动画和过渡

.animation {
  animation: bobble 2s infinite;
  animation-play-state: var(--playState);
}

.transition {
  transition: transform calc(var(--toggle) * .15s) ease-in-out;
}

继续阅读 →