Crack on MDN: Building useful equipment with browser compatibility data
From Friday, March 16 in order to Sunday, March 18, 2018, thirty-four people met in Mozilla’ ersus Paris office to work on enhancing MDN’ s Browser Compat Information . The amazing results included 221 pull demands that improved the standard of our data and created, prototyped, and improved tools and dashes.
People at the office during Hack on MDN Paris, france 2018 in the gorgeous Garnier ballroom.
Hack on MDN events
Hack on MDN evolved from the particular documentation sprints the MDN group organized between 2010 and 2013, which brought together a primary team of volunteers to write plus localize MDN content over a weekend break. In 2014, we expanded the particular scope of the sprints by welcoming people with different backgrounds; not just specialized writers and wordsmiths, but also people that like to code or have UX style skill.
The first 2 Hack on MDN events occurred in Paris, france in 2014 plus Berlin within 2015 . We took a break for some time but missed the events as well as the community spirit they embody. This particular Hack on MDN in Paris, france was the first of two planned with this year (the next will take place within the autumn). For March, we made a decision to bring together an emerging MDN local community and maximize productivity by concentrating on a single theme with a broad range: browser compatibility data.
The Hack on MDN file format is a combination of unconference and hackathon; participants pitch projects and invest in working on concrete tasks (rather compared to meetings or long discussions) that could be completed in three days or much less. People choose projects in which a team can make significant progress over a weekend break.
Browser Compatibility Information
The web platform is exclusive in that it aims to create a constant experience on top of different tools, web browsers or servers. You create your site once, and it works in every internet browser, regardless of device, OS, or device choice.
In an ever-evolving connected world, this is incredibly difficult to achieve, and browsers implement system at different paces and with various priorities. Even if they aim for exactly the same goals, it’ s unlikely that the new feature is implemented simply by all major actors at the same time. The actual level of support in each internet browser helps developers make informed choices about which technologies are older enough to use, and which to prevent (e. g. unstable, non-standard, or even obsolete ones).
MDN has collected this kind of browser suitability information for the last decade and we utilize it to improve our reference pages. Adding this info directly into MDN webpages has had its own drawbacks: it’ t been difficult to maintain, and next in order to impossible to reuse elsewhere. A couple of years ago, we decided to move these details into a machine-readable format so that it could be reused.
A typical Internet browser Compatibility Data (BCD) table because found on MDN Web docs.
Under Florian Scholz ‘ s lead, we are now migrating browser suitability data into a JSON database, and we are about 60 per cent done (including all of HTTP, CODE, JS, and even WebExtensions). We are spending so much time on getting all the Web APIs in it, as well as SVG, WebDriver, plus MathML information.
Simultaneously, we are experimenting with reusing compatibility info in new tools, some created internally and some externally. We distribute our data weekly in the form of a good npm deal that is guaranteed to remain up-to-date as MDN itself utilizes it. We are our own first client!
Our goal this season is to have 100% of the MDN compatibility info in the JSON data source, as well as to start reusing this information in tools beyond our in-line compatibility tables.
The particular 2018 Paris event
The level of interest around browser suitability data (BCD) and the sheer work left to do on it made it an all natural candidate for the theme of the 03 event. The BCD community upon Github is active and the occasion provided a great opportunity for contributors to satisfy in person.
When demoing, we weren’ capital t afraid to dig deep within the code.
Thirty-four people through different backgrounds and organisations collected in the splendid Mozilla Paris workplace: Mozilla employees (developers, writers, and also managers) from several different teams (MDN, Open Innovation, Web Compat, plus WebDriver/Marionette), volunteers, and representatives through Google, Samsung, Microsoft, and the W3C (both on-site and remote).
On the first morning, Florian Scholz presented BCD and everybody introduced themselves, so people were not really afraid to talk to each other during the occasion and got an overview of the abilities available in the room. After the project harrassing, people clustered into groups as well as the work began. It was interesting to view people interact with others who’ g either pitched an idea or experienced specific skills. In a quarter of the hour, everybody was already deep directly into hacking.
At the end of every afternoon, we gathered to demonstration the work that had been done. Saturday plus Sunday morning we also kept a set of lightning talks, where anybody could present anything, with the objective of opening our minds to ideas.
We completed on Sunday with a final group of demos, and the outcome was really amazing…
Outcomes
221 PRs were designed to our repository by the participants associated with Hack on MDN. So many tasks have been worked on that it is impossible to become exhaustive, but here are a few highlights.
Visualisation tools
Mozilla Tech Speaker and JavaScript hacker Istvan ‘ Flaki’ Szmozsanszky created a tool that will displays a compatibility table with no help of the server: it says the BCD file and constructs the table directly in the internet browser. This is a fundamental piece of code that will enable us to easily embed suitability tables everywhere, starting with our own draw requests on Github. Flaki proceeded to go further by coding a feature in order to edit the particular JSON in the page and generate a PR from this, as well as studying how to display right after between the current data and the brand new one in a visual way.
An example output associated with Flaki’ s tool, generating a nearby inline BCD table.
John Whitlock (from MDN’ h Dev team) and Anthony Maton worked on creating a robot for GitHub requests: they centered on the back-end groundwork that will allow simple code maintenance. They created a brand new repository and moved the object rendering code into plain JS.
Will Bamberg , Eduardo Bouç as , and Daniel Beck worked on a new macro displaying combination data in one desk, like all animation-* CSS qualities.
Data migration
The more data we have within our JSON format, the more accurate the particular MDN pages and tools utilizing it will be. We had just over 60% in our original data migrated before the occasion and made significant progress for the remaining 40% over the weekend.
Under the lead of Jé ré mie Patonnier through Mozilla, Maxime Lo Re and Sebastian Zartner migrated most of the SVG component data, and that of their attributes throughout the weekend. Chris Mills , Brian Ross and Bruno Bruet did the same with a lot of Internet APIs. The amount of data migrated much more or less equivalent to a quarter’ s worth of work and it is a significant step in our migration function. Well done!
Andreas Tolfsen , one of Mozilla’ s WebDriver specialists, worked, with the help of Philip Mills, to bring basic WebDriver browser compatibility information to our repository, along with start documenting WebDriver on MDN.
Data quality
Our data is not ideal: we have some data errors (usually this involves features marked as not really supported when they have been supported), lacking data (we have a way of tagging unknown data differently), and of course several real code errors.
Several projects were conducted to be able to improve the quality of our dataset.
Mark Dittmer through Google worked to bridge the particular Confluence tool with MDN. He or she created a tool, mdn-confluence that allows cross-checking of the information between both repositories.
Ada Rose Cannon and Peter O’ Shaughnessy from Samsung developed tool that produces an initial group of data for Samsung Internet , which brings this important cellular browser to our repository. What makes this particular dataset even more interesting is that it continues to be designed to be repurposed for any Chromium-based browser, so we may be able to include QQ or UC browser info within our repository one day.
Erika Doyle , Libby McCormick , plus Matt Wojciakowski through Microsoft participated remotely from the Seattle area and worked on some Edge-related data: updated EdgeHTML release dates and added Edge compat data to WebExtensions .
Scraping equipment
Several people labored on taking existing data, on MDN or elsewhere, and using it to create BCD JSON, totally or partly. These tools are valuable time-savers and can allow us to migrate information at a quicker pace.
Dominique Hazaë l-Massieux from your W3C worked on a tool that will takes a WebIDL as input plus generates the skeleton of our BCD. This is extremely useful for all new APIs that we will want to document, as we simply have to modify the values afterwards. Various PRs that Dominique submitted are already generated using this tool.
Kayce Basques from Google created a device, MDN Crawler , which takes an MDN page and reads the internet browser compatibility data from it. Even if not every the data can be read correctly (the manually crafted tables do not constantly follow the same structure), it is able to remove a lot of information that can be manually tweaked soon after. This is a big time saver for your migration. Kayce also published it as a glitch. me service (with instructions).
External equipment reusing the data
Eduardo Bouç as worked on improving their add-on, compat-report , that produces a visible compatibility report inside Firefox Dev Tools.
Screenshot of compat-report from Eduardo Bouç as.
Julien Gattelier fixed several problems with his device, compat-tester , adding support for global CODE attributes. He also added the contribute mode that lists features which are not in the browser compatibility dataset, allowing an user or potential factor to detect missing features!
Dennis Schubert through Mozilla’ s Web Compat group, along with Julien Gattelier and Kayce Basques, brainstormed about a new device reusing Julien’ s compat-tester device to produce a report about the state associated with web compatibility, by crawling substantial websites.
Other tasks
Kadir Topal created a dashboard enabling us in order to visualize the quality of our data plus measure improvements we are making.
Sort of output of the data quality dash.
What’ s next?
There is a lot of follow-up function to do: we need to review all the PRs and do some work to incorporate new prototypes and tools in to our codebase or workflow. This is a good problem to have!
Overall, we will continue to migrate the browser compat data and enhance its quality: the better the data is definitely, the better the tools using it – plus MDN Web docs itself – will be.
The most important results of this event is human: by coming together we created new bonds as well as the relationships between participants will ideally continue and grow, bringing additional awesomeness into the future of MDN Web Docs and the Browser Compatibility Data task .
Want to get included? Not sure where to begin? Visit the MDN community on Talk to learn about what we all do and how you can make MDN a lot more awesome with your contribution.
Jean-Yves is a program manager in the Programmer Outreach team at Mozilla. Earlier he was an MDN Specialized Writer specialized in Web platform technology (HTML, CSS, APIs), and for a long period the MDN Content Lead.
If you liked Crack on MDN: Building useful equipment with browser compatibility data by Jean-Yves Perrier Then you'll love Web Design Agency Miami
Related Posts
About The Author
