EragonJ – A humble navigator

Image Credit

最近在開發專案的時候，因為大量用到 blockUI 及 datepicker，所以好死不死終於遇到了一個很神奇的 bug，這個 bug 會發生在你使用 modal dialog ，而該 dialog 內還包含一個 datepicker 的元素，這樣就會造成那個 datepicker 在選取年、月的下拉式選單（dropdown）時無法觸發。

但是這個很怪，沒有道理 DOM 都是正確的（年、月的 option 數目都是對的）但是卻打不開 dropdown，不過當我設定 option 內的 showOverlay 為 true 的時候，一切都正常了，因此判斷一切都和那個 showOverlay 的參數有關，所以去 Trace 了blockUI 的 source code ，最後終於發現了問題所在 …

原來在 blockUI 運行的過程中，有這麼一段程式碼會綁定 mousedown / mouseup / keydown / keypress 的事件，這樣就會使得 datepicker 的點擊行為無法發生，這就是為什麼會有這個 bug 的出現。

所以目前比較好的做法，一個是設定 showOverlay : false （這會拿掉漸層背景，不過這通常都不會是我們想要的解法），另一個就是設定 bindEvents : false （讓 blockUI 不要 suppress 我們的點擊 event ），這樣就可以解決這個問題了。

Demo、載點與解說

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

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

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

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

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

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

最後附上測試用程式碼，而圖檔的部分則是以tzangms的banner為例。

最近專題已經到了最後階段了，儘管如此，一天的工作量還是來到了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.

原文 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