While the previous file structure works well, I decided to tune some details before deploying the latest WordPress release. Besides that, I also started a new theme development project after my last theme which was developed more than 2 years ago. Thankfully, everything seems to work so far.

The main reason behind the re-organization of files is to stop putting everything together within wp-content folder. As I am using SVN to manage my WordPress files, I feel more secured if I have less files changed / modified / added to my working copy. The previous structure was designed to store everything, including things are not meant to be shared among sites (installations) like attachments within wp-content folder.

Besides, although putting in everything within the same wp-content folder sounds like a good idea, but what if I want to create yet another new site (installation) for somebody which I don’t feel like sharing plugins and themes to this new site? After digging in the codex for some time, I found this guide that guides me how to further customize WordPress folder path very useful.

So the structure for a site now looks like this

/
|-scripts/ < - where I store my shared scripts
|-|-wordpress/ <- my wordpress, obviously
|-|-|-www/ <- my wordpress working copy
|-|-|-content/ <- new wp-content folders
|-|-|-|-site-id/ <- new wp-content folders for $site_id
|-|-|-|-|-plugins/
|-|-|-|-|-themes/
|-public_html/ <- my public folder, links to /scripts/wordpress/www
|-|-wp-site/ <- new wp-content folder, links to /scripts/wordpress/content/site-id

So now visitors of this blog should not be able to view attachment for my other blogs.

The deployed new theme in development is actually my current weekend project. As you can see, there's no color scheme being applied to it at the moment. I am now focusing on completing the basic features and the basic template files before being able to further customizing the color scheme.

Just in case if anyone is interested in this new theme, it can actually be forked via my bitbucket repository. I have not actually decide what license to be used, but most probably GPL as WordPress would probably requires. If there's any problem regarding this new theme, please do not hesitate to post a bug report @ the issue tracker.

Semantic Web is not just about putting data on the web, but also making links to allow a person as well as a machine to explore the web of data. Links are made in the web of data connects arbitrary things together as described by RDF as opposed to links in the web of hypertext, where links connects to only web-resources. Linkage of arbitrary things then allow related things to be found while performing search.

Besides, it is also a principle of linking data between systems and entities that allow rich self-describing inter-relations of available data across the globe on the web. Web of Data also marks a shift from publishing data in human readable HTML documents to machine readable documents that allows machines to be able to make inference out of the data published.

To efficiently link entities together, Sir Tim Bernes-Lee proposed four rules or expectations, as follows,

• Use URI as names for things
• Use HTTP URIs to enable people to look up these names
• Returns useful information using standard technology / format like RDF / SPARQL when someone looks up a URI
• Allow users to discover more things by including links to other URI.

However, it is important to know that breaking the rules does not neccessary destructive. It would only reduce inter-connectivity, which in turns discourages re-usability that results in making resources less valuable.

To use URI as names for things, Universal URI set of symbols should always be used to enable other parties to be able to process data that results in a consistent result. This also means that the risk of loosing meaning is reduced in the process.

It is also important to actually serve information on the web against a given URI. This allows data as well as metadata in specific standard formats such as RDF or OWL accessible. By publishing information about a resource, it enables others, especially applications and machines to properly understand the document.

To enable users to discover things, one of the ways is to provide inner as well as outer links information back to the user. By definition, it says that given a graph G, it is browsable if for the URI of any node in G, and if the URI is looked up, information returned that describes the node must satisfy the following conditions:

• Returns statements where the node is either a subject or object
• Describes all blank nodes attached to the node by one arc.

In short, it allows data to be represented in graph form and allow traversal. It is important for the query service to return RDF statements of that involves the specified node regardless it is a subject or an object. Note that the subgraph returned should be a minimum spanning tree (MSG) or known as RDF molecule.

However, if there is a statement that relate multiple entities, the statement should then be repeated for each of the entities. This then violates the rule where data must not store in more than one place mainly for consistency purpose. However, this becomes less of a concern if the statements are automatically generated.

Besides that, there may be a situation where the author of document A claims that it relates to document B, but the author of B may think otherwise. One of the reasons may be document A did not exist when B got published.

Multiple or expired data may also not be desirable at times. For example page visitor statistics data within a site introduction document. To solve this issue, one of the proposed way is to separate the statistics statement data out of the introduction document into an individual document.

In the end, links opens up the web of data to not only human beings, but also AI processes to allow them to make inferences out of entities. Besides, it also encourages all parties to publsih data freely in an open standard format.

Data summarized and greatly simplified from the following sources:

• Sir Tim Bernes-Lee – Linked Data – Design Principle
• Linked Data

As the name implies, Resource Definition Framework, or RDF in short, is a language to represent information about resources in world wide web. Information that can be represented is mostly metadata like title (assuming the resource is a web-page), author, last modified date etc. Besides representing resource that is network-accessible, it can be used to represent things that cannot be accessed through the network, as long as it can be identified using a URI.

