A new year, a new MDN

• If you’ve accessed the MDN website today, you probably noticed that it looks quite different. We hope it’s a good different. Let us explain!

• 如果你今天访问了MDN网站,您可能会发现这里已经有了翻天覆地的变化. 希望这种变化你会喜欢.

• MDN has undergone many changes in its sixteen-year history from its early beginning as a wiki to the recent migration of a static site backed by GitHub.

• 在过去的16年里,MDN 经历了许多变化. 从最开始作为一个wiki到如今受Github 支持的静态网站的迁移.

• During that time MDN grew organically, with over 45,000 contributors and numerous developers and designers. It’s no surprise that the user experience became somewhat inconsistent throughout the website.

• 在那段时间,MDN有条不紊的发展壮大, 拥有超过45000的贡献者和非常多的开发者设计者;毫无疑问,如今整个站点的用户体验变样了.

• In mid-2021 we started to think about modernizing MDN’s design, to create a clean and inviting website that makes navigating our 44,000 articles as easy as possible.

• 2021的年中, 我们开始考虑使MDN的设计更现代化，以创建一个干净和诱人的网站，让大家浏览我们的文章(共44000)尽可能容易。

• We wanted to create a more holistic experience for our users, with an emphasis on improved navigability and a universal look and feel across all our pages.

• 我们想为我们的用户创造一个更全面的体验，重点是改进导航和所有页面的通用外观和感觉。

---

这里摘了一下MDN上作者简介

Hermina Condei Head of Product CE, Marketing Operations, Mozilla

Hermina Condei leads product management and engineering for MDN Web Docs and platform engineering for SUMO, at Mozilla. Over the past years, she's driven company-wide projects focused on access and identity management for employees and community. She also led the product team in the Open Innovation Group**,** with a focus on managing internal and external stakeholders for the team's portfolio of projects.

---

A new Homepage, focused on community

• The MDN community is the reason our content can be counted on to be both high quality and trustworthy.

• MDN社区的存在是我们的内容既高质量又值得信赖的原因。

• MDN content is ==scrutinized==, discussed, and yes, in some cases argued about.

• 社区会对MDN的文章进行审查, 讨论, 肯定,有时还会为之争执.

• Anyone can contribute to MDN, either by writing content, suggesting changes or fixing bugs.

• 任何人都可以对MDN作出贡献，无论是通过编写内容，建议更改或修复bug.

• We wanted to acknowledge and celebrate our awesome community and our homepage is the perfect place to do so.

• 我们想要为我们出色的社区表示感谢和庆祝,而我们的主页就是这样一个完美的地方。

• The new homepage was built with a focus on the core concepts of community and simplicity.

• 新主页的核心概念是社区性和简洁性。

• We made an improved search a central element on the page, while also showing users a selection of the newest and most-read articles.

• 我们将改进后的搜索作为页面的中心元素，同时让用户选择看最新文章还是最多阅读的文章.

• We will also show the most recent contributions to our GitHub content ==repo== and added a contributor spotlight where we will highlight MDN contributors.

• 我们也会显示对GitHub内容仓库的最新贡献,并且添加一个贡献者聚光灯,在这个位置我们高亮了MDN贡献者.

词汇

Repository 简称repo 理解为仓库.

scrutinize 审查;仔细查看

Redesigned article pages for improved navigation

• It’s been years five of them, in fact since MDN’s core content presentation has received a comprehensive design review.

• 事实上，自从MDN的核心内容呈现方式接受了全面的设计评估以来，已经有五年了.

• In those years, MDN’s content has evolved and changed, with new ways of structuring content, new ways to build and write docs, and new contributors.

• 在那些年里，MDN的内容发生了演变，有了新的内容结构,和新的方法去构建和编写文档,以及新的贡献者。

• Over time, the documentation’s look and feel had become increasingly disconnected from the way it’s read and written.

• 随着时间的推移，文档的外观和感觉与它的读写方式越来越脱节。

• While you won’t see a dizzying reinvention of what documentation is, you’ll find that most visual elements on MDN did get love and attention, creating a more coherent view of our docs.

• 虽然你不会看到令人眼花缭乱的新MDN，但你会发现MDN上的大多数视觉元素确实得到了关注，我们在文档内创造了一个更连贯的视图.

This redesign gives MDN content its due, featuring:

• More consistent colors and theming

• 主题颜色一致

• Better ==signposting== of major sections, such as HTML, CSS, and JavaScript

• 不同部分的明确路标(划分更明确~)

• Improved accessibility, such as increased contrast

• 改进了访问性, 增强了对比度

• Added dark mode toggle for easy switching between modes

• 增加了黑暗模式.

• We’re especially proud of some subtle improvements and conveniences. For example, in-page navigation is always in view to show you where you are in the page as you scroll:

• 我们还添加了一些小改动,比如当前浏览位置缩略图.(文章右上角)

• We’re also revisiting the way browser compatibility data appears, with better at-a-glance browser support. So you don’t have to keep version numbers in your head, we’ve put more emphasis on yes and no iconography for browser capabilities, with the option to view the detailed information you’ve come to expect from our browser compatibility data.

• 我们把浏览器兼容数据呈现方式改变了,你可以把更多的重点放在浏览功能的'是'or '否'图标上, 有选项来看更详情的信息.(API支持,github.com/mdn/browser-compat-data)

• We think you should check it out. And we’re not stopping there. The work we’ve done is far-reaching and there are still many opportunities to polish and improve on the design we’re shipping.

