DWD Developer Meetup 2014-12-12 Sheets

HTML

              
                <div class="logo">
  <img src="https://printdealcdn.s3.amazonaws.com/img/logo-drukwerkdeal-339a576219.png" alt="logo" width="222" height="42">
</div>

<ol class="slides BareList" id="slides">
  
<li class="slide">
  <h1 class="h--alt slide_title">Professional front-end development</h1>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/dwd-orange-bricks.jpg" alt="">
  </div>
</li>

<li class="slide">
  <h1 class="h--alt slide_title">#bada55 CSS</h1>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/dwd-badass-css.jpg" alt="">
</li>

<li class="slide">
  <h1 class="slide_title h--alt">Inhoud</h1>
  <ul class="IconList IconList--Arrow">
    <li>Responsive</li>
    <li><abbr title="">CSS</abbr> Architecture</li>
    <li>Tools, Testing &amp; Quality Control</li>
    <li>DWD Style Guide</li>
  </ul>
</li>

<li class="slide">
  <h1 class="slide_title h--alt">Responsive</h1>
  <ul class="IconList IconList--Check">
    <li><strong>1 codebase</strong> voor alle devices (geen m-dot domein)</li>
    <li>Flexibele images</li>
    <li>Flexibel/fluid grid</li>
    <li><code>@media</code> queries</li>
    <li>Nieuwe workflow en mindset</li>
  </ul>
  <p>Conventies, best practices, net als bij &lsquo;normaal&rsquo; programmeren</p>
</li>

<li class="slide">
  <h1 class="slide_title h--alt">Kort: <abbr title="">CSS</abbr> selector best practices</h1>
  <ul class="BareList">
    <li class="Media">
      <div class="Media__Img">
        <i class="Icon Icon--Cross--Alt"></i>
      </div>
      <div class="Media__Body">
        <p>Selector nesting: <code>#header h1</code>, <code>.myElem ~ h1 > span</code></p>
      </div>
    </li>
    <li class="Media">
      <div class="Media__Img">
        <i class="Icon Icon--Cross--Alt"></i>
      </div>
      <div class="Media__Body">
        <p>Gebruik van ID's: <code>#myFooter</code>.</p>
      </div>
    </li>
    <li class="Media">
      <div class="Media__Img">
        <i class="Icon Icon--Cross--Alt"></i>
      </div>
      <div class="Media__Body">
        <p>Qualified selectors: <code>i.Icon</code>, <code>header#myHeader</code>.</p>
      </div>
    </li>
    <li class="Media">
      <div class="Media__Img">
        <i class="Icon Icon--Check--Green"></i>
      </div>
      <div class="Media__Body">
        <p>Classes: <code>.myElement</code>, <code>.Media</code></p>
      </div>
    </li>
  </ul>
</li>

<li class="slide">
  <h1 class="slide_title h--alt">Specificity</h1>
  <ul class="Island IconList IconList--Arrow">
    <li>Hoe specifiek is de <abbr title="Cascading">CSS</abbr> selector?</li>
    <li>De meest specifieke wordt toegepast</li>
  </ul>
  <table>
    <thead>
      <tr>
        <th>Selector</th>
        <th>Inline styles</th>
        <th>ID's</th>
        <th>Classes, <br />attributes, pseudo-selectors</th>
        <th>Elements, pseudo-elements</th>
        <th>Specificity</th>
      </tr>
    </thead>
    <tbody>
      <tr class="row--bad">
        <td><code>#wrapper p</code></td>
        <td>0</td>
        <td>1</td>
        <td>0</td>
        <td>1</td>
        <td>0101</td>
      </tr>
      <tr class="row--bad">
        <td><code>.right_col p</code></td>
        <td>0</td>
        <td>0</td>
        <td>1</td>
        <td>1</td>
        <td>0011</td>
      </tr>
      <tr class="row--bad">
        <td><code>input[type="text"]</code></td>
        <td>0</td>
        <td>0</td>
        <td>1</td>
        <td>1</td>
        <td>0011</td>
      </tr>
      <tr class="row--good">
        <td><code>.textinput</code></td>
        <td>0</td>
        <td>0</td>
        <td>1</td>
        <td>0</td>
        <td>0010</td>
      </tr>
    </tbody>
  </table>
  <p>Oplossing: <b>gebruik classes voor <em>alles</em>!</b></p>
</li>

