custom evet - better event abstraction

Publishing Custom Events in JavaScript

Ajax Mistakes

Ajax Mistakes

Using Ajax for the sake of Ajax
Breaking the back button
Not giving immediate visual cues for clicking widgets
Leaving offline people behind
Don’t make me wait for Ajax
Sending sensitive information in the clear
Assuming AJAX development is single platform development.
Too much code makes the browser slow
Not having a plan for those who do not enable or have JavaScript.
Inventing new UI conventions
Changing state with links (GET requests)
Blinking and changing parts of the page unexpectedly
Not using links I can pass to friends or bookmark
Not cascading local changes to other parts of the page
Asynchronously performing batch operations
Scrolling the page and making me lose my place
Blocking Spidering

as simple as possible, but no simpler: Drip: IE Leak Detector

as simple as possible, but no simpler: Drip: IE Leak Detector

How it Works

Fortunately, Internet Explorer's architecture made this app fairly easy to build. It's basically a simple MFC app with a browser COM component in it. The strategy for catching leaked elements is as follows:


* When a document has been downloaded, sneakily override the document.createElement() function so that the application is notified of all dynamically-created elements.

* When the document is fully loaded, snag a reference to all static HTML elements.

* To detect leaks: navigate to a blank HTML page (so that IE attempts to release all of the document's elements),

* force a garbage-collection pass (by calling window.CollectGarbage()),

* and look at each element to see if it has any outstanding references (by calling AddRef() and Release() in succession on it).

Within the leak dialog, each element's attributes are discovered and enumerated using the appropriate IDispatch/ITypeInfo methods.

px is actually a relative font unit

Syntax and basic data types

The rule:
h1 { line-height: 1.2em }

means that the line height of "h1" elements will be 20% greater than the font size of the "h1" elements. On the other hand:
h1 { font-size: 1.2em }

means that the font-size of "h1" elements will be 20% greater than the font size inherited by "h1" elements.

When specified for the root of the document tree (e.g., "HTML" in HTML), 'em' and 'ex' refer to the property's initial value.

Pixel units are relative to the resolution of the viewing device, i.e., most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees.

以 Container 實作 Light Box

以 Container 實作 Light Box

解決 IE6 <div> 浮在 <select> 上會的問題
可設定與某節點的相對位置
開啟與關閉可以使用動畫效果
Modal 效果
可拖拉
可用簡單的設定達到 AJAX 的效果
可限制不超出視窗範圍

利用 Get 工具跨網域存取資料

利用 Get 工具跨網域存取資料

<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/get/get-beta-min.js">
<script>
var oTrans = YAHOO.util.Get.script('http://del.icio.us/feeds/json/joesphj/yui?count=5',{
    onSuccess: function(){
        alert('從 del.icio.us 取得資料共 ' + Delicious.posts.length + ' 筆')
    }
});
</script>

YAHOO.util.Connect.setForm

http://developer.yahoo.com/yui/docs/YAHOO.util.Connect.html#method_setForm

 setForm
static string setForm ( form , optional )
This method assembles the form label and value pairs and constructs an encoded string. asyncRequest() will automatically initialize the transaction with a a HTTP header Content-Type of application/x-www-form-urlencoded.

Parameters:
    form  id or name attribute, or form object. 
    optional  enable file upload. 
    optional  enable file upload over SSL in IE only. 

Returns: string
    string of the HTML form field name and value pairs..

YUI ImageCropper 的簡單範例| 這樣做就對了

function onFormSubmit(e) { 
    YUE.preventDefault(e);
    YUC.setForm(form6);
    YUC.asyncRequest('POST', 'crop6.php', {
        success : function(o) {
            data = eval('(' + o.responseText + ')');
            img6.setAttribute('src', data.img);
            YUD.setStyle(img6, 'width', 'auto');
            YUD.setStyle(img6, 'height', 'auto');
            crop6.destroy();
            form6.parentNode.removeChild(form6);
        }
    });
}
YUE.on(form6, 'submit', onFormSubmit);

如何不被 TortoiseSVN 拖慢系統效率

如何不被 TortoiseSVN 拖慢系統效率

* 不要把你的 working copy，放在網路磁碟機裡。TortoiseSVN 常要作一些複雜的事，好比說 recursive 進去每個子目錄，檢查是否有檔案被更動過，以便顯示 icon overlay。網路磁碟機的運作速度本來就很慢了，如果這些複雜的事，必須在網路磁碟機上做，當然效率就更差了。這第一條建議，就把我打死在路邊，因為我總是為了貪圖 unix tool 的方便，而使用 samba 分享 working copy 到 windows 上使用，也因此，所以常會碰到這些效率的問題。解決之道當然就是不要這麼作，幸好最近發現 GnuWin32 比起以前的 UnxTools 要來的齊全很多，現在大部分的 unix style 操作，也都可以在 Windows 上進行了。
* 減少 working copy 的量。TortoiseSVN 會監控「所有」被 checkout 出來的 working copy，偵測其是否有所更動，以便存於 cache 裡，讓我們能夠在 explorer 裡「即時」看到檔案的狀況。因此，暫時不會用到的 working copy，如上個月臨時要改某項功能而被 checkout 出來的某個 branch，就可以先砍掉，等到下次要用時再重新 checkout。也就是說，事情作完了，就把目錄砍掉吧。按照 Subversion 的 zero-cost branching 的邏輯，我們實際上也是應該常常 branch，事情做完後就把 branch 幹掉。
* 讓 TortoiseSVN 知道你會把 working copy 放在哪。否則的話， TortoiseSVN 就必須檢查整顆硬碟，找出所有的 working copy 以便監控。如果 TortoiseSVN 知道 working copy 只會在哪裡有的話，就可以不必這麼辛苦，當然效率也就會好很多囉。假設平常我們把 working copy 都放在 C:\jeffhung\wc\ 目錄下[1]，在設定視窗裡的 Icon Overlays 頁面，把 C:\jeffhung\wc\* 加進 Include paths 裡，然後把 C:\* 加進 Exclude paths 裡，即可讓 TortoiseSVN 只檢查 C:\jeffhung\wc\*，而不會監控整顆硬碟。所以原來設定視窗裡的這兩個欄位，是用來傳給 File System Monitoring 的 SDK API 用的。
* 只在 explorer 裡顯示 overlay。TortoiseSVN 最大的賣點，就是與 explorer 整合，即時在 icon 上 overlay 顯示檔案狀態。然而，由於一般應用程式的 File Open 或 File Save 對話視窗，也都是直接呼叫系統對話視窗來進行，因此 overlays 也會有作用，而這便會降低程式的執行效能。因此，如果在這些地方，我們沒有需要知道檔案的版本狀態的話，我們就可以在 TortoiseSVN 裡啟動 Show overlays only in explorer，讓 overlays 只在 explorer 裡出現，這樣應用程式的執行速度，就不會被 TortoiseSVN 拖累了。

Optimize performance | TortoiseSVN
TortoiseSVN seems very slow on big directories | TortoiseSVN

If you're working on Windows XP then you can also disable the zipfolders. This will also increase the browsing speed. regsvr32 /u %windir%\\system32\\zipfldr.dll

After Yslow "A": 20 more best practices.

After Yslow "A": 20 more best practices.YAHOO! Exceptional Performance team 日前提出了新的 20 點 performance recommandation.

1. Flush the buffer early [server]
2. Use GET for AJAX requests [server]
3. Post-load components [content]
4. Preload components [content]
5. Reduce the number of DOM elements [content]
6. Split components across domains [content]
7. Minimize the number of iframes [content]
8. No 404s [content]
9. Reduce cookie size [cookie]
10. Use cookie-free domains for components [cookie]
11. Minimize DOM access [javascript]
12. Develop smart event handlers [javascript]
13. Choose <link> over @import [css]
14. Avoid filters [css]
15. Optimize images [images]
16. Optimize CSS sprites [images]
17. Don't scale images in HTML [images]
18. Make favicon.ico small and cacheable [images]
19. Keep components under 25K [mobile]
20. Pack components into a multipart document [mobile]

程式者的胡言亂語 : 程式者的胡言亂語

程式者的胡言亂語 : 程式者的胡言亂語

許多人身處這種看似不見天日的專案中，是很難有什麼好心情的。想放棄的絕對比想繼續把它完成的多。可是，若是沒有抱持著在逆境求生的想法，想要完成專案就更是難上加難了。這是我覺得我在這過程中學到最寶貴的東西 －即便身處逆境，也要試著穩定心情，站穩腳步脫離逆境。大部份爛掉的專案，在重新開始的初期，難免還是會收到來自business owner的責難。但是，當你展現誠意，試圖導向正軌，而也確實的漸漸的把專案導入正軌時，就會慢慢的得到business owner的認同，最後也有機會將專案完成。而專案完成才是最重要的，即便中間有所曲折。這個招募系統的故事結尾是，獨孤木最後得到客戶公司發給他的一個獎狀，表揚他對這個專案的貢獻。