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 Y! My Web.