Being surrounded by technical genius at work everyday, I was bound to pick up a few pieces of wisdom. Working on some top secret stuff for Yahoo!, I quickly learned that every website or blog that Yahoo! dishes out must comply with the graded browser support theory. The project I am working on must abide by “A-grade” browser support as do other Yahoo! sites. A-grade support unfortunately includes such nightmares as support for IE6 and IE7. However, Nate Koechley, one of the first web developers at Yahoo!, was able to help me out when I ran into problems.
1) Firefox’s DOM Inspector is your friend
Until coming to Yahoo!, I had generally passed off the Firefox DOM inspector as a bundled developer tool that I never chose to install. Little did I know how much of a gem it really was. My typical use of the DOM, or Document Object Model, inspector involves activating the pointer tool, selecting a buggy element on the site and then viewing its computed CSS styling. Computed CSS styling is what the browser thinks the CSS is, not just what you told it to be. It’s a great way to find out if there’s any other code negatively impacting the CSS you want to use.
Along with praise for the bundled DOM inspector comes tribute to the greatest Firefox developer tool that has ever been developed, Firebug. This beast does everything and is great for fast DOM inspection. Firebug is a word that constantly came up in overheard discussions from developers’ cubes nearby. Dimitry has some 411 on Firebug.
2) More Firefox Stuff
As long as I’m hovering around the topic of Firefox, I’ve grown to love several amazing extensions. I’ve always used a couple of these for months before but only recently have I used them with some voracious frequency.
- Web Developer Extension – No explanation needed; a fantastic suite of indispensable tools.
- Colorzilla – I find the Colorzilla’s eye dropper tool helpful when making sure that each link and element on the site is the proper color and up to spec.
- MeasureIt – This thing is insanely useful. Working on a big project like I am, you have to adhere to some pixel-perfect specifications. Using MeasureIt to find out whether this was 14px apart from that while that was 8px apart from the other was a top priority.
- IETab – Let’s face it, opening Internet Explorer is a pain. With IETab in Windows Firefox I can simply right click any tab and select switch rendering engine to see what that page looks like rendered by Internet Explorer. Definitely gets rid of the annoyance caused from repeatedly switching between Firefox and Internet Explorer.
- You can find other useful Firefox extensions for web development in Kelsey’s article.
3) Not so !important
Whenever something wouldn’t work or just didn’t have the proper specificity I was looking for, I’d always resort to the !important hack which forces things into place. Nate compared them to using a sledgehammer to fix things and said most Yahoos try to keep them from getting out in the wild. My CSS had something like 20 or more !importants, so I’ve been on the hunt for finding the real culprit for each use and fixing it the right way. Maybe I should take this wisdom and apply it to the CSS on this site. You can see an example of how !important is commonly used below.
.search {margin: -60px 0 40px 15px !important;}
4) Negative margin is evil
The code snippet above brings me to my next topic of examination, negative margin. From what I’ve gathered at the Y!, the use of negative margin is somewhat frowned upon as it is forcing elements of the website to do things they’re not supposed to do naturally. So when the design of a certain element on the project called for an effect that could only be pulled off with negative margin, we changed the design.
5) * is cooler than _
In a such a large web company, accessibility and standards compliance are of utmost importance. That’s why Nate flagged me down to let me know that I should replace all of my IE-specific CSS attributes that had used an underscore in the front, with an asterisk. Why you ask? The asterisk is only recognized by IE7 and IE7 has no clue what the underscore thing is. Luckily, IE6 also understands the asterisk method for defining IE-only CSS rules. Not sure if that was clear, but in a nutshell using the asterisk ensure IE6 and IE7 compatibility. (I’m sure there’s a technical term for “asterisk thingy” so let me know if you know what it is… I’m no web developer.)
6) Why Yahoo! uses the generic “RSS” icons
The reason why Yahoo! uses those little orange chicklets with the text “RSS” or “XML” on them was one of the first things I wanted to discover. It turns out that Yahoo! hasn’t yet migrated to the standardized feed icons that are oh-so-popular in the blogosphere because it really doesn’t have any penetration outside of the tech-savvy arena. It’s somewhat true as well, I don’t think my Luddite friend could identify the new feed icon yet he knows what the old school “RSS” icon is… vaguely. Just proof that larger sites need to start using the new feed icon to promote awareness.
7) Engineers Can Play Ball
One thing is for sure, frontend engineers know what they are doing when it comes to volleyball. Take my word for it.
I have yet to see a cloud during my stay in Sunnyvale.
If you enjoyed this piece, feel free to bookmark it in your Yahoo!-owned property of choice: del.icio.us or My Web. (I’m funny huh?)
PaulStamatiou.com runs on the Thesis Theme for WordPress
Thesis is the search engine optimized WordPress theme of choice for serious online publishers. If you’re a blogger who doesn’t understand a lot of PHP, Thesis will give a ton of functionality without having to alter any code. For the advanced, Thesis has incredible customization possibilities via Thesis hooks.
With so many design options, you can use the template over and over and never have it look like the same site. The theme is robust and flexible enough not only to accommodate a site like PaulStamatiou.com, but also to enable the site to run far more efficiently than it ever has before.
I used the Scribe WordPress plugin and service to optimize this blog post for SEO.
{ 1 trackback }
{ 21 comments… read them below or add one }
Engineers can also, row, play and watch football (as in FIFA not Superbowl), race cars, play hockey and get horrendously drunk. Really we’re just like real people – honest.
With the added bonus we make excellent boyfriends according to this article
Also forgot to big up the firefox DOM inspector I descovered this little gem a few months back when I was learning some clever JS Protopageesque tricks for an application at work. Admittedly those with short sighted vision around me didn’t see how amazingly cool it could be.
I couldn’t live without MeasureIt and Colorzilla anymore. Also the Webdeveloper bar is really great. ANother extension I can’t miss anymore is the All-in-one-sidebar.
Now if all this would be integrated in the Yahoo bar, together with del.icio.us buttons, I could reduce the number of extensions and would install the Yahoo! bar :D
Nice write-up Paul. Cool to hear some of the inner-workings of Y!.
Regarding the use (or lack thereof) of the feed icon: I’m not at all surprised that some of the bigger guns in the web gain haven’t made the switch. After all, feedicons.com is merely some one-pager that was tossed online in a matter of hours by some random dude with a blog. Luckily, the Mozilla Foundation truly appreciat the effort and we’ve recently settled on some guidelines that will formally be made public very soon. I’m confident, once that happens and the full feedicons.com launches, a global change will occur on an even larger scale.
Yes, very interesting, and for the pointers to good FF extensions. Those will come in handy for making some tasks easier. :)
BTW, 411 is still used in California for ‘information’. 511 appears to be used for traveler information in large tourist cities (at least that’s what a quick search shows).
Ah thanks, I wasn’t sure about that.
Thanks for tips about Firefox and CSS, I was scared something bad was going to come out of !important and “_”
Paul, nice article. A couple comments:
Great list of firefox extensions that help in development. I have list of all the extensions that I won’t develop without:
http://del.icio.us/philfreo/firefox_extensions
Regarding the “star html selector” (aka Tan hack) vs. “underscore” hacks: the real issue here is “what are you trying to hack?”. Most of the CSS bugs in IE6 are being fixed in IE7. This means two things: you need to hack less stuff for IE7, but you also need to make sure your “hacking technique” works only where necessary. This will be a good thing, usually, because the thing you’re trying to hack is fixed in IE7 *AS WELL AS* the technique that you’re using to hack it with.
Therefore you need to determine whether you want the actual hack to show itself in IE7 by making sure your “hacking technique” is relevent. Since most of the CSS bugs are fixed in IE7, I can’t imagine it being too good of an idea to hack for it already.
If you want your hack to appy to:
-IE body {} to select the body element.
A “must read” article about CSS hacks in IE7:
http://positioniseverything.net/articles/ie7-dehacker.html
And from what I’ve keep hearing about !important: it’s great for debugging but should never be left in production code.
I’ll pretend I didn’t see the Google toolbar in your del.icio.us list…
My comment didnt get displayed correctly, I listed about 3 CSS hacks.
hrm, um email them to me if you want and ill edit your comment
Thanks Paul, an interesting read.
Have you thought about doing a ‘guided photo tour’, much like Time magazine did a few months back on Google? It would be fascinating to see what sort of working environment Yahoo! provides.
I though you might like to know the Firebug link doesn’t work in the first point though. You seem to have a break tag at the beginning of the link.
Looks cool, working at Yahoo.
While downloading the colorzilla extension I also found this one called foxytunes.
http://www.foxytunes.com/
Thanks for catching that Ben, I fixed it.
Well, since you asked…the * is the universal selector. Instead of using !important in some situations, usually you can be more specific with descendant selectors, like * #container input {}.
I’ve always felt the same way about negative margins too. Glad I’m not alone! :P
I recommended MeasureIt to some web developers a few days ago and they loved it. I use it all the time.
Your list almost pefectly matches my list of must-have extensions, except that I also use the Fangs screen-reader emulator, which gives one a rough idea of how the page would be presented by screen-reading assistive software. It’s not as good as testing with a real screen-reader, which itself is not as good as getting people with visual impairments to do user testing, but it helps remind one to take their needs into account.
I place all my IE-specific CSS in conditional comments these days: it avoids the need for selector-targeting hacks, and makes it easy to target different IE versions with differing fixes. Is there any reason why Yahoo! doesn’t seem to use them at all? I saw Nate Koechley’s presentation “Yahoo! versus Yahoo!” at @media 2006 in June, and he gave good technical justifications for practices like having the CSS actually in the head of the new homepage, rather than in an external stylesheet; but I don’t remember conditional comments being discussed. They seem to me to be a much cleaner way of catering for IE in its various manifestations.
What’s wrong with negative margins?
You missed a handy FF extension– Aardvark. Though the web developer toolbar kicks butt, the Aardvark plugin is good for singling out that ONE element that’s pushing things around and causing that side scroll bar that’s driving you nuts. I find I use it a bit more than the WebDev extension, since it’s just plain faster for me to diagnose problems with it. Then I open up webdev edit css to fix ‘em. :)
Hi Paul,
I sent you an email with your email form a few weeks ago, I’m interested in doing a quick email interview with you regarding what you like and don’t like with the DOM Inspector, I’m doing a UI review of it for MoFo and this is part of what I’m doing.
Feel free to email me back if your interested.
Cheers,
Michael Gall
You got exactly my list of FF extensions =)