發表於   |   分類於

當在設計界面的時候, 用規劃好的界面結構並拆分常見的設計元素(按鈕, 表單欄位, 排版元件… 等)成可重覆利用的組件. 這樣當你下次需要再建立相同的界面時, 你可以編寫比較少的程式碼, 這意謂著將會得到更快的開發速度, 少一點的錯誤和打字.

閱讀全文 »

發表於   |   分類於

React 可以用 HTML tags(strings) 或是 React components(classes) 來產生出 HTML tag, 你只需在 JSX 中用小寫的 tag name 來定義 element:

1
2
3
4
5
6
7
8
// HTML tags
var myDivElement = <div className="foo" />
React.render(myDivElement, document.body);

// React component
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.body);

React 的 JSX 用大寫和小寫命名習慣來區分 componet classes 和 HTML tags

Note:

由於 JSX 其實還是 javascript 語言, 所以有些 HTML 的關鍵字像是 class, for … 等不能直接使用, 你可以用 className, htmlFor … 來轉換

閱讀全文 »

發表於   |   分類於

Why React?

React 是一個 facebook 和 instagram 為了建構使用者界面的 javascript 函式庫. 大部分的人把它當作 MVC 架構中的 View 使用.

我們用 React 解決一個問題: 建構大型應用程式時隨時間改變的資料.

Simple

簡潔地表達你的程式在什麼時間點應該要長得怎麼樣, 當底層的資料改變時, React 會自動管理 UI 的更新.

Declarative

當資料改變, 在概念上, React 就像 refresh 按鈕且只會變動需要更新的部分.

Build Composable Components

React 專注於建立可重覆使用的組件, 事實上, 在 React 中你唯一能作的事也就是只有建立組件. 由於其封裝性, 組件讓你的程式碼可以重覆利用, 易於測試與容易切分組件之間的關係.

閱讀全文 »

發表於   |   分類於

Dokku

讓你建置類似像 Heroku 的服務，可至官方 Github了解更多資訊。

Installation

1
2
3
4
5
6
7
# wget https://raw.github.com/progrium/dokku/v0.3.17/bootstrap.sh
# sudo DOKKU_TAG=v0.3.17 bash bootstrap.sh

# installs dokku via apt-get
wget -qO- https://raw.github.com/progrium/dokku/v0.3.17/bootstrap.sh | sudo DOKKU_TAG=v0.3.17 bash

# Go to your server's IP and follow the web installer

Dokku-alt

基於 Dokku 發展的套包，集合了一些常用的 Plugins，像是 MariaDB, Redis, ACL … 等。

Installation

1
sudo bash -c "$(curl -fsSL https://raw.githubusercontent.com/dokku-alt/dokku-alt/master/bootstrap.sh)"

指定 buildpack

1
dokku config:set <app> BUILDPACK_URL=https://github.com/heroku/heroku-buildpack-php

BUILDPACK URL 參考:

1
2
3
4
5
6
7
8
9
10
Ruby    https://github.com/heroku/heroku-buildpack-ruby
Node.js https://github.com/heroku/heroku-buildpack-nodejs
Clojure https://github.com/heroku/heroku-buildpack-clojure
Python  https://github.com/heroku/heroku-buildpack-python
Java    https://github.com/heroku/heroku-buildpack-java
Gradle  https://github.com/heroku/heroku-buildpack-gradle
Grails  https://github.com/heroku/heroku-buildpack-grails
Scala   https://github.com/heroku/heroku-buildpack-scala
Play    https://github.com/heroku/heroku-buildpack-play
PHP     https://github.com/heroku/heroku-buildpack-php

Multi-Buildpack

建立 .buildpacks 檔案並指定不同的 buildpack

例如:

1
2
https://github.com/heroku/heroku-buildpack-nodejs
https://github.com/heroku/heroku-buildpack-php

Example

SSH 進 docker container

1
sudo docker exec -i -t <id> bash

Clean up docker

Kill all running containers

1
sudo docker kill $(sudo docker ps -q)

Delete all stopped containers (including data-only containers)

1
sudo docker rm $(sudo docker ps -a -q)

