向 Wufoo致敬，我们 CSS-Tricks 上的长期赞助商。它为我在过去十年中构建的大多数表单提供了支持。如果您从未使用过或听说过它：它是一个表单构建器。它使实施表单的艰巨任务变得异常简单。在 Wufoo 上构建表单意味着您将获得一个在UX方面做到一切正确的表单，让您完全控制设计，与任何内容集成，并且您可以将其放置在任何位置。

功能列表太长，无法在一篇文章中涵盖，因此我总是喜欢涵盖我最近使用过并喜欢的少量内容。

1. 他们刚刚发布了 一种更快的方式来重命名表单，无论是在表单管理器中还是在表单本身中。
2. 不要忘记他们有一个 强大的 API。就在前几天，我使用了 API 提交了一个表单的条目。我想在一个表单上做一些特殊的事情，比如能够对表单提交的 DOM 事件做出反应。当表单位于<iframe>中时，这实际上是不可能的，但是当您自己托管表单并通过 API 提交时，则可以正常工作。效果很好。

我们刚刚在 我们的时事通讯中发布了关于 Jeremy Wagner 这篇文章的笔记，但它非常好，我认为值得再次链接，因为 Jeremy 写了我们对 JavaScript 的痴迷如何会导致可访问性和性能问题

我们往往忘记的是，网站和 Web 应用所处的环境是一样的。两者都受到大型网络和设备梯度施加的相同环境压力的影响。当我们决定将我们构建的内容称为“应用”时，这些限制并不会突然消失，当我们这样做时，用户的手机也不会获得神奇的新功能。

我们有责任评估谁使用我们制作的东西，并接受他们访问互联网的条件可能与我们假设的不同。我们需要知道我们试图服务的目的是什么，只有这样，我们才能构建一些出色地服务于该目的的东西——即使构建它并不令人兴奋。

继续阅读 →

Jake Archibald 查看了 F1 车队的网站并对其性能进行了评级，仔细检查了它们的图像并深入研究了每个站点的资产瀑布

在连接不良的情况下尝试使用网站非常令人沮丧，因此网站可以做任何事情来减少问题都是巨大的胜利。

就设备而言，如果您查看技术领域之外的情况，许多用户无法或不想购买高端手机。要了解网站对真实用户的执行情况，您必须查看中低端 Android 设备，这就是我选择 Moto G4 的原因。

这让我想起了 Tim Kadlec 今年早些时候关于 性能伦理的文章 继续阅读 →

localStorage是……

• 好的！它是一个非常容易使用的 API。

localStorage.setItem('name', 'Chris'); let name = localStorage.getItem('name');

• 坏的！Philip Walton 解释了原因

localStorage是一个同步 API，它会阻塞主线程，并且每次访问它时，您都可能阻止页面具有交互性。

Chrome 有一个想法（这是提案）来重新设计它。 继续阅读 →

浏览器，谢天谢地，非常重视向后兼容性。

旧网站通常在现代浏览器上运行良好。网站出现故障的可能性远高于托管问题、缺少或更改的资产或服务器更改，而不是浏览器处理 HTML、CSS、JavaScript 或其他原生 Web 技术的方式发生变化。

在最近的记忆中，#SmooshGate 都是关于一个与曾经流行的 JavaScript 库冲突的新 JavaScript 功能。简而言之，JavaScript 针对Array.prototype.flatten有一个提案，但命运弄人，如果它发布，它会破坏 MooTools Elements.prototype.flatten，因此为了 Web 的健康，它必须重命名。

那是 Web 与第三方打交道，但有时 Web 必须自己处理。即使感觉它们已经过时且无关紧要，也需要继续工作的旧 API 和事物名称。这项工作，令人惊讶的是，是由关心的人类完成的。

Mike Taylor 就是这样一个人！我在这里链接的文章只是这种需要关注的奇怪历史的一个例子。

继续阅读 →

您向下滚动到某个点，现在您想以某种方式设置样式。标题变为固定。动画触发。出现目录。要根据滚动位置执行任何操作，目前需要 JavaScript。您通过 DOM 事件观察滚动位置，并根据该位置更改元素的样式。或者，如果可以，最好使用IntersectionObserver。我们刚刚发布了关于所有这些内容的博文。

现在有一个 新的（非官方的）规范 试图将这些可能性引入 CSS。我喜欢 Web 标准参与进来，因为它看到像我们这样的作者试图实现某些设计效果，并且希望（大概）帮助使其更容易和性能更高。我也喜欢该规范如何列出来自 Mozilla、Google 和 Apple 的编辑。

