超輕量化JavaScript除錯工具

“Debugging sucks. Testing rocks!”，如同Google工程師所說，與測試工作比起來，除錯實在是一件很沒效益的事，尤其是當問題已經發生，頭已經抱著燒的狀況下要除錯更是苦不堪言。倒底測試有多重要呢？Google甚至還開始提倡一個馬桶上的測試活動 "Testing on the Toilet"！不過這篇倒不是要跟大家介紹Google如何逼工程師一邊上廁所一邊測試（有點扯遠了），而是就算已經做好妥善的測試，除錯仍是避免不了的工作，經過上一篇IE你別鬧了的經驗後，發現雖然工作上不常用到JavaScript，但是一旦遇到這方面的問題，除錯過程總是非常惱人，尤其我們還需要把各種瀏覽器版本都檢查過一遍才行。當時正好在網路上看到了一個簡單好用的JavaScript除錯工具– Deb.js，雖然說是除錯工具，但更精准地說，Deb.js算是"將function的參數及結果自動地輸出到Console.log的一個小工具"。

在網頁上顯示程式碼 - Code Prettify tool

最近開始著手將一些技術相關文章整理至部落格上，由於有些內容是範例程式碼，通常需要在網頁上呈現較易讀的樣式，因此就順手（湊個篇幅）在這邊介紹好用的工具。目前大部份的部落格服務也都有提供類似Markdown的文章編輯功能，可以將內文直接以Quoto標記，這個Quoto標記背後其實就是利用HTML的<blockquote/>標籤來標示內容。雖然這種摘引的方式可以快速區分程式碼範例和內文的差異，但對程式碼閱讀來說，辨識度仍非常的差。

利用<pre/> 或是 >code/> 語法

因此我們大多直接下海編輯HTML內容，改用<pre/>或是<code/>的標籤來標記程式碼，另一種方式是採用HTML5的格式，以<pre/><code class=”language-java> …</code></pre> 的這種將兩個標籤搭配使用的方式。

UI Test Script for Android - 以Puzzle And Dragons自動轉珠為範例 (下)

PAD自動轉珠

在最後一篇文章當然就要來講最重要的, 怎麼做到自動轉珠
(主題明明就是UI Test Script, 什麼時候副標題變成重點了)
想要達到自動轉珠, 我們可以把事情分成兩個部分:
1. 如何分析遊戲盤面上的珠子
2. 如何透過盤面的狀況來自動轉珠

UI Test Script for Android - 以Puzzle And Dragons自動轉珠為範例 (中)

Script Language

既然是要寫個auto test script, 當然一樣需要有一個script language, 這邊有兩個選擇, 一是你可以選擇自己寫一個, 或是直接使用現有的語言來使用, 以現在都在講求速率的年代來說, 我們當然不會選擇前者了, 而使用現有的script language, 到底要使用什麼語言比較好咧? 比較常見的腳本語言像是Ruby, Lua, Python, 優缺點的比較有興趣的人可以看看這篇文章: Python、Lua和Ruby——脚本大P.K. , 在這裡我選擇使用了遊戲界常用的輕量化及高效能的Lua來使用。

UI Test Script for Android - 以Puzzle And Dragons自動轉珠為範例 (上)

前言

當你每次寫完程式,接著手動測試程式時, 是不是覺得每次都在做同樣的事情而感覺到自己的小宇宙快要被燃燒殆盡了? 在有這種心情產生之後, 公司前輩就會出來對你說:你不是還有肝嗎 寫一下auto test吧 交給你囉~ ^_< 實際上去學一下auto test (例如android上的MonkeyRunner), 大概我是個懶人的關係啦, 單純使用當然是可以用啦, 但是不覺得每次要改個小動作都很麻煩,不直覺嗎? 難道沒有比較簡單一點的東西可以做到auto test嗎?最好是可以簡單到連一般人都會寫這個東西不是很好嗎? 這個答案就是 SIKULI 。

壓縮JavaScript的好工具 - Closure Compiler

一切都是為了使用者體驗

大家滑手機的時候一定最討厭界面卡頓的感覺，圖片或內容可以晚點呈現(甚至跳過也沒關係)，但爽快地滑動界面是神聖不可侵犯的使用者特權，只要可以暢快地讓人滑手機就是好App了。我有時候覺得這已經完全改變了我們的世界，例如我家巷口那原本繁忙的早餐店，現在已經鮮少聽到顧客等待早餐製作的不耐抱怨聲，因為大部份的等待時間已經被滑手機給撫慰了，反而覺得“咦！最近老闆煎蛋餅的時間變快了啊 ^^? ”。
因此在偉大的使用者經驗的考量下，無論是Web或APP開發，大家最怕的就是網路塞車或是大量I/O下造成操作的遲鈍，因為使用者通常只要愉悅的瀏覽被打斷幾次，很可能就直接按下home鍵離開了。

如何提升網路服務的效率

Web Design更是受到此一嚴峻的考驗，在先天限制下，Web的運作效能本來就無法跟native application相比，更何況其完整內容+部分程式需要先透過網路傳輸到使用者端的裝置上，雖說為了避免操作上的遲鈍，UI的設計通常會將厚重的動作以非同步的背景方式處理（例如資料查詢或是圖片的下載），但是如果是連UI本身的程式(JavaScript)都需要花大量時間從伺服器下載，那就真的無藥可救了，無論我們提供如何良好的UI設計，使用者都只有等待的份。
為了快速有效地利用頻寬來提供良好的服務，服務提供者通常會先針對其JavaScript進行壓縮來避免上述的問題，希望能在使用者開啟網頁的時候，重要資料可以以最快速的方式下載到瀏覽器上。Google在這方面提供了一個相當實用的壓縮工具：Closure Compiler

台南古蹟 - Android App

前言

由於台灣本島的城鎮發展由台南（台灣府城）、彰化鹿港及台北（艋舺）開始，有一府二鹿三艋舺之謂，所以古蹟眾多，其中曾為台灣統治中心的台南和台北兩地的古蹟數量均超過百處。 - 引用自 Wiki台灣古蹟列表

       另外根據文化部文化資產局最新統計全台目前有788筆古蹟(其中國定古蹟90筆，直轄市定古蹟394筆)，台南就有132筆佔16.75%，國定古蹟更高達22筆佔全台24.44%。有著如此高比例的台南市，若能有便利的 App 可以利用，更進一步的讓當地居民或觀光客有更友善的城市體驗，一定能讓大家對台南古蹟有更深的了解。

台南311開發紀錄 (下)

台南311之 Android app

整個台南311的project，我們花最多的時間在於設計一個回報的App。
接下來介紹我們開發的台南311 app的功能與紀錄開發過程中的心得，懶得打太多直接看影片吧！

先來看操作的畫面

台南311開發紀錄 (上)

前言

在古蹟app大致完工的時候，大約還剩兩個禮拜多的時間，我們決定做點不一樣的東西，希望能夠把Open311的東西透過這一次的台南黑客松，介紹給台南市政府。不過黑客松只給3分鐘報告，看來我們報告失敗的很徹底，完全沒有得到預期的效果。黑客松都已經過了，中間的過程也懶得再提了，寫下這篇主要是要紀錄一下開發台南311的過程，跟一些還需要被解決的問題。

下面這段是報名2014台南黑客松時，寫下的專案簡介。