Jeremy Keith，关于第一次教人们 JavaScript

很多都归结为以下模式

当（某些事件发生时），则（采取此操作）。

我们集思广益了一些示例，例如“当用户提交表单时，则显示带有确认信息的模态对话框”。然后我鼓励他们编写一个脚本……但我指的不是 JavaScript 意义上的脚本；我指的是编剧或戏剧意义上的脚本。逐行写出您想要完成的每个步骤。完成后，将您英文（或葡萄牙语）脚本的每一行翻译成 JavaScript。

伪代码。我非常喜欢。

用简单的英语编写代码流程非常适合初学者，并且根据我的经验，它永远都有用。我发现自己经常在 Slack 和错误/想法工单中编写伪代码，尽管我可能已经从简单的英语过渡到我自己的奇怪的非语言了。

IF (user_is_pro? AND has_zero_posts)
  OR (signed_up_less_than_three_days_ago) {
    // ajax for stuff
    // show thing
}

Ire Aderinokun 描述了一个令人沮丧的问题，我们可能都曾在某个时候注意到过。

最近，我发现我的一些 GIF 丰富的文章加载速度变得非常慢。原因是 GIF 中的每一帧都存储为 GIF 图像，它使用无损压缩算法。这意味着在压缩过程中，图像中没有任何信息丢失，这当然会导致文件大小更大。

为了解决网络上 GIF 的性能问题，我们可以做几件事。

切换到<video>元素似乎对文件大小的影响最大，但如果您必须坚持使用 GIF 格式，则还有其他优化工具。

Snook 关于命名类

以下是重点

• 我们要确定这是一种按钮的变体。
• 我们要指出此按钮样式的目的。
• 我们要避免将代码绑定到可能发生变化的特定上下文。

Dan Luu 关于网络性能的糟糕现状

……不仅仅像我这样的极客关心网络性能。在美国，仅 AOL 在 2015 年就拥有超过 200 万拨号用户。在美国以外，还有更多人使用缓慢的网络连接。

这个其他注释也很有趣，我认为 Dan 这里谈论的是Youtube 的“Feather”项目

我在 Google 工作时，有人告诉我一个故事，说“他们”完成了一次重大的优化工作，结果发现测量的页面加载时间增加了。当他们深入研究数据时，他们发现加载时间增加的原因是，在进行优化后，他们从非洲获得了大量流量。该团队的产品从对缓慢连接的用户来说不可用变成了可用，这导致如此多的缓慢连接用户开始使用该产品，以至于加载时间实际上增加了。

Amelia Bellamy-Royds

我想知道我是否可以想出一个简单的公式，使用 SVG 贝塞尔曲线创建“圆角矩形”类型的曲线。它不会是完全相同的形状，但可以很接近。这个想法

曲线段的“端点”是矩形每条边的中点，在这些点上，一切都应该完全笔直。然后控制点沿着边缘延伸，直到角部的曲率大致正确。

Rogie 几年前也尝试用 CSS 实现。

这是一个由 Mat Marquis 做的演讲的简洁记录，他在其中详细介绍了他是如何使 Bocoup 网站的加载速度非常快，特别是使用漂亮的字体加载技巧和性能工具来帮助随着时间的推移监控这些改进。

不过，我最喜欢演讲的部分是 Mat 谈到他为什么想要制作网站

我对框架或语言不感兴趣——我对潜力感兴趣；关于在构建更具包容性的网络中发挥我的作用。

我关心的是为那些只通过五年前的 Android 设备了解网络的人制作一些效果良好的东西，因为那是他们拥有的——那些可能每天都感觉自己被网络抛在后面的人。我想为他们构建更好的东西。

Addy Osmani

较小的 JavaScript 包通常会导致更快的加载时间（无论我们的浏览器、设备和网络连接如何），但 200KB 的 JS 不等于 200KB 的其他人的 JS，并且它们的解析和编译次数可能大不相同。

将文件大小用作指标并不是一件糟糕的事情，因为它确实很重要，但它只是 JavaScript 性能故事的一部分。

我还发现关于字节码讨论的概述很有趣。浏览器下载 JavaScript，解析它，将其转换为抽象语法树，然后将其转换为字节码。如果我们可以在构建步骤期间执行此操作并发送字节码，会怎么样？

我的观点是，发送字节码可以增加您的加载时间（它更大），并且您可能需要对代码进行签名并对其进行安全处理。V8 目前的立场是，我们认为探索在内部避免重新解析将有助于看到足够的提升，因此预编译可能不会提供太多额外的好处，但我们始终乐于讨论可以加快启动时间的想法。

这里有一个关于 SVG 的fill-rule属性的有趣陷阱，由 Anthony Collurafici 详细介绍。

Fill-Rule 是一个 SVG 属性，它基本上定义了如何确定哪些形状被填充或从形状中减去。默认 SVG 值为“nonzero”，这是 Android 所需的。不幸的是，Sketch 使用“evenodd”。幸运的是，Sketch 提供了我们需要的全部功能，可以将我们的形状从“evenodd”转换为“nonzero”。在 Sketch 42 中，它现在变得更加容易了。

您在嵌套形状中绘制点的方向会影响填充。

Scott Jehl 的最新文章中有一个 CSS 技巧。您可能使用过“可访问隐藏”技术？也就是说，您有意避免使用display: none;，因为您希望元素可聚焦，但视觉上不可见。

但是……对于任何使用键盘浏览网站并查看屏幕的人来说，这都可能很麻烦。

为了避免这种情况，我们尝试记住，任何可访问隐藏的内容在获得焦点时都应该是可见的。例如，此 CSS 会将获得焦点的元素放置在视口的顶部

.accessible-hidden {
  position: absolute;
  top: 0;
  left: -999px;
  height: 1px;
  width: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.accessible-hidden:focus {
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  padding: 10px;
  /* etc etc... */
}

Scott 感谢 Joe Watkins 提供了这个想法。

使用深度学习为 HTML 编写 CSS 类的机器人

我玩了一会儿，看看我是否可以让它做一些令人印象深刻的分析工作。我获取了一些语义 HTML，并使用正则表达式class="[a-zA-Z0-9:;\.\s\(\)\-\,]*"删除了其中的所有类名。我将无类 HTML 放入 Rooster，它确实生成了新的类

但是新的类似乎完全基于标签是什么。<ul class="list">、<a class="link">等等。不过，这都是在不向它提供任何 CSS 的情况下进行的。在我将整个样式表放入样式块中后，我认为我把它搞糊涂了。我得到了一些不在我的样式中的新奇怪类，以及诸如<br class="desc" />之类的东西。哦，好吧，我认为这只是一个有趣的实验。命名很难，但我们可能仍然应该为自己命名。