我想知道他们将如何处理这里的无限循环问题。例如，您滚动到某个点，它会触发某些动画，从而移动某些元素，从而更改滚动位置，从而停止动画，从而再次移动滚动位置……等等。我还想知道为什么它都特定于动画。“滚动位置样式”似乎具有最广泛的吸引力和实用性水平。

Brad Frost 写了一篇关于最近使用<input type="number"/>的网站的体验的文章

上周，我接到银行的电话，询问我刚刚安排的一笔电汇。客户支持人员让我重复所有内容，因为信息似乎有问题。“嗯，除了帐号的后三位数字之外，您说的一切都正确。”

他让我重新提交电汇表单。当我退出帐号字段时，我眼角注意到帐号发生了细微变化。我很快重新聚焦到该字段，并在我的 Magic Mouse 上稍微向上移动了食指。它开始看起来更像老虎机而不是输入字段！

继续阅读 →

重构是一个让许多人感到恐惧的词，从开发人员到产品负责人以及介于两者之间的人。在很多方面，它也可以说是脏话。这也是我们在这里经常谈论的事情，因为，就像 关于该主题的书籍、从哪里开始以及 技术债务累积的影响。

Ben Rady 也对重构有想法，但在结对编程的背景下

我们每天大约结对 6 个小时。关键路径上的所有内容都由两人协作完成。一直如此。我们的目标始终是尽快将我们正在处理的内容交付到生产环境中，而我发现实现这一目标的最佳方法是结对。

继续阅读 →

2019 年将网站部署到服务器需要比 10 年前付出更多的努力。例如，以下是在当今交付典型 JS 应用时需要执行的操作

• 将应用拆分为块
• 配置 webpack 包
• 压缩 .js 文件
• 设置登台环境
• 将文件上传到服务器

手动运行这些步骤需要时间，因此自动化工具似乎是一个显而易见的选择。不幸的是，大多数现代 CI/CD 软件提供的只是基础设施，您仍然必须在其中手动配置流程：花费数小时阅读文档、编写脚本、测试结果并在以后维护它。没人有时间这样做！

这就是我们创建 Buddy 的原因：通过创建一个强大的工具来简化部署到绝对最小值，该工具的 UI/UX 允许您在 15 分钟内配置整个流程。

以下是在 Buddy CI/CD 中交付流程的样子

这是 Buddy 中的交付管道。您选择所需的动作，配置详细信息，然后将其放置到位——就像您在建造砖房一样。无需脚本，无需文档，无需任何其他操作。目前，Buddy 支持超过 100 个操作：构建、测试、部署、通知、DevOps 工具等。

超级流畅的部署

Buddy 的部署基于变更集，这意味着仅部署更改的文件——无需每次都上传整个存储库。

配置非常简单。例如，要部署到 SFTP，您只需输入身份验证详细信息和服务器上的目标路径即可

Buddy 支持部署到所有流行的堆栈、PaaS 和 IaaS 服务，包括 AWS、Google Cloud、Microsoft Azure 和 DigitalOcean。以下是支持的集成的部分内容

更快的构建，更好的应用

构建在具有预配置开发环境的隔离容器中运行。依赖项和软件包在第一次执行时下载并在容器中缓存，这极大地提高了构建性能。

Buddy 支持所有流行的 Web 开发语言和框架，包括 Node.js、PHP、Ruby、WordPress、Python、.NET Core 和 Go

面向大众的 Docker

Buddy 本身是一个基于 Docker 的工具，它帮助开发人员利用容器的功能，并提供专门的 Docker 操作列表。您可以构建自定义镜像并在构建中使用它们，在远程运行 dockerized 应用，以及轻松地在 Kubernetes 集群上编排容器。

Buddy 与 Google GKE、Amazon EKS 和 Azure AKS 集成。您还可以将镜像推送到和从私有注册表中拉取。

立即自动化！

立即注册 Buddy，试用期结束后即可永久免费获得 5 个项目。流程很简单：点击下方按钮，连接您的 GitHub、Bitbucket 或 GitLab 仓库（或任何其他仓库），然后让 Buddy 接手后续操作。期待您加入！

创建免费账户

Nick Nisi、Suz Hinton 和 Kevin Ball 在 JS Party #61 中讨论了 The Great Divide，然后我有幸与 Suz 和 Jerod 在 第 67 集 中再次讨论了它。

Dave 和我也在 ShopTalk #346 中对此进行了简短的讨论。