每月 Web 开发更新 6⁄2018：复杂性、基于 HTTPS 的 DNS 和推送通知

如今，我们在 Web 项目的每个角落都看到了复杂性。 我们已经阅读了很多关于特定技术变得多么复杂的文章，并且我们一遍又一遍地讨论这个问题。 过去我们通过 FTP 上传网站并且没有 git 或任何类似的东西，现在生活在我们拥有构建系统、转译器、框架、测试和 CI 的时代，即使是最小的项目，这很容易理解. 但另一方面，Web 开发在过去 15 年中发展得如此之快，以至于我们今天无法与过去相比。 虽然过去有些事情似乎更容易，但我们忽略了我们今天拥有的优势和无数可能性。 那时我们没有编写测试，好吧，我们根本没有测试——这意味着没有可靠的方法来测试成功。 当我们没有部署过程时，上传新版本很容易，但破坏某些东西也很容易——而且这种情况比现在有持续集成系统的情况要多得多。

Jeffrey Zeldman 就此事写了一篇有趣的文章：“The Cult of Complex”概述了我们如何在不必要的细节中迷失自我，并经常试图过度思考问题。 我喜欢构建不太复杂但表现出相当大责任的系统的挑战（涉及道德、隐私、安全、出色的用户体验和性能）并且工作可靠（测试、部署、可用性和再次表现）。 我想找到正确平衡的问题不会很快消失。 复杂性无处不在——我们只需要确定它是有用的复杂性，还是仅仅因为它更容易或者因为我们过度设计了原始问题而添加了它。

消息

• 即将推出的 Safari 版本 12 在 Apple 的 WWDC 上亮相。 这是新功能：选项卡中的图标、强密码以及通过 HTML 属性进行的密码生成器控件，包括双因素身份验证控件、3D 和 AR 模型查看器、iPad 上的全屏 API、 font-display ，以及非常重要的， Intelligent Tracking Prevention 2.0 比以往任何时候都更具限制性，并且可能对现有网站的功能产生重大影响。
• 无头 Chrome 自动化库 Puppeteer 现已发布 1.5 版。 它带来了浏览器上下文来隔离通常在页面之间共享的 cookie 和其他数据，并且 Workers 现在也可以用于与 Web Workers 交互。
• Google 发布了 Lighthouse 3.0，这是其性能分析工具的第三个主要版本，它具有新的报告界面、一些评分更改、CSV 导出和 First Contentful Paint 测量。
• Chrome 67 就在这里，将渐进式 Web 应用程序带到桌面，并支持通用传感器 API，并扩展凭据管理 API 以通过 USB 支持 U2F 身份验证器。
• 在过去的几个月里，我们已经看到浏览器的安全界面发生了相当大的变化。 首先，他们强调提供安全连接 (HTTPS) 的网站。 然后他们决定指出不安全的网站，现在 Chrome 宣布了秋季的新变化，将通过将 HTTP 页面标记为“不安全”来使 HTTPS 成为默认设置。

一般的

• 在“复杂的崇拜”中，Jeffrey Zeldman 写道，我们似乎常常忘记简单是我们所做的一切的关键和目标，也是项目和生活的总体目标。 他解释了为什么它如此难以实现，以及为什么它如此容易——而且很诱人——培养复杂的系统。 一本非常好的读物，绝对是我会添加到我的“常青树”列表中的一篇。
• Heydon Pickering 分享了一篇新的、非常有趣的文章，它教我们如何正确构建 Web 组件：这次他解释了如何构建一个包容性和响应性的“卡片”模块。

用户界面/用户体验

• Cool Backgrounds 是 Moe Amaya 的一个很酷的副项目。 它是具有渐变的多边形背景的在线生成器，可以生成许多变体和形状。 简单的美丽。

工装

• Ben Frain 分享了一些在几乎所有现代代码编辑器中都可用的有用的文本编辑技术。

安全

• 随着通过 DNS 进行的安全攻击越来越流行，基于 HTTPS 的 DNS 变得越来越重要。 林克拉克用漫画解释了这项技术，使其更容易理解。
• Windows Edge 现在正在预览对same-site cookie 的支持。 进一步锁定 cookie 的属性已经在 Firefox 和 Chrome 中可用，因此 Safari 是唯一仍需要实现它的主要浏览器，但我想它也会很快在他们的技术预览版本中登陆。

