I’m writing this while watching Stephen Graham making a statement as Al Capone in Boardwalk Empire. So I shall make one too. Now about that fellah’, the INFAMOUS Internet Explorer 6. A friend of mine recently showed me a site of his making where he directs the IE6 users to a deadend page where he encourages them to upgrade. Sweet. I totally agree. Then he tells me that IE6 is a plague. It sure is, still agreeing. Then that it’s been alive that long because of all the conciliatory developers like him and me that worked, harder an harder as new standards like transparent PNGs came along, to ensure IE6 compatibility. And that’s where I disagree.

He sure is right if you don’t look at the big picture. IE6 couldn’t have stayed alive for that long without us, hard working developers. But if you go a bit deeper, you’ll agree that us, hard working developers, are taking “orders” from project managers, who take them from account managers, who take them from clients. And for a client, as well as for an account manager, when still 30% of the population uses IE6, you’re faced with the prisoner’s dilemma: will you refuse to support it knowing that you competitor might? Probably not.

But the rabbit hole goes deeper than that. Why was 30% of the population stuck with IE6 not so long ago? To me, it’s a combination of two major factors: the Windows Genuine Advantage, and Windows Vista failure.

According to Wikipedia, “the Windows Genuine Advantage is an anti-piracy system created by Microsoft that enforces online validation of the licensing of several recent Microsoft Windows operating systems”, starting with Windows 2000 Pro, and including Windows XP and Windows Vista. While I can’t be against their motives — they’re a proprietary software business, they’re in for the money, and that’s alright, we need them as much as we need open source if you ask me, but that’s another debate — I’m against the fact that they denied browser upgrades to pirate Windows installation. Sure, these users are pirates, outlaws. They don’t deserve upgrade. But we do! That decision contributed to two things: keeping the net unsafe and slowing standards adoption by preventing a majority of dummy users (read: not smart enough to get they should install FireFox or Chrome, and that’s still fine, it’s not their fault, the internet success resides in its mass adoption, not it’s adoption by the early adopters, but again, that’s another debate) to seamlessly upgrade to a safer and more modern browser.

The Windows Vista failure was just an aggravating factor. Until Windows 7 started shipping late 2009 (and even after that, until people realized it was a lot better than Vista), people where still ordering computers with Windows XP. Unfortunately for us, web developers, that included “cheap” people who wanted to save a few (hundred) bucks on a (not so cheap) operating system. Internet Explorer 6.0 was released on August 27th, 2001. Almost 10 years ago. But people were still having fresh Windows XP installs no more than 2 years back because Vista known to be crap.

So yes, in the end, we web developers are responsible for not refusing to build web sites compatible with an obsolete and insecure browser. But to me, the whole IE6 mess we’ve all got to cope with is Microsoft fault. Not because they tried to enforced their right to be paid for copy of their operating system that’s being installed, but because they did so regardless of internet safety and standards adoption. The net would be so much farther without that decision. But we’re where we’re at, and IE6 doesn’t have enough market shares to rule the world anymore. Google opened the march not long ago. Please, let IE6 rest in peace, so we can get rid of IE7 while hoping that IE9 will be a bliss. Hate it? Drop it, for the sake of us all.

The MP4Info class is a simple extensible PHP class reading the MP4 container’s frames (called boxes) to get various information, namely the video duration, the video/audio codecs, the width and the height, as well as the embedded XMP meta data.

The F4V format is better than the FLV format in many aspects:

• Better compression ratio
• Better quality at similar bit rates
• Open source compressors available, through ffmpeg and libh264 (Flash 8 On2 VP6 codec is proprietary)
• Decoding H.264 is a lot less CPU intensive on the host computer than decoding On2 VP6

It’s quite easy to use: simply load the JavaScript file at the end of your HTML file, and have it point on your JPEG image to an default X/Y position.

<script language="javascript" type="text/javascript" src="watermarker.js"></script>
<script language="javascript" type="text/javascript">
setWatermark("images/mywatermark.jpg",-4,-5);
</script>

And voila, you can toggle your JPEG overlay, move it around, change it’s alpha transparency and reset it to its default position.

A small demo is available here.

watermarker.js (7.8k)

There are two solutions to this problem, but unfortunately, the inefficient one is often used by programmers, due to the lack of time, or to inexperience.

Imagine, for the sake of clarity, a simple dataset that goes as follow:

Array
(
    [0] => Array
        (
            [name] => Node 0
            [parent] => null
        )

    [1] => Array
        (
            [name] => Node 1
            [parent] => 4
        )

    [2] => Array
        (
            [name] => Node 2
            [parent] => 8
        )
    ...

The common approach is to use a recursive function that finds all the root nodes, then all their sub nodes, then all the sub nodes of their sub nodes, and so on.

function mapTree($dataset, $parent=null) {
	$tree = array();
	foreach ($dataset as $id=>$node) {
		if ($node['parent'] !== $parent) continue;
		$node['children'] = mapTree($dataset, $id);
		$tree[$id] = $node;
	}

	return $tree;
}

The problem with this method is that, in terms of calculation, the problem complexity is exponential: you need to search all the dataset for children nodes for each node. Thus, building a tree of 1,000 nodes is 100 times more complicated than building a tree of 100 nodes, because you will have to search 10 times more nodes, 10 times more often.

A more efficient way to build the tree is to use dereferencing. This allows to map the whole tree in a single pass, without recursion. The problem complexity then becomes linear rather than exponential, and 10 times more nodes equals to 10 times more time (although the time required by PHP to find a specific index of an array isn’t taken into account here).

function mapTree($dataset) {
	$tree = array();
	foreach ($dataset as $id=>&$node) {
		if ($node['parent'] === null) { // root node
			$tree[$id] = &$node;
		} else { // sub node
			if (!isset($dataset[$node['parent']]['children'])) $dataset[$node['parent']]['childs'] = array();
			$dataset[$node['parent']]['children'][$id] = &$node;
		}
	}

	return $tree;
}

The full PHP code of examples can be found below:

tree.zip (1.2k)

Tree image from Wikipedia.org

But so much things are cacheable: pages, images, CSS, JavaScript, even many REST web services! Yes, even in this social web era where content changes faster than you can write, there’s still plenty of slow changing information, such as home pages, or lists of countries, regions and cities.

Efficiently using caching translates into:

• Better response and loading time
• Decreased load on the server
• Better user experience

This article aims to present a simple explanation of the HTTP protocol and proper use of HTTP caching.

The HTTP Protocol basics

The HTTP protocol is a communication scheme between two or three actors: the server, the browser, and the often forgotten proxy.

First, to see the implicated headers, let’s have a look to the typical request …

GET / HTTP/1.1
Host: www.tommylacroix.com
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
If-Modified-Since: Thu, 17 Jul 2008 16:11:24 GMT
If-None-Match: "a9432-fc1b28423-cb122da"
User-Agent: Mozilla/5.0 (...) Gecko/2008052906 Firefox/3.0

… and response …

HTTP/1.1 200 OK
Date: Thu, 17 Jul 2008 16:11:24 GMT
Expires: Wed, 11 Jan 1984 05:00:00 GMT
Etag: "a9432-fc1b28423-cb122da"
Last-Modified: Thu, 17 Jul 2008 16:11:24 GMT
Cache-Control: private, must-revalidate, max-age=0
Vary: User-Agent
Content-Type: text/html; charset=UTF-8

<html>...</html>

Basic Caching

The response headers returned by the server give the browser and the proxy information to make caching decisions.

First, the Cache-Control header tells if the content is cacheable or not. If they’re not sent, it’s cacheable by default. Consider the following headers:

Cache-Control: public, max-age=86400

It basically says that the page is cacheable in a public scope, and that the content shouldn’t be kept in the cache without revalidation for more than 1 day (86400 seconds). The scope can be:

• public: Cacheable by browsers and proxies, even if authenticated
• Private: Cacheable by browsers only (and proxies, but only for requests from the same clients)
• no-cache: Cacheable, but revalidation is required every time.
• no-store: Not cacheable at all.

In addition, there are a few other keywords that you can add to your Cache-Control header. Keep in mind that you must separate multiple keywords by commas.

• must-revalidate: Some proxies can be configured to ignore the Expires and maxage. This keyword forces them to always act like the resource was expired.
• proxy-revalidate: Same as must-revalidate, but only for proxies.
• s-maxage: Same as maxage, but only for proxies.

Finally, for HTTP/1.0 compatibility, you should send a Pragma header when using the Cache-Control no-cache directive.

Pragma: no-cache

Browsers and proxies cache resources based on their URL. You can take advantage of this in many ways at the design stage of your web site or web application. For example, you should put non private REST web service parameters (such as language, or country) in the URL:

http://www.somesite.com/webservice/regionslist/country/usa/language/en

Browsers and proxies also store three important information about the page: the Expires, Last-Modified and Etag headers.

• The Expires header tells the browser and proxy, along with the max-age component of the Cache-Control header, until when this version of the content should be valid.
• The Last-Modified header tells the browser and proxy the date and time of the last modification to this page. It isn’t always provided.
• The Etag header, which stands for Entity Tag, gives the browser and proxy a unique identifier that describes the content it returned. If a page’s content changes, its Etag changes as well.

When you requested this page, your browser (and the proxy in the middle if there was one) did check if the page is cacheable, and since it was, stored a copy of the page associated with the URL, and the three metrics above. For subsequent requests, the server might use this cached copy.

Might? Yes, because the cached page won’t be good until the end of times. At some point, the browser (or the proxy) will check with the server if the page it has in cache is still valid. This is called revalidation, and the Expires HTTP response header along with the max-age component of the Cache-Control header control it.

When the browser or proxy revalidates a page, it sends information about its version: the Etag, and the Last-Modified the server sent when he cached the page. These are sent as If-Modified-Since, and If-None-Match, respectively:

GET /some-cachable-page HTTP/1.1
Host: www.tommylacroix.com
If-Modified-Since: Thu, 17 Jul 2008 16:11:24 GMT
If-None-Match: "a9432-fc1b28423-cb122da"
User-Agent: Mozilla/5.0 (...) Gecko/2008052906 Firefox/3.0

The server then compares this information with the Etag and the Last-Modified of the up-to-date page. If the browser’s cached copy appears to be valid, the server replies with the Expires and Etag (if available), headers, and no content:

HTTP/1.1 304 Not modified
Date: Thu, 17 Jul 2008 16:11:24 GMT
Expires: Wed, 11 Jan 2009 05:00:00 GMT
Etag: "a9432-fc1b28423-cb122da"

If the browser’s cached copy appears to be out-dated, the server replies with the whole page, as usual.

Specific Cases

Now, here comes the tricky cases. For the sake of clarity, I’ll use the following plot for the scenarios below:

« Bob, Alice and Gregg work in the same office. Their office is equiped with a caching web proxy. Bob and Gregg share the same computer with the same user (ok, not credible, so lets say it’s a under-financed non-profit organization), and Alice has her own (she’s the boss).  »

Scenario 1: Secure sessions

« Bob goes on his SuperSocial profile page, at http://www.supersocial.com/profile/. His browser and the office proxy will check if the page is cacheable, and it is. They both store a copy of the page associated with the URL.

But what happens when Gregg or Alice log in his/her SuperSocial’s profile page right after? The browser will give him/her Bob’s page! »

The Cache-Control, Expires, and the Etag headers. Setting the Expires header in the past and the max-age to zero will cause the browser to revalidate the content each time. If the cached content is valid, only a header with no content will be sent. This is slightly slower than full blown caching, but no as much as no caching at all.

We could also set the Cache-Control scope to private, as each copy of the page will obviously only be valid one user.

We should also use Etag, as the content returned for the same URL isn’t the same for Bob and for Gregg, so the Etag will change, and the browser will reload the page for Gregg.

Scenario 2: Content optimization

« The three unproductive workers browse a news site that has a wicked design. So wicked that the guys behind it had to make browser specific optimizations. Therefore, when you’re with Internet Explorer, the page is IE optimized, when you’re with Safari, some in-line CSS styles are different, and when you’re with Firefox, you get the regular page because this beauty is standard-compliant. Standard-what? Lets not digress…

When Bob and Gregg browse the site with IE from the same computer, it’s fine. But when Alice accesses it a short while after with Safari, she gets an ugly page as it’s IE optimized. The reason is, the server sent the IE version to Bob, and the proxy cached it. When Alice requests it, the proxy sends the IE page, thinking that it’s all fine. »

The Vary header. When the content of a page changes based on miscellaneous headers contained in the request, the server must tell the browser and the proxy using the Vary header. The Vary header basically says: If you cache this content, beware that if this header changes, the content might change as well, so use the URL with these fields to make sure you serve a valid version later.

Here’s an example. The request…

GET / HTTP/1.1
Host: www.tommylacroix.com
User-Agent: Mozilla/5.0 (...) Gecko/2008052906 Firefox/3.0

… and response …

HTTP/1.1 200 OK
Date: Thu, 17 Jul 2008 16:11:24 GMT
Expires: Wed, 11 Jan 2009 05:00:00 GMT
Last-Modified: Thu, 17 Jul 2008 16:11:24 GMT
Cache-Control: public, max-age=86400
Vary: User-Agent
Content-Type: text/html; charset=UTF-8

Code Snippet

Here’s a code snippet I wrote quite some time ago. It’s not pretty, but it works so I think it’s a good basic practical example.

/**
* setCacheHTTPHeaders
*
* @author	Tommy Lacroix
* @param	string	$privacy		Scope: public, private or no-cache
* @param	int	$lastModified		Unix timestamp of last page modification (optional)
* @param	int	$maxage			Maximum caching time before revalidation (optional)
* @param	string	$etag			Entity tag, page-content specific (optional)
* @return	bool				TRUE if content need to be sent, FALSE if no content need to be sent
*/
function setCachePolicy($privacy = 'public', $lastModified = false, $maxage = false, $etag = false) {
	// Sanitize privacy
	switch ($privacy) {
		case 'privacy':
		case 'public':
		case 'no-cache':
			break;
		default:
			$privacy = "public";
			break;
	}

	// Calculate expiry and max-age
	if (is_string($maxage)) { // Expiry is a string, interpret
		unset($m);
		if (preg_match('/^([0-9]+)([smhdwy])$/', $maxage, $m)) {
			$maxage = $m[1];
			switch ($m[2]) {
				case 's':	break;
				case 'm':	$maxage *= 60; 		break;
				case 'h':	$maxage *= 3600; 	break;
				case 'd':	$maxage *= 86400; 	break;
				case 'w':	$maxage *= 604800; 	break;
				case 'y':	$maxage *= 31536000; 	break;
			}
		}
	}
	if ($privacy != 'no-cache') {
		header('Expires: '.gmdate("r", time()+$maxage));
	} else {
		header('Expires: '.gmdate("r", time()-31536000));
		$maxage = 0;
	}

	// Send ETag headers
	if ($etag !== false) {
		header('ETag: "'.$etag.'"');
	}

	// Determine wheter we need to send content or not
	$outputContent = true;

	// Check ETag
	if ((isset($_SERVER['HTTP_IF_NONE_MATCH'])) && ($etag !== false)) {
		if ($_SERVER['HTTP_IF_NONE_MATCH'] == '"'.$etag.'"') {
			header($_SERVER['SERVER_PROTOCOL'].' 304 Not Modified');
			$outputContent = false;
		}
	}

	if ((isset($_SERVER['HTTP_IF_MODIFIED_SINCE'])) && ($lastModified !== false)) {
		$ifModifiedSince = strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']);
		if ($ifModifiedSince >= $lastModified) {
			header($_SERVER['SERVER_PROTOCOL'].' 304 Not Modified');
			$outputContent = false;
		}
	}

	// Remove content if output has been disabled
	if (!$outputContent) {
		// Return false: You don't need to send content
		return false;
	} else {
		// Send other headers
		header('Cache-Control: '.$privacy.', must-revalidate, post-check=0, pre-check=0, max-age='.$maxage);
		if ($privacy == 'no-cache') header('Pragma: no-cache');
		if ($lastModified !== false) header('Last-Modified: '.gmdate('r',$lastModified));

		// Return true: you need to send content
		return true;
	}
}

Conclusion

The caching HTTP headers are simple to implement, and provide a huge performance bonus. If done properly, this convert into a better user experience, as there’s less waiting, and more browsing.

Shall you like me to add other scenarios, feel free to drop me a line and I’ll see what I can do.

Further Reading

• Caching in HTTP, at W3
• HTTP Caching in Mozilla, at Mozilla

One cool sample for Simple Queue Service is the one by Justin@AWS. But (you saw it coming, I suppose), being anti-PEAR (for many reason, such as dependencies, weight, version conflicts, non-catchiness of the name, fructose intolerance, etc.), I just couldn’t leave the sample like that. Yes, this is me again reinventing the wheel.

The original library depended on two PEAR components:

• Crypt_HMAC, for authentication
• HTTP_Request, for HTTP calls

The Crypt_HMAC replacement

I replaced the Crypt_HMAC dependency by three potential routines: hash PECL, mhash, and Lance’s function (which you will never hear in a Numb3r’s episode, as it has nothing to do with a mathematician, but rather with a smart dude who posted a fully PHP HMAC code snippet in the PHP comments of the mhash() function).

The code goes as follow:

/**
 * HMAC function using hash PECL (http://ca.php.net/manual/en/book.hash.php)
 *
 * @author Tommy Lacroix
 * @param string $stringToSign
 * @return string	base64 encoded hmac
 * @internal
 */
private function hmac_hash($stringToSign) {
	return base64_encode(pack('H*',hash_hmac('sha1', $stringToSign, $this->secretKey)));
}	

/**
 * HMAC function using mhash (http://ca.php.net/manual/en/book.hash.php)
 *
 * @author Tommy Lacroix
 * @param string $stringToSign
 * @return string	base64 encoded hmac
 * @internal
 */
private function hmac_mhash($stringToSign) {
	return base64_encode(mhash(MHASH_SHA1, $stringToSign, $this->secretKey));
}

/**
 * HMAC function using Lance's function (http://ca.php.net/manual/en/function.mhash.php, see comments)
 *
 * @author Tommy Lacroix
 * @param string $stringToSign
 * @return string	base64 encoded hmac
 * @internal
 */
private function hmac_lance($stringToSign) {
    $b = 64;
	if (strlen($this->secretKey) > $b) {
		$key = pack("H*",sha1($this->secretKey));
	} else {
		$key = $this->secretKey;
	}
	$key  = str_pad($key, $b, chr(0x00));
	$ipad = str_pad('', $b, chr(0x36));
	$opad = str_pad('', $b, chr(0x5c));
	$k_ipad = $key ^ $ipad ;
	$k_opad = $key ^ $opad;

	return base64_encode(pack('H*', sha1($k_opad  . pack("H*",sha1($k_ipad . $stringToSign)))));
}

HTTP_Request replacement

I replaced the HTTP_Request dependency by two potential routines: cURL and URL wrappers.

The code goes as follow:

/**
 * Fetch with curl
 *
 * @author Tommy Lacroix
 * @param string 	$url
 * @param string 	$qs
 * @param bool		$post
 * @return array(output,httpCode)
 * @internal
 */
private function fetch_curl($url, $qs, $post) {
	$curl = curl_init();
	curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE);
	curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
	curl_setopt($curl, CURLOPT_HEADER, false);
	curl_setopt($curl, CURLOPT_POST, $post);
	curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($curl, CURLOPT_FOLLOWLOCATION, false);
	curl_setopt($curl, CURLOPT_URL, $url . (!$post ? '?'.$qs : ''));
	if ($post) {
		curl_setopt($curl, CURLOPT_POSTFIELDS, $qs);
	}

	// Execute
	$output = array();
	$output[0] = curl_exec($curl);
	$output[1] = curl_getinfo($curl,CURLINFO_HTTP_CODE);

	// Close handle
	curl_close($curl);

	return $output;
}

