Blog

repeated items in a loop

When you have 3 images for a grid ^^

.container
  .row
    - for (var i=0; i < 9; i++){
      .col-xs-4
        h3="images/product-"+(i%3+1)+".jpg"
        hr
    - }

Yields:

1 | 2 | 3
1 | 2 | 3
1 | 2 | 3

http://codepen.io/zsitro/pen/bEOVVd?editors=1000

localStorage in porn mode

localStorage.setItem causes quota error in Chrome/Safari private browsing mode. Probably in other browsers as well. Just wrap them in try{} if they are just decorative features.

Export SVG w/ classnames from Adobe Illustrator

ai14477645291.txt 2015-11-17 13-54-19

That Safari bug tho

Actual sample code from support.google.com w/ commentary

goog_snippet_vars = function() {
  var w = window;
  w.google_conversion_id = 12345678;
  w.google_conversion_label = "abcDeFGHIJklmN0PQ";
  w.google_conversion_value = 13.00;
  w.google_conversion_currency = "USD";
  w.google_remarketing_only = false;
}
// DO NOT CHANGE THE CODE BELOW.
goog_report_conversion = function(url) {
  goog_snippet_vars();
  window.google_conversion_format = "3";
  var opt = new Object();
  opt.onload_callback = function() {
    if (typeof(url) != 'undefined') {
      window.location = url;
    }
  }
  var conv_handler = window['google_trackConversion'];
  if (typeof(conv_handler) == 'function') {
    conv_handler(opt);
  } /* else { I hang up and I fuck you and your users who have ad/tracker-blocking extension. Thug life bro. } */
}

https://support.google.com/adwords/answer/6095821?&hl=en&authuser=0

.middle boom!

.middle{
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  width: 100%;
  text-align: center;
  transform: translate(-50%,-50%);
  transform-origin: 50% 50%;
}

Play: http://jsbin.com/feguhapeha/1/edit?html,css,output

Coffeescript – Simple inline templating

When you don’t need more.

bubbleTemplate = (__item) ->
  using __item, ->
    "
      <div class='search-map-bubble clearfix'>
        <a href='#{ @url }' class='search-map-bubble-thumbnail'>
          <img src='#{ @thumbnail_map }'>
        </a>
        <div class='search-map-bubble-content'>
          <a href='#{ @url }' class='search-map-bubble-title'>
            #{ @business_name }
            #{ @stars }
          </a>
          <nav class='search-map-bubble-'>
            #{ @address }
          </nav>
        </div>
    "

Where using is a little helper to mimic with in a better way.

using = (invocant, method) -> method.call invocant

Yields:

var bubbleTemplate, using;

using = function(invocant, method) {
  return method.call(invocant);
};

bubbleTemplate = function(__item) {
  return using(__item, function() {
    return "<div class='search-map-bubble clearfix'> <a href='" + this.url + "' class='search-map-bubble-thumbnail'> <img src='" + this.thumbnail_map + "'> </a> <div class='search-map-bubble-content'> <a href='" + this.url + "' class='search-map-bubble-title'> " + this.business_name + " " + this.stars + " </a> <nav class='search-map-bubble-'> " + this.address + " </nav> </div>";
  });
};

High level history pollution

andre-bretonhttp://dada.zsitro.com

 

Webpack vs Browserify

Default shit in Browserify’s bundle.js: 1900 lines

Default shit in Webpack’s bundle.js: 41 lines

That awkward moment when you realize

.m-list{
    .m-list__item{
        color: red;
    }
}

is not equal to

.m-list{
    .&__item{
        color: red;
    }
}