Slight change of directions

October 26, 2014

Previously I wanted JavaScript.sg to be more of a post-based blog of my every day development work however it may not be relevant to much people. I started to give more thought how this blog can be more relevant and also receive more organic visitors.

A few things I deem as important:

  1. Code quality and syntax highlighting
    Syntax highlighting previously just isn’t there. It makes things harder to read. This is corrected. Code are reduced to be more concise now.
  2. More lists
    Lists are always easier to maintain and it suits my work style. Typically I grow an article over time and it was looking like a list before it becomes a full article.
  3. Less of a blog, more of a magazine
    I’ll be queuing more posts rather than just publishing randomly from 2015.
  4. Better indexing by search engines
    I want search engines to be able to locate my articles better. That means a better set of maintained tags.

Other nice-to-haves:

  1. Twitter shares
    I want people to share my articles on Twitter. Perhaps a share button would be good although the previous time I have that, almost nobody clicks on them.

Useful gulp plugins

October 26, 2014

gulp-sourcemaps

If you use uglify, you probably would find gulp-uglify most useful. But what if you want to have sourcemaps, then gulp-sourcemaps is what you need.

gulp-newer

gulp-newer is a useful gulp plugin. Currently my work involves 30+ images to be compressed. This means each time the imagemin command is ran, it goes through all 30+ images and attempts a compression again.

The final leg

August 28, 2014

This can’t be more true:

“The first 90 percent of the code accounts for the first 90 percent of the development time. The remaining 10 percent of the code accounts for the other 90 percent of the development time.”
–Tom Cargill, Bell Labs

In order to mitigate this, I used to multiply my effort by two.

Things I look out for that could potentially derail the development time:

  1. Number of points of integration
    This may sound obvious but we often forget that tasks cannot always happen concurrently, it’s a lot of waiting in between. The time coworkers take to finish varies and they may themselves underestimate or overestimate the complexity of their parts.
  2. Interfacing format definition
    If it is going to be JSON, it’s great but remember to come up with the data structures early. Usually if my counterpart is someone I am familiar with, I do roughly know what to expect from him or her. Make sure everyone encodes and decodes at their own end.
  3. Uncertainty of task
    For work that is highly exploratory especially, it’s important to add sufficient overheads.

Integrating docker.js with Gulp.js

August 19, 2014

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.

Usage:

Using Uglify’s screw-ie8 option

August 18, 2014

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

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

Example usage:

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

Using Jade

August 18, 2014

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:

Example output in HTML:

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

August 18, 2014

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

August 18, 2014

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

August 18, 2014

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

Installing UglifyJS

To install Uglify.js:

Compressing with UglifyJS

You take one simple file test.js:

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

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

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.

How to quickly add SSH public key

August 18, 2014

One liner to quickly add SSH public key from your computer to the remote server:

Replace 127.100.100.100 with your hostname or server IP address.

Using Mac OS X

If you have brew, it’s even easier:

With that you will be able to do this: