EragonJ – A humble navigator

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

原本我一直不認為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 Library，而這次就很剛好的遇到了Bug，花了很多時間才解出來，以下為測試環境（FF 3.59 , 3.6 ）：

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

範例程式碼：

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

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

所以這個很Tricky的方法可以參考下面：

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

下次見囉。

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

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


這幾天因為心血來潮，想說來練習一下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 更新連結、圖片、介紹。