Blog

Typoglycemia in Coffeescript

Typoglycemia = () ->
  
  text = arguments[0]
  out = []
  params = arguments[1] or []
  level = params.level or 'soft' # soft|hard
  minChars = params.minChars or 4
  maxChars = params.maxChars or 8
  
  processWord = (_word) ->
    return _word if _word.length < minChars
    return _word if _word.length > maxChars and level is 'soft'
    _word = _word.split('')
    first = [_word.shift()]
    last = [_word.pop()]
  
    i = _word.length
    
    while --i
      j = Math.floor(Math.random() * (i + 1))
      temp = _word[i]
      _word[i] = _word[j]
      _word[j] = temp
      
    _word.unshift first
    _word.push last
    _word.join ''
    
  words = text.split(' ')
  
  for word in words
    out.push processWord word
    
  out.join ' '

Usage:

Typoglycemia "String with multiple words"

yields Snitrg with mlutiple words

Typoglycemia "I couldn't believe that I could actually understand what I was reading The phenomenal power of the human mind According to a research at Cambrigde University, it doesn't matter in what order the letters in a word are, the only important thing is that the first and last letter be in the right place. The rest can be a total mess and you can still read it without a problem. This is because the human mind does not read every letter by itself, but the word as a whole.  Amazing huh? Yeah and I always thought spelling was important. "

yields I cndlo'ut beveile that I cloud aaultlcy understand what I was renaidg The phenomenal pwoer of the hmuan mnid According to a raceersh at Cambrigde University, it dose'nt matetr in waht oedrr the leretts in a word are, the olny important tihng is that the frsit and lsat leettr be in the rghit pacle. The rest can be a tatol mess and you can slitl read it wotiuht a plemorb. Tihs is bcuseae the hmuan mind deos not read evrey lteter by iletsf, but the word as a wolhe. Amanizg hhu? Yaeh and I aawyls thhugot sllenipg was important.

Available at npm and bower.

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