From 2011 to 2012

2011 的一大半在當兵之中度過了。2011 對我而言是個變化很大的一年，無論是心態和作為上。
讓我試著去回顧一下 2011 這混亂的一年到底是怎麼過去的，然後我希望有著怎樣的 2012。

2011 的前半：考試和最後一個學期

2011 這一年是在台中 Tiger 玩 IIDX，看見外面文心森林公園在放煙火而開始的。在二月中之前，都在亡羊補牢地拚命準備研究所考試。雖然已經延畢一年了，但最後還是因為自己不夠專注，導致準備時間太短而沒有錄取。

考試考完後，想在當兵前努力衝刺，因此大五下，在台大的最後一個學期，只選了專題研究2學分，開始著手在幾個因為考試被暫停的計畫上。這段時間也因為這些計畫，持續了定期往返台北的歷程（2010 後半年是因為星期五有修演算法）。這些計畫都趕在當兵之前做出了一定的成果，就讓我回顧一下吧。

• OnionSky 的前後端工程，整個網站的前後台在當兵前完成了很大一部分。那一段跟著大家一起拚命的歲月真的讓我印象深刻。希望能繼續跟他們做出更酷更棒的網站！
• NicoFox 的大改版。被擱置了半年以上的 NicoFox 為了因應 Firefox 4 而又復活了，花了幾個月重寫了新的介面和其對應的機制，在生日的當天寫出了 0.7，並趕在當兵前把 0.8 大部分的東西都寫好。
  
• CC 計畫辦公室打工的 CC Media Collector 計畫，寫出了一個可以抓出頁面上 CC REL 資訊，而且可以將媒體檔案下載並進行管理的 Firefox 套件。在這個學期在介面與很多地方上下了不少苦工。
  
• 學校專題的 Android GPS / Sensor 記錄器。借了研究室的 HTC Desire 之後，花了一些心思在 Android SDK 開發上，然後寫了一個可以記錄 GPS 和 Sensor 的程式，並寫了對應的 HTML 讀取器。
  
• 節奏遊戲部分，IIDX 在三月突破心病，先後攻破SP七段和八段。從此改變了玩遊戲的心態，開始以玩得盡興為目標。在努力了三個月之後，IIDX 終於在當兵前拿下了 SP 九段。
  
  4% 衝出 moon_child[A] 的那一刻。（可惜九段 Final 換歌了）

2011 的後半：從大學生到二兵

2011 年 6 月，（第二次）台大畢業典禮。

6月28日正式入伍，到成功嶺接受新兵訓練。那個時候也許是自己還在逃避，也或許是抗焦慮藥物作祟吧，一度因為情緒問題被封了崩潰哥的稱號。八月初之後下部隊，盡管自己那時的適應狀況還是很糟，但在營外一放假就急著要給大家一些新的東西。NicoFox 0.8 就是在暑假時的產品。八月底的 COSCUP 2012 中報了一場非會議，聊了 NicoFox 改版的心路歷程。簡報在這裡。

9月到11月間，在部隊裡面鬧出了很多笑話（真的 Orz），但也開始重新思考自己的過去、現在與未來。在九月的 MozTW SFD 講了 Add-on SDK 和 NicoFox，投影片如連結。期間一度想要凹停役早點去做自己想做的事，後來想想「小不忍則亂大謀」，決定試著適應部隊生活，好好待到退伍。Jobs 逝世的消息也許也或多或少改變了我，讓我想要更認真在自己的寫作上面：11 月的 TouchLimit 成績單系統或多或少就是因為這樣誕生的。

12月，因為先前鬧的笑話，在部隊的日子稍微不開心了一點。但整體上愈來愈適應了。放假幾乎都在進行 TouchLimit 的功能新增和維護。這個系統在玩家界還算蠻受歡迎的，對我而言努力總算有了收穫 ;)

而這一年是在營區宿舍中睡覺，自己設了 23:57 的鬧鐘爬起來跨年而過去的。

2012 的期許

總統大選當天，台65線土城段。

我希望做一些很棒的東西，交一些很棒的朋友，去一些很棒的地方。
這就是我的 2012 期許吧。

我想繼續好好寫網頁程式。
希望能在 HTML5 技術逐漸成熟而廣泛的時代下，提昇自己網站的實作力。d
也希望退伍過後，這個興趣可以變成我的工作。

我希望能夠讓自己更勇於往前。少一點拖延、多一點承諾。
不可以原諒自己，一定要相信自己。

當興趣結合興趣：TouchLimit 幕後祕辛

TouchLimit 是我這一個月來費盡心思做出來的網站，是一個非官方的 jubeat 成績單與排行系統。以下將試著很簡單地跟大家介紹作這個網站的點點滴滴。

