Defer loading until 3rd party assets load

_includes/2017/critical/critical.js

@@ -1 +1 @@
-!function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var t={};n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="",n(n.s=2)}([function(e,n){function t(e,n){var t=e.matches||e.matchesSelector||e.msMatchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||e.oMatchesSelector;if(t)return t.call(e,n);if(e.parentNode){for(var r=e.parentNode.querySelectorAll(n),o=r.length;o--;0)if(r[o]===e)return!0;return!1}}e.exports=t},function(e,n,t){function r(e,n){if(n){if(Array.isArray(n))return void o(n,function(n){r(e,n)});if(e.classList){var t=n.split(" ").filter(Boolean);o(t,function(n){e.classList.add(n)})}else e.className+=" "+n}}var o=t(4);e.exports=r},function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var o=t(3),i=r(o),u=t(1),a=r(u),c=document.querySelector("[data-js-main-body]");c&&((0,i.default)(c),(0,a.default)(c,"-wrapified"))},function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e){if(Array.isArray(e)){for(var n=0,t=Array(e.length);n<e.length;n++)t[n]=e[n];return t}return Array.from(e)}function i(e){u(e).forEach(function(e){(0,p.findChildren)(e,"[data-js-h3-section-list]").forEach(function(e){a(e)})})}function u(e){return c(e,{tag:"h2",wrapperFn:function(){return(0,p.createDiv)({class:"h2-section"})},bodyFn:function(){return(0,p.createDiv)({class:"body h3-section-list","data-js-h3-section-list":""})}})}function a(e){return c(e,{tag:"h3",wrapperFn:function(){return(0,p.createDiv)({class:"h3-section"})},bodyFn:function(){return(0,p.createDiv)({class:"body"})}})}function c(e,n){function t(e,n,t){var r=i(),o=e.className;o&&(0,d.default)(r,o),(0,p.before)(e,r);var a=u();return o&&(0,d.default)(a,o),(0,p.appendMany)(a,t),n&&r.appendChild(n),r.appendChild(a),r}var r=n.tag,i=n.wrapperFn,u=n.bodyFn,a=e.children[0],c=[];if(a&&!(0,l.default)(a,r)){var f=(0,p.nextUntil)(a,r);c.push(t(a,null,[a].concat(o(f))))}return(0,p.findChildren)(e,r).forEach(function(e){var n=(0,p.nextUntil)(e,r);c.push(t(e,e,n))}),c}Object.defineProperty(n,"__esModule",{value:!0}),n.default=i,n.groupify=c;var f=t(0),l=r(f),s=t(1),d=r(s),p=t(5)},function(e,n){function t(e,n){var t,r,o=e.length;if("number"==typeof o)for(t=0;t<o;t++)n(e[t],t);else{r=0;for(t in e)e.hasOwnProperty(t)&&n(e[t],t,r++)}return e}e.exports=t},function(e,n,t){"use strict";function r(e){if(Array.isArray(e)){for(var n=0,t=Array(e.length);n<e.length;n++)t[n]=e[n];return t}return Array.from(e)}function o(e,n){n.forEach(function(n){e.appendChild(n)})}function i(e,n){return u(e.nextSibling,n,[])}function u(e,n,t){return e?(0,s.default)(e,n)?t:u(e.nextSibling,n,[].concat(r(t),[e])):t}function a(e,n){e.parentNode.insertBefore(n,e)}function c(e,n){return[].slice.call(e.children).filter(function(e){return(0,s.default)(e,n)})}function f(e){var n=document.createElement("div");return Object.keys(e).forEach(function(t){n.setAttribute(t,e[t])}),n}Object.defineProperty(n,"__esModule",{value:!0}),n.appendMany=o,n.nextUntil=i,n.before=a,n.findChildren=c,n.createDiv=f;var l=t(0),s=function(e){return e&&e.__esModule?e:{default:e}}(l)}]);
+!function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var t={};n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="",n(n.s=2)}([function(e,n){function t(e,n){var t=e.matches||e.matchesSelector||e.msMatchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||e.oMatchesSelector;if(t)return t.call(e,n);if(e.parentNode){for(var r=e.parentNode.querySelectorAll(n),o=r.length;o--;0)if(r[o]===e)return!0;return!1}}e.exports=t},function(e,n,t){function r(e,n){if(n){if(Array.isArray(n))return void o(n,function(n){r(e,n)});if(e.classList){var t=n.split(" ").filter(Boolean);o(t,function(n){e.classList.add(n)})}else e.className+=" "+n}}var o=t(4);e.exports=r},function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(){d||((0,c.default)(document.documentElement,"LoadDone"),d=!0)}var i=t(3),u=r(i),a=t(1),c=r(a),f=t(6),l=r(f),s=document.querySelector("[data-js-main-body]");s&&((0,u.default)(s),(0,c.default)(s,"-wrapified")),(0,l.default)(window,"load",o),setTimeout(o,5e3);var d=void 0},function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e){if(Array.isArray(e)){for(var n=0,t=Array(e.length);n<e.length;n++)t[n]=e[n];return t}return Array.from(e)}function i(e){u(e).forEach(function(e){(0,p.findChildren)(e,"[data-js-h3-section-list]").forEach(function(e){a(e)})})}function u(e){return c(e,{tag:"h2",wrapperFn:function(){return(0,p.createDiv)({class:"h2-section"})},bodyFn:function(){return(0,p.createDiv)({class:"body h3-section-list","data-js-h3-section-list":""})}})}function a(e){return c(e,{tag:"h3",wrapperFn:function(){return(0,p.createDiv)({class:"h3-section"})},bodyFn:function(){return(0,p.createDiv)({class:"body"})}})}function c(e,n){function t(e,n,t){var r=i(),o=e.className;o&&(0,d.default)(r,o),(0,p.before)(e,r);var a=u();return o&&(0,d.default)(a,o),(0,p.appendMany)(a,t),n&&r.appendChild(n),r.appendChild(a),r}var r=n.tag,i=n.wrapperFn,u=n.bodyFn,a=e.children[0],c=[];if(a&&!(0,l.default)(a,r)){var f=(0,p.nextUntil)(a,r);c.push(t(a,null,[a].concat(o(f))))}return(0,p.findChildren)(e,r).forEach(function(e){var n=(0,p.nextUntil)(e,r);c.push(t(e,e,n))}),c}Object.defineProperty(n,"__esModule",{value:!0}),n.default=i,n.groupify=c;var f=t(0),l=r(f),s=t(1),d=r(s),p=t(5)},function(e,n){function t(e,n){var t,r,o=e.length;if("number"==typeof o)for(t=0;t<o;t++)n(e[t],t);else{r=0;for(t in e)e.hasOwnProperty(t)&&n(e[t],t,r++)}return e}e.exports=t},function(e,n,t){"use strict";function r(e){if(Array.isArray(e)){for(var n=0,t=Array(e.length);n<e.length;n++)t[n]=e[n];return t}return Array.from(e)}function o(e,n){n.forEach(function(n){e.appendChild(n)})}function i(e,n){return u(e.nextSibling,n,[])}function u(e,n,t){return e?(0,s.default)(e,n)?t:u(e.nextSibling,n,[].concat(r(t),[e])):t}function a(e,n){e.parentNode.insertBefore(n,e)}function c(e,n){return[].slice.call(e.children).filter(function(e){return(0,s.default)(e,n)})}function f(e){var n=document.createElement("div");return Object.keys(e).forEach(function(t){n.setAttribute(t,e[t])}),n}Object.defineProperty(n,"__esModule",{value:!0}),n.appendMany=o,n.nextUntil=i,n.before=a,n.findChildren=c,n.createDiv=f;var l=t(0),s=function(e){return e&&e.__esModule?e:{default:e}}(l)},function(e,n){function t(e,n,t){e.addEventListener?e.addEventListener(n,t):e.attachEvent("on"+n,function(){t.call(e)})}e.exports=t}]);

