Blog

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.

Stylus: Inline-block with conditional IE support

A snippet that I miss in every project where I use nib:

/*
 * Inline-block with conditional IE support.
 */
display(mode, args...)
  if mode == 'inline-block'
    display inline-block args
    if support-for-ie
      zoom 1
      *display inline args
  else
    display mode args

//Usage
a
    display inline-block

yields

a{
    display: inline-block;
    zoom: 1;
    *display: inline;
}

Pulla’

Probably one of the weirdest vendor-prefix combos on the market

.no-more-bold-fonts-on-OSX-please{
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

Awkward. A paid actor has approved the solution.

Read more.

Things change

- Guys, guys I think I’ve finally found the best place for our new subscribe box. Check this out!

- Great job, push to master!

Screen Shot 2014-02-06 at 10.47.29 PM

Gulp

I can’t save a stylus file and switch fast enough to Terminal to see the actual compilation logging. Because it is already finished. (Stylus project with 27 files and Nib)

//...
[gulp] Running 'stylus'...
[gulp] Finished 'stylus' in 415 μs