Scary Loading

Benjamin Jentsch & Elisabeth Engel

About Skeletons

& CSS Implants

Hackathon @gutefrage

Inline CSS

Inlining

index-inline.css

serving static html

npm & gulp task

inline-css-generated.min.css

gulp task

inline-css-generated.hbs

Inlining.

index-inline.css

/* atoms */
@import "00-atoms/icons/icon";
@import "00-atoms/avatar/avatar";
@import "00-atoms/plate/plate";

/* molecules */
@import "01-molecules/content-meta/content-meta";
@import "01-molecules/primary-nav/primary-nav-inline";

/* organisms */
@import "02-organisms/masthead/masthead";
@import "02-organisms/plate-question-detail/plate-question-detail";

Inlining..

npm (package.json):

"build": "npm run build:css 
       && npm run build:css:inline 
       && [...]"

gulpfile.js:

writeFileSync('inline-css-generated.hbs', minCss);

...
handlebarsEngine.registerPartial(
  'inline-css-generated',
  readFileSync('inline-css-generated.hbs')
);

Inlining...

head.hbs

<link rel="preload" href="{{{ cssAssetPath }}}" as="style"
  onload="this.rel='stylesheet'"/>

Regular CSS

Inline CSS

npm loadCss

<noscript>
    <link rel="stylesheet" href="{{{ cssAssetPath}}}"></noscript>

<style>{{> inline-css-generated }}</style>

Inlined...!

Loading on mobile with preset '3G'

Speedcurve rocks!

Facts & Numbers

Skeleton Loading

Magic

Fake it

'til you make it

Card Trick

https://www.youtube.com/watch?v=v3iPrBrGSJM

Core Principles of Magic

Misdirection

Persuasion

Illusion

Deception

Skeleton Loading

Magic Template

<section>

  {{#> atoms-loading-partial _show-until="loaded"}}

      {{> organisms-plate-answer-skeleton}}
     
      {{#if answers.hasMany}}
        {{> organisms-plate-answer-skeleton}}
      {{/if}}

  {{/atoms-loading-partial}}

  <gf-deferred-content hide-until="loaded" class="u-invisible">
    [ REAL ANSWERS ]
  </gf-deferred-content>

</section>

Skeleton Loading

Magic CSS

.ContentBody:empty {

    animation: skeletonLoading 2s infinite;
    
    background-image:
      linear-gradient(var(--grey--lighter) 1.5rem, transparent 0),
      linear-gradient(var(--grey--lighter) 1.5rem, transparent 0),
      linear-gradient(var(--grey--lighter) 1.5rem, transparent 0),
      linear-gradient(var(--grey--lighter) 1.5rem, transparent 0),
      linear-gradient(var(--grey--lighter) 1.5rem, transparent 0);
    
    /* relative position from top left corner for each line */
    background-position:
      0 0.5rem,
      0 4.5rem,
      0 6.5rem,
      0 10.5rem,
      0 12.5rem;
    
    background-repeat: repeat-y;
    
    /* line width for each line */
    background-size:
      7em 100%,
      95% 100%,
      85% 100%,
      60% 100%,
      30% 100%;
    
    height: 15rem;
}


    @keyframes skeletonLoading {
    
      0%   {opacity: 0.5}
      50%  {opacity: 1}
      100% {opacity: 0.5}
    }


    .ContentMeta-author.is-loading {
      animation: skeletonLoading 2s infinite;
      background-color: var(--grey--lighter);
      padding-right: 10rem;
    }

Font Pre-Rendering

:root {
  --font-family-primary: "Roboto", sans-serif;
  --font-family-primary-loading: sans-serif;
}

body {

 font: 1.6rem/1.4 var(--font-family-primary-loading);
 
 html.wf-active & {
   font: 1.6rem/1.4 var(--font-family-primary);
 }
}

Moooooreeeeee

Content

http://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html
https://www.sitepoint.com/how-to-speed-up-your-ux-with-skeleton-screens/
http://dev.mobify.com/blog/beginners-guide-to-perceived-performance/
http://www.lukew.com/ff/entry.asp?1797

http://codepen.io/Mestika/pen/ByNYBa
http://codepen.io/basham/pen/cGJjn
http://codepen.io/oslego/pen/XdvWmd

Code

F1

Questions?

What do you doo?

Remarks?

Recommendations?

Thank you!

Reach out:

benjamin.jentsch@gutefrage.net

elisabeth.engel@gutefrage.net

@_lizzelo_

slides.com/elisabethengel/scary_loading