/**
 * Fetch with urlwrappers
 *
 * @author Tommy Lacroix
 * @param string 	$url
 * @param string 	$qs
 * @param bool		$post
 * @return array(output,httpCode)
 * @internal
 */
private function fetch_urlwrappers($url, $qs, $post) {
	$output = array();

	if ($post) {
		$opts = array(
		  'http'=>array(
		    'method'=>"POST",
		    'header'=>"Content-type: application/x-www-form-urlencoded\r\n" .
		              "Content-length: " . strlen($qs),
		    'content'=>$qs
		  )
		);
		$context = stream_context_create($opts);
	} else {
		$opts = array(
		  'http'=>array(
		    'method'=>"GET"
		  )
		);
		$context = stream_context_create($opts);
		$url .= '?'.$qs;
	}

	$output[0] = '';
	$f = @fopen($url,'r',null,$context);
	if (!$f) {
		$output[0] = '';
		$output[1] = 404;
		return $output;
	}
	while (!feof($f)) {
		$output[0] .= fread($f,1024);
	}
	$meta_data = stream_get_meta_data($f);
	if (preg_match('/^HTTP\/1\.[01] ([0-9]{3})/',$meta_data['wrapper_data'][0],$m)) {
		$output[1] = $m[1];
	} else {
		$output[1] = false;
	}
	fclose($f);

	$output[2] = 'wrappers';

	return $output;
}

