In the Beginning

When I first started using Mac OS X in college I fell in love with the Safari web browser. It was light weight, sexy, and fast. Unfortunately, the more I ramped into complex web development the more I realized Safari’s severe developer limitations. Back then developers had to enter terminal commands to even gain access to Safari’s developer menu. And, once turned on, the developer menu lacked the oomph of Firefox’s flourishing Firebug and Web Developer Toolbar extensions.

Since that day I’ve been using Firefox heavily for development and only occasionally jumping into Safari to test site feel and functionality.

Then, about a year ago, Safari started making real steps to support web developers. The release of Safari 4 earlier this year capitalized a nice upswing in Safari developer improvements. But, unfortunately, Safari still lacks some of the most basic development capability.

In my opinion, if Safari doesn’t address the following three issues, it will never become a viable competitor to Firefox for developers.

Source View Made for the 80’s

Any time your browser’s source code view renders like Internet Explorer’s you really need to sit down think things over. Is this acceptable, am I being an asshole? The answer, obviously, is yes.

Let Me View Background Images!

The web is no longer a mass of tables and img tags. Thanks to CSS we’ve started abstracting background effects from real content. Knowing this, there is absolutely no reason why Safari shouldn’t have a view background image option. Safari, do you really expect me to right click, inspect element, and then track down the CSS that links to that background image? Give me a break.

Target HTML Elements Faster

The best thing about the Web Developer Toolbar extension for Firefox is that you can hit cmd-shift-y and instantly view HTML elements. This is perfect if you’re trying to track down a styling issue or remember an ID name. It’s fast, easy, and accurate. Safari’s right click > inspect element isn’t even in the same ballpark as this. And, as hard as I’ve tried, there’s no way to reassign the Inspect Element shortcut in OS X.

Conclusion

Safari, you’re a great consumer browser. And yes, WebKit is a phenomenal web rendering engine. Hell, even Google loves you. Please, just fix these small problems and I’ll switch to you full-time, I promise! Until then, I’m going to continue buying FireFox t-shirts.

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.