Archive for February, 2004

SimpleQuiz › Part XIII › Empholdics › Conclusion

This last SimpleQuiz stirred up some great opinions. A few asked when you would ever need to emphasize, embolden and italicize test all at once. But isn’t that giving up too easily?

I think Patrick Griffiths comment sums it up nicely. And although “banana” is perhaps no better than “italic”, he brings up a good point — to stray from presentational class names whenever possible.

Just Emphasis

Remember, while <strong> and <em> oftentimes render text in bold and italics respectively, it’s not a good idea to rely on this. By default, most browsers will alter text wrapped in these elements — but if you are merely using <strong> and <em> for presentational purposes, it may be time to rethink using them.

To quote the W3C:

EM
Indicates emphasis.
STRONG
Indicates stronger emphasis.

Notice there is no mention of “bold” or “italics” here — that is intended to be taken care of with CSS. It’s all about emphasis — giving more priority to text than the rest that surrounds it. Do this first — then worry about style afterwards.

SimpleQuiz › Part XIII › Empholdics

Emphasis, bold, italics. What if you needed to handle all three at once? (bogus method used for the preceding example ;-)

Here are three options (plus any additional
scenarios you can think of). Note that the <strong> element could be swapped for the <em> element in these examples (the reverse), depending on what level of emphasis you were trying to convey.

The idea: choose <em> or <strong> to convey the correct level of emphasis, then apply the additional style that’s desired, whether that be italics or bold.

Q: Which method would you choose for handling emphasis, bold, and italics — at the same time?


  1. <strong><em>Empholdics</em></strong>

  2. <strong><i>Empholdics</i></strong>

  3. <strong><span>Empholdics</span></strong>

    With:


    strong span {
      font-style: italic;
      }


  4. <strong class="italic">Empholdics</strong>

    With:


    .italic {
      font-style: italic;
      }

SimpleQuiz › Part XII › Breadcrumbs › Conclusion

Looking over over the last SimpleQuiz, one of the comments that struck me was one by Darrel:

In terms of an anology, it refers to leaving a trail based on where you’ve been. Very few navigation systems actually do that though. Rather, they show you were you are in relation to the site structure.

Great point — and one that I think rules out a few of the other markup possibilities. An ordered list would be appropriate only if the list of links were an accurate trail of where the user has been. This is oftentimes not the case, as Darrel notes.

The other interesting method that was mentioned was the nesting of unordered lists to convey a hierarchy of directory structure. This could be the most semantic way of presenting the list of links — but as many suggested, it’s a bit of a markup overkill.

As Doug said:

…no one really wants to code this:

<ul>
 <li><a href="/">Home</a>
  <ul>
   <li><a href="/articles/">Articles</a>
    <ul>
     <li><a href="/articles/file.html">Title</a></li>
    </ul>
   </li>
  </ul>
 </li>
</ul>

It accurately portrays site structure … And nested lists represent a snippet of a site map in outline form.

Here’s a case (and this happens from time to time) where perhaps the method that’s more semantically rich, adds way more code than really necessary. And it’s got me scratching my head saying “it’s all about compromises again”.

If semantic purity is your goal, then nested lists may be the way for you — if simplicity is what you’re after, something like Method A might work.

The past few conclusions have me sounding like broken record — that it’s all about balance: Semantics vs. practicality vs. simplicity vs. requirements. Somewhere in the middle is usually just right.

The Obligatory I’m Busy Post

Sunset
The view out the front door of my house was particularly nice this evening, so I thought I’d snap a photo of it. I’m told Venus and the Moon were closer to each other than normal tonight. And I’d guess this is a good thing. My wife dragged her telescope outside and I must say the moon is pretty amazing when magnified. It tends to put things back in to perspective.
I suppose I’ve been busy with the usual lately and haven’t found the time to post here. Lots of things happening behind the scenes that will surface later on. All good things — including more priming and painting and caulking. It will never end.
But soon the leaves will appear again on the trees, baseball will return to Fenway Park and all will be right with the world.

SXSW 2004

