Toluu : camen design

camen design · code

code is art

Update: Added note on Android, updated the test page for updated browsers

Video for Everybody is simply a chunk of HTML code that embeds a video into a website using the HTML5 <video> element, falling back to Flash automatically, without the use of JavaScript or browser-sniffing. It therefore works in RSS readers (no JavaScript), on the iPhone / iPad (don’t support Flash) and on many, many browsers and platforms.

If you’ve arrived here

Website Optimisation MeasuresJune 26

How to Centre and Layout Pages Without a WrapperMarch 31

The number one suggestion I see from the proprietor of html5gallery.com to submitters is not to use the “<section>” element as a glorified “<div id="wrapper">”. Here, I shall demonstrate that “<body>” is already a wrapper and can be hacked to achieve some pretty remarkable layout and clean code!

Let me just repeat that. The body element is already a wrapper. It can have a height, width, border, drop-shadow; you name it. Take for example, this markup:

<!DOCTYPE html> <style> body {width: 600px; margin: 20px auto; /* center */ padding: 20px; border: 1px solid black;} </style> <body> The Quick Brown Fox. </body>

(Note that <html>, <head> and even <body> are optional in HTML5!)

Now let’s add a background colour.

<!DOCTYPE html> <style> body {width: 600px; margin: 20px auto; /* center */ padding: 20px; border: 1px solid black; background: #eee;} </style> <body> The Quick Brown Fox. </body>

The End of Video for Everybody!February 7

Video for Everybody—the ugly kludge that it is—has seen more success than anything else I’ve made. The whole spat over Flash and the iPad really raised awareness of the need to get video out of Flash and into HTML5 where possible. Everybody has already said it better than I could.

What I have noticed is that VfE has taken on its own kind of momentum. I’m seeing anything up to 50 tweets a day mentioning it, and almost every blog post and news article discussing Flash and the iPad includes someone posting a link in the comments, if the article itself is not already linking to it.

Anyway, getting to the point, VfE is a fall-back mechanism and as such as time goes by and browsers fall out of use, it doesn’t have to fall back so far any more and we can drop fall-backs—Video for Everybody is a vanishing mediator. It exists to bridge the gap between the disparity of Flash and HTML5 and will fade away as legacy browsers are no longer needed.

Personally, I’m ready to kill VfE now with the next version, but I think in reality it still needs another two years for it t

Improved Title Case Function for PHPJanuary 1

Update:
Small words (“in”, “and” &c.) now capitalise after em or en-dash.

John Gruber originally made available his script to Title Case text, working around the fringe-cases.

From this, a number of ports were made of the script of which particularly noteworthy David Gouch’s Javascript port that was smaller, simpler and handled more fringe cases.

I’ve ported this to PHP and put it to use on this site. My version is based on David Gouch’s Javascript port, unlike the WordPress port which is, frankly, crap. Ironically, now there’s a WordPress port that uses my port. The circle is complete! :P

Code below.

//original Title Case script © John Gruber <daringfireball.net> //javascript port © David Gouch <individed.com> //PHP port of the above by Kroc Camen <camendesign.com> function titleCase ($title) { //remove HTML, storing it for later // HTML elements to ignore | tags | entities $regx = '/<(code|var)[^>]*>.*?<\/\1>|<[^>]+>|&\S+;/'; preg_match_all ($regx, $title, $html,