Practice makes perfect

<div id="samplemodal" class="modal-contain">
  <div class="modal">
    <a href="#">X</a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

//Hide the modal when nothing happen
.modal-contain {
  display: none;
}

//When modal-contain is targeted. Show it
.modal-contain:target {
  display: block;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.75);
}

//In order to vertical and horizon align
.modal {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  margin: 0 auto;
  width: 25em;
  padding: 1em;
  background: #fff;
}

h3 {
  a:target {
    color: blue;
  }
}

App.PostRoute = Ember.Route.extend({
  events: {
    showWarn: {
      this.render('warn', { "outlet": "msgView", "into": "post" })
    }
  }
});

App.PostController = Ember.Controller.extend({
  actions: {
    showMessage: {
      //some process here
      if (need_render) {
        this.get('target').send('showWarn');
      }
    }
  }
});

<div>
  <div id="signin" class="signin-btn">Signin</div>
</div>

$('#signin').on('click', function(event){
  if (is_signin_process) {
    return; //prevent multiple click during signin flow.
  }
  //doing signin flow
});

.signin-btn.processing {
  pointer-events: none;
}

$('#signin').on('click', function(event){
  $('#signin').addClass('processing');
  //doing signin flow
});

class CategoryManager
  categorys: ->
    return categorys
  ...

FoodNtpc.CategoryManager = new CategoryManager

FoodNtpc.IndexRoute = Ember.Route.extend
  model: ->
    return FoodNtpc.CategoryManager.categorys()

#class CategoryManager 
CategoryManager = Ember.Object.extend
  categorys: ->
    return categorys
  ...

#FoodNtpc.CategoryManager = new CategoryManager
Ember.Application.initializer
  name: 'categoryManager'
  initialize: (container, application) ->
    console.log 'register categoryManager'
    container.register('foodntpc:categoryManager', CategoryManager, {singleton: true})

Ember.Application.initializer({
  name: 'injectModelManager',
  after: 'categoryManager',

  initialize: function(container, application) {
    application.inject('route:index', 'CategoryManager', 'foodntpc:categoryManager');
    application.inject('controller', 'CategoryManager', 'foodntpc:categoryManager');
  }
});

FoodNtpc.IndexRoute = Ember.Route.extend
  model: ->
    return @CategoryManager.categorys()

Gem::Specification.new do |spec|
  ...
  spec.add_development_dependency 'rspec'
  spec.add_development_dependency 'webmock'
end

require 'rspec/core/rake_task'

desc 'Default: run specs.'
task :default => :spec

RSpec::Core::RakeTask.new do |task|
  task.rspec_opts = '--color -f d'
end

require "bundler/gem_tasks"

Dir.glob('tasks/**/*.rake').each(&method(:import))

# require webmock/rspec to use webmock in rspec testing framework
require 'webmock/rspec'

# mvn_utils is the target class to be test
require 'mvn_utils'

require 'spec_helper'
describe MvnUtils do

  let(:mvn_base) { "mvn.example.net/service/local/repositories/" }
  let(:header_hash) { {'Accept'=>'*/*', 'Accept-Encoding'=>'gzip;q=1.0,deflate;q=0.6,identity;q=0.3', 'User-Agent'=>'Ruby'} }

  describe 'should find the latest version' do
    let(:response_xml) { "<metadata><groupId>a.b</groupId><artifactId>x.y</artifactId><versioning>" +
                         "<release>1.0.100</release><versions><version>1.0.98</version>" +
                         "<version>1.0.99</version></versions></versioning></metadata>" }

    it 'find_latest_version' do
      stub_request(:get, "http://#{mvn_base}a/b/x/y/maven-metadata.xml")
      .with(:headers => header_hash)
      .to_return(:status => 200, :body => response_xml, :headers => {})

      expect(MvnUtils.find_latest_version).to eq('1.0.100')
    end

end

function x() {
  let a = 2;
  a = a + 3;
  return a;
}

console.log(x()); //5
console.log(a); // undefined

let x = 44;
let x = 55; //應該要報錯，但目前模擬器實作都不會報錯
const b = "hello";
b = "abc"; //應該要報錯，但目前模擬器實作都不會報錯

var foo = "i am foo";

var obj = {
  __proto__: [],

  // 定義方法
  getLength() {
    return this.length;
  },

  // 動態設定變數/方法名稱
  [ 'prop_' + (() => 42)() ]: "Should be 42",

  //foo:foo 的縮寫
  foo
};

