Using XMLHTTPRequest (ajax) transporting data between client and server has been popular for a while. Sometimes, we want our browser to retrieve binary data from server (as ArrayBuffer or Blob) such as pdf, image, and psd files. This post will go through how to achieve it with XMLHTTPRequest and jQuery.

more >>

What am I doing

It is incredibly easy to make a rich web application like psdetch working offline with Service Worker. 5 minutes are all you need!

more >>

Step 1 Prepare tools

To setup a brand new raspberrypi zero w you need prepare following tools:

• A raspberrypi zero w
• mini HDMI to HDMI convert
• Micro SD card
• USB OTG
• Mouse & Keyboard
• An external SD card reader

All coneectors can come from seller when you purchase Raspberrypi zero w.

[[Picture]]

Step 2 Download Raspbian Image

You can download official Raspbian OS from here. If you want use other operation systems, it is same setup setups.

Step 3 Write Image to Micro SD card

Be aware, writing image to micro sd card will wipe all data on it

Connect micro sd card to your mac through micro sd card reader.

Once you can see your sd card in finder, you need find out the disk in system.

Open a terminal and run diskutil list:

Find your sd card disk by its name. On my machine, the /dev/disk2 in red rectangle is the disk in system and copy disk2 only (not /dev/disk2) into clipboard.

Unmount the sd card from finder but do not unplug it.

Now, we need flash the image downloaded to sd card. You may need unzip it if the downloaded file is zipped by double click the file in finder. Below is the command to use:

1

sudo dd bs=4M if=<path to downloaded .img file>  of=/dev/r<disk>

Replace the path and <disk> to your own one.

Step 4 Plugin and setup

Now insert the flashed micro sd card to Raspberrypi Zero W and connect everything and you are ready to go.

[Picture]

General Problems

• Resource busy: You need unmount the partitions mounted before you could use dd to write the disk. See above.
• Permission denied: Make sure write protection on your sd card is open. Also use external SD card reader instead of Mac built-in one which could cause this issue.
• Operation not permitted: Make sure your device exists in system (check /dev/diskN)

Taking screenshots with MacOSX is very useful when writting blogs or documents. The system has powerful built-in screenshot function. However, the default location to store the screenshot files is Desktop.

This blog will go through how to change the location of screenshots to another folder.

Step 1 Create a folder

Create a new folder anywhere using finder or terminal. Here I created blog_statics folder in my Google Drive folder.

Step 2 Change default location of screenshots

Click the created folder in last step and press Command+C to copy the full path to clipboard.

Press Command + Space and type terminal to open terminal

In terminal, type following command:

1

defaults write com.apple.screencapture location <Folder Location>

Note the is the location of your create folder. You could Command+V to paste it from clipboard

It should give following result:

Now all new screenshots should be stored in that place.

WebWorker has now been supported by majority of browsers (link). I have started to use WebWorkers seriously in my projects (web pages / web apps / cordova mobile apps).

Below reference pages were used while doing my study:

• Using webworkers
• webworker and phonegap

I found this tutorial is relatively simple to follow to create a simple PKI infrastructure

Run docker in docker

1

docker run --privileged -i -t -d --restart=unless-stopped -p 2376:2376 -p 10000-11000:10000-11000 -p 10000-11000:10000-11000/udp -v /mnt/opt:/opt:rw -v /etc/docker:/etc/docker:ro -v /mnt/var/lib/docker:/var/lib/docker --name=docker docker:dind  -H tcp://0.0.0.0:2376 --storage-driver=aufs --tlsverify --tlscacert /etc/docker/ca.pem --tlscert /etc/docker/server.pem --tlskey /etc/docker/server-key.pem

Netcat (nc) is very powerful tool. Install apt-get install netcat
Send UDP packet with netcat:

1

echo "content goes to server" | nc -u <ip> <port>

e.g.

1
2
3
4
5
6
7
8
9
10
11
12
13

.select-type-1{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding:1em;
  border:1px solid #ee7122;
  color:white;
  text-align: center;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  background: rgba(255, 255, 255, 0.12) url("../img/arrowdown.png") no-repeat 90% 50%;
  background-size:10%;
}

self-explained.

To create an overlay network on multiple hosts over swarm, following are required:

• a key-value store service: this is used for broadcasting hosts / swarm agents. It can be same kv store swarm used for discovery
• Run docker daemon with following parameters:
  • cluster-store: where the store is
  • cluster-advertise: what network interface to be advertised

Setup consul KV store

1
2
3
4
5
6

docker run -d \
    -p "8500:8500" \
    -h "consul" \
    --restart=unless-stopped \
    --name="kv_store"\
    progrium/consul -server -bootstrap