<li class="slide">
  <h1 class="slide_title h--alt">OOP + CSS => OOCSS</h1>
  <p>Bekende patronen uit OO talen toepassen op <abbr title="">css</abbr>.</p>
  <ul class="IconList IconList--Arrow">
    <li>Single Responsibility Pattern: Doe 1 ding, doe het goed.</li>
    <li>Don&rsquo;t Repeat Yourself: doe het 1 keer.</li>
    <li>Encapsulation: het interesseert me niet hoe een object het doet. Als &lsquo;ie het maar doet.</li>
  </ul>
  <br /><!-- clear -->
  <pre><code class="language-css">.Label {}
.Tooltip {}
.Nav {}
.Icon {}
.Modal {}
</code></pre>
</li>

<li class="slide">
  <h1 class="h--alt slide_title">BEM</h1>
  <p>Block, Element, Modifier</p>
  <div class="row">
    <div class="init-12 medium-7 medium-offset-1 cols">
      <ul class="IconList IconList--Arrow">
        <li>(consistent) Classnames verzinnen moeilijk</li>
        <li>BEM geeft relaties tussen classes binnen een object aan</li>
        <li>Brug tussen design en development</li>
      </ul>
    </div>
    <div class="init-12 medium-4 cols">
      <pre><mark><span class="name">.Car</span></mark> {
  <span class="token">color</span>: <span class="css">green</span>;
  <span class="token">float</span>: <span class="css">none</span>;
}
  
<mark><span class="name">.Car--Batmobile</span></mark></span> {
  <span class="token">color</span>: <span class="css">black</span>;
}

<mark><span class="name">.Car__Wheel</span></mark> {
  <span class="token">color</span>: <span class="css">black</span>;
  <span class="token">border-color</span>: <span class="css">black</span>;
}

<mark><span class="name">.Car__Wheel--WhiteWall</span></mark> {
  <span class="token">border-color</span>: <span class="css">white</span>;
}
</pre>
    </div>
  </div>
</li>
<li class="slide">
  <h1 class="slide_title h--alt">BEM in real life</h1>
  <div class="row">
    <div class="init-12 medium-6 cols">
<pre><code class="language-markup">&lt;span class="Label">Recommended&lt;/span>

&lt;span class="Label Label--Alt">Upsell stuff!&lt;/span>

&lt;span class="Label">
  &lt;i class="Icon Icon--Euro Label__Icon">&lt;/i>
  Buy Now
&lt;/span></code></pre>
      <br>
      <div class="Panel">
        <div class="Label">Recommended</div>
        <br />
        <div class="Label Label--Alt">Upsell stuff!</div>
        <br />
        <div class="Label">
          <i class="Icon Icon--Euro--White Label__Icon"></i>
          Buy now!
        </div>
      </div>
    </div>
    <div class="init-12 medium-6 cols">
      <pre><code class="language-css">.Label {
  display: inline-block;
  border: 1px solid;
  background: green;
  color: white;
}

.Label--Alt {
  background-color: blue;
}

.Label__Icon {
  vertical-align: -0.325em;
  font-size: 2em;
}</code></pre>
    </div>
  </div>
  
</li>

<li class="slide">
  <h1 class="slide_title h--alt">SASS</h1>
  <p>Toolbox: data-types, imports, variables, loops, functions:</p><!--
   --><pre><span class="name">@import</span> <span class="css">'math/functions', 'settings'</span>;
   
<span class="token">@each</span> <span class="name">$bp-name</span>, <span class="name">$bp-width</span> in <span class="name">$breakpoints</span> {
  <span class="token">@include</span> breakpoint( <span class="name">$bp-width</span> ) {
    <span class="token">@for</span> <span class="name">$col</span> from <span class="name">$base-grid-columns</span> {
      <span class="css">.</span><span class="token">#{</span><span class="name">$bp-name</span><span class="token">}</span><span class="css">-</span><span class="token">#{</span><span class="name">$col</span><span class="token">}</span> {
        <span class="css">width</span>: <span class="token">percentage(</span> <span class="name">$col</span> / <span class="name">$base-grid-columns</span> <span class="token">)</span>;
      }
    }
  }
}</pre>
    <p>output:</p>
    <pre><code class="language-css">.init-12 { width: 91.6666%; }
.init-1  { width: 8.3334%; }

@media screen and (min-width: 33em) {
  .medium-12 { width: 91.6666%; }
  .medium-1  { width: 8.3334%; }
}

@media screen and (min-width: 55em) {
  .large-12 { width: 91.6666%; }
  .large-1  { width: 8.3334%; }
}</code></pre>
</li>

