2014年7月31日

超輕量化JavaScript除錯工具


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

2014年7月24日

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


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

enter image description here


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


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

簡單的開箱與改裝 - ThinkPad T540p

有了上一次 AORUS X7 v2 的經驗之後,這次決定改考慮較穩定的 ThinkPad 與 DELL。不過因為 DELL 三年保固的 Latitude 系列通路實在太少,依所需規格詢價要等 2~3 天,等報價出來如果有多的預算或預算不足,要改規格又要再等,總覺得不是很方便,所以最後就決定試試 C/P 值頗低的 ThinkPad T540p...

2014年7月21日

桌遊簡易開箱文- 禁制的沙漠

禁制的沙漠

新遊戲到貨囉~ 桌遊社每兩個月要補充一次遊戲真的是一件還蠻麻煩的事情(挑選遊戲很困難), 由於社團都還沒有這類型的合作遊戲, 這次就想說來買一下合作類型的遊戲, 當然一開始會考慮是不是要購買Forbidden Island, 不過在查了之後就發現原來同一作者有新作品, 而且機制比原先的更多樣化, 既然這樣那當然就是直接購買這款Forbidden Desert了。
既然叫Desert,場景當然是沙漠囉, 我們可以從盒子看出美工似乎畫的還蠻好看的, 而且是鐵盒不容易壓壞, 價位也不貴, 才7xx元而已~ 順便打個廣告, 我們跟小古買桌遊目前是打九折, 如果你住台南的可以找我們社團幫忙購買遊戲再面交哦~ :P

2014年7月20日

簡單的開箱與迅速的關箱 - AORUS X7 v2

最近因為工作上的需要 (沒錯,是「工作」,絕對不是為了玩遊戲),計畫購入一台筆電,需求的點為 CPU i7 四核、RAM 16GB,以及硬碟要盡量大,結果發現目前符合這個規格的大部分都是主打電競的系列。在購物網站比較許久之後,原本第一目標是 GIGABYTE 的 P34G v2 (不考慮 msi GS60 是因為上蓋那寫著 GAMING SERIES 的龍魂標誌對我來說好像有點太過顯眼),但是到論壇上做做功課發現好像不管是 GIGABYTE 或 msi,大小問題都不少,甚至要成立專門的問題回報版面,於是居然開始打起 AORUS 的主意。

AORUS 其實是 GIGABYTE 專推電競的副品牌,但國內論壇好像較少問題回報,雖然知道可能純粹是因為銷量不大,不過心裡想說這麼貴的價格,而且是 Made in Taiwan,總該有對應的品質與品管吧,牙一咬就還是衝了...

2014年7月19日

輕鬆聊之Hierarchical Clustering

上一次我們介紹了K-means分群演算法,今天來介紹另外一個分群(Clustering)演算法-Hierarchical Clustering,中文好像叫階層分群法。

一般Hierarchical Clustering有兩個方式來產生最後的樹狀結構,

  • 聚積(Agglomerative),Bottom-up
  • 分裂(Divisive),Top-down

今天介紹的是比較常用的bottom-up的方式,直接來看圖說故事吧。

2014年7月18日

輕鬆聊之K-Means演算法

上次跟大家簡單介紹了一下KNN演算法,今天介紹一下很容易跟KNN搞混的K-means演算法,不過兩個其實差蠻多的,只有名字比較像而已。K-means主要講的就是「物以類聚」,只要中心思想是相近的,就可以歸在同一類。

K-means是一個分群(Clustering)的演算法,不需要有預先標記好的資料(unlabeled data),屬於非監督式學習(Unsupervised learning)。主要是用來做常常被使用在資料分群,簡單的說就是把一堆資料根據你判斷相近的邏輯,把這一堆資料分成k群。

2014年7月17日

Build software better - Android AAR 類別庫的使用與分享


什麼是AAR

