聚會時間公告: 因應COSCUP 2011, Kalug 8月份休會一次

六月 11, 2014

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 安全使用 JavaScript Global Variables

剛開始學習 JavaScript 時候,一定會大量使用 Global Variables。但是使用 Global Variables 的同時,請務必使用 var 宣告,而不是直接使用阿,否則會常常遇到 ReferenceError 的錯誤。

function addToBlockList (item) {
  block_List.push(item);
}

addToBlockList ("add 127.0.0.1");

執行後你可以發現 console 噴出 Uncaught ReferenceError: block_List is not defined,加上一個判斷試試看。程式碼改成底下

function addToBlockList (item) {
  if (block_list) {
    block_List.push(item);
  }
}

addToBlockList ("add 127.0.0.1");

會噴出一樣的錯誤訊息,原因也是 block_List is not defined,最後將程式碼換成底下

function addToBlockList (item) {
  if (window.block_list) {
    window.block_List.push(item);
  }
}

addToBlockList ("add 127.0.0.1");

就可以正常跑了,也不會出現任何錯誤訊息,建議大家不要寫這樣的程式碼,能夠少用 window.xxxx 這種全域變數就盡量少用,不要任意宣告或修改 window 全域變數,上面程式碼可以換成底下會更好

(function() {
  var block_list = [];
  var addToBlockList = function (item) {
    if (block_list) {
      block_list.push(item);
    }
  };
    
  addToBlockList("127.0.0.1");
  console.log(block_list);
  
})();

這樣可以避免渲染 window Global Variable。如果你是用 CoffeeScript 來寫,可以寫成底下

(->
  block_list = []
  addToBlockList = (item) ->
    block_list.push item  if block_list
    return

  return
)()

但是我建議可以使用 block_list? 寫法

(->
  block_list = []
  addToBlockList = (item) ->
    block_List?.push item
    return

  return
)()

轉成的 JavaScript 會是

(function() {
  var addToBlockList, block_list;
  block_list = [];
  addToBlockList = function(item) {
    if (typeof block_List !== "undefined" && block_List !== null) {
      block_List.push(item);
    }
  };
})();

十二月 29, 2013

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» The streaming build system Gulp

gulp

看到 Yeoman 作者之一 Addy Osmani 開始 review Gulp build system,由於 Yeoman framework 跟 GruntJS 是很緊密結合的,但是 GruntJS 套件愈來愈多,漸漸的執行 GruntJS 後,開始吃了系統 CPU 及記憶體,這對於開發環境而言,會是一大負擔阿,大家不知道有無發現,跑 Nodejs GruntJS 時,每當存檔的時候,CPU 就開始哀嚎了,我自己是有這方面的體會,加上團隊內並不是每位同仁的電腦都是很 powerful,原本是好意讓團隊開發更遵守 coding style 及統一開發環境,但是 Grunt 的肥大,讓整個 Client 環境 Loading 飆高。所以 Yeoman 看到了 Gulp。也有考慮如何將 Gulp 整合到 Yeoman 專案。

Gulp 簡介

大家可以把 Gulp 跟 Grunt 用途想成一樣,只是處理 Task 的原理不相同。Grunt 是透過 Task 的概念下去實作,JS 程式存檔後,Grunt 會依序處理使用者定義的 task,例如執行 jslint task 接著 uglify task,最後將檔案搬到您想的目錄。而 Gulp 則是平行處理,假設有5個 js 檔案,Gulp 則是透過 pipeline 方式處理檔案,所以 Gulp 會加速處理結果。

Grunt 原理:

Grunt jslint task -> Grunt uglify task -> Grunt copy task
  ---處理5個檔案--- ->  ---處理5個檔案---   -> ---處理5個檔案---

Gulp 原理

Grunt jslint task -> Grunt uglify task -> Grunt copy task
  ---處理檔案(1)--- ->  ---處理檔案(1)---  -> ---處理檔案(1)---
  ---處理檔案(2)--- ->  ---處理檔案(2)---  -> ---處理檔案(2)---
  ---處理檔案(3)--- ->  ---處理檔案(3)---  -> ---處理檔案(3)---
  ---處理檔案(4)--- ->  ---處理檔案(4)---  -> ---處理檔案(4)---
  ---處理檔案(5)--- ->  ---處理檔案(5)---  -> ---處理檔案(5)---

Gulp 用法

