[Javascript] TwZip.js

最近因為 Hax4 有 project 需要用到台灣郵遞區號，所以就花了一點時間做了一個簡單的 js (jQuery) plugin – TwZip.js。不過身為一個前端工程師當然想把事情都留在前端處理就好，因此當初在設計這個 plugin 的時候就打算把所有的資料都放在前端，然後以 lazyload 的方式把資料載進來而不需要後端的支援（超懶）。

而說到資料，TwZip.js 的資料是從中華郵政全球資訊網下載來的，然後簡單寫了一個 makefile 搭配 node.js 自動產生數百個鄉鎮市區的 metadata 供前端使用。

這邊要提一個我一直被卡住的白痴問題（OS 老師當初應該把我當掉），因為原本我的設計是三層式架構（像是台北市/信義區/信義路），但是這會造成資料過度碎片化的問題。之所以會這樣是因為在 file system 裡面最小單位的 block or Cluster 有一個最小容量，像我電腦就是 4 KB，所以如果資料小於 4KB 就還是以 4KB 計，因此這個三層式設計最後就產生出 16X MB 的資料（因為產生出太多 metadata 了）… 整個比原本的專案大上好幾十倍呀 …

為了解決這個問題，最後就改成兩層式架構（像是台北市/信義區），也因為層數變少的關係所以最後就變成約 4 MB 的資料了，整個就是皆大歡喜。

還記得以前的前輩曾經教過我在寫程式的時候要先把 API 想好，確定使用者使用的介面再開始寫細節，透過這樣的決定來讓整個專案照著預期的方向前進才是比較好的，這樣才可以提前知道這個設計上的缺陷及問題，算是又多了一點體悟吧！

儘管如此，目前這個 plugin 還只能算是一個 prototype ，未來應該會再把 zipcode 的資訊透過 callback 傳回去。其他的功能就再說吧。

DogFooding ++

[Javascript] Build your own Trip with Trip.js

Image Credit

Demo : http://eragonj.github.io/Trip.js/
Repository : https://github.com/EragonJ/Trip.js

太久沒寫網誌了，所以想說來寫一篇最近比較值得記錄的事情，那就是 Trip.js。

什麼是 Trip.js ? 一言以敝之就是「Trip.js is a useful plugin that can help you customize a tutorial trip easily. ( Based on jQuery )」，通常對於 landing page 或是一些需要做 step by step 指導的網站，都會需要這類型的 plugin 來幫助 developer 快速上手，做出需要的效果，而剛好之前在公司的時候有類似的需求，所以我就在其他時間自己先行開發了 Trip.js 的初始版，然後分享在網路上。

就目前看來感覺效果還蠻出眾的（在 hackernews & github 上都有一些回響），雖然市面上還有很多類似的 plugin，但是東西是自己寫的那種感覺就是很不一樣，有興趣的 developer 不妨參考一下吧 😛

[JS] plurkable – lightweight jQuery plugin for your own Plurk widget

Demo、載點與解說

好吧，我真的是過年太無聊才在那邊用 Javascript 寫一個輕量級的 plugin 讓你可以客制化自己的 widget，其實使用方式在 github 及 demo page 上面都寫的很詳細了，這邊就不多談（或是參考下面的 js code）。
https://gist.github.com/814690.js?file=gistfile1.js

現在開始愈來愈覺得 javascript 非常的 powerful，只要有 browser 就可以跟著老師帶你上天堂，也不用做什麼煩雜的設定，再加上自身對 JSON 格式的 support 及 browser 間內建的 functions 就可以很輕易的完成自己的需求，然後現在這幾年又出現了改變世界的 jQuery，更是把入門的門檻拉低了許多（至少解決了很多問題，雖然也產生了一些問題 xD），不過愈是如此，Javascript 就愈讓人覺得深不可測 …

而且現在又有許多好用的工具像是 PhoneGap 可以幫助我們來實作 mobile applications，而之後也會有許多的 desktop applications 可以用 Javascript 來實作，整個就是拉近了平台間的距離了呀。

ㄜ … 這篇應該是要介紹 plurkable ，但是我好像一直離題呀 … 管他的 xD ~ 祝大家新年快樂啦（????）

[Notes] Interesting animation in jQuery

剛剛意外再次看到tzangms的部落格，沒想到已經過了幾年的時間了！因為這段日子對javascript開始有了一些研究，所以對它的Banner scrolling 的特效很感興趣，就順手研究了一下它的 js code，沒想到這麼簡單就能做到，不知道該說 jQuery 太厲害了，還是想到這種實作方法的人太聰明呢:P

