Blog

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;
    }
}

How to make MacBook wake you up in the morning (Ad Hoc version, without apps)

Last night my phone’s battery was down so I needed to figure out a way to wake myself up in the morning with the help of my MacBook. Fortunately it was quick and funny. And probably shorter than other’s method.

The video player at southpark.cc.com has a somewhat annoying bug that after waking up your computer it starts playing. Make sure you turn up the volume.

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.

Codegolf | Code that will only execute once in Coffeescript

_=->_=1

Inspiration: stackoverflow

gulp-browserify module alias like in RequireJS

So you have this in one of your components:

//main.coffee
$ = require 'jquery'
R = require './../../vendor/ractive/Ractive.js'
console.log 'Ractive', R.VERSION

// More code..

Our problem is with R = require './../../vendor/ractive/Ractive.js' which is ugly. So you would like to make it more lovely without exposing the lib into global namespace. With Gulp you can have it in a really weird way.

//Gulpfile.js
gulp.task('coffee', function () {
	var config = {
		debug: false,
		extensions: ['.coffee','.js'],
		insertGlobals : true,
		transform: ['coffeeify'],
		shim: {
			console: {
				path: './vendor/console-polyfill/index.js',
				exports: 'window'
			},
			jquery: {
				path: './vendor/jquery/dist/jquery.min.js',
				exports: '$'
			}
		}
	};

	var bundle = gulp.src('./src/coffee/main.coffee', {
		read: false
	})

	return bundle
		// Here is the magic
		.pipe(plugins.browserify(config).on('prebundle', function(bundler){
			bundler.require('./vendor/ractive/Ractive.js', { expose: 'Ractive' });
			
			/*
			 * If you won't use jquery plugins and you don't need it in window.$:
			 */
			//bundler.require('./vendor/jquery/dist/jquery.min.js', { expose: 'jquery' });
		}))
		.pipe(plugins.rename('bundle.js'))
		.pipe(gulp.dest('./dist/scripts'))
		.pipe(plugins.connect.reload());
});

Now you can:

//main.coffee
$ = require 'jquery'
R = require 'Ractive'
console.log 'Ractive', R.VERSION

// More code..

Afaik gulp-browserify is going to be rewritten as this feature should be available in browserify’s config, near transforms and shim.