coodoo

var $foo = this.$('#foo').popover( o );

// 調整 popover 的 arrow 位置指向 label 中央
$foo.on('shown', function( evt ){
    
    // 取得文字 label 的中間位置    
    var rect = $foo[0].getBoundingClientRect();
    var targetPos = rect.left + rect.width/2;

    // 找到 arrow 元件

coodoo

#!/usr/bin/python
# -*- coding: utf-8 -*-

import LiveReload
import json
import sublime
try:
    from .Settings import Settings
except ValueError:
    from Settings import Settings

coodoo

#!/usr/bin/python
# -*- coding: utf-8 -*-

import os
import json

def log(msg):
    pass

try:

coodoo

(function() {
    var CustomEvents;

    CustomEvents = (function() {
        function CustomEvents() {}

        CustomEvents.bind = function(element, eventName, handler) {
            if (element.addEventListener) {
                return element.addEventListener(eventName, handler, false);

coodoo

<!-- A - semantic via class names -->
<div class="event">
    <div class="label">
        <i class="circular pencil icon"></i>
    </div>
    <div class="content">
        <div class="date">
            3 days ago
        </div>
        <div class="summary">

coodoo

# DOM life cycle event

	- DOM mutation event ← 最早期，已 retired

	- 新版是 Mutation Observers ← angular 與 polymer 都靠這個
		
		-  observer.observe()
		
		- 範例: http://stackoverflow.com/questions/3219758/detect-changes-in-the-dom

coodoo

## Docker for Front-End Developer

	# 解決問題
		
		- "Works on my machine!"

		- 新人 on-board 可快速布署開發環境

		- 小巧敏捷，較 vm 節省資源

coodoo

# 內容
	
	# repo 位置
		- https://github.com/facebook/react
		- https://github.com/facebook/flux

	# 官網

		- React
			* http://facebook.github.io/react/

coodoo

Projects each element of an observable sequence into a new sequence of observable sequences by incorporating the element's index and then transforms an observable sequence of observable sequences into an observable sequence producing values only from the most recent observable sequence.

coodoo

// 選出 UI 元素
var refreshButton = document.querySelector('.refresh');
var closeButton1 = document.querySelector('.close1');
var closeButton2 = document.querySelector('.close2');
var closeButton3 = document.querySelector('.close3');

// 偵聽 ui 元素的 click 事件並生成 observable
var refreshClickStream = Rx.Observable.fromEvent(refreshButton, 'click');
var close1ClickStream = Rx.Observable.fromEvent(closeButton1, 'click');
var close2ClickStream = Rx.Observable.fromEvent(closeButton2, 'click');