AAR檔案是Google為Android開發所設計的一種library格式,全名為Android Archive Library,與Java Jar Library不同的地方是AAR除了java code之外也包含res,也就是一些圖片、文字等資源檔案。會設計這種形式的類別庫是因為Google在Android SDK tool r14之後開始支援Library Project的開發方式,這種Library Project可以說是Android APP的半成品,其目標並不是製作成APK來執行,而是提供現成的View/Activiy等一些程式資源給其他開發者使用。而AAR正是這種Library Project編譯後的壓縮檔,壓縮後只需傳遞單一檔案即可分享,可說是相當方便。

目前熱門的網路服務提供者(如Google、Facebook、Evernotec或是Dropbox等)也大多利用這種形式提供開發者來整合其服務於自己的App中,開發者如果想整合這類的網路服務,例如登入畫面或是張貼文章等,可以直接使用服務商所提供的UI元件,將之內嵌於自己的App頁面上。

enter image description here

2014年7月16日

五條港文學踏查隨筆(3)

前情提要

在看完佛頭港熱鬧的龍舟競賽,讓我們繼續往北,今天要探訪的是總鋪師的著名場景,台南紡織前身的新復興紡織廠,新港墘港旁的老古石街道。

2014年7月15日

五條港文學踏查隨筆(2)

前情提要

五條港見證了清代貿易之繁華,也見證了台江內海逐漸淤積,滄海桑田。隨著府城人口增長,築城取代一開始的木柵,大井頭從碼頭邊變成街市,城外的五條港開始展現風華。郊商、碼頭苦力和酒家女,多少故事在這發生。

2014年7月14日

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

PAD自動轉珠

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

2014年7月13日

輕鬆聊之KNN演算法

今天來簡單介紹一下KNN演算法,全名叫K-nearest neighbors algorithm。KNN可以說是機器學習(Machine Learning)中最簡單的演算法,簡單到我連Sample Code都不想寫給你看(其實是懶),只要記住下面這五個字,「西瓜偎大邊」就可以完全了解這個演算法的奧義。

讓我們來想想一個情況,有一天晚上俊傑騎著機車正在回家的路上,不小心捲進了一群飆車族的械鬥,他環視了一下發現總共有三群飆車族,身上的衣服分別是黃、灰、紅。他已經在車陣之中,而且處境非常的危險,所以俊傑有兩條路可以選

2014年7月12日

[開箱文] ASUS Padfone S - 4G LTE

就在2014/07/09 ASUS 發表了搭配有 4G LTE 的 ZenFone 5 (A500KL)也順便發表了新的頂級機種,也是 Padfone 的系列機種 - Padfone S,依照傳統當然也可以跟需額外購買的平板合體,而且這次的發表會也包含周邊配備,像是無線充電器PadFone 專業折疊式護套

由於今年的 4G 元年,今年 6 月各大電信商也紛紛開通 4G 的服務,但台灣的頻段分成了好幾部分,也個別的販售,導致各家電信商所支援的頻段是有所不同,也就是說想要用某某電信商的 4G 服務要先注意您手上的手機裝置是否有支援此頻段。為了避免手機無法配合使用者所使用電信商提供的頻段,繼 HTC 之後,也推出了支援全頻段的手機,讓使用者不需要擔心,只要是在台灣使用,只要搭配電信商就能夠使用 4G 喔!

而且這樣的頂級規格手機,除了幾家手機商跳樓大拍賣,一般價格都不太親民,這次的 Padfone S 竟然只要 9999 ,低於萬元的 4G LTE 手機真得頗有競爭力,另外在發表會之後馬上就可以透過華碩線上商店購買,並號稱隔日送達,之前華碩 Zenfone 的出貨不順讓許多使用者等了好一陣子,有種看得到吃不到的怨念,這次針對 Padfone S 的供貨就改善了非常多,值得鼓勵!

2014年7月11日

五條港文學踏查隨筆(1)

前情提要

每年博物館日,各大博物館都會舉行相對應的博物館慶祝活動,而台灣文學館的博物館玩文學,今年府城文學踏查路線「五條港穿越」,就是小弟一直很有興趣的五條港!!!
研究所時賃居於南沙宮附近,散步範圍就是水仙宮、神農街,只是當時完全被府城小吃給征服,夏日總在國華街流連。離開之後才會想起當時常路過得廟宇,都有段歷史故事,回頭挖掘才會覺得自己錯過了多少。

2014年7月10日

IE 你別鬧了

coderwall 是一個讓程式開發者上去分享技術心得的一個網站,以前會員登錄的時候可以填寫你熟悉哪些技術讓大家參考,不過coderwall的管理員發現大家都懶得填,統計下來幾乎有一半以上的會員只留空白,後來他們想到一個絕招,就是讓系統自動幫大家填寫預設的skill,預設值有兩個:

”Loving IE6”、”Visual Basic”。

這下好了,“老天勒~這是在污辱我嗎?”(我自己亂加的獨白),結果幾乎超過九成的會員看到後馬上跳出來認真填寫自己的skill並且把上面這兩個移除。

enter image description here

會寫這件事,是因為最近公司有個工程師跑來向我反應IE上一個的script不能用,
“拜託一定要支援IE啊!” “我們這邊大家都用IE耶!” 這樣子相當困擾地向我抱怨。
後來發現firefox、chrome、safari都沒問題,唯獨就那個IE。真希望他可以上網看到這篇文章。

不過對IE最困擾的應該是屬於開發政府部門系統的外包廠商了,合約中常註明系統需支援IE某版本含以上,這痛苦的不是一直要支援新的IE版本,而是系統要一直支援舊版本的IE,因此一些外包廠商的規格還會出現ASP(不是ASP.NET喔)等現在久沒聽到的技術,簡直是無止盡的夢魘啊!


以上。



2014年7月9日

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來使用。

2014年7月8日

[心得] 超效率時間整理術

年輕時最大的本錢就是時間,年紀漸長後最缺乏的也是時間。財富沒了還有機會賺回來,健康沒了也許還是有機會可以恢復,但是時間卻是人生唯一不可逆的資產。而時間也是這世界給予人們最公平的東西,每個人的一天都是24小時,端看你如何去運用。

現在人的事情太多,總覺得時間不夠用,所以坊間一直有許多教人管理時間的書,當然最有名的就屬Get Thing Done這本書了。這本書所講的管理方法,一般稱為GTD,目前有很多工具不管是桌面軟體、Web app還是Mobile app都可以找到一堆GTD的工具。關於GTD的部份就不在此多論述,有興趣的人可以去google查詢GTD這個關鍵字。

2014年7月7日

[投影片] Regular Expression 101

Regular Expression(正規表示式)或簡寫Regex,是一個滿有趣的東西。一般的程式設計師都聽過,也可能有用過,大部分都是找範例剪剪貼貼湊出式子。實際上我很少遇到自稱熟Regular Expression的人。或許是因為Regular Expression是由一堆符號組成,看起來有點複雜讓人望之卻步,但是其實只要花個兩三天的時間好好的認識它跟稍微練習一下,之後你會感受到百倍的回報。

為什麼學Regex

2014年7月6日

在Android上使用Facebook API

要在Android上使用Facebook的API,可以使用Facebook Android SDK,使用上其實不太困難,不過要設定一開始的環境還蠻搞剛的,所以稍微將步驟紀錄一下。

開始設定

  1. 下載最新版的Facebook Android SDK,根據你的IDE放到project裡面。
    或是直接使用別人包好的aar

    compile ‘fr.avianey:facebook-android-api:+@aar’

  2. 產生Key hash (修改紅字部份)

    keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

2014年7月5日

如何發佈 App 到 Google Play - 建造出 APK 檔案

前言

當完成一個 App 時,想分享給大家使用時,或許可以透過幾種方式分享給大家

  • 將 Apk 檔案放到網站上讓任何人下載到手機上安裝或將檔案傳送給朋友
  • 將 App(Apk 檔案) 發佈到 Google Play 商店

但相對安全也是比較有系統性的當然是放到 Google Play 商店上,而且還有許多優點:

2014年7月4日

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


前言

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

2014年7月3日

壓縮JavaScript的好工具 - Closure Compiler


enter image description here


一切都是為了使用者體驗


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


如何提升網路服務的效率


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

2014年7月2日

台南古蹟 - Android App

前言

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

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

2014年7月1日

台南311開發紀錄 (下)

台南311之 Android app

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

先來看操作的畫面