My long time friend Erik Reagan (@ErikReagan) runs a website by the name of TextMate Tips. It’s a useful resource for keeping up to date with interesting TextMate hints, shortcuts, and utilities. Further, the site is open for contribution and is always on the look out for new and interesting TextMate uses.

If your a fan of TextMate you should definitely check it out and maybe give it a bookmark if you’re feeling extra generous.

What drives you?

Being really good at what I do, staying on the leading edge of the industry, and having an impact on people who see/use my work. Too many people stagnate, if I ever start stagnating I want to be taken out back behind the chemical shed and ended.

When not by your computer, where might we find you on a Friday night?

There’s about a 95% chance I’ll be with friends, a 90% chance I’ll be up past 2 A.M., a 70% chance that I’ll be out on the town, and a 50% chance that at some point during the evening I’ll drink a great glass of scotch. Other possibilities include: beating people at Halo, playing pool, chess, or watching amazing movies like No Country For Old Men.

What’s more important loyalty, honesty or passion?

If it’s just one thing I think it has to be honesty. At least if someone is honest you know right away if they will be loyal or not.

Still I’d say ideally it’s a blend of all three. Passion is incredibly important to me, and therefore I need to see it from other people from time to time. If they don’t have passion chances are I won’t associate with them for too long.

If you were a rockstar, who would you be?

I’d like to say Zack de la Rocha from Rage Against the Machine. He has a cause, he has a path he wants to follow, and he does it. The truth though is I don’t think many people could be Zack, even me, so I’d have to say Jon Bon Jovi. He seems nice, he’s into sports, and he knows how to rock it out.

Barack Obama, Steve Jobs, Tiger Woods or John Gruber? Which would you most want to grab beer with and why?

Steve Jobs terrifies the shit out of me. And while I’d love to pick his brain about his approach I think I’d just sit there being nervous. Obama I think I could actually open up to and have a good discussion with. He seems like he’d really listen and take ideas to heart, not to mention tell you when he thinks you’re wrong.

Barack is definitely my choice.

If Internet Explorer was a human and you were alone with it in a room for 30 minutes what would you say or do during that time?

There’s a very very high possibility that after I got the limbs off I’d eat them. Except IE8, I assume IE8 would join me in the feast.

Your bachelor pad is on fire, what are you grabbing as you leap out the window and race down the fire escape?

iPhone. It’d be the fastest way to get ahold of people and figure out the situation. Plus think of all the great tweets you could write.

“My house just burned down, fucking crazy. Want to grab a burger? - twitpic.com/holyfire”

*note: if I had a dog I’d take her instead of the phone.

What rules or general principles guide your coding or interface design?

I guess I look at the whole experience and what I really appreciate when using something. Sometimes you run into a site or concept that is just mind blowingly good and you think to yourself, “wow, someone really refined and nailed that, I should strive to do that in what I do.” That doesn’t mean I always achieve that level, but I’m constantly trying.

Give me a joke. Don’t hold back.

How do you make a baby cry twice? Hahaha, just kidding I’m not going to give that punch line on our blog.

Instead let’s go with: “How many Chuck Norris’ does it take to screw in a lightbulb? None. Chuck Norris likes to kill in the dark.”

What 3 things are you afraid of?

1. I’m terrified of death. Hence the reason I don’t drive with Scott often.
2. I’m really afraid of losing a coding finger. Especially to the garbage disposal.
3. I’m afraid of Kat’s raptor impression.

What 3 things could you improve on?

1. When I learn the most is when I do things on my own and don’t have people show me. I get too reliant on people around me from time to time.
2. I could be more conscientious of how my actions and approach effect other people. I think I know how I’m perceived but I’m sure I miss things.
3. I’d like to be more well read in other areas besides geek topics. I find people with a vast knowledge and cultural background to be fascinating.

What 5 artist are on your iPod right now?

• Rage Against the Machine
• Michael Jackson
• Dj Vernimal
• Brian Transeau
• Abdominal

If I could grant you one super-power what would it be?

The ability to read and grasp information 200x faster than I do right now.

What current trend just baffles you?

Girls wearing abnormally massive sunglasses. What is the fucking deal with that? Do they think covering their entire face with fake plastic gold plated glasses is attractive in any way?

Fill this in. I can’t believe I didn’t get tossed in jail for ____?