_includes/2017/head.html

@@ -3,19 +3,22 @@
 
 <!-- critical css -->
 {% if include.critical == 'home'
-%}<style>{% include 2017/critical/home.css %}</style>{%
+%}<style id='critical-css'>{% include 2017/critical/home.css %}</style>{%
 endif
 %}{%
 if include.critical == 'sheet'
-%}<style>{% include 2017/critical/sheet.css %}</style>{%
+%}<style id='critical-css'>{% include 2017/critical/sheet.css %}</style>{%
 endif %}
 
+<!-- allow disabling critical CSS optimization by passing ?nocrit=1 -->
+<script id='critical-css-disable'>if (~window.location.search.indexOf('nocrit')){([].slice.call(document.querySelectorAll('#critical-css')).map(function(e){e.parentNode.removeChild(e)})}</script>
+
 <!-- deferred css -->
-<script>;(function(links){(requestAnimationFrame||mozRequestAnimationFrame||webkitRequestAnimationFrame||msRequestAnimationFrame||(function(fn){window.addEventListener('load',fn)}))(function(){var h=document.getElementsByTagName('head')[0],l,i;for (i=0;i<links.length;i++){l=document.createElement('link');l.rel='stylesheet';l.href=links[i];h.appendChild(l);}})})([
+<script id='deferred-css'>;(function(links){(requestAnimationFrame||mozRequestAnimationFrame||webkitRequestAnimationFrame||msRequestAnimationFrame||(function(fn){window.addEventListener('load',fn)}))(function(){var h=document.getElementsByTagName('head')[0],l,i;for (i=0;i<links.length;i++){l=document.createElement('link');l.rel='stylesheet';l.href=links[i];h.appendChild(l);}})})([
 'https://fonts.googleapis.com/css?family=Cousine',
 '{{base}}/assets/2017/style.css?t={{ timestamp }}'
 ])</script>
-<noscript>
+<noscript id='deferred-css-fallback'>
-<link rel='stylesheet' type='text/css' href='https://fonts.googleapis.com/css?family=Cousine'>
+<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Cousine'>
-<link rel='stylesheet' type='text/css' href='{{base}}/assets/2017/style.css?t={{ timestamp }}'>
+<link rel='stylesheet' href='{{base}}/assets/2017/style.css?t={{ timestamp }}'>
 </noscript>

_includes/2017/top-nav.html

@@ -4,7 +4,7 @@ Params:
 - noedit
 - noback
 {% endcomment %}
-<nav class='top-nav' data-js-no-preview>
+<nav class='top-nav' data-js-no-preview role='navigation'>
   <div class='container'>
     {% unless include.page.noback %}
       <div class='left'>

_js/critical.js

@@ -5,10 +5,23 @@
 
 import wrapify from './wrapify'
 import addClass from 'dom101/add-class'
+import on from 'dom101/on'
 
+// Transform the main body markup to make it readable.
 const body = document.querySelector('[data-js-main-body]')
 
 if (body) {
   wrapify(body)
   addClass(body, '-wrapified')
 }
+
+// Be "done" when we're done, or after a certain timeout.
+on(window, 'load', done)
+setTimeout(done, 5000)
+
+let isDone
+function done () {
+  if (isDone) return
+  addClass(document.documentElement, 'LoadDone')
+  isDone = true
+}

_layouts/2017/home.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang='en'><head>
+<html class='NoJs' lang='en'><head>
 
 {% assign featured_pages = site.pages
   | where_exp: "page", "page.tags contains 'Featured'"
@@ -15,13 +15,13 @@
 {% include 2017/top-nav.html page=page is_home=true noedit=true noback=true %}
 
 {% if site.data.carbon.enabled %}
-  <div class='SideAd'>
+  <div class='SideAd' role='complementary'>
     <script async src='{{ site.data.carbon.src }}' id="_carbonads_js"></script>
   </div>
 {% endif %}
 
 <div class='body-area -slim'>
-  <div class='site-header'>
+  <div class='site-header' role='banner'>
     <h1>
       {{ site.data.content.home.title }}
     </h1>
@@ -32,13 +32,13 @@
     {% include 2017/search-form.html live=true %}
 
     {% if site.data.codesponsor.enabled %}
-    <div class='adbox'>
+    <div class='adbox' role='complementary'>
       {% include 2017/code-sponsor.html noprelude=true %}
     </div>
     {% endif %}
   </div>
 
-  <div class='pages-list'>
+  <div class='pages-list' role='main'>
     {% for page in featured_pages %}
       {% include 2017/pages-list-item.html page=page class='item top-sheet' %}
     {% endfor %}

_layouts/2017/sheet.html

@@ -9,18 +9,18 @@
 {% include 2017/top-nav.html page=page %}
 
 <div class='body-area'>
-  <header class='main-heading -center'>
+  <header class='main-heading -center' role='banner'>
     <h1 class='h1'>{{ page.title }} <em>{{ site.data.content.sheet.suffix }}</em></h1>
 
     <div class='adbox' data-js-no-preview>
       {% if site.data.codesponsor.enabled %}
-      <div class='ad -codesponsor'>
+      <div class='ad -codesponsor' role='complementary'>
         {% include 2017/code-sponsor.html %}
       </div>
       {% endif %}
 
       {% if site.data.carbon.enabled %}
-        <div class='HeadlineAd ad -carbon'>
+        <div class='HeadlineAd ad -carbon' role='complementary'>
           <script async src='{{ site.data.carbon.src }}' id="_carbonads_js"></script>
         </div>
       {% endif %}
@@ -46,7 +46,7 @@
     </div>
   {% endif %}
 
-  <main class='post-content MarkdownBody' data-js-main-body>
+  <main class='post-content MarkdownBody' data-js-main-body role='main'>
     {{ content }}
   </main>
 </div>

_sass/2017/base/base.scss

@@ -69,17 +69,3 @@ a:hover {
     }
   }
 }
-
-/*
- * Hide markdown before it's wrapped.
- */
-
-html.WithJs .post-content {
-  & {
-    opacity: 0;
-  }
-
-  &.-wrapified {
-    opacity: 1;
-  }
-}

_sass/2017/base/fade.scss

@@ -0,0 +1,43 @@
+/*
+ * "Preloader":
+ * This makes the content semi-transparent before the page ad loads.
+ */
+
+.post-content {
+  html.WithJs & {
+    opacity: 0;
+  }
+}
+
+/*
+ * Defer "loading" until page's onload event fires.
+ * (The page actually already loaded, we just pretend like it hasn't)
+ */
+
+.pages-list,
+.post-content.-wrapified,
+.intro-content {
+  html.WithJs & {
+    opacity: 0.4;
+  }
+
+  html.WithJs.LoadDone & {
+    opacity: 1;
+    transition: opacity 100ms linear 100ms;
+  }
+}
+
+/*
+ * Subtle animation to drive attention to the ad on laod
+ */
+
+// .code-sponsor {
+//   html.WithJs & {
+//     transform: translate3d(0, 16px, 0);
+//   }
+
+//   html.WithJs.LoadDone & {
+//     transform: translate3d(0, 0, 0);
+//     transition: transform 200ms ease-out;
+//   }
+// }

_sass/2017/components/page-actions.scss

@@ -11,11 +11,6 @@
     width: auto;
   }
 
-  & > .link.link > a {
-    padding: 0 8px;
-  }
-
-  &,
   & > li {
     margin: 0;
     padding: 0;
@@ -37,11 +32,6 @@
     }
   }
 