隐私

• 美国公民自由联盟发现，亚马逊现在正式与执法部门合作，并提供了一种已经在世界各地城市使用的大规模人脸识别技术。

网络性能

• KeyCDN 邀请了 15 位对 Web 性能非常了解的人与读者分享他们的最佳建议。 现在他们分享了这篇文章，其中包含许多对 2018 年有用的性能提示，包括我自己的几句话。
• Stefan Judis 发现我们已经可以通过添加 HTML 标头标签link rel="modulepreload"在 Chrome 66 中预加载 ECMA 脚本模块。

可访问性

• 构建加载微调器（例如，在加载期间用于单页应用程序）相对容易，但我们很少考虑让它们可访问。 Stuart Nelson 现在解释了如何做到这一点。
• Paul Stanton 分享了我们应该使用哪些可访问性工具来获得最佳结果。

JavaScript

• JavaScript 最近被喜欢 Elm、Rust、TypeScript、Babel 或 Dart 的人欺负。 但是 JavaScript 绝对不会更糟，正如 Andrea Giammarchi 用很好的例子解释的那样。 对于使用其中一种其他语言的每个人来说，这篇文章也是一本很好的读物，因为它显示了我们应该注意的几个陷阱。
• 对于很多项目，我们希望使用分析或其他脚本来收集个人信息。 随着 GDPR 的生效，这变得更加困难。 Yett 是一个不错的 JavaScript 工具，它可以让您阻止此类资源的执行，直到用户同意为止。
• Ryan Miller 创建了一个名为“The Frontendian”的新出版物，其中包含了迄今为止我遇到的关于 CORS 的最佳解释和指南之一。
• Microsoft 的人员创建了一个很好的交互式演示页面来展示 Web 推送通知可以和应该是什么样子。 如果您还没有掌握这项技术，那么它是了解其工作原理以及如何构建不打扰用户的界面的绝佳入门读物。
• Filepond 是一个用于上传文件的 JavaScript 库。 它看起来很棒，并带有许多适用于 React、Vue、Angular 和 jQuery 的适配器。
• React 16.4 已经发布，并为库带来了相当多的特性：指针事件。 它们将使处理用户交互变得更容易，并且已经被请求了很长时间。

CSS

• Oliver Schondorfer 分享了如何在 Web 上使用可变字体以及我们如何使用 CSS 设置它们的样式。 您需要考虑的事项以及可能的陷阱的非常完整的摘要。
• 随着即将推出的 macOS Mojave 支持“深色模式”，如果没有明确设置background-color颜色，Safari 将开始自动将网站的背景颜色设置为黑色。 这是一个很好的提醒，浏览器可以设置和更改它们的默认样式，我们需要仔细设置我们的站点默认值。 我仍然希望“暗模式”将暴露给 CSS 媒体查询，以便我们可以正式添加对它的支持。
• Rafaela Ferro 分享了如何使用 CSS Grid 创建一个看起来不仅好看而且实际上很棒的照片库。 这篇文章回答了我在谈论网格布局时经常遇到的许多问题。
• Marcin Wichary 解释了我们如何使用现代 CSS 自定义属性在短时间内创建一个深色主题。

工作生活

• Anton Sten 写了关于我们应用程序的道德含义的文章。 当我们处理人工智能、影响人们生活的社交网络以及 GDPR 强制执行的隐私问题时，为什么“快速行动并打破常规”的时代肯定已经结束，这是一个有意义的解释。
• Basecamp 现在有一种新的图表类型来显示项目的状态：所谓的“山图”添加了比简单的进度条更好的上下文。
• Ben Werdmuller 分享了他对简历的看法，以及简历总是无法反映你是谁、你做了什么以及为什么要被录用。

我希望你喜欢这个每月更新。 下一期定于7月13日，敬请期待。 同时，如果您喜欢我的工作，请考虑在财务上帮助我资助 Web 开发阅读列表。

祝你有美好的一天！

— 安塞尔姆