Here’s one task related to the tree data structure. Given two nodes, can you find their lowest common ancestor?

In a matter of fact this task always has a proper solution, because at least the root node is a common ancestor of all pairs of nodes. However here the task is to find the lowest one, which can be quite far from the root.

We don’t care what kind of trees we have. However the solution, as we will see, can be very different depending on the tree type. Indeed finding the lowest common ancestor can have linear complexity for binary search trees, which isn’t true for ordinary trees.

Overview

Let’s say we have a tree (not binary!) and two nodes from this tree. The task is to find their lowest common ancestor. The thing is that we don’t know much about where they appear to be in the tree.

We can think of this tree as a DOM tree of any single HTML page online. It is not binary or balanced and can’t be sure where these nodes are.

First we must find both paths from the root to each one of the target nodes. Note that this requires additional memory! Then, in linear time we can pass through these “paths” and scan them from the root down to the nodes. We expect these to arrays to be equal at least in their first element (the root). Using this scenario the lowest common ancestor is the last equal element in both arrays.

To see how this algorithm can be dramatically changed depending on the data structure, let’s see another example. Now let’s say we have a binary search tree (BST). We know that in a BST all the elements in the left sub-tree are smaller than the root and all the items on the right sub-tree are greater than the root. This is true also for the left and the right sub-trees.

Now because we’re searching the lowest common ancestor, we don’t need to collect the paths from the root to the nodes in two arrays. We just know that the greater items are on the right, while the smaller items are on the left. This can help us find the lowest ancestor starting directly from the root.

What we do is to compare the two keys of the target nodes with the root key. If one of the keys are smaller, and the other is greater than the root’s key, then obviously the root is the lowest common ancestor. This is true because one of the items will be somewhere in the left sub-tree, while the other will be in the right sub-tree.

In case both values are greater (or smaller) than the root, we can move to the right (or to the left) sub-tree and try again with the same procedure. Thus the first node which key is in between the two target values will be the lowest common ancestor.

Code

Here’s a very simple PHP implementation showing us these two algorithms.

class Tree
{
    public $node = null;
    public $id = null;
    public $parent = null;
    public $children = array();
    
    public function __construct($node, $id = null)
    {
        $this->node = $node;
        $this->id = $id;
    }
    
    public function addChild(Node &$n)
    {
        $n->parent = $this;
        $this->children[] = $n;
    }
    
    /**
     * Returns an element by its id
     * 
     * @param mixed $id
     * @return Node 
     */
    public function search($id)
    {
        if ($this->id == $id) {
            return $this;
        }

        $a = false;
        
        // search all the children starting from the left-most
        foreach ($this->children as $child) {
            $a = $child->search($id);
        }
        
        return $a;
    }
    
    /**
     * Finds a path from the root to the 
     * item and returns it as a list
     * 
     * @param mixed $id 
     * @return array
     */
    public function find_path($id, &$path)
    {
        array_push($path, $this->id);
        
        if ($this->id == $id) {
            return 1;
        }
        
        foreach ($this->children as $child)  {
            if (1 == $child->find_path($id, $path)) return 1;
            array_pop($path);
        }
    }
    
    public function __toString()
    {
        return $this->node . ' ' . $this->id . "\n";
    }
}

$dom = new Tree('DOM', 'ROOT');

$body = new Tree('BODY', 1);
$div1 = new Tree('DIV', 'div-1');
$div2 = new Tree('DIV', 'my-id');

$a = new Tree("A", 'some-link');

$dom->addChild($body);
$body->addChild($div1);
$body->addChild($div2);
$div2->addChild($a);

$path1 = $path2 = array();
$dom->find_path('div-1', $path1);
$dom->find_path('some-link', $path2);

Finding Lowest Common Ancestor in a BST

class Tree
{
    public $key;
    
    public $parent  = null;
    public $left    = null;
    public $right   = null;
    
    public function __construct($key) 
    {
        $this->key = $key;
    }
    
    public function insert(Tree $n) 
    {
        if ($this->key < $n->key) {
            if ($this->right == null) {
                // insert
                $this->right = $n;
                $n->parent = $this;
            } else {
                $this->right->insert($n);
            }
        }
        if ($this->key > $n->key) {
            if ($this->left == null) {
                // insert
                $this->left = $n;
                $n->parent = $this;
            } else {
                $this->left->insert($n);
            }
        }
    }
}

$t = new Tree(10);

$n1 = new Tree(20);
$n2 = new Tree(5);
$n3 = new Tree(7);
$n4 = new Tree(13);

$t->insert($n1);
$t->insert($n2);
$t->insert($n3);

function find_common($node1, $node2, $tree) 
{
    if ($node1->key < $tree->key && $node2->key > $tree->key) {
        return $tree;
    } else if ($node1->key < $tree->key && $node2->key < $tree->key) {
        find_common($node1, $node2, $tree->left);
    } else if ($node1->key > $tree->key && $node2->key > $tree->key) {
        find_common($node1, $node2, $tree->right);
    }
}

$node = find_common($n3, $n4, $t);

Application

A typical use-case of this algorithm is finding the lowest common ancestor of two nodes in a DOM tree. Sometimes we just need to attach an event listener to both items (even before they are attached to the DOM!). Although attaching this event to the “document” will work just fine, all the elements from the nodes up to the root will be “capturing” these events due to event bubbling. Thus attaching the event to the lowest common ancestor is a better solution.

