熱血漢誌 - 技術新鮮人到技術經理人，必懂的事

iis node - build node.js runner on windows 很久之前就聽說過 node.js 可以執行 在 iis 裡面，可惜一直都沒有太多緣份執行 windows 環境，這幾天剛好把 windows 環境建置完成之後，第一個想法就是安裝看看 node.js 在 windows 環境裡面。 本篇文章將會帶領大家一步一步完成 iisnode 的建立。 基礎環境 windows .net framework Node.js installed 開始安裝 在開始之前還是要貼心提醒一下各位，記得安裝好 node.js ，在 windows 環境裡面已經具備有 node.js 的執行檔案，下載好 msi 安裝包之後，直接陸續下一步就可以完成了 現在微軟已經很方變得提供 WebMartix 這個平台給予輕量級開發者，到 WebMartix 的環境中，進行安裝檔案的下載包含 express 7.x, iisnode…相關套件。 WebMartix 下載頁面 開始安裝 WebMartix， 選項都 使用預設 即可，接下來會從所有詳細的安裝資料會陸續從網路下載下來，進行安裝。 接著最後會看到完成步驟，就表示 WebMartix 安裝完成。 使用 WebMartix 開始使用 WebMartix ，正常安裝完成後，開啟會看到如下的畫面 在這邊我們選擇新增一個專案，從範本庫裡面 接著選擇 node.js 專案，這邊我選擇 express 的專案 ， 輸入專案名稱之後，按下完成，畫面就會開始新增一個專案同時，會從網路上下載 express web 範本，複製到本地端。 以上步驟有正確完成，就會跳到專案畫面，有點類似程式編輯器的軟體，畫面如下， 接著按下左上角的 '執行' ，再選擇瀏覽器就可以看到開啟一個新的連結，也是大家最常看到的畫面。 WebMartix 我們就談到這邊，基本的環境就如此簡單可以架構起來。 後記 從 WebMartix 這個專案可以看到微軟對於 open source 開始有了許多不同方向的支援，讓開發者更為簡單的開發，同時讓初學者可以很快的加入他們的環境中。 當然 WebMartix 除了上述好上手的東西之外，其實還...

使用 Grunt 快速建構專案， grunt 裡面有許多詳細的作法，這邊主要介紹 scaffolding 的使用方式。 Basic node.js git Install 安裝基本 grunt cli 基礎環境指令 npm install -g grunt-cli Project-scaffolding 另外在 0.4 之後的版本 grunt-init 已經與核心拆開，因此這邊要另外安裝。 npm install -g grunt-init 將 initial template project 使用 git 複製到 ~/.grunt-init/ 這邊以 jquery 為例子，使用 git 複製到 ~/.grunt-init/ 資料夾底下，命名為 jQuery 樣板資料夾 git clone git@github.com:gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery Initial your project 環境準備好之後，我們就可以開始進行專案的建立，首先建立一個資料夾，之後再進行專案樣板套用 mkdir project cd project grunt-init jquery 之後會開始詢問你此專案的名稱以及設定等，資料將會設定到 packge.json 裡面。 後記 透過這樣的方式，以後可以透過自己建立好的基礎環境，如果要重新啟動不同專案的時候，就可以快速開發，不需要自己寫重複的架構以及重複的資料。 相信大家對於 grunt 的強大開始有感覺，歡迎大家一起來討論 grunt & node.js 開發。 相關連結 http://gruntjs.com/project-scaffolding http://book.nodejs.tw/

angular 關於官方教學自己做的一個簡短筆記，在官方基本教學流程中，已經給予大家大致的輪廓，到底 angular 怎麼去執行程式流程，進行 html render 以及如何將 html 變成 object，甚至到後面的 route, HttpRequest 取得資料方式 以下把 angular 官方網站提供的基本教學，做一個大致流程導覽，給自己一個簡單的紀錄。 angular 基本教學 http://docs.angularjs.org/tutorial step-0 這邊進行 angular 第一次接觸，教導如何 install angualr 以及，angular html template 如何進行運作。 Nothing here {{'yet' + '!'}} 網址 http://docs.angularjs.org/tutorial/step_00 ng-repeat step-2 加入 ng-model 了解， angular model 模型，如何使用 ng-model 與 html 進行互動 added app/js/controller.js <pre> function PhoneListCtrl($scope) { $scope.phones = [ {"name": "Nexus S", "snippet": "Fast just got faster with Nexus S."}, {"name": "Motorola XOOM™ with Wi-Fi", "snippet": "The Next, Next Generation tablet."}, {"name": "MOTOROLA XOOM™", "snippet": "The Next, Next Generation tablet."} ]; } </pre> 網址 http...

Github ribbons Github 專案緞帶 現在身為一個 developer 好像沒有 github 就缺少了什麼，熱血的你今天有沒有申請 github ，快點來加入吧！ 每次在加入左上（右上）的 github project 都要花些時間，整理一下有哪些資源可以使用 一般 github ribbon github 官方介紹 ribbon 使用方式 github ribbon for retina retina 專用 github ribbon github ribbon 產生器 github ribbon 產生器 你今天 github 了嘛？

