来自 Knut Melvær 的一些不错的技巧。

最终，这个技巧归结为计算您在页面上滚动了多远，并更改标题以显示它，例如

document.title = `${percent}% ${post.title}`

Knut 的技巧假设使用 React 并安装一个额外的库。我相信那个库做了各种各样聪明的事情，但是如果你想以“原生”的方式做到这一点，我可能会使用类似这样的东西……

阅读更多

不错的视频来自 Kevin Powell。以下是一些笔记、想法以及我在观看时学到的东西。刚出来的时候，我主要痴迷于font-size的使用，但它们只是函数，所以它们可以在任何使用数字的地方使用，比如长度。

继续阅读 →

这是一个很棒的系列由Stephanie Eckles创作。观看 CSS 演变并以清晰优雅的方式解决问题，真是令人愉快。

继续阅读 →

我之前通过 Michelle Barker 的报道提到了这一点，但在这里我将链接到官方公告。主要内容是我们将获得带有flexbox的gap，这意味着

.flex-parent {
  display: flex;
  gap: 1rem;
}
.flex-child {
  flex: 1;
}

这很棒，因为过去在 flex 项目之间添加间距一直很困难。我们有justify-content: space-between，有时它很好用，但它不允许您明确地告诉 flex 容器您想要多少间距。为此，我们通常使用margin，但这意味着避免根据边距的方向设置第一个或最后一个元素上的边距——这很烦人，变得很复杂。

我们在 CSS Grid 中有gap，它要好得多。很高兴它也出现在 flexbox 中。

但它会变得有点奇怪。Safari 还没有支持它（稳定的 Chrome 也还没有），所以我们不能只是把它放在那里，并期望它能与 flexbox 一起工作。但是，我们现在不应该能够进行@supports查询吗？

/* Nope, sorry. This "works" but it doesn't 
   actually tell you if it works in *flexbox* or not.
   This works in grid in most browsers now, so it will pass. */
@supports (gap: 1rem) {
  .flex-parent {
     gap: 1rem;
  }
}

这变得很奇怪，因为grid-gap 被放弃了，取而代之的是gap。我相信grid-gap 将永远被支持，因为这些事情通常就是这样发生的，但我们被鼓励改用gap。因此，您可能会说 gap 有点过载，但随着时间的推移（一年？）这种情况应该会解决。由于column-gap 现在也将变成gap，因此它变得更加复杂了一点。gap 有很多工作要做。

尽管存在过载问题，但我仍然赞成更改。从长远来看，更简单的思维模型很重要，而且没有其他东西即将挑战 CSS 在浏览器中的样式化能力。我敢打赌，我两岁的女儿在她的一生中也会写一些 CSS。

Michelle Barker 指出，对于我们这些 CSS 布局极客来说，这真是一个令人兴奋的一周。

1. Firefox 长期以来一直拥有最好的 CSS Grid 开发者工具，但 Chrome 即将迎头赶上，并通过可视化网格线编号和名称做得更好一点。
2. Firefox 支持display: flex的gap，这很棒，现在 Chrome 也获得了这个功能。
3. Firefox 正在尝试一种砌体布局的想法。

Peter Tasker关于现在如何创建块

现在，使用WP CLI 的“scaffold”命令进行设置是相当简单的。此命令将设置一个 WordPress 主题或插件，其中包含一个“blocks”文件夹，该文件夹包含创建自定义块所需的 PHP 和基础 CSS 和 JavaScript。我注意到的唯一缺点是 JavaScript 使用旧的 ES5 语法而不是现代ESNext。现代 JavaScript 允许我们编写更简洁的代码，并在我们的自定义块代码中使用JSX。

您还可以使用“create-guten-block”工具，该工具由Ahmad Awais开发。它为你提供了许多开箱即用的样板代码，例如 Webpack、ESNext 支持等。设置它相当简单，并且类似于Create React App。

继续阅读 →

很容易认为使用 Jamstack 就意味着使用一些特定技术。这就是它传统上为我们打包的方式。想想 LAMP 堆栈，其中 Linux、Apache、MySQL 和 PHP 是明确的工具和语言。或者 MEAN 或 MERN 或其他。对于 Jamstack 来说，最初的 JAM 指的是 JavaScript、API 和标记。与其说是特定技术，不如说是一种松散的理念。

这很酷，因为它意味着我们可以使用我们自己的一套喜欢的技术，然后弄清楚如何利用这种理念获得最大的好处。这可能意味着使用我们最喜欢的 CMS、最喜欢的构建工具，甚至最喜欢的前端框架。

这就是 Netlify 的即将举行的关于在 Jamstack 中使用 Angular 的网络研讨会的核心内容。他们将介绍 Angular 如何融入 Jamstack 架构，如何在堆栈中使用 Angular 进行开发以及以这种方式工作的优势。此外，您还可以与Tara Z. Manicsic交流，这本身就值得了。

该网络研讨会免费，定于 5 月 13 日太平洋时间上午 9:00 举行。

“增量构建”的概念是，当使用某种构建网站所有文件的生成器时，与其每次都重新构建 100% 的文件，不如只更改自上次构建以来需要更改的文件。这似乎是一个显而易见的好主意，但在实践中，我相信这非常棘手。您如何在构建之前就知道哪些文件会更改，哪些文件不会更改？

我不知道答案，但 Gatsby已经解决了这个问题。更快的本地构建是一半的乐趣，另一半是部署也变得更快，因为需要移动的文件要少得多。

继续阅读 →

莎拉:

多年来，我不得不实现相同的英雄，所以像一个优秀的懒惰程序员一样，我想我会自动执行它。

Harry Roberts:

迄今为止的数据显示，不压缩和 Gzip 之间的差异很大，而 Gzip 和 Brotli 之间的差异则要小得多。这表明，虽然不使用 Gzip的收益将是显而易见的，但从 Gzip 升级到 Brotli 可能不那么令人印象深刻。

继续阅读 →