JavaScript

Setup npm proxy in a corporate network

It’s painful to work behind a corporate network and everything does not work out of the box. Simple command like npm install would not work and here is how to work through the proxy:

Assuming you somehow get nodejs installed in your corporate laptop, open the .npmrc file which typical in the path for windows C:Users<your_user_id>.npmrc or mac Users/<your_user_id>/npmrc

Edit the file with this:

https-proxy=http://yourcompanyproxy.com:80
proxy=http://yourcompanyproxy.com:80
strict-ssl=false
registry=http://registry.npmjs.org

Try to run npm install again it should work now!

One more tip if you have some dependency hosted in your corperate internal Nexus npm repository, for example in the @ npmcorp scope, then run the below command to nominate the correct registry URL:

npm config set @npmcorp:registry https://your-company-nexus:80/nexus/content/repository/npm-internal

Then you should be able to overcome dependency not found errors. Try it out 🙂

Deploy Koa.js Application to AWS EC2 ubuntu instance

I am developing a Koa application, which is a new web framework designed by the team behind Express. Here is a step-by-step tutorial on how to deploy the koa.js application on your Amazon Web Service (AWS) ubuntu server.

Firstly, launch the ubuntu instance on AWS. Then you need to change the security group.


Otherwise if you hit the public domain in browser, it would stuck at “Connecting” state until timeout. And the site can’t be reached as shown as the screenshot below:


By default, the launch wizard group only has type ssh.


Click “Edit” button add HTTP port 80 and HTTPS port 443 inbound rule:


Secondly, ssh into your instance, install nodejs according to the official documentations:

$ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
$ sudo apt-get install -y nodejs

Thirdly, we use Nginx as reverse proxy server:

$ sudo apt-get update
$ sudo apt-get install nginx

Open the configuration file and edit as below. Be careful not to miss the semicolon:

server { 
    listen 80 default_server;
listen [::]:80 default_server;
    root /var/www/yourApp;
    location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}

Save the file and restart nginx service:

$ sudo systemctl restart nginx

Finally, clone your git repository to the path /var/www/yourApp, you will get a permission denied, so change ownership of the folder. You may replace the ubuntu part to ‘whoami’:

$ sudo chown -R ubuntu /var/www

Run your server, for example a simple app.js:

var koa = require('koa');
var app = koa();

// logger

app.use(function *(next){
var start = new Date;
yield next;
var ms = new Date - start;
console.log('%s %s - %s', this.method, this.url, ms);
});

// response

app.use(function *(){
this.body = 'Hello World';
});

app.listen(3000);

Start the server:

$ node app.js

Open your browser and hit your public domain:


Done. Leave a comment below if you have any questions 🙂

Trivial facts about Javascript date

Fact 1:

Integer value representing the month, beginning with 0 for January to 11 for December. For example,

Today is

var date = new Date(2016, 3, 29, 11, 10, 30)

instead of

var date = new Date(2016, 4, 29, 11, 10, 30)

Fact 2:

The JavaScript date is based on a time value that is milliseconds, while UNIX timestamp is in second since 00:00:00 UTC on January 1, 1970.

For example, to convert a unix time:

var date = new Date(UNIX_Timestamp * 1000);

What I learned from building large-scale application for overseas clients

The I.T. industry in China is a rapidly growing market. Over the last 1 year in Hong Kong, I’ve been lucky enough to work on an exciting project. I’ve also had the chance to learn something that’s never encountered before, making a major milestone for career.

Like many other projects, it is better to have every team member in the same place. I worked with the remote colleagues in different time zones, including Pacific Standard Time, some with UTC-06:00, and others with UTC+10:00… but it’s not ideal in terms of productivity.

The other challenge is you need to speak the customer’s language. For those of you who speak Chinese but can’t type fast, I would recommend to learn pinyin input method in order to catch up with the fast conversations in QQ chat.

To foreigner’s surprise, China has censorship of Github, so you can’t simply use npm install && bower install within the firewall. Hosting on AWS and some analytics tools are also blocked, so you have to find alternatives. Besides, your colleague developers may have a different work style instead of adapting scrum methodology or use JIRA board for visibility.

Our public beta test of the Ember application, however, has performance issue. The initial load and rendering is pretty slow, even though Ember has nice development tools. To make things worse, at least 20% of customers have low end specification computer with old browser. I was stunned to witness Windows XP turns to blue screen of death by simply loading font awesome icons. Eventually, we solve this biggest problem by refactoring with vanilla js. Although the speed is awesome, the amount of code written is doubled with triple amount of states and bugs to handle, which is not ideal either.

We’ve learned one important thing the hard way. In retrospect, you need to have full control of delivery pipeline, otherwise you’ll never release. It’s an art to ship early and often. We spent months working on 3 re-designs, unfortunately it’s still not able to launch regardless of all the positive feedback we received. It’s too risky for big cooperate to change, and it’s too hard to overcome the big cooperate’s culture with fear of change.

With this project experience, we have learnt a lot in both tech side and project management side. Shipping early and often is the best practice, and I hope to apply some of these techniques to other projects in the future.

What I learned from building a large-scale application for overseas clients

The I.T. industry in China is a rapidly growing market. Over the last 1 year in Hong Kong, I’ve been lucky enough to work on an exciting project. I’ve also had the chance to learn something that’s never encountered before, making a major milestone for a career.

Like many other projects, it is better to have every team member in the same place. I worked with the remote colleagues in different time zones, including Pacific Standard Time, some with UTC-06:00, and others with UTC+10:00… but it’s not ideal in terms of productivity.

The other challenge is you need to speak the customer’s language. For those of you who speak Chinese but can’t type fast, I would recommend learning pinyin input method in order to catch up with the fast conversations in QQ chat.

To foreigner’s surprise, China has censorship of Github, so you can’t simply use npm install && bower install within the firewall. Hosting on AWS and some analytics tools are also blocked, so you have to find alternatives. Besides, your colleague developers may have a different work style instead of adapting scrum methodology or use JIRA board for visibility.

Our public beta test of the Ember application, however, has a performance issue. The initial load and rendering are pretty slow, even though Ember has nice development tools. To make things worse, at least 20% of customers have low-end specification computer with an old browser. I was stunned to witness Windows XP turns to the blue screen of death by simply loading font awesome icons. Eventually, we solve this biggest problem by refactoring with vanilla js. Although the speed is awesome, the amount of code written is doubled with a triple amount of states and bugs to handle, which is not ideal either.

We’ve learned one important thing the hard way. In retrospect, you need to have full control of the delivery pipeline, otherwise, you’ll never release. It’s an art to ship early and often. We spent months working on 3 re-designs, unfortunately, it’s still not able to launch regardless of all the positive feedback we received. It’s too risky for big cooperate to change, and it’s too hard to overcome the big cooperate’s culture with fear of change.

With this project experience, we have learnt a lot in both the tech side and project management side. Shipping early and often is the best practice, and I hope to apply some of these techniques to other projects in the future.

How to use Webpack with React and Bootstrap

I was setting up a project today using Webpack, React and Bootstrap without jQuery. This supposed to be a straight forward task , but turns out I have spent a bit of time to figure it out. So I’m going to document the steps as shown below:

Firstly, install all dependencies:

npm install react react-dom bootstrap react-bootstrap babel-preset-react --save
npm install webpack css-loader style-loader file-loader url-loader babel-core babel-loader babel-preset-es2015 --save-dev

Then, add the loaders in your webpack.conf.js:

var path = require('path');
var webpack = require('webpack');

module.exports = {
entry: './main.js',
output: { path: __dirname, filename: 'bundle.js' },
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /.css$/,
loader: "style-loader!css-loader"
},
{
test: /.png$/,
loader: "url-loader?limit=100000"
},
{
test: /.jpg$/,
loader: "file-loader"
},
{
test: /.(woff|woff2)(?v=d+.d+.d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff'
},
{
test: /.ttf(?v=d+.d+.d+)?$/,
loader: 'url?limit=10000&mimetype=application/octet-stream'
},
{
test: /.eot(?v=d+.d+.d+)?$/,
loader: 'file'
},
{
test: /.svg(?v=d+.d+.d+)?$/,
loader: 'url?limit=10000&mimetype=image/svg+xml'
}
]
},
};

Next, in your main.js (or whatever your entry file), import Bootstrap css:

import App from './app.jsx';
import Bootstrap from 'bootstrap/dist/css/bootstrap.css';

Finally, in your app.jsx, import react bootstrap:

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'react-bootstrap';
const buttonsInstance = (
<Button>Click me!</Button>
);
ReactDOM.render(buttonsInstance, document.getElementById('here'));

Not to mention you also need the div with this id as well as the bundle.js:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello React</title>
</head>
<body>

http://bundle.js
</body>
</html>

That’s is it! Let me know if you have any questions.

What To Expect From Coding Bootcamps

24 August 2015

Thinking of joining a coding bootcamp? Join us as our speakers share their bootcamp experiences at Hack Reactor and GA’s Web Development Immersive. You’ll hear from our panel about: — What to expect at a coding bootcamp — Positive and Negative experiences — How to make the most out of your time — Post-Graduate/Job Search experience — Was it worth it?

Host and Speakers:

Ryan Leung — Ryan is a full stack software engineer and former Hacker-in-Residence, and attended the Hack Reactor Remote Beta course.

Victor Leung — Victor is a software engineer currently working in Hong Kong who attended GA’s Web Development Immersive and Hack Reactor Remote Beta.

Raghuvir Kasturi — Raghu is a full stack software engineer and former Hacker-in-Residence, and attended the Hack Reactor Remote Beta course.

https://youtu.be/ZNenDuMWeo4


Originally published at victorleungtw.com on August 24, 2015.