EcmaScript 6: a modern Javascript Language

Javascript is one of the most important language in existence nowadays. Every browser has a built-in Javascript interpreter, NodeJs as a server-side scripting language  is becoming more and more popular, and now it is even possible to use Javascript to build desktop app (Chrome app), mobile app (Cordova/React Native).

The current version of Javascript is ES5 but it lacks of some basic languages feature like: Class, Module separating, Block-scope, etc…  That why ES6 was introduced as an upgrade to current ES5. This blog will cover some basic usage of ES6 and how to apply ES6 to your project

Setup ES6 enviroment

To setup ES6, I prefer to use Babel as the Javascript compiler and Webpack. So the first thing we need to do is install these 2 package

npm install --save-dev babel-loader babel-core babel-preset-es2015
npm install –g webpack

Next we need to create Webpack config file webpack.config.js

module.exports = {
  entry: './entry.js', //This is link to the original file, change it
  output: {
    path: __dirname,
    filename: 'bundle.js';, //This is name for the compiled file, change it
  },
  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}
    ]
  }
};

Next we need to create Babel config file .babelrc

{'presets': ['es2015']}

Finally we just need to execute the following command for Webpack to automatically compile our Javascript


webpack --watch

Basic ES6 syntax

Constant

const pi = 3.14
pi = 5 //error, cannot modify constant

Block-scoped variable

let x = 5;
{
  let x = 5 //This is a new scope
}
x === 5 //This is the old scope
let x = 6 //Error, re-declared variable

Arrow function

odds = evens.map(value => value + 1)
//equal to
odds = evens.map(function(value) { return value + 1; });

Default parameter

function foo(x, y=7, z=42) { return x + y + z }
foo(1) === 50

Template string

var name = 'Bob';
template = `Hello ${name}`; //This is equal to 'Hello Bob'

Module

//file lib/math.js
export function sum(x, y) { return x + y }
export var pi = 3.14
//file app.js
import {sum, pi} from  'lib/math'

Class

class Shape {
  constructor(x, y){
    this.x = x; //This is class attribute
    this.y = y; //This is class attribute
  }

  move(){ //This is a class method
    this.x = this.x + 1;
    this.y = this.y  + 1;
  }
}

Above is some of the usages and how to setup ES6 enviroment. You can find more usage and example from Babel page. Hope you find this is helpful.

Pick the right color for your website

Recently, we developed a feature that allow user to change color for their goals. It allows user to recognize different types of goal in their quarter or in the same team easier. However, the hard part is which color should be used?
Bootstrap has 5 colors, which is called Primary (blue), Success (Green), Warning (Orange), Danger (Red) and we are already used these colors to show the progress of user in the progress bar. We have to pick different colors.
 color-post-original
So, requirements are:
  • Good for white text.
  • Good with current bootstrap color, harmony with same kind.
  • Playful.
So, why some colors are harmony well together? Basically, before custom picking color, we must understand the color concepts & terminology. These are the basic ones :
  • Hue is color (blue, green, red, etc.).
  • Chroma is the purity of a color (a high chroma has no added black, white or gray).
  • Saturation refers to how strong or weak a color is (high saturation being strong).
  • Value refers to how light or dark a color is (light having a high value).
  • Tones are created by adding gray to a color, making it duller than the original.
  • Shades are created by adding black to a color, making it darker than the original.
  • Tints are created by adding white to a color, making it lighter than the original.

 480px-Munsell-system.svg(Munsell Color System: CC BY-SA 3.0, wikimedia.org)

The rule I follow is:
  • Similar saturation will be harmony well.
  • High saturation will stand out before white.
  • High shade colors stays good with low shade colors.
Analyze Bootstrap colors, I have:
Primary: 006DCC (RGB 0,109,204)
  • Hue: Blue
  • Saturation: Very high
  • Shades: High
Screen Shot 2016-03-13 at 7.51.49 PM
Bootstrap color

Success: 5BB75B (91, 183, 91)

  • Hue: Green
  • Saturation: Medium
  • Shades: High
Warning: FAA732 (250,167, 50)
  • Hue: Orange
  • Saturation: High
  • Shades: Very high
Danger: DA4F49 (218,79,73)
  • Hue: Red
  • Saturation: Medium high
  • Shades: High
Info: 49AFCD (73,175,205)
  • Hue: Blue + Green
  • Saturation: Medium high
  • Shades: High
Exclude the Primary colors, other colors have similar Saturation, which make them harmony well. In order to pick 4 extra colors, there are few options:
1. Reduce shades:
Because Bootstrap color shade is already high, so we can reduce shade of them to make them stand out with Bootstrap color. Notice on the color wheel, the color positions are the same, but the shade is darker. It fits all requirements but the playful.
2. Increase saturation of Bootstrap colors:
Increase the saturation of existing color will create next ones those are harmony. Moreover, different hue with high saturation will create a playful feeling for website. Notice on the color wheel, the color position moved farther from the center. However, the saturation of Bootstrap colors already high so it’s very hard to distinguish with the news colors.
3. Change hue, keep similar saturation:
Similar saturation may make color set seem unify. Notice, the radius of color in the wheel are similar to Bootstrap color. So far, this is the best solution to me. It fits all requirements. However, there is a feeling that it will create too many colors on the website.
We can still do better by changing other components like text colors, progress color and so on, but they are not in the scope of this blog. I just hope this post can provide some useful solution if you have trouble with picking color for your website.