yahoo api yql + caniuse / dark (es6)

by denvdmj

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/styles/pojoaque.min.css">
<p><a href="http://jsfiddle.net/DenVdmj/wLuewgvx/embedded/result,js,css,html/dark/?fontColor=bbb&menuColor=3e2f1c&accentColor=ff8&bodyColor=221a0f" target="_blank">View this fiddle</a></p>

<pre><code></code></pre>

<p><a href="http://downornotworking.com/yahooapis.com/">Is yahooapis.com down or not working?</a></p>

<p><a href="http://notopening.com/site/yahooapis.com.html">
YahooAPIs.com not working, YahooAPIs down right now? 
Check here YahooAPIs.com is down or up.</a></p>

<p><a href="http://www.websitenotworking.com/yahooapis.com">Yahooapis website not working, is it down for everyone or just me?</a></p>
<!--
just for fun: add highlighting for json in pre
https://cdnjs.com/libraries/highlight.js/
https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js
-->

CSS

@import url(https://be5invis.github.io/Iosevka/fonts.css);

body {
 color: #fff;
}
a {
  color: #c2b99a;
  text-decoration: none;
  padding-bottom: 2px;
}
a[href] {
  box-shadow: inset 0 -1px 0 0 #8a7c53;
}
a[href]:hover {
  color: #d7d0bb;
  box-shadow: inset 0 -1px 0 0 #cac1a6;
  transition: box-shadow .1s ease-in, color .1s ease-in;
}

body, pre, code {
  font: 14px/1.5 'Condensed-Coding', 'IosevkaWEB', monospace;
}
.hljs {
  display: block;
  overflow-x: visible !important;
  padding: 0.5em;
}
@font-face {
  font-family: 'Condensed-Coding';
  font-style: normal;
  font-weight: 400;
  src: 
    url(https://cdn.rawgit.com/frantisek-sodomka-gomorrka/fonts/3063e30b/condensed-coding.r-webfont.woff2?raw=true) format('woff2'),
    url(https://cdn.rawgit.com/frantisek-sodomka-gomorrka/fonts/3063e30b/condensed-coding.r-webfont.woff?raw=true) format('woff'),
    url(https://cdn.rawgit.com/frantisek-sodomka-gomorrka/fonts/3063e30b/condensed-coding.r-webfont.ttf?raw=true) format('truetype');
}

JavaScript

//
// https://developer.yahoo.com/yql/console/
// https://developer.yahoo.com/yql/guide/json_to_json.html
//


const yql = ({
  get: (query, cb) => {
    fetch(`https://query.yahooapis.com/v1/public/yql?q=${query}&format=json`)
      .then(r => r.json())
      .then(cb);
  }
});

const caniuse = (feature, callback) => {
  const baseurl = `https://raw.github.com/Fyrd/caniuse/master/features-json/`;
  const yqlurl = `select * from json where url = "${baseurl}${feature}.json"`;
  yql.get(yqlurl, r => {
    try {
      callback(r.query.results, r);
    } catch (err) {
      console.error('Request failure: %s\n%O\n%O', err, err, r.query);
      console.info(yqlurl);
    }
  });
};

caniuse('pointer-events', (data, response) => {
	console.log(response);
  console.log(data);
  const node = document.querySelector('pre > code');
  node.textContent = JSON.stringify(data, null, 2);
  hljs.highlightBlock(node, hljs.tabReplace, false, true);
  document.body.style.backgroundColor = getComputedStyle(node).backgroundColor;
});