The main objective of RDF is to generate information that can be processed by applications by defining a standardized approach to represent resources. The usage of standardized language also enables interchanging of information between applications without loss of meaning. This allows third party applications to use / consume information created and because the information format is standardized, tools are readily available to manipulate the information.

As mentioned earlier, as long as a thing can be represented in the form of Universal Resource Identifier, URI, then it can be represented / described by RDF. URI is generally used to represent not only network-accessible things, but also non-network accessible things like a arbitrary human being, corporation, or even a book in a library as well as abstract concepts that do not necessarily exist physically like creator / author / modified date. URL, which stands for Uniform Resource Locator is a subset of URI.

RDF is a simple language that deals with only binary relationship, which involves a Subject, a Predicate and a Object. Given an example “web(cslai) is Jeffrey04′s blog”, we can re-structure the statement into subject = web(cslai), predicate = owner, object = Jeffrey04. Then we can put this into a graph (kinda reminds me of Semantic Network), as follows (not RDF graph):

rdf_example ©

From the graph, we can see that the relationship between a subject and object is described by the predicate. Or another way of saying, subject ( web(cslai) ) has a property in the form of predicate (owner) that has a value of object ( Jeffrey04 ).

Before going to construct a RDF graph, it is important to know that as RDF is used to provide information on a resource, there are a set of basic rules to follow when constructing a RDF statement. Subject should always be a URI, or a blank node (will be discussed later) that denotes a resource, predicate must always be a URI and object can be another resource, a blank node or a constant represented by a character string.

Besides serializing a RDF graph into an XML file, the statements can also be written in the form of triples. Each statement in a graph is written as a simple triple of subject, predicate and object in exact order. Another point to note is that a graph is a primary manner of represent statement, and any other way to represent a statement is considered secondary.

The basic syntax of a triple requires URI to be enclosed in angle bracket or QNAME which kinda resembles XML vocabulary/namespace thingy, and literals to be enclosed in double quotes. For example

<http://cslai.coolsilon.com/> csterms:owner "Jeffrey04".

Blank node is introduced when a structured data presents as the object value. For example, given a triple as follows

exstaff85740 exterms:address "1501 Grant Avenue, Bedford, Massachusetts 01730"

rdf_structured ©

Before discussing the graph, it is worth pointing out that each URI node is denoted by an ellipse, and literals denoted by a box. As seen on the graph, all the nodes are either a subject or an object while arcs are predicates. The respective RDF triples for the above graph are shown as follows:

exstaff:85740     exterms:address    exaddressid:85740 .
exaddressid:85740 exterms:street     "1501 Grant Avenue" .
exaddressid:85740 exterms:city       "Bedford" .
exaddressid:85740 exterms:state      "Massachusette" .
exaddressid:85740 exterms:postalCode "01730" .

As seen in both the graph as well as the RDF triples, a new node is created just to describe the concept of address. To represent the same piece of information in another way without having to create a new node, a blank node can be introduced, as follows

rdf_structured_with_blank_node ©

In RDF triples form

exstaff:85740 exterms:address    ??? .
???           exterms:street     "1501 Grant Avenue" .
???           exterms:city       "Bedford" .
???           exterms:state      "Massachusette" .
???           exterms:postalCode "01730" .

As seen from the graph, address node is changed from a node with URI address into a node that doesn’t have address which is called a blank node. Then in the triplets it is written as a ‘???’ instead of the complete URI as shown in the above example. However, besides using a ‘???’ to denote a blank node in triples, we can also use another form of representation in case there are a lot of blank nodes that represents different things within a graph. By reusing the same example, the triples can be rephrased as follows

exstaff:85740 exterms:address    _:johnaddress .
_:johnaddress exterms:street     "1501 Grant Avenue" .
_:johnaddress exterms:city       "Bedford" .
_:johnaddress exterms:state      "Massachusette" .
_:johnaddress exterms:postalCode "01730" .

By breaking up the address into smaller structured parts, it enables external applications to manipulate the information in a more standardized way to produce a more predictable result. However, because RDF only deals with binary relationship, to properly describes N-ary relationship, it has to be broken into a list of binary relationship with the use of blank nodes. Somehow, this reminds me of something similar in prolog where you can create a kind of variable that the programmer do not need to explicitly name them.

Besides being used for the above situation, blank node is also often used in situation where there is no other way to properly and accurately describe a resource. For example, a person with email address johndoe@example.com, although mailto:johndoe@example.com is a valid URI, but as mailbox address is also used as an attribute, the better way of representing John Doe is by using a blank node with mailto:johndoe@example.com as object, as follows:

_:john exterms:mailbox <mailto:johndoe@example.com> .

An example of combining multiple RDF that is scattered around the internet is assuming there is a book that is authored by an author that uses johndoe@example.com, we can make inference by comparing the following triple

ex2terms:book78354 exterms:mailbox <mailto:johndoe@example.com> .

We can then deduce that The book is written by John Doe that has email address of johndoe@example.com.

However, because by default object allows any literals, it may make other application that consumes the information in trouble. For example, by looking at the triple below,