Using the blink tag.

* you could also replace blink tag with “spacer gif” and it’d be equally as hideous and revolting.

If you were a pro-wrestler, what would be your name?

It’d definitely be Pyrodeath. I mean… there’s no way I couldn’t name myself Pyrodeath. I’d light my pants on fire right before my final move of the match. It’d be seriously epic.

Once in a while you come across a script that makes your life dramatically easier. Today that script was sIFR Lite.

Over the past few months we’ve been working on a client project that requires us to use a specific typeface for page headings on the website. Rather than doing standard -9999px image replacement techniques, which would have made our intern want to gouge out his eyes with an ice pick, we decided to give the sIFR replacement technique a try. sIFR 2.0 is a technique that came out in mid 2005 and has been used by a limited number of sites. Well, as cool as it is I ran into quite a few problems when first implementing it with our project. And while I got it to work I felt slightly dirty about the implementation. Luckily a couple days later I saw a post on twitter by Matt Crest about a new solution called sIFR Lite.

Today, I finally had the chance to replace the old method with the lite version and I have to say it is exceptionally well done. Dave over at AllCrunchy.com has done a phenomenal job with his implementation of the sIFR technique. Making it lighter, easier to use, easier to install, and easier to manage. In fact, it reduces the amount of work by about 5x and in my tests it seems to render better. Better aliasing and better container size detection. Check out the example I whipped up.

Here’s the javascript code required to call sifr-lite:

window.onload = function () {
	var din = new Font('din.swf', {tags:'h1'});
	din.replace('h1')
}

Two quick notes: First, I do find that without using the window.onload function that in Safari sometimes the text won’t pick up color. This is very minor and easy to fix.. obviously. Second, you will need to use the original sIFR to create the .swf files of your font’s. Simply use the .fla and .as files that come with that script to make your fonts, then call those fonts via sifr.lite.js. For those looking for an all in one option I’ve put it together in a zip file. Please recognize I take no credit for the sIFR script or the Lite implementation of it, I simply thought it would be nice to have an all in one package to make things work.

Update: After further testing it seems that this technique is not yet compatible with Flash Player 10 except in Internet Explorer. Hence, if you’re running Flash 10 you won’t see the replacement technique. I hope this gets fixed soon as a fix is already out for sIFR 2.

Update 2: From our comments Gyo over at (http://www.giordanopiazza.com) has released an updated and fixed up version of sIFR Lite. I plan to start using this again for our projects. Very cool!

Earlier today I was reading an A List Apart article titled Progressive Enhancements with CSS. The main idea behind it being that breaking out styles into a multitude of files is beneficial. For example, creating a typography.css for type styles, a layout.css for positioning styles, and a colors.css for colors and graphics. At face value this sounds great because abstraction, for the most part, works well on computers (utilizing folder hierarchy’s, categorizing types of media, tagging web articles, etc).

Fine and dandy. But there seems to be a real world problem.

There are three big reasons I see not to break out CSS into multiple files.

First, when you break out CSS into multiple files you are forced, no matter what to write a lot of duplicate code. For instance, if I want to have a certain container have a typeface, background, and color in a single main.css file I can do the following piece of code:

#element {
     position: relative;
     float: left;
     width: 20em;
     color: #f0f;
     background: url(/images/background.gif) repeat-x 0 0;
     font: 120% Arial, Helvetica, Verdana, Sans-serif;
}

However, if I break this out into: typography.css, layout.css, and colors.css files I have to do the following:

/* typography.css */

#element {
     font: 120% Arial, Helvetica, Verdana, Sans-serif;
}

/* layout.css */

#element {
     position: relative;
     float: left;
     width: 20em;
}

/* color.css */

#element {
     color: #f0f;
     background: url(/images/background.gif) repeat-x 0 0;
}

Okay, pretty easy to see that the amount of code being used favors having one central CSS file. Now, let’s talk about style management and the second argument I have for not using multiple CSS files.

A single CSS file for a website can grow to be quite a large file. Most I’ve written fall in the range of 1200 to 2000 lines. The problem with this is that making small changes can be a bit of a hassle. However, I would argue that the single best way around a complicated CSS file is to clearly comment code, use shorthand css, and make sure there is good style structure. I.E. Don’t go styling something in two different parts of the file and don’t write five lines of CSS when one will do.

But, in no way is the answer to break the CSS into multiple files. Why? Because the worst possible thing you can have to do is deal with the above problem three different times. Granted, if you only have to make a small color change than you only have to edit one file. But, if you use only one file to begin with then you only have to edit one file anyway.

Last, there’s a reason a site like digg loads in one 2500 line CSS file. The answer is that the less page requests the better. Doing multiple page requests to get different styles that are separated is inefficient. If a site gets a lot of traffic or a large traffic spike the less page requests the better. Granted, this may not be common but when it happens there’s nothing more important than trying to keep the site up.

Want more assurance?

Neither Dan Chederholm simplebits.com, Veerle Pieters veerle.duoh.com, or Jeff Zeldman zeldman.com use broken out CSS for type and color.

It has to say something when the big wigs in the bizz don’t follow the advice of A List Apart eh?

Exceptions?

As always, there are a few exceptions to this. For instance, if the website is like MTV.com and has a constantly changing color scheme then it could be useful to break out individual styles into a separate CSS file. One that overwrites the default styles of the base design and can be updated without disrupting the primary styling of the site. Also, microsites that have completely different layouts from their parent sites almost always deserve a new CSS file.

Conclusion

Basically there’s no need to break out your styles into a multitude of files. While the idea of abstraction might sound good the benefits just don’t add up. All you really end up with is a waste of time and resources.

This past week while working on a project I ran into the most frustrating IE7 bug I’ve encountered to date. I have tried to recreate it in separate environments from the site I was developing but up to now have been unable to do so. However, in hopes of helping someone tortured by this bug down the road I will give my best guess as to what is causing it and explain how I fixed it.

First off, the bug looks like this:

Alright, the first thing is that this bug comes into play only in IE7 (IE6 works fine). Second, it seems to occur only when there are html elements nested inside an anchor tag and these elements are told to change their background properties on the :hover phase of a parent element. This most often happens with nested list drop down menus like the example above. Third, the elements that act buggy are positioned absolutely within the :hover(ed) parent element. Once again this only really occurs with drop down menus.

In the code below the element that gets the bug is the anchor element within the nested list items.

<div id="navigation"><ul id="nav">
<li><a href="" title=""><span>Solutions</span></a></li>
<li><a href="" title=""><span>Investors</span></a><ul>
	<li><a href="" title="">Buggy nav item 1</a></li>
	<li><a href="" title="">Buggy nav item 2</a></li>
	<li><a href="" title="">Buggy nav item 3</a></li>
</ul></li>
</ul></div>

What happens is that when a top level navigation item is hovered over the drop down appears, however, because a top level nested element had a background image change on the :hover state the drop down list loses its padding. In essence, the ul > li > ul > li > a element will lose its padding and end up looking like the buggy menu above. Although once the user rolls over this anchor element it will once again regain its padding and jump back into place.

When would this occur?

Good question. The most likely occurrence of this would be if you had a navigation menu that required a lot of imagery. For example, a menu with which you were forced to use a span tag to get one extra background image. And then on the hover you wanted the span background image to change, perhaps to point an arrow downward instead of sideways. Therefore the user would know which top level item they had hovered over even if the mouse was placed on the nested sub-menu below. In this case you’d probably have some CSS like this.

#header ul#nav li.active a span,
#header ul#nav li:hover a span {
   color: #fff;
   background: url(/images/icons/downward-arrow.gif)
   no-repeat 15px 50%;
}

Alright, so basically you decide to help the viewer see what nav menu they’re on by changing the span background property to have a down arrow. Unfortunately all you end up with is a buggy IE7 drop down menu. What’s the best fix? In this case the best fix is the apply that downward arrow to the li background and just have the span item go transparent instead of change the image on the fly. One added bonus to this method is that you won’t have to load that image on the hover state. Still, this means that if you’re using the li background already you will be forced to find another way to highlight the top-level navigation item.

What’s really going on here?

Apparently when IE7 tries to re-render a background image on the :hover state, nested absolutely positioned elements are reset to their default value causing them to lose padding, etc. Hence, the best option is to avoid making IE7 redraw background images when there are absolutely positioned nested elements. Instead, rely on background colors or transparency for effect, or apply the effect to the li background.