Two variants of run-length encoding are the diagram encoding and the pattern substitution algorithms. The diagram encoding is actually a very simple algorithm. Unlike run-length encoding, where the input stream must consists of many repeating elements, as “aaaaaaaa” for instance, which are very rare in a natural language, there are many so called “diagrams” in almost any natural language. In plain English there are some diagrams as “the”, “and”, “ing” (in the word “waiting” for example), “ a”, “ t”, “ e” and many doubled letters. Actually we can extend those diagrams by adding surrounding spaces. Thus we can encode not only “the”, but “ the “, which are 5 characters (2 spaces and 3 letters) with something shorter. In the other hand, as I said, in plain English there are two many doubled letters, which unfortunately aren’t something special for run-length encoding and the compression ratio will be small. Even worse the encoded text may happen to be longer than the input message. Let’s see some examples.

Let’s say we’ve to encode the message “successfully accomplished”, which consists of four doubled letters. However to compress it with run-length encoding we’ll need at least 8 characters, which doesn’t help us a lot.

// 8 chars replaced by 8 chars!?
input: 	"successfully accomplished"
output:	"su2ce2sfu2ly a2complished"

The problem is that if the input text contains numbers, “2” in particular, we’ve to chose an escape symbol (“@” for example), which we’ll use to mark where the encoded run begins. Thus if the input message is “2 successfully accomplished tasks”, it will be encoded as “2 su@2ce@2sfu@2ly a@2complished tasks”. Now the output message is longer!!! than the input string.

// the compressed message is longer!!!
input:	"2 successfully accomplished"
output:	"2 su@2ce@2sfu@2ly a@2complished tasks"

Again if the input stream contains the escape symbol, we have to find another one, and the problem is that it is often too difficult to find short escape symbol that doesn’t appear in the input text, without a full scan of the text.

That is why run-length encoding isn’t a good solution when compressing plain text, where long runs rarely appear. Well, of course, there are exceptions. For example such an exception is the lossy text compression with run-length encoding. It is intuitively clear that compressing text with loss is rarely useful, especially when you’ve to decompress exactly the same text. However there are some cases that lossy compression may be useful. Such case can be removing spaces. Indeed the text “successfully accomplished” brings us exactly the same information as “successfully accomplished”. In this case we can simply remove those spaces. Indeed we can use a marker to indicate the long run of spaces like “successfully@6 accomplished” in order to decompress the input string with absolutely no loss, but we can also throw those symbols away. This desision depends on the goal. Exactly with the same goal in mind we can remove new lines and tabs, only if we’re sure that the sense of the text is preserved. Yet again, a problem is that such long runs don’t happen to occur in random texts. That is why it’s better to use diagram encoding for plain text compression instead of run-length encoding.

Few Questions

After understanding the principles of the diagram encoding, let’s see some examples. In the example above it is better to replace doubled letters with something shorter. Let’s say # for “cc”, @ for “ss” and % for “ll”. Thus the input text will be compressed as “su#e@fu%y a#omplished”, which is shorter. But yet again what will happen if the input message contains one of the substitutions? Also we can’t say if there are many doubled letters and enough reasonable substitutions for them. A better approach is to replace patterns.

Pattern Substitution

The pattern substitution algorithm is a variant of the diagram encoding. As I said above in plain English a very commonly used pattern can be “ the “, which is five characters long. We can now replace it with something like “$%” for example. In this case the message “I send the message” will become “I send$%message”. However there are some obstacles to overcome.

The first problem is that we need to know the language and somehow to define commonly used patterns in a dictionary. What would happen with a message written in some language we don’t know nothing about. Let’s say – Latin like the example bellow.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis, sapien eget suscipit placerat, justo quam blandit mauris, quis tempor ante sapien sodales augue. Praesent ut mauris quam. Phasellus scelerisque, ante quis consequat tristique, metus turpis consectetur leo, vitae facilisis sapien mi eu sapien. Praesent vitae ligula elit, et faucibus augue. Sed rhoncus sodales dolor ut gravida. In quis augue ac nulla auctor mattis sed sed libero. Donec eget purus eget enim tempor porta vitae eget diam. Mauris aliquet malesuada ipsum, non pulvinar urna vestibulum ac. Donec feugiat velit vitae nunc cursus imperdiet. Donec accumsan faucibus dictum. Phasellus sed mauris sapien. Maecenas mi metus, tincidunt sed rhoncus nec, sodales non sapien.

Clearly without knowing Latin it isn’t easy to define which are those commonly used patterns. The thing is that it’s better to use pattern substitution if you know in advance the set of words and characters.

The second problem is related to decompression. It is obvious that we need to define a dictionary and this dictionary must be used when decoding the message. It will be great also if we find more patterns longer than three characters. If not, the compression ratio will be low. Unfortunately such patterns aren’t very common in any natural language.

Application

It is interesting to answer the question, how to use diagram encoding or patter substitution to compress text in natural language, especially when we don’t know the language in detail? The answer hides in the question. We wont compress natural languages, but machine language. Exactly machine (programming) languages are limited to a smaller sets of words and symbols. Isn’t it true for any programing language? Like PHP, where words like “function”, “while”, “for”, “break”, “switch”, “foreach” happen to be often in use, or HTML with its defined set of tags. Perhaps the best example is CSS, where only the values of the properties can vary. CSS files also tend to have multiple new lines, tabs and spaces, which only humans read.

The question here is why should we compress those file types. It’s clear that after the compression they will be completely useless, both for humans and machines. Yes, that is true, but what if we have to store versions of those files into a DB. Kind of a backup. Imagine you’re working for a web hosting company that has to store daily versions of the sites it’s hosting. Thus the volume of stored information even for small companies hosting only few sites can be enormous. The problem is that compressing those files with some conventional compressing tool isn’t a good idea. Thus we’ve to save a copy of the entire site every day, but as we know the difference between daily versions of a site can be small. A version control system is another solution, but then you’ve to store the plain text of the files.

Perhaps a better approach is to compress the text using pattern substitution and then saving only differences – kind of version control, which can be done with “relative encoding”.