Detection and conclusion

Finally, the constructor includes a small detection mechanism that selects an HMAC and a fetching function:

/**
 * Constructor
 *
 * @author Justin@AWS
 * @author Tommy Lacroix
 * @param string $accessKey
 * @param string $secretKey
 * @param string $endpoint	http://queue.amazonaws.com
 * @param string $queueName	optional
 * @return SQSClient
 */
public function SQSClient($accessKey, $secretKey, $endpoint = 'http://queue.amazonaws.com', $queueName = '')
{
	.
	.
	.

	// Select fetch function
	// Call it with $this->{$this->fetchFunction}(...)
	if (function_exists('curl_init')) $this->fetchFunction = 'fetch_curl';
		else $this->fetchFunction = 'fetch_urlwrappers';

	// Select hash function
	// Call it with $this->{$this->hmacFunction}(...)
	if (function_exists('hash_hmac')) {
		$this->hmacFunction = 'hmac_hash';
	} else if (function_exists('mhash')) {
		$this->hmacFunction = 'hmac_mhash';
	} else if (class_exists('Crypt_HMAC')) {
		$this->hmacFunction = 'hmac_pear';
	} else {
		$this->hmacFunction = 'hmac_lance';
	}

	.
	.
	.
}

The complete modified sqsClient package can be downloaded below. The original Justin@AWS package is available here.

