Done in November

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

• Shipped monthly MDN Payments
• Converted from Font Awesome to SVG
• Added browser names to compatibility tables
• Welcomed David Flanagan
• Shipped tweaks and fixes by merging 248 pull requests, including 35 pull requests from 30 new contributors.

Here’s the plan for December:

• Meet in Orlando

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.

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.

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).

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:

• 74 mozilla/kuma PRs
• 59 mdn/browser-compat-data PRs
• 34 mdn/kumascript PRs
• 21 mdn/interactive-examples PRs
• 19 mdn/infra PRs
• 12 mdn/bob PRs
• 11 mdn/data PRs
• 3 mdn/dom-examples PRs
• 2 mdn/django-locallibrary-tutorial PRs
• 2 mdn/web-speech-api PRs
• 2 mdn/stumptown-experiment PRs
• 2 mdn/short-descriptions PRs
• 1 mdn/fetch-examples PR
• 1 mdn/web-components-examples PR
• 1 mdn/learning-area PR
• 1 mdn/simple-web-worker PR
• 1 mdn/crossbrowser-testing-lab PR
• 1 mdn/css-examples PR
• 1 mdn/imsc PR

This includes some important changes and fixes:

• Add ARIA roles to notes and warning boxes inside CKEditor (Kuma PR 5069), from Schalk Neethling.
• More migration from Python 2 to Python 2/3 (Kuma PR 5071), from Anthony Maton.
• Prefer .blockIndicator for styling note and warning boxes (Kuma PR 5079), from ExE Boss.
• Improve functional tests (Kuma PR 5143), from Ryan Johnson.
• Fix deployments by fixing issue with the Jenkins build step (Interactive Examples PR 1229), from Ryan Johnson.
• Enforce CSP in staging (infra PR 157), from me.

35 pull requests were from first-time contributors:

• Support sticky table of contents on Safari (Kuma PR 5113), from Anthony Ricaud.
• Upgrade clean-css to version 4.x (PR 5135), and Stop adding the SEO root title to all document titles (PR 5142), to Kuma from David Flanagan.
• Add intrinsicsize to HTML Media elements (img, video) (PR 2979), from ZaneHannanAU (first contribution to BCD).
• Update browser compatibility for rest properties in objects (BCD PR 3038), from FichteFoll.
• Update insertRule optional index compatibility for IE and FF (BCD PR 3039), from Tim.
• Add compatibility for FullScreen API on IE11 (BCD PR 3040), from CntChen.
• Fix tag escaping in Edge note for FileSystem API (BCD PR 3043), from Ryusei YAMAGUCHI.
• Add object-fit and object-position Safari Support Details (BCD PR 3045), from Holt Johnson.
• Add support data for the signal feature from the AbortController API (PR 3048), from Konstantin Rouda (first contribution to BCD).
• Update Firefox compatibility for Window.event (BCD PR 3057), from Matthieu Riegler.
• Update aspect-ratio for Safari on iOS (BCD PR 3066), from Eric Celeste.
• Add and rename image directives of Feature Policy (BCD PR 3095), from Jason Chase.
• Add support for <meter> in iOS Safari 10.3 (BCD PR 3109), from Sven Wolfermann.
• Update “Tracking Preference Expression (DNT)” Editor’s draft URL (KumaScript PR 805), from Vivien Lacourba.
• Change WebDriver to Living specification (PR 930), from Andreas Tolfsen (first contribution to KumaScript).
• Add Spanish support to Glossary macro (KumaScript PR 968), from Joaquín Serna.
• Update French string in SeeCompatTable (KumaScript PR 975), from lp177.
• Convert <audio> example to valid and more semantic HTML (PR 1236), from Karl Stolley (first contribution to Interactive Examples).
• Add grid-area label indicators to div content (Interactive Examples PR 1248), from Liz Lawley.
• Fix -webkit-overflow-scrolling inheritance (Data PR 331), from Timothy Liang.
• Add chroma keying example (PR 29), Add web crypto examples (PR 30), and Remove web crypto examples (PR 31), from wbamberg (first contributions to dom-examples).
• Fix indenting of display_genre.short_description = 'Genre' (django-locallibrary-tutorial PR 33), from AlekseiMarinichenko.
• Convert speechResult to lowercase to fix phrase matching (web-speech-api PR 29), from Hartmut Bohnacker.
• In the synthesis demo, list the voices into alphabetical order (ignoring case) (web-speech-api PR 30), from Chris Chittleborough.
• Add recipes (PR 1), and Add CSS property transform (PR 3), from wbamberg (first contributions to stumptown-experiment).
• Add error handling to multiple fetch examples (fetch-examples PR 13), from T.J. Crowder.
• Simplify editable-list example (web-components-examples PR 13), from liuxuewei.
• Add auto to flex to match Firefox’s wrapping in Safari and Chrome (learning-area PR 108), from stefsulzer.
• Vary console messages to distinguish between handlers (simple-web-worker PR 10), from Bharath Bhushan Lohray.
• Update README to reference MDN docs (crossbrowser-testing-lab PR 1), from James Thompson.
• Add grid wrapper example to CSS Layout Cookbook (css-examples PR 12), from Michelle Barker.

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!