Ajax (XHR) download binary content as Blob

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 >>

how to change MacOSX screenshot location

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.

Picture

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:

img

Now all new screenshots should be stored in that place.

run docker in docker

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

Customised select styles

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.

Docker multi-hosting network quick note

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

Quick Note for Unit Tests in Angularjs

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 >>

mongoosejs: setters schema

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);
}
}

wordpress reverse proxy headers

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;

textarea quick hack

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;
}

Move to Hexo

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 >>