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為例。