AMP

为 AMP 项目做出贡献

未分类

编辑注:以下内容最初由 10up 的首席 Web 工程师 Adam Silverstein 在 Google 开源博客 上发布。

我开始我的网络职业生涯是在 WordPress 上为小企业构建网站,因此当我决定开始为开源做出贡献时,WordPress 是一个自然而然的选择。

现在我在数字代理公司 10up 工作,我是我们开源团队的一员。我们构建了一些热门网站,例如 FiveThirtyEight,拥有最佳可能的 AMP 体验至关重要。然而,让 FiveThirtyEight 的 AMP 版本与该网站的响应式移动体验保持一致具有挑战性,部分原因是 AMP 中不支持高级功能。

其中一个不受支持的功能是 MathML,这是在网络上显示数学公式的标准。为了避免笨拙的解决方法(amp-iframe)并改进我们对公式的展示,我提出了一种本机 `amp-mathml` 组件,它可以在行内显示公式。为开源项目做出改进“上游”贡献(尤其是在我们在现实世界项目中遇到摩擦时)是 10up 的核心价值,并且对网络的健康至关重要。我预计我可以利用与在响应式网站上使用的相同的开源 MathJax 库来实现 AMP。贡献此组件将加深我对 AMP 内部结构的理解,同时改进客户端网站并在任何 AMP 页面上启用开放的 MathML 标准。三赢!

我首先在 amphtml 存储库打开了一个问题,描述了 MathML 并提出了一个本机 `amp-mathml` 组件。AMP 团队的 Justin Ridgewell 立即对该问题做出了回应,并要求 Ali Ghassemi 跟踪它。我主动提出帮助编写代码,并收到了热情的回应,鼓励我并向我保证团队将随时在 GitHub 和 Slack 上回答任何问题。

这番热情的欢迎给了我信心,让我决定深入了解,但入门还是让我望而生畏。与我参与的其他项目相比,构建工具和编码标准截然不同,而且设置需要重新配置编辑器并重新训练反射。要在我的系统上运行单元测试,我需要追踪并安装一些缺失的依赖项。

幸运的是,AMP 的项目文档非常全面,而且 Ali 指导我完成了实施,并向我指出了项目中现有的类似示例。我已经知道如何使用 JavaScript 用 MathJax 渲染公式——我的挑战在于构建一个运行此代码并在内联中显示它的 AMP 组件。

经过几天的努力,我构建了一个概念验证,并打开了 一个拉取请求。随着我在团队的帮助下完善方法并编写文档,真正的乐趣开始了。团队的积极参与帮助该过程快速推进。令人惊讶的是,拉取请求在一周后合并,而今天 amp-mathml 已在野外发布。FiveThirtyEight 已经 开始使用新的原生实现

从打开问题到合并我的拉取请求,我收到的支持和鼓励给我留下了深刻的印象。当我推动迭代时,Ali 和 honeybadgerdontcare 定期审查并对拉取请求提出详尽的建议。他们在整个过程中的参与让我和我的工作备受重视,并帮助我保持动力,继续致力于该功能。

将 MathML 添加到 AMP 让我回想起为什么我在为开源项目做贡献时会感到如此快乐和职业成长。我对 AMP 的内部有了更深入的了解,而且我受到了该项目社区的热烈欢迎。我对自己的贡献感到自豪,并且在看到它的成功后,我已准备好迎接新的挑战!

作者:Adam Silverstein,10up 的首席网络工程师,AMP 项目贡献者