这些 Web 开发工具帮助我在 2019 年完成了许多工作。另外，非常感谢！

Netlify

Svelte v3

CSS 变量/自定义属性

对比

在我离开之前，感谢今年所有的支持😁

值此新年（甚至新的十年！）之际，我想花点时间回顾一下 2019 年那些让我的生活更轻松的工具。Web 开发的“最佳”榜单往往会对技术进行概括。因此，我想更多地关注我今年参与的项目，以及这些技术是如何帮助我完成这些项目的。继续前进！

Netlify

我可能不是唯一一个整年都对Netlify赞不绝口的人。从零开始部署简直太容易了！简而言之，Netlify 不仅能部署网站前端，还附带大量额外功能：持续部署、钩子支持、带有自动 SSL 证书的自定义域名……所有这些都包含在一个美观且易于导航的仪表板中。

我在那里部署了两个相当大的项目：我的投资组合网站（https://bholmes.dev）和我们 Bits of Good 组织的落地页（https://bitsofgood.org）。在此之前，我从未管理过自定义域名，但 Netlify 指导我完成了复制 DNS 配置和其他网络相关内容的每一个步骤。我还强烈建议允许 Netlify 通过域名提供商来管理你的域名，因为它们可以大大简化子域名和 SSL 证书的设置 😁

在移动版 Safari 上快速测试

我敢打赌你以前听过这个：该网站在 Chrome 开发工具的“移动视图”上看起来很棒，但布局在实际手机上完全崩溃了🤦‍♂️

其实，Netlify 对此有一个解决方案：从命令行手动部署。你不必每次margin向右移动 5 个像素时都推送新的 git 提交，只需将构建目录推送到你选择的 URL 即可！这非常适合在提交 PR 之前测试前端，而且 Netlify 还会确保你所有的无服务器函数、API 代理以及额外的生产设置都得到部署。

这对于我们的Bits of Good 主页至关重要，我们利用一些神奇的 CSS 重新组织了移动端视图中飘忽不定的矢量图形。此外，它还帮助我们在提交 PR 之前就发现了屏幕尺寸问题！

使用 Netlify 表单

我刚刚尝试了一下，但Netlify 表单证明了它是一种超级快速简便的解决方案，无需后端即可存储 HTML 表单响应。这对于我们新的 Bits of Good“联系我们”页面至关重要。最初，我们计划在表单提交给POST一个无服务器函数后发出 API 请求，然后该函数可以将消息转发到我们的邮箱。这还不算太糟，但听起来要花 6-7 个小时（我们不擅长后端，所以先别急着“我可以在 3 小时内完成”😆）。

现在有了 Netlify，我们要做的事情就这些了（请注意，是免费的！）

1. 添加data-netlify到我们的form元素
2. 确保表单中的每个元素都作为name属性（出于可访问性的原因，它已经应该如此！）
3. name向表单本身添加一个属性，以便我们可以看到哪个表单被导入到 Netlify
4. 利润💰

太棒了！现在所有表单响应都存储在 Netlify 上，并且具备相当强大的垃圾邮件检测功能。我们还可以将用于电子邮件转发的无服务器功能直接部署到 Netlify，它已经内置了用于检测表单提交的钩子。太棒了！

Svelte v3

去年年底，我偶然发现了这个库，当时它是2018 年 JS 现状调查中排名第一的写入者。当时它运行的是 v2 版本，但我仍然被它的使命宣言所震撼：一个神奇的消失框架 ✨

现在，我用它构建的项目已经数不胜数了！它如此出色的原因如下：

• 这是一个运行时不打扰你的库。它不需要一些“虚拟 DOM”来管理页面，也不需要不必要的 JQuery 依赖，而是直接把你写的代码直接放到浏览器上，无需任何依赖！当然，它会根据需要生成辅助函数，但生产环境的包大小差异是惊人的。
• 你甚至在不知不觉中就能管理状态。无需使用setState函数或类似的东西，你只需直接更改 JS 变量即可……Svelte 知道如何更新页面。虽然有一些额外的工具可以处理特殊情况，但这绝对是我最省时的方法！
• 模板极其精简。你只需要知道如何for为元素列表编写循环以及如何插入 JS 变量值。如果你有需要，还可以添加许多用于绑定和事件处理的功能。

要快速了解 Svelte 的易学易用性，请查看我的博客文章，从老师的角度探索该工具！

Svelte 适用于快速项目

Svelte 已经成为我快速启动和运行小型项目的新工具。我参加过大学里的几次黑客马拉松（加油，黄夹克队！），我用这个 Svelte 模板开始开发 Web UI。我开始选择 Svelte 而不是 React，因为它创建新组件非常容易。每个组件基本上都“沙盒化”在自己的文件中，你可以在其中编写原生 HTML、CSS 和 JS，同时所有样式和脚本的作用域都限定在该组件内。这几乎就像快速制作一个 CodePen，如果你能用 CodePen 为你的整个网站创建一个超级 CodePen 😁

我最喜欢的亮点之一是一场名为BuildGT的硬件黑客马拉松。比赛的前提是：用 Roomba 球当保龄球玩一局！最终成品是本不该存在的东西，但让所有东西都能互相沟通真的超级有趣。我们通过 Web Socket 实现了 Roomba 和 Kinect 传感器（用于检测球瓶倒下）之间的通信，但锦上添花的是，我们在几个小时内就用 Svelte 构建了教学 UI。

