Smashing Podcast 第 32 集：2020 年度回顾

在这一集中，我们回顾了 2020 年。今年我们在剧集中与谁交谈，我们学到了什么？ 让我们回听一些剪辑以找出答案。

显示注释

您可以在 podcast.smashingmagazine.com 上找到我们所有过去的剧集，包括每次采访的完整记录。

大家2021年见！

成绩单

Drew McLellan： 1 月份，我与 Amy Hupe 讨论了她在英国政府设计系统方面的工作，特别是团队如何通过鼓励贡献来增加更广泛组织对该系统的采用。 这是艾米。

Amy Hupe：我们很早就开始了。 因此，在我们拥有一种公共设计系统之前，我们就开始与我们认为会感兴趣的贡献者接触。 我应该在这里提到我们团队中有一位出色的服务设计师。 她加入了我们……目前我不会以任何方式正确地确定日期，但我认为她在整个 2018 年都与我们一起工作，她的名字叫 Ignacia。 她只是在四处走动和吸引人们方面做得非常出色。 所以她做的一件事就是去识别政府中所有不同的模式以及这些模式的所有不同类型的变化。 所以走出去，有点说，“好吧。 有 10 种不同的方式可以在政府中申请地址。 让我们一起看看它们，然后决定我们认为最合适的方法。 我们如何才能将这些合并为一个？”

Amy Hupe：她举办了一个大型研讨会，试图让人们看到这些，并作为一个团队进行那种整合。 我认为在我们真正向公众发布任何东西之前，她以某种方式建立合作的方法确实对此有所帮助，因为这意味着人们已经有了这种意识，而且很多人已经以某种方式或另一个在我们真正公开之前。 所以我们已经领先了几步。 所以我认为这真的很重要，而且只是坚持，整个团队都坚持不懈地帮助人们做出贡献。

Amy Hupe：我认为有一个想法，如果你让人们为设计系统做出贡献，那是一个非常棒的工作，因为你可以让人们为你做所有的工作，你就坐在那里，你修复你的小代码，每个人实际上都在给你所有的好东西。 但实际上，任何从事设计系统工作的人都知道，它非常复杂。 制作一个适用于多个不同团队的集中式解决方案非常困难。

Amy Hupe：真的，除非你从事过设计系统，否则期望任何人真正理解这需要什么是不合理的。 所以有很多类型的手握。 支持贡献者做出贡献需要做很多工作。 我想我之前已经说过了，但我认为，帮助某人为设计系统做出贡献可能需要更长的时间，而不是仅仅让自己和集中式团队制作东西。 但我认为认识到它带来的价值并坚持不懈地努力让人们意识到贡献，帮助他们做到这一点，帮助他们感到有动力去做，我认为是的，坚持真的很关键我们在该领域的成功。

Drew：微软的 Stephanie Stimac 和 Aaron Gustafson 与我们一起讨论 Edge 采用 Chromium 作为其渲染引擎。 我向 Aaron 询问了浏览器之间的竞争格局，以及多个浏览器在同一个渲染引擎上的结合会消除良性竞争，从而对开放网络不利。

Aaron Gustafson：这确实是我长期从事网络标准工作的人有点挣扎的问题。 我完全明白它的商业理由。 从微软的角度来看，这很有意义。 从前端开发的角度来看，不必迎合一堆不同的引擎是件好事。 我的意思是，总的来说，我们这些在网络上工作了很长时间的人肯定已经看到了渲染方面的很多融合。 我们没有像我们遇到的那么多问题，比如说在 Netscape 工作了 7 天，我们就像……我知道一些公司正在为每个不同的浏览器创建独特的样式表，这是站不住脚的。

Aaron Gustafson：但我认为现在不同的是，在最初的浏览器大战中，你拥有所有这些专有引擎，并且每个人都在尝试推出新的平台功能和新的 JavaScript 功能，或者在 Microsoft 对 JavaScript 进行逆向工程的情况下，以创建 JScript 并试图弄清楚如何将它们组合在一起。

Aaron Gustafson：但是现在我们有能力在开源项目中实际合作，并且仍然可以进行对话，而且仍然……我不知道。 战斗不是正确的词，但要认真讨论不同方法的影响并彼此不同意，并真正致力于使规范真正好，并在例如 Chromium 的上下文中对底层代码采用竞争方法Firefox 空间中的项目或 WebKit 或类似性质的东西或 Missoula。

亚伦·古斯塔夫森：是的。 一方面，我们确实失去了另一个渲染引擎，当 opera 决定使用 Chromium 时，我也感受到了同样的痛苦。 但我在微软内部感到有些欣慰，看到我们以一种有意义的方式实际参与 Chromium 项目，而不仅仅是坐下来接受来自 Chromium 下游的一切，实际上是在审查即将发生的事情平台并参与其中……是的。

Aaron Gustafson：所以我对此感到有点振奋，并且觉得我们不只是从那个项目中获取，并且只是接受与该项目有利益关系的所有不同的人所传递的任何东西，而是为了实际上也在那里合作。

Drew： 2 月份，我与 Stephanie Walter 讨论了如何使用 Bootstrap 等 UI 框架以及如何平衡可用界面的定制需求。 我问斯蒂芬妮是否有可能在使用现成框架的同时创建一个高度可用的 UI，或者它是否总是会有点尴尬。

斯蒂芬妮沃尔特：是的。 我认为是这样。 但这也取决于您愿意做出的妥协程度，而这对双方都是妥协的。 目前，我正在牺牲很多按钮，例如，因为您在材质 UI 中有一些非常具体的按钮。 我真的不喜欢按钮上的涟漪效应。 我认为它在移动设备上效果很好，因为在移动设备上，当用户点击或触摸按钮时，你需要一种大反馈。 但随后他们会在按钮上产生这种连锁反应。 这有点矫枉过正，尤其是当有很多按钮时。 但是我们仍然会保留这种涟漪效应，因为移除它会非常复杂，因为它是内置在 React 框架中的，并且在这个按钮上有另一个悬停效果，更微妙的东西不会是这种浓密的东西这里。 这将是超级复杂的。 所以这就是你所做的妥协。

