The folks at HttpWatch detail the ins and outs of the way that IE8 handles their enhanced connection rules. The browser is set to use 6 open connections, but only when a broadband connection is in use, so there are situations where it can fall back to using just 2.
Computer science in JavaScript: Base64 encoding
This is a great series, moving the discussion of JS beyond the browser and the DOM and into a more primary, and therefore really interesting, realm.
Once thing that’s vital to testing the accessibility of a web app or site is running through it without using a mouse. If you can successfully work a site or app without touching the mouse, you’ve gone a long way towards ensuring that your site is available to a wide range of people and devices.
One thing that’s difficult about that process is most of us rely far too much on the mouse when browsing. Which is where these lists of keyboard shortcuts for Firefox, and Internet Explorer come in handy. Read the rest of this entry »
Conditional Compilation is a handy, Internet Explorer specific method for forking bits of JavaScript. The nice thing about it is that real browsers don’t notice it at all. It just looks like a comment block to any non-IE browser. Which saves the rest of the world from even having to if (IE) { } else { } . I like that.
Anyway, we use it to fix some of IE’s shortcomings. One standard pattern is using it to fake the :hover pseudo-class on inputs in IE6. Something like this:
//IE6 HOVERS simplified//
//this would be a bit different in protection
//but you can see the idea
/*@cc_on @*/
/*@if (@_win32)
var inputElements = document.getElementsByTagName("input");
var test = inputElements.length;
for (var i=0; i<test; i++) {
if (inputElements[i].getAttribute("type") == "submit"){
inputElements[i].onmouseover = inputElements[i].onfocus = function(){
addClass(this, "hover");
}
inputElements[i].onmouseout = inputElements[i].onblur = function(){
removeClass(this, "hover");
}
};
};
/*@end @*/
//END IE6 HOVERS//
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();
}
}