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

is not equal to

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

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.

• 1. Apple -> System Preferences -> Energy Saver -> Schedule..
  
• 2. Go to http://southpark.cc.com/full-episodes, start playing a random episode and hit pause on the player.
• 3. Apple -> Sleep. Without closing your MacBook.

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.

_=->_=1

Inspiration: stackoverflow

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.

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’

.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.

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

– Great job, push to master!

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

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.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