<li class="slide">
  <h1 class="slide_title h--alt">CSS Architectuur</h1>
  <div class="row">
    <div class="init-12 medium-7 cols">
      <p>Gelaagde architectuur voor verschillende niveaus van abstractie.</p>
      <ul class="IconList IconList--Arrow">
        <li>Core: basisobjecten zoals grid, media, mixins, etc.</li>
        <li>Skin: bevat de branding-specifieke zaken als kleuren, fonts, etc.</li>
        <li>Theme: Specifieke objecten per portal (Drukwerkdeal.nl, careers.printdeal.com, Zendesk).</li>
      </ul>
    </div>
    <div class="init-12 medium-4 medium-offset-1 cols">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/dwd-layered.jpg" alt="" />
    </div>
  </div>
</li>

<li class="slide">
  <h1 class="slide_title h--alt">Cool. En nu?</h1>
  <p>Tools, Testing &amp; Quality Control</p>
</li>

<li class="slide">
  <h1 class="slide_title h--alt">Wat willen we kunnen?</h1>
  <ul class="IconList IconList--Arrow">
    <li>Sass omzetten naar CSS</li>
    <li>CSS Minifyen</li>
    <li>Properties automatisch prefixen: <code class="language-css">background-size: cover;</code> &rarr; <code class="language-css">-webkit-background-size: cover;</code></li>
    <li>PNG fallbacks van SVG&rsquo;s genereren</li>
  </ul>
</li>

<li class="slide">
  <h1 class="slide_title h--alt">Ok. Wat nog meer?</h1>
  <ul class="IconList IconList--Arrow">
    <li>Code formatting checken</li>
    <li>Url&rsquo;s van assets automatisch updaten: <code class="language-css">background-image: url(&lsquo;logo-dwd.svg&rsquo;);</code> &rarr; <code class="language-css">background-image: url(&lsquo;logo-dwd-kj43b3k2.svg&rsquo;);</code></li>
    <li>Statistieken over de code verzamelen en naar API sturen voor coole grafiekjes :)</li>
    <li>Uploaden naar Amazon S3 CDN</li>
    <li>En <em>alles</em> automatisch</li>
  </ul>
</li>

<li class="slide">
  <h1 class="slide_title h--alt">Enter: Gulp</h1>
  <div class="row">
    <div class="init-12 medium-9 cols">
  <p>Doet. Alles.</p>
  <pre><code class="language-javascript">gulp.task("css:sass", function () {
    var themeHookFiles = config.paths.css.themes.map(function (theme) {
        return theme.folder + theme.name + ".scss";
    });

    return gulp.src(themeHookFiles)
        .pipe($.rubySass(config.settings.rubySass))
        .pipe($.autoprefixer(config.settings.autoprefixer))
        .pipe($.header(config.file.banner, { pkg: pkg }))
        .pipe(gulp.dest(config.paths.css.test))

        .pipe($.minifyCss(config.settings.minifyCss))
        .pipe($.header(config.file.banner, { pkg: pkg }))
        .pipe($.rename({ suffix: ".min" }))
        .pipe(gulp.dest(config.paths.css.test));
});</code></pre>
      <br />
    <pre>$ gulp css:sass</pre>
    </div>
    <div class="init-12 medium-3 cols">
      <img src="https://raw.github.com/gulpjs/artwork/master/gulp.png" alt="">
    </div>
  </div>
</li>

<li class="slide">
  <h1 class="h--alt slide_title">Style Guide</h1>
  <ul class="IconList IconList--Arrow">
    <li>Referentie voor developers en stakeholders</li>
    <li>Verzameling van alle OOCSS Objecten</li>
    <li>Uitleg en codevoorbeelden</li>
    <li>Complete documentatie architectuur en code-afspraken</li>
    <li>Statistieken van codebase</li>
  </ul>
</li>

<li class="slide">
  <h1 class="h--alt slide_title">Nieuwe objecten</h1>
  <p>Verklein de effort: meer nieuw = meer testen, documenteren, etc.</p>
  <ul class="IconList IconList--Check">
    <li>Is het <em>echt</em> nieuw?</li>
    <li>Maak zoveel mogelijk gebruik van bestaande objecten</li>
    <li>Bestaand object uitbreiden</li>
    <li>Of maak iets compleet nieuws</li>
  </ul>
</li>

<li class="slide">
  <h1 class="h--alt slide_title">Let's talk about LEGO</h1>
  <div class="row">
    <div class="init-6 cols"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/dwd-star-wars.png" alt="" /></div>
    <div class="init-6 cols"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/dwd-colored-bricks.jpg" alt="" /></div>
  </div>
</li>

<!--<li class="slide">
  <h1 class="h--alt slide_title">LEGO video</h1>
  <a href="http://natgeotv.com/nl/mega-factories-2/videos/lego-production" target="_blank">Megafactories LEGO <i class="Icon Icon--ExternalLink Icon--Small"></i></a>
</li>-->

<li class="slide">
  <h1 class="slide_title h--alt">Inzicht:</h1>
</li>

<li class="slide">
  <h1 class="slide_title h--alt">Code stats</h1>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/Screen%20Shot%202017-09-22%20at%2013.56.51.png" alt="">
</li>

<li class="slide">
  <h1 class="slide_title h--alt">Specificity Graph</h1>
  <p data-height="466" data-theme-id="8453" data-slug-hash="BbwqC" data-default-tab="result" data-user="bartveneman" class='codepen'>See the Pen <a href='https://codepen.io/bartveneman/pen/BbwqC/'>Specificity graph</a> by Bart Veneman (<a href='https://codepen.io/bartveneman'>@bartveneman</a>) on <a href='https://codepen.io'>CodePen</a>.</p>
  <script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</li>

<li class="slide">
  <h1 class="slide_title h--alt">Resultaat: kwaliteit</h1>
  <ul class="IconList IconList--Check">
    <li>Consistent kleurgebruik, font-sizes, witruimte, &hellip;</li>
    <li>Testbare code</li>
    <li>Voorspelbare code door documentatie en afspraken</li>
    <li>Verkleinen foutmarge door automatisering m.b.v. Gulp</li>
    <li><em>Inzicht</em> in kwaliteit</li>
  </ul>
</li>
  
</ol>

CSS

              
                @import bourbon

$c-gray-lighter: #ebebeb
$c-gray-light: #d7d7d7
$c-gray-medium: #aaaaaa
$c-white: #ffffff
$c-black: #191919
$c-magenta-shade: #af0068
$c-blue-shade: #008cc9
$c-yellow: #fddb00
$c-green-shade: #66ad00

html
  overflow: hidden
  background: url("https://dl.dropboxusercontent.com/u/25917336/dwd-logo.svg") no-repeat  50% 50% $c-white
  background-size: auto 130%
  @media (min-width: 24em)
    font-size: 3.6vw
  @media (min-width: 44em)
    font-size: 2em
    
.cols,
.col
  @media (min-width: 24em)
    font-size: 18px
  @media (min-width: 44em)
    font-size: 24px
    
html,    
body,
.slides,
.slide
  height: 100%
  width: 100%
    
.slides
  display: table
    
.slide
  text-align: center
  vertical-align: middle
  padding: 12px
  display: none
  
.slide-active
  display: table-cell
  
.logo
  position: fixed
  top: 12px
  right: 12px
  width: 25%
  img 
    width: 100%
  
code
  color: $c-magenta-shade 
  
h1
  margin-bottom: 24px
  
h2
  margin-bottom: 24px
  
.slide ul,
.slide ol
  display: inline-block
  text-align: left
  max-width: 26em
        
.Panel,
pre
  text-align: left
  padding: .75em 1em
  border: 1px solid $c-gray-medium
  background: $c-gray-light
  display: inline-block
    
.Label__Icon
  font-size: 2em
  vertical-align: -.375em
  
pre
  font-size: .675em
  line-height: 1.3
  color: $c-black
.class, 
.token
  color: $c-blue-shade
  text-decoration: none
  pointer-events: none
.name,
.token.name, 
.token.number,
.token.atrule-id,
.token.attr-name
  color: $c-magenta-shade
.css, 
.token.property,
.token.function,
.token.attr-value
  color: $c-green-shade
.comment
  color: $c-gray-medium
.token.punctuation,
.token.atrule
  color: $c-black
mark
  background: $c-yellow
  
iframe:not(.cp_embed_iframe)
  border: 1px solid $c-gray-light
iframe
  resize: vertical
    
table
  font-size: .5em
  max-width: 55em
p,
table,
  margin-right: auto
  margin-left: auto
p
  max-width: 33em
  
table
  table-layout: fixed
.row--bad
  background-color: rgba(255, 0, 0, .3)
.row--good
  background-color: rgba(0, 200, 0, .3)
    
.slide img
.slide iframe
  border: 1px solid $c-gray-light
  max-height: 50vh
  width: 100%
  
.map
  position: fixed
  left: 0
  bottom: 0
  text-align: center
  width: 100%
  margin: 0 auto

.map_item
  display: inline-block
  width: .5em
  padding-bottom: .5em
  background: $c-gray-light
  border-radius: 50%
  margin-right: .125em
  transition: background .3s ease
  cursor: pointer
  position: relative
  box-shadow: 0 0 0 1px $c-gray-medium
  &:before,
  &:after
    position: absolute
    bottom: 100%
    left: 50%
    transform: translateX(-50%)
    display: none
  &:before
    content: attr(data-title)
    margin-bottom: 6px
    background-color: $c-black
    padding: 2px 3px
    color: $c-white
    font-size: 12px
    border-radius: 2px
    white-space: nowrap
  &:after
    content: ""
    border-width: 4px
    border-style: solid
    border-color: $c-black transparent transparent
  &:hover:before,
  &:hover:after
    display: inline-block
    
