每月 Web 开发更新 7⁄2018：实用的可访问性、设计错误和功能控制

网络继续让我惊讶。 由于平台的多样性和不同的变化，很难看到一个直接的模式——即使有（只有）一个。 但是很高兴看到正在发生的变化，向平台添加了哪些功能，哪些功能被弃用，以及浏览器如何实施越来越多的技术来保护用户免受恶意网站攻击。 有趣的是，如今这些安全功能与开发人员的功能一样受到关注。 这表明了隐私和安全的重要性，以及过去网络的不稳定和不安全。

但所有这一切最好的一点是，它表明坚持人们给我们的东西是多么重要。 与其为所有事情实施我们自己的解决方案，不如重用现有系统通常要好得多。 使用自定义元素扩展本机 DOM 元素（而不是从头开始编写我们自己的自定义元素）不仅依赖起来更安全，而且工作量更少，而且更具包容性。 如果我们考虑是否应该构建我们自己的 SSL 版本或为此使用现有软件，为什么我们要构建一个基于任何内容的可点击元素，而不是改变a或button元素的行为？ 如果浏览器已经为我们提供了 API，我们为什么还要自己检查资源主机验证呢？ 本周的文章都致力于这些主题。

另一件让我印象深刻的事情是 Andrea Giammarchi 的文章“A Bloatless Web”，他在其中描述了当我们编写 JavaScript 以编写现代 ECMAScript 时，我们如何盲目地使用 Babel 作为开发人员。 但是我们通常没有意识到在现代浏览器中转换我们所有的现代代码并不是最有效的方法。 我很高兴 Andrea 提供了一些关于我们如何改善这种情况并提高我们的网络应用程序性能的想法。 通过不再为每个浏览器转换代码来提供三分之一的包大小，这不是很神奇吗？

消息

• 站点隔离有效地使不受信任的网站更难访问或窃取您在其他网站上的帐户的信息。 Chrome 67 现在随它一起发布，并且不再加载跨域读取阻止 (CORB)，例如 JSON 文件作为图像。 但更进一步，这些变化意味着整页布局不再保证是同步的。 如果您从 JavaScript 中的元素读取计算的大小或使用unload事件侦听器，此新功能会影响您。 确保您了解这一点并检查您的网站是否仍按预期工作。
• 到目前为止，我们对内容安全策略有所了解——该功能允许开发人员通过主机名限制某些资源的负载。 但是浏览器供应商现在提出了一些新的东西：特性策略。 这允许 Web 开发人员有选择地启用、禁用或修改浏览器中某些 API 和 Web 功能的行为。 它类似于 CSP，但不是控制安全性，而是控制特性，Eric Bidelman 写了一篇特性策略介绍，解释了一切。
• Brave 浏览器团队展示了他们保护用户隐私的最新功能：通过 Tor 网络连接的标签。

通用的

• Anton Sten 询问科技行业的价值观是否被打破？ 分析苹果、微软、谷歌、亚马逊以及其他小型公司的营销策略，以及我们如何才能做真正有目的的工作并坚持我们的价值观，而不是将它们视为我们不需要尊重或坚持的营销材料。
• 现在世界的技术部门正在迅速将世界上的所有事物转变为数字事物，许多人呼吁在我们的领域中提高道德规范。 在许多情况下，这是一个相当模糊的目标，所以让我们将其应用于数字化的一部分：前端开发。 作为前端开发人员，我们如何才能更有道德，我们可以做哪些事情？ 希德·德弗里斯（Hidde de Vries）为此写了一篇文章。

安全

• Ticketmaster 的客户数据已被泄露，看起来，这是由于包含第三方脚本的定制单行代码造成的。

用户界面/用户体验

• Eugen Esanu 展示了我们仍然犯的十个小设计错误，以及我们可以做些什么来使我们的设计更加用户友好。

隐私

• 这是一份有趣的报告，关于 Google 如何允许外部应用程序开发人员在应用程序授权期间授予权限时阅读人们的 Google 电子邮件。 问题在于，没有办法轻松阻止这种情况，如果您将 Gmail 用于您的公司，它可能会产生相当大的影响，因为它可能会影响隐私政策并且受 GDPR 的约束。

