Michael Scharnagl 的一篇不错的教程，他在其中以非常好的功能逐步增强了一个功能完备的评论表单。 例如自定义错误消息、自动扩展高度，甚至像 ajax 和离线提交这样的非常花哨的东西。

Preethi Kasireddy 和 Vivian Cromwell 推出的一个新的访谈系列，重点关注“开发人员产品是如何制作的”。 我很荣幸成为 幸运的第三位，在其中我过度分享了关于 CodePen 的信息。

我非常喜欢 Thoughtbot 的这个想法。 就像自动工具检查您的 HTML 以查找语法、格式、有效性或其他任何内容一样，FormLinter 检查您的 <form> HTML 以查找最佳实践。 例如，每个输入都有一个标签，使用正确的输入类型，必填字段等等。

Ben Orenstein:

正确地执行所有这些操作是值得的：这些改进提高了可访问性并增加了转化率。 然而，手动检查这种事情既乏味又容易出错。

我们在 CSS-Tricks 团队聊天中测试了一些表单，它确实做到了它包装盒上的说明。 在 Geoff 的个人网站上，它 给他的联系表单打了“B”，因为输入没有匹配的标签，并且没有必填字段（似乎是一个相当高的分数？）。 表单是从 WordPress 的超流行的“联系表单 7”输出的，这也令人惊讶。

但是我们测试的许多表单都炸毁了应用程序。 对此没有消息。 可能是 HTTPS 问题？

Atif Azam 的一个很酷的小库，它允许您将名称包装在一个跨度中，它会放置一个小的 🔊 按钮来听到发音。 音频来自 NameShouts。 我所能知道的，您不能对 NameShouts 贡献您自己的发音，但该库允许您提供备用来源。

我根据自述文件中的屏幕截图制作了一个演示

查看 Chris Coyier (@chriscoyier) 在 CodePen 上的笔 Vocalizer 演示。

Potch

如果您必须在主线程上执行任务（修改 DOM 或与仅限主线程的 Web API 交互），您现在可以请求浏览器为您提供一个安全的时间窗口来执行此操作！

… requestIdleCallback 允许浏览器等到它识别到空闲时间段。 空闲时间段可能是绘制单个帧之间的几毫秒。

这似乎是成为最佳实践的事情。 但是，我们如何识别我们应该使用它的哪些事情以及哪些事情不应该使用它？ 就像“每当我们触摸 DOM 时，我们是否应该用它来包装？” 也许加上一个“除非您向用户显示新内容，这优先于动画抖动”。 如果您是一个抽象掉 DOM 触摸（和其他主线程任务）的框架，您如何决定优先级或不优先级？

Lara Hogan 的一本新书包含了一些我最喜欢的关于公开演讲的建议

当您站在舞台上时，请记住：您的听众正在期待您在发表这次演讲时会取得成功。 对他们来说，一切都经过精心思考和准备； 他们走进来时假设（正确地！）他们会学到一些新东西或得到启发……而您是向他们展示如何做的人。

更重要的是，他们希望您成功并且非常宽容。 就我个人经验而言，只有当您不尊重他们时，您才会失去他们（例如，“对不起，如果我准备得不够充分，我在飞往这里的航班上写了这个。” annnnnd 您就失去我了。）

嘿，当您在 A Book Apart 商店购买这本书时，我听说 这本书 很好。

没有什么比在 2G 国家旅行更能让你认真思考网络性能的了。 Monica Dinosaurescu

听着：不必这样。 您可以延迟加载您的字体。 这是 4 行 JavaScript 代码。 如果你雄心勃勃的话，那就是 7 行。

我仍然觉得很有趣，我们所有人都似乎讨厌 FOUT，并采取措施来对抗它，现在却像，“把 FOUT 带回来！”，而且基本上已经做到了。

她建议异步加载，这很好，但请记住，您可以更进一步。 更好的一步是 Zach Leatherman 指南中的 “带有类的 FOUT”，并且从那里变得更加花哨。

.masthead {
  /* Might as well let this color show */
  background-color: #3d332b;
  /* As this is loading */
  background-image: url(/img/masthead.jpg);
}

Harry Roberts 通过建议使用看起来更像加载的图像的渐变来升级它

.masthead {
  background-image: 
    url(/img/masthead-large.jpg),
    linear-gradient(to right, #807363 0%, #251d16 50%, #3f302b 75%, #100b09 100%);
}

Will Wallace 变得更加花哨，通过创建一个 Sass @mixin，它接受一个大型颜色数组来创建看起来更像原始图像模糊版本的复杂渐变。

查看 Will (@wiiiiilllllll) 在 CodePen 上的笔 “模糊背景”渐变函数。

我仍然认为处理它的最酷方法是 Emil Björklund 在这里介绍的 “模糊向上”技术。

我不同意 Jarno Rantanen 在这篇论文中提出的任何特定观点。

这是我第一次看到这种特殊的命名约定，对我来说似乎很好，但我要补充一点，任何经过深思熟虑的命名约定都有效。

此外，还有这个

级联样式最终会毁掉你的一天。

如今，许多人都有这种感觉，并且可能是世界上所有 peter-griffin-adjusting-the-blinds.gifs 的罪魁祸首。 我再次不完全反对，但是，我认为即使是经验丰富的 CSS 模块爱好者也会允许一些样式级联。 例如：为什么我不能让正文复制 font-family 级联？

Trident ~> EdgeHTML
WebKit ~> Blink

… 现在 …

Gecko ~> Quantum

David Bryant

高级方法是重新思考浏览器引擎工作方式的许多基本方面。 我们将重新设计基础构建块，例如我们应用 CSS 样式的方式、我们执行 DOM 操作的方式以及我们将图形渲染到屏幕的方式。

他说我们将在 2017 年看到它。 希望炒作是真实的！ Mozilla 拥有一个超级竞争力的独立浏览器引擎（就像它一直拥有的一样）对网络非常有利。