我们正在阅读的来自网络的各种内容，并有一些想法。 有我们应该知道的链接吗？ 告诉我们！
2021 年网络图像加载的最大优化
阅读评论
网络没有改变；是你改变了
阅读评论
我喜欢雷米·夏普的这篇文章，他在文章中论证说，尽管我们可能认为网络在过去 20 年中变得更加复杂，但事实并非如此。
Web 开发没有改变。 Web 开发发展了。 现在有更多选择，而不是不同的选择。
浏览器已经变得更加强大，并且仍然可以与超过20 年前构建的网页一起使用。
[…] 网络真的没有改变。 它真的没有变得复杂。 Web 开发过程不是一条单一路径。 只不过是更多选择和更多选项。
雷米认为，网络的复杂程度只取决于我们自己的选择，当我们为一个微不足道的问题选择一个庞大的框架时，是我们自己选择了复杂性。 如果我们熟悉旧的东西，我们真的不需要用最新的工具构建网站，而且使用 float 而不是 flexbox 并没有什么羞愧，如果这对你有用。
网页设计中存在很多自负，而且有很多人在那里抨击其他人使用“不正确”的工具。 但网页制作的秘诀在于：没有完美的工具，也没有完美的网页制作方法。 这很糟糕，但也令人兴奋，因为我们必须自己弄清楚这一切；没有什么是一成不变的。
例如：我一直在使用 Sass 来完成我的个人项目，我知道很多人都对此嗤之以鼻。 有 emotion 和 Tachyons！ 有纯 CSS！ 有 PostCSS！ 但嘿：我喜欢 Sass 的一些功能。 我喜欢它赋予我的力量，我喜欢我熟悉它。 这并没有阻止我在日常工作中使用 emotion，或者在遇到新事物时尝试一下。
但是，旧的技术并不仅仅因为旧就不好。 新技术也不仅仅因为新就好。 你可以在克里斯的 “前端不满意（以及退却）” 文章的评论区看到这种情绪的体现。
漂浮焦点带来的美丽无障碍
阅读评论
想象一下，当你使用 Tab 键在网站上浏览时，你的 :focus 样式动画从一个元素到另一个元素。 就好像聚焦环向上飞过页面，到达下一个元素。 它的精神类似于平滑滚动：当移动伴随着改变时，更容易理解正在发生的事情¹。 与其滚动（或焦点改变）是瞬间跳跃，不如说是移动引导你到新的位置。
Guido Bouman 认为这将有利于无障碍访问，并查看了一些选项（例如 Flying Focus），但最终 创建了自己的 Floating Focus
经过探索，我们对良好的焦点状态需要什么有了一个很好的想法。 它需要具有高对比度，但不能影响底层组件的可读性。 它必须通过某种形式的过渡引导用户到下一个焦点目标。 而且它只需要为那些从焦点轮廓中受益的用户显示。
不要在表单标签上使用 pointer-events: none
阅读评论
布鲁斯·劳森给出了今天的提示，警告不要在表单标签上使用 pointer-events: none。 我们知道 pointer-events 用于更改元素对点击、点击、悬停和激活状态的响应方式。 但它显然会破坏表单标签，将它们的活动点击目标大小压缩成一个很小的难以交互的区域。 布鲁斯在他的帖子中包含了示例。
不过，这并不是帖子中最令人震惊的部分。 是这个问题被固定到了 Material Design 的浮动标签组件 的实现上。 幸运的是，布鲁斯得到了指针事件专家 Patrick Lauke 的帮助，他指出（明白吗？）了这个问题。
啊哈，现在我想起来了，几周前我第一次看到它——测试了基于 Material Design 的 Web 内容 https://#/YkEKXkU0To pic.twitter.com/31S74X1i4R
— patrick h. lauke #toryScum #clapForFlagWankers (@patrick_h_lauke) 2021 年 2 月 5 日
这不是对框架的贬低。 这只是事情的现实。 前端开发人员必须保持警惕，这包括对第三方代码的认识。
负责任的 Web 应用程序
阅读评论
Joy Heron 购买了 一个很酷的域名，并在那里发表了一篇文章。
幸运的是，有了现代的 HTML 和 CSS，我们可以比较轻松地创建响应式且无障碍的 Web 应用程序。 在我从事软件开发的这些年中，我学习了一些 HTML 和 CSS 的技巧和诀窍，我想在这篇文章中介绍这些技巧。 此列表并不详尽，但这些是我在不同项目中经常使用的行之有效的模式。
当然，这是一组技巧和诀窍，但它是一个很棒的集合，涵盖了 HTML、CSS 和 JavaScript 中的现代最佳实践。 如果有人问我应该阅读什么，以便他们不遗漏过去几年（比如，过去三年）的前端，并想提醒自己重要的东西，我会把这篇文章发给他们。
魔鬼的信天翁
阅读评论
Nils Binder 谈论了一种在两个元素之间进行间距的技术。 想象一下，在一个大屏幕上有一个标题，标题的左上角是徽标，右上角是导航。 然后是一个小屏幕，当它们不再位于同一“行”上需要换行时，它们不会仅仅换行，而是居中。
2021 年的渐进式 Web 应用程序
阅读评论
Maximiliano Firtman 回顾了今年的 PWA，包括试图弄清楚它们的普及程度。
在 2020 年底，大约1% 的网站包含服务工作者，2.2% 包含可安装的 Web 应用程序清单文件。 请记住，一些平台（例如 iOS 上的 Safari 或 Android 上的 Chrome）不需要服务工作者才能在安装后拥有独立体验。 我们可以假设 2.2% 的网站是可安装的，而 1% 可能会满足 Android 上的 PWA 标准，其中 71% 提供了一些离线体验。
这些数据来自 HTTP 档案，该档案分析了 750 万个网站。 所以 1% 看起来可能是一个很小的数字，但这很多网站都包含了 PWA 技术，并且同比增长了 170%。 不过，这些只是最低要求。 我敢肯定，完全拥抱 PWA 特性（例如真正的离线使用）仅占其中的很小一部分。 Maximiliano 提供了更多详细的数据，所以如果你对细节感兴趣，请务必仔细阅读这篇文章。
从轶事角度来看，我会说 PWA 在去年从大众的谈话中消失了。 我认为没有人真正反对构建它们的那些技术，但他们也没有采用这些技术。 我的猜测？ 大家都害怕服务工作者。 我也害怕服务工作者。 它们会做一些可怕的事情，比如极力保留缓存。 我认为一个完整的开发团队真的需要理解它们并将它们融入到他们的工作流程和构建过程中，才能使它们有效。 一般来说，我们还没有达到那个阶段。
iframe 反馈
阅读评论
如果一个 <iframe> 中包含另一个具有完全相同源的 <iframe> 会怎么样？ 就像他们所说的盗梦空间一样。 Baptise Crespy 在艺术和科学的名义下进行了这项 至关重要的研究。
事实证明，浏览器足够智能，可以防止这种无限循环发生（并可能导致浏览器/计算机崩溃）。 它们会在第二个嵌套后剥离内容。 但是！ 如果你将 src 的 URL 更改为唯一（但本质上仍然提供相同文档），它就会起作用。 添加一些随机颜色和动画，事情会变得非常快。
2021 年如何使用 Favicon
阅读评论
我总是很感激有人能研究并重新评估一些每个网站都需要且具有复杂要求的最佳实践。 Andrey Sitnik 在这里对 favicon 做了这件事。