March 27, 2016

Vertical align an unknown size image

Some ways to vertiacl align an image in a div, the image’s width and height are unknown Use a helper incline-block div to vertica the image. The helper’s width is 0 Use a tricky way top, right, bottom, left all 0 and margin auto Use css transform translateY demo

June 17, 2015

Unit test Angular directive

I seldom test angular directive unless there is some DOM mutation being processed in the directive, like add/remove classes, show/hide elements or compile/destroy elements. If you have a heavy dependencies on directives, the unit test will be a little bit clunky as for mocking the inline controller of the required directive. Stack overflow gives several alternatives to do so, I am picking two of them which I prefer to go and demo them here. ... Read more

January 31, 2015

Scope, the most important thing in JavaScript

cope and scope chain, the most important mechanism in JavaScript, are barely clearly explained though specified in ECMA-262 version 5.1. Without scope mechanism, there wouldn’t be closure and functional programming. This post is aim to elaborate what happens behind from the very beginning when control enters the global code to execution end. Firstly, for easy literal, let’s agree on the following abbreviation: GE: Global Environment VE: Variable Environment LE: Lexical Environment OLE: Outer Lexcial Environment Reference ER: Environment Record EC: Execution Context go: global object (window for browser, global for NodeJS) ... Read more

January 1, 2015

Hoisting, what happens behind it

We always see the word hoisting in some javascript books and technical blogs. Hoisting is grabbed to explain the phenomenon that we can use a variable before we declare it. That’s sound incredible in compiling languages, but in javascript it’s really there. Some people might think that the interpretor do a magic to restructure the code and put all variable/function declaration statements at the top of the function body. Thinking like that way might help to write or read the program, but that’s not the things truely happen behind. ... Read more

December 23, 2014

Repeat a capturing group, pitfall in RegExp

RegExp is esoteric, known to all, but you will find it incredibly effecient when you start to get used to it. I like to use RegExp, but sometimes I tend to make mistakes, the most common of which is to repeat a capturing group. Let’s think about this. Given a string 'a=1;b=2;...;k=n', I would like to capture k, n of each pair to form an array like ['a', 1, 'b', 2, . ... Read more

December 16, 2014

Handle HTTP request in multiple processes in NodeJS

NodeJS is single process based which is good at frequent IO operations. But single process can’t fully utilize multi-core CPU. Luckily we have child-process module in NodeJS to spawn multiple processes. One of the practical examples is handling HTTP request, especially for a large number of concurrent requests. A common way is to use master-worker pattern, a master process working as a proxy to delegate the HTTP requests to child processes with load balance enabled. ... Read more

December 11, 2014

$provide.decorator - tweak Angular servicer

If you are using Angular, you can’t avoid depending on third-party modules. Sometimes you find it not that perfect API the module provides, so that you hack into the source code and about to pull request. But the author’s comments on your pull request, usually for popular repo, ‘sorry-that’s not our priority’ turns you down totally. Either you work around it or turns to another third-party module. Here is the third option, if you want to share the private data in service closure and provide some API for your specific need, you might find $provide. ... Read more

December 4, 2014

Function overload in JavaScript

As we know, Javscript has no function overload in nature. If you try to declare the same function with different signature, the previous one will be overwritten rather than overloaded. As function overload in most OO programming languages are by means of parameters, it operates on different logic according to the passed in parameters. So there is still a way to do function overload in JS. var foo = { bar: function () { switch (arguments. ... Read more

December 1, 2014

JavaScript prototype and inheritance

Inheritance in JS is quite different from class based inheritance which is popular for being used in C++ and Java. In class based inheritance language, we have to abstract a class which is not a real world subject. While in prototype based inheritance, we can implement inheritance on objects directly. The post walks you through how to do inheritance in JS. Simple object inheritance As every object has an internal property [[prototype]] which points to it’s prototype, we can directly assign a super object to it. ... Read more