每月 Web 开发更新 3⁄2019：React Hooks、可构造样式表和建立信任

您是否有时觉得有太多要阅读和学习的东西，以至于您的大脑无法承受？ 这是我们大多数人不时经历的事情，当我们有太多事情要做时，我们的大脑就会超负荷工作。 我知道我的阅读清单在这方面没有帮助，因为它们包含更多要学习的东西。 但这正是我尝试编写一组不完全与前端或技术相关的多元化、开放的文章的原因。 在像这样的几个星期里，没有太多文章可供我总结，我意识到这可以多么轻松。 让我们的大脑有机会在它告诉我们的时候放松一下，并利用这个机会重新考虑我们的工作方式。

例如，想想你如何处理任务。 当您获得特定任务时，您是否要求提供更多详细信息？ 你知道如何自己做吗？ 还是您只是关注任务的详细信息？ 当然，只有做后者才能完成任务。 但这也会增加您忘记必要细节的风险，正如一项关于存储密码的研究现在所揭示的那样。 例如，如果任务描述中没有关于散列密码的任何内容，那么许多人不会应用它，即使他们知道这是更好的解决方案。 或者以建立网站的过程为例：如果我们忘记添加正确的缓存，服务器成本将不必要地高，性能也会受到影响。 正是这些额外的思考步骤，才使出色的、扎实的工作和“把事情做好”有所不同。

消息

• Chrome 74 为 DevTools 带来了一些新功能：它现在突出显示受 CSS 属性影响的所有元素，Lighthouse 4 被集成到 Audits 面板中，并且还添加了 WebSocket 二进制消息查看器。
• Intersection Observer 仍然很新，但 Chrome 开发人员目前正在推出第 2 版，以解决一些常见问题并实施第一个版本的学习。 这是 Intersection Observer v2 中将发生的变化。
  

一般的

• 很容易忘记它，但即使在今天，我们也经常在生活的许多领域构建非多样化的解决方案。 本文展示了忽视女性的汽车碰撞测试假人是如何发生这种情况的。
• 语音在我们的生活中变得越来越重要，主要是因为我们今天使用更多没有真正显示界面的设备——Homepod、Alexa、Siri、Google Assistant 或 Amazon Echo。 Mozilla 与来自世界各地的机构合作，创建了一个开源的高质量声音库，帮助机器学习真实的人如何说话。
• “在我们的现代世界中，很容易把事情搞砸。 简单很难。 我们很快就会在研究调查中添加更多问题，向数字界面添加更多按钮，给人们带来更多负担”。 凯特克莱顿探索如何成为一个优雅的简化者。
• “人们认为数据在云端，但事实并非如此。 它在海里。” 让我们深入了解通信是如何工作的，以及微软、谷歌、Facebook 和亚马逊是如何拥有一半以上的海底带宽的。 这篇文章展示了当今互联网如何依赖这四大公司，如果我们避开它们，我们将面临巨大的斗争和绩效影响。
• Jason Miller 写了一篇介绍网络渲染的文章，总结了当用户通过现代浏览器访问网站时会发生什么。 这里有很多东西要学。

用户界面/用户体验

• Anand Satyan 解释了为什么在没有颜色的情况下开始设计很重要。 它可以帮助您更好地理解数据结构和布局，并且通常会产生更清晰、更一致的设计。
• Brad Frost 写了关于提供简单而不是聪明的表单的重要性，特别是如果您希望用户登录。
• Nikita Prokopov 尝试分析和重新设计 Github 的存储库页面。 虽然我不太喜欢最终结果，但通过简单的方法改进现有设计模式和用户体验有很多很棒的收获。

JavaScript

