Integrate CircleCI with GitHub

簡介

CircleCI是個很強大的SAAS CI。其中最重要的莫過於GitHub的支援,本文就簡單介紹如何整合這兩個工具

利用Git Hook執行程式碼品質檢查 — How to use git pre-commit hook to trigger jshint

問題

使用Git的時候常常會遇到一個狀況:commit之後才發現jshint檢查不通過(通常都是少了個分號啊什麼的)。如果一個repo多人使用,merge之後一整排的jshint Error那更是歡樂無比。

解決方式

懶人包 || TL;DR

Git Pre-commit Hook + JSHint (or JSLint 或任何你在用的檢查工具)

詳細說明及設定步驟

既然我們需要commit時後都能通過jshint檢查,那麼就可以使用Git Hook來完成這件任務。Git Hook簡單的說就是一個trigger:當某一個git動作發生的時候,會去執行相對應的hook執行檔。以本文來說,我們需要在commit之前,執行一個幫我們做jshint檢查的shell script。

設定方式非常簡單,到repo下面的.git/hooks裏面,建立一個名為pre-commit的檔案,裏面執行jshint指令即可。筆者的pre-commit指令如下:

    #!/bin/sh
    #
    # Run JSHint validation before commit.

    files=$(git diff --cached --name-only --diff-filter=ACM | grep ".js$")
    pass=true

    echo "files:"
    if [ "$files" != "" ]; then
        for file in ${files}; do
            echo $file
            result=$(jshint -c .jshintrc ${file})

            if [ "$result" != "" ]; then
                echo $result
                pass=false
            fi
        done
    fi


    if $pass; then
        exit 0
    else
        echo ""
        echo "COMMIT FAILED:"
        echo "Some JavaScript files are invalid. Please fix errors and try committing again."
        exit 1
    fi

這個shell script做了什麼事情?利用git diff把這次commit修改的檔案名稱抓出來,並以grep過濾出.js檔,然後對他們執行jshint。(在這邊我有設定jshint的設定檔為.jshintrc)如果沒有問題就exit 0正常結束(git commit就會繼續執行),如果有問題就印出錯誤訊息並exit 1中斷commit。

系統需求

JSHint: npm install -g jshint

Grunt進階版

如果你的repo有很多人在用,又剛好是使用grunt,那麼可以新增下列task幫你自懂安裝git hook。(當然啦,如果你不想一直坐在椅子上,想跟同事多多交流,筆者會建議您不要使用這麼無腦的自動安裝方法,走過去直接跟您同事說吧!)


    grunt.registerTask('install-hooks', function () {
    var fs = require('fs');

    // my precommit hook is inside the repo as /pre-commit.hook
    // copy the hook file to the correct place in the .git directory
    grunt.file.copy('pre-commit.hook', '.git/hooks/pre-commit');

    // chmod the file to readable and executable by all
    fs.chmodSync('.git/hooks/pre-commit', '755');
  });

記得把你的pre-commit檔放在repo的/pre-commit.hook,這樣使用這個repo的人只要執行一次grunt install-hooks,系統就會自動安裝我們寫好的hooks了。

當然hooks有很多種,pre-commit hook也可以做更多事情,就看個人需求變化嘍。

NodeJS HTTP Response 兩分鐘斷線

在用NodeJS做file server的時候,遇到一個狀況就是: 如果檔案下載時間超過兩分鐘,連線就會自動斷掉。 解決方式很簡單,把timeout清掉就可以:
res.setTimeout(0);

問題的主因是nodejs裡的response物件有寫死的兩分鐘timeout,所以任何的http response只要回應超過兩分鐘都會結束。不過其實會超過兩分鐘的response本身就很少,主要都是檔案下載。而檔案下載這類工作又不太應該放在nodejs裡面做(對我是anti-pattern orz),應該很少人會遇到這個問題。如果有遇到問題的,建議是在獨立的function裡面reset timeout就可以。

