MDN Changelog for November 2018

Done in November

Here’s what happened in November to the code, data, and tools that support MDN Web Docs:

Here’s the plan for December:

Shipped monthly MDN payments

In September we launched MDN payments, giving MDN fans a new way to help MDN grow. On November 20th, we added the ability to schedule monthly payments.

A screenshot of the monthly payment banner, with $8/month selected.

Monthly payment banner on MDN

Potato London started work on this shortly after one-time payments launched. We kicked it off with a design meeting where we determined the features that could be delivered in 4 weeks. Potato and MDN worked closely to remove blockers, review code (in over 25 pull requests), and get it into the staging environment for testing. Thanks to everyone’s hard work, we launched a high-quality feature on schedule.

We’ve learned a lot from these payment experiments, and we’ll continue to find ways to maintain MDN’s growth in 2019.

Converted from Font Awesome to SVG

On November 6th, we deployed Schalk Neethling’s PR 5058, completing the transition from the FontAwesome webfont to inline SVG icons. There are a few icon and style changes, but the site should look the same to most users.

Different styles of notice banners with icons from MDN, showing the old Font Awesome banners on the left and the new SVG banners on the right

Banners with indicators before the change (left) and after converting to SVG

We had several reasons for this change in April, when Schalk started the project. The biggest gains were expected to be in performance and a simpler design. Over the year, we became aware that many content blockers prevent loading web fonts, and many users couldn’t see UIs that depended on icons. For example, the browser compatibility tables were unusable on mobile with Firefox Focus. This change fixes this issue.

We haven’t seen a significant performance improvement, although there may have been small improvements as this switch was rolled out over the year. This month, we explored some more radical changes, such as minimal styling and disabled JS, by shipping manually edited copies of wiki pages. These experiments will help us determine the highest impact changes for front-end performance, and provide insight into what areas to explore next.

Added browser names to compatibility tables

The new SVG icons are being used in the browser compatibility table. In the wider desktop view, we’ve added rotated browser labels (Kuma PR 5117 and KumaScript PR 997), so it is clearer which browser is which. We also launched a survey to ask visitors about their needs for compatibility data (Kuma PR 5133).

A screenshot of a compatibility table with rotated text labels and topped with a survey

The compatibility table for display has gotten even taller

The compatibility data continues to be released as an NPM package, and now a tagged release is also created, including the statistics and notable changes from the last release (BCD PR 3158).

Welcome David Flanagan

David Flanagan joined the MDN development team in November. David is the author of JavaScript: The Definitive Guide and several other books. He is a former Mozilla employee, and recently worked at Khan Academy. His skills and passions are a great fit for MDN’s mission, and we look forward to his help as we modernize and expand our tech stack. Welcome David!

Shipped tweaks and fixes

There were 248 PRs merged in November:

This includes some important changes and fixes:

35 pull requests were from first-time contributors:

Planned for December

Meet in Orlando

Twice a year, all of Mozilla comes together for an All-Hands meeting. This winter’s All-Hands is in Orlando, Florida. We were in Orlando in December 2015, when Florian was proposing moving KumaScript macros to GitHub and I was deploying the BrowserCompat API to beta users. A lot changes in three years!

Many of us at MDN will be taking well-deserved breaks after the All-Hands, and will come back refreshed for 2019. We hope you and yours have an enjoyable winter break!

About John Whitlock

John is a web developer working on the engine of MDN Web Docs

More articles by John Whitlock…