Genki Hagata

我的“顿悟时刻”出现在第 16 天，那时我意识到，每个 Javascript 框架都只是某人组织好的、有自己见解的代码编写方式。

大家好，CSS-Tricks 的读者和朋友们！ 今年我很荣幸能在精彩的 An Event Apart 系列会议上发表演讲和举办研讨会。 会议是为制作网站的人准备的，就像他们说的那样。

您应该参加一个与您的工作和生活相协调的会议。

以下是 2017 年的日程安排（所有城市都在美国）

• 4 月 3 日至 5 日 西雅图*
• 5 月 15 日至 17 日 波士顿
• 7 月 10 日至 12 日 华盛顿特区
• 8 月 28 日至 30 日 芝加哥*
• 10 月 30 日至 11 月 1 日 旧金山
• 丹佛 11 月 11 日至 13 日 丹佛

每个活动的最后一天（例如西雅图的 4 月 5 日）是“A Day Apart”，这是一个全天的研讨会。 带有星号（西雅图和芝加哥）的日期将由我主讲该研讨会。

我对所有活动都感到兴奋，但对研讨会尤其如此，因为那对我来说是一个全新的领域。 我一直在享受将所有材料整合在一起的过程。 这感觉很我。 我们将讨论构建网站以及作为前端网页设计师和开发人员，这些意义在当今时代究竟是什么。

如果您想来和我一起玩，那太好了，当然，An Event Apart 是一个集结了众多聪明绝顶的人，他们将讨论各种与网络相关的主题。 看看 西雅图的阵容 就知道了！

• Jeffrey Zeldman：设计协作的“共依存”指南
• Sarah Parmenter：实用品牌
• Krystal Higgins：适用于任何情况的入职培训
• Luke Wroblewski：显而易见总是胜出
• Val Head：设计系统中的运动：动画、样式指南和设计流程
• Ethan Marcotte：超越设备的设计
• Jeremy Keith：评估技术
• Rachel Andrew：新 CSS 布局与现实世界相遇
• Jen Simmons：使用网格进行设计
• Eric Meyer：为现实生活而设计
• Una Kravets：优化的乐趣

然后由我在周二结束演出，并在周三全天进行研讨会。 太棒了。 我还有 100 美元的折扣给你：AEACOY

我之前没有考虑过，如果您要对资产进行指纹识别（例如 style.987987090897.css）以利用浏览器缓存，您需要在每次这样做时更新您的 Service Worker。 但是我想您已经有一个构建步骤了，所以它可以在两个地方更新。

… 我们使用了名为 Stacify 的 NodeJS 模块，在文件发生更改时自动在所有地方创建新的版本号。

Harry Roberts，《CSS 中的代码异味》，第 1 部分

• 撤销样式
• 魔数
• 限定选择器
• 绝对值
• 蛮力
• 危险选择器
• 反应式 !important
• ID
• 松散的类名

第 2 部分:

• @extend
• 类名的字符串拼接
• 背景简写
• 重复的键选择器
• 错误组件中的类名
• 非 BEM
• @import

Matt Smith:

您应该始终将行高指定为无单位的数字（对着镜子说五遍）。 这样，指定不同字体大小的后代元素将继承该数字，而不是固定的行高。

David Khourshid 在评论中的反驳

无单位行高很好，但不是使用它的唯一方法。 如果我想在我的样式表中实现一个精确完美的垂直节奏，我绝对会在所有声明字体大小的地方使用带单位的行高。

我是一个无单位的人，只是因为完美的垂直节奏对我来说总像是徒劳无功。

Ben Maurer & Nate Schloss

浏览器的重新加载按钮的存在是为了允许用户获取当前页面的更新版本。 为了实现这个目标，当您重新加载时，浏览器会重新验证您当前所在的页面，即使该页面尚未过期。 但是，它们还会更进一步，重新验证页面上的所有子资源——比如图像和 JavaScript 文件。

因此，即使您为资源设置了正确的过期头信息，点击重新加载按钮（人们在 Facebook 上肯定经常这样做）仍然需要服务器往返以重新验证资产（有时）。

他们与 Chrome 合作

修复此问题后，Chrome 的条件请求比例从 63% 降至 24%。

以及 Firefox

Firefox 实施了我们其中一位工程师提出的一个提案，为某些资源添加一个新的缓存控制头信息，以告知浏览器该资源永远不应该重新验证。

因此，如果您在 Chrome 中使用从未更改的资产的 URL（如果它们更改，则将在新的 URL 上），您将自动受益，而在 Firefox 中，您应该 使用他们的新头信息。

Rob Dodson 在这个视频中展示了很多巧妙的技巧，他专注于 Chrome DevTools 中的辅助功能技巧。 一些笔记

• Chrome DevTools 具有一个实验性功能，可以帮助您进行辅助功能测试，如果您前往chrome://flags/并在 DevTools 设置中启用它，则可以解锁该功能。
• 将一个<input type="checkbox"> 放在一个<label> 中会为该输入提供一个标签中文本的名称，即使没有for 属性也是如此。
• aria-labelledby 属性使用来自另一个元素（通过 ID 引用）的文本覆盖元素的名称。 它甚至可以从多个元素（包括自身）中组合名称。
• 在元素中添加tabindex='0' 将使它可聚焦。

AMP 极具争议。

大型科技公司大力宣传它。 它拥有大量科技合作伙伴，并且有大量发布商使用它。 声誉卓著的公司正在为它构建产品。

但也存在大量的反弹。 它太容易出错。 它给了 Google 太大的控制权。 它并不完全支持渐进增强。 离线开发更难。 缓存层意味着点击来自 Google 搜索结果的链接，可以在不离开 google.com 的情况下显示网站，这出于多种原因令人担忧，其中一个较小的原因是它使共享 URL 变得很奇怪。 这只是其中几个原因。 我听说过不少投诉。

在本期 ShopTalk 中，我们与 AMP 团队成员（以及一个完全使用 AMP 的博客的博主）和一个围绕 AMP 构建服务的企业家讨论了有关 AMP 的所有内容。 他们想知道 AMP 是在帮助还是伤害网络吗？ 他们确实想知道。

在学习编写没有 jQuery 的 JavaScript 时，我发现类似 这样的帖子（也在 SitePoint 上）非常有用，可以供参考。 现在我们正在以某种方式再次经历这种过程，ES6 取代了我们以前使用库来帮助我们完成的一些事情。

Ire Aderinokun

CRP 有 6 个阶段 -

1. 构建 DOM 树
2. 构建 CSSOM 树
3. 运行 JavaScript
4. 创建渲染树
5. 生成布局
6. 绘制

我想象，如果您真的开始进行性能工作，您将需要牢固地理解这一点。 有很多方法可以阻止/延迟此过程的各个部分。 性能狂人的工作是了解何时以及为什么发生这种情况，评估它是否必要，并调整一些东西，以便尽快进入绘制步骤。

我很好奇，这是否足够通用，以至于所有渲染引擎都以 100% 相同的方式工作，或者是否存在重大差异。