Markup Map for hCard Microformat (Update)

Knowing what elements are available in the hCard microformat is important when trying to apply CSS rules. The main problem is that there are so many elements it’s easy to get tripped up on how to best style an hCard.

To help understand how many elements are in the hCard and keep the block-level and inline elements separate, I followed Andy Clarke’s 3D Zen Garden map model and made my own 3D map for the hCard microformat.

3D hCard Map

3D hCard

Update: After asking Tantek to review the hCard map, he made some suggestions for improving it. For more information, see the notes section.

Notes

Keep in mind that this example is simply a base. The 3D map uses the live example as its base, however an hCard can add more elements, like instant messenger handlers, or remove some that are currently shown in the demo. It depends on how much information you have to work with. For a clearer demonstration of this, I suggest tinkering with the useful hCard creator.

Also the live example is an hCard geared for an organization. Therefore the fn and org class attribute values are used on the same a element.

In the previous version, I used “web.site” as a fictional Web address. Tantek reminded me that example.com Web address was registered by the IANA for this very reason. I keep Ohio in the map since that’s my new home state.

I fixed a typo in the last version where I carried over the class attribute tel for the email address’s div wrapper.

In my previous example I was representing block level elements in two ways: as being on top of visual boxes as well as being placed inside them as well. While that made perfect sense at 2 a.m., I reworked the presentation of block level elements to be bold and try to focus the boxes on grouping and nesting of elements. 

Dynamic Markup Maps

Lastly, I created this example using CSS rules (instead of going with Illustrator). The rationale behind using XHTML+CSS over a graphics editor is that I am more familiar with those technologies. Also I thought it would be a great benefit for Web developers to see a markup map (which could be dynamically generated) while using a tool like hCard generator.

The first step was creating the CSS rules, but I don’t have the spare time to implement the rest of the project myself. Though, maybe someone else can?

Thanksgiving Turkey Photo Essay

This year I decided to document the brining and cooking process my brother uses for the Thanksgiving Turkey. 

Thanksgiving Turkey Photo Essay

He followed Alton Brown’s 2004 recipe for Honey Brined Smoked Turkey.

Sort of.

Instead of smoking the bird, we put it in the oven (as you will be able to see) to get that unique holiday smell in the house. I couldn’t smell anything as my nose was congested most of the week.

For posterity, I present you with the recipe, but also for a selfish reason: I don’t want to google for fluid ounce conversions for honey next year. 

1 gallon hot water
1 pound kosher salt (2.5−3 cups = ~24 fl oz.)
2 quarts vegetable broth
1 pound honey (~ 1 13 cups)
1 (7‑pound) bag of ice
1 (15 to 20-pound) turkey, with giblets removed
Vegetable oil, for rubbing turkey

Combine the hot water and the salt in a 54-quart cooler. Stir until the salt dissolves. Stir in the vegetable broth and the honey. Add the ice and stir. Place the turkey in the brine, breast side up, and cover with cooler lid.. Brine overnight, up to 12 hours.
Remove the turkey from the brine and dry thoroughly. Rub the bird thoroughly with the vegetable oil. Heat the grill to 400 degrees F.

Use 1 Reynold’s Oven Bag. Spray Pam cooking spray in bag as lightly and evenly as possible. Add a bit of flour and shake bag to disperse flour around bag. 

Insert turkey into bag and following cooking directions that came with oven bag to determine amount of time bird should be in the oven. 

Two Minute Playlists for Getting Things Done

Ever had a pile of quick to-do’s that ate your entire morning? I have. And I’ve found a way to combat that.

If you’ve read Getting Things Done (book, wikipedia) and are into it like I am, you probably have a stack of 43 folders on your desk collecting dust.

When you use the system, it works—but for the most time, my collection of 43 folders on my desk checking the folders and processing the paperwork makes a giant inbox.

Chunking Short Tasks

However, one part of David Allen’s GTD strategy I’ve embraced is processing short tasks in under two minutes. 

I chunk short tasks–essentially collecting a long list of things that contains activities that I can knock out in a small amount of time, usually less than two minutes. This short task lists grows over a work day or two until it’s sizable enough to warrant about twenty or thirty minutes from my daily work schedule.

