I used pure relational database approach (postgresql to be exact) to store information collected via flickr initially, but it wouldn’t really scale (or I just simply suck at designing/maintaining database tables) and my queries got killed numerously by the web host. Besides that, as the table grow larger, the amount of resource consumed to serve a query also grow, hence I needed to find another way to store the data. At first I thought of using some popular noSQL solutions, but my supervisor told me to turn the data into RDF format instead. So I went on with Redland and use postgresql (again) as storage.

However, for some reason, postgresql doesn’t seem to work efficiently and a simple query can take tens of minutes to run when it holds more than 100k RDF statements. For some reason, the hash storage doesn’t work on my Ubuntu development VM, so I switched the storage engine to MySQL after @dajobe’s suggestion.

However, as PHP binding apparently not that popular, so there aren’t much information / tutorial posted. I actually wanted to write a collection of scripts to collect data from flickr for my research project, so I began with finding an existing script for that task. However, I didn’t find good ones in PHP, so I ported this from Perl to PHP and use Redland. Then after knowing how it really works, I rewrote everything again from scratch (will put them up to bitbucket when I have time to clean up). I even wrapped the library with class methods, which I hope to release later (I only knew about another OO wrapper in PHP for Redland after almost done writing my scripts).

To use Redland’s PHP functions without OO wrapper, we always start with a statement to build a world. I am not very sure what this means (yes, I didn’t really read the documentation that thoroughly), but it seems that almost all constructor functions depend on it to create new object (yes, Redland has this OO feel although all the function calls are in procedural style). So, in PHP, the statement would look like:

$world = librdf_new_world();

Then you would want to decide where to store your RDF statements. For this piece of note, I will just use non-persistent memory store. So the function call to build a storage object is

$storage = librdf_new_storage($world, 'memory', $name, $options);

where $name stores the name of the storage object, and $options often carries the DSN, but in our case it is NULL. Now that we have storage defined, then we proceed with building a model to actually store RDF statements into the storage (it would be easy to think model as a database library, and storage as an abstraction layer).

$model = librdf_new_model($world, $storage, NULL);

Statements are consists of nodes, so let’s create some. To create a URI node, it is just as easy as

$foo = librdf_new_node_from_uri_string($world, 'urn:foo');
$bar = librdf_new_node_from_uri_string($world, 'urn:bar');

Creating a literal node would be just as simple as

$baz = librdf_new_node_from_literal($world, 'baz', NULL, FALSE);

Putting them into a statement

$statement = librdf_new_statement_from_nodes($world, $foo, $bar, $baz);

which is the equivalent to this

<urn:foo> <urn:bar> 'baz' .

To run a query to the model, just simply send a SPARQL statement as follows

$query = librdf_new_query(
    $world,
    'sparql',
    NULL,
<< ?object .
        }
SPARQL
);

Running the query and get result

$result = librdf_model_query_execute($model, $query);
var_dump(librdf_query_results_to_string2($result, 'json', 'application/json', NULL, NULL));

Enjoy!

Users of Web 2.0 applications typically organize their created content with a set of terms or keywords, also commonly known as tags ^{[3, 4, 6, 7]}. Spending additional time and effort to provide annotation such as tags to a resource usually implicitly implies the relevance and/or importance of the resource to a user ^[1]. Therefore, besides being used for content classification, tags assignment can also be analyze to find the implicit relationship between users and the tagged content.

It is also observed that the frequency of term usage is proportional to the level of importance or connection to user, i.e. the more a tag is used, the more it is important to the user ^{[1, 8]}. The choice of tags when annotating a resource often express the user interest and perceptions ^[8]. Users usually have different ideas and interests when tagging a resource especially when the application allow the same resource tagged by multiple users ^[2]. Therefore tagging activity pattern can be studied to find a user’s domain of interest.
Users with common interests tend to use similar set of tags in tagging re- sources of interest ^[2]. The similarity of users can then be calculated through the tagging pattern for recommending purpose as it provides social relationships between users ^{[4, 7]}. This may allow more collaboration between users sharing similar interest.

Although the variety selection of tag helps in better representation of the resource, but this may cause some problems as users don’t tend to agree to each other ^[2]. Observations also shows tagging behaviour follows power law distribution where tags are mostly assigned to a small subset of more
popular resources ^{[2, 7]}. Hence, when a resource gets popular, users having different interests will attempt to assign tags with keywords from all different domains. However, when different tags that are semantically related from each other are assigned to related resources (vocabulary mismatch problem), it may drastically decrease the level of relevance although the tags may actually share similar meaning ^{[3, 7]}.