Using the above method we can save lots of disk space and in the same time we can compress/decompress easily. Another good thing is that you can save only changes to the initial files, like version control, which can also be compressed.

Implementation

The implementation of this algorithm is again on PHP and tries only to describe the main principles of compression. In this case I tried to compress a CSS file using the compression above. Although this example is quite primitive we can see some interesting facts. First of all you only need encoding and decoding dictionaries. Practically the encoding and decoding processes are equal, so you don’t need to implement two different functions. Here in this example a native PHP function is used – str_replace, because the purpose of this algorithm is not to describe pattern substitution techniques, but pattern substitution. It assumes that today’s programming languages have string manipulation functions for the purposes of this task.

$str = file_get_contents('large_style_file.css');

$encoding_dict = array(
	"\n" 		=> '$0',
	'text' 		=> '$1',
	'color' 	=> '$2',
	'display' 	=> '$3',
	'font' 		=> '$4',
	'width' 	=> '$5',
	'height'	=> '$6',	
	' '		=> '',
);

function replace_patterns($input, $dict) 
{
	foreach ($dict as $pattern => $replace) {
		$input = str_replace($pattern, $replace, $input);
	}
	
	return $input;
}

$result = replace_patterns($str, $encoding_dict);

By only replacing few CSS properties I achieved almost 40% of compression ratio (as shows the diagram bellow). The initial file is 202 KB, while compressed it’s only 131 KB. Of course, it all depends on the CSS file, but how about replacing all property names with shorter ones. Perhaps then the compression will be even better.

You should know that in JavaScript you cannot simply write a multilined code chunk, i.e. something like this:

var str = 'hello
world';

This will result in an error, which can be a problem when you deal with large strings. Imagine a string containing some HTML that should be injected via innerHTML. Now one possible solution is to concatenate two or more strings, by splitting the initial string.

var str = 'hello'
        + 'world';

Howerver this solution result in some additional operations like concatenation. It can be very nice if there was something like the PHP multiline string format.

The PHP Example

In PHP you have the same use case with strings. You can have a string concatenated over multiple lines, but you cannot split lines like so:

// the following line is wrong
$str = 'hello
world'; 

// a possible solution to the line above is
$str = 'hello'
     . 'world';
// which is very similar to the js solution in the second example

// ... but in PHP there is the so called HEREDOC
$str = <<
The heredoc gives us the power to write multiline strings. 
The JavaScript Trick
Actually in JavaScript there is something that's exactly what Heredoc is meant to be for PHP. Take a look at the last example:
var text = <>
this 

is
my
multi-line
text
.toString();

document.body.innerHTML = text;

Thus you can write multiline strings in the JavaScript code.

Related posts:

Powerful PHP: Less Known String Manipulation 
JavaScript Flexibility – Regex match() 
Flexible JavaScript – Splitting Strings 
Flexible JavaScript – Replace in a String 


]]>
			/2011/07/12/a-javascript-trick-you-should-know/feed/
		4
		
		
		
		/2011/04/05/jquery-unbind/
		/2011/04/05/jquery-unbind/#comments
		Tue, 05 Apr 2011 08:51:08 +0000
		
				
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		

		/?p=2240
		Continue reading jQuery.unbind() →


Related posts:

jQuery live() vs bind() performance 
Remove DOM Element with JQuery 
Event driven programming with jQuery – (part 2). Events in jQuery. 
Event driven programming with jQuery – (part 3). What is a module? 


]]>
				Binding Problems

Typically in jQuery when you bind an HTML element with some event this event is fired every time the user (client) triggers it. Thus when you’ve a click event attached on a button you can click it as many times as you want. In some rare cases this can be tricky. Let’s imagine the following scenario.

The user clicks on a “vote” button.
Some AJAX calls are performed.
After a successful AJAX call you setup a cookie to deny further votes from this machine.

This seems to be pretty well known scenario, but as the click event is attached to the button there is enough time to click several times on the “vote” button and to vote several times. In this case before the cookie is set the user can vote more than once.
Demo

So one possible solution is to unbind the click event. In jQuery terms this is done by …
$.unbind()
With this method you can simply unbind the “click” event or whatever event there is attached on the desired HTML element. So now in the first case we had:
$(document).ready(function() {
    $('input').click(function() {
        $.ajax({ url : 'http://stoimen.com/projects/jquery.unbind/example1.php'
               , success : function() {
                    $('p').append('You\'ve voted successfully!
');
               }    
        }); 
    }); 
});

Now you can replace the code above with:
$(document).ready(function() {
    $('input').click(function() {
        $('input').unbind();
        $.ajax({ url : 'http://stoimen.com/projects/jquery.unbind/example1.php'
               , success : function() {
                    $('p').append('You\'ve voted successfully!
');
               }    
        }); 
    }); 
});

As you can see on the demo here now the button cannot be clicked more than once.
Demo

Cookies + unbind()
There is a problem however. After reloading the page the event is attached again, so the user can click on the button once more. The obvious solution is to combine both the cookie and the unbind() as shown in the following pseudo code.
$(document).ready(function() {
    if (cookie is not set) { 
        $('input').click(function() {
            $('input').unbind();
            $.ajax({ url : 'http://stoimen.com/projects/jquery.unbind/example1.php'
                   , success : function() {
                        $('p').append('You\'ve voted successfully!
');
                        set cookie
                   }    
            }); 
        });
    } 
});


Related posts:

jQuery live() vs bind() performance 
Remove DOM Element with JQuery 
Event driven programming with jQuery – (part 2). Events in jQuery. 
Event driven programming with jQuery – (part 3). What is a module? 


]]>
			/2011/04/05/jquery-unbind/feed/
		1
		
		
		
		/2011/02/25/how-to-collect-the-images-and-meta-tags-from-a-webpage-with-php/
		/2011/02/25/how-to-collect-the-images-and-meta-tags-from-a-webpage-with-php/#comments
		Fri, 25 Feb 2011 09:23:50 +0000
		
				
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		

		/?p=2216
		Continue reading How to Collect the Images and Meta Tags from a Webpage with PHP →


Related posts:

How to Sanitize User Input in PHP? 
HTML Tags: <base> 
Automatically Upload Images with PHP Directly from the URI 
Download Images with PHP 


]]>
				Meta Tags and the Facebook Example
