Ethan 关于激发该术语的思考和研究

大约那个时候，我的伴侣 Elizabeth 在其开放后不久参观了 纽约市的高线公园。回来后，她告诉我她在其中一个区域看到 这些带轮的休息椅，以及人们如何将它们分开以获得一点独处，或者将几把椅子推在一起以便更靠近朋友坐在一起。我们开始兴奋地聊起它们。我认为那张图片非常引人注目：一个可以由穿行其中的人们控制、重塑和重新设计的空间。

我记得那天晚上花时间阅读了更多关于这些椅子的信息，然后又阅读了更多关于更具动态性的建筑形式的信息。我阅读了关于用拉伸材料和嵌入式传感器建造的墙壁的概念，以及这些墙壁如何在人们靠近它们时弯曲和弯折。我阅读了关于玻璃墙可以在一瞬间或检测到运动时变得不透明的信息。我甚至买了一本关于这个主题的非常棒的书，互动建筑，它将这些新的空间描述为物理对象或空间与与其互动的人们之间的“对话”。

经过几天的研究，我发现了一些文章，它们在两个不同的术语之间交替使用，指的是同一个概念。它们会称其为互动式架构，当然，但随后会用不同的名称来指代它：响应式架构。

很有意思。

十年后的今天，响应式网页设计已经根深蒂固，成为了一个默认假设。在那个时间的一半时，我就会将其称为一个假设。我在 一次采访中回答…

响应式是否需要继续推广，或者现在每个人都理解了吗？

我认为响应式设计在 2015 年就已经成为一个假设。即使在当时，如果你交付给客户的网站只是一个放大的“桌面”网站，他们也会认为它坏了，并且你没有真正完成你的工作。如今，更是如此。这已经不再是可接受的做法了。

当然，响应式设计的技术方面对我来说很有吸引力。即使是谷歌也有 关于这个主题的指南，并且强烈鼓励这种方法。但是核心技术实现并不特别复杂。保持灵活；使用一些 @media 查询根据需要重新设置样式。

过去十年中更大的变化是其对企业的影响。调整工作流程以适应这种思维方式。将过去在完全不同的代码库上工作的开发人员团队合并到一个代码库上工作。组织的影响远没有技术本身那么直接。

这与网站构建领域最近发生的转变之间存在共鸣，例如设计系统惊人的兴起，以及更重要的是，JavaScript 的“政变”。

Amber Wilson 提供了一些 针对新手开发者 CSS 提示，例如

用 CSS 修复 HTML 中的缺陷不是一个好主意。首先修复你的 HTML！

以及…

你可以在浏览器的开发者工具中直接更改 CSS（要打开它们，右键单击浏览器窗口并选择“检查”或“检查元素”）。最棒的是，这些样式都不会被保存，所以你可以在此处进行实验！开发者工具的另一个优点是“计算样式”选项卡，因为它会准确显示当前应用于元素的样式。这在调试 CSS 时非常有用！

那里有 24 个提示。我通过使用开发者工具将 <ul> 更改为 <ol> 来“计算”的。😉

原型设计应用程序 Framer 刚刚推出了其设计工具的网络版本，看起来非常整洁。我特别喜欢用于解释如何使用 Framer 以及它与其他设计工具的区别的营销网站的设计。他们还有许多你可以打开探索的示例，例如此演示，演示如何在应用程序中制作悬停工具提示

我必须说我喜欢 Framer 中的 UI 体验——无论是在网站上还是在设计应用程序本身中。它们都让我想起了 Oculus Quest 的 UI，带有圆角和深色模式风格的元素。我知道这可能只是一个愚蠢的趋势，但我喜欢它！

无论如何，我还没有深入研究这个新奇的工具，但动画效果似乎非常神奇，绝对值得尝试。

当你使用 font-display: swap; 时，当你在 URL 中使用默认的 &display=swap 部分时，Google Fonts 会这样做，你实际上是在说，“我不介意 FOUT，”这也就是 web 文本立即显示，并且当 web 字体准备好时，“替换”为它的另一种说法。

你正在做的事情本来就具有一定的异步性，所以你也可以将这种异步性扩展到字体加载的其余部分。Harry Roberts

如果你要为你的 Google Fonts 使用 font-display，那么异步加载整个请求链是有意义的。

继续阅读 →