上面這張是他網站的截圖，光是版面的配置以及使用的自製圖案來看，其實就看得出小巧精美的一面，不過今天的重點是那個Banner，我對於他可以做到捲動的效果感到很好奇，而實際做法其實也就是想像中這麼容易，只是他利用了一個CSS background-position的特性，原來當div的background設定成無限延展的時候（預設），就可以利用把position拉到無限遠的地方並搭配 Timer（jQuery可以用animate）設定好一個時間差，然後讓頁面在這個時間內一直偏移position的值來完成捲動的特效。

最後附上測試用程式碼，而圖檔的部分則是以tzangms的banner為例。
https://gist.github.com/757436.js?file=gistfile1.html

[Memo] 6lurk part – musicAnalysis

最近專題已經到了最後階段了，儘管如此，一天的工作量還是來到了12個小時左右。不過最令人開心的莫過於花兩天密集的Hacking把音樂回饋機制給實作出來了，說實在的自己自從暑假經歷兩個月的前端洗禮之後，至少變得比較了解「一點點」Javascript及jQuery了，也比較有能力可以做出符合自己期望的東西。

第一次用 javascript+Youtube javascript API + jQuery做出一個音樂播放器，而基本的輪播、單曲重播、上下曲切換…等功能都有了，只是歌曲的部分是我們分析使用者在Plurk上面的情緒後（星期一到星期日），利用自訂好的類別搭配 last.fm API 來得到該類別下當紅流行的top20首歌曲資訊，然後我們再從Youtube上面抓到最相關（因為它們串流檔這麼多，所以我們只找最相關的那一個）的影音串流回來，最後組成我們播放的卡帶，就可以任君挑選啦！

也許大家會覺得這種類型的網站不是很多嗎？那我們為什麼還要再做一個類似的應用？當然是有原因的，因為並沒有一個網站（可能是我不知道），會依照他的用戶提供量身訂做的音樂，而我們一來使用最接近使用者的社交資料來當做分析的來源，二來是利用一些統計上的分類來把我們量化過的分數幫使用者做一個情緒上的分類並提供相關的歌曲，如此一來當然能夠給予使用者最貼近當下情緒的音樂啦。

而我們團員自行測試後發現，其實我們自己都有類似的需求，因為時常都不知道要聽什麼歌，只是希望能夠像聽廣播一樣打開就可以聽到歌，然後不想聽的時候關掉就好，是一種心境上的自由，也不要有太大的負擔，這樣子不是很好嗎？在這邊我要和大家介紹一個啟發我很大的網站StreamDrag，它也是一個利用Youtube為資料來源的音樂播放網站，它有一個很棒的哲學（Philosophy），也很貼近我們設計的理念，在這邊引用這段話來為整篇文章做個結語。

Music amazes, music creates emotions and music pushes emotions.Music is the language of the world and thats why it should be available wherever you are. Therefore our biggest aim is to make music available wherever it is possible as simple as possible and to create new, innovative ways of listening.

[News] Google Maps, Like YouTube, Get Instantized

原文 From TechCrunch

「Gmail Instant」也許真的很有用，但什麼是Google下一個目標？「Google Calendar Instant？」還是「Google Image Search Instant？」好吧，這些設計也許真的也很有用。事實上，這真的很難想像即使是即時化服務也不會讓Google從中獲得少許利益。

啟發於Google Instant的服務及 Feross Aboukhadijeh 這名工程師因為製作了「Youtube Instant」的實驗性質的網站而得到Youtbue工作機會的故事，美國阿拉巴馬州籍的開發者- Michael Hart 使用 Javascript Library – jQuery 及 Google Maps API 打造出了一個輕巧好用而且會更新全世界各地資料的「Google Maps Instant」。而就和故事中的Feross一樣，Hart也剛好也正在尋找工作:P。

依 Michael Hart 的說法，這個即時化的介面會即時地預測你想前往的地方並產生秀出即時搜尋結果，而他所設計的這個服務則是花了4小時及193次的改版才打造出來的（他目前也正努力和Google Maps 上的圖標有關的問題，及使用iPhone或Andorid手機瀏覽時的一些功能）但是雖然可以使用 Google Maps Instant 來查詢你正要去哪裡是一件很酷的事情，但是我不認為Google Maps Instant能夠和Youtube Instant有一樣的機緣就是了:P。

【評】

Instant這個想法其實並不新穎，也有很多實作的例子，最常看到的例子就是使用者在註冊時的密碼強度測試，如下圖：

所以這個東西實作並不困難，網路上都有許多的例子都可以用Ajax的方式來達到這個目標，那既然如此，到底是難在哪裡？難就難在他搜尋的資料量太大，而非同步互動的時間相對卻要縮短，而且秀出的結果還要依使用者們的習慣依序排出。要做到如此困難的事情除了在演算法要下大量的功夫之外，還需要許多方面的支援才做的到。

僅管如此，Instant在UI上是一個很重要的互動模式，能夠即時讓使用者了解到目前的Query是不是會產生預期的結果，雖然在背景下增加了一些Query的次數，不過對於具有強大財力背景的Google來說，如何讓使用者開心才是最重要的事吧:P