Correlation between resources is often established when they are assigned with common tags ^[8]. The level of relevance can then be observed by studying the similarity in their set of assigned tags ^[8]. The correlation and similarity between the tags assigned to resources may also help users to find unseen resources by browsing the tags.

The assigned tags can be used as a tool to enable discovery, sharing and collaboration of web resources ^{[1, 2, 3, 8]}. Some applications even allow sharing of tagging information ^{[2, 8]}. Hence, besides using tags as a tool for content classification and user interest study, they can be used to make collaboration easier.

A resource may be described by its assigned tags depending on the tagging behaviour ^[1]. When an tagging system follows the bag-model, i.e. system that allows multiple users to tag a resource, the frequency of a tag is assigned also indirectly shows the increased relevance between the tag and the resource ^{[1, 2, 8]}. Weights can be also calculated for each tag to rank the relevance with the resource.
On the other hand, systems that implements the set-model do not provide enough data to deduce the level of importance or popularity of an assigned tag to the resource ^[8]. Due to the unstructured nature of collabo- rative tagging, the system can be easily abused if users assign tags that do not describe the content ^{[1, 8]}. The problem is more apparent for system implementing the set-model as there is no way to rank the assigned tags.

References

1. I. Cantador, A. Bellog ́ın, and D. Vallet. Content-based Recommendation in Social Tagging Systems. Methodology, pages 237–240, 2010.
2. Y. Guo and J. B. Joshi. Topic-based personalized recommendation for collaborative tagging system. Number 10. ACM Press, New York, New York, USA, 2010.
3. R. Lambiotte and M. Ausloos. Collaborative tagging as a tripartite network, 2005.
4. P. Mika. Ontologies are us: A unified model of social networks and semantics. Web Semantics Science Services and Agents on the World Wide Web, 5(1):5–15, 2007.
5. C. Schmitz, A. Hotho, R. J ̈aschke, and G. Stumme. Mining Association Rules in Folksonomies, pages 261–270. Studies in Classification, Data Analysis, and Knowledge Organization. Springer, 2006.
6. N. Shadbolt, T. Berners-Lee, and W. Hall. The Semantic Web Revisited. IEEE Intelligent Systems, 21(3):96–101, May 2006.
7. S. Siersdorfer and S. Sizov. Social recommender systems for web 2.0 folksonomies. ACM Press, New York, New York, USA, 2009.
8. M. Szomszor, C. Cattuto, H. Alani, K. OHara, A. Baldassarri, V. Loreto, and V. D. P. Servedio. Folksonomies, the Semantic Web, and Movie Recommendation. eprintsecssotonacuk, pages 71–84, 2007.

While there are still a lot to learn about plugin authoring, I would only jot down what I know right now. As the code may not conform to the best practice, please let me know if there is a better way.

To begin, we start with an empty html page


<html>
<head>
<title>Title</title>
</head>
<body>
<input type="text" id="a" /><br />
<input type="text" id="b" /><br />
<input type="text" id="c" />
<script type="text/javascript" src="./jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="./script.js"></script>
</body>
</html>


The first included Javascript script is obviously jQuery, the second file (script.js) is my code, which is not named properly. The basic structure of the file should look like follows:


(function($) {
var module_init = function(plugin, module) {
return function(action) {
var arg = trim_argument(arguments);
return this.each(function() {
if($.fn[plugin][module][action]) {
$.fn[plugin][module][action]
.apply(this, arg);
} else {
throw(action + '() does not exist');
}
})
}
},
 
module_exists = function(plugin, module) {
return $.fn[plugin][module];
},
 
shift_argument = function(item, arg) {
result = [item];
 
for(i = 0; i < arg.length; i++) {
result.push(arg[i]);
}
 
return result;
},
 
trim_argument = function(arg) {
result = [];
 
if(arg.length > 1) {
for(i = 1; i < arg.length; i++) {
result.push(arg[i]);
}
}
 
return result;
};
 
// further code below this line
})(jQuery);


Let us just ignore the functions above for now and proceed to the actual plugin code first. What we're trying to achieve here is to post whatever written to #a is posted to #b, and #b post it to #c. The function call should be as follows:


$(selector).foo(sub_module, options);
// or
$(selector).foo(sub_module, action, [parameter_if_any]);


foo is the name of the example plugin, and sub_module determines which sub-module is responsible to carry out the actual action specified by action. If options is passed in instead, then it would trigger init() for the respective sub-module.

In short, foo() is there just to notify the sub-module to call the right action, hence the code should be simple, as follows (add after the last comment in the basic structure code shown above):