你知道那些你意外地将元素放置在浏览器窗口右侧边缘时出现水平滚动条的时候吗？它可能是一个滑入的菜单或类似的东西。有时我们会对 body 使用 overflow-x: hidden; 来修复这个问题，但这有时会破坏诸如 position: sticky; 之类的东西。

嗯，你知道如果你将元素放置在浏览器窗口的左侧边缘，它不会这样做吗？那是 “数据丢失”，并且就是这样。它实际上与页面的 direction 有关。如果你处于 RTL 情境下，那么浏览器窗口的左侧边缘会导致溢出情况，而右侧边缘则不会。

Emerson Loustau 利用这个想法来解决这里的一个问题。 我会非常紧张地去修改 direction，因为我不知道副作用是什么。但是，嘿，至少它不会破坏 position: sticky;。

Jeremy 敲响经典的警钟

对于网页开发，从 HTML 开始，然后是 CSS，然后是 JavaScript（并且不要太快转向 JavaScript——先真正掌握 HTML 和 CSS）。

然后…

那是假设你希望成为一名优秀的、全面发展的网页开发者。但你可能需要尽快找到一份工作。在这种情况下，我的建议会大不相同。我会建议你学习 React。

JEREMY！你的网站被盗了吗‽ 如果需要帮助，请眨两次眼睛。

开玩笑，开玩笑。我完全同意。我是 React 的粉丝，如果你没看出来的话。但我也经历过很多事情，并且认为在大多数情况下，我对什么是这项工作的正确工具有很好的理解。

请务必阅读 Jeremy 的文章，以了解为什么它被称为“用户代理”。他的意思确实是字面意思。

当询问人们他们会修复 CSS 中任何内容的问题时，一个令人惊讶的常见答案是改进视口单位的处理方式。

经常出现的一个问题是它们与滚动条的关系。例如，如果一个元素的大小设置为 100vw 并拉伸到边缘，只要页面没有垂直滚动条，这就可以了。如果它确实有垂直滚动条，那么 100vw 太宽了，并且垂直滚动条的存在会触发水平滚动条，因为视口单位没有优雅/可选的方式来处理这种情况。因此，例如，你可能在不需要的情况下隐藏了 body 上的溢出。（演示）

另一种情况涉及移动浏览器。你可能使用视口单位来帮助你将固定页脚定位在屏幕底部。但是，浏览器 chrome 可能会出现（例如，导航、键盘等），并且它可能会覆盖页脚，因为移动浏览器不会认为视口大小有任何变化。

继续阅读 →

就像有一个运动是让更多网站（以及更多网站的部分）来自预渲染的静态文件（Jamstack）一样，我们也可能考虑将基于内容的 API 设为静态。Sean C Davis

静态 API 仅仅是位于内容分发网络（CDN）上的一组扁平的 JSON 文件。它除了将内容（静态 JSON 文件）传递给请求用户之外，不执行任何其他操作。

但这并不意味着静态 API 很简单。并且每个文件都不需要手动生成或更新。静态 API 仍然可以使用数据库，并且仍然可以从外部服务提取数据。换句话说，它可以动态生成，但它是静态交付的。

用例可能有点有限，但我仍然喜欢它。从某种意义上说，所有 RSS 馈送（或更直接地说，JSON 馈送）都可以通过这种方式完成，并且许多 已经这样做了。

要使用 Web Animations API（例如 el.animate()），你需要一个对要定位的 DOM 元素的引用。那么，如何在伪元素上使用它呢，伪元素并没有真正提供直接的引用？Dan Wilson 介绍了 API 本身的一个（较新的？）部分

const logo = document.getElementById('logo');

logo.animate({ opacity: [0, 1] }, {
  duration: 100,
  pseudoElement: '::after'
});

继续阅读 →

和任何拥有活跃博客的人聊聊，我敢打赌他们都会告诉你博客对他们很有价值。也许它打开了新的机会。也许它帮助他们找到了工作。也许它让他们获得了参加会议的邀请。也许他们只是喜欢知道有人阅读并回应他们的博客的快感。也许他们在创建和维护博客的过程中学到了很多东西。

Khoi Vinh 表示

我的博客有多重要，很难夸大其词，但如果要将其概括为一个词，那就是：“放大器”。

但是其他类型的写作呢？仅仅是日常写作？这对网络工作者来说重要吗？“尤其是在现在”？

继续阅读 →