Delete all ‘untagged/dangling’ () images

1
sudo docker rmi $(sudo docker images -q -f dangling=true)

Delete ALL images

1
sudo docker rmi -f $(sudo docker images -q)

已知問題

若與 CSF firewall 搭配使用，重開機後會造成 deployment building 失敗，應該是因為阻擋了 forward 的通道…

所以改用 ufw 代替，需修改 /etc/default/ufw 檔案

將 DEFAULT_FORWARD_POLICY 設為 ACCEPT

參考資料

發表於

Gulp with webpack

gulpfile.js
1
2
3
4
5
6
7
8
9
10
11
12
var gulp = require('gulp');
var webpack = require('gulp-webpack');

var dist = 'public';

gulp.task('default', ['webpack']);

gulp.task('webpack', function() {
    return gulp.src('app/index.js')
        .pipe(webpack(require('./webpack.config.js')))
        .pipe(gulp.dest(dist+'/js'));
});
webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
var webpack = require('webpack');

var dist = '/public';

module.exports = {

    watch: true,

    context: __dirname + "/app",

    entry: {
        // main script
        app: './index',
        // common scripts
        common: 'vendor/commons'
    },

    output: {
        path: __dirname + dist + "/js",
        filename: "[name].bundle.js",
        chunkFilename: "[name].bundle.js",
        publicPath: "js/"
    },

    module: {
        loaders: [
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            { test: /\.jsx$/, loader: 'jsx-loader?harmony' },
            { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // use ! to chain loaders
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,   loader: "url?limit=10000&minetype=application/font-woff&name=../fonts/[hash].woff" },
            { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,    loader: "url?limit=10000&minetype=application/octet-stream&name=../fonts/[hash].ttf" },
            { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,    loader: "file?name=../fonts/[hash].eot" },
            { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,    loader: "url?limit=10000&minetype=image/svg+xml&name=../fonts/[hash].svg" }
        ]
    },

    plugins: [
        new webpack.PrefetchPlugin("react"),
        new webpack.PrefetchPlugin("react/lib/ReactComponentBrowserEnvironment"),
        // new webpack.optimize.CommonsChunkPlugin("init.js"),
        new webpack.optimize.CommonsChunkPlugin("common", "common.bundle.js"),
        new webpack.ProvidePlugin({
            $: "vendor/jquery",
            jQuery: "vendor/jquery",
            // "windows.jQuery": "vendor/jquery",
            // "window.React": "react",
            React: "react",
            Backbone: "backbone"
        })
    ],

    resolve: {
        alias: {
            components: __dirname + '/app/components',
            actions: __dirname + '/app/actions',
            stores: __dirname + '/app/stores',
            contracts: __dirname + '/app/contracts',
            lib: __dirname + '/app/lib',
            app: __dirname + '/app',
            modules: __dirname + '/app/modules',
            vendor: __dirname + '/app/vendor',
            node_modules: __dirname + '/node_modules',
            jquery: __dirname + '/app/vendor/jquery'
        }
    }

};

發表於

Atom Package

  • project-manager
  • atom-terminal
  • autocomplete-plus
  • color-picker
  • atom-ctags
  • sympol-gen
  • sympols-tree-view
  • auto-indent
  • Zen

Atom Keymaps

Jump to sympol define:

Alt + Cmd + up / down

發表於

講話應避免的七個過失:

  • Gossip 說長道短
  • Judging 評斷
  • Nagativity 消極
  • Excuses 找藉口
  • Lying, Embroidery, Exaggeration 花言巧語, 過份誇大都是一種欺騙
  • Dogmatism 過份武斷


H.A.I.L. - To greet or acclaim enthusiastically

  • Honesty, being true in what you say. being straight and clear.
    講話內容要真實, 清晰無任何歪曲

  • Authenticity, just being yourself
    內心誠懇, 正心誠意, 對自己誠實

  • Integrity, be your word
    言行一致, 不能說一套作一套, 要讓人可信任

  • Love, wish them well
    希望幫助別人, 成就別人

片語

stand for

represent; mean;

to make change in the world

Fantastic, give yourselves a round of applause.