grunt-contrib-connect fake api with yeoman

依照現在 F2E 正夯的狀況，很多 front-end 都會希望不需要等 backend 先寫完 api 才可以接資料，或者要等 backend 先開出假的 api 後才能動工，最好的方法就是先確定好資料結構後雙方就可以開工，也可以減少 api 寫完後才發現沒辦法接好的問題。 yeoman 是個相當好用的前端開發輔助工具，尤其 liveboard 大量增加 f5/ctrl + R 的壽命，如果能再結合假資料 api 拿來測試那就再完美不過了。

立馬下載
git clone https://gist.github.com/7210042.git

使用方式 （好讀版）
Step1. 下載 redirect.js 到專案根目錄.
Step2. 編輯 Gruntfile.js

var redirect = require('./redirect');

...
...


connect: {
options: {
port: 9000,
// change this to '0.0.0.0' to access the server from outside
hostname: '0.0.0.0'
},
livereload: {
options: {
middleware: function(connect) {
return [
lrSnippet,
mountFolder(connect, '.tmp'),
mountFolder(connect, 'app'),
redirect('api')
];
}
}
}
},

Step3. redirect 有三個參數. rootDir 是假 api 根目錄. indexFile 是預設連結的檔案. headers 是 http response 的 header，範例：

/app
...

/api
/user
index.json
list.json
...

/Gruntfile.js
...

Step4. run "grunt server"
當讀取 url "/user" 會自動導到根目錄的 "/api/user/index.json"
當讀取 url "/user/list.json" 會自動導到根目錄的 "/api/user/list.json"


相關連結
https://gist.github.com/IskenHuang/7210042
yeoman

SlideNote - markdown makes slides

Markdown 是個很棒的編輯文件方式，尤其在程式文件嵌入原始碼也是非常方便，甚至坊間也很多專門做 Markdown 的編輯器，但是每次整理完文件如果需要再做出一份簡報同時就會造成很大的困擾：

1. markdown 要怎樣 copy/paste 到 keynote/powerpoint 上？
2. 基於理由一，乾脆放棄，開始問：「能不能直接用 markdown 來簡報？」

所以認為最根本的問題是「怎樣直接拿 markdown 做簡報」，方法很多，直接轉換為 ppt(powerpoint)/key(keynote) 檔、讓 markdown preview 為 slide show、直接線上轉換為 slide，這些想法都非常棒，但為了最快速解決「怎樣直接拿 markdown 做簡報」的問題做了現在的「SlideNote」

SlideNote 主要的目標：

1. 用 Markdown 直接產出 Slide
2. 完全使用 Markdown 語法
3. 線上編輯，線上產出

截圖 slide show


截圖 編輯 markdown 文件


截圖 首頁



因為快，所以很多東西都還不完整，歡迎隨時來亂玩它，有問題或建議首頁左下角有 feedback 可以馬上回報給我：）

相關連結
SlideNote

nodejs hosting service - openshift

從 nodejs 的 github wiki 上可以找到一個頁面為 Node hosting 上面有相當多的服務可以選擇使用，著要是測試用機器，所以幾個重點條件就是：

1. deploy 後立馬可以使用
2. 可以跑 nodejs 並且支援 0.8+ 的版本
3. 使用 Git 做版本控管
4. 免費(超重要)

基於以上條件目前使用過兩個服務：

1. heroku
2. openshift

這次先來介紹 openshift，oepnshift 是頂頂大名的 redhat 提供的服務，這次使用的是 openshift online，產品定位為 Public Paas，有支援語言：Nodejs 0.6+, 0.10+, JAVA, PHP, Python, Ruby, Perl, GO (註1)，或是可以直接在上面架設 Jenkins, Drupal, Wordpress 可直接開啟不需要自行 deploy。 openshift 官方還有寫了一套 Command-line client 工具來對 deploy 上去的 app 坐操作，關閉、啟動、重起、目前的 log 等，詳細可至官方查詢。

當然最重要的 openshift 符合我們所有的條件，並且免費的 Gear(instance) 可以開三台，如官網價錢：

Size	MemMemory	Storage	Recommended for	Cost
Small	512 MB	1-6GB 1GB expandable	PHP, Perl, Python, Ruby, Node.js, MySQL	$0.04/hour after the first 3
Medium	1GB	1-6GB 1GB expandable	Java, MongoDB, PostgreSQL	$0.10/hour
Medium (with JBoss EAP 6) Java EE6 Full Profile	1GB	1-6GB 1GB expandable	JBoss EAP	$0.13/hour

這麼佛心看到只能馬上跪下說聲「謝主龍恩」不然也不知道該怎麼辦，目前使用上除了 deploy 速度很慢（相較起 heroku），web 介面非常醜並且不人性化，常常找不到資料，官方文件看不太懂以外，其實還蠻不錯的，畢竟是要免費的測試機還是別太苛求。

目前就一點特別需要注意，deploy 上去後 port 與 root url 設定上與一般不太相同，必須修改如下：

port 必須設定為「process.env.OPENSHIFT_NODEJS_PORT」
root url 必須設定為「process.env.OPENSHIFT_NODEJS_IP」

以 sails 為例，local.js 必須修改如下

	module.exports = {
	host: process.env.OPENSHIFT_NODEJS_IP || '127.0.0.1',
	// port: process.env.PORT || 1337,
	port: process.env.OPENSHIFT_NODEJS_PORT || 80,
	// environment: process.env.NODE_ENV || 'development'
	// environment: process.env.NODE_ENV || 'production'
	environment: process.env.NODE_ENV || 'development'
	};

view raw local.js hosted with ❤ by GitHub

註1. 除了nodejs 外其他語言支援版本可至官方開發者中心查詢

相關連結
nodejs
github wiki
Node hosting
heroku
openshift
openshift developer center
openshift Command-line client
openshift pricing
sailsjs

node-hipchat

Hipchat 是一套相當好用的 Log system，還可以與 Github, Bitbucket, jenkins......等服務整合，團隊中打屁的同時還可以看到系統狀況，因為 Hipchat 官方給 nodejs 的不知道在寫啥鬼，所以就自己寫了一個簡單的版本。

使用起來相當簡單，詳細可以參考如下，完成後就會看到你的 room 中噴出兩筆 log

var hipchat = require('./lib/hipchat');

// log warn
hipchat.logger('Hello hipchat logger - warn', 'warn');

// log error
hipchat.logger('Hello hipchat logger - error', 'error');

這麼好用的東西當然要立馬 clone

git clone git@github.com:IskenHuang/node-hipchat.git

相關連結
Hipchat
IskenHuang/node-hipchat

gitst embed one file

Gist 是個放置少量的 code 或 blog 很好用的東西，但有時候可能是一個 Gist 內放了很多的檔案，這時如果複製貼上「<script src="https://gist.github.com/IskenHuang/b5bb5bc9b56a15452d6e.js"></script>」就會發生一次把所有的檔案都嵌入，但這中間可能需要嵌入一寫字來說明每個檔案間的關係就變很麻煩。

這時候只需要複製原本的連結再加上「?file=FILE_NAME」就可以只貼上一個檔案，範例如下：

<script src="https://gist.github.com/IskenHuang/b5bb5bc9b56a15452d6e.js?file=structure.md"></script>

切記，檔案名稱大小寫必須與 Gist 上面相同，不然無法正常使用

想關連結
Gist

sailsjs differentiate api and view controller

Sails 是一套我相當喜歡的 Node.js web framework，底層仍然是使用 Express.js，另外整合了很多常用的 web 套件：grunt, socket.io, RESTful API, ......等。

由於 sails 的架構與 codeigniter 相當類似，Controller 對應到 View，並且對應到 route，在 config 中有個 controller.js 還可以對所有的 controller 做設定，如自動產生 restful api 等，以及這次的重點「prefix」，prefix 設定後在 route 上就會自動改變如下

使用 prefix 前
http://localhost/CONTROLLER_NAME/ACTION_NAME

使用 prefix 後（ prefix 設定為 '/api/'）
http://localhost/api/CONTROLLER_NAME/ACTION_NAME

如果只是要做 api server 相信這會是個很棒的設計，還可以作為 api 的版本區分（例如「/api/v1/」），但要做「網站」在 view 與 api 之間就必須做些區分，以下的作法就是將 view 與 api 切開，view 統一由 ViewController 控制，其他的 api 交由一般的 controller 控制，從 route 看起來如下

// ViewController
// Get user or user's view
http://localhost/user

// UserController
// Get user '1' api
http://localhost/api/user/1

資料夾目錄如下

/api
    /adapters
        ...
    /controllers
        ViewController.js
        ...
    /models
        ...
    /services
        ...
/assets
    /bower_components
        ...
    /images
        ...
    /scripts
        ...
    /styles
        ...
    /fonts
        ...
    favicon.ico
    robots.txt
/config
    /locales
        ...
    404.js
    500.js
    adapters.js
    bootstrap.js
    controller.js
    cors.js
    csrf.js
    i18n.js
    local.js
    log.js
    policies.js
    routes.js
    session.js
    sockets.js
    views.js
