YuTin's Blog

提到程式通常會談到design pattern與control flow，
而async對於control flow提供了許多簡易的操作方式。

1. 同步(series)與異步(parallel)的切換

面對io, net, 大量運算等, 這類需要耗費較多時間處理或等待的事情時, 透過異步的程序將可以大幅提升程式的執行速度.

而async提供了相對容易的切換方式,

async.parallel([
  function(){ ... },
  function(){ ... },
  function(){ ... }
], function(){
  async.series([
    function(){ ... },
    function(){ ... }
  ]);
});

2. 錯誤跳出的設計模式

在程式中的例外錯誤處理，
我們會使用到try catch throw的方式運作與攔截，
當面對可預期的錯誤時，
async提供了callback的error處理機制，
出現錯誤時，直接跳到results處理錯誤，
且在異步或同步的狀況下都可以容易的操作。

  async.series([
    function(){ ... },
    function(){ ... }
  ], function(err){
      console.log('show error', err);
  });

3. 處理大量request的queue機制

message queue 一直是面對大量request時，一個很棒的解法，
而async提供了queue與worker的機制，
當遇到大量的request時，http status先吐202，
接著把data放入queue後，讓worker依序執行完成。
詳細的介紹

4. 自動 retry 的機制

當服務需要做net的操作時, 因為會發生許多不可預期的狀況,
retry是一個必要的動作, 而async同樣提供了兩好的方式去操作。

5. 父子關係的優先順序

相信這也是gulp好用的關鍵之一，在一些複雜的操作裡頭，
許多function都會有先後的相依性，
而async能夠在這樣的情況下，提供良好的interface去做程式撰寫，
寫法就跟寫gulp一樣簡單，
只是我一直無法理解為何這個叫做auto。

6. 與其他library的相容性較高

NodeJS的另一個最大的特點就是EventEmitter,
它也是使用callback的機制，
面對許多NodeJS library都使用callback的情況下，
async相容性較高，且切換為promises寫法，
付出的成本也相對低。

7. 必須面對的效能問題

程式語言一直最煩人的就是效能問題，
同樣的目標往往都可以有很多種寫法，
除了考慮閱讀性外，
另一個必須要考慮到的就是效能問題。
直接參考此篇文章吧。

當然async還有許多好用的control flow,
了解每一種程式語言的特性,
才可以發威程式語言的最大優勢。

安裝 pear

$ curl -O http://pear.php.net/go-pear.phar
$ php -d detect_unicode=0 go-pear.phar

安裝 PHP_CodeSniffer

pear install PHP_CodeSniffer

設定 Standards

/usr/share/pear/PHP/CodeSniffer/Standards/

Sublime 安裝 package

install SublimeLinter
install SublimeLinter-phpcs

設定 SublimeLinter

{
    "user": {
        "linters": {
            "phpcs": {
                "@disable": false,
                "args": [],
                "excludes": [],
                "standard": "Hiiir"
            }
        },
        "show_errors_on_save": true,
    }
}

在多個專案裡, 常常會出現相同的需求/功能, 最前見的做法就是install Package(npm, yum, composer...),
但有時候這樣的Library可能正在共同開發or與專案相依性很高, 需要跨git的repository共同編輯.

通常這時候會發現一個解決方案Submodule,
它的運作模式跟package很像, 會把sub的目錄給ignore,
當有人git clone repository後,
就需要執行git submodule init/update將sub的repository給抓下來,
否則程式是無法正常運作的,
subodule將repository和sub repository做很完整的切個,
如此一來, 有無知者在主repository修改sub repository的code,
未正確的commit到sub repository.
茶几上就會充滿著悲劇!!!

現在要與大家分享一個更棒的解決方案git subtree,
讓你的repository像樹一樣成長吧!!

在以下每一次subtree的操作,
都需要處於已commit的狀態（git status 會出現 nothing to commit）.

subtree有個缺點,
就是cli的指令有點長,
因此第一步建議要將repository的url先設定好短代碼.

git remote add subsdk git@github.com:yutin1987/subsdk.git

將repository已存在的目錄切個成另外一個repository

隨著時間開發, 決定要切割成另一個repository作為library共用,
可以使用 split,

git subtree split --prefix app/library/SubSDK

把app/library/SubSDK目錄做切割,
接著將app/library/SubSDK, push到另一個repository並指定branch為master.

git subtree push --prefix app/library/SubSDK subsdk master

簡單兩行指令, 就已經成功的將subsdk切割到另一個repository.

