My Personal View of Browser Market Share is Pretty Sweet- Firefox Rules, Chrome is Massive, IE6 is Nearly Dead

January 26th, 2010 by Rob Larsen

Here are the numbers for DrunkenFist.com in the year 2009. There were 614,333 visits to that domain last year and the top browsers broke down like this:

Browser # of Visits % of Visits
Firefox 342429 55%
Internet Explorer 162977 26%
Chrome 35801 5.8%
Safari 33545 5.4%
Opera 22826 3.7%

Read the rest of this entry »

Two Front End Development Interview Questions No One Has Been Getting Recently + One I'm Afraid to Even Ask

January 22nd, 2010 by Rob Larsen

Yes, I'm still helping out with screening candidates. I haven't yet interviewed someone to replace me, but there's still a week to go.

Anyway, we've had a couple of technical questions that candidates universally failed to answer. Why share them here? For starters I just want to know if we're crazy to expect people to know these. I also like the idea of a kind of "easter egg" for candidates. If someone does enough research to find my blog and read this post, they've shown me something, even if it's not the answer to one of the questions posed below.

The two that have surprisingly turned into stumpers (at least for the last five or six folks I've interviewed)

  1. What is hasLayout?
  2. What's the significance of setting the body text to .625em?

And the bonus question that I want to ask, but don't, because it's kind of goofy to say out loud

  1. What's "The Mark of the Web?"

Answers after the jump.
Read the rest of this entry »

Rethinking the "How To Serve IE-Specific CSS" Question

January 14th, 2010 by Rob Larsen

This is my old pattern:

<!DOCTYPE html>
  <html lang="en-US">
	<title>Internet Exploder</title>
        <link rel="stylesheet" href="/_assets/styles/styles.css" />
	<!--[if gte IE 5.5]>
		<![if lt IE 7]>
			<link rel="stylesheet" href="/_assets/styles/ie6.css" />
	  	<![endif]>
	  	<![if IE 7]>
	  		<link rel="stylesheet" href="/_assets/styles/ie7.css" />
	  	<![endif]>
      <![if gt IE 7]>
			<link rel="stylesheet" href="/_assets/styles/ie8.css" />
	  	<![endif]>
  	<![endif]-->
</head>
<body id="home">  

Simple. It serves a new style sheet to various versions of IE as needed. The bad thing is the extra HTTP request added onto the Microsoft browsers. I'm not even there yet, but during one of my interviews for the new gig an alternative was suggested- using conditional comments to append a different class to the html element and letting the cascade sort it out.

I liked that idea.
Read the rest of this entry »

Recent Reading (30 Style Tags?, YUI 3, GodMode, Git, Jira)

January 7th, 2010 by Rob Larsen

Once again rounding up some of the articles I've read over the past couple of weeks.

All style tags after the first 30 style tags on an HTML page are not applied in Internet Explorer
I wasn't surprised to see this came up as an issue in the Drupal community. During my short time working with Drupal, I was horrified by the number of style sheets/JavaScript files included in the page. I don't think we ever got to 30, but 10-15 was scary enough. Apparently, there's a "performance" mode which clears that up, but I never made it that far…

Inheritance Patterns in YUI 3
I'm really interested in getting to know YUI3 and inheritance patterns in JavaScript are interesting to me in any form, so this article by Stoyan Stefanov was a must read.
Read the rest of this entry »

Microsoft's CSS Filters, Could The Syntax Be Any Uglier?

December 10th, 2009 by Rob Larsen

The answer is no :)

While some of the functionality of MS's CSS filters is actually pretty useful (sue me, I need to use them from time to time), the implementation is ugly as hell. Ryan, one of the smart guys here that helps me fool people into thinking I know what I'm doing, had to implement the Microsoft gradient filter as a (brilliant) hack for a performance issue on a small subset of IE browsers. We were discussing the solution and then he called up the code.
Read the rest of this entry »

Want to Test Your Site Without a Mouse For Accessibility's Sake? These Keyboard Shortcuts Will Help

November 30th, 2009 by Rob Larsen

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 »

Jscript Versions Reported By Major Versions of Internet Explorer (For Use With Conditional Compilation)

November 4th, 2009 by Rob Larsen

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// 

Read the rest of this entry »