高見龍

iOS app/Ruby/Rails Developer & Instructor, 喜愛非主流的新玩具 :)

哈囉,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,Ctrlwj = 按著ctrl鍵不放,再按下w,再按下j
  2. 這裡提到的都是Vim或是plugin內建的指令,如果你不喜歡或覺得難按,可以透過修改.vimrc來改變快速鍵的對映
  3. 以下指令都是在一般模式(Normal Mode)下使用

游標移動

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

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

搜尋

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

編輯

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

模式切換

  • EscCtrl[ = 回到命令模式,ESC是獨立一顆比較好按,但比較遠,如果你不想讓你的手離開打字區的話,可以選用CTRL [,或是在~/.vimrc裡自訂快速鍵
  • Ctrlv = 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的方法跟工具整理成文章,希望可以給大家帶來一點點的幫助。

第九回 AS讀書會之測試你的 Robotlegs 專案

這是在第九回的Flash/AS讀書會上用到的投影片: image View on Speak Deck | Download PDF

部份內容是現場Demo,所以沒辦法在投影片裡看到。在分享的過程,從大家的眼神中似乎可以感覺得出來大家對於"寫測試"這件事很陌生(其實我也是新手),我之後會再花一些時間把關於如何在Flash/ActionScript裡寫測試整理成文章,希望可以讓大家可以更了解TDD(Test-Driven Development)是怎麼一回事,又該怎麼進行。

感謝大家今天天氣這麼冷還能前來參加,咱們下回見 :)