7 月 23 日,MDN Web 文档迎来了 15 周岁的生日。从 Netscape DevEdge 的灰烬中崛起,MDN 已经成长为当今最受尊敬的 Web 平台文档网站之一。我们的受欢迎程度不断提高,几乎每天都有新的内容和功能出现。
在我们 10 岁生日的时候,我们举办了类似的庆祝活动,谈论了 MDN Web 文档的起源、历史以及我们迄今为止取得的成就。如果您想了解更多,请查看 MDN 十周年!
在过去的五年里,我们取得了更大的进步。如今,我们可以自豪地宣称每月有大约 1500 万次浏览量,拥有一个全面的 浏览器兼容性数据库,一个活跃的初学者学习社区,可编辑的交互式示例以及许多其他在 2015 年不存在的激动人心的功能。这是一个值得庆祝的周年纪念!
在本文中,我们将介绍 15 个部分,重点介绍我们在过去五年中取得的最重大成就。请继续阅读并享受,并在评论区告诉我们 MDN 对您意味着什么。
1. 我们有一个 MDN Web 文档周边商店
今年早些时候推出的 MDN Web 文档商店 是您表达对 Web 标准文档的支持并获得 MDN Web 文档商品的最佳场所。无论您是喜欢衣服、背包,还是其他带有您最喜欢的恐龙头或 MDN Web 文档徽标的配件,我们都为您准备了合适的商品。
而且,在有限的时间内,您可以购买 特殊的 15 周年纪念设计。
2. MDN 的受众群体前所未有地增长
2015 年,MDN 每月为 450 万用户提供服务。一年后,我们推出了一个产品策略,旨在更好地为 Web 开发人员提供服务并扩大 MDN 的覆盖范围。我们显著提高了网站的性能。仅在过去两年中,MDN 上最慢的 90% 百分位数的页面加载时间已经从 5 秒缩短到 3.5 秒。
我们修复了许多导致 MDN 结果在搜索引擎中难以显示的问题,从删除垃圾信息到从索引中删除数十万个页面。我们倾听用户的意见,以解决 MDN 上未得到充分服务的用户群体:行动导向的开发人员,那些喜欢立即获得可操作信息的人。您可以在下面阅读我们为更好地服务这些用户而进行的一些具体更改。
在过去的三年中,我们新增了超过 3000 篇文章,进行了 260000 次文章编辑,以及这里提到的所有其他优点,MDN 每年都以两位数的百分比增长——自 2015 年以来。今天,MDN 每月为 1500 多万 Web 开发人员提供服务。而且,我们比以往任何时候都更出色地为他们提供服务。
3. 满意度保证
四年前,当我们开始追踪 MDN Web 文档上的任务完成率和满意度时,我们激动地发现,超过 78% 的 MDN 用户对 MDN 满意或非常满意,87% 的 MDN 用户报告他们能够完成将他们带到该网站的任务。
从那时起,我们的目标是在仍然保持这些满意度和任务完成率水平的同时,覆盖更广泛的开发人员受众。今天,尽管我们的受众群体规模翻了三倍,但对 MDN 满意或非常满意的用户比例已上升至 80%。任务完成率已上升到惊人的 92%。
4. 学习区域:MDN 变得对初学者友好
大约在 2015 年年中,编写团队开始根据用户的反馈采取行动,他们认为 MDN 对初学者并不友好。我们从新手 Web 开发人员那里听说,MDN 被推荐为一个很好的文档来源。但是,当他们去查看该网站时,他们发现它对于他们的需求来说太高级了。
为了应对这一反馈,我们创建了 学习 Web 开发 部分,非正式地称为“学习区域”。该区域最初涵盖了各种初学者主题,从您需要的工具以及如何在 Web 上获取内容,到 Web 语言(如 HTML、CSS 和 JavaScript)的基本知识。Web 入门 是第一个发布的完整学习模块。它为即将到来的内容铺平了道路。
从简单的开始,学习 Web 开发已经发展到超过 330 篇文章,涵盖了有抱负的 Web 开发人员所需的所有基本内容。我们每月提供超过 300 万次页面浏览量(约占所有每月 MDN 浏览量的 10%)。您会在我们的 讨论论坛 上找到一个活跃的学习者社区。
5. 前端开发人员学习路径
到 2019 年,学习区域发展良好,但我们觉得还缺少了一些东西。对于客户端 JavaScript 框架和结构化学习路径的培训材料存在巨大需求。认真的学生倾向于带着目标学习,例如成为一名前端开发人员。
接下来发生了什么
- 为了准确了解要涵盖的内容,我们进行了一些研究。这最终导致发布了 客户端框架简介 和 了解客户端 Web 开发工具 模块,这两个模块已经获得了很好的评价。我们现在提供有关 React、Ember 和 Vue 的入门材料,未来将提供更多框架文档。总的来说,我们为初学者提供了有关可用工具的概述,如何应用这些工具以及它们与他们已知内容的关系。
- 我们将迄今发布的内容整理到 前端开发人员学习路径 中,这是一个包含成为前端 Web 开发人员所需所有知识的意见路径,以及时间估计、建议的学习顺序等。
有些人对 MDN 的框架导向内容表示担忧。MDN 应该是一个中立的文档网站,专注于纯粹的标准!我们理解这种担忧。然而,学习区域的创建是基于非常务实的角度。如今的 Web 开发工作需要了解框架和其他现代工具,假装这些工具不存在对资源(及其用户)来说都是不好的。
相反,我们的目标是取得平衡,以中立观察者的身份提供框架覆盖范围,对何时使用框架以及何时不使用框架提出意见,并在扎实的标准和最佳实践基础上介绍它们。我们向您展示如何在遵守可访问性等基本最佳实践的同时使用框架。
6. 将交互式示例引入参考页面
2016 年 MDN 产品策略 突出了在我们的参考文档中添加交互式示例的机会。从用户反馈中,我们知道用户重视简单代码示例的易用性,可以复制、粘贴和进行实验。这是他们非常重视的文档资源功能,我们当然不会让他们失望。
因此,在 2017 年到 2019 年之间,一个由编写人员和开发人员组成的团队设计并完善了交互式示例的编辑器。他们为我们的 JavaScript、CSS 和 HTML 参考页面编写了数百个示例,您现在可以在这些区域的大多数参考页面的顶部找到它们。查看 将交互式示例引入 MDN 以了解更多详细信息。
该系统最近最显著的更改来自 @ikarasz 的贡献。我们现在 对我们的 JavaScript 示例运行 ESLint,因此我们可以保证一致的代码风格。
将来,我们希望为一些 Web API 参考文档 添加交互式示例。
7. MDN 彻底改变了浏览器兼容性数据
2017 年,该团队启动了一个项目,以彻底重新设计 MDN Web 文档的兼容性数据表。维基百科的手动维护的兼容性部分大约有 6000 页,这些部分在质量、样式和完整性方面差异很大。
鉴于最大的 Web 开发人员痛点是处理浏览器兼容性和互操作性,我们的兼容性部分需要变得更加可靠。
在 2017 年和 2018 年期间,MDN 社区清理了数据。在许多冲刺过程中,例如 在 MDN 上进行黑客攻击:使用浏览器兼容性数据构建有用的工具,兼容性信息从维基百科表迁移到 GitHub 存储库中的结构化 JSON 格式。
在项目进行到一半的时候,我们看到了这项工作的初步成果。阅读 MDN 浏览器兼容性数据:消除 Web 兼容性方面的猜测,了解更多关于我们在 2018 年初所取得成就的详细信息。
直到 2018 年底,我们才完成了迁移工作。如今,超过 8000 个英文页面显示来自我们 BCD 仓库 的兼容性数据——这是一个所有主要浏览器供应商共同维护兼容性信息的地方。
随着时间的推移,其他项目也开始对使用这些数据感兴趣。MDN 兼容性数据现在除了在 VS Code、webhint 等工具中显示外,还在其他工具中显示。甚至关于兼容性信息的首要网站——caniuse.com——也已切换到使用 MDN 兼容性数据,如 2019 年宣布的那样。(阅读 Caniuse 和 MDN 兼容性数据协作。)
很快,关于 CSS 的兼容性信息也将出现在 Firefox 开发者工具中,为 Web 开发人员提供更多关于潜在兼容性问题的洞察。此功能目前处于 Firefox 开发者版 的测试阶段。
8. WebExtensions 文档
2015 年,Mozilla 宣布计划引入一个 新的浏览器扩展系统,最终将取代现有的扩展系统。该系统基于 Chrome 的扩展 API,并且与之高度兼容。在接下来的几年里,随着附加组件团队致力于 WebExtensions API,我们记录了他们的工作,编写了数百页的 API 参考文档、指南、教程和操作说明页面。(请参阅 浏览器扩展文档主页,开始探索。)
我们还编写了 数十个示例扩展,说明了如何使用这些 API。然后我们对一种新的方法进行了原型设计,将浏览器兼容性数据表示为 JSON,这使我们能够发布一个 单页面,显示 API 的完整兼容性状态。事实上,这项工作激发了浏览器兼容性数据项目的灵感,并为其奠定了基础(参见上文)。
9. MDN 产品咨询委员会
在 MDN Web 文档中,我们一直与标准机构、浏览器供应商和其他利益相关方进行合作并分享目标。大约三年前,我们开始通过 MDN 产品咨询委员会 (PAB) 使这种合作更加正式,这是一个 来自各个组织的个人和代表组,他们定期会面,讨论与 MDN 相关的议题和项目。这有助于我们更早地发现问题,优先考虑内容创建,并找到合作者来加快我们的工作。