Instead of stopping work on a book or article, which requires more concentration than quick email reply, process some piece of postal mail, or what have you, I make a note of the small to-do item. Then return to the more important task at hand.

Two Minute Playlist

To help keep me focused when going through the list of short tasks is through music. I have a playlist of two minute songs on standby. 

When I’m ready to dive into list, I pull my list of tunes up and start going through my list. Whenever I hear a change of song, I know it’s time wrap up what I’m doing as soon as possible and go to the next task. 

I love this method as it doesn’t have me keep and reset a timer on my Mac or by my computer every two minutes. Also, the method leverages material I already have floating around virtually on my desktop.

Creating Two Minute Playlist

First, if you haven’t already installed the program, get iTunes from Apple (it’s free). And, if you need to install iTunes (mostly for Windows users), make sure to have the software import your music library.

Download iTunes

Next, create what’s called a Smart Playlist (File > Smart Playlist).

Smart Playlists are dynamic indexes that are based on any number of criteria you set up. What this means is that playlists can change on-the-fly as new songs are added, deleted, played, and so on. iTunes keeps tracks of all this stuff for you without any manual input. 

For this demonstration, we are going to create a Two Minute Smart Playlist, by setting up one simple rule: any song that is in the range of being two minutes long, gets added.

Smart Playlist editor

With that, all you need to do is start collecting tasks that are easy to knock out. When you reach a certain limit, like ten or so, make time into your schedule and start rocking out while gaining an increasing sense of accomplishment.

Personally, I like coming across simple tasks. It’s a happy thing. It’s honestly like collecting gold coins.

Reflecting on the Length of Music

Setting up a playlist with the limitation is two minutes gives one to reflect on the length of songs. Can someone make a really good song in under two minutes? How many songs are in your collection that are about two minutes? 

When I first went and tried this method, I thought I would have about 10 songs that fit that category, most of them being from that cheap Halloween “scary sounds” CD I bought years ago in a pathetic attempt to scare trick-or-treaters. The experiment, I thought, was sure to be an exercise in sifting through the dregs of my music collection.

However, it turns out that a fair number of songs in my collection turned up. Some of them were, in fact, surprises. One being that I seem to have too much Ani Di Franco or she needs to start making longer songs.

What turns up under two minutes in your collection?

5 CSS3 Resources for Web Designers

When Internet Explorer 7 for Windows (IE7) was released in early October of this year, the browser featured the hard work of many developers and engineers to bring the browser up to par in rendering CSS. Sure, there are some things missing, but overall it’s a solid rendering browser (with it’s fair share of bugs).

Yes, IE7 is the browser we should have had five years ago and because of that Web designers can finally do what they haven’t been able to do for quite a long time: start looking foreword. Namely, at CSS3.

I decided to cull together a short five item resouce list to help designers get on a good path for learning more about CSS3:

  1. Jina Bolton’s presentation slides CSS3 and What Could Be (PDF) from her presentation at FoWD2007 is a good start to the potential of CSS3. (I wish there was audio to go along with it!)
  2. Roger Johansson’s Web site is where I go to when I need a quick refresher on the upcoming CSS3 selectors when I want to stop getting cross-eyed reading the W3C documentation.
  3. Cédric Savarese writes about the CSS3 Multi-Column Module at A List Apart:

    “The W3C multi-column module is a CSS level-three working draft, proposed by the W3C to extend the current CSS box model. The module’s intent is to allow content to flow into multiple columns inside an element. It offers new CSS properties that let the designers specify in how many columns an element should be rendered. The browser takes care of formatting the text so that the columns are balanced.” 

  4. Everyone likes rounded corners. I wrote up four different methods for pulling off the technique in the last edition of my CSS Cookbook. Fellow CSS author and speaker Andy Budd wrote about a pure CSS3 solution to tackle rounded corners that works in Firefox.
  5. Check out a preview of CSS3 text effects, backgrounds, borders and more at CSS3.info.

There are a few of CSS3 sites I picked out, but what are your favorite CSS3 resouces?

CSS Cookbook Reader Contest

As I noted earlier, one of the hip things about being at Molly Holzschlag’s Train the Trainer was the free swag the attendees got. 

I snagged my fair share of the swag for helping out, but really can’t justify having some of the more choice elements of swag as either I don’t need it or I already had copy at the office. 

