嘿，我们在 An Event Apart 波士顿 2019 活动开始前谈了一些，现在 有大量的资源可用。我在超过 50 个链接后停止计数，因为链接远不止这些。说真的，里面有关于子网格、使用 CSS 区域、设计系统、使用prefers-reduced-motion 的内容……以及更多更多，所以请查看一下。

而且，趁此机会，您应该考虑 参加下一届 An Event Apart。它将于 7 月 29 日 – 31 日 在华盛顿特区举行，座位 – 就像您可能预期的那样 – 是有限的。与波士顿一样，您可以期待获得大量有用的信息、教育内容和宝贵的培训，这些内容将帮助您磨练前端技能并发展职业生涯。此外，最棒的部分是能够结识活动中其他优秀的人 – 这就是您的网络扩展和进行真实对话的地方。

立即注册

不能去华盛顿特区？别担心，因为 An Event Apart 还计划在 芝加哥 (8 月 26 日 – 28 日)、丹佛 (10 月 28 日 – 30 日) 和 旧金山 (12 月 9 日 – 11 日) 举行。现在是时候开始计划您的行程并恳求您的老板进行一次应得的自我投资以提升技能了。

如果您想知道我们是否有折扣码……当然有！在结账时输入AEACP即可享受 100 美元的优惠。🤑

Christina Gorton 刚刚发布了一门名为 CSS 布局和动画 的新课程，作为 Design+Code 的一部分，每月 9 美元。其中包括大量关于从类似内容到 React、Sketch、iOS 开发……以及其他内容的视频培训！

继续阅读 →

Harry Roberts 深入探讨了为什么如果我们希望网站快速加载，将资产托管在其他人的服务器（包括 CDN）上并不是一个好主意。

Harry 写道

为了使网站更快，最快的捷径之一——也是我向我的客户推荐的第一件事——起初可能看起来违反直觉：您应该自托管所有静态资产，放弃其他人的 CDN/基础设施。

继续阅读 →

这是来自 Brad Frost 和 Dave Rupert 的一个真正的 CSS/HTML 技巧，他们使用<picture></picture> 元素在用户 启用了减少运动 时用图像替换 GIF 文件。以下是 Brad 如何实现这一点

<picture>
  <!-- This image will be loaded if the media query is true  -->
  <source srcset="no-motion.jpg" media="(prefers-reduced-motion: reduce)"/>

  <!--  Otherwise, load this gif -->
  <img srcset="animated.gif" alt="brick wall"/>
</picture>

继续阅读 →

键盘和屏幕阅读器之间存在一些差异，Léonie Watson 强调了其中一些差异

使用 Tab 键时，键盘焦点和屏幕阅读器焦点彼此同步。其余时间，屏幕阅读器用户可以使用大量命令来读取和导航内容，而与键盘焦点无关。命令在屏幕阅读器之间有所不同，但它们都有一个共同点：它们与不同的 HTML 元素相关联。

继续阅读 →

深色模式设计现在很流行，但这里有一个有趣的观点：Wei Gao 在 她自己的网站 上构建了一个使用mix-blend-mode: difference 创建夜间模式，从而产生如下效果

Wei 解释了她如何实现此技术以及她在过程中遇到的极端情况。我特别喜欢她在这里对mix-blend-mode 函数的看法

我记得几年前在 Photoshop 中第一次尝试使用它们。现在浏览器变得越来越强大，我们看到浏览器渲染中包含了复杂图形功能。这并不意味着我们应该在浏览器中实现完整的 Photoshop，也不应该将我们的想象力限制在仅仅这一点上。浏览器和网页有自己的上下文和目标，以及一组不同的限制。也许我们应该像欢迎新居民一样欢迎它们，并发现适合该领域的使用案例。

确实！虽然 Wei 的技术非常独特且很棒，但这都与引发整个趋势的事情相关：prefers-color-scheme 媒体功能 在 Safari 中作为 MacOS 10.4 版本的一部分发布，它为我们提供了深色模式首选项设置。这是一个发展中的领域，因此我们相信未来将会看到更多创新和方法。

我听说有人说，今年 Google I/O 推出的最重要、最令人兴奋的事情是 常青 Googlebot

今天，我们很高兴地宣布，Googlebot 现在在为搜索渲染页面时运行最新的 Chromium 渲染引擎（在发布此文章时为 74）。展望未来，Googlebot 将定期更新其渲染引擎，以确保支持最新的 Web 平台功能。

在此之前，我想我从未想过这个问题。

继续阅读 →

[Geoff：] 我在我的职业生涯中构建了许多 WordPress 网站。从 2.x 版本开始，它一直是我的首选，因为它适用于任何网站，无论大小。这正是您作为自由职业者希望拥有的解决方案和灵活性。

天哪，我希望我在那些早期就有 Jetpack可用。

与 WordPress 本身一样，Jetpack 也是许多客户从 WordPress 网站寻找的各种事物的良好解决方案。我过去常常花费数小时研究特定功能的“正确”插件，无论是评论过滤、资产缓存、更强大的搜索功能、动态创建自定义帖子类型……等等。所有这些 – 以及 更多更多 – 都包含在 Jetpack 中，开箱即用。

继续阅读 →

Greg Kohn 阐述了如何使用 Purgecss（一个有助于 删除未使用样式 的工具）和 Tailwind（一个基于实用程序的 CSS 框架），以及为什么我们可能希望将这两个工具结合起来

Tailwind 的目的是通过生成超出您需要的样式来为您提供实用程序类的武器库。有一些最佳实践可以帮助降低整体构建大小，例如限制颜色和断点，或者在需要时默认关闭模块。尽管如此，您仍然不可避免地会生成未使用的类。老实说，以吝啬的态度处理您的配置会降低您的速度并使开发变得不那么有趣。通过依靠 Purgecss，您无需担心用户下载的 CSS 只包含最终需要的类。

继续阅读 →

Google 在 I/O 上宣布，他们的字体服务现在将支持 font-display 属性，该属性解决了多个 Web 性能问题。如果您听到欢呼声，那可能是 Chris 兴奋地挥拳庆祝。 他希望获得此功能有一段时间了，并建议 所有@font-face 块都应考虑使用该属性。

Zach Leatherman 提供了详细介绍

这是一个重大消息——这意味着开发人员现在可以更好地控制 Google Fonts 网页字体的加载行为。我们可以强制立即渲染备用文本（当使用 font-display: swap 时），而不是依赖浏览器默认行为，即在 Web 字体请求进行时将文本隐藏长达 3 秒。

这也是一种开拓，也是。据我所知，这是第一个提供对这个非常重要的 font-display 功能的支持的网页字体主机。

继续阅读 →