我如何在 17 小时内构建并发布一个小型 Web 应用

在这篇反思文章中，我想介绍一下所使用的技术堆栈，揭示一些技巧，并提供一些如何快速将小项目从构思变为发布的技术。

2021 年 1 月 1 日，我推出了 ButtonBuddy，这是一款小型实用 Web 应用程序，可让您：

了解如何确保您的按钮或按钮样式的链接在所有状态和表面上都具有可访问的对比度，然后使用生成器检查和调整您的按钮调色板。

注意：这17个小时并非连续的——我全职工作，也是一位妈妈😅，我绝对不提倡忙碌文化。我用WakaTime来记录时间。

技术栈

花一点时间访问ButtonBuddy.dev并执行经典的“查看源代码”。

...你很惊讶能看到这一切吗？

没错——这个应用不是 React，甚至不是 Angular 或 Vue。它由精巧的 HTML、CSS 和一些原生 JS 组成，专门用于生成器部分。看看它的加载时间！

ButtonBuddy 是使用静态站点生成器 Eleventy (11ty)构建的，并添加了Parcel来帮助捆绑 JS 并允许使用 ES6 功能。

如果你还不熟悉 Eleventy，我在11ty.Rocks上有很多资源

Eleventy 的易用性和定制能力使得该项目能够如此快速地从构思到发布（此外范围也很狭窄）。

让我们来看看 Eleventy 的一些主要功能：

如上所述，我确实需要通过添加 Parcel 来扩展 Eleventy 的基本功能。此处的设置步骤由 Michelle Barker 提供，感谢她提供的eleventy-parcel入门工具。

TL;DR：选择你熟悉的技术栈，并首先根据主要功能创建语义化的 HTML。然后创建并测试最低限度的功能，最后完善内容和样式。请预留成长和改进的空间！

毫无疑问，当您更熟悉所选的技术堆栈时，您将能够更快地构建某些东西。

也就是说，你的环境越接近“零配置”，你就能越快地从想法推进到目标。像 Eleventy 这样的静态优先环境，如果实现你的目标并不需要这些架构，也可以通过跳过关于状态、组件、props 等的决策来加速你的结构化开发。

对于 ButtonBuddy，我创建了一个功能列表。然后，我以此为基础，使用语义化、可访问的 HTML 和 Nunjucks 局部函数构建了我的信息层级结构。我暂时没有深入设计样式，只是留了一些占位符。

接下来，我做了一些研究，选择了一个软件包来帮助实现这个特定应用的一个关键功能，即确定两种颜色之间的对比度。开源软件包和启动器当然也能提高效率，但研究是这一步的重要组成部分。多花一点时间进行研究，或许可以避免从一条路走下来，然后再用不同的解决方案重复一遍。

这里的技巧是，只需进行足够的工作来确定你选择的插件包是否可行。也就是说，构建所需的最小可行功能部分以及任何相应的 UI，并克制住在此阶段进行改进的冲动。

在构建 ButtonBuddy 时，这意味着要删除一个单一的颜色控件，以确保包能够正确地将该值与我 JS 中硬编码的颜色值进行比对，从而返回对比度。然后，我使用辅助工具检查了该比例的准确性，当结果相等时，我才继续下一步。

如果您确实面临最后期限（无论是自我规定的还是其他的），请考虑哪些功能将对您的时间和项目目标产生最大影响。

对于 ButtonBuddy 来说，提供足够多的功能至关重要，既要能作为教育工具，又要能为用户提供可操作的反馈和结果。此外，这些功能必须与界面协调一致，清晰易用，并且界面本身易于访问，包括移动用户。

我已经提到过几次了，但是语义 HTML 是此构建效率的关键（并且应该始终是优先事项）。

拥有 Nunjucks 模板也很有用。我将应用程序的各个部分拆分成多个部分，以便可以单独添加它们，从而专注于生成器而不是内容。

就样式而言，你也看不到 ButtonBuddy 的 CSS 框架的痕迹。虽然框架本身并非错误选择，但利用可重复的模式也能快速构建样式。这再次凸显了模板功能和使用语义化 HTML 的关键所在。

需要一些帮助来提升你的 CSS 技能吗？不妨看看我的“现代 CSS”系列，探索一些老旧 CSS 问题的现代解决方案。你也可以观看我关于如何使用 flexbox 和 grid 构建落地页的 20 分钟视频课程。

功能完成后，我完成了内容编写，并添加了一个小导航。然后，我完善了品牌风格，并优化了生成器布局。这里的目标是“足够好”才能发布，这样我就可以开始收集反馈，同时也给自己留出继续调整或修复任何问题或错误的余地。

一旦应用程序运行起来，并且你对它的外观和感觉感到满意，仍然需要执行几个步骤来确保它可以启动，即使对于 MVP 来说也是如此：

完整的<head>标签包括含义<title>和<meta>描述。
还可以添加社交标签，特别是 Twitter 和 Open Graph 标签，包括用于预览图片的绝对 URL。您可以查看ButtonBuddy 使用的社交标签
在顶级浏览器和真实移动设备上进行测试- 您可能会发现使用开发工具模拟器时不存在的问题。
检查 Lighthouse，发现任何与性能或可访问性相关的细微问题。您可以在线操作，也可以使用浏览器扩展程序。
使用 aXe 和 WAVE 等浏览器工具仔细检查可访问性（请注意，自动化测试不会发现所有问题）。

ButtonBuddy 已上线 ProductHunt，感谢您的点赞！期待您对 ButtonBuddy 以及整个流程的反馈😊