Globlish - learning English 學習英文可以說是一輩子的事情，其實可以讓事情更為容易，畢竟我們不是英語系國家的人，很多時候剛開始並不需要這麼戰戰兢兢，讓自己能夠脫口說出輕鬆的英文，讓自己不再害怕任何練習的機會，反而會是一大考驗。 Globlish 可以是一個機會 Global and English, 建立在使用簡單字彙，就俱備表達自我的能力，讓自己從建立信心同時與人溝通開始。 從每天接觸英文開始，現在已經有許多 App 以及雜誌可以提供練習，最初開始接觸的人，推薦大家每天熟悉 30 分鐘聽力，從每天 30 分鐘開始。 雜誌 大家說英語 ，這是一個很棒的開始，第一個是他比較簡單，而且每個月有不同的節目，同時發音是比較緩慢的，雖然頭先一個月，會讓你覺得每天的 30 分鐘十分漫長，但是請堅持下去。 App (Andriod) VOA learning English ，這個 App 提供 VOA 節目內容，以及文章對照，讓自己不管身在哪裡都可以聽到線上節目，VOA 使用的字彙也是相對簡單，讓大家都可以輕鬆開始進入。 後記 非英語系國家學習英文，就跟我減肥一樣，這是一輩子的事情，持續做，不斷地作，中間會有起有落，不過挑選最輕鬆簡單的方式開始，肯定沒有錯，而且會讓自己開始充滿信心，進入下一個進階的階段。 推薦聯結 輕鬆背字典學英語：Globish 與 Photo Dictionary 介紹 VOA 1500 Meanings 改善破英文 先從Globish開始

通常 deploy 有許多種方式，最簡單的方式就直接採用 web hook ，特別是在 github 裡面有支援這樣的模式，你只要到 github project -> setting 就可以看到如下圖所示的方式 當然 github 預設提供了許多不同的 hook 方式給予大家做選擇，不過因為我只會最基本的 web hook ，就選用這個方式來進行吧。 設定 endpoint web hook 原理就是， 當開發者 push code web hook 啓動 會觸發某個 endpoint 在 web hook 裡面要設定的欄位就是一個很簡單，可以接收 POST 的 URL。 像這邊，我們可以設定 caesarchi.com/deploy 接著就是伺服器部分的設定了。（可以參考之前的文章 起一個 server and route ，或者參考 Node.js 台灣社群協作電子書 ）。 從 github 傳遞的訊息 透過 github webhook 他會透過 POST 的方式傳送資料，會帶過來一個名稱為 payload 的變數。 payload 傳送一串 JSON data 過來，因此可以透過 JSON.parse 還原回來原本漂亮的樣子。 裡面會帶來這次 push 上來的 commit, branch, files 等相關資訊，我們可以透過這些資訊來達到自己的目的。 待會將會提到這個部分。 另外如果自己目前沒有任何 server 但是想要測試 github webhook 丟過去的訊息為何！可以考慮使用 requestb.in ，觀察 webhook 後收到的資訊。 web hook 的啓動 首先，就是在伺服器端需要新增一個 POST Route ，並且可以執行程式伺服器的 shell 程式 。 在 POST 接收到之後，我們可以透過 Node.js child process 的方式啓動另外一個 shell 指令，進行部署動作。 這邊提供一個簡單的 code pattern. 從上面的程式我們可以看到到，透過 JSON parse 的方式，可以把 github payload 還原回 Object 。接下來都可以直接採取 JS ...

Brunch.io 初體驗 JavaScript 有 Grunt , CoffeeScript 有 Brunch 。如果你懂這句話，就知道 Brunch 是協助 static html, css, javascript 開發工具。 這邊就不比較兩者的差異，因為整個開發概念不大相同，一旦比較之後，又落入 JS vs CoffeeScript 安裝方式 npm install brunch 使用方式 產生新專案， brunch new [webapp] 如果想要使用自定的專案， brunch new [webapp] --skeleton [url] 檔案編譯 目的主要是將分散的檔案編譯成單一檔案，進行 files concat brunch build [--optimize] 檔案監控 當檔案變動的時候，就會自動進行 complier，如果加上 --server 參數將會建立起簡單型 server brunch watch [--server] 配合 Bower 另外可以配合上 Bower 進行 client side 程式進行版本控管，記得資料夾裡面要設定 bower.json .bowerrc Deploy 既然是 static file ，當然也可以使用在 github page ，當你已經把檔案更新完之後，最後進行 git checkout ph-pages brunch build 通常預設是編譯到 _public 資料夾底下，將底下的資料搬移出來，或者是移到某個你想要的 static folder 底下，再進行 git push origin ph-pages 接著到自己的 github pages 就可以看到 index.html 所應該顯示的頁面結果。 Skeletons 在 Skeleton 裡面已經有許多不同種類的基礎 Project 提供各位參考，裡面有許多好玩的地方。 https://github.com/brunch/brunch/wiki/Skeletons 當然如果你有建立自己的 Skeleton 歡迎自行修改 Project 進行專案的建立。 附註 brunch 預設 _ 底線開頭的檔案是不會進行編譯，假設以 app/style...