You’ve definitely seen the “share a link” screen in Facebook. When you paste a link into the box (fig. 1) and press the “Attach” button you’ll get the prompted cite parsed with a title, description and possibly thumb (fig. 2). This functionality is well known in Facebook, but it appears to be well known also in various social services. In fact Linkedin, Reddit, Dzone‘s bookmarklet use it.

Fist thing to notice is that this information, prompted by Facebook, is the same as the meta tag information. However there is a slight difference.

Facebook prefers for the thumb the image set into the <meta property=”og:image” … />. In the case above this tag appears to be:


And the image pointed in the SRC attribute is exactly the same as the one prompted by Facebook (fig. 3).

First thing to note is that the real thumb is bigger than the thumb shown in Facebook, so Facebook resizes it and the second thing to note is that there are more meta tags of the og:… format.
Meta Tags and The Open Graph Protocol
By default meta tags contain various information about the web page. They are not visible in the webpage, but contain some info about it. The most common meta tags are the title, description and keywords tags. They of course contain the title of the page, not that this can be different from the <title> tag, a short description of the page and some keywords describing the content of the page. They are well known also because the search engines make use of them when trying to collect information about the page and the process of SEO passes through it.
However the default HTML meta tags cannot contain everything. Thus for example you cannot point the preferable thumbnail for a webpage. The solution is the Open Graph Protocol. It comes with meta tags that can contain more and more valuable info. Such a tag is the og:image meta tag. Note that all the Open Graph (og) meta tags are defined by the og: prefix before the entity name. Thus og:image comes for images, while og:longitude for geo positioning.
That’s really useful, but how you can read them?
PHP, Meta Tags and Regexps
When you try to read information from a webpage source the first possible path is by using regular expressions. However PHP is smart enough to offer you some useful functions. Such a function is get_meta_tags(). As you may guess this method reads the meta tags by given URL.
$a = get_meta_tags('http://vimeo.com/10758212');
var_dump($a);

However this method can’t read Open Graph tags. So finally you’ve to use some regexps.
preg_match('//', $source, $matches);

Now you can grab the og:image tag. And even more – grab every image (<img>) from that page.
preg_match_all('/

Related posts:

How to Sanitize User Input in PHP? 
HTML Tags: <base> 
Automatically Upload Images with PHP Directly from the URI 
Download Images with PHP 


]]>
			/2011/02/25/how-to-collect-the-images-and-meta-tags-from-a-webpage-with-php/feed/
		6
		
		
		
		/2011/02/11/from-svg-to-geo-coordinates-a-complete-guide/
		/2011/02/11/from-svg-to-geo-coordinates-a-complete-guide/#comments
		Fri, 11 Feb 2011 08:30:11 +0000
		
				
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		

		/?p=2174
		Continue reading From SVG to Geo Coordinates – A Complete Guide →


Related posts:

You should not insert an “a” tag in another “a” tag! … 
Computer Algorithms: Data Compression with Relative Encoding 
Scroll an IFRAME Content to a Predefined Position 
How to Collect the Images and Meta Tags from a Webpage with PHP 


]]>
				Why This Task Is Not Trivial?
First of all what do we have? There is a vector shape, which may represent a map, which we’d like to convert into a GEO map. In other words there is a SVG file containing the source shape, that you’d like to convert in geoJSON or whatever collection of geo points. This is not trivial, of course, first of all because there’s no an algorithm or automation that can do this, and because everybody knows that the resulting map will be only approached, but will never be so accurate as the vector shape. This is because in a vector shape you may contain Bézier Curves, which I’ll show a little bit later in this post, that are difficult to represent in geo coordinates.
So the first task will be to find an approaching algorithm. However there are two things that are optimistic:

You can’t effectively represent Bézier curves in geo coordinates, but even if you could do it there’s no practical need, because the collection of geo coordinates will be huge and this will slow down you’re application. Remember that geoJSON is yet again possibly used by your browser and the amount of geo points will be proportionally slowing down the app.
As you may know Google’s visualization map is representing the World’s countries again with quite approached maps. Take a look at the following image – the country borders are quite sharpened:


So far we know that we need an approaching algorithm that will convert vector lines and possibly curves in geo coordinates, but before we proceed we’ve to understand the SVG format.
SVG Format and Possible Approaches
Let me give you an example of a SVG file. By opening such file with a text editor you can see the file format:
M76.484,153.703c-0.86-0.27-3.816,0.199-4.002-1.055
	c-0.049-0.328-1.109-1.799-1.512-1.824c-0.647-0.04-5.182,1.896-5.219,2.013c-0.051,0.161,0.928,0.627,0.319,0.832
	c-0.028-0.003-0.716-0.36-0.816-0.334c-0.13,0.034-0.262,0.834-0.363,0.771c-0.176-0.24-0.179-0.48-0.007-0.719
	c-0.986-0.764-0.345,0.764-0.526,0.764c-0.771,0,0.184-0.849-0.675,0.037c-2.13-0.433-2.267-0.756-4.129-2.754
	c-1.329-1.42,0.383-8.158-1.571-8.535c-2.223-3.153-6.413-3.037-8.806-5.037c0.107-0.278,0.201-0.563,0.282-0.853
	c0.369,0.372-4.136-0.768-4.373-0.862c-1.498-0.604-3.574-0.133-4.656,0.355c-0.028-1.22,0.171-2.329-0.593-3.027
	c0.588-2.548-0.652-4.752-2.98-4.199c-0.443-1.354,0.142-0.868-1.171-1.483c-0.154-2.069,2.703-7.729-2.239-8.185
	c2.009-3.137-6.201-0.985-6.627-3.125c-0.14-0.703-5.574,1.563-5.752,0.192c-0.39-2.987-4.411-2.185-5.371-3.372
	c0.518,0.641-6.067,1.078-5.645,0.85c-0.118,0.063-1.38,5.328-1.307,4.994c-0.457,2.076,3.774,9.01,2.893,9.625
	c-0.495,0.347-3.159,6.972-1.295,8.588c-0.59-0.512,2.894-0.209,3.163-0.129c1.333,0.396,3.091,1.66,3.469,3.176
	c0.52,2.486-0.793,2.359-2.357,3.013c-0.658,0.274-2.289,6.779-2.368,7.461c-0.319,2.747-1.413,4.468-1.264,7.483
	c0.098,1.984-0.368,2.326,0.891,4.287c1.933,3.004,2.018,2.57,2.178,5.813c-0.127,1.556-1.742,3.565-1.568,5.388
	c0.074,0.77,0.485,2.028,0.235,2.795c-0.286,0.875-1.936,1.557-1.573,2.627c3.253-2.051,4.522,3.092,8.168,2.83
	c0.958-0.069,3.996,1.508,4.536,1.938c1.437,1.12,2.39-1.618,3.232-1.618c-1.037,0,3.461,2.315,2.95,1.774
	c0.828,0.873,3.852-0.123,5.026,0.304c2.416,0.881,6.011-1.386,7.227-2.174c1.616-1.048,3.15-1.38,4.396-2.816
	c0.639-0.737,2.375-4.448,3.254-4.366c0.354,0.032,0.59,1.01,1.06,0.652c0.163-0.126-1.075-2.664,0.689-2.664
	c0.935,0,4.283-2.113,3.799-3.344c-1.384-3.521,4.799-1.365,6.683-1.926c0.335-0.1,7.816-8.23,7.865-8.641
	C70.216,157.721,77.5,154.025,76.484,153.703C76.247,153.629,76.721,153.777,76.484,153.703z

This text represent this shape:

First thing to notice is there are things quite different from the HTML markup. Of course this things are noticeable. There is a M, c and z where the first two are followed by some numbers. What are these characters? Well lets see at W3.org. There are lots of SVG specific commands, but we need to understand only few of them.
1. M (absolute) m (relative) – moveto
Start a new sub-path at the given (x,y) coordinate.           M (uppercase) indicates that absolute           coordinates will follow; m (lowercase)           indicates that relative coordinates will follow. If a moveto  is           followed by multiple pairs of coordinates, the subsequent  pairs           are treated as implicit lineto commands. Hence, implicit  lineto           commands will be relative if the moveto is relative, and           absolute if the moveto is absolute. If a relative moveto           (m) appears as the first element of the path,           then it is treated as a pair of absolute coordinates. In this           case, subsequent pairs of coordinates are treated as relative           even though the initial moveto is interpreted as an absolute  moveto.
2. Z or z – closepath
Close the current subpath by drawing a straight line from the         current point to current subpath’s initial point. Since the Z  and z         commands take no parameters, they have an identical effect.
3. C (absolute) c (relative) – curveto (x1 y1 x2 y2 x y)+
Draws a cubic Bézier curve from the current         point to (x,y) using (x1,y1) as the control point at the         beginning of the curve and (x2,y2) as the control point at         the end of the curve. C (uppercase)         indicates that absolute coordinates will follow;         c (lowercase) indicates that relative         coordinates will follow. Multiple sets of coordinates may         be specified to draw a polybézier. At the end of the         command, the new current point becomes the final (x,y)         coordinate pair used in the polybézier.
4. L (absolute) l (relative) – lineto (x y)+
Draw a line from the current point to the given (x,y)         coordinate which becomes the new current point.         L (uppercase) indicates that absolute         coordinates will follow; l (lowercase)         indicates that relative coordinates will follow. A number         of coordinates pairs may be specified to draw a polyline.         At the end of the command, the new current point is set to         the final set of coordinates provided.
1. Bézier Curves
So far we know that the especially the c command draws a curve – a Bézier curve. But what is a Bézier curve anyway? Here’s a little explanation you can find at Wikipedia. Here’s an example of a cubic Bézier curve:
First thing we see is that here there are four points – p0, p1, p2, p3. The curve between p0 and p3 is defined by them and the two control points – p1 and p2. To be more precise let me show you an animation of how this curve is constructed:

This is the way the red line is constructed with the help of the green and blue lines, and of course the points p1 and p2. The result is a smooth line that’s often used in animation and shapes. This is our case. As you’ve seen the example above is constructed only with curves.
Before we proceed let me say that there are lots of types of Bézier curves not only cubic. Here they are:
1.1. Linear Bézier curve

1.2. Quadratic Bézier curve
1.3. And event Higher-order  curves:

2. What You Need To Know About The SVG Format
However the most important thing to know is the heart of SVG curve format. First you MOVE to a point with the M command. Lets see how does it look in our case:
M76.484,153.703 – This simply means: move to the point with coordinates (76.484, 153.703)
The next step is to draw a curve. We’ve seen that a cubic curve is defined by four points – p0, p1, p2 and p3, but what we have in the SVG format:
c-0.86-0.27-3.816,0.199-4.002-1.055
Here there are only three points (-0.86, -0.27), (-3.816, 0.199), (-4.002, -1.055) – not four. Well these are only the last three points, the first one is the one defined by the M command. Next thing to know is that the M command defines an absolute point in the canvas of the SVG file, while the c (shouldn’t be mistaken with C) is a relative curve. This means that if the p0 is the point (76.484, 153.703), the p1 point is relative to it with small difference in coordinates – (-0.86, -0.27).
However the most important thing to know is that after drawing the curve:
At the end of the         command, the new current point becomes the final (x,y)         coordinate pair used in the polybézier.
This is extremely important! This means that the last point of this curve becomes the p0 of the next curve, and the three points of the second curve, in our case:
c-0.049-0.328-1.109-1.799-1.512-1.824
are relative to the last (x, y) of the previous curve – (-4.002, -1.055). Without this you cannot convert any SVG shape into geo coordinates.
3. Lines Instead of Curves
OK, I said about an approaching algorithm, that is only approaching the curved vector shape. This means that I can simply replace the curves with lines. Thus I’ve to change to SVG file format from using the c command to the l command, as l is also relative. The curve:
M76.484,153.703 c-0.86-0.27-3.816,0.199-4.002-1.055
will become
M76.484,153.703 l-4.002-1.055
and so forth. This will result into the more sharpened shape:
However this is again a SVG file and no Geo coordinates are present. To end up with this there’s a tiny PHP script that collects all the last pairs from the c commands and converts them to Geo Coordinates relative to the World’s center – (Lat, Lon) = (0, 0).
 $v) {
    // get the new relative point
    $s = $v;

    // a really dummy regex to find the last pair
    preg_match('/(-?\d{1,2}\.?\d{0,3}),?(-?\d{1,2}\.?\d{0,3}),?(-?\d{1,2}\.?\d{0,3}),?(-?\d{1,2}\.?\d{0,3}),?(-?\d{1,2}\.?\d{0,3}),?(-?\d{1,2}\.?\d{0,3}),?/', $s, $m);


    // if the array is not empty
    if (!empty($temp)) {
        $m[5] = $temp[0]+$m[5];
        $m[6] = $temp[1]+$m[6];
    }

    echo '[', ($m[5]), ', ', ($m[6]), '],
';

    // save the last point
    $temp = array($m[5], $m[6]);
}

Final Adjustments
I guess you don’t need any shape in the World’s center as you may not need it in the same scale. There are two things to do. First you can scale the map by multiplying by a factor every point:
// a really dummy regex to find the last pair
    preg_match('/(-?\d{1,2}\.?\d{0,3}),?(-?\d{1,2}\.?\d{0,3}),?(-?\d{1,2}\.?\d{0,3}),?(-?\d{1,2}\.?\d{0,3}),?(-?\d{1,2}\.?\d{0,3}),?(-?\d{1,2}\.?\d{0,3}),?/', $s, $m);

    // multiply by some factor
    $m[5] *= 0.05;
    $m[6] *= -0.05;

    // if the array is not empty
    if (!empty($temp)) {
        $m[5] = $temp[0]+$m[5];
        $m[6] = $temp[1]+$m[6];
    }

and than you can move the shape all over the world by adding some offset to the resulting point:
echo '[', ($m[5]-38.9), ', ', ($m[6]+10.7), '],
';

Further Researches
Here we just substitute the curves with lines, which is the most primitive approach. What about substituting each curve with corresponding two lines, or three lines. The resulting shape will be far more accurate in compare with the source “curved” shape. So there are still lots of things to be done. However this may help you do the job.

Related posts:

You should not insert an “a” tag in another “a” tag! … 
Computer Algorithms: Data Compression with Relative Encoding 
Scroll an IFRAME Content to a Predefined Position 
How to Collect the Images and Meta Tags from a Webpage with PHP 


]]>
			/2011/02/11/from-svg-to-geo-coordinates-a-complete-guide/feed/
		3
		
		
		
		/2011/02/09/wanted-onfocusonblur-why-they-dont-work-always/
		/2011/02/09/wanted-onfocusonblur-why-they-dont-work-always/#respond
		Wed, 09 Feb 2011 14:11:48 +0000
		
				
		
		
		
		
		
		
		
		
		
		
		

		/?p=2160
		Continue reading Wanted – onfocus/onblur. Why They Don’t Work Always! →


Related posts:

How to Sanitize User Input in PHP? 
jQuery live() vs bind() performance 
2xjQuery: Select a Selector 
Google Closure Compiler doesn’t work?! 


]]>
				On Focus

Perhaps you think of onfocus and onblur events as a default behavior existing in any web page. This is not quite true! Onfocurs and onblur are well known in web developing (js) and are fired, of course, when the user tries to point something or leaves some element. Onfocurs is fired when the user either goes to an element with the Tab button on with the mouse. When the element is on focus, evidently, the onfocus event is fired. Actually you can see which element is on focus, like an anchor or input, when the element is outlined by the browser by default. In the same scenario, when some element has been on focus and than the user switches to another element, the onblur event is fired. Thus you may guess that this element is no longer on focus.
This in general are the onfocus/onblur events. The interesting part is that by default are known as built-in events in every page, but that is wrong.
Where Are My Events?
A typical use case is to take the code from some web page, where you’re sure this works perfectly, you can focus and blur element with no obstacle, but once you paste it inside your markup everything’s going wrong. Imagine you’ve the following markup (a typical search box text):


This works perfectly until you paste it to your site. And than nothing works correctly. Why? Where’s the problem?
Make Them Work
Actually the problem isn’t hiding somewhere in the markup above. It’s in the HTML definition. There are lots of web pages using strict HTML definition, that looks like this:



	...


	...

while you’ve to use the pure HTML definition to make onfocus/onblur work.
You’ve to switch to:


	...


	...

