Blog

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.

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

Custom indent character in Jade

I’ve made a small modification in Jade’s source code to add support for preferred indentation. However it wasn’t pulled to production code I share it with you in case you can’t use additional prettifier or similar improvements on the output.

Pull request on github: optional indentChar implementation

Grunt task example for assetGraph-sprite

grunt.registerTask('dopamineSprite', 'Collects sprite images with assetgraph', function() {
	//https://sourcegraph.com/github.com/One-com/assetgraph/tree
	var done = this.async();
	var AssetGraph = require('assetgraph');
	new AssetGraph({
		root: 'build/app'
	})
		.loadAssets('css/*.css')
		.populate({followRelations: {type: 'CssImage'}})
		.queue(require('assetgraph-sprite')())
		
		.writeAssetsToDisc({type: 'Css'}, "file://temp/app/")
		.writeAssetsToDisc({type: 'Png'}, "file://temp/app/")
		.run(function (err) {
			if (err){
				grunt.log.error('Oops :( ', err);
			}else{
				grunt.log.writeln('Building sprites done. Lovely <3');
			}
			
			done();
		});
});

I wrote this note because the documentation on github is not very self-explanatory. It took me a while to figure out the correct path setup for each parameter. The example above worked fine for me where all my css assets were at build/app and my target directory was temp/app. Note the backslashes at the end of paths.

This is just an example on how to implement a grunt task around assetGraph-sprite. The important thing is to wrap the task in an async way and call done() only in the callback function.

See more: github:assetgraph-sprite