sqsClientPHP-2.1.zip (11k)

Update (Aug 15, 2008): The AMF0Parser library has been updated to support the Date type in the metas, added among others by the “inlet media FLVTool2″ tool.

Update (Jun 11, 2009): The project has been moved to Google Code. MP4Info, an F4V file (or more genericaly MP4 file) class is also available: check out blog post and project at Google Code.

If you’ve done Flash banners or micro-sites that embed video with cue points for synchronization before, you know that it’s a pain in the arse. There doesn’t seem to be any tool around to modify the damn points once the file is encoded, so you’ve got to re-encode the file over and over to have your things synced correctly.

If you’ve tried to reverse engineer the FLV format before, you know that it’s a pain in the arse as well. The AMF0 format is anything but intuitive, and the documentation has been lacking for a long long time — although there’s apparently an SDK now. Luckily, there was OSFlash, and SabreAMF and AMFPHP that could be used as a documentation source.

If you recognize yourself, this might be your lucky day. After many hours of trial and error, I’ve finally been able to reverse engineer it, and to build a library that extract essential FLV information, reads the Meta, and allows you to write them back — including the cue points.

First, you’ll need to FLVInfo2 and the AMF0Parser libraries, below. The FLVInfo2 library has three main functions:

• getInfo, which returns information gotten from analyzing the FLV file and it’s meta. Frame rate, bit rate, audio/video codec, width, height, etc.

  (
      [signature] => 1
      [hasVideo] => 1
      [hasAudio] => 1
      [minimalFlashVersion] => 8
       => stdClass Object
          (
              [codec] => 4
              [width] => 320
              [height] => 240
              [keyframeRatio] => 0.0180537208278
              [keyframeEvery] => 55.3902439024
              [fps] => 15
              [bitrate] => 448
              [codecStr] => On2 VP6
          )
  
      [audio] => stdClass Object
          (
              [codec] => 2
              [frequency] => 22
              [depth] => 16
              [channels] => 2
              [bitrate] => 48
              [codecStr] => MP3
          )
  )