obj.push("1");
console.log(obj.getLength()); //1
console.log(obj.prop_42); //"Should be 42"
console.log(obj.foo); //"i am foo"

let square = x => x * x;
let add = (a, b) => a + b;
let pi = () => 3.1415;

console.log(square(5)); //25
console.log(add(3, 4)); //7
console.log(pi()); //3.1415

// Lexical this
var bob = {
  _name: "Bob",
  _friends: ['Ken'],
  printFriends() {
    this._friends.forEach(f =>
      console.log(this._name + " knows " + f)
    );
  }
}
bob.printFriends(); //Bob knows Ken

class Polygon {
  constructor(height, width) { //class constructor
    this.name = 'Polygon';
    this.height = height;
    this.width = width;
  }

  static doIt() {  //class method
    console.log('Do it now');
  }
}

class Square extends Polygon {
  constructor(length) {
    super(length, length); //call the parent method with super
    this.name = 'Square';
  }

  get area() { //calculated attribute getter
    return this.height * this.width;
  }
}

let s = new Square(5);
console.log(s.area); //25
Square.doIt(); //"Do it now"

var myString = `In JavaScript '\n' is a line-feed.`;

// Multiline strings
var myString2 = `In JavaScript this is
 not legal.`;

var name = "Bob", time = "today";
var myString3 = `Hello ${name}, how are you ${time}?`

console.log(myString); //"In JavaScript ' ' is a line-feed."
console.log(myString2); //"In JavaScript this is not legal."
console.log(myString3); //"Hello Bob, how are you today?"

function tag(strings, ...values) {
  if (!(strings[0] === 'a' && strings[1] === 'b')) {
    return 'bad';
  }
  return 'good';
}
console.log(tag `a${ 123 }b`);  // "good"
console.log(tag `c${ 123 }d`);  // "bad"

let [one, two, three] = [1, ,3];
let {four, five} = {four:4, five:  5};
console.log(two === undefined); //true
console.log(one, two, three, four, five); // 1 3 4 5

function today() { return { d: 11, m: 3, y: 2014 }; }
var { m: month, y: year } = today();
console.log(month); //3
console.log(year); //2014

books = [];
books.push({ title:"hello", author:"samuel" });
books.push({ title:"hello2", author:"samuel2" });
books.forEach(function ({ title: t, author: a }) {
  console.log(t, a);
  // hello samuel
  // hello2 samuel2
})

function f(x, y=12) {
  // y值會是12 當呼叫者沒有傳入值或傳入值為undefined
  return x + y;
}
console.log(f(3)); //15
console.log(f(3, undefined)); //15
console.log(f(3, null)); //3
console.log(f(3, 4)); //7

function f(x, ...y) {
  // y 是一個陣列
  return x * y.length;
}
console.log(f(3, "hello", true)); //6
console.log(f(3, "hello", true, 444)); //9

function f(x, y, z) {
  return x + y + z;
}
console.log(f(...[1,2,3])); //6
console.log(f(...[1,2,3,4,5])); //6

var x = [1, 2];
var y = [3, 4];
x.push(...y);
console.log(x); //1,2,3,4

//For..Of
let arr = [1, 2, 3, 4, 5];
let sum = 0;

for (let v of arr) {
  sum += v;
}

console.log('1 + 2 + 3 + 4 + 5 =', sum); // 1 + 2 + 3 + 4 + 5 = 15

//Basic Iterator
// fibonacci整個object就是iterator
let fibonacci = {
  [Symbol.iterator]() {
    let pre = 0, cur = 1;
    return {
      next() {
        [pre, cur] = [cur, pre + cur]; //每次循徊把pre值設成cur，cur值則為cur+pre
        return { done: pre > 100, value: pre } //當pre值大於100時終止
      }
    }
  }
}

for (var n of fibonacci) {
  console.log(n); // 1 1 2 3 5 8 13 21 34 55 89
}

// Iteration相關的介面
interface IteratorResult {
  done: boolean;
  value: any;
}
interface Iterator {
  next(): IteratorResult;
}
interface Iterable {
  [Symbol.iterator](): Iterator
}

function* range(start, end, step) {
  while (start < end) {
    yield start;
    start += step;
  }
}

for (let i of range(0, 10, 2)) {
  console.log(i); // 0 2 4 6 8
}


//Fibonacci數列實作by Generator
var fibonacci = function*() {
  var pre = 0, cur = 1;
  while (true) {
    yield cur;
    var tmp = cur;
    cur += pre;
    pre = tmp;
  }
}

