David Correll Studio, Brooklyn, NY

Pau Santesmasses, who I had the pleasure of meeting a few nights ago, has released TypeGauge, a Firefox web development extension that tells you the font-size and line-height of an element as you hover over it. I’ve been using a beta version of it for a few weeks now, and have found it indispensable. Those of you familiar with Firebug might point out that Firebug already does this, which was my original reaction as well. What’s nice about TypeGauge, is that it is simple and clean – it does one thing, and does it well. I often finding myself needing to check only the font-size and line-height of an element, and in this situation, Firebug is the classic sledgehammer fly-swatter. Pau’s extension simply lays nice and cleanly over the page, and quietly reports all the information you need.

Why is this important? Clint Fisher sums it up beautifully here:

If you care about your typography and are striving for consistency across browsers then this information is critical. A good example of where this comes into play is when sizing fonts for Safari, if you have somehow ended up with a decimal value instead of a whole number (maybe your font-size percentage on the body element does not give you a whole number, like another site I deal with everyday), Safari will round up the value and this will cause your font to be larger in Safari than say Firefox.

Excellent work, Pau. Thanks!

Well, another year has passed, and I once again was unable to attend SXSWi. Find yourself in the same situation? Fear not! All is not lost!

The best part of not attending SXSWi is the week (sometimes weeks) after, when all my favorite bloggers, web designers and developers post PDFs of the slides from their presentations. Forget the “SXSW was great!” wrap-ups, and hunt down the good stuff. Get the content without the hangover!

There are a few stand-outs from this year — get ’em while they’re hot!

Web Typography Sucks
Okay, so I do wish I could have seen this presentation. Richard Rutter of Clearleft and Mark Boulton, (one of my favorite online author on the subject of typography), offer up this gem. Lots of examples and how-to’s on design essentials. Snag the PDF with notes.

Oh Yeeaahh!
Grid-master Khoi Vin serves up another excellent study in designing on the grid. First thing that grabbed me here? Start with the ads. The above link it to his post about it, which is well worth the read, or jump straight to the PDF here.

While you’re there, check out his T.G.I. Interwebr’s Grill.

Twitter, to which I have recently sold my soul, was apparently all the rage this year. My friend Jeremy, who was lucky enough to go, had some pretty interesting stories to tell about watching parties shift based on someone’s Twitter update. The always worth reading Chrisistopher Fahey had some pretty interesting observations on the phenomenon.

I’m sure there are more out there, but this should keep you busy for a while – it certainly has for me. With people like Richard Rutter, Mark Boulton, Khoi Vin and Christopher Fahey, how can you go wrong?

So you’re laying out some tabular data. (You wouldn’t be using tables for any other reason, now, would you? Didn’t think so.) You stopped by ALA and made some zebra tables to make your rows nice and clear.

Then you thought to yourself, “I think I’ll use the :hover pseudo-class to add a nice hover effect to those rows.” But soon it was “Arrgh, why isn’t it working in IE?”

OK, stop yawning, so this is old news. We already knew that IE only supports the :hover pseudo-class on anchors. You’ve already been using Suckerfish for your drop-down navigation, right? Great. Let’s put it to work on a table.

Note: If you’re not already familiar with Suckerfish, take a moment to read the link above, as I’m only going to cover what I tweaked in it, not the whole thing.

So what needs to change to make Suckerfish work with tables? Well, it starts out the same way: after identifying the browser as IE, you use getElementById to get your element, and store that in a variable:

searchRoot = document.getElementById("your-table-id");

Now, the original Suckerfish looks through the child elements of searchRoot for any <li> elements. But instead of list items, we are looking for table rows.

If you simply change node.nodeName=="LI" to node.nodeName=="TR", your script won’t work. The only direct child elements of a <table> are <thead> and <tbody>.

Here’s the trick: <tbody> will always be a child element, whether it’s in your markup or not. So JavaScript will not find a table row in the child elements of a table.

So first we have to get the table body:

for (i=0; i<searchRoot.childNodes.length; i++) {
node = searchRoot.childNodes[i];
if (node.nodeName=="TBODY") {

Then we can search through that for the table rows:

for (a=0; a<node.childNodes.length; a++) {
newNode = node.childNodes[a];
if (newNode.nodeName=="TR") {

Besides that, the rest of the original script stays the same! So that leaves us with our final script:

window.onload = function tableSuck() {
 if (document.all&&document.getElementById) {
  searchRoot = document.getElementById("your-table-id");
  for (i=0; i<searchRoot.childNodes.length; i++) {
   node = searchRoot.childNodes[i];
   if (node.nodeName=="TBODY") {
    for (a=0; a<node.childNodes.length; a++) {
     newNode = node.childNodes[a];
     if (newNode.nodeName=="TR") {
      newNode.onmouseover=function() {
       this.className+=" over";
      }
      newNode.onmouseout=function() {
       this.className=this.className.replace(" over", "");
      }
     }
    }
   }
  }
 }
}

To finish it all off, write the same CSS rule to cover both tr:hover and tr.over, just like with the original Suckerfish.

And it works! Check out the final results here.

OK, seriously: I swear the next time I hear “Web 2.0” I’m gonna throw up. I’m so sick of hearing that. It’s not 2.0, people. Some people are making some incredible new web-based apps, no question about it. Unfortunately, they’re getting buried in their own hype. Enough with the “Web 2.0” already! It’s hype, it’s spin. It’s as bad a Fox “News.” (ok, ok, that was too probably far.)

I was relieved tonight to realize that I’m not the only person who feels this way. (And he puts it much more eloquently than I do, so go read it.)

Update: Wow, since posting this, I’ve discovered that I’m far from alone in feeling this way. Seems a whole lot of other people feel the same way. I’m a particular fan of Eightface’s commentary on the subject, (which, it was just pointed out to me, was posted back in August 2005) and his suggest alternate name: “Xtreme Web 2005 Mega Enterprise Edition!”
(hat tip to Clint for the link)

I’m writing this entry in the brand spankin’ new Firefox 1.5, released tonight, and so far, it is wonderful. Notable improvements include dragable tab reordering, automatic updating for Firefox as well as your extensions and themes (and of course, you can turn it off if you desire), re-organized preferences with some wonderful new options (I can finally have my download window automatically close when the download is complete), and "find" as soon as you start typing. They say there are some speed improvements and other goodies, so we’ll see if those are noticable as well. AdBlock and Chris Pedrick’s WebDev extensions are working file, thankfully.

So far, my only complaints are that it broke my Furl extension (hopefully that won’t take long to get fixed), and that clicking in the location field no longer automatically selects the entire url. That annoyed me to no end when I first switched from Safari, but now that I’ve gotten used to it, I love it. Guess it’s time to get un-used to it (unless I overlooked that in the preferences…) But that’s a pretty small complaint.

Toss in a brand new (to me, at least) Grapple theme, and I’m a happy man!

Spread the word!

Update 1: Furl has a bookmarklet which should keep me happy until the extension gets updated.

Update 2: I’ve had some weird behavior with pop-ups and contextual menus (right-clicks). Anyone else been having this?

Forget the “Under Construction” GIFs of the past — Clint Fisher Art has a new take: a live re-design. He started the redesign “about 3 am on the 3rd,” and continues, tweaking the design on the live site. Clint got me in the nasty habit of “living on the edge,” working on files live on the server (don’t try this at home, kiddies — and always have a local backup). According to his post about the re-design, that was a large reason for the live re-design. Personally, I think it is a great exploration of the design process. Clint and I have talked many times about how CSS makes sketching on a site much easier, and this seems like a logical extension from those discussions.

While developing this site, a friend introduced me to the most amazing tool: IconFactory’s xScope. Holy crap. This is the best tool for webdev since Chris Pedrick’s Web Developer Extension for Firefox.

This thing is incredible. Rulers on your screen. Guides on your screen. A loupe. Monitor resolution size previews, complete with unique browser window sizes. Pixel coordinate cross-hairs. All floating on your screen, no matter what app you are in. I just found a one pixel diference between two of my pages, and realized that Safari is adding two pixels to my h3 tags. I never knew that before xScope. (I’m, uh, *ahem* a little anal about being pixel perfect.) All that, and it’s only $14.00!

So sorry for the commercial, but this tool is amazing. I’m really in awe. If you’re a web developer, it’s a must have.