PAB 在 2019 年初的样子。从左到右——Chris Mills(Mozilla)、Kadir Topal(Mozilla)、Patrick Kettner(Microsoft)、Dominique Hazael-Massieux(W3C)、Meggin Kearney(Google)、Dan Applequist(Samsung)、Jory Burson(Bocoup)、Ali Spivak(Mozilla)和 Robert Nyman(Google)。
在正常情况下,我们倾向于每年举行约 4 次会议——包括面对面会议和虚拟会议。今年,由于 2020 年的疫情,我们开始举行更短、更定期的虚拟会议。如果您有兴趣了解我们的讨论,可以找到 PAB 会议记录在 GitHub 上。
10. JavaScript 错误消息
通常,当您搜索 API 或需要帮助解决的问题时,MDN Web 文档都在那里。MDN 的大部分流量来自搜索引擎。2016 年,我们考虑了让我们的内容更接近您的方式。当 JavaScript 错误出现在控制台中时,我们知道您需要帮助,因此我们在控制台中创建了 [了解更多] 链接,指向 MDN 上的 JavaScript 错误文档。这些提供了更多信息,以帮助您调试代码。您可以在 帮助 Web 开发人员解决 JavaScript 错误 中阅读有关此工作的更多信息。
我们还提供了其他错误类型的错误文档,例如 CORS 错误。
11. 我们全新的移动布局
有一段时间,MDN Web 文档的布局具有一定的响应性,但移动设备上的体验并不令人满意。跳转菜单和面包屑导航占用了太多空间,结果可读性很差。
在 2020 年,我们的开发团队决定对此做点什么,结果好多了。跳转菜单现在默认情况下处于折叠状态,只有在您需要时才会展开。面包屑导航只显示“上一页”面包屑,而不是整个导航。
请在您的移动设备上查看 MDN,并告诉我们您的想法!请注意,这只是 MDN Web 文档推出完整设计系统的第一步,旨在加强其 UI 元素的一致性和质量。
12. HTTP 文档
2016 年,我们起草了一项计划,创建 HTTP 文档。传统上,MDN 非常关注客户端,但最近,开发人员被要求理解新的网络 API(如 Fetch)以及越来越多的 HTTP 标头。此外,HTTP 是 Web 的另一个关键组成部分。因此,我们决定创建一个全新的文档部分来涵盖它。
如今,MDN 文档化了 超过 100 个 HTTP 标头,提供了关于 CSP 和 CORS 的深入信息,并帮助 Web 开发人员与 Mozilla Observatory 一起保护他们的网站。
13. 向我们的社区致敬
我们不提我们在本文中的杰出贡献者社区,就失职了。我们的志愿者社区成就了今天的我们。多年来,他们为 MDN 创建了比我们付费员工多得多的内容,积极参与新的计划(如交互式示例和浏览器兼容性数据),在各处推广 MDN Web 文档,并使该网站变得更加多样化、更有趣、更明亮。
为了让您了解我们社区的重要性,请查看 2020 年 Mozilla 和反抗军联盟报告,其中显示 MDN 是 Mozilla 中最大的社区集群,仅次于 Firefox。
我们还想特别感谢浏览器兼容性数据仓库,它是整个 Mozilla GitHub 中最活跃的 GitHub 仓库之一。
我们社区成员众多,无法逐一感谢,但我们想向大家表达最诚挚的敬意和衷心的感谢!您知道自己是谁。
14. MDN Web 文档基础设施现代化
难以置信的是,在 2016 年初,MDN Web 文档是从我们旧的圣克拉拉数据中心的一组固定服务器上提供的。这些服务器由一个独立的团队管理,必须提前协调修改。没有办法快速增加服务器容量以满足不断增长的需求。新代码的部署总是会带来过度的焦虑,基础设施相关的问题通常难以诊断,需要多个团队的工程师参与。
快进到今天,情况发生了很大的变化。我们通过一个由运行在 AWS EKS Kubernetes 集群中的多个服务支持的 CDN 提供 MDN——集群和 pod 都支持自动扩展。这是一次巨大的进步。我们不仅可以自动增加容量以满足不断增长的需求,还可以更可靠地部署新代码,而且我们还可以自己管理基础设施,公开透明地进行。您今天可以访问 MDN Infra 仓库。您会看到基础设施本身被定义为一组文件,并且像 GitHub 上任何其他公共仓库一样公开演变。
这项转型是一项巨大的、复杂的努力,涉及许多合作者,并且所有这些都在没有重大服务中断的情况下完成。我们已经为 MDN 打下了坚实的基础,但我们不会停滞不前。我们将继续发展基础,以满足更光明的未来的需求!
15. 为 Web DNA 让路
2019 年,我们一直在思考如何更好地了解 Web 开发人员的问题,以便我们的内容能够更好地满足他们的需求。最后,我们决定投资一项深入调查,以突出显示 Web 开发人员的痛点,并与 MDN PAB 的其他成员(参见上文)合作。这项工作被称为 Web 开发人员需求评估(或 Web DNA)。
调查结果被广泛宣传(下载 2019 年 Web DNA 报告 (PDF)),并证明了其受欢迎程度和影响力。MDN Web 文档以及许多其他项目和组织都利用这些结果来帮助制定未来的战略。
好消息是,我们已经获得了资金,将在 2020 年进行新的 Web DNA!今年晚些时候,我们将发布更新的调查结果,敬请关注。
下一步
这就是到目前为止的故事,但它并没有结束。MDN Web 文档将继续改进。我们下一步的主要行动是进行重大平台和内容更新,以简化我们的架构,使 MDN 的使用和贡献更快、更有效。这还包括将我们的内容存储重新设计为 GitHub 上的结构化数据。这种方法比我们当前在 MySQL 数据库中的存储具有许多优势——包括更轻松的大规模更新和 linting、更好的一致性、改进的社区和贡献工作流程等等。
希望您喜欢阅读。请继续关注更多 Web 文档的精彩内容。请不要忘记在下面分享您的想法和反馈。
关于 Chris Mills
Chris Mills 是 Mozilla 的高级技术作家,负责撰写有关开放式 Web 应用程序、HTML/CSS/JavaScript、A11y、WebAssembly 等等的文档和演示。他喜欢摆弄 Web 技术,偶尔也会在会议和大学做技术演讲。他以前曾在 Opera 和 W3C 工作,喜欢演奏重金属鼓和喝好啤酒。他住在英国曼彻斯特附近,与他的好妻子和三个可爱的女儿一起生活。
4 条评论