-  & > li > a::before {
-    font-size: 16px;
-    text-align: center;
-  }
-
   & > li > a > .text {
     @include font-size(-1);
     display: none;
@@ -55,6 +45,8 @@
 .page-actions {
   & {
     @include action-bar;
+    margin: 0;
+    padding: 0;
   }
 
   & + & {
@@ -66,8 +58,6 @@
   & > .github > a::before {
     content: '';
     vertical-align: middle;
-    position: relative;
-    top: -2px;
   }
 
   & > .facebook > a::before {
@@ -83,7 +73,19 @@
   }
 
   & > .github > a:hover::before {
-    @include ion-logo-github(16px, white);
+    background-image: ion-logo-github-image(white);
+  }
+
+  & > .facebook > a::before,
+  & > .twitter > a::before {
+    width: 32px;
+    height: 32px;
+  }
+
+  // Compensate alignment
+  & > .github > a::before {
+    position: relative;
+    top: -2px;
   }
 
   & > .link.-button > a {

_sass/2017/style.scss

@@ -10,6 +10,7 @@
 @import './utils/section-with-container';
 @import './placeholders/push-button';
 @import './base/base';
+@import './base/fade';
 @import './markdown/a-em';
 @import './markdown/code';
 @import './markdown/headings';

_support/critical.js

@@ -9,14 +9,18 @@ const options = {
   minify: true,
   extract: true,
   ignore: [
-    'font-face'
+    '@font-face'
   ]
 }
 
 critical.generate({
   ...options,
   src: 'index.html',
-  dest: '../_includes/2017/critical/home.css'
+  dest: '../_includes/2017/critical/home.css',
+  include: [
+    // fade-in magic (base/fade)
+    /html\.WithJs/
+  ]
 })
 
 critical.generate({
@@ -27,6 +31,9 @@ critical.generate({
     /\.h3-section/,
 
     // eg, -six-column in devhints.io/layout-thrashing
-    /-column/
+    /-column/,
+
+    // fade-in magic (base/fade)
+    /html\.WithJs/
   ]
 })