When your mind is made up,
When your mind is made up,
There’s no point try to change it,
There’s no point try to stop it,
There’s no point try to talking,
There’s no point try to fight it.

So what have I made up~?

Have been working quite hard for the past month, and when it is free in this weekend, I am losing myself. So, what have I made up? what I am up to?

May the god of last minute be with me!

現在座下來, 重新再思考自己的事, 感覺很不一樣. 久違了的msn….我再次看到frd list 上的朋友和他們的status, 找人聊天再次讓自己跟別人連繫上. 希望能把烏雲抺去一點. 希望再給自己一點動力, 重新上路.

還有一個星期就要到美國, 感覺有點像按reset button. 29 歲去一個完全陌生的地方, 帶住135磅肥肉同二三十公斤行李, 沒有其他… 現在還不算胖, 來一個up side down 的轉變, 應該可以吧.

There is a XUL reference in MDC(https://developer.mozilla.org/en/XUL_Reference). It listing out objects and its associated attributes, properties, and methods, but seems not all the reference are update and complete. Sometimes I don’t even know what kind of xul object I am dealing with, I need to have something like var_dump or print_r in PHP. And I have written my own object dumping function.

My dump function:

myUtil = {
dump:function(o,depth,name,filter,filterMode) {
    var doc = gBrowser.contentDocument,
        el = doc.getElementById("fduDump"),
        str = "" || name + "\n",
        depthLimit = depth || 1,
        filterDefaultMode = filterMode || 1;
    // filterMode is either 1 or -1.
    // 1 => Like the iptable Allow all, it dig into all object exclude object name in the filter object
    // -1 => Like the iptable Deny all, it will not dig into any object unless object name is inside the filter

    if ( !el ) {
        el = doc.createElement("pre");
        el.id = "fduDump";
        doc.body.appendChild(el);
    }

    var transverse = function(o,thisLv,name,filter) {
        var indent = "", i, tmp, filterMode, dig, f;
        if ( filter && filter.__mode ) {
            filterMode = filter.__mode;
        } else {
            filterMode = filterDefaultMode;
        }
        for ( i = 0 ; i < thisLv ; i++ ) {
            indent += "    ";
        }

        if ( name ) {
            str += "\n" + indent + "=== lv "+thisLv+", Start "+name+" ===\n";
        }

        if ( o && thisLv < depthLimit ) {
            for ( k in o ) {
                try{
                    tmp = o[k] + "";
                    tmp = tmp.split("\n");
                    tmp = tmp.join("\n"+indent);
                    str += indent + k + " : " + tmp + "\n";
                    if (typeof(o[k]) === "object" && o[k] && thisLv + 1 < depthLimit ) {
                        if ( filter && typeof filter[k] !== "undefined") {
                            dig = (filterMode === -1);
                        } else {
                            dig = (filterMode === 1);
                        }
                        if ( dig ) {
                            if ( filter && filter[k] ) {
                                f = filter;
                            } else {
                                f = null;
                            }
                            transverse(o[k], thisLv + 1, k, f);
                        }
                    }
                } catch (e) {
                }
            }
        }

        if ( name ) {
            str += indent + "=== lv "+thisLv+", End "+name+" ===\n\n";
        }
    }
    transverse(o,0,"",filter);
    el.innerHTML = str;
}
}

Calling the dump function:

// e.g. here I amd dumping the event object form a "TabSelect" event
// 1st param is object to be dumped
// 2nd param is the depth (optional, default = 1)
// 3rd is just a string to be shown in the first line of the dump (optional default = "")
// 4th is filter (optional)
// 5th is default filter mode (optional default = 1, dump all properties exclude specified in filter object)
myUtil.dump(evt,2,"tabEvent",{"__mode":-1,"target":null});

// if you just want to dump an object itself, you can simply: myUtil.dump(evt);

Sample output of the dump

tabEvent
originalTarget : [object XULElement]
preventCapture : function preventCapture() {
    [native code]
}
target : [object XULElement]

    === lv 1, Start target ===
    _tPos : 0
    linkedBrowser : [object XULElement]
    ...
    selected : true
    _selected : undefined
    linkedPanel : panel1259045062233
    ...
    tagName : xul:tab
    ...
    nodeName : xul:tab
    ...
    className : tabbrowser-tab
    ...
    === lv 1, End target ===

cancelable : false
currentTarget : [object XULElement]
timeStamp : 1172581376
bubbles : true
type : TabSelect
eventPhase : 3
preventDefault : function preventDefault() {
    [native code]
}
initEvent : function initEvent() {
    [native code]
}
stopPropagation : function stopPropagation() {
    [native code]
}
CAPTURING_PHASE : 1
AT_TARGET : 2
BUBBLING_PHASE : 3
explicitOriginalTarget : [object XULElement]
preventBubble : function preventBubble() {
    [native code]
}
...

By dumping the event object and the target in the event object, there are something useful can be found. In the TabSelect Event, there is target, originalTarget, currentTarget, explicitOriginalTarget!?
And in the target object, it has a tagName and nodeName equals to “xul:tab”, so now I can be sure it is a “tab” object instead of tabPanel, tabbox, or tabbrowser….Also it has a linkedBrowser object which is the browser object contained in the tab. This is not documented in the xul reference…maybe they don’t want us to use it? Have fun dumping.

Other resources on message logging and debugging in writing Firefox addon:

https://developer.mozilla.org/en/JavaScript_Console

http://www.borngeek.com/firefox/toolbar-tutorial/chapter-8/

Actually this is the second time for me to head into this performance issue. I did a rebuild on the VM and setup the whole thing again last time. Everything goes fine with the new build right before I install subversion. This time I tried to upgrade the machine to 512MB Ram package without any configuration change, everything just back to normal. Not sure if other peoples are having the same experience or just me had the problem…

if (element.className === "classA") {...}

or

if (element.className.indexOf("classC") > -1) {...}

Sure we can do it with regular expression but there are faster way to do it.

I use YUI all the time and there is a YAHOO.util.Dom.hasClass, I read the source code and found they got a clever way to do it. It just add space in front and behide the className and do a indexOf. But one thing to note that you should not add the space to the className property directly instead you obtain a copy of the className string by getAttribute.

The code will look like:

function hasClass(el, class_to_match) {
    var c;
    if (el && el.className && typeof class_to_match === "string") {
        c = el.getAttribute("class");
        c = " "+ c + " ";
        return c.indexOf(" " + class_to_match + " ") > -1;
    } else {
        return false;
    }
}

Tidy and neat!

IE 6 had a handy document.body.scrollWidth and document.body.scrollHeight to check the size of body element. Just one thing to note with document.body.scrollHeight is that If the total height of the content is less than the view port / screen size, you will need to use document.body.clientHeight.

While for Firefox, I just need to go through different properties in the window object and body element to find the correct numbers for the calculation.

width = window.scrollMaxX + document.body.clientWidth;
height = window.scrollMaxY + document.body.clientHeight;

Do not mistaken window.innerWidth and window.innerHeight into above as innerWidth and innerHeight will include the scrollbar (if there aren’t any scrollbar, window.innerWidth will equals to document.body.clientWidth and window.innerHeight will equals to document.body.clientHeight)

MACD = 12 day MA – 26 day MA.
When MACD cross above 9 day MA of MACD is buying signal, while MACD cross under the 9 day MA of MACD is selling signal.

This is like taking me an hour to search and read on the detail and finally discover the last number 9 is 9 day MA of MACD instead of 9 day MA of the stock…..

There are different ways of making custom event to works, following will show:
1. Using jQuery.bind and jQuery.trigger
2. Using the jQuery plugin jQuery.mhub

Using jQuery.bind and jQuery.trigger

Have searched for how to have custom event on jQuery, found that yoan’s Introduction to jQuery’s custom event had some good insight. He had achieved it by using the bind and trigger function in jQuery. I have referenced his blog and the API from jQuery and created a rather primitive sample.

var count = 0;
var elLog = document.getElementById("log");

// trigger the ticker event into body element
setInterval(function() {
    $("body").trigger("ticker",{name:"my name is foo",count:count++});
},3000);

$("body").bind("ticker",gFunc);

function gFunc(evt,msg) {
    elLog.innerHTML += "gFunc triggered<br/><br/>";
}

var myApp = {
    name:"app1",

    init:function() {
        var that = this;
        // bind the _handlerTicker function to the ticker event of body element
        $("body").bind("ticker",function() {that._handlerTicker.apply(that,arguments)});
    },

    _handlerTicker:function(evt,msg) {
        elLog.innerHTML += this.name + "<br/>";
        elLog.innerHTML += "event name: " + evt.type + "<br/>";
        elLog.innerHTML += "msg content: name = " + msg.name + ", count = " + msg.count + "<br/><br/>";
    }
}
myApp.init();

The sample in action

My sample code above works but with some draw backs:
1. The custom event need to associated with a dom element which have nothing to do with it, here is the body element.
2. When dealing with a large application / working with different plugin / mashup, we could end up with a name collision on the custom event.

Using the jQuery plugin jQuery.mhub

To tackle the problems listed above, I created a message hub plugin, jQuery.mhub. This jQuery.mhub employ a factory design. It only contains one single method:

var demoHub = jQuery.mhub.create();

Which return a message hub object with the following methods:

demoHub.add(String NAME);
demoHub.remove(String NAME);
demoHub.send(String NAME, Object MESSAGE );
demoHub.listen(String NAME, Function HANDLE_FN, Object SCOPE );

Here is a sample to see how the jQuery.mhub works. By using the jQuery.mhub, the above 2 problems state can be solved.

1. The custom event no longer tide up with a dom element.
2. mhub object are created from jQuery.mhub.create();, you can get your own mhub without sharing it to other component and avoid name collision

A primitive sample of jQuery.mhub.

The source code:

var count = 0;
var elLog = document.getElementById("log");
var demoHub = jQuery.mhub.create();

demoHub.add("ticker");

setInterval(function() {
    demoHub.send("ticker",{name:"my name is foo",count:count++});
},3000);

demoHub.listen("ticker", globalFunc);

function globalFunc(evt,msg) {
    elLog.innerHTML += "globalFunc triggered<br/><br/>";
}

var myApp = {
    name:"app1",

    init:function() {
        demoHub.listen("ticker", this._handlerTicker, this);
    },

    _handlerTicker:function(name,msg) {
        elLog.innerHTML += this.name + "<br/>";
        elLog.innerHTML += "event name: " + name + "<br/>";
        elLog.innerHTML += "msg content: name = " + msg.name + ", count = " + msg.count + "<br/>";
    }
}

myApp.init();

One common way of doing this is create a list (ol / ul) then apply the border-left and add a class “first” to the first li setting the border to 0px. This is good, but this can be done in a better way.

Let start with an ordered list, and applying css border-left on it.
<ol id=”sample-list”>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

With the style:
/* reset the li element */
ol{margin:0px;padding:0px;}
li{margin:0px;padding:0px;list-style:none;}

#sample-list li{border-left:1px solid #ccc;float:left;padding: 2px 5px;}

The result will become:
| Item 1 | Item 2 | Item 3

Which shown an extra border at the left. One simple way to eliminate the first border is adding a classname to the first li and clear our the border, but this will add extra logic in your PHP code. So that will be nice if we can solve in CSS and keep the PHP code a bit cleaner.

By using negative margin, the item list above can be shown nicely without the extra class.

<ol id=”sample-list”>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

With the style:
/* reset the li element */
ol{margin:0px;padding:0px;}
li{margin:0px;padding:0px;list-style:none;}

#sample-list {overflow:hidden;display:block;}
#sample-list li{border-left:1px solid #ccc;float:left;padding: 2px 5px;margin-left:-1px;}

In the CSS above, by setting li with margin-left:-1px; the first border-left will fall out of the ol. With ol#sample-list set to overflow:hidden, that extra line will be wipe out from screen and leave all the other separators there.

This technique can works in a vertical list with horizontal separator. Just set the border to top and margin-top:-1px then set the container’s overflow to hidden. Done!