• getMeta, which returns the meta data, and the cue points

  Array
  (
      [metas] => Array
          (
              [0] => Array
                  (
                      [0] => onMetaData
                      [1] => Array
                          (
                              [duration] => 151.46
                              [width] => 320
                              [height] => 240
                              [videodatarate] => 500
                              [canSeekToEnd] => 1
                              [videocodecid] => 4
                              [audiodatarate] => 48
                              [audiocodecid] => 2
                              [framerate] => 15
                              [creationdate] => Tue Jun 17 13:06:15 2008
                              [Encoded_By] => orangetango Video Encoder
                              [Encoded_With] => orangetango Video Encoder
                              [metadatacreator] => orangetango FLV meta data writer
                          )
                  )
          )
      [cuepoints] => Array
          (
              [0] => Array
                  (
                      [0] => onCuePoint
                      [1] => Array
                          (
                              [name] => name1
                              [time] => 4.41
                              [type] => event
                          )
                  )
              [1] => Array
                  (
                      [0] => onCuePoint
                      [1] => Array
                          (
                              [name] => name1_end
                              [time] => 6.7
                              [type] => event
                          )
                  )
          )
  )

• rewriteMeta, which inputs an FLV file, meta data and cue points, and outputs a new FLV file.

As a practical example, you find the rewriteTagsForFile function in the example.php file, that rewrites the meta data and gets the cue points from a FLVCoreCuePoints XML file.

flvinfo2.php (20k , updated Dec 20, 2008)

AMF0Parser.php (16k, updated Dec 20, 2008)

example.php (12k)

Flash Video logo found on Wikipedia.