Drew：伦理设计是我与 Trina Felber 和 Martin Michael Fredrickson 谈话的主题。 我问，以道德的方式进行设计并避免黑暗模式是否是从长远考虑企业的健康和增长而不仅仅是短期销售目标的案例。 这是马丁。

Martin Michael Fredrickson：完全正确。 我认为你必须把你在网上做的生意看作是你在一个中等城市的主要街道上有一家商店，在那里你必须保持你的声誉完好无损。 如果你不善待你的客户，那么如果你不善待你的客户，长期来看，你就会破产，因为人们会去其他商店，或者他们会从网上购买。 所以无论你在网上做什么，你都必须考虑到有长期的影响，而且，做复杂的事情或操纵的事情会有隐藏的成本。 如果你像 Trina 所说的那样进行整理，就会有长期的节省，而当你谈论商业模式时，这是从来没有计算过的。 你总是谈论你能赚多少钱。 你永远不会谈论赚这么多钱的成本。

Drew： 3 月份，我与 Eduardo Boucas 讨论了一个名为 Sourcebit 的开源工具，该工具从不同的来源收集内容并将其提供给您的静态站点生成器。 我问 Eduardo，这是否可以通过启用与无头 CMS 等工具的集成来改善授权 SSG 的用户体验。

爱德华多·布卡斯：没错。 是的。 它可以的方式......我看到了两种不同的方式来使用可以帮助开发人员的工具。 一种是让 Sourcebit 成为您的部署例程的一部分。 因此，如果您使用的是托管平台，例如 Netlify，并且您将部署命令配置为，我不知道，Hugo build，是不是 Hugo 的构建命令之类的命令，为 Hugo 生成静态文件。 您还将有另一个命令作为该例程的一部分。 这就像 Sourcebit fetch 一样。 因此，在构建时，Sourcebit 将提取所有其他数据，生成 Hugo 需要的所有文件，然后整个部署将已经使用这些文件并部署来自 CMS 的所有内容。

Eduardo Boucas：所以这是 Sourcebit 的一种可能的用例。 另一种是在本地开发工作流中使用Sourcebit作为本地开发。 所以你可以用我们称之为监视模式的东西来运行 Sourcebit。 所以 Sourcebit 一直在寻找远程数据源的变化，所以在这种情况下，就是无头 CMS。 因此，无论何时您发布文章或更改 CMS 中的条目，Sourcebit 都会承认这一点，并会在本地为您重新生成所有文件。

Eduardo Boucas：对于本地工作的开发人员来说，这意味着您可以让您的 Hugo 站点旁边的 CMS 窗口在本地运行，然后您可以实时看到发生的变化。 您在 CMS 上进行了更改，然后您可以看到该更改反映在本地站点上，我觉得这非常有用。 所以这些是您可以使用 Sourcebit 的两种方式。

Drew：转化优化是当时的话题。 当我与资深播客和顾问 Paul Boag 交谈时。 我们讨论了网站用来将访问者转化为客户的一些技术。 但我想问保罗你如何衡量你所做的改变的影响。 保罗解释道。

保罗·博格：是的。 绝对地。 我认为，再次，这是许多组织非常不擅长的事情，即清楚他们将如何衡量成功。 现在，是的，您的转化率是一个指标。 你绝对应该跟随。 但即使有转换，你也需要比购买的人更复杂一点。 您还需要注意平均订单价值。 您需要特别注意终身价值，对吗？ 那么客户在他们整个生命中的价值是多少，因为如果您使用深色模式和类似的东西，您很可能会发现您的客户流失率很高。 但实际上，转化率应该只是您衡量的指标之一。

Paul Boag：您还需要注意参与度，即人们对您的内容的参与度如何，因为这对他们最终是否继续转化有很大的影响。 因此，您正在查看诸如您的视频有多少、他们是否观看、他们在您的网站上花费了多长时间以及他们在观看时观看了什么？ 他们是否参与社交媒体之类的事情？ 最后一个方面显然是可用性。 您需要衡量某人在其网站上完成特定任务的速度，以及他们发现该系统使用的难易程度以及其他各种不同的标准。

Paul Boag：有很多机制可以用来测量这些不同的东西。 有一些很棒的工具，还有一些你可以采用的好的指标。 例如，对于可用性，有一个叫做系统可用性量表的东西，它可以是一个非常有用的衡量指标。 但同样，我经常使用像 maze.design 这样的工具，它可以衡量某人购买商品需要多长时间，例如，通过结账。 嗯是的。 拥有如此广泛的指标，您不仅关注本季度的销售额是多少？ 你必须着眼于更大的图景。

Drew：四月份，我与 Better Blocker 的 Laura Kalbag 聊了聊在线隐私问题。 我们谈到了被认为是公共的和私人的之间的界限越来越细，以及我们认为私人的东西可能不会被我们委托给我们数据的公司以这种方式看待。 这是劳拉。

Laura Kalbag：我有一个几年前发生在我身上的经典例子。 所以我在 Facebook 上，我妈妈刚刚去世，我正在为葬礼承办人做广告。 我觉得这真的很奇怪，因为当时我的家人都没有在社交媒体平台上说过任何话。 我的家人都没有在 Facebook 上说过任何话，因为我们一致认为没有人想通过 Facebook 找到关于朋友或家人的那种事情。 所以我们没有说它。

Laura Kalbag：所以我问我的兄弟姐妹，“哦，有没有人在 Facebook 上说过任何可能导致这种奇怪的事情。” 因为我通常只收到关于化妆、着装和怀孕测试的广告，以及他们喜欢谈论的所有有趣的事情。 是特定年龄的女性。 相反，我姐姐回到了我身边。 她说：“嗯，是的。 我的朋友住在澳大利亚。” 所以我在 Facebook Messenger 上给她发了一条消息，告诉她我们的妈妈已经去世了。 当然，Facebook 知道我们是姐妹。 它具有您可以选择在那里添加的关系连接。 我的意思是，不管怎样，它可能会猜到我们是姐妹，我们在一起的地方，我们同姓的事实，并决定，“哦，这是一个合适的广告，可以放在她的脚下。”

