Do you know MDN APIs?というクイズ?アプリを作りました。 次のURLから実際に試せます。

• https://mdn-browser-compat-data-learning-level.netlify.com/

MDN Web Docs(MDN)に掲載されているHTTP、HTML、CSS、JavaScript、MathML、SVG、WebDriver、WebExtensions、XPath、XSLTのAPIを知っているかをYES or NOでひらすら答えるだけのアプリです。

知っている(YES)なら←キーを、知らない(NO)なら→キーを押していく耐久アプリです。

実際にやると数時間かかるので、真面目にやる必要がないジョークアプリみたいなものです。

作った経緯

このアプリはJSer.info 400回記念イベントで、ウェブやJavaScriptなどの範囲は膨大であるため「すべてのことを知っている人はいない」ということを表現するために書いたアプリです。

実際に自分でやってみても、MDN全体で知っているものは63%ぐらいで、40%弱は見たこともないようなAPIがありました。(なんども書きますが数時間かかるので、気軽にやらないほうがいいです。)

Do you know MDN APIs?
All:5347/8502(63%)
API:2876/5138(56%)
CSS:812/952(85%)
HTML:569/595(96%)
HTTP:175/178(98%)
JavaScript:804/807(100%)
MathML:34/176(19%)
SVG:33/595(6%)
WebDriver:38/54(70%)
WebExtensions:1/1(100%)
XPath:1/1(100%)XSLT:4/5(80%) https://t.co/Sy42ktLI1s pic.twitter.com/w1bxmp4Nz8

— azu (@azu_re) September 18, 2018

このアプリはnuxt.jsで書かれていて、MDNのデータはmdn-browser-compat-dataという公式のnpmモジュールから取得しています。

mdn-browser-compat-dataにはMDNに掲載されているブラウザの互換Tableのデータが入ってるので遊んでみると面白いかもしれません。

• MDN browser compatibility data: Taking the guesswork out of web compatibility - Mozilla Hacks - the Web developer blog

Nuxt.jsでこのデータを含めたページとしてgenerateして作成しています。(静的サイトみたいな感じ)

• サイト: Do you know MDN APIs?
• リポジトリ: azu/mdn-browser-compat-data-learning-level: Test your learning level by MDN APIs