• 我们觉得你应该去看看。我们不会就此止步。我们所做的工作意义深远，我们仍有许多机会去完善和完善我们即将发布的设计。

A new logo, chosen by our community

• As we began working on both the redesign and expanding MDN beyond WebDocs we realized it was also time for a new logo. We wanted a modern and easily customizable logo that would represent what MDN is today while also strengthening its identity and making it consistent with Mozilla’s current brand.

• 当我们开始重新设计MDN的时候并且将其扩展到Webdoc以外时(这里指的是具备了文档站点所不具备的,比如学习路线等)我们意识到需要新的logo了.我们想要一个现代的并且易于定制的logo(也就是简单..事后发现是真的简单),既能代表mdn的今天,又能加强他的辨识度,让他和Mozilla的品牌保持一致.

• We worked closely with branding specialist Luc Doucedame narrowed down our options to eight potential logos and put out a call to our community of users to help us choose and invited folks to vote on their favorite. We received over 10,000 votes in just three days and are happy to share with you “the MDN people’s choice.”

• 我们和品牌专家合作,将我们的选择范围缩小到8个潜在的标识,然后让我们的社区用户为最喜欢的标志投票.

• The winner was Option 4, an M monogram using underscore to convey the process of writing code. Many thanks to everyone who voted!

• 选项4胜出,感谢大家的投票.

What you can expect next with MDN

Bringing content to the places where you need it most

• In recent years, MDN content has grown more sophisticated for authors, such as moving from a wiki to Git and converting from HTML to Markdown. This has been a boon to contributors, who can use more powerful and familiar tools to create more structured and consistent content.

• 现在的贡献者,可以用md还可以用html,MDN也从wiki转换到了Git,这对贡献者很不错的.他们可以用自己想用的工具去构建.

• With better tools in place, we’re finally in a position to build more visible and systematic benefits to readers. For example, many of you probably navigate MDN via your favorite search engine, rather than MDN’s own site navigation. We get it. Historically, a wiki made large content architecture efforts impractical. But we’re now closer than ever to making site-wide improvements to structure and navigation.

• 有了更好的工具,我们就可以为读者带来更好的体验.例如,很多人想要用搜索引擎搜索到MDN文章内容,而不是必须在MDN搜索;我们收到了,如今的改变让这个可能成真

“

好猛啊...真的考虑这些点. 我解释一下:

比如知网论文这些,你直接在百度上是搜不到的, 你需要在知网里在进行进一步搜索;

MDN这样做也就是把自己的每个页面交给了搜索引擎去爬取.

”

• Looking forward, we have ambitious plans to take advantage of our new tools to explore improved navigation, generated standardization and support summarizes, and ==embedding== MDN documentation in the places where developers need it most: in their IDE, browser tools, and more.

• 我们在这些方面还可以提升, 搜索导航,标准化,和总结的支持; 未来甚至可以内嵌到开发者的IDE中

“

美好的想法,但是我目前也没什么想法怎么实现...我要是知道了..这些人早知道了..

”

Coming soon: MDN Plus

• MDN has built a reputation as a trusted and central resource for information about standards, codes, tools, and everything you need as a developer to create websites. In 2015, we explored ways to be more than a central resource through creating a Learning Area, with the aim of providing a useful ==counterpart== to the regular MDN reference and guide material.

• MDN值得信赖,它拥有你需要的一切,作为一个网站开发者.2015年MDN开始创建一个学习区域,而不仅仅是一个资源网站.提供一个日常开发的参考和指南

“

啧啧啧~

”

• In 2020, we added the first Front-end developer learning path way to it. We saw a lot of interest and engagement from users, the learning area currently being responsible for 10% of MDN’s monthly web traffic. This started us on a path to see what more we can do in this area for our community.
• 去年我们添加了前端学习路线,我们发现大多数流量都来自于此,大概10%左右.这让我们发现了一条新的道路,看看这这个方面我们还能为社区做什么吧.

“

感激~

”

• Last year we surveyed users and asked them what they wanted out of their MDN experience. The top requested features included notifications, article collections and an offline experience on MDN. The overall theme we saw was that users wanted to be able to organize MDN’s vast library in a way that worked for them.

• 我们调查用户都需要什么, 用户想要,推送功能,文章收藏,MDN离线版体验.我们总结了一下,用户想要定制化来组建自己的MDN.

“

这几个功能确实好啊~~~~但是网页版推送功能得打开网页端,还不如将好文章推送到微信~啧啧啧

有点小贪心,但是!美好的愿望,万一实现了呢.

”

• We are always looking for ways to meet our users’ needs whether it’s through MDN’s free web documentation or personalized features. In the coming months, we’ll be expanding MDN to include a premium subscription service based on the feedback we received from web developers who want to customize their MDN experience. Stay tuned for more information on MDN Plus.

• 接下来我们会继续满足用户的需求,无论是通过免费的网络文档或者是个性化的功能(个性化就要付费了哦),接下来的几个月我们继续扩展MDN,要推出MDN Plus了!

Thank you, MDN community

• We appreciate the thousands of people who voted for the new logo as well as everyone who participated in the early beta testing phase since we started this journey. Also, many thanks to our partners from the Open Web Docs, who gave us valuable feedback on the redesign and continue to make daily contributions to MDN content. Thanks to you all we could make this a reality and we will continue to invest in improving even further the experience on MDN.
• 感谢