Command Pattern 與 Strategy Pattern 的差異

有一天...

被問了一個問題,在實作登入功能時,如果要支援不同的登入方式(ex: FB/google/twitter),那麼該使用Strategy Pattern還是Command Pattern?

對於design pattern本身就不算瞭解,被問到這問題真的是完全無法解釋。開始了漫長的辜狗之旅,但看了一串又一串的討論還是無法解釋之後,決定配合字面定義來看:

COMMAND: 命令

命令通常有—發號命令者、接受命令者(負責決定如何執行)、命令、命令執行對象。比如說Gwen叫Howie去打掃(家裡),Gwen是發號命令者,命令的內容有 1.任務:打掃 2.任務執行者:Howie 3.任務對象:家裡。發號命令者可以決定他要執行什麼命令,對誰執行或是更改任務。比如說Gwen也可以選擇要他家的貓Uno去打掃(變更接受命令者),或是Gwen可以叫Howie去打掃隔壁老王的家(更變執行對象),又或是可以叫Howie把家裡重新裝潢一次(變更任務)。

STRATEGY: 策略

根據形勢發展而制定的行動方針或方法,目的是完成一個明確的任務。策略說的是不同物件(形勢發展),執行同樣的動作時(如前例:打掃家裡),會採取不同的路徑(行動方針,策略)。之前的例子用策略的角度來看就是:同樣是打掃,Howie與Uno打掃的方式就完全不一樣(實際上,Uno是一隻貓)

我們來看一下Wiki上面對於Command & Strategy的design pattern的解說:

Command pattern is a behavioral design pattern in which an object is used to represent and encapsulate all the information needed to call a method at a later time.

Formally speaking, the strategy pattern defines a family of algorithms, encapsulates each one, and makes them interchangeable.

Sublime Text2: Javascript 開發環境設定

使用ST2開發也有一段時間,是時候整理一下開發環境的設定了。本篇文章僅針對Javascript/Node.js開發環境。

套件

使用套件之前記得先安裝Package Manager (安裝方式參考這裡)。

  • BracketHighlighter:以較明顯的方式顯示目前程式區段的開頭與結尾
  • DocBlockr:建立註解的小幫手
  • Git:Git控制台,可直接在sublime中執行git的指令
  • GitGutter:顯示新增/刪除/修改的程式碼區塊
  • Javascript Snippets:常用javascript程式碼片段
  • JS Snippets:常用javascript程式碼片段2
  • JsFormat:程式碼格式工具
  • JSLint:程式碼檢查工具
  • Live Reload:即時於瀏覽器上重新載入更新的檔案
  • NodeJS:Node.js支援,包含常用函式、執行node.js等
  • SideBarEnhancements:增加側邊欄的功能,如檔案/資料夾的操作、搜尋等
  • SublimeTODO:TODO/FIXME/WARN管理
  • TernJS:提供code completion, jump to definition等功能

Javascript入門學習資源整理

整理了一些Javascript入門資源,給有心想踏入這個世界的人參考參考嘍。

書籍

  1. ppk on JavaScript:從實例學JavaScript
  2. JavaScript 編程精解 (Eloquent JavaScript: A Modern Introduction to Programming))
  3. JavaScript 大全 第六版(JavaScript The Definitive Guide, 6th Edition)

網路學習

  1. MDN
  2. Codecademy
  3. Javascript基礎介紹 投影片
  4. Javascript基礎介紹 範例題目

評估

  1. js-assessment 中文版

十分鐘建立一個視差滾動效果頁面

什麼是視差滾動效果

視差滾動(Parallax Scrolling)是指讓通過鼠標實現網頁多層背景以不同的速度移動,從而形成立體的運動效果,帶來非常出色的視覺和交互體驗。這種網站通常通過鼠標滾輪滾動來實現,用不同於傳統的方式來製造不一樣的使用者感受。

範例

首先來看一下我們想達到的效果: 範例網站1 範例網站2 範例網站3