f = fibonacci();
for (var n of f) {
  if (n > 100)
    break;
  console.log(n); // 1 1 2 3 5 8 13 21 34 55 89
}

//你也可以自己使用next一步一步取值
//可以用done這個boolean值來判斷是否已經沒有next
f = fibonacci();
var obj;
while (!(obj = f.next()).done) {
  if (obj.value > 100) {
    break;
  }
  console.log(obj.value);  // 1 1 2 3 5 8 13 21 34 55 89
}

// Generator的介面
interface Generator extends Iterator {
  next(value?: any): IteratorResult;
  throw(exception: any);
}

//Array Comprehension
let arr = [1, 2, 3, 4, 5];
let squared = [for (x of arr) x * x];

console.log(squared); //1,4,9,16,25

//Generator Comprehension
let squared2 = (for (x of arr) x * x);

for (let z of squared2) {
  console.log(z); //1 4 9 16 25
}

// same as ES5.1
console.log("𠮷".length == 2); //true

// new RegExp behaviour, opt-in ‘u’
//console.log("𠮷".match(/./u)[0].length == 2); //在ES6模擬器上無法使用

// new form
console.log("\uD842\uDFB7" == "𠮷"); //true
//console.log("\u{20BB7}" == "𠮷"); //在ES6模擬器上無法使用

// new String ops
console.log("𠮷".codePointAt(0) == 0x20BB7); //true

//在ES6模擬器上無法使用
// for-of iterates code points
//for(var c of "𠮷") {
//  console.log(c);
//}

// lib/math.js
export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;
var msg2 = "Ya";
export { msg2 as message};

// app.js
module math from "lib/math";
console.log("2π = " + math.sum(math.pi, math.pi)); //2π = 6.283186 
console.log(math.msg2); //undefined
console.log(math.message); //Ya

// otherApp.js
import {sum, pi} from "lib/math";
console.log("2π = " + sum(pi, pi)); //2π = 6.283186
console.log(message); //undefined 

//更改預設js目錄
System.baseURL = '/lib/';

//動態載入math.js
System.import('math').then(function(m) {
  //m 是math的namespace
  console.log("2π = " + m.sum(m.pi, m.pi)); //2π = 6.283186
});

//理論上可以用Loader來執行程式碼在某一個context底下
//但模擬器找不到Loader..
// Create execution sandboxes – new Loaders
var loader = new Loader({
  global: fixup(window) // replace ‘console.log’
});
loader.eval("console.log('hello world!');");

// Sets
var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;

// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;

// Weak Maps
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined

// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });
// Because the added object has no other references, it will not be held in the set

// Proxying a normal object
var target = {};
var handler = {
  get: function (receiver, name) {
    return `Hello, ${name}!`;
  }
};

var p = new Proxy(target, handler);
p.world === 'Hello, world!';

// Proxying a function object
var target = function () { return 'I am the target'; };
var handler = {
  apply: function (receiver, ...args) {
    return 'I am the proxy';
  }
};

var p = new Proxy(target, handler);
p() === 'I am the proxy';

var key = Symbol("key");

function MyClass(privateData) {
  this[key] = privateData;
}

MyClass.prototype = {
  say: function() {
    console.log(this[key]);
  }
};

var c = new MyClass("hello")
console.log(c["key"]); //undefined 因為Symbol並不是String
console.log(c[key]); //hello
console.log(c.say()); //hello

var promise = new Promise(function(resolve, reject) {
  // do a thing, possibly async, then…

  if (/* everything turned out fine */) {
    resolve("Stuff worked!");
  }
  else {
    reject(Error("It broke"));
  }
});

promise.then(function(result) {
  console.log(result); // "Stuff worked!"
}, function(err) {
  console.log(err); // Error: "It broke"
});

Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false

Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2

"abcde".contains("cd") // true
"abc".repeat(3) // "abcabcabc"

Array.from(document.querySelectorAll('*')) // Returns a real Array
Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior
[0, 0, 0].fill(7, 1) // [0,7,7]
[1,2,3].findIndex(x => x == 2) // 1
["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // iterator 0, 1, 2
["a", "b", "c"].values() // iterator "a", "b", "c"

//Object copying
Object.assign(Point, { origin: new Point(0,0) })

console.log(0b111110111 === 503); // true
console.log(0o767 === 503); // true

function factorial(n, acc = 1) {
    'use strict';
    if (n <= 1) return acc;
    return factorial(n - 1, n * acc);
}

// 在目前的browser幾乎都會stack overflow
// 未來ES6上面是安全的
factorial(100000);