/node_modules
    ...
/views
    /home
        index.ejs
        ...
.bowerrc
.gitignore
app.js
bower.json
Gruntfile.js
package.json
README.md

view raw structure.md hosted with ❤ by GitHub

接下來開始實作把 api 與 view 切開
首先是設定好 api 的 prefix，修改 「/config/controllers.js」

	/**
	* Controllers
	*
	* By default, Sails controllers automatically bind routes for each of their functions.
	* Additionally, each controller will automatically bind routes for a CRUD API
	* controlling the model which matches its name, if one exists.
	*
	* NOTE: These settings are for the global configuration of controllers.
	* You may also override these settings on a per-controller basis
	* by modifying the 'blueprints' object in your controllers
	*
	* For more information on controller configuration and blueprints, check out:
	* http://sailsjs.org/#documentation
	*/
	module.exports.controllers = {
	blueprints: {
	// Optional mount path prefix for blueprints
	// (the automatically bound routes in your controllers)
	// e.g. '/api/v2'
	prefix: '/api',
	// Whether routes are automatically generated for every action in your controllers
	// (also maps `index` to /:controller)
	// '/:controller', '/:controller/index', and '/:controller/:action'
	actions: true,
	// ** NOTE **
	// These CRUD shortcuts exist for your convenience during development,
	// but you'll want to disable them in production.
	// '/:controller/find/:id?'
	// '/:controller/create'
	// '/:controller/update/:id'
	// '/:controller/destroy/:id'
	shortcuts: true,
	// Automatic REST blueprints enabled?
	// e.g.
	// 'get /:controller/:id?'
	// 'post /:controller'
	// 'put /:controller/:id'
	// 'delete /:controller/:id'
	rest: true,
	// If a blueprint route catches a request,
	// only match :id param if it's an integer
	//
	// e.g. only trigger route handler if requests look like:
	// get /user/8
	// instead of:
	// get /user/a8j4g9jsd9ga4ghjasdha
	expectIntegerId: false
	}
	};

view raw controllers.js hosted with ❤ by GitHub

再來是設定 route 把 view 改為 '/'，修改「/config/routes.js」

routes.js

	/**
	* Routes
	*
	* Sails uses a number of different strategies to route requests.
	* Here they are top-to-bottom, in order of precedence.
	*
	* For more information on routes, check out:
	* http://sailsjs.org/#documentation
	*/
	module.exports.routes = {
	'/': 'ViewController.index',
	'/:page': {
	controller: 'ViewController',
	action: 'page'
	}
	};

view raw routes.js hosted with ❤ by GitHub

最後是產生 ViewController，在 terminal 輸入

sails generate controller view

並修改 「/api/controllers/ViewController.js」

	/**
	* ViewController
	*
	* @module :: Controller
	* @description :: Contains logic for handling requests.
	*/
	module.exports = {
	index: function(req, res) {
	console.log('viewController index begin');
	return res.view('home/index.ejs', {
	// layout default in the same folder
	// layout: 'layout',
	});
	},
	/**
	* redirect to right page
	* i.e http://localhost:3000/user
	* ^^^^^^
	* page = user
	* controller will redirect to ViewController/user
	*
	* @param {String} page redirect to page
	*/
	page: function(req, res) {
	var page = req.param('page');
	return sails.controllers.view[page](req, res);
	},
	user: function(req, res) {
	return res.view('user/index.ejs');
	}
	};

view raw ViewController.js hosted with ❤ by GitHub

ps. 或許也可以直接做 single page design，但某些狀況下透過 controller 可以從 server side 將其他訊息一併回給前端

完整的 code 可至 Gist 查看

相關連結
Sails
Node.js
grunt
socket.io
Express.js
codeigniter

iOS restore and upgrade

相信很多人都有升級 iOS7，並且在 beta 測試時就搶先使用幫助 apple 來 debug，這種就甘心的情操實在很偉大，但是使用了 beta 版本後卻沒辦法升級為正式版實在是很嘔的事，當然你可以再去開發者頁面下載最新的 build 來重刷，或者可以直接靠 itunes 來進行升級，以下就介紹如何使用 itunes 直接升級，只需要幾個步驟：

step1. 準備一條線連接電腦，一隻安裝了 beta 或舊版本的手機
step2. 把手機關機，把線接上手機，並且不要連接著電腦
step3. 持續按著 home 鍵（直到說要放開前請持續按著）
step4. 把線接回電腦，等到看到 itunes logo 再把home 鍵放開
step5. 按照 itunes 的步驟完成