Heydon 的 神圣的信天翁 是一种让一排元素在特定宽度下断裂成一列元素的技术。一个指定的父级宽度，而不是像媒体查询那样的屏幕宽度。所以，就像容器查询（你知道，那些我们都想要的还没有出现的查询）。

我以前用过它，尽管有人指出，只对两个元素使用它实际上没有必要，并且神圣的信天翁在处理三个或更多元素时最有用。

继续阅读 →

我敢打赌grid-template-columns的使用频率是grid-template-rows的 10 倍，但也许每个人都错过了它。Eric Meyer 在他的主要站点布局网格上添加了一堆行线，就像这样

grid-template-rows: repeat(7, min-content) 1fr repeat(3, min-content);

这样，如果你需要使用它们，它们就在那里供你使用

我喜欢这种模式。对我来说，感觉很好，有两组行，当需要时，各个行会展开以接受内容，而不需要时则会折叠为零高度，在两组之间有一个“空白”行将它们分开。它很灵活，甚至允许我在不重写所有布局样式的情况下向这些集合中添加更多行。

如果在一个站点上有一些内容，并且想要在另一个站点上显示这些内容怎么办？我们可以在浏览器中毫无问题地做到这一点。我们可以获取它，并将其放置到页面上。

Ajax，对吧？呃。现在我们进入了客户端渲染站点的领域，这对性能、速度或弹性都不利。

如果我们可以在服务器端获取该内容并将其缝合到主页面中会怎样？服务器端并不是正确的词。如果我们可以在全局 CDN 层次上做到这一点会怎样？像他们所说的那样，在边缘执行。 CodePen 一直在做这件事，所以我们可以使用可爱的 WordPress 块编辑器构建页面，但将它们提供给我们主要站点。

可以使用省略号（…）相当轻松地截断一行文本和一些朋友。但是，正如你可能预料的那样，截断发生在文本行的末尾。如果想要在中间截断内容怎么办？

Leonardo Faria 详细介绍了此功能的良好用例，例如在操作系统窗口中列出文件。文本行是文件名和文件扩展名。当该行截断时，它只会截断名称，始终在末尾保留扩展名。技巧在于一个 Flexbox 父级，以便可以在文件名部分使用溢出，但必须确保重置min-width，因为那里的自然值为min-content，这会阻止截断，这令人困惑。

继续阅读 →

我喜欢apilayer公司的标语：“自动化应该自动化的内容。”他们有一套丰富的产品，它们都是具有清晰文档的 API。它们都具有可用的免费层，用于开发和验证想法，然后在需要更积极地使用 API 时付费计划。他们有一个全新的产品：marketstack。

使用此 API，可以访问当前和历史的股票市场数据。是否有一个需要股票数据的应用程序（或业务！）的想法？想绘制苹果的走势图吗？使用你的密钥和 AAPL 股票代码访问 REST API，你将获得所需 JSON 数据。如果你一直想构建一个股票市场应用程序，这完全打开了这扇大门。

继续阅读 →

通常，当我看到诸如“绘制顺序”或“堆叠上下文”之类的术语时，我的大脑就会开始关闭，我的眼睛也会变得模糊。并不是说我的大脑通常不会比平时更频繁地关闭，但那是另一个时间讨论的另一个话题。

Igalia 的 Martin Robinson触及了这些概念，使用了一个即使对我来说也很容易理解的例子。他从两个具有负边距的重叠框开始。

继续阅读 →

Guillermo:

我想说明一下，优先考虑应用程序关键部分的端到端 (E2E) 测试将降低风险并为你带来最佳回报。此外，我将展示如何在短短几分钟内采用这种方法。

他的测试是

1. 启动 Puppeteer（无头 Chrome）和 Chai
2. 转到主页
3. 测试主页上是否显示了他的姓名。

是。

仅仅一个超级基本的集成就能发挥很大的作用。如果你的站点启动、返回页面并在其上呈现你期望的内容，那么很多事情都做对了。然后，一旦你拥有了它，你就可以添加一些其他的，在其中你四处导航并点击一些东西。而且，如果它仍然有效，那么你的状况就相当不错。

继续阅读 →

Rob Weychert:

但我无法托管你的站点，甚至无法托管我自己的站点。我没有构建 CMS。其他人制作了我用来生成和优化图像的硬件和软件。其他人制作了字体。其他人标准化了这些图像和字体的数字格式。我没有编写 HTML 和 CSS 规范，也没有编写解释它们的浏览器，也没有编写运行浏览器的操作系统。我没有焊接电路板。等等。

网站背后有如此多的硬件和软件，以至于肯定没有人完全理解所有内容。我们都在彼此的肩膀上构建一切。（相关：我，网站）

但我们可以对选择使用哪些技术施加一些影响。Rob 有三个主要考虑因素

1. 复杂性：它有多复杂，谁承担了这种复杂性的成本，以及是否可以接受？
2. 可理解性：我是否理解它是如何工作的，如果不是，这是否重要？
3. 可靠性：我期望它持续工作多长时间以及多久？

我喜欢那个系统。但更重要的是，我喜欢他有一个系统。我敢打赌大多数人没有。这就是为什么“只需使用 npm 安装即可解决问题”是一个可靠的会议笑话。

我喜欢这些小帖子，其中一些看起来很棘手的设计可以通过使用鲜为人知属性的 CSS 单行代码来解决。在这种情况下，设计是磨砂玻璃效果，CSS 属性是backdrop-filter。

继续阅读 →

Michelle Barker 涵盖了一种需要偏移矩形作为可点击区域的情况。棘手的部分是只有矩形是可点击的。这排除了使用某些父元素并使整个更大的包含矩形可点击，这是一种常见（但同样棘手）模式。

使用绝对定位将一个矩形踢出链接矩形的范围可以工作，但 Michelle 在这里采用了一条路径，将所有内容都布置在网格上，然后使用pointer-events使点击区域恰到好处。对我来说感觉更健壮。

继续阅读 →