把其他的repository, 引入到需要的repository內

某個repository, 剛好正需要使用subsdk,
並想要把subsdk也放到app/library/SubSDK目錄內,
只需要執行下行指令, 就可以把master放入到指定的目錄內.

git subtree add --prefix app/library/SubSDK subsdk master

維護sub repository

在coding的過程中, 只需要按照平常的習慣commit/sync,
當有修改到sub repository內的code時,
只需要在整個repository commit過後,
執行git subtree push --prefix app/library/SubSDK subsdk master
就可以更新遠端sub repository,
當其他的repository需要更新sub repository時,
可以執行git subtree pull --prefix app/library/SubSDK
完成本地端的更新.

git clone

當repository被clone下來後, 並不需要執行任何指令,
就可以正常運作,
因為在repository commit的同時,
會把sub repository也一起commit,
並不會ignore.

最近兩位好友，接續寫下了這兩篇文章：
http://blog.caesarchi.com/2013/12/blog-post_22.html
https://www.facebook.com/notes/10151828753826709

好吧！我承認我忍不住手癢哩...
先來看這張照片：

爸媽別怕！這不是我的，是我朋友的成績單,
因為我的成績單比這個還慘,
我還記得當年我拿出充滿悲劇的成績單時,
朋友這樣對我說：宇庭你也太誇張了吧～這樣你以後怎麼考研究所/留學, 還要找工作耶～
但我爸媽對我說：沒關係啦！有畢業就好...XD

雖然我還是不了解為何我要去讀研究所/留學,
但至少我現在正在上班中...(偷寫文章中,後面主管的眼神正在追殺我的規格書.)
至於上面那張成績單的朋友, 我會很熱情地邀請他, 希望有機會成為同事.

時空跳回到2011年, 我大學畢業那年,
跟眾多男性同胞一樣, 帶著準備被國家抓走(服兵役)的心情...在家...
想著＄＄＄＄＄ (是的...我想的是＄, 因為當時我已經開始沒跟家裡拿生活費, 沒＄＄我會餓死)
於是我不要臉的投履歷到廣達電腦(Quanta Computer)的QA部門.
面試時, 跟所有上市上櫃公司一樣, 考英文考專業再面試...
當時我英文考得之爛, 爛到面試官都不願意跟我講成績. (統一入學測驗我英文24分)
但有趣的是我竟然接到『報到通知』, 只是由於無工作經驗只大學畢業, 所以薪資...
想想, 服兵役前去打發時間一下也好, 見見世面, 因此就開始了我的第一份正式工作.
悲劇的是每天要寫issue tracking, 而且只能用英文...XD (那半年的時間英文進步之神速, 等於讀了16年的英文一樣)

此時的我心情是：『誰說工作難找的？是誰說英文很重要的？16年來到底學校教了我什麼？廣達的美食街真好吃^o^還有健身房』

（服兵役期間與主題無關, 省略...）

快退伍前(3個月),
有了之前的經驗, 我整個超不要臉的開始找工作.
因為開始要正式面對社會了, 工作不能亂找, 至少要找有興趣有未來的工作.
從小就認為PHP王道的我, 全投了用PHP的軟體公司.
很可惜的這類公司, 在IT業裡要找到上市上櫃的幾乎很難.
但有不少上市上櫃的IT公司, 找我去寫韌體/做QA.
有趣的是面試了7間, 6間都上了.
唯一沒上的那間超有趣, 公司有3位部門主管找我去面試,
但因為英文考得太爛了, HR還讓我重考, 但最後HR還是說：由於你英文太差, 按公司規定...
此時你與我的心情應該是：『你看吧！英文很重要, 是的！英文很重要. 如果你要去這些上市上櫃的企業, 跟那些ABC... 真的很重要』
有趣的是這7間公司都跟我說：由於無工作經驗只大學畢業, 所以薪資...
（PS：拒絕我的那1間, 因為希望我把英文準備好再來面試, 所以先跟我講薪資）

但我最後還是選了間, 母公司是上市公司的威聯通(QNAP),
好玩的是他的薪資跟拒絕我的那間上市上櫃公司差不多,
一年後我決定更換工作.
這次只面試了4間, 也是一樣, 有1間打槍我...
打槍我的是Google (我真是夠不要臉了,哈哈)
不過有個共通點, 就是：由於無工作經驗只大學畢業, 所以薪資...

三次重大的面試經驗裡, 薪資都有漲, 職稱也從 助理工程師->工程師->資深工程師.
唯一不變的是『由於無工作經驗只大學畢業, 所以薪資...』

靠背!!此時讓我想起,
小學老師對我說的話：同學你還小,不要談戀愛,等你國中之後在...
國中=====================================高中之後在...
高中=====================================大學之後在...
大學=====================================畢業之後在...

此時的我心情是：『你們不要在乎爛我了！』（不知道你也有沒有這想法？）

業界告訴你：學歷/資歷最重要（真的是這樣嗎？）
學界告訴你：先學之後在...之後在...（真的是這樣嗎？）

時空拉回到我的求學時期,
從國小開始就熱衷研究電腦軟體.
國中時曾經去補英文, 沒多久後就不補了, 跟媽媽大吵了一架.

現在.
為了吃飯, 我現在工作主要用到的技術是： PHP, JavaScript, MySQL, Shell, 管理（千萬別相信課本）
老實說沒有一個是學校教我的, 雖然PHP和MySQL在大學有開課,
但這兩個技術我早在國中時期就會了, 也許不是很強, 可是大學教的也只是基礎...XD
英文學校有教,但我沒學進去. 現在才開始學, 倒不如說我在邊用邊學.
歷史地理社會文學...那些就提了, 別跟我說有這些知識跟人聊天才會有深度. 這種事情在我看來就是『假掰』
歷史文化...我喜歡親身去體驗, 這種體驗放自己心裡, 有機會再跟朋友分享分享就足夠了.
而且要先了解自己的歷史文化才是重點.

如果,
你覺得學校該教我們的是基本知識, 不是謀生的技能.
其實我認同這個想法,
也就是義務的基本教育,
但這些知識在國小6個年頭裡還沒學會, 不可悲嗎？
什麼是基本的知識？我想該是理財, 愛情, 情緒, 公民.... 等吧

我們,
該如何改善教育？說起來肯定又是長篇大論.
說太多還不如做件有意義且精準的事,
也許我們可以把學生跟社會連結, 讓學生看到社會, 不是只看到媒體講, 更不要只聽學校/企業說.

當然,
學習, 是自己的責任. 那些社會上的輿論/知識, 都該保有質疑的空間.
面對未來, 自己要對自己負責.
我跟大家一樣, 必須要找份上市上櫃公司工作, 為了不讓爸媽擔心.（尤其像我這個從小就不乖的孩子）
但...不時別忘了聽聽自己內心的聲音

2014.1.1 補充
最近有些朋友想休學, 也有人想換工作,
因此有人問, 離開校園如何學習？ Google Search當然是你最好的工具,
所以如何下關鍵字可是門學問.
我更喜歡在YouTube上搜尋一些有趣的新知, 尤其那些不可思議的科技.
當然閱讀書籍/網路文章也是一個最懶人包的方式.
除此之外, 現今還有很多平台, 像是：
TED < http://www.ted.com/ > 創新思維我都靠它
台灣開放式課程 < http://www.tocwc.org.tw/ > 會放上去的多半會是很棒的教授/講師, 上課內容超精彩
至於英文嘛～看電影or聽音樂是最棒的選擇,
像 http://voicetube.tw/videos/9076 這樣, 這網站理念不錯, 可是內容跟操作就...有待加強,
我超愛看這種中英文影片, 學英文之外還可以找話題. 希望有中日文影片, 最近開始想學日文

至於你想離開校園, 我的建議是：可以先從找工作開始,
當年我也是有了工作之後, 才跟爸媽說我要『休學』的.
不過通常爸媽會跟你說：這實習薪資太低, 你看看公務員...

淘寶 1111光棍節 創造的紀錄...

此新聞一出之後，華人的精神又出現了... Copy + Paste

會寫此文，純粹昨天2013/12/12在屈臣氏聽到廣播

Yahoo購物...1212活動開始瞜～ 全面....

我心裡的第一個反應是別鬧了！你媽沒生大腦給你嗎？

讓我們來看看淘寶網的廣告吧！

行銷必須要了解在地文化,
當你的客戶根本就沒有在過光棍節時,你在跟客戶光棍個什麼勁？
當你的客戶在準備聖誕節的交換禮物時,你在跟客戶1212去郊遊做啥？

對了!既然有UX for UI是不是就會有,UX for Marketing, UX for Manager, UX for Service, UX for anythings...
是的,

Donald Norman說: 用戶體驗從打開產品包裝開始

甚至有些企業成立了UED/UXD/UCD部門,