[JS] jquery.zoomImg.js 1.0

原本我一直不認為Javascript是一個很特別的Script Language，但是直到最近因為工作的因素所以逼不得以要去維護相關的Javascript的程式，結果沒想到Javascript竟然是如此的博大精深，甚至目前的Desktop application或是 Mobile application都開始使用Javascript來做開發。

直到最近剛結束的Coscup，我想效法一些朋友對自由軟體的態度來激勵自己，一來可以為這個世界盡一份心力，二來也可以訓練自己的能力，就當打怪練功吧:P

這個jquery.zoomImg.js 1.0是因為想要先寫好放著，等之後要做Blog的Image特效時使用的XD，不過既然有這個想法，那就打鐵趁熱，先把基本的功能刻出來，以後再做整理並加強功能吧。

這個plugin是在jquery-1.4.2.min.js的環境下開發的，不過我並沒有用到1.4才特有的一些寫法，所以應該在1.3也還能夠使用。jquery.zoomImg.js In Github

[JS] jQuery.css() problem when using Firefox

最近在公司開發JS的程式的時候，很多時候都會利用到快速又方便的jQuery Library，而這次就很剛好的遇到了Bug，花了很多時間才解出來，以下為測試環境（FF 3.59 , 3.6 ）：

假設我現在有一個DOM的元素，是一個img，當我設定其CSS為「display:none;」時，在FF上就會沒辦法利用
「jQuery.css(‘left’) or jQuery.css(‘top’)」來把這個值取出。就算你已經設定好left或是top的值，都只會抓到0px。

範例程式碼：
http://gist.github.com/518809.js?file=gistfile1.html

所以為了要解決在元素被hidden時不能取值的問題，就只能用比較髒的手段來抓到這個值，就是利用「visibility」。

什麼是visibility？它和display不同的地方在於說，display:none會直接不顯示這個元素並不佔用空間；而visibilty:hidden則是不顯示這個元素但是卻仍存在並佔用空間。

所以這個很Tricky的方法可以參考下面：
http://gist.github.com/518819.js?file=gistfile1.html

這樣就可以成功的取到left的值（top亦同）而不會影響UI的部分了，算是這次遇到最無言的Bug吧。

下次見囉。

δ 2011/01/20：又開始繼續維護這個專案，其實對 FF 3.6.8 來說（不確定其他版本是否也會有相同問題），就算是最新版本的 jQuery 1.4.* 都無法從 display:none 的元素中利用 .css() 來取得特定的屬性值，因此我利用 jsfiddle 寫了一組完整測試，包含 display:none 及 visibility:hidden 元素的各種可能，請自己用你的瀏覽器來測試一下吧。

[Hax4] Rainbow

測試頁面：在這、專案資訊：在這

這幾天因為心血來潮，想說來練習一下pure javascript，所以就都不用jQuery來做事情(雖然最後還是有用，不過我只用來做特效而已XD)。這個Idea其實是源於我以前做的一個很爛的liu-translator，它只能單方面做字根對字的轉換，所以就想說利用Ajax的概念來實作一個線上的IME，因此我就去找了之前Luke的網蝦米來研究他的UI介面。

研究了一下後就開始著手動工整個JS的架構，邊看深入淺出Ajax邊試著實作他說的一些思惟，像是要怎麼寫的很MVC，所以就開始學著把程式切成粗略的「資料」、「模組」、「樣式」三類，雖然之間還是有些耦合性，但是比較以前的我，這次的實作算是很成功的分離了。

之後又想到行易公司的練習嘸蝦米的打字程式一直沒有跨平台，只支援該死的M$，所以為何不幫他們設計一個Cross Platform的Web Application?反正只要解決Cross Browser的問題就可以了，雖然我在Cross Browser這條路上只是一個剛入門的新手，但總比Cross Platform好多了吧…因此就把分離完的架構再修改，改成有點像是遊戲的小程式。

原本已經接近完工的狀態了，但是Bu因為是「大新倉頡」的愛好者，所以就給個建議要我加入的其字根對應表，去擴充可支援的輸入法，就又經過了一場編碼和正規表達式的戰爭後，終於把切換輸入法的功能也加上了，這完全要歸因於先前的偽MVC架構，讓我能夠在很短的時間完成這個動作。

最後一個也是最重要的啦，為了提高遊戲性，我設計了一段可以自動去抓使用者給定URL的頁面回來，把該頁面上所有符合UTF-8繁體中文的字全部抓下來當成題目，這又比起以前行易公司設計的那些題目多了一些趣味。多了這個設計，你還可以邊看Yahoo!奇摩新聞邊練打字咧!!

附上程式截圖:

§2010/05/13 補上程式的Demo連結，原來我都沒有放出來= = ，舊的在這，新的在這
§2011/02/05 更新連結、圖片、介紹。