这是 Roman Komarov 关于他在提高个人网站性能方面学到的一些东西的精彩帖子。 他做了一些巧妙的事情来解决字体加载问题，例如添加<link rel="preload"/>标签来加载字体。 这将鼓励这些字体文件更快地下载，从而避免奇怪的未设置样式文本的闪烁我们太熟悉了。 Roman 还根据语言对字体文件进行子集化，我觉得这非常有趣——因为他的网站的某些页面只使用西里尔字母。

继续阅读 →

为了纪念网络诞生 30 周年，CERN 召集了九位网络极客一起重新创建了第一个网络浏览器——或者说，用你从网络浏览器中使用它的方式来模拟它的工作方式，有点像盗梦空间的风格。

干得漂亮，Mark Boulton、John Allsopp、Kimberly Blessing、Jeremy Keith、Remy Sharp、Craig Mod、Martin Akolo Chiteri、Angela Ricci 和 Brian Suda！我喜欢它是由React 编写的，并且字体是当时使用的字体的实际复制品。 真酷的项目。

他们甚至开源了代码。

继续阅读 →

我喜欢这样的帖子。 它只是关于在某些链接的末尾添加一个小图标，但它最终涉及了许多东西。 我认为这是为什么有些人觉得前端有趣而有些人却不喜欢它的一个例子。

涉及的事项

1. 很酷的[attribute]选择器，用于识别非网站链接
2. 考虑在链接中使用额外的 HTML 是否可以
3. 使用white-space
4. 结合使用margin-left和padding-right将图标放置在占位符空间中
5. 使用自定义属性来简化操作
6. 使用内联 SVG 与背景 SVG
7. 考虑inline与inline-block
8. 使用蒙版

这是 Andy Bell 的一个巧妙的技巧，现在看来有点显而易见：如果你将 SVG 设置为宽度和高度为 1em，那么你可以使用font-size属性改变它的大小。

尝试更改下面body元素的font-size，以查看图标是否随文本一起缩放

查看 CodePen 上 Andy Bell 的笔
字体大小控制的图标 (@andybelldesign)
在CodePen上。

你几乎总是希望你的图标与文本对齐，因此这个技巧通过在你的代码中创建这种固有的关系来提供帮助。 相当不错，对吧？

Gaddafi Rusli 的ICONSVG有很多值得称道的地方。

1. 它提供内联<svg>，这是交付它们的通用方式，并且可能是使用它们的方式。 每个图标都是一小段 SVG，我敢打赌它们都是手工压缩的。
2. 它们都是基于描边的，因此可以根据需要进行加粗或变细。
3. 可以调整stroke-linecap和stroke-linejoin属性，这提供了使它们的边缘更清晰或更圆润的机会。 我经常发现一些与我想要的图标很相似的图标，但它们的粗细不合适，或者边缘要么太尖锐，要么太圆润。 这种快速简便的配置非常棒。

任何overflow值（除了visible和没有高度）都是带有position: sticky;的子元素的敌人。 就像这个元素准备好粘贴到父元素滚动时，但它永远不会粘贴，因为高度没有约束。 添加一个固定高度可以解决这个问题，但并不总是可取的。

Dannie Vinther 探讨了一种处理这种情况的方法。 最终结果是通过从需要溢出的元素中移除想要粘贴的元素来完全避免这种情况。 但是，一旦你这样做，这些元素就不会再一起滚动，因为它们不是兄弟元素。 这里的用例是一个表格，在垂直滚动时具有粘性标题，并且允许水平滚动。 Dannie 使用脚本同步滚动位置。

Violet Peña 分享了她使用 CSS Grid 的建议。 它们基本上可以归结为以下几个要点

1. 使用名称而不是数字来设置网格列。
2. fr应该是我们选择的灵活单位。
3. 我们不再真正需要网格系统了。

尽管这些都是很好的建议，并且 Violet 提供了一些示例来支持她的建议，但我特别喜欢她对学习CSS Grid 的说法

“学习”CSS Grid 需要培养对许多新属性的工作理解，这些属性不仅描述一个外观或行为方面，而且构成了一个全新的布局系统。 这个系统包括大约 18 个属性，这些属性使用在 CSS 规范中很少（或从未）见过的范式和语法。

继续阅读 →

情况是这样的：你在两周内几乎全职地设计了一个复杂的设计，将所有东西都精确到设计文件的规格，然后将其提交给利益相关者进行审查，结果发现……你超出了范围。 事实证明，团队中的一些人凑在一起，做了一些更改，但从未给你发送过更新的样稿。

糟糕！

不幸的事实是，这种情况在前端开发中经常发生，但这并不是任何一个人的错，因为它归结为简单的集体误解和团队缺乏透明度。

那么，这就是像 monday.com 这样的项目管理平台发挥作用的地方。 继续阅读 →

你见过Diana Smith 的 CSS 绘图吗？ 太棒了。 这些远远超出了那些粗略地复制平面 SVG 场景的 CSS 绘图，就像我可能会尝试的那样。 我们很幸运地让她在去年发布了一些她的 CSS 绘图技巧。

好吧，Diana 还列出了她用来完成这些杰作的五大 CSS 属性，它们在简单性上令人惊讶

1. border-radius
2. box-shadow
3. transform
4. gradients
5. overflow

……但当然，它们充满了技巧！

继续阅读 →

Brad 指出了各种应用中的一些 UX 问题，这些应用在登录表单方面做了一些与常态略有不同的事情。 在表单方面，已经有很多事情需要做对（例如，使用正确的输入类型、标记你的输入、不要设置奇怪的密码要求、使用 SSL 等）……我的天哪，为什么还要把它变得更复杂？！

“密码管理器测试”应该成为这里的开发最佳实践。 它是否能与内置的浏览器密码管理器完美配合？ 1Password 和 LastPass 呢？ 不？ 请为它添加一些爱，谢谢。