How to deploy website to openshift with nginx?

Although Openshift is able to use docker images, it has much more restrictions like no root user. Thus not all docker images can work straight on Openshift. Unfortunately, the official nginx docker image does not work on openshift.

In this post, I will simply go through how to run this Official RedHat nginx image on Openshift and deploy a website onto it.

How to download binary content as Blob in JS with Ajax(XHR)

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.

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.

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

get client ip address in express.js

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

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

Using setter in Mongoose

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

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;

minimist: a neat cli argv parser

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

css: font-smoothing

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

Makes text clearer

css

Docker Quick Notes

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

How to make textarea resizable and change its default outline style

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.