德鲁：认为技术正在为我们做出这些决定，这真的很发人深省，不是吗，在这个例子中，这实际上会影响人们，这是一个相当敏感或脆弱的时期？

劳拉·卡尔巴格：是的。 我们说它令人毛骨悚然。 很多时候人们会说，“哦，这几乎就像我手机或笔记本电脑上的麦克风在听我说话，因为我只是在谈论这个特定的产品，突然间它出现在我的提要中无处不在。” 我认为真正可怕的是他们中的大多数人无法使用您的麦克风。 但事实上，您的其他行为，您的搜索，因为您彼此靠近以及您在设备上的位置，它知道您在与谁交谈。 它可以将我们可能无法将自己联系在一起的所有事情联系在一起，只是为了说，“哦，也许他们会对这个产品感兴趣，因为他们可能已经在思考、谈论它了。”

德鲁：随着冠状病毒大流行的爆发，许多国家进入某种形式的封锁状态，我与雷切尔·安德鲁（Rachel Andrew）讨论了 Smashing 如何调整其原定于在线举行的面对面会议。 刚刚不得不推迟旧金山的 Smashing 会议，我问 Rachel 有什么计划将即将举行的会议和研讨会转移到虚拟领域。

Rachel An Drew：非常非常快，一旦我们意识到我们将不得不推迟旧金山，很明显，我们有工作坊，我和 Vitaly 都在粉碎和 comp 举办工作坊，他们在旧金山都卖光了，两个我们的研讨会。 显然，我们有很多其他人来为我们举办研讨会，与我们一起工作了很长时间的人，他们发现他们所有的研讨会，对于我们这些做研讨会的人来说，他们实际上是一个我们收入的关键部分。

Rachel An Drew：公开演讲，你通常不会通过公开演讲赚很多钱。 大多数人的薪水并不高，当你考虑到写演讲所花费的时间等等时。 对于擅长教授这些东西的人来说，研讨会往往是一种很好的方式来赚钱。 所以它们代表了人们的收入。 因此，不仅需要我自己，而且 Vitaly 今年早些时候失去了我们的工作室。 我们还意识到，我们的许多 Smashing 演讲者也依赖于这些研讨会。

Rachel An Drew：所以我们想，“好吧，为什么不把它们带到网上呢？” 非常非常快，真的在那之后的几天内，我们决定我和 Vitaly 会是第一个坚持我们的权力的人，但考虑到是我们，我们可以弄清楚如何去做。 我们也有非常不同的研讨会。 Vitaly 更像是一种协作。 他有团体活动和事情。 我教课堂风格。 所以在我们之间，我们想，“好吧，我们有点覆盖所有的基地。” 所以我们想，“让我们去做吧。 让我们看看它是否有效。” 所以我们给他们做广告。 我们大概弄清楚了每个人需要多长时间，然后我们坐下来说，“嗯，在线研讨会到底是什么样子的？ 这是什么？”

Drew：我认为从技术的角度来看，作为 Web 开发人员，他们会立即思考，我们到底要如何提供这样的东西，我的意思是，你必须看到很多不同的平台。 你看到了什么不同的东西，Smashing 最终带来了什么？

Rachel An Drew：所以我们已经看过各种各样的东西，而且我们仍然在这样做的过程中。 我们目前正在使用 Zoom。 我们使用 Zoom 的原因是可访问性。 它是最容易访问的平台。 显然，我们不想因为我们选择的平台而将人们排除在外。 我认为其他平台正在变得越来越好，人们……我认为很多平台都有人来找他们说，“是的，你看起来很棒。 但我们需要你可以被访问。” 因此，Zoom 是目前人们最容易使用的。” 所以这就是我们最终使用它们的原因。 我不知道我们是否会永远这样做。 但这就是我们目前正在使用的，它作为一种方法来做这些事情的效果很好。

德鲁：随着 Zoom 疲劳的出现，世界开始适应被迅速称为新常态的事物，我与 Phil Smith 讨论了技术如何帮助我们应对 COVID-19 等情况。 在短短 10 天内构建 React Native 应用程序 CardMedic。 我问菲尔，他如何平衡为工作选择最佳技术与他熟悉并可以快速工作的技术。

菲尔史密斯：这是一个很好的问题。 我想一旦向我提到这个项目，我就想我确切地知道我将如何构建所有这些。 如果我没有孩子，我坐在一个黑暗的房间里，我想如果我一直在努力，我可能会在大约五天之内扭转局面，因为要求非常严格符合我构建应用程序的经验。 我已经构建了类似的东西，它调用 API，将结果存储在状态中并呈现它们。 我现在处于一个我喜欢的位置，“好吧，我需要回去重构它。”

Phil Smith：我谈到了打字锡，但实际上应用程序中的类型可能非常松散，需要加强。 在后端，没有太多测试，现在我们开始推出后端，因为很多人站出来说：“实际上，这是一个很好的资源。 我愿意自愿提供服务，将其翻译成我的母语。” 后端被更多人使用，所以我只是在想，“等等，我需要在这里进行更多测试，以确保没有任何东西可以破坏，因为现在有人在生产中使用它。” 我想我回答了你的问题。 本质上，没有决策。 我只需要尽快把它拿出来。

德鲁：随着工作场所关闭和我们中的许多人适应在家工作，我与 Ben Frain 谈过优化您的家庭工作空间，使其成为一个舒适和高效的地方，不会导致长期的身体健康问题。 由于可用于在家设置的预算有限，我问 Ben 一把好椅子是否是最好的起点。

Ben Frain：这就是我的建议。 是的。 我的意思是，我不能自称是这些事情的权威，但似乎这可能是你可以做的最重要的事情，让你一整天都感到舒适。 你可以从相当昂贵的东西开始。 我犯了同样的错误，最后我从亚马逊买了一把 45 磅重的办公椅，我没有意识到它没有向前倾斜，不管那个东西的正确词是什么，在轴上。 所以我发现它钻进了我的大腿下面，有点在我的膝盖后面，我在想，“为什么我的腿在那个东西上坐了 45 分钟后就死了？”