Than you can continue using these useful events!

Related posts:

How to Sanitize User Input in PHP? 
jQuery live() vs bind() performance 
2xjQuery: Select a Selector 
Google Closure Compiler doesn’t work?! 


]]>
			/2011/02/09/wanted-onfocusonblur-why-they-dont-work-always/feed/
		0
		
		
		
		/2011/01/27/few-thoughts-on-web-video/
		/2011/01/27/few-thoughts-on-web-video/#comments
		Thu, 27 Jan 2011 09:19:00 +0000
		
				
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		

		/?p=2145
		Continue reading Few Thoughts on Web Video →


Related posts:

Video sites must use … mp4 and only mp4! 
Does Firefox play mp4 h.264 within the HTML5 video tag? 
How to Make MP4 Progressive with qt-faststart 
Reading GPS Latitude and Longitude from Image and Video Files 


]]>
				On Air


It’s really full of video sharing websites out there, but in fact almost all of them use Flash player to display their video files. This is the reality now, but with the coming of HTML5, perhaps the things are changing a bit!
First of all if you start dealing with video sharing platforms the first thing to do maybe is to find a good Flash (.flv) player and to convert all your video content in FLV.
Few things to know with Flash video players:

The user can play those videos only after installing the Flash Plugin to his browser;
The video must be encoded either in FLV (or FLash Video) or in MPEG-4 with h.264 codec. Only than the Flash player can play it;

The HTML5, which can be described as variety of new “things” in the HTML comes with a native <video> tag. Something like the <img> tag where you can just point the source of the image in the src attribute.
First Question – How Does it Look Like?
To get more fluent with the <video> tag you must simply thing of it as a “complex” <img> tag. You just point to the video and the browser will do the rest. To be more exact let me send you to the w3schools page, but the important thing as they say:
Until now, there has never been a standard for showing video on a web  page.
However to start from somewhere here’s a little snippet showing you the basic, but very basic usage of the HTML5 video tag:
<video src="path_to_the_video" controls="controls"></video>

Second Question – Is Every Video Playable?
But of course not! There are different browser – different video formats. Currently there are three formats, supported by the different browsers.

H.264
VP8
Theora

Note that these are video codecs and a video files does not consists of only a video codec, but also of an audio codec. This makes the video file a container of several things. As you may know already H.264 is used with MPEG-4 video format, which results in .mp4 extended files, Theora is used in OGG, which are all those .ogg files out in the web, and finaly VP8 is used in WebM … or in .webm videos.
First thing to know FLV files (.flv) can also be encoded with H.264. Actually Flash player has a h.264 decoder so this makes it possible to play both .mp4 and .flv files encoded with H.264.
Second thing to notice – where are those .webm files? I’ve never seen them!
Third Question – What is WebM and VP8?
Behind WebM and VP8 is Google. This is a new video format based again on Theora. Actually it pretends to be as good in compressing as H.264, which by the way is meant to be the best. But let me take a look at Nettuts+:
VP8, a relatively new codec, is the brainchild of On2 — the same guys  behind Theora. Google acquired On2 in 2010, and opened up all the  underlying patents for the codec into the public domain.
WebM, the container of choice for most current browsers, utilizes VP8  for compressing its video content and Vorbis for its audio. It produces  content similar in quality to H.264.
It is completely royalty free, now and for the future. On the  downside, though, it has limited hardware decoding support as well as  third party device/mobile support.
Final Question – How Can I Convert a Video in WebM?
This answer is given by this article, where as it is said after having the ffmpeg version >= 0.6 you simply can use this command:
ffmpeg -i girltalk.mp4 -f webm -vcodec libvpx -acodec libvorbis -aq 90 -ac 2 girltalk.webm

Conclusion
It’s interesting to see what will happen one day. There is going to be either a harmonious life in the web video field or the codecs/formats will be as much as the browser? Who knows?

Related posts:

Video sites must use … mp4 and only mp4! 
Does Firefox play mp4 h.264 within the HTML5 video tag? 
How to Make MP4 Progressive with qt-faststart 
Reading GPS Latitude and Longitude from Image and Video Files 


]]>
			/2011/01/27/few-thoughts-on-web-video/feed/
		1
		
		
		
		/2010/11/03/how-to-overcome-zend_cache_frontend_pages-problem-with-cookies/
		/2010/11/03/how-to-overcome-zend_cache_frontend_pages-problem-with-cookies/#comments
		Wed, 03 Nov 2010 14:19:25 +0000
		
				
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		

		/?p=2024
		Continue reading How to Overcome Zend_Cache_Frontend_Page’s Problem with Cookies →


Related posts:

A Memcached Zend_Cache 
Theory of caching. Zend_Cache & Zend Optimizer. 
Setting Up Global Cache in Zend Framework 
Zend Framework: Cache Database Table Schemes 


]]>
				Zend_Cache_Frontend_Page
First of all there are several things to know about Zend Framework and caching. Whenever you work on a big web application caching is one of the mostly used mechanisms of speeding up the app and improve user performance. In general the task and the solution are pretty simple and natural.
As the application grows up the visitors become more and more impatient about what they receive. A single page is becoming slower and slower and the result is painful. First of all every time a user hits a page the application server uses the web server, a script interpreter, a database server and potentially the file system. But that’s not all. After all this output is generated on the server, as HTML in the most cases, it is sent to the client where again CSS and JavaScript engines parse and execute them.
In this scenario it’s easy to imagine how many time is spent. While there are several techniques to optimize the client side by optimizing JavaScript, CSS and the static images used for the design of the site, here I’m going to talk more about the backend.
Beside the Optimization
Let’s assume we’ve one of the very used combination between Apache (as a webserver), PHP (as server scripting language) and MySQL (as database server). Here you can choose to optimize all three of them. However beside the optimization of them one of the most simple steps you can do is to cache the output generated by these three branches of your web app.
Caching the Content
In fact you can cache only single parts of the whole process. For instance you can cache only the result returned by some slow database query. Let’s imagine a query takes about 2 seconds to execute. Now you can cache the result into a file and during the cache is active, i.e. it has not expired, the application takes it from a file stored somewhere in the file system.
In a typical Zend Framework scenario you can first setup the frontend and backend options of the cache.
$frontendOptions = array(
	'lifetime'                => 600, // in seconds - this is 10 seconds
	'automatic_serialization' => true,
);
$backendOptions = array('cache_dir' => 'cache/');
$cache = Zend_Cache::factory('Core', 'File', $frontendOptions, $backendOptions);
		