• Addy Osmani 分享了一张表格，解释了加载 JavaScript 的不同方法如何影响 Chrome 中网站的加载和呈现。 虽然其他浏览器的行为可能略有不同，但此表是可转移的。
• Faraz Kehlini 分享了最新的 JavaScript 功能，可简化编写正则表达式的任务。
• 我们没有听到很多关于有效地将视频集成到网站上的消息。 现在来自 Kitchen Stories 的 Oscar 分享了他们使用 HTTP Live Streaming (HLS) 和优化加载时间的方法。
• 我是 Filepond 作为 JavaScript 上传库的忠实粉丝，但 Uppy 似乎值得一提，因为它不仅可以从本地磁盘获取文件，还可以从 Google Drive、Dropbox、Instagram、远程 URL 和相机，例如。
• React Hooks 是 React 社区的新热门话题，但我们如何编写一个呢？ 莱昂纳多马尔多纳多解释道。
• 曾经想知道哪个元素有焦点？ Kayce Basques 的这篇文章解释了如何使用 Chrome DevTools 来跟踪元素的焦点。

CSS

• 可构造样式表是一种以非阻塞方式初始化外部样式表或样式集的新方法。 这种新方法允许我们通过 JavaScript 动态构建样式表，这在我们将它用于 ShadowDOM 中的 Web 组件时特别有用。 该功能目前在 Chrome Preview 版本中可用。
• Rachel Andrew 解释了我们将如何使用新的 CSS Fragmentation 规范打破盒子。 使用 CSS Fragmentation，我们可以做以前用float做的事情，但它更灵活，可以帮助我们控制分页符和其他与打印或电子书相关的事情。
• 这个纯 CSS 的实验令人兴奋。 我印象非常深刻，没想到今天我们可以用 CSS 做这样的事情。

安全

• 这项研究显示了工程师如何处理他们的任务以及为什么项目中的安全性通常如此薄弱的原因的有趣见解。

网络性能

• 您对 Web 上的缓存了解多少？ Harry Roberts 总结了关于缓存的基本概念和一些扩展概念。 缓存可以产生巨大的性能差异，在我们遵循其他优化策略之前，我们都应该考虑一下。
• Matthew Strom 展示了他如何切换到可变字体以及他在此过程中学到了什么。
• Tim Kadlec 在性能预算方面拥有丰富的经验。 现在，他分享了如何制定能够坚持的绩效预算。

可访问性

• Ben Robertson 分享了五种可用于自动化可访问性审计的工具。 这很棒，因为它允许我们在 CI、回归测试（例如，通过 Selenium 或 Chrome/Firefox 无头浏览器）或直接在我们的浏览器中使用这些工具。
• Alex Carpenter 总结了 WebAIM 最近对前 100 万个网站的可访问性分析的要点：59% 的表单输入没有标记，因此无法访问。 让每个人都可以访问它们一点也不难。 就像包装输入并描述它一样简单，例如： <label>Name<input name="name"></label>当然，还有更好的标签实践，但这已经足够了为网站的所有用户带来改变，而不仅仅是那些依赖辅助技术的用户。
• Accessibility Insights 是一项新的平台服务，它为开发人员提供工具来分析其 Web 项目的可访问性。

工作生活

• 作为领导者，我们如何建立信任？ Claire Lew 分享了为什么业务撤退和团队建设活动与真正产生影响的事情相比并不重要：展示脆弱性，传达行动背后的意图，最后，履行承诺。
• 我发现 Gumroad 创始人 Sahil Lavingia 的这篇文章很有见地。 在其中，他分享了获得风险投资时的失败、挣扎和错误决定，以及为什么拥有一家“正常”的公司也值得思考，以防止整个事情失败。
• 我们的孩子专注于技术，花很多时间在屏幕前、玩游戏或看视频。 帕梅拉保罗主张让我们的孩子再次感到无聊。

超越……

• 如果不允许使用手机，像音乐会这样的公共活动是什么感觉？ 大卫凯恩在杰克怀特的音乐会上体验了它，并分享了情感、不同的氛围，以及为什么思考我们如何使用智能手机体验生活以及没有智能手机如何体验生活很重要。
• Leo Babauta 关于我们没有足够时间思考的问题。 有意识地花时间并设定正确的期望在我们忙碌的生活中非常重要。
• Sara Soueidan 分享了是什么让她过上了几乎没有浪费的生活方式。
• 尽管气候变化现在是一个大话题，但大型科技公司正在通过与化石能源公司达成交易来放置他们的人工智能服务和产品，从而使危机自动化。

还有一件事：如果您喜欢阅读我的文章和文章摘要，定期（但不定期）提醒您回馈一些东西。 — 安塞尔姆