December 21, 2016

Provision AWS Lightsail with Ansible

Amazon has announced a new cloud service Lightsail recently aiming at DigitalOcean, with exact same price and same spec of node. As a heavy DigitalOcean user, I am more than happy to try the alternative provided by AWS. Creating the first instance is not smooth, I got successfully created the first instance by AWS SDK after 3 weeks in and out mails with the support team. TL;DR This post is a quick guide on provisioning the instance by Ansible. ... Read more

November 18, 2016

Https for everything

HTTPS is highly recommended for every web site, as a web developer I am building both my personal and company app under https. Applying for the certificates could be a block for you to migrate/build your site to https as you need to pay for it and it could take quite a while. Thanks to letsencrypt now we can have free open certificate authorify for our sites. I will list the least steps to build a site by using certbot ... Read more

September 11, 2016

How to make ngrx/store work with HMR

In my previous post, I talked of a way to develop angular 2 app with HMR. The vendors I use are @angularclass/hmr and @angularclass/hmr-loader Later on, I thought I might need a data flow tool like redux to manage my app state and I found ngrx/store @angularclass/hmr injects some hmr prefix life cycles into the main module to let you to restore the data. But app state management is optional and you can choose your own way to implement it, so I will walk you through how I implement HMR with ngrx/store ... Read more

September 3, 2016

Angular2 HMR with backend server supported

Currenly I am developing a client + server side boilerplate with Angular 2 and Feathers. For server side, I am using ts-node with nodemon, so far so good. But I find it cumbesome that every time I need to bundle client side code. After some exploring, I find a way to solve the problem. These are the dependencies: angular2-hmr a bootload wrapper on bootstrapModule, it’s cleared classified how to use in github angular2-hmr-loader, a webpack loader to work with the previous one webpack-dev-middleware, just like webpack-dev-server webpack-hot-middleware, an express/feather middleware just like webpack-dev-server w/ hot All of their READMEs clearly walk you through, it just suprises me that few information could be connected on this while it’s a quite general practice in React

March 27, 2016

Vertical align an unknown size image

css
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