Ben Frain：我认为特别是如果你为一家提供像样办公椅的公司工作，你会认为它们是理所当然的，直到你看到那个特定的品牌和品牌，你才会去，“哦，天哪，这是700美元的椅子。” 当你意识到这个问题时，人们已经考虑了这一点并为你做了很多，然后很明显你来到你的家庭环境中，你会想，“为什么不花 X00 美元买一把椅子呢？” 但也许这是值得的。 特别是如果您长期来这里。

德鲁：我们得到的是长期的。 长期存在的其他东西是 Drupal。 6 月，我与 Angie Byron 就 Drupal 9 的变化进行了交谈。自首次发布以来，Drupal 已经走过了漫长的 20 年。 我问 Angie，在迁移到 Drupal 9 时升级现有 Drupal 站点的过程是什么样的，对于那些长期运行站点的人来说，这是否可能是一个巨大的负担。

Angie Byron：我认为基本上有三种情况。 因此，如果您正在运行 Drupal 8，并且每次出现新的 Drupal 8 次要版本时，您都会立即将其升级到新版本，并开始使用新的东西。 你的道路将基本上一无所有。 你已经做了所有的工作，你很好。 如果您不久前迁移到 Drupal 8 并且没有跟上 BC 的变化，那么您需要做一些工作。

Angie Byron：无论如何，这绝对是我们软件十多年来最简单的升级，我们有大量不同的工具可以帮助您。 有一个仪表板显示所有贡献的模块以及他们的 Drupal 9 情况。 有用于检查和检查您的代码并标记您拥有的任何已弃用功能的自动化工具，并且有用于自动查找和查找的工具，“哦，这是您模块的最新版本，它已经准备好 Drupal 9 了吗？ 你应该去下载它，”那种东西。

Angie Byron：所以从 Drupal 8 到 9，我想说那部分已经被很好地覆盖了。 如果您来自先前版本的 Drupal，例如从 Drupal 7 或更低版本到 Drupal 9，那看起来确实有点棘手。 在我们在 Drupal 8 中所做的更改中，例如，我们完全转向了面向对象的 PHP，并且我们开始利用在其他软件项目中发现的设计模式，这在架构上是一件非常聪明的事情，但确实如此这意味着如果您在过去的生活中有大量自定义代码，那么在 Drupal 9 中，您将需要找到替代方案。

Angie Byron： Acquia 是一个名为 Acquia Migration Accelerator 的产品和开发，旨在解决这个问题，我们正在创建一个很好的 React 定义的应用程序，它读取您的旧 Drupal 7 数据，为您创建等效的 Drupal 8 数据连同您将需要的所有模块，映射到您的旧 Drupal 7 模块，在可能的情况下尝试并加快该过程，因为我们希望确保使用旧版本的每个人仍然可以使用新的世界秩序，每个人都在同一个版本上，我们都在共同努力。

Angie Byron：除此之外，我们还扩展了 Drupal 7……Drupal 的开源社区，他们将在明年 11 月结束 Drupal 7 的生命周期。 目前，无论如何，我们需要讨论 COVID 是否会影响这一点。 但是有许多不同的公司，Acquia 就是其中之一，为 Drupal 7 提供扩展支持，至少到 2024 年。 这样一来，可以轻松升级的人有一年半的时间来完成它，人们的升级不太容易，如果需要，可能有三年半的时间来完成它，或者更长，我们正在努力让每个人都可以迁移，然后构建像 Acquia Migrate Accelerator 这样的工具来帮助加快进程。

Drew：学习 React 是与 Mina Markham 对话的主题。 Mina 和我都是第一次学习 React。 考虑到像 React 这样的框架给浏览器带来了多少负担，我问 Mina 将这么多的控​​制权交给客户端是否是一个错误。

Mina Markham：我想说是的，但要再次提醒我，我的经验在很大程度上包含在大多数静态网站中。 我不做很多产品开发。 所以也许在那个领域，这更有意义。 但从我的角度来看，当我们只需要一把黄油刀时，我觉得我们很多时候都在使用斧头。 我不知道为什么我们需要把所有这些都放在浏览器中，当我们可以做很多事情的时候，给客户端带来如此多的工作和如此多的压力……我觉得我们可以做得更简单。 一件事总是让我对使用 React 有点犹豫，或者我说犹豫，但我的意思是当它让我发自内心地愤怒并且我积极反对它时，我会去一个网站，实际上什么都不会呈现，因为有一个错误或类似的东西真的整个页面都坏了，因为一个功能坏了。

Mina Markham：很多时候，这让我有点恼火，这是一种全有或全无的方法。 我过去在 AEA 和其他地方的演讲之一是在谈论如何包括渐进增强，而不仅仅是你的开发，还有更大的艺术指导和网站设计。 我会特别指出一些没有进行渐进增强或任何优雅降级的网站的例子。 要么你在浏览器中运行了 JavaScript，要么你一无所获。 这将只是一个简单的网站，代表有关网页设计历史的信息，这是实际谈论的网站之一，从 1990 年到现在的网页设计历史。 这是一个漂亮的网站，有很多时间线和动画。 但它也可以只用一个列表静态呈现。 在什么都不展示和展示精美增强的体验之间有一些步骤，我认为由于我们现在接近现代 Web 开发的方式而迷失了这些体验。

Drew：我和 Andy Bell 讨论了 CUBE CSS，一种采用 BEM、SMACSS 和 OOCSS 方式的样式方法。 许多 CSS 方法都试图对抗 CSS 的自然属性，例如级联。 CUBE 非常接受这种行为。 这是安迪。