So, I decided to run a little swag giveaway contest for those readers that have picked up a copy of the CSS Cookbook.

Apologies to Dan Cederholm, but I’m going to copy his book contest he had a while back, but with give it a little twist. 

How to Enter

There are three easy steps to enter:

  1. Take a picture of you and your copy of CSS Cookbook and post it Flickr. Funny poses encouraged, but not required.
  2. Once the photograph is on the site, tag the photo with csscookbook.
  3. Then post a comment on this blog post with a link to your photograph.

How to Win

I’m going to generate a couple of random numbers and match them to the comment number for this blog post. (Note that comment numbers are generated automatically and sequentially.) If that matching blog comment has a link to flickr with a valid photograph of the CSS Cookbook, it wins.

Pictures need to be posted before 11:59pm ET by Thursday November 8th.

The Prizes

There are two prize packages, Software+Book Prize and a DVD Prize:

One Software+Book Prize winner will receive a copy of Microsoft Expression Web and a copy of Transcending CSS by Andy Clarke, edited and with a foreword by Molly, and an introduction by Dave Shea.

The DVD Prize winner will receive a copy of CSS for Designers that’s from Lynda.com which features Andy and Molly. 

I’ll be mailing out the prize packages so they can get out of the office ASAP. 

Sounds good? Best of luck!

CSS Attribute Selector Bug in Safari

During last weekend’s Train the Trainer workshop, Jinny from University of Georgia asked a question that gave Molly and I pause: 

Are attribute selectors case sensitive? 

As someone who strives to write correct markup and CSS rules, I always try to make my CSS class and ID attributes match case. At most, I worry about my ID or class selectors have a typo, but worry about attribute selectors? To be honest, it wasn’t till Internet Explorer 7 for Windows (IE7) came out that I’m giving attribute selectors a closer look. 

So, on the spot, I dove into writing up a quick test case and run it through the major browsers: IE7, Firefox 2, Safari, and Opera. The results were that all the major browsers are case senstivie except Safari. 

However, I wasn’t satsisified with that test case. To be honest, Molly wasn’t either. The first pass earned Molly’s dissastifcation as I didn’t test against XHTML first, but settled for HTML 4. (I quickly tested against XHTML, but the results were still the same: Safari allowed for case insensitivity.)

Now that I’m back home, I decided to write a tighter test case in XHTML and HTML and run it through a few more browsers than I tested at the workshop. These results can be viewed in Table 1.

Table 1. Case Sensitivity Review of CSS Attribute Selectors
Web Browsers DOCTYPE
  XHTML HTML 4
IE 7 Yes Yes
Safari 1.2 No No
Safari 1.3 No No
Safari 2.0 No No
Safari 3.0 (iPhone) No No
Firefox 1.5 Yes Yes
Firefox 2.0 Yes Yes
Opera 8.5 Yes Yes
Opera 9.21 Yes Yes
Camino 1.0 Yes Yes

Note that links within the table include screenshots of browsers and links to test cases.

Discussing Case Senstivity of Attribute Selectors

Once we find something odd, the first thing to do is to read the specifications to see what is the “right” behavior for the browser to follow.

First up, this is what the CSS 2.1 sepcification says about case sensitivity: 

All CSS style sheets are case-insensitive, except for parts that are not under the control of CSS. For example, the case-sensitivity of values of the HTML attributes “id” and “class”, of font names, and of URIs lies outside the scope of this specification. — CSS2.1, 4.1.3

And while we are at it, let’s take a look at the HTML specification as well, which states that the title attribute is also case sensitive. 

What Does This Mean? 

The short version of the results is that Safari is wrong and the other major browsers that support attribute selectors appear to be getting it right. (Yes, that includes IE7.)

Safari CSS Filter

How can you, the Web developer always looking for that edge in coding, use this bit of information? The obvious thing to do is to send CSS rules to only Safari browsers. 

For example, write a CSS rule like so:


p[title="foobar"] {
 border: 1px solid red;
}

And then set up the HTML like so, making sure to change the case of the title attribute’s value:


<p title="FoObAr">The content is styled with a 1-pixel,
 red border in Safari.</p>

Note

Thanks to Jinny for asking an intriguing question and to Porter for providing his usual excellent W3C specification translation services.