好的! 先讓我們回到初心,從FrontEnd的角度出發,
我參加的workshop是
从需求探索，到落地用户体验设计(江宗哲,曾俊豪) tag: 需求, 體驗, MVP, App
设计一个对每个人都适用的网站(Whitney Quesenbery) tag: 需求, 方案, Web
以上兩場, 都是我從FrontEnd角度用心挑選的,
首先,先來談談需求,

Paul Adam說: 設計產品的時候通常會想三件事，想任務、想產品的構架、想互動,如果一個公司都沒有目標和核心任務的話它很難成功。

這個需求是改善還是改變? 別急著改變世界,改善是企業99%的Value.
需求要單一且明確,而且最好用一句話就能表達完整.
接下來正如你所知的需求來至於用戶
但...

Donald Norman也知道: 需求往往是來自於你的老闆(boss)或者老闆(boss)的老闆(boss)

別嘆氣, 讓我們先來找尋真正的用戶,
問卷會是一個好的開始, 問卷的目的不是為了深入了解用戶, 而是替你找到用戶,
目標用戶一定是一個可以被明確定義的群體,
如果你的老闆說: 我們的產品要服務天下所有人. 別失落,至少他可能會支持多元成家方案.
最重要的是問題不宜太多,建議10題以下.
而訪談重點在於用戶在過去經驗裡,如何解決此目標需求,
用戶期許用什麼方式解決,而我們又能給予什麼? 千萬別急著說我們要做XXX專案.
當然絕對不是是非題, 必須要是申論題, 而且越深入越好,
最好讓用戶深深的愛上你, 讓用戶願意對你談吐一切的真心話.

當然,到此你應該已經要深入了解用戶,
有時候, 同樣的需求, 不同的用戶, 也會有不同結果.
此時你也許會 調整需求 修正方向, 甚至於直接把專案砍掉.
別擔心! 這是正常的, 至少這已經成功的降低研發損失,
而且在UX的過程這會是常態. 你要了解, 專案可以砍掉, 但企業不能倒掉.

來吧! MVP的製作, 正是FrontEnd燃燒熱血的時刻.
1.等量訊息中規劃視覺動線
2.清楚設計入口點,並統一樣式
3.強化關係控件的關聯性
4.取捨控件去留 - 80/20法則

身為一名前端魂, 必須要了解有效的使用UX專業,
可以減少你的開發成本, 更可以提升你的開發效益.

每一個按鈕的位置,文字的大小,區塊的顏色...都與使用的需求互動緊密相扣,
前端在軟體專案上,是產品與用戶的第一接觸,
設計的friendly會讓用戶享受使用者體驗, 產品就會產生價值.
硬體買了只能選擇退貨,軟體用了不好[Esc]按鈕,只需要1sec.

一個有價值的產品,就可以創造信仰
大众点评(中國的美食地圖App&Web),
在用戶的心理是: 照著APP點餐準沒錯,絕對不會踩到雷.
代金劵也成了該服務的指標性產品.
企業內的UX成員我遇到的就有4位,與他們交流的每一刻就像上了一堂寶貴的課.

FrontEnd不會UX沒關係,至少可以先徵才UX Designer,
接著面對軟體專案,找你的PM一起來做用戶訪談(用戶調研)吧!

Paul Adam說: 互聯網的作用被人們低估了，互聯網其實是一個非常偉大的發明，它的影響遠超乎人們目前的估計。

軟體開發之規劃流程>>
定義需求->用戶訪談->MVP製作->回饋->決定完工/上線版號

最後,別忘了放開界線,多交些熱血勇者吧!訪談從了解別人開始..

很多的很多也都是從1開始的,改善比改變更有價值!!!

附錄:
太多內容,短篇小文也無法說個明白,歡迎密切注意HPX系列活動 http://www.hpx-party.com/
更多活動照片參考如下:
http://www.flickr.com/photos/tomtullis/sets/72157637929774203/
http://www.flickr.com/photos/tomtullis/sets/72157637939749685/
http://www.flickr.com/photos/tomtullis/sets/72157637986060293/
http://www.flickr.com/photos/tomtullis/sets/72157637997147334/

QNAP的MySQL設計，是可以讓使用者自由修改root密碼的，
當應用服務需要使用到MySQL的時候，
就需要有一組for單ㄧ應用服務的MySQL帳戶，並將權限指定到特定的database。

無法得知MySQL root的密碼情況下，可以透過下列shell建立新的MySQL帳戶，

MYSQL_INIT="/etc/init.d/mysqld.sh"
$MYSQL_INIT stop
cd /mnt/ext/opt/mysql/bin/
./mysqld_safe --skip-grant-tables --user=admin >/dev/null 2>&1 &
/bin/sleep 5
/bin/sync
./mysql -e "INSERT INTO mysql.user VALUES('localhost','justin',PASSWORD('lovelove'), 'Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y', 'Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y', '','','','',0,0,0,0);"
$MYSQL_INIT start

接著就可以使用該帳戶，對MySQL做任何的操作。

談起這話題，肯定是硬幫幫的事情，
牽扯的層面也不是單單的MySQL，
從Front-End．PHP．MySQL都有責任，
不過本次先讓我們從最核心的MySQL開始談起吧！

與SQL談到sort肯定會扯到ORDER BY sort_key，
當sort_key是有規則可循的，如create_time或update_time...等，
這些都是簡單事。

可是當sort_key的value是可以讓使用者變動的，
也就是哪天使用者失戀了，覺得麵包比愛情重要，滑動了一下手指，
就必須要修改table的sort-key欄位的value時，就開始不是簡單事哩!!
當這樣的更動每天須面對1000萬以上次的話，就成了困難事的開始。

先回到初衷，假設有個table如下：
id是primary key欄位，而sort_key是index欄位

要將排序從1->2->3->4->5改成1->3->4->2->5，可以：

UPDATE `table` SET `sort_key`=0 WHERE `id`=1;
UPDATE `table` SET `sort_key`=3 WHERE `id`=2;
UPDATE `table` SET `sort_key`=1 WHERE `id`=3;
UPDATE `table` SET `sort_key`=2 WHERE `id`=4;
UPDATE `table` SET `sort_key`=4 WHERE `id`=5;

SELECT * FROM `table` ORDER BY `sort_key` ASC 後，得到

覺得UPDATE要下5次太麻煩，也可以

SET @sort = 0;
UPDATE `table` SET `sort_key`=(@sort:=@sort+1) ORDER BY FIELD(`id`,1,3,4,2,5);

但上述兩個方式，都需要一次UPDATE 5筆資料，實在不是一個很好的解決方案，
當資料有1000萬筆的時候就需要更新1000萬筆的資料。

讓使用者每次更新排序時，只UPDATE 1筆資料or較少的資料肯定是最棒的，
以欄位sort_key出發，先談談暴力的方法，把sort_key改成如下：

要將排序從4移動到1與2中間時，可以：

SQL> SELECT `sort_key` FROM `table` WHERE `id`=1 ORDER BY `sort_key` ASC LIMIT 2
PHP> $sort_key=($sort_key_a+$sort_key_b)/2
SQL> UPDATE table SET sort_key=${sort_key} WHERE id=4

先取得1,2的sort_key也就是1000和2000，透過PHP將sort_key相加除以2，並只更新到MySQL有更動排序的該筆資料。

因此只需要更新1筆資料和做一次SELECT，
但預留的sort_key空間是有限的要避免碰撞，php必須排程在低負載的時候更新sort_key區間回到1000的連續數列，
勢必也會增加不少的負載。

竟然如此，我們就必須要瞭解

順序對資料庫沒有意義，只對使用資料的人有意義

跳脫single table的思維，現在用2個table去實作，
第一個table用來存放data，第二個table用來存放sort_key，
並加入group_id欄位，假設多數的排序需求，只更動部分資料，
如下：

要將group 1的排序從1->2->3，修改為1->3->2的時候，可以：

DELETE FROM `table_sort` WHARE `id` IN (1,2,3);
INSERT INTO `table_sort`(`id`, `sort_key`) VALUES (1, 1);
INSERT INTO `table_sort`(`id`, `sort_key`) VALUES (2, 3);
INSERT INTO `table_sort`(`id`, `sort_key`) VALUES (3, 2);
SELECT `table_data`.*
  FROM `table_data` LEFT JOIN `table_sort` ON `table_data`.`id`=`table_sort`.`id`
  WHERE `table_data`.`group_id`=1 ORDER BY `sort_key` ASC

INSERT與DELETE的速度比UPDATE快速，所以選擇以INSERT與DELETE作為操作，
當然DELETE到INSERT的轉換期間也是要被考慮到。