I’ve stumbled upon Rémi Prévost — who’s blog a follow more or less consistently due to the lack of time — CIOpenID module. It’s basically a CI embed of Janrain’s PHP_OpenID.

His code is great and works well. But one thing I don’t like about it is that it requires a different bootstrap file (a modified version of index.php) and a somewhat hacked version of your typical .htaccess file. The reason is, CodeIgniter annihilates the $_GET variable during initialization, because GET queries aren’t secure (ok, this is overly simplified, but you get the idea).

Being who I am, and somewhat liking to reinvent the wheel during my free time, I used a different approach. Rather than using a different bootstrap file, I rather chose to use the pre_system hook.

The installation process is quite simple:

1. Put my ciopenid.php library in your /system/application/libraries directory.
2. Create /system/application/libraries/openid, and unzip PHP_OpenID 2.x.x’s Auth directory in it.
3. Open your /system/application/config/config.php file, and make sure that hooks are enabled:

   $config['enable_hooks'] = TRUE;

4. Open your /system/application/config/hooks.php file, and add the following lines:

   $hook['pre_system'][] = array(
      'class'    => 'ciopenid',
      'function' => 'pre_system_hook',
      'filename' => 'ciopenid.php',
      'filepath' => 'libraries',
      'params'   => null
      );

To make an authentication query to an OpenID URL in $openid:

$this->load->library('ciopenid');
try {
   $redirect_url = $this->ciopenid->authenticate($openid, site_url($this->uri->uri_string()));
   header("Location: ".$redirect_url);
} catch (Exception $e) {
   die('Error: '.$e->getMessage());
}

And to get the OpenID query response:

$this->load->library('ciopenid');
if (isset($this->ciopenid->response)) {
   switch ($this->ciopenid->response->status) {
      case Auth_OpenID_SUCCESS:
         $openid = $this->ciopenid->response->endpoint->claimed_id;
         print 'Success: '.$openid;
         break;
      case Auth_OpenID_CANCEL:
         print 'User cancelled';
         break;
      default:
         print 'Internal error';
         break;
   }
}

That’s it! Ooops, here’s the file…

ciopenid.zip (3k)

Enjoy!

The object usage is quite intuitive… see for yourself:

products.find({price:{lessthan:10},
              type:{not:"Book"}});

products.update({status:"NA"},
                {manufacturer:"XZYDesign"});

products.orderBy(
   ["type",{"price":"asce"},{"quantity":"asce"}]);

I’m definitely going to find a use for this in a project soon. Meanwhile, I’m still messing with it to seize its full power. Enjoy…!

Because graphic designers care more about the look and site designers care more about accessibility and usability, it’s often the developers’ role to satisfy them both. So here are the tricks I use to make stylish controls look cool when JavaScript is activated, and usable when it is not.

Being mainly a PHP backend programmer, I hate to see the design cripple the code. Therefore, I always make sure that stylish and standard controls end up sending the same data to the server.

In this post, I cover buttons, check boxes and radio buttons, and provide a simple PHP helper that automatically generates the code. You might also want to check out the demo page to have an idea of what it looks like.

Buttons

Without a doubt, this is the easiest one. We usually use an A tag with an on-click or javascript: URL event to show buttons when JavaScript is enabled. The reason is: the input-image tag results in drawing tiny dashed borders upon click, and that kind of kills the nice shadow effects.

Note that I use the CSS image cropping technique, well described by the guys at UXD (or in french at Quantik Solutions).
So the typical JavaScript code for a button would be (I compacted the style sheet because it’s pretty long) :

<style type="text/css">
.button {
 border: 0; margin: 0; padding: 3px 0 0 0;
 background: transparent url(btn_bg.gif) no-repeat 0 0;
 display:block; width: 146px; height: 28px;
 overflow: hidden; font-family: Arial, Helvetica, sans-serif;
 text-decoration: none; font-weight: bold; color: black;
 outline: none; text-align: center;
}

.button:hover {
 background: transparent url(btn_bg.gif) no-repeat 0 -54px;
}

.button:active {
 background: transparent url(btn_bg.gif) no-repeat 0 -103px;
}
</style>

<h1>Button</h1>
<a class="button" href="javascript:submitForm('formName');"
    title="Send">Send</a>

The no-JavaScript code could be simpler:

<h1>Button</h1>
<input type="submit" name="submit" value="Send" />

Finally, the JavaScript/no-JavaScript condition display is done using document.write and the noscript tag.