$cacheKey = md5('mykey');

if (!$cache->load($cacheKey)) {
	$slowQueryResult = $article->fetchAll();
	$cache->save($slowQueryResult, $cacheKey);
} else {
	$slowQueryResult = $cache->load($cacheKey);
}

You can setup different options here by setting up the cache directory, lifetime, etc.
Note that the cache directory must exists and with write permissions and Zend Framework doesn’t create it for you and will throw error.
The problem here is that now you cache only part of the generated content and in many cases this is still too slow for most of the users. However all the work (in most of the cases) of the web server, the script interpreter and the database server result in a simple HTML output. What if you have this output generated or cached for you and when the user hit the page the server will return this pre-generated code?
This is indeed very fast, because it’s similar to return a text file, as the HTML is simply formatted text.
Caching the Entire Page
Before I proceed, I’d like to say that I work with Zend Framework 1.9.x. Now in the latest versions of ZF there are new mechanisms of caching the output even Zend_Cache_Frontend_Page works fine on them.
You can simply setup the page cache within few simple lines of code:
$fo = array(
    'lifetime' => 600,
    'regexps' => array(
        '^/' => array(
	'cache' => true,
         'cache_with_cookie_variables' => true,
        ),
    )
);

$bo = array(
    'cache_dir' => 'cache/'
);

$cache = Zend_Cache::factory('Page', 'File', $fo, $bo);
$cache->start();

However my advise is to place this code as high as possible, because this will cache everything generated as output. It’s a good practice if you place this even in the bootstrap before you make the connection with the database. Actually you don’t need a database connection when you’ve to return a simple text(html) file.
This will improve your app’s performance a lot!
However there are few things to know. When you setup the cache to work even with cookie variables, you can see that hitting the page with different browsers Zend Framework will generated different cache pages. This is quite useless because than you don’t have any benefit of caching the content.
First of all let me say that THIS IS NOT A BUG! of ZF. Simply the framework will use the cookie variables to generate the cache key. It’s obvious that different browsers, even more different users, will have different cookie set and the framework will generate different cache keys for them.
Thus you’ve to change the setting to generate the cache key from cookie variable by explicitly set this option to false:
$fo = array(
    'lifetime' => 600,
    'regexps' => array(
        '^/' => array(
		 'cache' => true,
         'cache_with_cookie_variables' => true,
         'make_id_with_cookie_variables' => false,
        ),
    )
);

$bo = array(
    'cache_dir' => 'cache/'
);

$cache = Zend_Cache::factory('Page', 'File', $fo, $bo);
$cache->start();

Note that in this example we cache every single page generated by the framework explained in the regexps. This is not so good especially when the users have the possibility to login and to see customized content for them, so you can be careful what you cache.
A typical problem that this solution solves is when your application uses Google Analytics. As you may know Google Analytics sets up a cookie every time when an user hits the page, so every time the framework will generate a different cache for him and in result he won’t see any benefit and performance improvement from your site.

Related posts:

A Memcached Zend_Cache 
Theory of caching. Zend_Cache & Zend Optimizer. 
Setting Up Global Cache in Zend Framework 
Zend Framework: Cache Database Table Schemes 


]]>
			/2010/11/03/how-to-overcome-zend_cache_frontend_pages-problem-with-cookies/feed/
		3
		
		
		
		/2010/09/24/2xjquery-select-a-selector/
		/2010/09/24/2xjquery-select-a-selector/#comments
		Fri, 24 Sep 2010 08:23:58 +0000
		
				
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		

		/?p=1989
		Continue reading 2xjQuery: Select a Selector →


Related posts:

jQuery vs. pure JavaScript 
cancel bubbling on element click with jQuery 
$.ajax in jQuery 
jQuery – accessing a child element 


]]>
				Selectors in jQuery

If you’re familiar with jQuery you should already know what are selectors and how they work. However we’re used to get some DOM element with a specific selector, but actually sometimes you cannot select directly what you need. This is especially true when mixing more than one JavaScript libraries. In my case OpenLayers generated a vector layer and jQuery was supposed to change the vectors fill-color property.

With the simple $(‘path’) I easily got all vectors in the current document, but the problem was that I took them as text. Thus it came to me to use nested jQuery – $($(‘selector’));
To describe what actually happened in my case, let me show you a breve example.
Example
Here’s a short HTML markup:
text text


With jQuery I can select both the DIV and SPAN with the simple $(‘div’) and $(‘span’), but just for the example lets assume I’ve only the inner text of the DIV tag:
$('div').html();

That was the case in the OpenLayers/jQuery problem. Now I can easily use another jQuery selector:
$($('div').html());

This will return the same as $(‘span’) – a jQuery object.

Related posts:

jQuery vs. pure JavaScript 
cancel bubbling on element click with jQuery 
$.ajax in jQuery 
jQuery – accessing a child element 


]]>
			/2010/09/24/2xjquery-select-a-selector/feed/
		1