老問題，要更新的筆數實在太多，必須要想辦法調整成更新越少筆數越好，
把table_sort用簡單的一句表示可以看成：sort_id=>id, 1=>1, 2=>2, 3=>3
改成用PHP陣列表示就是：array(1=>1, 2=>2, 3=>3)
其實array本來就是個連續的流水號，因此可以簡化成保留id值array(1,2,2)
然後把array存進database，就變成：

要將group 1的排序，改成3(巨峰大葡萄),2(芭樂),1(香蕉)，只需要：

UPDATE `table_sort` SET `sort_key`='3,2,1' WHERE `group_id`=1

困難的問題就在怎麼把一行的sort_key與table的data做連結，
可以從MySQL與PHP兩個地方開始思考，
先來說說MySQL的做法，在MySQL的ORDER方法中可以ORDER BY FIELD，也就是：

SELECT `sort_key` FROM `table_sort` WHERE `group_id`=1;
SELECT * FROM `table_data` WHERE `group_id`=1 ORDER BY FIELD(`id`, ${sort_key});

附帶一提，此時${sort_key}就要注意sql injection的問題，
為了效能，當select不到sort_key時，可以SQL連ORDER BY FIELD都不必下，
但肯定還是有人會對ORDER BY FIELD的效能有些疑慮。

沒關係，接著來看看PHP怎麼實作與sort_key的連結，

...待續

前端面對視覺不設限，是最優質的合作原則，前提是必須面對夠威的視覺設計師。
強者之視覺設計師出圖，
尺寸絕對不可能只有5,10,15，別以為這是在划酒拳，
色彩也不會只有#333,#999，給#168也不會比較順利。
如果前端與視覺的互動是，a視覺給個尺寸，a視覺給個顏色...
接著又忘記了，只好再a視覺a視覺a視覺...a視覺...
這種事肯定比忘記女朋友生日還恐怖！

接下來當然而就是要介紹視覺與前端互動的好物，
鄉民有言：有圖有真相，沒圖去改圖
改圖就靠以下好物吧！

1. Color Maker (Free) (OSX only)
2. Mark Man (Free) (OSX, Windows)
3. xScope ($29.99) (OSX)
4. Skitch (Free) (OSX, Windows)

當然，強者要靠PS萬能，也只能接受小弟我一拜了m( 　 )m

Color Maker (Free) (OSX only)

Color Maker是本人最早使用的工具，輕巧且嵌入在OSX最上方的選單列，只要三步驟立即取得圖片上的顏色。

雖然是輕巧的工具，但基本的history(紀錄)．favorite(最愛)功能還是有，
安裝後，在最上方選單列會出現一個色盤，
點選色盤開啓視窗，接著點選滴管，隨著游標移動即可獲取色碼，

輕巧的工具學習成本夠低，簡單幾句就可以說明完，
其實到此已經很夠使用，但人總是健忘的，
就算history(紀錄)．favorite(最愛)的數量沒有限制，
專案變多顏色變多，難免搞混搞砸，此時我們就需要介紹下一套進階的工具。

Mark Man (Free) (OSX, Windows)

除了顏色的獲取之外，Mark Man還可以取得尺寸的資訊

單單多一個尺寸功能並無法完全虜獲我的心，
可以將獲取來的顏色/尺規存回圖片裡，並依專案有效管理，
才是我使用Mark Man的最大目的。

Mark Man主要有四個功能，
分別是尺寸．區塊．顏色．註解，快速鍵也分別是1．2．3．4，很好記吧!!

先來介紹尺寸功能，

接下來區塊，

顏色正是我最常用的功能，

第四項功能就是註解，

重頭戲就是儲存功能，

如果想要在後續還可以繼續修改資訊，
必須把[filename].mkm檔，與png檔放在一起。

xScope ($29.99) (OSX)

如果覺得顏色&尺規資訊不夠看的話，
肯定要瞭解這套xScope全方位的工具(箱)，
之所以叫做工具箱，
肯定是功能完整度，好比師傅手邊隨時會提著的那卡萬用工具箱。

要使用鏡像功能，必須先準備一台Mobile裝置iPad, iPhone...
目的是為了...
由於要較多的操作步驟，不如直接看官方教學影片吧！

接著參考線, 框架, 定位點，都是在對畫面做尺寸取得的操作，
這部分前端設計師使用到的機會也許不多，暫且就不做太仔細的介紹。

Skitch (Free) (OSX, Windows)

最後，
Skitch不能算是開發者工具，
Skitch是由Evernote製作的延伸套件，
但Skitch是一個超好用的溝通工具，尤其在視覺化的問題上。

最常用的肯定是畫面截圖，