Richard MacManus 解释 Daniel Kehoe 的 方法，他称之为“无堆栈”

Kehoe 的方法依赖于 三种关键的 Web 技术

• ES6 模块：JavaScript ES6 可以支持导入模块，浏览器也支持这些模块。
• 模块 CDN：现在可以从第三方内容交付网络 (CDN) 下载 JavaScript 模块。
• 自定义 HTML 元素：开发人员现在可以通过 Web Components 创建自定义 HTML 标签。

使用无构建过程，并且只使用内置于浏览器的功能，但仍然可以为你提供一个非常强大的设置。你仍然可以使用 npm 上的东西。你仍然可以获取模板。你仍然可以使用组件进行构建。你仍然可以在需要时获得隔离。

我想说，今天你正在

• 放弃一些 DX（热模块重新加载、JSX、框架小部件）
• 获得一些 DX（可以跳入项目并立即开始工作）
• 放弃一些性能（没有树摇，大量网络请求）
• 扩大你的招聘范围（更多人了解核心技术，而不是特定工具）

但很难想象未来我们会放弃更少，获得更多，从而使我们今天使用的工具不再那么必要。我确信我们总会找到一种方法将更多工具塞进我们正在做的事情中。锤子什么什么钉子。

我真的很喜欢那种技术写作，一个开发人员会提出一些具体需求，尝试不同的技术来满足这些需求，并记录他们的过程。

这就是 Andrew Walpole 在这里所做的事情。他想要尝试在 WordPress 主题的上下文中使用捆绑器，并且需要构建一些特定的文件。两个 JavaScript 文件和两个 Sass 文件，可以从 npm 导入内容，并且需要被最小化，并带源码映射以及其他所有东西。这与八年前我写 适合那些认为 Grunt 很奇怪和很困难的人的 Grunt 时所做的事情基本相同。这个过程并没有变得更容易，但至少它变得更快了。

Andrew 的获胜者：通过 Estrella 使用 esbuild。

Davor Suljic 所做的这个 “字体” 中的每个字母都是一个单独的 div，并且只用 border 绘制。这意味着要使用一些技巧，比如 border-radius，以及像 border-radius: 100% 100% 0 0 / 37.5% 37.5% 0 0; 这样的奇特语法，它只将元素的顶部圆角化，并带有一种特定的冷峻效果，在这里很有用。此外，还使用 伪元素。我喜欢它在颜色、阴影和边框样式方面的所有古怪变化，它依托 CSS 的限制。

继续阅读 →

Josh 的一篇精彩文章，既介绍了 CSS 过渡，又涵盖了有效使用它们的细微差别。我喜欢关于元素位置过渡的建议，保留它最初占用的空间，这样就不会出现他称之为“灾难闪烁”的结果。六百五十年前，我创建了 CSS Jitter Man 来尝试解释这个想法。

交互式内容非常棒，有助于解释这些概念。我有点嫉妒 Josh 使用 MDX 写作——这意味着他可以使用 Markdown 和 JSX。这意味着这些演示可以是小型的一次性 React 组件。这是一个 Josh 展示了它的价值的帖子。

来自 Stephanie Eckles 的一系列很棒的小巧布局相关的 CSS 代码片段，既可以作为快速参考，也可以提醒人们 CSS 已经变得多么简单和强大。

一些需要注意的随机内容！

继续阅读 →

事实证明，你可以使用几种不同的库在组件之间传递颜色信息。或者，你可以使用内置于 CSS 的自定义属性，不会降低自己的开发体验，并为你的用户提供更快的体验。Kent 在这里用演示证明了这一点。

为了记录，你可以比 Kent 在这里做得更进一步，根本不使用 CSS-in-JS，但仍然可以从 React 中的按钮点击更新 CSS 自定义属性，并在那里管理状态等等。我告诉你，像 React 这样的 UI 组件库的主要工作之一是管理状态，而 CSS 也应该知道那个状态，这样你就可以使用它来执行任何你需要的样式。

继续阅读 →

Simeon Griggs 提供了一些用于食谱网站的 不错的 UX 想法

• 没有数学。在单位之间切换并动态调整份量。
• 提供替代成分。
• 在说明中引用时重新列出成分数量。

我完全同意，尤其是最后一点

在我们所有改进中，我认为这是我最喜欢的。

典型的食谱布局包含在开头带有数量的成分。然后，一个执行方法的项目符号列表。

但是，该方法通常不会再次引用这些数量，因此，如果你没有提前准备所有数量（这应该是你应该做的事情，但来吧，谁会这样做呢），你将不得不反复扫描。

使这些东西成为可能的部分原因在于你如何设置数据模型。例如，一个成分可能是一个 Array，而不是一个 String，这样你就可以在开始时提供替代品。

Zach 查看 用于流畅、响应式图像的一些基本 HTML+CSS 使用方法。我想说，其中大部分是你所期望的，但当 srcset 出现时，事情就变得奇怪了。

我仔细研究了一下，除了 Zach 提到的奇怪的事情之外，我还想添加一点。让我们从这里开始

继续阅读 →

Andy 关于 CSS 中真正新事物的精彩报道。如果你有一年没有关注 CSS 中的新事物，我敢打赌，其中大部分对你来说都是新的。其中许多已经足够前沿，你可能无法立即将它们应用到项目中，但这种差距正在迅速缩小。我粗略估计，再过一年，我们就会毫无顾虑地使用所有这些东西。我确信，再过一年，我们将毫无顾虑地使用所有这些东西。

继续阅读 →

我喜欢 Andy 的想法

.wrapper {
  width: clamp(16rem, 90vw, 70rem);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

通常我会在那里设置一个 max-width，但正如 Andy 所说

这在中等尺寸的视口中会出现一个小问题，比如平板电脑纵向模式，在长篇内容中，比如这篇文章，因为从上下文中看，行长感觉非常长。

因此，在超大屏幕上，你将被限制在 70rem（或者你认为合适的最大值），而在小屏幕上，你将获得全宽度，这很好。但是那些中间的值并不那么好。我创建了 一个小小的演示 来体验一下。我认为这段视频可以清楚地说明这一点