Andy Bell：一个很好的类比是 SCSS，就像 Sass 一样，是自然 CSS 语言的扩展，不是吗？ 你在 CSS 中还是很正确的。 所以CUBE CSS就是这样。 所以它是CSS的扩展。 所以我们还是应该写 CSS，就像 CSS 应该的那样……好吧，它应该是写出来的。 老实说，这应该是怎么写的。 这个名字给出了它，层叠样式表。 所以它再次接受了这一点，因为我发现我已经一路下降到微优化级别。 我一直在走这条路，最近我看到很多人在哪里……我在文章中也提到了这一点，我可以看到……最近有一些证据。 我发现人们一直在创建间隔组件和类似的东西，我理解这个问题。 我一直处于这种情况。

Andy Bell：我修复它的方式是，我没有深入研究并尝试进行微优化，而是开始在组合层面上思考问题，因为你的组件有多小并不重要。 在某些时候，它们将成为页面。 它们将成为视图。 你无法避免这一点。 事情就是这样。 因此，不要试图说，“对，我需要这些小帮手来做这个布局，”你说，“对，我有一个联系人页面视图或一个产品页面视图，这是一个骨架布局组合。 然后在其中，我可以将任何我想要的组件插入其中。”

Andy Bell：我们现在有了像 Grid 和 Flexbox 这样的东西，它们让这更容易实现，而且你基本上可以将任何你想要的东西放入骨架布局中。 没关系。 然后，组件应该按照您希望它们的行为方式运行，无论是否使用容器查询。

德鲁：盖茨比是我和马西·萨顿聊天的主题。 虽然大多数静态站点生成器都与前端代码无关，但 Gatsby 使用 React，因此您最终会将 Gatsby 代码作为最终 Web 体验的一部分运行。 我问 Marcy 那段代码是什么以及它提供了什么功能。

马西萨顿：是的。 我想说其中最大的一部分是客户端路由。 所以盖茨比现在正在使用引擎盖下的翻新机。 它只是一种自己的实现。 但这就是当您第一次加载静态站点时，那里有 HTML 文件。 因此，如果用户出于某种原因关闭了 JavaScript，您的网站应该仍然存在，仍然有内容。 但是如果启用了 JavaScript，就会发生这个水合步骤，当你在 Gatsby 站点中使用链接时，它会从该页面预取资源。 所以它会加载得更快。 Gatsby 为您提供的这个 JavaScript 层启用了所有这些功能。

Marcy Sutton：除此之外，这实际上取决于您在站点中使用的内容，以及最终在 JavaScript 包中的内容。 但是对于使用大量交互性的东西，比如可访问的界面，这是一个很好的地方。 对我来说，我真的很喜欢随时使用 JavaScript 并且让我的标记处于一个好位置。 我知道这是一个偏好问题，无论您是否想要 HTML、JavaScript 和 CSS，所有这些都巧妙地耦合在一起，并且在构建 Gatsby 中存在变化的空间。 您不必总是使用 CSS 和 JS 之类的东西。 但这实际上是在您编写网站时获得动态 JavaScript 层的强大功能。 它不像这个插件在一个单独的文件中。

Drew：当我想到静态站点生成器通常是如何工作的时候，我想到的可能是 markdown 文件中的内容，生成器会运行这些内容并将其与模板合并，并创建数十、数百、数千个 HTML 文件，这些文件是您网站的页面。 当我想到 React 站点或应用程序时，我更多地考虑单页体验，其中界面由 React 动态创建。 所以你是说盖茨比两者都做？ 它正在创建所有页面并使用 JavaScript 对其进行增强？

马西·萨顿：是的，是的。 Gatsby 将在构建时使用 Node.js，它会检查你的 React 组件并将它们编译成 HTML 文件，老实说，当我第一次看 Gatsby 时，我不会关闭 JavaScript，就像，“好吧，这里还有其他页面吗？ 这是什么？” 我很高兴 Gatsby 默认就是这样工作的。 它将从你的 React 组件创建构建文件，这太棒了。

Marcy Sutton：我已经探索了更多渐进增强的方法，因为它是在 JavaScript 中的，比如，如果你想为用户输出一些渐进增强的东西，如果他们确实关闭了 JavaScript，你不希望所有这些假定 JavaScript 的损坏代码有没有。 所以它有一些怪癖。 但是您可以解决这种问题，至少对于您希望某人仍然能够购买东西的核心用户流。 您可能需要为这些用例添加一些支持。 但令我惊喜的是，盖茨比默认推出的方式。

Marcy Sutton：所以他们以这种方式构建网站是他们做出的选择，我们一直在评估，这仍然是最好的方式吗？ 我们需要做些什么来为我们的用户提供他们所要求的东西？ 因此，我们在内部进行了一些探索，继续进行只是为了确保 Gatsby 在构建网站方面做得最好，因此保持包的大小很小，并确保在我们所说的性能代码与 pre 之间进行权衡-fetching，我们有数据支持吗？ 作为开发人员倡导者，我对这种事情非常感兴趣，确保我们在网站上打包和捆绑的东西确实是需要的，并且真的会成为它可以制作的最好的 Gatsby 网站。

Drew：在 7 月份与 Chris Ferdinandi 交谈时，我询问现代最佳实践是否对 Web 不利。 克里斯支持称为精益网络的运动，我问他这意味着什么。 这是克里斯。

Chris Ferdinandi: When I look at the way we build for the web today, it feels a little bit like a bloated over-engineered mess. 我开始相信，我们今天认为的许多最佳实践实际上可能会让网络变得更糟。 The Lean Web is an approach to web development that is focused on simplicity, on performance, and the developer experience over… I'm sorry, not the developer experience, the user experience rather, over the developer experience and the ease of building things from a team perspective, which is what I think where we put a lot of focus today.

Chris Ferdinandi: As we'll probably get into in our conversation, I've actually come to find that a lot of these things we think of as improving the developer experience do so for a subset of developers but not necessarily everybody who's working on the thing you're building. So there's a whole bunch of kind of issues with that too that we can kind of dig into. 但实际上，精益网络关注的是用户的简单性和性能，并真正优先考虑或关注使用我们制造的东西的人，而不是我们，制造它的人。

Drew: In August, Chris Coyier joined us to talk about all things serverless. I asked him what sort of the tasks they were putting serverless to over at CodePen?

