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 ），這樣就可以解決這個問題了。

應該有很多人像我一樣已經厭倦了 Facebook 上面一堆無聊的心理測驗或是騙人氣的按讚論壇，所以身為 Chrome 的愛好者及 Javascript 的初心者，我就為 Chrome 寫了一個小小的擴充功能，名為「Facebook Blocker」。

Facebook Blocker 可以讓你設定自己的「樣式」，然後它會自動在你下次進入 Facebook 的時候讀取樣式並分析當下的頁面，凡是符合該「樣式」的訊息就會自動被隱藏起來，讓你以後再也不用看到那些惱人的廣告。

其實如果你上 Chrome Extensions 看的話，已經有很多名為 「Facebook Blocker」的 Extension 了，但是經過一陣搜尋之後，發現那些 Extension 大多和我想要做的事情都不太一樣，不是太過痴肥要不然就是功能不同，讓我久久不能自己。

所以經過幾天的研究之後，已經寫好了 Facebook Blocker 的雛型了，而且基本的 Hot Key 也在剛剛 1.0.2 版的時候新增上去了。心中還有很多有趣的功能還沒實作，雖然 UI 也有點難看，不過至少在使用上沒有太大的問題，總要留些東西放在後面更新，才不會有人說我在打混（好的不學都在學這個 …）

如果有什麼想要增加的功能或是意見都可以留言給我（在這或是在 Extension 的頁面都可以），我會一一回覆的。

Enjoy blocking

δ Facebook Blocker 在 Chrome Extension 上的載點與步設定步驟的教學圖

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 ~ 祝大家新年快樂啦（????）

這篇用來整理一下與 F2E 相關的 tool，以供日後參考用（持續更新）：

Javscript | CSS Compressor（壓縮器）

• YUI compressor

• 好用的 YUI compressor ，支援 JS | CSS 的壓縮，使用說明、載點

Obfuscator（混淆器）

• jjencode

• 可自訂混淆用變數且極度複雜，使用說明+載點

• aaencode

• 和上者類似，不過是以表情符號來做混淆，使用說明+載點

Test（測試）

• Qunit

• Javascript 單元測試的 Framework，適用於 jQuery plugin，使用說明、載點

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

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

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

原本我一直不認為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 元素的各種可能，請自己用你的瀏覽器來測試一下吧。

The way a browser normally works, images are loaded only after an HTTP request is sent for them, either passively via an tag or actively through a method call.

所以這就是為什麼圖片都會有Delay抓不到的情況…因為他通常是被觸發時才會自動去抓src的圖。可是如果真的是這樣的話，那就要想個辦法來避免這個問題。不過該怎麼辦咧?

The simplest way to preload an image is to instantiate a new Image() object in JavaScript and pass it the URL of the image you want preloaded , and load it simultaneously to the page with the onLoad() event handler:

哦酷哦，直覺上的想法就是要讓頁面load完時就先onload 一個function，這樣就可以把執行時間提前，因此只要寫個function包起來讓onload去讀就可以了。

DEMO CODE: