Sorry, it’s been a while. I’ve been busy at work, I’ve been wringing every last bit out of summer on my bike, and I’ve spent a lot of my free time on my upcoming CSS presentation, so I haven’t been posting as much as I would like. Fall is here. Which means I should have more time for writing. That’s cool.
Anyway, to break the ice here are a few articles that have recently caught my attention. Read the rest of this entry »
HTML5 is the latest version of the language that serves as the foundation of the web. It’s the first major revision in over 10 years and as it’s gotten closer to its final form and more and more browsers begin to implement its features it’s become a source of intense interest and contention in the technology community. This article hopes to explain the realities of HTML5, dispel a couple of myths and shine some light on the future of the web.
To begin we’ll need to define what we’re talking about when we say “HTML5.” There is a specification to refer to and much of what falls under the HTML5 name lives in that spec. In addition, there are several related specifications and APIs that are lumped together and called “HTML5″ when people talk about these things informally.
So, conversationally, HTML5 consists of the following:
New Semantic Elements
HTML5 has introduced several new elements. They aim to introduce more meaning to markup and codify existing web development patterns. Some examples of these new elements are nav (for navigation), article, header and footer.
I did some testing today with Google Chrome Frame. I wanted to see if it would mesh with my normal methods for serving IE specific code and, as far as I can tell, it behaves exactly as desired.
I had a Safari bug on a project I’m rushing to get out the door. We’re using a Flickr feed to populate a div with link+thumbnail to some flickr images. In Firefox/Internet Explorer I simply did the following to build the links:
flickr : function(obj) {
//get the full list of items
var items = obj.getElementsByTagName("item");
//make sure it's not empty
if (items.length > 0 ) {
//start the HTML block
var blob = "<div id='flickrFeed'>";
//loop through the items (we only want 5) and build some links)
for (var i = 0; i< 5 ; i++) {
//get the link
var flink = items[i].getElementsByTagName("link")[0].childNodes[0].nodeValue;
//get the thumbnail
var flurl = items[i].getElementsByTagName("media:thumbnail")[0].getAttribute("url");
//smash them into the string
blob+="<a href='"+flink+"'><img height='75' width='75' src='"+flurl+"' /></a>";
};
//close the div
blob+="</div>";
//pop it onto the shelf, for later use
$("hyperspace").innerHTML+=blob;
} else {
//if there's somethign wrong with the feed, go to default contentk
social.fallBack.flickr();
}
}