Chris Coyier: Well, there's a whole bunch of things. One of them is, I think, hopefully fairly obvious is, I need… The point of CodePen is that you write each HTML, CSS, and JavaScript in the browser, and it renders it in front of you, right? 但是您也可以选择预处理器语言。 假设你喜欢 Sass。 您在 CSS 中打开 Sass，然后编写 Sass。 好吧，有些东西必须处理 Sass。 这些天来，Sass 是用 Dart 或其他东西编写的。 Theoretically, you could do that in the client. 但是这些进行预处理的库非常大。 我不认为我想把整个 Sass 库发给你，只是为了运行那个东西。 我不想。 That's not the right architecture for this necessarily. Maybe it is down the road. I mean, we could talk about offline crap, yada, yada, web workers.

Chris Coyier: There's a million architectural things we could do. 但这就是它现在的工作方式，是否有 lambda。 它处理 Sass。 它有一个微小的、微小的、微小的、微小的工作。 You send it this blob of Sass, and it sends you stuff back, which is the processed CSS, maybe a site map, whatever. It has one tiny little job, and we probably pay for that lambda like four cents or something. Because lambdas are just incredibly cheap, and you can hammer it too. 您不必担心规模。 You just hit that thing as much as you want, and your bill will be astonishingly cheap.

Chris Coyier: There is moments where serverless starts to cross that line of being too expensive. 我不知道那是什么。 I'm not that master of stuff like that. But generally, any serverless stuff we do, we basically all nearly count as free, because it's that cheap. 但是 Sass 有一个。 有一个少。 有一个给巴贝尔的。 TypeScript 有一个。 有一个用于……所有这些都是我们运行的单个 lambda。 Here's some code, give it to the lambda. It comes back, and we do whatever we're going to do with it. 但我们使用它的用途远不止于此，即使是最近。

Chris Coyier: Here's an example. CodePen 上的每一支 Pen 都有一个屏幕截图。 这有点酷，对吧？ So the people make a thing, and then we need a PNG or a JPEG, or something of it, so that we can… that way when you tweet it, you get the little preview of it. 如果你在 Slack 中分享它，你会得到它的小预览。 We use it on the website itself to render… Instead of an iframe, if we could detect that the Pen isn't animated, because an iframe's image is much lighter, so why not use the image? 反正也不是动画。 只是这样的性能提升。

Chris Coyier: So each of those screenshots has a URL to it, obviously. We've architected it so that that URL is actually a serverless function. 是一名工人。 So if that URL gets hit, we can really quickly check if we've already taken that screenshot or not. That's actually enabled by CloudFlare Workers, because CloudFlare Workers are not just a serverless function, but they have a data store too. They have this thing called key-value store. So the ID of that, we can just check really quick, and it'll be, “True or false, do you have it or not?”

Chris Coyier: If it's got it, it serves it, and it serves it over CloudFlare, which is super fast to begin with and then gives you all this ability too because it's an image CDN, you can say, “Well, serve it in the optimal format. 把它当作这些维度来服务。” 我不必制作这些尺寸的图像。 You just put the dimensions in the URL, and it comes back as that size, magically.

Drew: I talked to Next.js co-creator, Guillermo Rauch about the features on offer in Next.js and asked about its automated code splitting functionality. As the size of our JavaScript bundles can have quite an impact on performance, I was interested to know if Next had ways to tackle that. Here's Guillermo.

Guillermo Rauch: Yeah. Your observation is 100% right. So one of the biggest things with the web and one of the biggest weights on the web is JavaScript. Just like different materials have different densities and weights, irrespective of the actual physical volume, JavaScript tends to be a very dense, heavy element. Even small amounts of JavaScript compared to, for example, images that can be processed asynchronously and off the main thread, JavaScript tends to be particularly bothersome.

Guillermo Rauch: So Next.js has invested a tremendous amount of effort into automatically optimizing your bundles. So the first one that was my first intuition when I first sort of came up with the idea for Next.js was, okay, you're going to define, for example, 10 routes. In the Next.js world you create a pages directory, and you drop your files in there, index.js, about.js, settings.js, dashboard.js, terms-of-service.js, signup.js, login.js. 这些成为您可以通过各种媒体共享的应用程序的入口点。

Guillermo Rauch: When you enter those, we want to give you JS that is relevant for that page, first and foremost, and then perhaps a common bundle so that subsequent navigations within the system are very snappy. Next.js 也非常非常好，它会自动预取连接到该入口点的其余页面，这样感觉就像一个单页应用程序。 So a lot of people say like, “Why not just use Create React app if I know that I have maybe a couple routes?” I always tell them, “Well, look. You can define those as pages, and because Next.js will automatically pre-fetch ones that are connected, you end up getting your single-page application, but it's better optimized with regards to that initial paint, that initial entry point.”

Drew: In September, I had the pleasure of talking to Cassie Evans about SVG animation. We talked about the approachability of SVG for developers who are already familiar with HTML. Here's Cassie.

Cassie Evans: I think that that's what I love the most about SVG is I'm really into creative coding and also teaching people, and I found that teaching people who are more of a creative leaning, they sometimes get a little thrown off when you immediately jump in with JavaScript or Python or something like that for creative coding. But without fail, I've managed to get anyone that I taught on board with SVG because there some really approachable entry points because it does look like HTML.

Cassie Evans: So you can give someone with an understanding of HTML and how to build websites SVG, and it looks the same, but it's the graphics instead of documents, and then you can animate that with CSS to start off with, which is also a little bit more comfortable, and then you can kind of progress to animating it with JavaScript. So it's a really good learning curve.

Drew: Of course, it can be dynamic. It's not just a case of creating motion. You can actually make the properties of it dynamic. So one of the interesting things I've seen SVG used for, and it's a grand term, but data visualization, dataviz, and drawing graphs and charts and of course things like dashboards that we seem to have everywhere these days. SVG is sort of perfect for that, isn't it?

Cassie Evans: Yes, definitely. SVG is great for dataviz. All the way from kind of small dataviz up to D3 which is very well known dataviz library that uses SVG under the hood. But you could also just, if you've got a little bit of data that you wanted to show on a web page, you could create a chart in a graphics editing program, and then you could just use JavaScript to change those values and kind of change how your graph looks. So you don't have to go all in with a massive database library. You can kind of just start off small.

Drew: The Jamstack framework, RedwoodJS was the topic of conversation with Anthony Campolo. I asked Anthony what it meant to be a full-stack Jamstack framework in practical terms.

Anthony Campolo: Yeah, it's pushing the boundaries of what a Jamstack application can be. So by calling it full-stack Jamstack, it's about, how do we go beyond just the front end to having the same sort of deployment paradigm of just get pushed, getting your whole code deployed? How do we get that but also with our back end and have it all connected?

Drew: Vue.js version three was released in October, and I caught up with Natalia Tepluhina from the Vue core team. Discussing the new version, I was curious if the major version bump was just a result of a few backward incompatible modifications or if this was a very clear revisiting of Vue to make deeper changes to the framework.

Natalia Tepluhina: No. I think it was an idea to create a new version due to a few very important things. 因此，首先，有改变反应性的动机。 Previous one was built upon Object.defineProperty, and it had a few caveats. They're all documented, but still, even if you document something that people shouldn't do, they will do it anyway, and you would need to point them to the documentation. Nobody reads documentation, by the way. For some reason, it just happens. Until you point people out, it doesn't exist in docs, it does. 不过没关系。 无论如何，我们都会教你。

Natalia Tepluhina: So reactivity was one of the things. Performance was the next. Vue 2 still had and has not the worst performance, but we had a few ideas about how to make Vue faster, and also, there was one pain point for a particular part of our, let's say audience, people that use Vue. 那是打字稿。 Vue 2 internally was written in Flow, which is still strongly typed one, but typing with TypeScript were a real nightmare especially if you were working with our state management Vuex.

Natalia Tepluhina：所以这又是一个重要的部分。 最后一个是我们有点错过了抽象逻辑的功能，不是组件，而是可组合的逻辑部分，比如函数助手等，但它们也应该能够包含 Vue 活动。 一个很好的例子可能是 React Hooks，对吧？ 它们允许您抽象功能的各个部分，而这在 Vue 中显然是缺失的。 我知道现在听起来像是“你从 React 偷了这个特性”。 事实上不是。 我相信想法异花授粉是我们生态系统中一个重要而美好的部分，它还可以帮助开发人员在收藏夹之间切换，对吗？ 因此，我们正在研究这些主要功能，以创建 Vue 3 作为主要版本。

Drew：之后，我们与 Stefan Baumgartner 一起深入研究了 TypeScript，以了解它如何帮助我们编写更好的代码，减少错误。 观察到组织将其代码基础完全迁移到 JavaScript 的趋势，我问 Stefan，TypeScript 是否是大型团队比个人受益更多的东西。

Stefan Baumgartner：所以我目前处于同样的过渡期。 所以我们有很多 Java 和 C++ 开发人员，他们将在未来编写大量 JavaScript。 TypeScript 可以成为新编程语言中那些可怕领域的某种指南。 如果你来自不同的编程语言，JavaScript 有很多怪癖、很多历史和很多偏见。 所以 TypeScript 可以作为指南，因为在类型系统中有一些你熟悉的概念。

Stefan Baumgartner：而且，我认为，尤其是当你有很多人在同一个代码库中工作或有很多人需要相互合作时，这可能是你项目中额外的一层指导，而你不需要'最后没有任何不好的惊喜。 所以当然，技术并不能解决任何沟通问题。 这不是 TypeScript 的用途。 但它可以降低，或者它可以为正确的讨论腾出更多空间，如果你不必谈论，你对我的代码有什么期望，而是你的代码应该做什么，或者你应该做什么图书馆呢？

Stefan Baumgartner：我总是说，如果你曾经为其他人写过代码，或者如果你和很多人一起写过代码，或者如果你只是为自己写过代码，那么你必须在第二天重新审视，考虑 TypeScript，因为它可能会帮助你长跑。 这不仅是对下周下一个项目的投资，而且对于那些说，好吧，特别是如果你有一个月、两年或几年的长期项目，肯定会提供的。 当你在一年前编写一小段代码时，你永远不会知道你在想什么，但是类型可以给你一个暗示你的意思。

Drew： 11 月，我和 David Darnes 聊了聊静态站点生成器 Eleventy。 我们讨论了模板，以及有多少静态站点生成器对您应该使用哪种类型的模板非常自以为是。 我想知道十一是否也有同样的坚定信念。 这是戴夫。

大卫·达内斯：不，我不得不说这是你所能得到的最无主见的。 有点个人观点，但我很难看到任何框架或任何可以不受约束的东西，因为为了创造一些东西，你必须对你想如何做某事有自己的看法。 这有点矛盾。 我相信人们可以纠正我。 但是，是的。 您可以切换到您觉得最舒服的任何模板语言。 我的意思是，我们只是在谈论您熟悉的语言。 Eleventy 在某种意义上吸引了这一点，因为你需要在 HTML 中使用什么模板语言，或者甚至是你的 CSS，如果你愿意的话。

David Darnes：对我来说，我直接去了 nunjucks，因为 nunjucks 是 Eleventy 内部的默认模板语言。 这意味着我可以使用点 HTML 扩展名并保持原样。 现在，我只想让人们更加困惑，并说：“无论如何，你可以随意命名。 你可以玩得很开心。” 但是你可以使用车把。 我认为您可以使用常规的 JavaScript 模板并像那样迭代它。 车把很受欢迎，Liquid 也很受欢迎。 我无法想到所有这些，但是如果您在配置中进行了所有设置，则可以随心所欲地选择。

David Darnes：我想说我是一个真正的模板语言的忠实粉丝。 不久前，当我发现你可以在 WordPress 中使用 twig 时，这让我大吃一惊。 我当时想，“哦，谢天谢地。 我不必在 PHP 中处理 for 循环。” 再一次，我认为一些更舒服、更容易理解、更易读的东西。 嗯是的。 Eleventy 有很多不同的模板选项，它应该会吸引那些对这些不同的模板感到满意的人。