_:jeff exterms:age "24" .

There is no way to tell whether that 24 is a base 10 decimal, or is an octal number. Things can only go worse if the application is actually expecting a float. Type literal is introduced to solve the problem by allowing the specification of a particular datatype to be used in literals. Back to the previous example, to properly define my age, I should prepare a triple as follows:

_:jeff exterms:age "24"^^xsd:integer .

Content is summarized / oversimplified from RDF Primer.

I am currently preparing myself in applying a postgrad programme and is looking for a research topic. At first I wanted to do something that is related to cloud computing but after some discussion with people around me, they suggest me to do something on semantic web. While posting my notes here, I realized that I had posted something on semantic network that looks like the base of semantic web here (Post still “Under construction” as of writing, will post the diagrams later tonight).

Semantic Web

Just thought it would be better if I start by stating a problem, imagine one day Alice is looking for the price for a piece of movie DVD, what she would do is to get to the movie store website and search for the movie DVD. However, Alice might not have been able to get the price if she is not around as the task cannot be automated easily using a computer. This is because the web page that displays the price is prepared for human being like us.

Therefore semantic web is a proposed solution to the problem where information should be represented not only for human being like us to read, but also for machines to be able to understand and manipulate it. In short, the definition says that Semantic Web is an extension to the World Wide Web, which information is given well-defined meaning that enable both lay person and computers to work in co-operation.

Representing Information

Semantic HTML

From what I remember, before Google emerge as the most popular search engine, webmasters used to include descriptive meta tags within a HTML document, as follows:


<meta name="keywords" content="good looking, handsome, single">
<meta name="description" content="About Jeffrey04">
<meta name="author" content="Jeffrey04">


Such that, when user search with the keywords as specified above, the document above will be returned as one of the search results. However, although metadata is displayed via meta tags as mentioned above, it is never enough to enable computers to understand that “Jeffrey04 is staying in Malaysia” or “Jeffrey04 works in Kuala Lumpur”.

Then CSS got popular as people around starts encouraging separation of content and presentation. Therefore, more people start using HTML tags like <strong> instead of <b> because <b> doesn’t carry any meaning. Usage of tags with semantic meaning also enable users that relies on screen-reader to further understanding the material.

However, often times especially while HTML5 is still under drafting we group content into sections enclosed within a <div> tag. For formatting purpose, as well as giving the block of information meaningful to machines, a class name is often given to the block, eg. <div class="header">. The usage of tag attribute to give meaning to a piece of information leads to the development of various microformats.

Microformats

When web-developers start using tags that accurately representing information within a document, numerous efforts are made to further mark up a document according to standard to ease machine processing. If one have ever does screen-scraping, they will feel the pain of trying to make the script to scrap the right information out of a HTML document.

To enable information to be read easily out of a HTML document, what a web-developer can do is to mark up the information following the specific standard. One of the standards is hCalendar, which is used to describe dated event, for example to mark up an event that is taking place at 6th June 2010, we would do:


<p class="vevent">John Doe is <span class="summary">getting married</span> on 6th June 2010 at the <span class="location">Community Hall</span>. The ceremony will be held from <abbr class="dtstart" title="2010-06-06T14:00:00+08:00">2PM</abbr> till <abbr class="dtend" title="2010-06-06T16:00:00+08:00">4PM</abbr>.</p>


Therefore, to do screen-scraping, one would just need to search for (via either CSS or XPath) the particular block of content above.

(to be continued, next is on Resource Description Framework, RDF, which loosely-related to my previous post on semantic net as linked above)

I often struggle to get my Javascript code organized, and have tried numerous ways to do so. I have tried putting relevant code into classes and instantiate as needed, then abuse jQuery’s data() method to store everything (from scalar values to functions and callbacks). Recently, after knowing (briefly) how a jQuery plugin should be written, it does greatly simplify my code.

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.

array_map function is a function that I use the most in my php scripts recently. However, there are times where I want to pass some non-array into it, therefore often times I have code like the snippet shown below:

$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.

To do node selection for DOM operations, one typically uses CSS selectors as (probably) popularized by jQuery. However, there is another alternative that is as powerful if not better known as XPath. XPath may be able to do a lot more than just selecting node (which I have no time to find out for now) but I will just focus on how to do node selection in this blog post.

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.

This post continued from this post. Finally I have found some time to start developing my pet project using Zend Framework. After getting the controller to work the way I am more familiar (comparing to Kohana which I used at work) with, the next step is to get it to output some data.

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?

After coded enough Javascript few months back, I found that there are a couple of functions that I kept re-using in different projects. Therefore I took some time to refactor them and re-arrange them into a single file. The common code that I keep reusing even today consists of functions that does prototypical inheritance, scope maintenance, some jquery stuff, google maps api stuff and some general ajax application related code.

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.

Maintaining state in Javascript is not too difficult once you catch the idea. However, as I am not a super brilliant programmer, it takes me some time to find a way to maintain state as YUI Event does in jQuery.

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.