.map_item-active
  background: $c-gray-medium
  
.indicator
  position: fixed
  right: 1em
  bottom: 1em
  font-size: .5em
  line-height: 1
  color: $c-gray-medium
  
.slide_title
  font-size: 2em
  
code
  border: 1px solid $c-gray-medium
  background: $c-gray-light
  padding: 0 .25em
  white-space: nowrap
    
pre > code
  white-space: inherit
  background: none
  border: none
  color: $c-black
  
abbr
  text-transform: uppercase
  font-size: .875em
    
.IconList > li:before
  vertical-align: -.15em

JS

              
                console.clear();

(function (window, document, undefined) {
  "use strict";
  
  var ls = window.localStorage,
      _getState = function () {
        return parseInt(JSON.parse(ls.getItem("slideIndex")), 10);
      },
      _setState = function (index) {
        return ls.setItem("slideIndex", JSON.stringify(index));
      },
      
      _a = "-active",
      _s = "slide",
      _sa = _s + _a,
      _m = "map_item",
      _ma = _m + _a,
      
      _slides = document.getElementById("slides").getElementsByClassName(_s),
      _map,
      _mapItems,
      _currentIndex = _getState() || 0,
      _indicator,
      
      _swipe = {
        start: null,
        delta: null,
        treshold: window.innerWidth / 3
      };

  _slides[_currentIndex].className = [_s, _sa].join(" ");

  // Run this as a kickoff to generate the map
  (function () {
    var i, item;

    _map = document.createElement("ul");
    _indicator = document.createElement("div");
    
    for (i = 0; i < _slides.length; i += 1) {
      item = document.createElement("li");
      item.setAttribute("data-index", i);
      item.setAttribute("data-title", (i + 1) + ". " + _slides[i].getElementsByTagName("h1")[0].firstChild.nodeValue.toString());
      item.className = i === _currentIndex ?  [_m, _ma].join(" ") :  _m;
      _map.appendChild(item);
    }

    _mapItems = _map.childNodes;
    _map.className = "map BareList";
    _map.setAttribute("id", "map");
    _indicator.className = "indicator";
    _indicator.setAttribute("id", "indicator");
    document.body.appendChild(_map);
    document.body.appendChild(_indicator);
  }());


  var slide = function (forwards, index) {
    var newIndex = (forwards === null) ? index : forwards ? (_currentIndex + 1) : (_currentIndex - 1),
        followingSlide = _slides[newIndex];

    // Is there a next or previous slide?
    if (followingSlide === undefined) {
      return;
    }

    _slides[_currentIndex].className = _s;
    _mapItems[_currentIndex].className = _m;
    followingSlide.className = [_s, _sa].join(" ");
    _mapItems[newIndex].className = [_m, _ma].join(" ");

    _currentIndex = newIndex;
    _setState(_currentIndex);
    _indicator.textContent = _currentIndex + 1;
  };


  document.addEventListener("keyup", function (event) {
    var key = event.keyCode,
        forwardKeys = [32, 34, 39, 40],
        backKeys = [33, 37, 38],
        triggerKeys = forwardKeys.join(backKeys);

    // No particular triggering key was pressed
    if (triggerKeys.indexOf(key) === -1) {
      return;
    }

    slide(forwardKeys.indexOf(key) > -1);
  }, false);
  
  _map.addEventListener("click", function (event) {
    var clicked = event.target;
    
    if (clicked.className !== _m) {
      return;
    }
    
    slide(null, parseInt(clicked.getAttribute("data-index"), 10));
  });
  
  document.addEventListener("touchstart", function (event) {
    _swipe.start = event.touches.item(0).clientX;
  }, false);
  
  document.addEventListener("touchmove", _.debounce(function (event) {
    var currentPos, direction;

    if (_swipe.start === null) {
      return;
    }

    currentPos = event.touches.item(0).clientX;
    _swipe.delta = currentPos - _swipe.start;
    //_slides[_currentIndex].style.webkitTransform = "translateX(" + _swipe.delta + "px)";

    if (Math.abs(_swipe.delta) > _swipe.treshold) {
      //_slides[_currentIndex].style.webkitTransform = "none";
      slide(_swipe.delta < 0);
      _swipe.start = null;
    }

    event.preventDefault();
  }), false);
  
}(this, this.document));

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions