coodoo

## Docker for Front-End Developer

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

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

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

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');

coodoo

1. remoteMethod 如何控管存取權限？

	- 用 beforeRemote 與 afterRemote hook 做檢查
	- 通常我偏好在 beforeRemote hook 做，原因：
		- 可前期過濾與檢查用戶傳來的參數，例如刪掉格式不正確的內容，或強制塞入指定的參數
		- 可精準組合 query 指令，避免撈出多餘的資料

	- 如果用 after hook
		- 就是先撈出所有資料，在返還給客戶端前刪掉不屬於該員的筆數

coodoo

// 定義 remote method
loopback.remoteMethod(
            
    Document.findAll,

    {
        description: 'Find all folder and sub-folders for a user',

        accepts: [
          // 注意這裏指定從 req.query 裏取值，這是最彈性的方式了

coodoo

// var convert = require('css-to-radium');
// var fs = require('fs');
// var path = require('path');
// var css = fs.readFileSync( path.resolve('./', 'app.css'), 'utf8');
// var result = convert(css);
// console.log( '\nresult: \n', require('util').inspect( result, false, 2, true) );

// 模擬 css 轉換後的 js 物件，要將 .foo 轉成 foo
var o = {
  '.foo': 'barr',

coodoo

var webdriverio = require('webdriverio');
var options = {
    desiredCapabilities: {
        browserName: 'chrome'
    },
    host: '127.0.0.1',
    port: 8888,
    waitforTimeout: 10*1000,
    coloredLogs: true,
    logLevel: 'verbose' // verbose, silent, command, data, result

coodoo

React (Virtual) DOM Terminology

In React's terminology, there are five core types that are important to distinguish:

• ReactElement / ReactElement Factory
• ReactNode
• ReactComponent / ReactComponent Class

React Elements

coodoo

2015-01-29 Unofficial Relay FAQ

Compilation of questions and answers about Relay from React.js Conf.

Disclaimer: I work on Relay at Facebook. Relay is a complex system on which we're iterating aggressively. I'll do my best here to provide accurate, useful answers, but the details are subject to change. I may also be wrong. Feedback and additional questions are welcome.

What is Relay?

Relay is a new framework from Facebook that provides data-fetching functionality for React applications. It was announced at React.js Conf (January 2015).

coodoo

var input = "@ch: THIS IS A BOOK @c:professional-quality display and classified ads using a web interface. You can control the quality of these ads — and accept them later in the production cycle — while still giving your customers a wide range of creative options. At the same time, the process provides an opportunity to cross-sell and upsell your customers to higher value placements by showing them additional options during the creation process. You can even add new categories of advertisements without expending additional resources.";

var r = /(@.*?:)/g;
var k = r.exec( input );