Blog

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

Killing productivity with push notification

..push email is a mortal enemy of flow state and is part of a conspiracy to prevent you from solving any remotely complex problems. Checking email should be a conscious decision, done when it makes sense as part of your individual schedule, rather than a motor reflex in response to the rest of the world’s perceived urgencies.

Read more: I Quit Information For Three Months & Nothing Bad Happened/

Stylus mixin for Rem Font Sizing

font-size(_size)
    if unit(_size) == 'rem'
        font-size (_size*10)px
    font-size _size

//Usage
p
    font-size 1.2rem

yields

p{
    font-size: 12px;
    font-size: 1.2rem;
}

LESS.js contribution

Less.js has code that I wrote :). Sweeeet.
Teh merge