I thought for sure I had mentioned this previously, but I guess I hadn’t. In a little less than a month, I’ll be heading down to Austin, Texas to SXSW. On Monday, March 15th I’ll be sharing a panel, “Hi-Fi Design With CSS” with Christopher Schmitt, Douglas Bowman and Dave Shea. Should be a great time, and I’m honored to be with such great company.
It’ll be my first time in Texas, my first time at SXSW and everyone I meet down there I’ll be meeting for the first time. I’m really looking forward to this part.
So if you’re heading down to the conference, be sure to say hi — I’ll be the one wearing blue (weather permitting).

Purchased Portability

PowerBook G4
I’ve just purchased a new 12″ PowerBook. And tomorrow, you all can laugh with me. You do know what’s going to happen tomorrow, don’t you?
Tomorrow Apple Computer will announce a sweeping upgrade to its entire PowerBook line. The 12″ model I chose will be $300 less, but will have dual 4GHZ G9 processors with 10GB RAM. A free, 100GB iPod will also be thrown in as a freebie.
Of course I’m exaggerating — but this is what happens when I buy a Mac. Every time.
This time around, I got tired of waiting. First waiting for MacWorld in January. Will Steve announce new PowerBooks? No. Oh, but they’ve updated PowerBooks like three weeks after MacWorld before. Oh, OK then. I’ll just wait a few more weeks. Nothing.
Then there was the constant refreshing of the rumor discussion boards (I’ve since deleted those bookmarks). Oh look! They’ve increased the font size on the PowerBook details page — that means new updates absolutely no later than February 2nd.
When all is said and done, I guess it doesn’t really matter when you buy. New models will keep coming out every six months or so. You just need to buy and forget about it. In my case, I had been needing this thing for a while. I had to buy it for a few reasons — but I still wanted to get the best deal. It’s a fantastic little machine. A work of art.
I’m curious. Who has the worst computer buyer’s remorse story? I’m confident it happens to everyone.

Firefox Tabs

It’s been brought to my attention that the Accessible Image-Tab Rollovers do not work properly in the latest version of Firefox (0.8). I’m inclined to think it’s a small bug in this latest build and will see if the next one catches up. Other :hover problems are apparently being reported as well.
Jeremy Flint was kind enough to try and get the tabs to work in Firefox, and by doing so may have uncovered a duplicate overflow: hidden; rule. He finds that by removing the duplicate rule, the tabs work fine in Firefox (and others).
I can’t remember why the overflow: hidden; rule was assigned to both declarations, nor can I remember when my last oil change was. Either there was a good reason at the time, or it was just duplicated by accident. Regardless, more testing is in order — as well as finding out if there is indeed a small bug in Firefox (which by the way looks to be a great version of a great browser).

The Search

So I’ve been looking for a new job — and so far it hasn’t been going well. It’d be silly for me not to announce something here, in the event that the esteemed readers of SimpleBits might be of some assistance. While my brief unemployment has allowed me to get some great things done, I don’t intend to stay that way.
I’m looking for a full-time web design/development/UI/webmaster type role at a cool company in the Boston/Eastern Massachusetts area (I just moved, so relocation is out for now). There are so many directions to head within these categories, so for the right company, I’m certainly willing to mold. Most of what I’m seeing out there so far is either contract work (which I’ve decided against for now), entry-level or crap.
So feel free to contact me if you know of anything, hear about a cool company that might be in need, if you work somewhere already that is looking to hire, or if you just want to chat about American Idol. I would be forever grateful.

SimpleCode

If you’re like me, than you’re starting to get tired of turning XHTML into entity-encoded markup, suitable for <code> examples. Today I thought I’d whip up a quick Perl script that will take ordinary markup, process it and do all of the turning of < to &lt; and > to &gt; — for you.

It will also recognize double spaces (to nicely format nesting) and turn those into “&#160;&#160;” (it will do the same for four spaces and six spaces as well).

screenshot

SimpleCode intends to make my life easier. It’s essentially in beta and took only an hour to put together — in fact I’ll bet there’s something out there that already exists and I just didn’t think to look earlier. I’m sure it’s missing some features, and that’s where you come in. It’ll come in handy for the SimpleQuiz examples — and I’d venture to say it would help for those commenting as well.

Feel free to use it — and grab the source code to put on your own server. It’s a single, self-contained file that just needs to be dropped in your cgi-bin. Set permissions to 755 and you’re good to go.

Update: Jesper has created a neat and tidy JavaScript version, and also helped me simplify a bit of the Perl source as well. v02 (and v03) already!