黑客攻击

Liquid 错误：内部

用户界面

Liquid 错误：内部

适用于静态网站的 Svelte

除了快速生成创意之外，Svelte 在静态网站生成方面也有一些独到之处。我们将其用于 Bits of Good org 网站（完整代码库在此），该网站基于 Svelte 和Contentful CMS构建。为了帮助路由和预渲染实际的静态网站，我们使用了神奇的Sapper框架来管理这一切。它的作用很像NextJS，但带来了一些非常好的好处：

• 管理服务器端渲染，以加快初始页面加载速度。与 NextJS 类似，您可以像这样指定要在页面加载前触发的所有 API 调用。
• 后台路由管理。它甚至允许你使用常规的旧a标签链接到网站上的其他路由，而无需导入某些特殊Link组件。

Sapper 还使用了一个您实际上可以理解的构建工具：Rollup！

如果您想知道什么是 CMS，它是一种用于存储网站所有文本和图片的外部工具。这对于非技术团队成员来说非常方便，他们想要编辑网站内容，但又不懂代码。他们无需咨询开发人员，只需打开一个网页门户，自己编辑内容即可！Headless Wordpress就是其中最受欢迎的例子之一。

这款轻量级构建工具在管理我们的 Contentful CMS 设置时非常方便。我们不用花上几天时间与 Webpack 搏斗，Rollup 非常简单，我们可以从头开始设置一个插件！文档指导我们完成了整个过程的每一步，并为我们提供了一个非常巧妙的解决方案。我们只需通过 API 调用从 CMS 导入文本和图片内容，根据需要将 Markdown 转换为 HTML，然后在构建时将所有内容打包成 JSON 格式即可。

现在，每当组件需要从 CMS 导入内容时，我们只需通过内容 ID 导入即可。例如，以下是如何获取所有非营利项目，并将其添加到“项目亮点”页面：

import projects from '@contentful-entries/project'

砰！现在projects是一个 JavaScript 对象数组，包含我们需要的所有文本和图片 URL。如你所见，Rollup 还帮我们添加了一个名为 的别名，@contentful-entries让内容检索更加便捷。对于那些对细节感兴趣的朋友，这是我们最终的 RollupJS 插件✨

CSS 变量/自定义属性

2018 年，这项功能在浏览器中推出时，对 CSS 来说是一个重大胜利。到了 2019 年，这项功能已经成熟，并在一些浏览器中获得了相当不错的采用。没错，IE 仍然是个问题……但如果你需要的话，现在也有一些不错的 polyfill可用 🙃

来源：caniuse.com，截至 2020 年 1 月 3 日

我已经开始全面使用这些，最终摆脱了使用 SCSS 来管理颜色、字体大小、边距等。它们也比 SCSS 预处理器中的变量更加灵活。主要好处在于：现在您可以创建仅适用于要添加样式的元素的变量，而无需在全局级别创建静态变量。换句话说，这些变量可以存在于级联的任何级别，并借助 JS 或 CSS 关键帧的功能进行动态更新！

当我用 magic 将一些复杂的样式计算从 JavaScript 迁移到 CSS 时，这非常有用calc()。至关重要的是，CSS 变量允许我使用内联样式将 JavaScript 变量在 CSS 中显示出来。

要查看 CSS 变量的实际作用，请查看我关于实际应用的博客文章！

对比

免责声明：此应用程序目前仅适用于 Mac

这更像是一个“设计”工具，而不是纯粹的“Web 开发”工具，但我经常使用它，所以我不得不在这里提一下。

Contraste是一款非常简单的工具，功能只有一个：检查页面上的文本对比度，以获得可访问性评级。该评级由“ ADA 合规性”衡量，根据您的网站对视障人士的可访问性，给出 A、AA 或 AAA 的评分。这一切都归结于文本对比度，而这不像我想象的那么容易用肉眼观察！

我超爱这个工具，因为它简单易用，而且它是一款全局工具，而不是浏览器扩展程序。实际上，在从设计模型转换到实际网站时，它暴露了一些可访问性问题，网页上的颜色与模型工具中漂亮的颜色不太匹配。

在我离开之前，感谢今年所有的支持😁

我三月份开始写这个博客，当时只是一篇简短的小文章：为什么我用 Surge 而不是 GitHub Pages。我当时写这篇文章的时候，其实并不知道我在做什么（甚至在 3 分钟的阅读时间内写了一些技术上的错误 😆），以为到早上可能会有几个赞。

然后我打开我的个人资料，发现有超过100个关注者和近1000次浏览量。什么？！就为了这个？

说实话，在正确的时间发了正确的推文真是太幸运了（感谢Emma Bostian 的点赞！ ）。如果你在自己的博客上苦苦挣扎寻找读者，我只能说：永远不要停止写作。永远不要停止宣传自己。还有，请永远不要停止学习。

所以，在经历了这场意外事故以及之后的众多文章之后，我非常感谢大家对我的支持。这真的给了我动力去完成我的博客，也让我真心热爱教别人Web开发。今年年底，我竟然跻身dev.to网站前500名作者之列，这……真是一个我永远无法理解的不可思议的里程碑。

所以，祝2020年有更多帖子和学习机会！干杯🥂