我們假設寫 Coffeescript 程式,通常寫完會經過 coffeelint 檢查 coffee script 的 Coding style 語法,最後才透過 coffee command 轉換成 javascript 檔案。

在 Grunt 套件,我們會這樣寫

coffeelint:
    options:
        'force': true
        'no_trailing_whitespace':
            'level': 'error'
        'max_line_length':
            'level': 'ignore'
        'indentation':
            'value': 4
            'level': 'error'
    dev: ['**/*.coffee', '!**/node_modules/**', '!**/vendor/**']
watch:
    coffee:
        files: ['**/*.coffee', '!**/node_modules/**', '!**/vendor/**'],
        tasks: ['coffeelint']

如果是用 Gulp 寫法會非常簡單

gulp.task('coffee', function() {
    gulp.src('app/assets/coffeescript/**/*.coffee')
        .pipe(coffeelint({"indentation": {
            "name": "indentation",
            "value": 4,
            "level": "error"
        }}))
        .pipe(coffeelint.reporter())
        .pipe(coffee({bare: true}))
        .pipe(gulp.dest('app/assets/js/'))
        .pipe(refresh(server));
});

有沒有變得很容易閱讀?設定方式也變得很容易,執行速度更不用說了,不會吃太多記憶體及 CPU 了,但是我覺得要取代 Grunt 實在很困難,Grunt 能處理大部分的事情,包含 Deploy 及驗證等等,我覺得 Gulp 就專門用在 RD 開發環境的建置,RD 平時會用到哪些套件?CoffscriptCompass or sasslivereloadwatch event,大致上這些就已經很足夠了。

由於沒找到 Compass Gulp plugin,只看到 sass plugin,所以我寫了簡易的 Gulp plugin,有用 compass 務必安裝

$ npm install gulp-compass --save-dev

使用方式可以參考 Readme

十月 17, 2013

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» Drone.io 搭配 Ruby 環境測試

相信現在 Git 已經是大家共通的版本控制工具,每當專案有新的 commit,我們可以透過 Travis 來幫忙做測試,但是 Travis 真的只有支援測試而已,如果測試成功想要進一步 Deploy 到任何機器或者是繼續做任何動作,這些都不支援的,那國外有些 Service 可以整合 GithubBitbucket Project 幫忙做到自動測試及 Deploy,比較常見的就是 Codeship,這服務非常強大,整合了 HerokuApp EngineNodejitsu .. 等服務,Deploy 也支援 Fabric, Puppet, Shell script 等等,這家的收費是看每個月做了多少次編譯測試動作,最便宜的方案每個月 $9 美金,只能編譯 50 次。

這時候就要找看看有沒有窮人編譯 + Deploy 的服務,看到網路上也有人推薦 Drone.io 服務,雖然沒有像 Codeship 支援這麼強大,但是最基本的功能還是有啦,最主要免費專案是 Unlimited Builds,看到這個就超爽了,主要收費來源就是看你的專案是不是 Private,如果都是開放原始碼,就可以持續使用免費服務,此網站一樣支援 Github 或 Bitbucket 專案導入,另外也支援 SSH Deploy,Heroku,AppEngine 等。

Drone.io Ruby 編譯環境是透過 rbenv 來管理,如果安裝了任何 Ruby 工具,像是 Compass 等,要使用 Compass command 就必須加上底下指令

$ gem install compass
$ rbenv rehash

其實這還蠻不方便的,因為同樣的測試環境,在 Travis 是可以編譯成功的,由於現在專案內會用到大量工具,像是 CoffeeScriptCompassHandlebars 等,所以這些工具產生的 js, css, *.handlebars 檔案,都不應該放到專案裡面,而是在開發專案的時候,自動幫忙產生,可以透過 GruntJS 工具來整合。整合方式可以參考 2013 Javascript Conference: 你不可不知的前端開發工具

可以參考編譯的過程,如果編譯過程有點多,會造成 Browser 有點小當,所以建議還是關掉,等跑完,不管成功或失敗,都是寄信通知,如果成功就會繼續跑 Deploy 流程。

五月 25, 2013

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 高雄 KSDG 分享: 打造團隊共同開發環境

gruntlogogruntlogo

很高興受到高雄 KSDG 邀請,分享上禮拜在 JSDC 所介紹主題: 你不可不知的前端開發工具,在 JSDC 現場只有半小時可以講,這次在高雄有一個半小時可以講,如果想詳細了解前端工具,可以參考上禮拜的投影片,底下是在高雄軟體科技園區所分享。謝謝 Eric Bi 及工作人員可以讓我分享這次議題。

