My Own Personal Browser War

I’ve been a pretty die-hard Firefox fan since its birth, and really even before that. Firefox spawned from Mozilla, which arose out of the cinders of Netscape, which was the next progression of Mosaic, the first real browser – and I used them all. Each incarnation has been my primary browser since every other competitor has paled in comparison. Flock was a nice idea, but overcomplicated a world that needed simplification. Opera certainly tries hard, but doesn’t quite get it. Safari sure looked pretty but just didn’t have the skills. Chrome is nice, but is really just a new UI and some mild tweaks on top of the same WebKit engine Safari uses. Internet Explorer… well, let’s not go down that dark, smelly hole. Firefox has had the upper hand when it comes to rendering pages consistently and, more importantly, rendering them properly. The plugin architecture is unparalleled and so incredibly useful that every other major player has scrambled to mimic it and only managed a half-assed attempt. For development, Firefox is flat-out unbeatable. Its standards support and add-ons like FireBug and the Web Developer Toolbar give Firefox some serious kung fu.

But, sadly, today is the day that Firefox lost its crown as the Lord of All Browsers on my computer.

It’s a choice I’ve been fighting against for months now. I don’t want to make it, I don’t want to move to another browser for my all-day, every-day use, but at this point the decision is undeniable.

Why? Firefox has grown sluggish. It’s stable, which is great, but it’s become a RAM glutton and I’m frequently waiting painfully long periods of time for it to do simple tasks. I usually have, and need, many tabs open at once. If not tabs, then I need windows. Either way, the ability to have multiple pages open at once and cylcle between them is vital to my daily productivity. Over the last few releases this has grown steadily slower and slower. Pages and windows lag more and more. I’ve unistalled and reinstalled Firefox, disabled and even totally cleaned out all plug-ins, but the sluggish behavior remains.

Where am I going? Who gets the crown? Safari 4. It’s speedy, stable (about damn time), handles multiple pages and tabs very nicely, renders well and doesn’t chew up RAM like a hippo at a buffet (unless… There’s a caveat I’ll get to shortly). For the last couple of months I’ve been running Firefox 3.6 and Safari 4 side by side. The difference is undeniable, Safari wins on speed and system resources* every time. Maybe this is due in part to Safari and Cocao integration on OSX. Maybe Snow Leopard gives Safari a little nitrous oxide while ignoring the other kids, I’m not sure. The end result is that, at least on OSX, Safari runs smoother than Firefox.

*The caveat. Safari is great… until it plays Flash video or other large Flash objects. Chrome has this same affliction, and since they’re both based on WebKit it’s obvious that WebKit hates Flash about as much as Adobe hates Steve Jobs these days. Firefox still wins here, and by a landslide. Oddly enough, Flash competitor Sliverlight bombs horribly on Firefox but plays nicely with WebKit.

So Safari is the new hotness. Does that make Firefox the old and busted? Not at all. Firefox is still absolutely unparalleled as a web development browser. Sure, Safari and Chrome finally have some debugging tools, but they’re weak and feeble in comparison. So much so, that they’re nearly useless. Firefox + Firebug + FireCooke + PageSpeed + Web Developer Toolbar still has some serious kung fu and it won’t be leaving my system, or even my daily use, any time soon. But it’s become a heavy toolbox. Often, I just want to jump on the web and go – and, at least for now, Safari is my new vehicle of choice.

Make a Quick Pandora OS X Widget

I’ll admit it, I’m a Pandora addict. My own personal DJ is, in my opinion, pretty awesome. I listen to it almost all day too: on the train (iPhone App), at work, at home. So I’ve been looking for a way to play Pandora on my OS X desktop but haven’t found anything I really like. Then recently I read about Safari’s Web Clips and a lightbulb went off: I could use a Pandora Web Clip!

It’s actually super easy to do, and I’d recommend it for pretty much any webpage you use passively on a regular basis but which takes up valuable browser tabs and hog memory.

Fig. 1

Examples include Pandora, obviously, but also Gmail, Facebook, Twitter etc. Of course you could always download applications for all that but in my opinion it’s nice to not have to go through the hassle of installing Apps and cluttering your Applications folder with stuff.

Well let’s get on with the action!

Direct your Safari browser to http://pandora.com and once the page loads, go to FILE > OPEN IN DASHBOARD [Fig. 1]. Now you’ll have the option to select a certain area of the page, which means you can select only the music player. Now just select the area you want, which for me is the Pandora player and none of the other stuff. Now once you’ve selected the area you’ll see a purple ADD button in the upper right corner of Safari [Fig. 2].

Fig. 2

Fig. 3

The Dashboard will open automatically and you will see the widget. Now wait for it to load and you’ll be able to play music through it. The default setting is to only play music in the Dashboard which isn’t necessarily helpful. Your next step is to click on the (i)nformation symbol in the lower right corner of the new widget [Fig. 3] and uncheck “Only play audio in Dashboard.” This will keep Pandora playing even when you are not in the dashboard and you can get rid of that extra tab you’ve always got up.

Congrats, you’ve done it!

Friday Quickie: Google’s Page Speed rocks

Yesterday Google released their Firefox add-on, Page Speed. Until now, this compliment to Firebug was closed source and only used internally by Google. Now it’s free and open source – and it’s pretty cool.

What’s it do?

Page Speed adds new tabs to the Firebug panel letting you “record” a page load, saving metrics on everything the browser pulled down. Then Page Speed examines the recorded metrics and provides a detailed performance analysis, including suggestions for tweaking your code. It will even find unused CSS in your style sheets and tell you precisely which lines you can remove.

There are loads of desktop applications and web sites that can give you similar stats and speed tips, but Page Speed’s integration with Firebug, robust data collection and smart analytical abilities really stand out. It’s no wonder Google used it internally.

Last month I wrote about 10 Firefox Add-ons for Web Designers. Less than a full day after its release, Page Speed is definitely #11 on that list, and easily in the top 5 must-haves.

Video: The Vendor Client Relationship

As designers, we constantly deal with requests that would never fly in retail or service industries. Here’s a funny, and all too true look at the relationship between clients and vendors.

The Vendor Client relationship – in real world situations

“Sir… we’re not the Taco Stand.”

“I had beef. Same thing as I had here.”

“You had the filet!”

“Yeah, cow.”

10 Best CSS Practices to Improve Your Code

I’ve written another article for Webdesigner Depot on CSS best practices. Here’s an excerpt:

It’s really easy to find yourself wondering how your CSS got to be such a mess. Sometimes it’s the result of sloppy coding from the start, sometimes it’s because of multiple hacks and changes over time. Whatever the cause, it doesn’t have to be that way. Writing clean, super-manageable CSS is simple when you start off on the right foot and make your code easier to maintain and edit later on.

Here are 11 tips for speeding up the process, writing CSS that is slimmer, faster and less likely to give you a headache.

Check out the full article here »