節奏遊戲 vs 網站開發

同時身為節奏遊戲玩家和網頁程式開發者的我，一直都很想在奇怪(?)的地方稍微發揮一下專長，例如撰寫一個去抓 jubeat 遊戲成績單的系統。因此在二代時開發了基於 Google App Engine 的紅譜平均排行榜。

而到了學習 Rails 之後，一直都想用 Ruby on Rails 去重寫一個新的成績單，也很早以前就根據「觸碰」和「刷新自己的最高分」決定了「TouchLimit」這個網站的名字，但當時的時間和實力都不夠，因此一直沒有去作。

直到我當兵下部隊期間，jubeat 四代稼動，需要一個新的台灣紅譜平均排行系統，而我學習 Rails 一年後開始熟悉了，想趁機學習一些 NoSQL 的技巧，因此決定利用雙十節的連假把這個東西寫出來。（當然，Jobs 那時的突然逝世也有可能是我想寫這個的一大動機。）

實作的歷程

在雙十節連假期間，我跟 GoDaddy 買了 touchlim.it 這個網域名稱（非歐盟國家公民買義大利網址貴一倍，但還是心痛給他刷下去了 ||||）。而空間當初本來想放在 heroku 上，但考慮 heroku 的 Worker 費用實在太貴，所以最後放棄，而 WM 剛好也想要買一個 VPS 當玩具，因此 WM 就很阿殺力地幫我刷了一台 Linode 東京機房的 VPS 來放這個網站。

網站架構上使用 Rails 3.1 作為網站框架，資料庫方面分別使用 MongoDB （搭配 mongoid）和 Redis（搭配 redis-objects），前者用於存放主要資料，後者用於 Resque 和紅譜平均排行。為了學習這兩套 NoSQL 系統花了很多時間，而 Rails 3.1 新的 Assets 機制也讓我遇到了一些麻煩，因此在雙十節收假時這個網站其實是完全沒有什麼東西可以發出來的 XDDDDD

整個網站最重要的部份向遊戲官方網站要成績的成績更新程式， 一方面要把 HTML 作解析，這方面 nokogiri 真的幫了超級超級大的忙（還會自動幫忙看編碼，很棒！雖然還是有被 Mac 和 Ubuntu 對 shift-jis 轉換不同的小問題陰到），讓我可以用很快的時間把功能實現出來，將大部分的時間都花在檢查系統的錯誤並修正上。

魔鬼藏在細節裡


而在網站排版上，在我剛決定要開始做的時候，魏藥就跳出來說想幫忙寫 CSS，於是我就把 CSS 的樣式和排版都交給他負責。整體網站的版型上使用了 Bootstrap，節省下了非常多的時間。而配合上 SASS 與 Compass 作了很多很多非常酷炫的樣式。你有注意到更新歷史裡的箭頭是全 CSS 的嗎？這都是多虧魏藥的功勞 XDDD 除此以外，有很多小細節上的東西也都是我跟他討論之下跑出來的，例如成績更新到滿分 EXCELLENT 的時候成績上會閃金色：

網站插圖的部分則是我去拉 KIKA 來幫忙，而他也正在幫忙處理包含首頁圖與 favicon 等等的小細項，請大家慢慢期待囉 :)

「放假再修！」

在經過了兩個星期的努力之後，10/23 這套系統正式開放給大家測試。為了讓系統可以運作更順暢，我使用了很方便的 Resque 作排程管理。後來發現 Resque 的管理機制實在太棒了，錯誤記錄也非常完善，就算有好幾天的時間不在電腦前面，一旦放假打開管理頁面，運行出了什麼問題馬上一目了然，可以立即進行修正。而且還可以加掛排程和自動重試等機能，在原始網站不穩定的情況下這些功能實在是太棒了！而隨後下一個挑戰就是提供定期自動更新，希望能夠趕快做出來。

祕辛和小提示 

• 為什麼叫 TouchLimit "Fengyuan"？這個代號指的是「豐原」，台灣中部的一個城市。其中一個原因是我這幾個月三分之二的時間都得待在豐原，另一個原因是他跟「Copious」的「豐富」有異曲同工之妙。
• 要不被收錄進這個排行榜或系統裡，但還是公開你的成績？很簡單：請隱藏你的最終遊玩資訊，TouchLimit 就不會收錄你的成績。由於目前沒辦法作個人身分確認，因此加入成績單視同加入排行榜裡，這點也請各位玩家見諒囉。

Why jQuery is so Magical?

昨天在跟某位 Web Developer 聊天時提到 jQuery，我於是隨口把 jQuery「到底為什麼會這麼神奇」用最簡單的方法講完。事後講講整理得很有道理，於是我打下來吧：

jQuery 背後的故事 or 為什麼需要 jQuery

1.  jQuery 操作文件內容的根基是瀏覽器的 DOM（Document Object Model）功能。這個功能可以追溯到早期的 Netscape 和 IE，從所謂的 DHTML 一路變成今天的 DOM。
   DOM 做的事情就是「把 HTML 文件用樹狀的方式操作」，因此可以動態變化網頁內容。
   
   但使用 DOM 操作文件，會有程式碼冗長且有瀏覽器相容的問題（尤其是 IE）。
2. jQuery 操作 AJAX 用的是 XMLHttpRequest，這是 IE 開始推廣的神奇技術，現在已經廣泛內建在各種瀏覽器裡。但也是有瀏覽器實現相關的問題 Orz 

jQuery 做了哪些魔法
DOM 上：

1. 解決了絕大部分瀏覽器在 DOM 操作/事件處理下的 Bug
2. 寫了一個神奇的 Selector 解析器叫 Sizzle，可以把大部分的 CSS Selector 轉譯成對應的 DOM Tree 元素
3. 以 jQuery Object 把對應的 DOM Tree 包裝起來，所以可以進行 Chaining
4. 以神妙的方式對事件處理做了很大的擴充（bind() 和 live()）
5. 可以用神妙的 .data() 在一個 DOM Tree 中加註資訊

AJAX 上：寫了神妙的 AJAX 函式，還一併處理了 JSONP 方面的問題


就這樣吧，應該有地方有錯，歡迎大家指責 XD

COSCUP 2011 非會議投影片

今年最後只倉促報了 13 分鐘的非會議，所以也就作了一個非常簡單的投影片：


跟大家簡單分享了一下 NicoFox 的 UI 改進心得和血淚 (?)，在當兵沒梗的時候希望還是能帶給大家歡樂。 :)

NicoFox 0.8 釋出

當兵放懇親假出來，所以趕快把 0.8 正式版發出來了～
這次的新版是針對 0.7 既有的問題所做的介面、翻譯和下載功能更新。
相容於 Firefox 3.6～7.0a2（Release、Beta、Aurora都可以用）

目前已經送到 AMO 站上 送交審核，大概過一兩個星期之後應該就會有結果，通過之後，Firefox 4 以上的使用者將會被自動升級到 0.8（您可以在附加元件管理員中關閉自動更新）。如果您已經等不及，可以先安裝釋出的 XPI 檔案。

此版本的改進：

• 翻譯全部翻完了，也潤飾了很多小地方 :)
• 新 UI 的全面性改善：更快的介面開啟速度、下載進度與影片資訊顯示、縮圖可調顯示大小......還有許許多多說不完的小幅度更新與修正。

• NicoFox Player 支援 16:9 與 4:3 的畫面切換，同時修正了在 Firefox 6 (目前 Beta) 以上版本 Player 沒有畫面的問題。
• 修正了 Flashblock 的衝突問題，在 Flash 未啟用下也能讀取影片資訊。就算影片資料無法讀取，也依舊提供下載按鈕。
• 全面改寫了縮圖補載機制，快把你的影片縮圖補齊吧 ^o^/ 現在只要縮圖下載是打開的就會檢查有沒有縮圖沒載到，按一下連結就一次 OK

• 自動登入回來了！同時增加了對網站連線錯誤與 NICO 防洪機制的偵測。
• 在遇到網站相關問題時所有下載項目都會暫停，不再會噴一排失敗了 Q____Q

• 同時因為有了暫停，未下載的下載項目將在瀏覽器關閉重開時自動恢復下載喔 :)
• 下載相關修正：修正了非日本版下 SWF 影片（影片代號為 nm 開頭者）下載的問題，社區評論載不下來、以及特殊評論號碼無法判斷的問題，還有低畫質模式預約系統無法在時段解除時自動下載的問題。

已知的問題

• NicoFox Player 暫不支援投稿者評論。
• 如果使用 Multifox，將無法使用 NicoFox 的下載功能。
• 因為缺乏本機檔案處理機制，如果從下載管理中刪掉東西就無法再復原回去。也因此如果移動影片路徑 NicoFox 就會整個找不到影片，以後會設法解決。
• 新 UI 還是比舊 UI 慢和不方便一點點。NicoFox：「怎麼可以這樣！」「報告班長，新兵會在結訓假趕快寫出固定在側邊欄的功能的！」
  縮圖補載「還是」有可能會有失敗情形（目前只會自動重試一遍）請多點幾下那個連結就好了 =3=

我下次放假是新訓結訓假，在七月底八月初， 大家屆時見囉～