<h1>Button</h1>
<script type="text/javascript">
document.write('<a class="button" href="javascript:submitForm(\'formName\');"
    title="Send">Send</a>');
</script>
<noscript><input type="submit" name="submit" value="Send" /></noscript>

Check boxes

This one is a little more complex, but not as much as radio buttons (which I kept for dessert). It is basically the same principle as the button, except that JavaScript required to control the checking and unchecking action when in stylish mode (while this was being done with CSS for the buttons).

First, we define a simple CSS for checked and unchecked states:

<style type="text/css">
.checked {
 background-color: black;
 width: 20px;
 display: inline-block;
 text-decoration: none;
 padding-left: 20px;
}
.unchecked {
 background-color: silver;
 width: 20px;
 display: inline-block;
 text-decoration: none;
 padding-left: 20px;
}
</style>

Then we create the check box, the stylish one first in JavaScript, and the standard one right after in a noscript tag.

<script type="text/javascript" language="javascript">
// Write the clickable A tag
document.write('<a id="checkbox1" href="#"
    onclick="toggleStylishCheckbox(\'checkbox1\', \'val\', \'checked\', \'unchecked\');"
    class="unchecked"></a>');
// Write the hidden input tag
document.write('<input type="hidden" name="checkbox1" id="checkbox1_val" value="" />');
</script>
<noscript><input type="checkbox" name="test1" value="val" /></noscript>
Check box label<br />

Finally, we need to include the control code that enables or disables the stylish check box, called by the on-click event.

<script type="text/javascript" language="javascript">
function toggleStylishCheckbox(id, value, classOn, classOff) {
  if (document.getElementById(id+"_val").value != "") {
    document.getElementById(id+"_val").value = "";
    document.getElementById(id).className = classOff;
  } else {
    document.getElementById(id+"_val").value = value;
    document.getElementById(id).className = classOn;
  }
}</script>

Radio buttons

This one is the trickiest: you need JavaScript to also to uncheck the previously checked control when checking a new one. Thus, we need to keep track of which group each radio buttons are, so we can quickly access its siblings.

The script goes pretty much as the check boxes one, but with a twist.You first need to define a checked and unchecked class for your radio buttons. You can use the same one as for check boxes.

Then we create the radio button, the stylish one first in JavaScript, and the standard one right after in a noscript tag.

<script type="text/javascript" language="javascript">
// Register the button in the group
var radioGroup_1;
if (radioGroup_1 == undefined) {
	// This is the first element, create the group
	radioGroup_1 = ["stylishRadio_1"];
} else {
	// This is not the first element, add to the group
	radioGroup_1.push("stylishRadio_1");
}

// Write the actual button code
document.write('<a id="stylishRadio_1" href="#"
    onclick="toggleStylishRadio(\'stylishRadio_1\', \'radioGroup_1\', \'1\', \'checked\', \'unchecked\');"
    class="checked"></a>');

// Create an input hidden for the group if it doesn't exist
if (!document.getElementById("radioGroup_1")) {
	document.write('<input type="hidden" name="set1" id="radioGroup_1" value="1" />');
}
</script>

<noscript>
<input type="radio" name="set1" value="1"checked="checked" />
</noscript>
Set 1, Option 1<br />

Finally, we need to include the control code that enables or disables the stylish radio buttons and their siblings, called by the on-click events.

<script type="text/javascript" language="javascript">
function toggleStylishRadio(id, groupName, value, classOn, classOff) {
  // Get the group
  var group = eval(groupName);

  // Process each radio button within it
  for (var i=0;i<group.length;i++) {
    // Get the class for this button
    var myClass;
    if (group[i] == id) {
      myClass=classOn;
    } else {
      myClass=classOff;
    }

    // Set the class
    document.getElementById(group[i]).className = myClass;
  }

  // Update the hidden input
  document.getElementById(groupName).value=value;
}
</script>

PHP helper

As you probably noticed, there is a lot of repetitive markup one need to include for every single check box or radio button. Duplication and maintenance is a pain, so why not let a PHP script do it?

Here’s the code for a PHP helper that handles the check boxes and the radios buttons automagically. This helper has been made for CodeIgniter, but can be used without it.

I wrote it as a demonstration, and there are many improvements to do. Including the JavaScript control scripts in a separate JavaScript file, for instance, and wrapping check box and radio buttons creation into a function to reduce the amount of repeated JavaScript code. Nonetheless, it works and can be useful as is for simple projects.

Also note that I did no helper for the buttons, as it is pretty simple, and the HTML markup varies a lot from project to project.

stylishControls_helper.phps (6 KB)