Drew：我与 Leslie Cohn-Wein 讨论了 Netlify 如何使用自己的平台构建 Netlify，以及他们的 Deploy Preview 功能如何成为前端更改的有效暂存平台。

Leslie Cohn-Wein：也许整个过程中我最喜欢的部分是 Deploy Previews 的魔力，我们通过 Netlify 获得了它。 所以发生的事情是你在 GitHub 上工作，你推了你的 PR。 因此，您在 GitHub 中打开您的 PR，这将自动创建您的应用程序部署预览的构建。 因此，我们实际上使用应用程序本身的部署预览来进行测试，以确保一切正常运行。 我们运行我们的测试。 这就是我们在代码审查期间用来手动验证的方式。 所以我们已经从 GitHub 上设置了所有的持续部署。

Leslie Cohn-Wein：那么我们设置的另一件很酷的事情是，我们实际上有几个不同的 Netlify 站点，它们从我们的应用程序所在的同一个存储库中提取。 所以我们都有我们的应用程序。 我们有一个 Storybook 实例，其中包含应用程序的一些 UI 组件。 所以我们有我们的应用程序本身。 我们有 Storybook UI 组件，我们基本上有一个 Netlify 站点来显示我们的 Storybook UI，然后我们还有第三个站点运行 webpack 包分析器。 所以它是一种可视化 UI，为您提供所有应用程序包的树形图可视化，我们可以衡量它们的大小，这只是提醒我们在每次部署应用程序时都要仔细检查出来，我们可以检查并确保我们在那里的包大小没有做任何奇怪的事情。

Leslie Cohn-Wein：所以这三个网站都是在应用程序的一个拉取请求中生成的。 因此，您将获得应用程序 Storybook 和该应用程序配置文件的预览链接，本质上是您的部署预览，以供我们检查。

Drew：去年 12 月，我与 Chris Murphy 讨论了产品设计以及以设计为重点的企业意味着什么。 我们讨论了个人创始人的设计重点是否会泄漏到业务中，以及产品是否自然是创建它的人的延伸。

Chris Murphy：我认为这是一个非常好的问题，Drew，我认为答案取决于它。 我认为这取决于那个人，这取决于公司的规模。 如果你看一下 Hiut Denim，我在教学中经常使用 Hiut，这是一个很好的例子，说明一家公司做得很好，那就是他们的绑带牛仔裤。 我想如果你看看大卫以前的……大卫和克莱尔，因为他们是合伙人。 如果你看看 David Hieatt 和 Clare Hieatt 以前的公司，也就是 Howies，那家公司已经发展得如此之大，参与的人也很多。

克里斯墨菲：一旦规模开始蔓延，就开始变得非常难以关注客户旅程中所有重要的小接触点。 我认为当他们离开豪伊斯时，这真的很能说明问题，因为豪伊斯已经被……买走了。这很复杂。 去网上阅读吧。 但这是 Timberland，Timberland 被收购了，这就是故事。

Chris Murphy：我认为他们现在关注的是牛仔裤，这真的很有趣。 而已。 他们正在讲述一个关于牛仔裤的非常好的故事。 他们还把所有东西都包装得非常非常好，牛仔裤就像是故事的载体，真的。 德鲁，我认为随着我们走出 COVID 的另一端，这将变得更加重要，我希望我们能走出 COVID 的另一端。 每个制作牛仔裤的人都得到了适当的工资。 当我看到这个世界时，我现在遇到的问题之一是并不是每个人都得到了适当的工资，作为一个人，我发现这有点令人担忧……看，我今年 51 岁。我儿子 25 岁、24 岁, 25, 类似的东西。 它是可怕的。 我应该知道这一切。 他是一名婚礼摄影师。 他已经做了一年多的婚礼摄影师。 他的生意被彻底摧毁了，因为现在没有人真正结婚，因为这很困难。 他没有薪水，因为他没有足够的自雇书籍来获得支持。

克里斯墨菲：他从裂缝中跌落，还有很多其他人从裂缝中跌落。 我认为这是一个设计问题，我们需要将其视为一个设计问题。 但是，如果我也看一下 COVID 和政府以及所有这些更广泛的问题，而不是太政治化，我昨天在卫报上读了一篇关于马特汉考克的邻居的文章，以及任何不是来自英国的人，马特汉考克是卫生部长。 他的邻居正在经营一家企业，他正在给他发短信并询问有关“我如何为这种 COVID 产品提供产品？”的建议。 有很多关于谈笑风生的谣言，这就是报纸所说的，政府部长的朋友的朋友，他们似乎找到了工作，因为他们认识合适的人。

克里斯·墨菲：我觉得我们会走到另一端，看到这个……人们看到了，他们会想，“嗯，这些钱去哪儿了，人们得到了适当的报酬吗？ X 店的这件 1 磅重的 T 恤多少钱？” 我不想提及任何品牌。 但是一切都必须付出代价，而所做的一切，都必须付出代价才能做到。 我认为人们越来越感兴趣，人们得到了公平的报酬吗？

Drew： GraphQL 是我们今年最后一集的主题，我和 Eve Porcello 聊了聊，询问 GraphQL 在开发堆栈中的位置。

伊芙·波切洛：是的。 GraphQL 适合前端和后端。 所以它介于两者之间，给前端开发者和后端开发者带来了很多好处。 如果您是前端开发人员，则可以定义前端的所有数据要求。 因此，如果你有一个很大的 React 组件列表，例如，你可以编写一个查询，这将定义为该页面填充数据所需的所有字段。

Eve Porcello：现在，有了后端，它真的是自己的了，因为我们可以从很多不同的来源收集很多数据。 所以我们在 REST API 和数据库以及所有这些不同的地方都有数据，而 GraphQL 为我们提供了这个漂亮的小编排层，以真正理解我们所有数据所在位置的混乱。 所以它对堆栈中的每个人都非常有用。