Integrating docker.js with Gulp.js

Docker is a documentation generator built on the foundations of Docco and Docco-Husky.

In this example, Docker.js is integrated with Gulp.

This file is gulp-docker.js.

var through = require('through2');
var crypto = require('crypto');
var vinyl = require('vinyl');
var lodash = require('lodash');
var DockerJs = require('docker');
var path = require('path');

module.exports = function(opt) {
  var docker = function(file, encoding, cb) {
    var opts = {
      inDir: file.path,
      outDir: path.join(file.path, 'docs'),
      onlyUpdated: true,
      exclude: '*dist*,*vendors*,*bower_components*,*coverage*,*node_modules*,*test*,.git,docs,*.jade,*.min.js,*templates.js,*.conf.js,*.css,*.html,*estCase.js,*.md,*demo*',
      lineNums: true
    };
    var dockerJs = new DockerJs(opts);
    dockerJs.doc(['./']);
    var checkIfRunning = function() {
      if (dockerJs.running) {
        lodash.delay(checkIfRunning, 100);
      } else {
        cb(null);
      }
    };
    lodash.delay(checkIfRunning, 100);
  };

  return through.obj(docker);
};

Usage:

var docker = require('./gulp-docker');

gulp.task("docs", function() {
  return gulp.src([componentPath])
    .pipe(docker({
      outputType: "bare",
      wrapped: true
    }))
    .pipe(gulp.dest(path.join(componentPath, 'docs')));
});

Using Uglify’s screw-ie8 option

By default UglifyJS will try to be IE-proof, you can pass a flag in Uglify if you don’t care about full compliance with Internet Explorer 6-8 quirks.

You can run

cat input.js | uglifyjs --screw-ie8 -o output.js

If you’re using Grunt, check out the grunt-contrib-uglify package.

Example usage:

grunt.initConfig({
  uglify: {
    options: {
      compress: {
        screw_ie8: true
      },
      mangle: {
        except: ['jQuery', 'Backbone'],
        screw_ie8: true
      }
    },
    my_target: {
      files: {
        'dest/output.min.js': ['src/input.js']
      }
    }
  }
});

At my work, we recently were given the option not to support IE8 and I’ve been removing my IE8 hacks since.

Using Jade

If you haven’t already used Jade, you should give it a go here.

Jade is a templating language that’s well suited for Node.js projects. It’s less verbose, supports inheritance for templates and have blocks. Through this Jade promotes reuse.

My only grip with Jade is you always have to keep declaring the template you extend from. I wish this could be defaulted somehow.

Example of Jade:

div: p Hello

Example output in HTML:

<div>
  <p class="S">Hello</p>
</div>

Another useful resource to convert HTML to Jade is Html2Jade which I use to convert much of Bootstrap examples to Jade for easy incorporation into my work.

The mustache-spec languages

Interesting background on Mustache.rb in Jan Lehnardt’s blog on why Twitter wrote Hogan.js:

Around the same time Twitter started using mustache.js in the frontend and it was a great honour. But they too preferred a proper parser/compiler implementation so @fat & team went ahead and wrote Hogan, a mustache.js-compatible implementation with a faster load and runtime. @fat talked about this at his 2012 JSConf US talk, he got asked why he didn’t submit a pull request to mustache.js instead of making a new project. He said that a Pull Request that consists of “Hey, I threw away all your code and replaced it with mine” isn’t such a good idea. I agree, it wouldn’t have left the best impression.

Mustache has grew to become one of the most used templating languages, thanks to its expressiveness and simplicity. Designers especially love it.

JavaScript templating engines such as Hogan.js, Underscore, handlebars and Angular are using the mustache spec in one way or another.

Talk on identity and cookies

I gave a talk regarding identifying users without cookies.

Today, cookies are harder to use for tracking purposes for analytics companies. One of the major usages that come up from cookie tracking is behavioral targeting. In advertising terms, behavioral targeting is about tracking what pages the user is visiting and building a profile of what kind of advertisements would interest the user.

However, we also learnt that one-in-three web users delete their cookies in a month. This reduces the capability of this technique.

Ignoring the obvious social aspects tracking, I wanted to delve into how to track users without cookies — by fingerprinting.

Here’s my deck:

If you’re interested, you can take a look or contact me at t@kw.sg to learn more.

Disclaimer

I work as a web UI (frontend) developer in Singapore for a video advertising trafficking and analytics company Tremor Video.

Shortcuts for true and false

Let’s explore Uglify.js today. UglifyJS2 is a JavaScript parser, minifier, compressor or beautifier toolkit.

Installing UglifyJS

To install Uglify.js:

sudo npm install uglify-js -g

Compressing with UglifyJS

You take one simple file test.js:

var foo = true;
var bar = false;

And uglify it into test.min.js using the following command:

cat test.js | uglifyjs -o test.min.js -c

Here’s the result in test.min.js:

var foo=!0,bar=!1;

So what’s interesting is how Uglify compresses literals such as true and false into smaller units. You see that true is represented with !0 and false with !1.

You can learn a lot from exploring how Uglify compresses JavaScript.

My typical web application structure

I tend to put my Node.js Express projects in this manner. I’m pleasantly surprised when I realized Ghost blogging platform did it in a similar way.

I always have two top directories in my repository — server and client.

In my server directory I can have the directories models, controllers and views. In views I have a templates directory.

server
|-- app.js
|-- routes
|   |-- index.js
|   `-- user.js
`-- views
    |-- index.jade
    |-- layout.jade
    `-- templates
        |-- base.jade
        `-- minimal.jade

The client side structure. I use the less-middleware and put my LESS.js files.

client
|-- controllers
|-- less
|   `-- app.less
`-- public
    |-- css
    |   `-- app.css
    |-- img
    `-- js

Here’s my server/app.js with the less-middleware:

var express = require('express');
var lessMiddleware = require('less-middleware');
var app = express();

app.use(lessMiddleware({
    dest: path.join(__dirname, '../client/public/css'),
    src: path.join(__dirname, '../client/less'),
    prefix: '/css',
    compress: true
}));
app.use(express.static(path.join(__dirname, '../client/public')));

http.createServer(app).listen(app.get('port'), function() {
    console.log('Express server listening on port ' + app.get('port'));
});

I’m not quite settled with this structure yet but it’s getting there and I’m starting to see this as my preferred way of structuring an application.

One thing I learn from Ghost is that they use BookshelfJS. Haven’t got time to look at it much but Bookshelf has a familiar Backbone feel to it and that’s really welcomed.

If you like to share with me your web directory structure, do email me at t@kw.sg and reference this article.

Just another WordPress site