February 24th, 2010 by Rob Larsen
The body is clearly going to take a while, since it contains all of the content on the page. I'll be breaking it out into chunks. This first post will focus on how I use the body tag itself.
I generally use the body tag to hold basic information about the page to use with both CSS and JavaScript. I want to capture the general type of page (home pages, landing page, gallery page, tertiary page, form page) and then the style of the page within the general type (e.g., art, movies, blog.) Coming up with a good, logical scheme for this kind of thing can generate plenty of unexpected benefits throughout a site build.
It can also help with planning as these classifications can be used as part of the estimation process- "I've got 5 major templates and 10 variations, that'll be 2 weeks of work."
Here are some examples from the ongoing redesign of DrunkenFist.com. These might help to crystallize what I'm trying to do.
Read the rest of this entry »
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)
- What is
hasLayout?
- 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
- What's "The Mark of the Web?"
Answers after the jump.
Read the rest of this entry »
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 »
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 »
October 1st, 2009 by Rob Larsen
I've always preferred the "IE Box model." I've always wanted width to actually be the width of the element. Instead, I've been forced, for years, to break out my math skills to calculate "actual" value of the width property by subtracting padding, margin and borders. That still seems broken to me after all these years.
I'm not alone in this. Here are some big shots sharing their thoughts on the matter:
Read the rest of this entry »
September 24th, 2009 by Rob Larsen
As I've mentioned I'm doing a couple of HTML5 implementations and in one of them I was faced with some "post" boxes in a Wordpress theme that featured both rounded corners and a drop shadow. Since I'm using already using Modernizr, which exposes specific CSS3/HTML5 feature support on the HTML element, I figured I'd do a little bit of extra work and use some CSS3 magic to make the design happen in modern browsers. For this post I'll skip the extra work bit (a little JavaScript to insert extra markup in for Internet Explorer/Opera) and just look at the implementation for fancy new browsers (Firefox 3.5 and the latest/greatest Webkit based browsers.)
First, let's look at it in action (this will suck in IE/Opera)
Read the rest of this entry »
August 15th, 2009 by Rob Larsen
I've read all the articles and I'm still compelled to write rules like this one I wrote earlier tonight:
#main-menu .primary a{
color:#7b0000;
}
I know I'm not alone in using rules like that. It's a super common pattern.
Read the rest of this entry »
July 21st, 2009 by Rob Larsen
This being a technology blog, with plenty of code samples being posted on a regular basis, it's no surprise I give soem thought as to how that code is displayed. Personally I've gone for the old school, green on black text (using the excellent code font Consolas, where possible.) I like the way it looks.
function heckYeah() {
check.it.out();
}
The one problem is with really long lines. Since I use a lot of real world examples and it's code I'm caught between a desire to have one line of code=one line on the screen (easier to scan) and the readability issues that a scrolling text box creates.
Read the rest of this entry »
June 6th, 2009 by Rob Larsen
Check it out:
Google Page Speed
Beyond the plugin itself, the rules are definitely of interest:
Read the rest of this entry »