高見龍

喜愛非主流的新玩具,組合過後再拿來賣給客戶

我的工具箱

先說明一下,我目前主要的作業系統是Mac OS,工作主要是網站程式開發,前端是Flash、ActionScript以及JavaScript,後端則是Ruby以及Ruby on Rails,應該再過半年左右就會加入Mac app/iOS app的專案。以下來獻曝一下我目前比較常用的工具箱,供大家參考。

軟體外掛

主力的右手

工具 價錢 說明
MacVim Free 最近換上手的文字編輯器,用它之後把不少工具都暫時放到第二線去了,選用它原因可參考這篇
TextMate $59 寫Ruby/Rails的強力好工具,但中文字型一直是很大的問題,我換了新歡之後,目前已暫居第二線。
網址:http://macromates.com/
Sublime Text 2 Free or $59 也是很棒的文字編輯器,中文字顯示正常。目前也因為MacVim的關係,暫時把它移到二軍了。
網址:http://www.sublimetext.com/2
Mou Free 我覺得是目前看到最好用的Markdown編輯器(同上,目前暫居二軍)。
網址:http://mouapp.com/
ByWord $9.99 也是好用的Markdown編輯器(同上,目前暫居二軍)。
網址:http://bywordapp.com/
Xcode Free 寫Mac app/iOS app用的。
網址:http://developer.apple.com/xcode/
iTerm2 Free Mac OS內建的Terminal替代品。
網址:http://www.iterm2.com/#/section/home
Sequel Pro Free 圖形介面的MySQL Client。
網址:http://www.sequelpro.com/
Balsamiq Mockups $79 用來畫網站layout的好工具,有點貴就是了。
網址:http://www.balsamiq.com/products/mockups
Adobe工具組 價錢請見官網 很貴,不過是吃飯的傢伙,沒辦法..

輔助的左手

工具 價錢 說明
TotalFinder $18 Mac OS內建的Finder的替代品。
網址 http://totalfinder.binaryage.com/
Alfred Free, or £15 Mac OS內建的Spotlight的替代品,有了它之後,原本得在dock排排站的軟體都可以省掉了,只要透過簡單的關鍵字就可以直接叫出來,相當方便!(而且我覺得比QuickSilver還好用)
網址:http://www.alfredapp.com/
TextExpander $34.95 可以快速的,而且是System-wide的,有這個的話,即使你用的編輯器沒有支援你習慣的code snippet也沒問題了。snippet
網址:http://www.smilesoftware.com/TextExpander/
Divvy Free, or $14 用來調整視窗大小的小工具。
網址:http://mizage.com/#macdivvy
ScreenFlow $99 我用來錄畫面的工具。
網址:http://www.telestream.net/screen-flow/overview.htm
KeyCastr Free 可以在螢幕上顯示目前按了什麼按鍵,通常會拿來跟ScreenFlow一起服用。
網址:http://stephendeken.net/software/keycastr
ColorTagGen Free 吸顏色用的好用小工具。
網址:http://itunes.com/mac/colortaggen
RemoteBuddy £19.99 可以把Wii手把當做簡報器用的工具。
網址:http://www.iospirit.com/products/remotebuddy/
Cyberduck Free 傳檔工具,支援FTP/SCP,也支援AWS的S3。
網址:http://cyberduck.ch/
Welly Free 用來連上BBS的。
網址:http://code.google.com/p/welly/
SourceTree Free Mac OS上少數免費而且還不錯用的圖形化版本管理工具。
網址:http://www.sourcetreeapp.com/
Github.app Free Github出的小工具。
網址:http://mac.github.com/
Gmail Notifier Free 會在系統列通知信件的小工具
網址:http://toolbar.google.com/gmail-helper/notifier_mac.html
Dropbox Free 應該不用太多介紹了,我大多是拿來跟外發或客戶交換檔案用的。
網址:https://www.dropbox.com/
Adium Free Microsoft是有給Mac出了一款MSN Client,但沒辦法收離線訊息!! 還好這隻小鴨子功能也不差,支援離線訊息之外,還支援好幾家的協定(Gtalk、Facebook、ICQ等),就是傳檔的時候慢了點,還有偶爾會當機這樣的問題而已。
網址:http://adium.im/
Twitter Free Twitter官方的app,可在Mac App Store取得。
網址:http://itunes.apple.com/us/app/twitter/id409789998

專案管理

工具 價錢 說明
Redmine Free 好用的專案管理工具,我都是拿來給客戶用的,有什麼問題就請客戶在這個地方開票,比Email往來更有效率,也更好管理。
網址:http://www.redmine.org/

Chrome Plugins

工具 說明
Send to Kindle 用來把看不完的頁面丟往Kindle再慢慢啃的好工具
Awesome Screenshot 方便的瀏覽器拍圖外掛
Color Pick 吸顏色用的,但僅限於網頁頁面。
Evernote 看名字就知道是來用跟Evernote同步的。
goo.gl URL Shortener 縮網址用的。
Library Detector 可以偵測這個頁面有用了哪些JavaScript Library。
LiveReload 用來跟LiveReload串接的外掛
LocalStorage Monitor 可以檢視目前這個頁面的Local Storage狀況。
新同文堂 簡繁轉換的工具
Orbvious Interest 可以把目前這個沒時間看或來不及看完的頁面往Read it Later送,可以稍後再讀。
Pretty Beautiful Javascript 把JavaScript美化的小工具
Try coffeeScript 直接在瀏覽器裡就可以寫CofeeScript,看看效果如何。
Vimium 用Vim的操作方法來操作瀏覽器,跟Vim一樣,習慣之後真的會上癮。

以上工具皆可在Chrome Web Store找得到

其它

工具 價錢 說明
iTunes Free 這是個很重要的東西,平常除了聽音樂之外,我還訂了許多的screencast、podcast,還有Stanford超紮實的線上課程,這些都是很棒的資訊來源。

實體外掛

除了軟體的工具、外掛之外,還有些實體的外掛..

Kindle

看書用的好東西,細節可參考這篇

iPad

最近都被老媽跟小朋友霸佔走了,就不多提了.. Orz

機械鍵盤

我的工作有很大時間都是在敲鍵盤,所以投資給自己打起來比較舒服(增加爽度)的鍵盤是剛好而已,Mac內建的巧克力鍵盤是不錯打,但就是少了手指頭的回饋。

image

外接螢幕

我目前工作用的主要是laptop,螢幕不大,沒有第二顆外接螢幕在開發網站的時候相當痛苦,真的一但習慣之後就回不去了。

椅子

跟鍵盤一樣,我幾乎是整天都是坐著的,所以投資給自己一隻坐起來比較舒服的椅子也是剛好而已。

便利貼

這是最近加入的習慣,我用實體的便利貼做為輔助的工具。雖然說電腦類的便利貼軟體那麼多可以選擇,但我還是覺得比不上手寫 & 貼在螢幕上來得直覺:

image

所以整個組合起來,看起來大概會是這樣:

image

(抱歉不是很整齊..)

至於Windows上的工具組合,我已經忘得差不多了,Windows目前只有拿來測試IE瀏覽器以及網路ATM轉帳用途而已..以上,如果大家也有好用的工具,也歡迎一起留言討論。

哈囉,2012!

對於新的東西,寫程式的總是不免俗的要來個”Hello World”!

今年幹了哪些事

  • 認識了更多的神人/高手,雖然很多目前都還看不到車尾燈,但至少有個方向可以跟
  • 辦了9場的Flash/ActionScript讀書會,每回人數在50~100之間,感謝大家的支持
  • @pct一起辦了第一屆的PHPConf in Taiwan
  • 有14場公開的表演,其中有的是教育訓練,有的是心得分享,真是愛現!
  • Blog竟然有90篇文章!! 我剛自己算了一下也嚇到

希望更熟悉技能

  • Vim(希望可以練到跟吃飯、呼吸一樣自然就好)
  • Ruby/Rails(往Best Practice前進)
  • JavaScript
  • Cocoa Framework

許願

  • 小朋友(們)可以順利長大
  • 希望可以做出自己的產品
  • 繼續把Flash/ActionScript讀書會辦下去
  • 希望可以投稿國外某些知名網站(練英文的時候到了)
  • 希望COSCUP/OSDC/RubyConf Taiwan/RubyKaigi/PHPConf Taiwan這5個研討會,至少有2/5可以上台講,而不是只是坐在底下當聽眾
  • 希望可以像閃光哥一樣,也可以有一本書(我要遺臭萬年用的)
  • 希望體重可以再比現在再少個5公斤
  • 公司生意.. 順利就好

許完願了,但光許願是不會實現的,所以我要開始動手寫書的TOC了!

Vim的操作小技巧

Vim的操作除了基本的hjkl之外,快速鍵組合相當多,不過大概有個規則。以下是我自己個人比較常會用到,而且覺得還滿方便的操作小技巧,寫起來幫自己加深記憶,希望也對有需要的朋友有幫助。

說明

  1. ENTER = 按下enter鍵,CTRL = 按下ctrl鍵,ALT = 按下alt鍵,如果是大寫字母例如G = shift + g,CTRL w j = 按著ctrl鍵不放,再按下w,再按下j
  2. 這裡提到的都是Vim或是plugin內建的指令,如果你不喜歡或覺得難按,可以透過修改.vimrc來改變快速鍵的對映
  3. 以下指令都是在一般模式(Normal Mode)下使用

游標移動

  • gg = 移到整份文件的最上方
  • G = 移到整份文件的最下方
  • H = 移到目前螢幕的最上方
  • L = 移到目前螢幕的最下方
  • 10 ENTER = 游標往下移動10行,前面的數字表示行數
  • :10 ENTER = 游標直接移動到第10行
  • {} = 把游標移動到上一個、下一個段落
  • CTRL w j = 把游標往下面的分割視窗移動
  • CTRL w k = 把游標往上面的分割視窗移動
  • CTRL w h = 把游標往左邊的分割視窗移動
  • CTRL w w = 在各個分割視窗間切換

建議可以搭配 EasyMotion 更有效率的移動游標

搜尋

  • / = 搜尋
  • * = 移往下一個搜尋結果
  • # = 移往上一個搜尋結果

編輯

  • u = undo,回到上一步
  • CTRL r = redo,回復undo
  • . = 重複上一個步驟
  • ~ = 改變英文字母的大小寫,本來大寫會變小寫,小寫會變大寫
  • :m+ = 把目前這一行往下移動一行
  • :m-2 = 把目前這一行往上移動一行
  • >><< = 增加、減少縮排
  • yyY = 複製游標所在的這一整行
  • pP = 在游標之後、之前貼上複製的內容
  • "ayy = 跟yy有點像,但是是把複製的東西放到a 暫存器裡,這個a可以用其它25個英文字母代替,可以用:reg指令把目前的暫存器叫出來看
  • "ap = 在游標之後貼上a 暫存器裡的內容

模式切換

  • ESCCTRL [ = 回到命令模式,ESC是獨立一顆比較好按,但比較遠,如果你不想讓你的手離開打字區的話,可以選用CTRL [,或是在~/.vimrc裡自訂快速鍵
  • CTRL v = visual block模式,可進行像TextMate按住alt鍵的區塊選取

NERDTree

  • B = 叫出bookmark
  • C = 把目前游標停留的這個目錄設定為根目錄
  • p = 把游標移動到上一層目錄
  • P = 把游標移動到根目錄
  • J = 把游標移往這個結點的第一個
  • K = 把游標移往這個結點的最後一個
  • u = 把樹狀結構的根目錄往上移一層
  • I = 切換是否顯示隱藏檔案
  • m = 叫出NERDTree的系統選單

其它

  • :! = 執行外部指令,例如:!ls則是執行ls指令

參考資料

這裡有幾篇我覺得寫得很棒的文章,可以更清楚的知道在Vim裡操作的原理

Vim的快速鍵組合如果用得熟的話,整個編輯的過程中是幾乎可以不動到滑鼠的,不過還是要多練習啦,差不多練到跟吃飯睡覺一樣熟練就可以了。打完收工 :wq

Vim

前言

在十年前開始接觸FreeBSD的時候,就聽聞過Vi/Vim這東西,那時候第一眼的感覺是:「這東西看起來好陽春,功能一定也很陽春」。當時在終端機上也還有別的編輯器可以選擇,例如Joe、Nano等,而且在本機的作業系統(Windows)也有其它的選擇,例如UltraEdit。

以前會覺得寫程式、開發軟體,沒有IDE一定沒辦法。有些程式、軟體的確是需要IDE的幫忙,不然不知道怎麼寫。直到近幾年的工作幾乎用的都是文字編輯器,才發現其實文字編輯器可以做的事情相當多。二年多前開始把作業系統換成Mac OS之後,除了要寫Flash需要開Flash IDE + Flash Builder之外,其它幾乎就是只用TextMate了。雖然說它的中文顯示問題一直被大家嫌到不行,而且傳說中的2.0版也一直沒消息,但它依舊是我開發上的首選工具。

TextMate 2實在是讓人等太久了,所以大家開始找它的替代品。不久前發現Sublime Text 2這個編輯器,它的中文字是正常的,外掛看起來也滿夠用的,而且還可以吃TextMate的bundle跟theme,本來打算換過去的時候突然出現TextMate 2的消息了,聽說中文顯示是正常的。但這時候我卻想,我還要過著這種逐水草而居的生活到什麼時候? 難道沒有一款編輯器是可以學了之後就一直用的嗎?

這時候我想到不久前才剛過20歲生日的Vi/Vim。雖然不久前陣子有練了一下手感,但沒認真下定決心要把它當成是自己吃飯的工具。於是,就找了個週末來認真的練了一下手感,發現出乎我意料的好用,之前在TextMate/Sublime Text 2上可以做的功能,在Vim幾乎都有替代品,我以前真的是錯怪它了!

以下大概是我目前有用到的外掛跟設定,不是很多,但就我自己工作上用得到的。這是我目前的樣子(其實NERDTree比我想像中的漂亮) image

外掛與設定

我的.vimrc設定

我把自己的設定檔跟用到的plugin放了一份在這裡,有興趣的朋友可以參考看看 :)

我用到的外掛:

Pathogen

用來管理外掛的外掛。以前安裝外掛,常常得把一包程式裡的各個資料夾到處撒在~/.vim資料夾裡,現在透過pathogen的話只要放在~/.vim/bundle裡就差不多行了,相當方便。

NerdTree && NerdTreeTab

Vim的檔案總管啦,當資料夾一多,沒有它不知道該怎麼工作了。

我在.vimrc裡有把NERDTreeToggle設定到F2鍵上,這樣就可以快速的打開、關閉了。

NerdCommenter

用這個可以方便的幫程式碼來做註解

SnipMate

看名字就知道它是從TextMate借過來的,如果覺得有不足的也可以自己建。

Command-T

TextMate跟Sublime Text 2都有可以快速搜尋檔案的功能,這個則是補足了Vim這方面的功能,也是我決定把Vim當做主要工具的原因之一。

  • update: 後來發現ctrlp用起來更方便,而且不需要另外compile ruby就可以使用。

Surround

可以很快的處理單引號、雙引號以及一些html常用的tag的問題,熟練的話會很方便。

Repeat

Vim內建的repeat功能在遇到某些事件的時候似乎會失效,加上這個外掛就沒問題了。

EasyMotion

可以在不需要滑鼠的幫助下,快速的切換游標的位置。

幾個自己有在用的syntax highlight以及配色

發現我幾乎整篇都是偷懶的直接貼別人的影片啊 Orz

另外如果你本來在TextMate下有喜歡的配色,也可以透過這個工具來轉成給Vim的格式。

有些外掛的更新後續都是在github上,要用的時候請注意最後更新日期。


其它工具

Alfred

付費軟體。有這個工具的幫忙,原本螢幕下方放滿的工具就可以少放很多了,要開軟體也不需要用滑鼠去點,只要輸入幾個關鍵字就可以跳出來:

image

Vimium

讓瀏覽器也用Vim的操作方式來瀏覽(Chrome限定)

Vimperator

Firefox也有類似功能的外掛可以用,感謝老杨提供。

結論

自己順手的兵器,其實應該只要一把就夠了。雖然我用的是MacVim,但會儘量避免用太多Mac專屬的設定,這樣一來我在本機的作業環境(Mac OS、Windows、Ubuntu)在切換的時候都可以有差不多的編輯習慣,甚至連遠端終端機作業的時候也不會差很多。

Vim很強大,但它不是一個可以一、兩天就能上手的工具。我相信只要學得好,它絕對是可以到哪裡都走透透的兵器。現在還不夠熟,不過我相信一直強迫自己用下去,遲早可以跟它變好朋友。(像這篇文章就是在Vim底下打的,打得很不順,但就強迫自己練習)。接下來應該就是繼續把它再磨利一點,再練得順手一些,讓自己可以更快的完成工作,有更多時間可以做自己想做的事,以及陪家人(講是這樣講.. 但大概會花更多時間再寫更多的程式碼吧)

各位如果有不錯的外掛也歡迎留言一起討論囉 :)

Automated Testing in Javascript

這是在大澤木小鐵(Jace)主辦的第一回WebDev Party上用到的投影片: image View on Speak Deck | Download PDF | Download ScreenCast

這是當天的錄影:

主要內容是分享一些我近期在做自己的產品的時候用到的一些測試工具組合及心得。原本打算用中文做投影片,但還是無法割捨漂亮的英文字體。這應該是今年的最後一場表演了,希望大家會喜歡。

有提到的工具:

  • QUnit - A easy-to-use JavaScript testing framework.
  • Jasmine - A BDD framework for testing your JavaScript code.
  • Zombie.js - A headless testing tool.
  • Sinon.js - Standalone test spies, stubs and mocks for JavaScript.
  • Phantom.js - A headless WebKit with JavaScript API.
  • Guard - A command line tool to easily handle events on file system modifications.

若有任何問題或是我講的內容有不對的地方,歡迎大家留言一起討論、指正。之後也會持續的續把一些測試JavaScript的方法跟工具整理成文章,希望可以給大家帶來一點點的幫助。