(function foo() {
$.fn.foo = function(module, param) {
var arg = trim_argument(arguments);
 
return this.each(function() {
if(module_exists('foo', module)) {
if(typeof param != 'string') {
$.fn.foo[module]
.apply($(this), shift_argument('init', arg));
} else {
$.fn.foo[module]
.apply($(this), arg);
}
} else {
throw(module + ' module does not exists');
}
});
}
})();


I have a habit to group all the relevant bits together, hence the code is enclosed in an immediately executed function block. It does what it is designed to do -- to delegate the function call to the respective sub-module. trim_argument(); is there to remove the first argument (in this case module), and shift_argument(); is used to insert an argument into the existing argument list. These two function functions are written to enable us to manipulate the arguments to be used in Function.apply() method. Of course, if the specified sub-module does not exist, the code will throw an exception.

Now that we have the main plugin code written, next is to start developing the submodules. Firstly, is a plugin for the text box #a. The textbox is supposed to show textbox #b and passes the input text to #b whenever the value is not null. The code is to be added right after the main plugin, as mentioned above.


(function alpha() {
$.fn.foo.alpha = module_init('foo', 'alpha');
 
var alpha = $.fn.foo.alpha;
 
alpha.init = function(options) {
$(this)
.data('options', $.extend({}, options))
.keyup(alpha.alpha_update);
};
 
alpha.alpha_update = function() {
$(this)
.data('options').b
.foo('bravo', 'alpha_update', $(this).val());
};
})();


module_init is there to do the actual delegation of action. Again, it will check with the remaining arguments after removing the first, which is the action. The function will then attempt to call the action if available, otherwise a new exception is thrown.

alpha.init is a compulsory method that initializes the sub-module. On the other hand, alpha.alpha_update is the actual code that updates another textbox via another sub-module, which is named 'bravo', and coded as follows:


(function bravo() {
$.fn.foo.bravo = module_init('foo', 'bravo');
 
var bravo = $.fn.foo.bravo;
 
bravo.init = function(options) {
$(this)
.data('options', $.extend({}, options))
.hide();
};
 
bravo.hide = function() {
$(this).fadeOut('fast');
};
 
bravo.show = function() {
$(this).fadeIn('fast');
};
 
bravo.toggle = function(value) {
if($(this).is(':hidden') && value.length > 0) {
bravo.show.call(this);
} else if($(this).is(':visible') && value.length == 0) {
bravo.hide.call(this);
}
};
 
bravo.alpha_update = function(value) {
$(this)
.val('bravo: ' + value)
.data('options').c
.foo('charlie', 'alpha_update', value);
 
bravo.toggle.call(this, value);
};
})();


The bravo code basically does what it is intended to, which is to receive update from alpha, and then toggle the display of the text box depending on the length of passed in value. After that, bravo is going to post the received update to charlie, as follows:


(function charlie() {
$.fn.foo.charlie = module_init('foo', 'charlie');
 
var charlie = $.fn.foo.charlie;
 
charlie.init = function(options) {
$(this)
.data('options', $.extend({}, options))
.hide();
};
 
charlie.hide = function() {
$(this).fadeOut('slow');
};
 
charlie.show = function() {
$(this).fadeIn('slow');
};
 
charlie.toggle = function(value) {
if($(this).is(':hidden') && value.length > 0) {
charlie.show.call(this);
} else if($(this).is(':visible') && value.length == 0) {
charlie.hide.call(this);
}
};
 
charlie.alpha_update = function(value) {
$(this).val('charlie: ' + value);
 
charlie.toggle.call(this, value);
};


After receiving data from bravo, likewise, it updates the textbox, then display or hide the textbook accordingly. For every action method call, this keyword is usually similar to the jQuery callback functions, which refers to the respective html element (not wrapped with jQuery functions), hence the function call within the sub-module is often via Function.call() /* or */ Function.apply().

To run the code, one only need the following code:


$(function() {
var a = $('#a'),
b = $('#b'),
c = $('#c');
 
a.foo('alpha', { b: b, c: c }).focus();
b.foo('bravo', { a: a, c: c });
c.foo('charlie', { a: a, b: b });
});


That's all, we have done a very simple, and pointless plugin.

$result = array_map(
'some_callback',
array_fill(0, count($some_array), 'some_string'),
array_fill(0, count($some_array), 'some_other_string'),
$some_array
)

It doesn’t look good IMO, as it makes the code looks complicated. Hence, after seeing how the code may vary in all different scenarios, I created some functions to clean up the array_map call as seen above. Code snippet after the jump

function array_map_mix($callback, $param) {
$main = array();

return $result;
}

array_create

Before stepping into the main array_map_mix function, we first look at the array_create function. It is basically a variant of array_fill function, but without the initial index argument.

The important argument here is the $input argument, depending on what is passed into the function, the end result can be different. If anything but array is passed in, then it will behave exactly like the array_fill call as follows:

$foo = array_create(5, 'bar');
// is equivalent to
$foo = array_fill(0, 5, 'bar');

However, if an array is passed in, and the array element count is equivalent to the $count argument, then array_create will return $input without any modification.

array('bar', 'baz') == array_create(2, array('bar', 'baz'));

If the array passed in has one and only one element, and the element happens to be another array, then the child array is passed into the array_fill function, as follows

$foo = array_create(3, array(array('bar', 'baz')));
// is equivalent to
$foo = array_fill(0, 3, array('bar', 'baz'))

If the array passed in doesn’t fulfill the above two conditions, then the end result is similar like passing in a non-array argument.

$foo = array_create(3, array('bar'));
// is equivalent to
$foo = array_fill(0, 3, array('bar'));

The weird behavior caused by the array argument is actually intended, as this function is initially created for the following function, which is the array_map_mix function.

array_map_mix

The first 2 mandatory arguments for array_map_mix are the $callback as well as $param. The $callback is the callback function, and $param is the parameter. The parameter can be either a number, or an array.

When a number is passed in as the parameter, then the code is throwing all the following arguments into array_create function as described above, with the number is sent in as $count. This is an example showing the equivalent array_map function call.

$foo = array_map_mix(
'some_callback',
2,
array('foo', 'bar'),
'baz'
);
// is equivalent to
$foo = array_map(
'some_callback',
array('foo', 'bar'),
array_fill(0, 2, 'baz')
);

What if the number passed in does not equal to the count of array elements?

$foo = array_map_mix(
'some_callback',
2,
array('foo', 'bar', 'baz')
);
// is equivalent to
$foo = array_map(
'some_callback',
array_fill(0, 2, array('foo', 'bar', 'baz'))
);

What if I have 2 array, $foo and $bar, even both has the same amount of array elements, but I want the callback to receive $bar as a whole, instead of just an element?

// given
count($foo) == count($bar);
// wants this
$foo = array_map(
'some_callback',
$foo,
array_fill(0, count($foo), $bar)
);
// equivalent array_map_mix call
$foo = array_map_mix(
'some_callback',
count($foo),
$foo,
array($bar)
);

Hopefully this explains why array_create is coded like above. As mentioned above, $param can be an array as well. This is helpful when the count of array to be passed to array_map is dynamic and a fixed number is not always available.

// suppose function foo() returns an array of variable size
$foo = array_map_mix(
'some_callback',
foo(),
'baz'
);
// the equivalent code
$bar = foo();
$foo = array_map(
'some_callback',
$bar,
array_fill(0, count($bar), 'baz')
);

Nevertheless, array_map_mix can also be used as a direct array_map alternative, although this is not advisible as the function call should take much longer time to complete because of the call_user_func_array call within array_map_mix.

array_map('some_callback', array('foo', 'bar')) == array_map_mix('some_callback', array('foo', 'bar'));

The total number of arguments required is 2 when $param is an array (means using array_map_mix as array_map) and 3 when $param is a non-array. An exception will be thrown if expected argument is missing. Also, if anything but an array or a number is passed into array_map_mix as $param, then another exception is thrown.

Hopefully these two short code snippet helps for people who uses array_map as much as I do.

The main source of inspiration of this post is from John Resig’s blog post comparing CSS selectors to XPath selectors. Recently I am involved in a project where I need to scrap information from a bunch of badly marked up HTML files. Although I am advised to use regular expression to scrap information out from the file, but I decided to give XPath a try.

The initial version was coded with PHP but it wouldn’t work efficiently, as the files are not correctly marked up (and also not marked up semantically) and I had to fix it by throwing the markup to Tidy before processing it. Then the markup is passed to the DOM library classes for data extraction. To sum up on the performance, it was terribly slow (mainly caused by the Tidy process).

Then I headed to stackoverflow to look for alternatives. As recommended, I use lxml and beautiful soup together to scrap information out from the source HTML file (details to be discussed in the other post).

Back to the topic, supposedly a HTML file is given that is marked up as follows:


<html>
<head>
<title>Foo</title>
</head>
<body>
<table>
<tr>
<td>
<table>
<tr>
<th><h1>Main Content</h1></th>
</tr>
<tr>
<td><span>I am a terribly marked up HTML file</span></td>
</tr>
<tr>
<td><span id="horrible_text">Just too horrible</span></td>
</tr>
</table>
</td>
<td>
<table class="sidebar">
<tr>
<th colspan="2"><font>Fancy Sidebar</font></th>
</tr>
<tr>
<td><font>Fizz</font></td>
<td><a href="another_broken_link.html">Fancy menu 1</a></td>
</tr>
<tr>
<td><font>Buzz</font></td>
<td><a href="i_am_also_broken.html">Fancy menu 2</a></td>
</tr>
<tr>
<td><font>Bar</font></td>
<td><a href="some_fancy_broken_link.html">Fancy menu 3</a></td>
</tr>
</table>
</td>
</tr>
</table>
<div id="footer">
<p>Some meaningless copyright text</p>
</div>
</body>
</html>


As seen in the above HTML, it is not as badly marked up but it basically shows what kind of HTML files I am dealing with (except there is no single element ID defined). To quickly get started in working with XPath, I went to w3schools to dig the tutorials as I am working with the file.

Starting from the simplest and most obvious case, which is looking for the copyright text node.

//*[@id='footer']/p

In CSS, one would probably get this done via

#footer > p

However, as I am doing this to get text information, hence in order to get the text content, I would need to do

//*[@id='footer']/p/text()

To summarize what those symbols mean, let me translate the last XPath selector into a layman friendly statement — select any node (empty tag followed by a wild card, //*) that has ([...]) an attribute named id (@id) which is valued ‘footer’ (@id='footer'), from there, select a paragraph node (/p) and extract the text contained within the node (/text()).

Now that you get some idea, we shall proceed do a slightly more complicated selector. Suppose I want to extract content from the third row in the main content table, I would need to do this (as I’m new in this, this may not be the most efficient way of selecting)

//tr[*/descendant-or-self::*[contains(text(), 'Main') and contains(text(), 'Content')]]
/following-sibling::tr[2]
/td
/descendant-or-self::text()

Well, from the markup above, there is no id, no class and basically there is nothing to uniquely identify the node that I want. (I don’t know how to select the node using CSS, so assume there is none for now) Therefore, in order to select the text that I want, I select the any tr node from the document (//tr) that contains ([...]) any node (*/descendant-or-self::*) which in turns contains (the nested [...]) text ‘Main’ and ‘Content’ (contains(text(), 'Main') and contains(text(), 'Content')). From there, find the second sibling after the selected tr(s) (/following-sibling::tr[2]) and get the descendant which is the table data node (/td). Then regardless what node is wrapping the text content, just return any text-content found within the selected table data node (/descendant-or-self::text()).

You may be curious why I don’t just test contains(text(), 'Main Content') but to split them into two different tests. This is due to the fact that in HTML, although browsers treat all whitespace and newline characters as a space, but they do make a difference in the markup. So if it happens that my table header node is marked up as follows

<th><h1>Main
Content</h1></th>

Although it is displayed identically within the browser, but if my selector tests using contains(text(), 'Main Content') it will fail as the correct way of doing it should be inserting a newline character instead of a space, maybe something like contains(text(), "Main\nContent"). There is a weakness in my approach though as the order is ignored in my test. So if there is a table within the document as follows

<table>
<tr>
<th><h1>Content not in the Main</h1></th>
</tr>
<tr>
<td><span>I am a terribly marked up HTML file</span></td>
</tr>
<tr>
<td><span id="horrible_text">Not supposed to be selected</span></td>
</tr>
</table>

Then the text ‘Not supposed to be selected’ will also be selected.

Last example of the day, suppose I want to select all the second column of table data nodes within ‘Fancy Sidebar’ if the first column has text content either ‘Fizz’ or ‘Buzz’

//td[*/descendant-or-self::*[contains(text(), 'Fizz') or contains(text(), 'Buzz')]]
/following-sibling::td[position() = 1]

The selector basically says select any table data node (//td) that contains ([..]) regardless node type (*/descendant-or-self::*) as long as it contains ([...]) text either ‘Fizz’ or ‘Buzz’ (contains(text(), 'Fizz') or contains(text(), 'Buzz')). From there select its sibling table data nodes (/following-sibling::td) and pick the first among them ([position() = 1]).

If you are observant enough, you should find out that the selector may actually be simplified as follows

//td[*/descendant-or-self::*[contains(text(), 'Fizz') or contains(text(), 'Buzz')]]
/following-sibling::td

The previous selector was used because I wanted to show the position() function XD.

Lastly, if firebug is used, then FireXPath is a great addition to the firebug that allows web developer to test XPath selectors.

Base Action Controller

When I used other frameworks like Kohana or CodeIgniter, without extra modules installed, I would have to define view scripts specifically. However, in Zend_Controller, a view is likely to be defined properly and is waiting for data to be populated in. However, I still don’t get any output after a few attempts so I went to compare my dispatch method in the derived action controller with Zend_Controller_Action. The following code shows the updated dispatch method:


public function dispatch($actionName) {
$this->_helper->notifyPreDispatch();
$this->preDispatch();
$parameters = array();
foreach($this->_parametersMeta($actionName) as $paramMeta) {
$parameters = array_merge(
$parameters,
$this->_parameter($paramMeta, $this->_getAllParams())
);
}
call_user_func_array(array(&$this, $actionName), $parameters);
$this->postDispatch();
$this->_helper->notifyPostDispatch();
}


Apparently there are some ‘hooks’ that needs to be called throughout the dispatching process. Besides that, I want my view scripts to be loaded from another folder instead of the default ones, so I added a init method in the base action controller, as follows:


public function init() {
$this->view->addScriptPath(sprintf('%s/View', APP_PATH));
}


The script path should be defined during bootstrap phase, and I will post up a better solution once I find the exact place to configure it. Now that we have our base action controller fixed, let’s move to the actual action controller.

Action Controller

I am not sure whether action stack is HMVC, however, I like the way it works (although it is evil). I will probably stick to action stack for the time being while finding out how partial view can help in widgetizing my page. Besides having a view defined automatically, to put them into a layout I made a call in my bootstrap script, as follows:


Zend_Layout::startMvc(array(
'layoutPath' => APP_PATH . '/View/_layout'
));


Then I did the action stack thingy as follows:


class Controller_Index
extends Coolsilon_Controller_Base {
public function index() {
$this->_helper->actionStack('menu', 'index');
}
public function menu() {
$this->_helper->viewRenderer->setResponseSegment('menu');
}
}


Then, in my View/_layout/layout.phtml,


< ?php echo $this->layout()->menu; ?>
< ?php echo $this->layout()->content; ?>


View/index/index.phtml

This is the main content.

View/index/menu.phtml

This is the menu.

Then by visiting the project site, then I get the following output


This is the menu.
This is the main content.


Phew, I can’t believe I spent so much time on this easy stuff, XD. Now I am one step closer in writting the actual website, now what kind of website should I make?

PrototypicalPrototypal Inheritance

Basically after reading through some articles across the internet, especially this article, then I have this piece of code in my collection.

if(typeof Object.create !== 'function') {
    Object.create = function(_o) {
        var F = function () {}
        F.prototype = _o;
        return new F();
    };
}

It is basically the same piece of code because I find it cleaner and more efficient than my initial draft.

Namespacing

Everyone agrees that global variables are evil, therefore I group all my common functions and classes into one single object, as follows,

var cs = Object.create(new function() {
    // some other code
}

And I find the way YUI manages the modules good enough for me, then I emulated YAHOO.namespace function by having this in my object.

    this.namespace = function(_namespace) {
        if(!this[_namespace]) {
            this[_namespace] = Object.create(new function() {});
        }

        return this[_namespace];
    }

The code may not be clever/clean, but as long as it does the job I have no complaint.

Preserving State

I didn’t quite like the delegate function as I can’t pass in extra arguments, therefore I have this after some refactoring

    var __delegate = function(_method, _scope) {
        var _arguments = arguments;
        return function() {
            return _method.apply(
                _scope, compile_arguments.call(
                    this, _arguments, [], 2
            ));
        }
    };

    var compile_arguments = function(_arguments, _result, _start) {
        for(var i = _start; _arguments.length > _start && i < _arguments.length; i++) {
            _result.push(_arguments[i]);
        }

        return _result;
    };

    this.delegate = __delegate;

Emulate Functional Programming

I have recently decided to learn a little bit on functional programming recently but I haven’t decide which language I am picking. I have some experience in SWI-Prolog but prolog is just a declarative functional programming and does not seem to offer closure, higher order functions and currying. Anyway, back to the topic, after spending some time in this book, I modified some code in the book and result in…

    this.functional = Object.create(new function() {
        this.map = function(_function, _arguments) {
            var result = [];

            for(var i = 0; i < _arguments.length; i++) {
                result.push(_function(_arguments[i]));
            }

            return result;
        };

        this.reduce = function(_combine, _base, _arguments) {
            return _arguments.length > 0 ?
                this.reduce(
                    _combine, _combine(_base, _arguments.shift()),
                    _arguments
                ) : _base;
        };
    });

I am not sure if I can do the similar recursion in cs.functional.map compared to cs.functional.reduce because I am rather weak in recursion.

That’s all for now, and in the second part of this article I will post some helper functions for use with some third party libraries like jQuery and Google Maps API.

EDIT 15/8/2009 There are some changes to this set of functions, will post an update soon and there will probably no part 2 any time soon.

I like grouping relevant functions into a class as it makes code easier to manage (for me, as there may be better ways. As I just recently found out how prototyping inheritance works, it is possible that the discovery may change the way I code in future), therefore the scope of event handler functions is very important. Making the scope (value/reference of this) to the DOM element listened to the event does not help in accessing the shared data so I needed a way to change that behavior.

To solve the problem, a small derivation of the previously discussed delegate function will come in useful.

/**
 * Simulating YUI Event with jQuery
 */
(function($) {
EventHandler = function(_method, _scope) {
    var _argument = {};

    if(arguments.length > 2) {
        _argument = arguments[2];
    }

    // jquery default event callback format
    return function(_event) {
        // this = DOM element
        return _method.call(_scope, _event, this, _argument);
    };
};
})(jQuery);

var Foo = function() {

    var bar_handler = function(_event, _element) {
        alert('bar');
    }

    var foo_handler = function(_event, _element, _extra_argument) {
        alert(_extra_argument);
    }

    (function() {
        $('#foo').click(EventHandler(foo_handler, this, 'foo'));
        $('#bar').click(EventHandler(bar_handler, this));
    }).call(this);
};
var foo = new Foo();

That basically wraps up what I found these couple of days, if I manage to dig some time, the next post should be focused on prototypical inheritance.

/**
 * Proof of concept : jQuery-like syntax in YUI
 */
(function() {

var yui_builder = (function(Selector, Element, DOM, Event) {
    return function(_selector) {
        var Result = function() {};

        var init = function(_selector) {
            var result = [];

            if(typeof _selector == 'object') {
                result = [ new Element(_selector) ];
            } else {
                result = query_elements.call(this, _selector);
            }

            return result;
        };

        var delegate = function(_scope, _function) {
            return function() {
                return _function.apply(_scope, arguments);
            };
        };

        var query_elements = function(_selector) {
            var result = new Result;
            var elements = wrap_elements(Selector.query(_selector));

            for(var i in elements) {
                result[i] = elements[i];
            }

            return result;
        };

        var unwrap_elements = function(_elements) {
            var result = [];

            for(var i in _elements) {
                result[i] = _elements[i].get('element');
            }

            return result;
        };

        var wrap_elements = function(_elements) {
            var result = [];

            for(var i in _elements) {
                result[i] = new Element(_elements[i]);
            }

            return result;
        };

        return (function(_elements) {
            _this = new Result;

            _this.addClass = function(_class) {
                for(var i in _elements) {
                    _elements[i].addClass(_class);
                }

                return this;
            };

            _this.append = function(_content) {
                if(typeof _content == 'string') {
                    for(var i in _elements) {
                        _elements[i].set(
                            'innerHTML',
                            _elements[i].get('innerHTML') + _content
                        );
                    }
                } else if(typeof _content == 'object') {
                    _elements[0].appendChild(_content);
                }

                return this;
            };

            _this.appendTo = function(_selector) {
                var _parent = yui_builder(_selector);

                for(var i in _elements) {
                    _elements[i].appendTo(_parent.get(0));
                }

                return this;
            }

            _this.attr = function() {
                var result = this;

                if(arguments.length == 1 && typeof arguments[0] == 'string') {
                    result = _elements[0].get(arguments[0]);

                    if(!result) {
                        result = undefined;
                    }
                } else if(arguments.length == 1 && typeof arguments[0] == 'object') {
                    for(var i in _elements) {
                        for(var attribute in arguments[0]) {
                            _elements[i].set(attribute, arguments[0][attribute]);
                        }
                    }
                } else if(typeof arguments[1] == 'function') {
                    for(var i in _elements) {
                        _elements[i].set(arguments[0], arguments[1].call(_elements[i].get('element'), i));
                    }
                } else {
                    for(var i in _elements) {
                        _elements[i].set(arguments[0], arguments[1]);
                    }
                }

                return result;
            };

            _this.each = function(_callback) {
                for(var i in _elements) {
                    _callback.call(_elements[i].get('element'), i, _elements[i].get('element'));
                }

                return this;
            };

            _this.eq = function(_index) {
                return yui_builder(_elements[_index]);
            };

            _this.get = function() {
                var result = [];

                if(arguments.length == 0) {
                    result = unwrap_elements.call(this, _elements);
                } else {
                    result = _elements[arguments[0]].get('element');
                }

                return result;
            };

            _this.hasClass = function(_class) {
                var result = false;

                for(var i in _elements) {
                    if(_elements[i].hasClass(_class)) {
                        result = true;
                        break;
                    }
                }

                return result;
            };

            _this.html = function() {
                var result = this;

                if(arguments.length == 0) {
                    result = _elements[0].get('innerHTML');
                } else {
                    _elements[0].set('innerHTML', arguments[0]);
                }

                return result;
            }

            _this.index = function(_subject) {
                var result = -1;

                for(var i in _elements) {
                    if(_elements[i].get('element') === _subject) {
                        result = i;
                    }
                }

                return result;
            };

            _this.removeClass = function(_class) {
                for(var i in _elements) {
                    _elements[i].removeClass(_class);
                }

                return this;
            }

            _this.size = function() {
                return _elements.length;
            };

            _this.toggleClass = function() {
                if(arguments.length == 0) {
                    for(var i in _elements) {
                        if(_elements[i].hasClass) {
                            _elements[i].removeClass(arguments[0]);
                        } else {
                            _elements[i].addClass(arguments[0]);
                        }
                    }
                } else {
                    for(var i in _elements) {
                        if(arguments[1]) {
                            _elements[i].addClass(arguments[0]);
                        } else {
                            _elements[i].removeClass(arguments[0]);
                        }
                    }
                }

                return this;
            };

            _this.val = function() {
                var result = this;

                if(arguments.length == 0) {
                    result = this.attr('value');
                } else {
                    for(var i in _elements) {
                        this.attr('value', arguments[0]);
                    }
                }

                return result;
            };

            (function() {
                for(var i in _elements) {
                    _this[i] = _elements[i];
                }
            }).call(_this)

            return _this;
        }).call(this, init.apply(this, arguments));
    }
})(YAHOO.util.Selector, YAHOO.util.Element, YAHOO.util.Dom, YAHOO.util.Event);

})();

Most of the implemented functions are similar to what jQuery offers, therefore to use the yui_builder:

(function($) {
    // everyone loves $ function
    $(document.createElement('a'));
        .attr('href', 'test')
        .html('test')
        .appendTo(document.body);
})(yui_builder);

There are some other interesting things in the Event utility like YAHOO.util.Event.onDOMReady, YAHOO.util.Event.onContentReady as well as YAHOO.util.Event.onAvailable methods. Most of the time, the developer may want certain code to start running as soon as the DOM tree is loaded completely without having to wait for all the elements (image, flash etc.) to finish loading. Then YAHOO.util.Event.onDOMReady may come in handy. For example

YAHOO.util.Event.onDOMReady(function() {
alert('Good day!');
});

After loading the DOM tree, then the browser will prompt ‘Good day!’ to the user.

Back to the topic, if the developer wishes to listen to some event and perform action as soon as the event is fired, then he may register the event as follows.

YAHOO.util.Event.on(some_element, 'change', some_callback_function, extra_parameter);

Everything looks fine, but when the developer has structure his code into patterns like the module patttern as follows:


(function(Event) {
 
var Some_Module = function() {
return {
foo: 'bar',
execute: function() {
alert(this.foo);
},
 
listen: function() {
Event.on(element, 'change', this.execute, null, this);
}
};
}();
 
})(YAHOO.util.Event);


Notice in the forth and fifth arguments passed into the YAHOO.util.Event.on function, I am passing in no extra parameters and the fifth argument defines the scope of this keyword in the Some_Module.execute method.

If the developer uses YAHOO.util.Element to wrap certain elements, then he can also use another way to listen to the event

var element = YAHOO.util.Element('div');
element.on(some_event, some_callback_function, some_extra_parameter, some_scope);


Speaking of YUI Element, I just recently found a way to ‘emulate’ jQuery’s $() function with YUI components.


(function($) {
$(document.body); // returns the body element wrapped in YAHOO.util.Element class
})(function(_selector) {
var result = YAHOO.util.Selector.query(_selector);
 
if(result.length > 0) {
if(result.length == 1) {
result = new YAHOO.util.Element(result[0]);
} else {
for(i in result) {
result[i] = new YAHOO.util.Element(result[i]);
}
}
} else {
result = false;
}
 
return result;
});


Although not as powerful as jQuery’s $() function, but It can be useful in many situations where YUI is the only choice.