Daemon Options

1
2

--engine-opt="cluster-store=consul://$(docker-machine ip mh-keystore):8500"
--engine-opt="cluster-advertise=eth1:2376"

All swarm-agents should have these options otherwise it will be likely get this error:

1

Error response from daemon: 500 Internal Server Error: failed to parse pool request for address space "GlobalDefault" pool "" subpool "": cannot find address space GlobalDefault (most likely the backing datastore is not configured)

Create overlay network

If using docker-compose, there is nothing need to do. As docker-compose will automatically create defaul network if:

• Single host: it will create a bridge
• Multiple host: it will create a overlay

Once docker-compose file finished, just run docker-compose up -d which will create network correspondingly.

otherwise simply use following command at your swarm:

1

docker network create --driver overlay --subnet=10.0.9.0/24 my-net

Docker-compose build on Swarm

There is limitation for docker-compose build as it cannot find the target node to build the image.
The only way currently is to build on the node and tag it rather than on swarm.

1

docker build -t <tag name> path/to/dockerfile

According to this, do following to determine the client ipaddress:

1
2
3
4

var ip = (req.headers['x-forwarded-for'] ||
     req.connection.remoteAddress ||
     req.socket.remoteAddress ||
     req.connection.socket.remoteAddress).split(",")[0];

Testing with web app is always fun. Angularjs makes it even better.
This quick note bootstrap any angular.js projects embracing with unit tests.

Tools

Unit testing in Angularjs is using (by default) Jasmine and Karma.

Also, angular-mocks needs to be installed. It is needed for injection and some other mock objects.

1

bower install --save angular-mocks

more >>

According to mongoose.js doc, it is able to set setters to a field on schema.
However, the doc is not quite detailed and obselete.
Some example:

1
2
3
4
5
6
7
8
9
10
11

var schema=new Schema({
  password:{
    type:String,
    required:true,
    set:hash
  }
})
function hash(plainPwd){
  return require("crypto").createHash("sha1").update(plainPwd).update(secret).digest("hex");
}

The hash will be called mainly on following scenarios:

• When a new doc being created.

  1	model.create({password:"12345"}) //password will be hashed

• When set a value to a doc.

  1	doc.password="22222" // 22222 will be hashed

However, this will not work for update query:

1
2
3

model.update({_id:<id>},{$set:{password:"12345"}}) // password will not be hashed
model.findOneAndUpdate
model.findAndUpdate

For password, it is able to write beforeUpdateHook

1
2
3
4
5
6
7
8

schema.methods.beforeUpdateHook=function(data){
  if (!data || this.password === data.password){
    return ;
  }
  if (data.password){
    data.password=hash(data.password);
  }
}

Mongodb needs extra collection for two phase lock.

1
2
3
4
5
6
7
8
9

var transactionSchema=new Schema({
  lastModified:Date,
  status:{
    type:String,
    default:"new",
    index:true
  },
  data:{}
})

The transaction life cycle is new->pending->applied->done

more >>

When put wordpress blog behind a reverse proxy (e.g. nginx), some headers have to be setup:

1
2
3
4
5
6

proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header HTTP_X_FORWARDED_PROTO $scheme;

minimist is a lightweight cli argument (command line arguments) parser:

1
2
3
4
5
6
7
8
9
10
11

require('minimist')("-x 3 -y 4 -n5 -abc --beep=boop foo bar baz");
//output:
{ _: [ 'foo', 'bar', 'baz' ],
  x: 3,
  y: 4,
  n: 5,
  a: true,
  b: true,
  c: true,
  beep: 'boop' }

1
2

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale

Makes text clearer

What is Docker and why?

See here

In short:

• Docker is a container tech based on LXC
• Much less resource than VM by sharing cores
• But provide full run-time isolation
• It makes system deployment much faster
• and easier system operation

Still don’t know why? Check out use cases here

more >>

Resize

Switch on / off resize of a textarea on horizontal / vertical / both.

1

<textarea style="resize:horizontal"></textarea>

The resize property can be either:

• vertical: only resize vertically
• horizontal: only resize horizontally
• none: disable resize (also remove the resize area on right bottom.)

Outline

Remove or change style of outline when textarea is focused on safari / chrome etc.

1

<textarea class="customize"></textarea>

1
2
3

.customize:focus{
  outline-color:red;
}

Today, I moved my blog from Wordpress to Hexo. I use github.io to host the blog.

The reason I choose Hexo not Jekyll mainly is I am more familiar with Node.js than Ruby so I can write plugins easily.

Hexo is a very powerful static content generator which converts MarkDown posts to Html.

more >>

Demo: Click here

Document & API: See Github site for more information.