最後附上 Github 專案,歡迎大家 fork。

五月 19, 2013

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 2013 Javascript Conference: 你不可不知的前端開發工具

JSDC 2013JSDC 2013

台灣第 2 屆 JavaScript 研討會在 5/18, 5/19 登場,今年報到率到 95% 了,我也給了一場 Talk,關於前端工具介紹,包含 CoffeeScript, Compass, Livereload, Bower Package Manager .. 等,最後介紹主軸 Grunt.js 來整合這些工具。

最後附上 Github 專案,歡迎大家 fork。

三月 1, 2013

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» Backbone.js rewrite into CoffeeScript?

backbonebackbone

看到 @gsamokovarov 提出將 Backbone.js 改寫成 CoffeeScript 架構的 Pull request,結果官方團隊其中一位開發作者回應了一張圖,代表他的心情 XD,各位有興趣可以點上面連結看看,後來有其他人回應說,為什麼官方不用 CoffeeScript 來寫了,發此 Pull Request 的作者也有說,他只是將架構改成 CoffeeScript 讓大家參考看看而已,沒有真的希望可以納入整個 Backbone.js 專案,如果有其他開發者需要的話,一樣可以 fork 此專案,說明文件也用 docco 產生好了,可以參考此連結,官方作者也提到,大部份的第3方 Library 還是不會使用 CoffeeScript 來當作基底開發,畢竟並非所有人都知道 CoffeeScript,如果官方想這麼開發的話,早就再 2010 年丟釋出 Backbone.js 的時候就直接採用了,不會拖到現在還沒出來,當然最後官方也希望將此 pull request 寫到 wiki 裡面給大家參考,等待原作者補開發動機及細節。

二月 8, 2013

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 在 git Commit 之前檢查 PHP 是否有錯誤

Git-Logo-2ColorGit-Logo-2Color

在 commit code 之前,程式設計師必須確保程式碼的正確性,包含不要放入 debug message 到 git server,寫了一個簡單的 pre-commit 程式,來確保 PHP 是否有 Parse error,或者是在寫 CoffeeScript 及 JavaScript 時,常常會用到 console.* 來當作中斷點或者是顯示變數資料,這也是需要盡量避免 commit 到伺服器,你可不想要長官 review 的時候看到這麼多 debug 訊息吧。這時候就是需要 git-hookspre-commit 幫忙檢查這些 Syntax 語法,可以直接參考我的 git-hooks 專案。安裝方式很簡單:

$ git clone https://github.com/appleboy/git-hooks.git
$ chmod +x bin/hooks.sh pre-commit
$ ./bin/hooks.sh your_project_path

如果使用 git commit 之前,就會檢查 .js、.coffee、.php 等副檔名。

十一月 29, 2011

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» Node.js Version Management 多版本管理

nodejs-light

相信大家對於 Node.js 版本 Release 太快而感到困擾,每次新版出來,就要開始升級原本的版本,加上測試及修改,一定會浪費不少時間在上面,不管是任何語言我都希望能有一套 Version Management 來管理各版本之間的差異,以及讓使用者可以隨時切換版本來使用測試。那今天來介紹一套 Node.js Version Management,這隻程式是用 shell script 下去撰寫,可以安裝多版本在 Linux 本機上面,隨時都可以切換不同版本測試。此作者也是 expressjs Framework 發起者。

相信操作方式非常簡單,可以參考 Readme 來安裝測試,我要另外補充的是在 0.6.3 的版本,官方已經 npm (node package manager) 包在裏面了,也就是安裝好此版本,就可以直接使用 npm 指令。但是在 Node.js Version Management 似乎沒有加上 npm 的指令功能,所以我也發了 pull request 給作者,不知道作者會不會加上去就是了。如果想先使用,可以透過我的 github 來安裝。

安裝 Node.js Version Management

$ git clone https://appleboy@github.com/appleboy/nvm.git
$ cd n
$ cp bin/n /usr/local/bin

使用 npm

安裝 nodejs 0.6.3

$ n 0.6.3

安裝 Coffee-script 套件

$ n npm 0.6.3 install coffee-script

查詢以安裝套件

$ n npm 0.6.3 list

PS. npm 只有大於或等於 0.6.3 版本才有內建

Related View

support:

biggo.com.tw

A Django site.