网络性能

• Max Bock 介绍了我们如何使用网络信息 API 构建对实际设备连接速度做出反应的组件。 尽管它目前仅在 Chrome 和三星互联网浏览器中可用，但值得一试，并且可能已经为这些用户提供服务。
• 有时，我们仍然可以阅读文章，提到优化 CSS 选择器以提高性能的重要性。 这起源于几年前的研究，但 Ivan Curic 再次对此进行了研究，发现这并不重要。

可访问性

• Microsoft 的开发人员团队分享了一个关于实用可访问性的视频播放列表，包括如何优化演示文稿或语言以包含在内，或者如何在您的网站上构建适当的“跳过导航”功能。
• Sara Novak 分享了她如何通过尝试色盲来理解其他人如何以不同方式体验世界来表现出同理心。
• Firefox 的开发者工具现在有一个可访问性检查器模式。 以下是如何激活它以及如何使用它。

JavaScript

• Leon Revill 向我们展示了如何使用 Web 组件扩展现有的原生 DOM 元素。 这是非常有用和有用的，因为我们不仅可以通过为自定义元素使用预构建模板来节省大量时间，而且还可以免费获得所有优化和默认值（语义、可访问性、浏览器功能），并且仍然可以在上面构建我们自己的行为其中。 至少，如果我们可以使用自定义元素，那是另一回事了。
• Gerardo Rodriguez 展示了我们如何使用 Service Worker 和 Fetch API 优化网站的性能很容易失败，以及这如何导致浏览器中的配额异常。 幸运的是，他找到了原因并通过设置正确的 CORS 标头，Gerardo 最终解决了单缓存不透明响应的奥秘，并告诉我们如何避免这些问题。
• Filepond 是一个不错的开源 JavaScript 文件上传器。 Rik Schennink 分享了构建它所面临的挑战。
• Andrea Giammarchi 关于将 JavaScript 与 Babel 捆绑在一起的问题以及为什么转译代码不再是最佳解决方案。 相反，我们应该考虑如何根据浏览器支持来提供不同的捆绑包，以减少捆绑包的大小并提高性能。
• Justin Fuller 分享了 JavaScript 即将推出的三个很棒的新特性，它们将帮助我们编写更易于理解的代码，例如操作链、空值合并或管道运算符。
• Addy Osmani 和 Mathias Bynens 写了一篇关于我们今天如何在 Web 上使用 JavaScript 模块的入门介绍。

CSS

• 一个文章系列，涵盖了我们如何在 Internet Explorer 中伪造具有间隙的自动放置网格。
• CSS Grid 很好，但是我经常听到人们不能使用它，因为 IE11 不支持它。 但这并不完全正确，因为 IE11 有可用的 CSS Grid 的早期版本，我们可以使用 autoprefixer 轻松转换。 Daniel Tonon 解释了 CSS Grid 的差异以及我们可以使用和不能使用的功能，并将继续提供更多提示。
• 对很多人来说，CSS Grid 还是很新的，它的功能非常强大，可以帮助我们在 CSS 中创建基于网格的布局时解决很多问题。 但是在当前版本中，仍有几件事是不可能的。 CSS Grid level 2 将为我们带来子网格，Rachel Andrew 解释了你需要它做什么。
• CSS-in-JS 好吗？ 只是不好吗？ 当没有明显的赢家时，为什么我们总是陷入争论的陷阱，以及我们如何通过承认进化和在上下文中看待事物来做得更好。

工作生活

• 为什么耐心的概念和努力建立持久的东西应该在商业中得到更多的关注。 阅读另一篇文章时，我想到了一些想法，似乎很多人喜欢这背后的想法。
• Ethan Marcotte 讲述了他如何选择客户，以及为什么他认为只选择您可以在道德上支持的客户很重要。 但这也表明有时这可能是多么困难，正如最近关于微软与法人实体的商业合作的讨论所表明的那样。