Posts from 2007

This evening, we decided to cap off the weekend with dinner out.  Carolyn was in the mood for french fries, and the rest of us were looking for decent dinner fare, so we decided to hit Brennan’s Colony.  This is one of the more fascinating restaurants on our side of town.  From both the outside and the inside, it looks like a low- to middle-rent bar, all uncushioned wood benches and odd angles and dimmish lighting.  The baseline menu is burgers and fried food at very affordable prices.

And then you get the dinner menu, and you wonder from which other restaurant they swiped their menu.  Chicken breast stuffed with goat cheese in a bearnaise reduction, or words to that effect.  Mint-crusted New Zealand rack of lamb.  Et cetera.  It is, to use a word I picked up on my last trip to Ye Jolly Olde Englande, a gastropub, only with really good food.

We hadn’t gone for a while because, being a bar, smoking was permitted, and while they had an area labeled “No Smoking” it was about as effective as setting up a ring of buoys just offshore and marking that area “No Water”.  We used to go every now and again in olden days, but after Carolyn’s arrival, it was stricken from our dining list for the obvious health reasons.  However, Ohio voters passed an indoor smoking ban late last year, so we could once again eat and breathe.  Everybody woohoo!

Only when we arrived and asked for a table on their newly opened outdoor patio, we were told Carolyn wasn’t old enough to be seated there.  We could eat indoors, but the patio was off-limits to anyone under the age of eighteen.  This baffled us just a little all by itself, and then we turned around to behold a pre-teen boy sitting at the bar, eating a sandwich and drinking a Coke.  At least we hoped it was a Coke.

We brought this oddity (and, if I’m not mistaken, violation of Ohio state law) to the staff’s attention, and were told that he was seated there because they were so busy.  But no kids on the patio!  No no!  That would be, um, whatever they feared would come of allowing children to eat at an outdoor table.  The apocalypse, no doubt.

So we ate at The Tavern Company a little way down the street, where they were more than happy to have us sit wherever we liked, indoors or out—the presence of a smallish, well-behaved child notwithstanding.

I think we’ll keep to that seating arrangement for as long as the policy at Brennan’s remains.

• Odd Seating Arrangments was published on Sunday, September 16th, 2007.
• It was assigned to the Cleveland and Food categories.
• There have been four replies.

A while back, I got fed up with the memory leaks of Safari, but found Firefox to be a bit too poky for everyday browsing.  Also, I can’t even find words to describe my seething hatred of Firefox’s insistence on keeping a blank window open when I close the last tab in said window.

So I started using Camino as my default surfing browser.  Firefox is still my web development environment, of course; I just seethe for a moment when a blank window occurs and then keep going.  Life in Camino has been a mostly positive experience, but there are a few things that really irk me.  I’m wondering if the (Lazy)web can help me fix them.  To wit:

• The form autofill routines latched on to some early mistakes of mine, and now just will not let go (for example, my name gets filled into the e-mail field and vice versa when commenting on WordPress blogs).  I want to fix this.  Where do I find that information?

• Safari has an autofill feature I really like, which is that it remembers every input ever made for a given field on a given page, and uses them for autocompletion.  For example, it remembers every blog post title I’ve ever input through it, which helps me avoid duplicates.  Is there a way to get or add something similar for Camino?

• Is there a way to turn off all favicons, including the default green diagonal bookmark, in the Bookmarks bar, but leave them in the Bookmarks menu?  All I can find is browser.chrome.favicons, which seems to kill all favicons everywhere, and doesn’t seem to turn off the green guys (unless I did something wrong).

Camino hasn’t been all pain, certainly.  I absolutely love its state restoration feature, for one.  And once I got into about:config and flipped a few settings (such as disabling “Delete” as a back button equivalent), and ran the shell command to get inline URL autocompletion (as documented most of the way down this “Hidden Preferences” page), I was much more satisfied with my Camino experience.  I’d just like to get it the rest of the way there, if I can.

• Tweaking Camino was published on Friday, September 7th, 2007.
• It was assigned to the Browsers category.
• There have been thirty-two replies.

On stage at An Event Apart Chicago, I made reference to recent efforts I’ve been making to develop a set of “diagnostic” styles.  I’d hoped to have them ready for presentation in Chicago, but didn’t get it done in time.

Well, they’re still not really done, but as I’ve now torn them apart and rebuilt them three or four times, with no real end to that cycle in sight, it’s time for me to get them off of my hard drive and into the public eye.  It’s a little bit complicated, so rather than post the whole thing in this entry, I’m going to link to a demonstration page.  I first want to say a few things about it, though.

The primary goal here is to have a set of rules that can be applied during the development phase of a new layout.  These rules’ aim is to visually highlight problems in the markup.  For example, here’s one of the rules:

a[href="#"] {background: lime;}
a[href=""] {background: fuchsia;}

That brings some eye-watering attention to any link that has an empty href, or is (most likely) being used as a JavaScript trigger with no fallback.

Where things got tricky was when I wanted to do things like higlight images that didn’t have alt or title attributes.  In a perfect CSS3 world, I could just say img:not(img[alt]) to select non-alted images.  At least, I think that’s what I would say—:not() syntax makes my temples throb.  Since I was developing these with the idea of releasing them to a more general development audience, though, I decided to use regular old non-:not selectors.

So what I ended up doing, in slightly simplified form, was this sort of thing:

img {outline: 5px solid red;}
img[alt][title] {outline-width: 0;}
img[alt] {outline-color: fuchsia;}
img[alt], img[title] {outline-style: double;}
img[alt=""][title], img[alt][title=""] {outline-width: 3px;}
img[alt=""][title=""] {outline-style: dotted;}

The logic works out like so:

1. Set all images to have a big red outline.
2. If an image has both alt and title attributes, set the outline width to zero.
3. If an image has an alt attribute, set the outline color to fuchsia.  This means the outline of any image that doesn’t have an alt attribute will stay red.
4. As long as an image has either an alt or a title attribute, make its outline style double.
5. If an image has an empty alt with any kind of title, or vice versa, make the outline’s width three pixels.
6. If an image’s alt and title attributes are both empty, then make the outline dotted.

Whew.  Maybe I piled a few too many conditions in there, but I wanted to get some finer granularity on the results, which you can see demonstrated (along with several other things, like highlighting table headers without scope attributes and tables without summary attributes) at the diagnostic demonstration page.  On that page, you’ll see a number of examples and the style sheet that drives them all.  If it’s getting in the way of seeing what’s going on, move the mouse over it to mostly clear it away without actually removing it.  Mouse back out to bring it back.  (Maybe I should reverse those states—what do you think?)

Admittedly, much of what these styles do can be replicated with tools like the Web Developer Toolbar.  The advantage I find with writing my own diagnostic styles is that I can tune them to present exactly the way I want them.  Outlining deprecated elements is fine, but what if I’d rather make them lime-green on cyan to really drive the point into my optic nerves?

Anyway, I don’t for an instant think that these constitute a replacement for the WDT.  They’re just another handy tool to have in the toolbox.

A final note: when actually using diagnostic styles, all of the declarations should be marked !important so as to ensure their application.  I left those directives out of the demo page for clarity’s sake.  If you’re going to use diagnostic styles of this sort in your own projects, remember that you’ll need to add them.

I’m putting these out for comment, suggestions, and general community improvement.  Anyone see things we could add or upgrade?  Let us know!

• Diagnostic Styling was published on Friday, September 7th, 2007.
• It was assigned to the CSS and Tools categories.
• There have been seventy-two replies.

Ma nun me lassà, Nun darme stu turmiento!

Luciano Pavarotti died last night of pancreatic cancer at the age of 71.

Among my “classical” recordings, the original Three Tenors concert holds a special place, one that has survived nearly every iPod reorganization I’ve undergone.  What I find most fascinating about that recording is the marked contrast between the three stars, and just how much Pavarotti stands out.  I’ve thought about the reasons why that is, and I think it comes down to his restraint in the use of vibrato.  Whenever I hear a singer whose long notes are more warble than tone, I wince.  I recognize the physical skill that goes into producing the sound, but the result is actually uncomfortable to me.  This is why there’s hardly a soprano I can stand; they all seem to exist solely to find long notes to strangle.

Pavarotti, in contrast, used vibrato as a shading on his notes.  At their core, they were long and pure and steady.  Yes, at times he went for all-out vibrato, but it always seemed to make sense when he did.  He wasn’t warbling to show that he could do it; he did it when and how it was right.  That, coupled with the sheer power of his voice, creates an emotional punch that I’m powerless to comprehend but joyful to behold.

I listened to some Pavarotti this morning, and though his heartbreaking renditions of “Nessun Dorma” and “Torna A Surriento” have always misted me up a little, this time there was an extra tightness in my throat.

Part of me hopes that nobody is asked to sing at his memorial services; or, if anyone is, that they turn down the invitation.  Nobody could do the job as well as he would have.

E noi dovrem, ahimè, morir, morir!

• Torna A Surriento was published on Thursday, September 6th, 2007.
• It was assigned to the Culture category.
• There have been ten replies.

Despite my best efforts to cut back on travel, the 2007 world tour seems to be continuing apace.  In addition to my sessions at An Event Apart in San Francisco at the beginning of October, I’m due to hit (at least) three four other stages before the year is out.  Here’s the skinny:

• I’ll be doing a short bit on microformats at the Cleveland Web Standards Meetup.  If you’re in the area and interested, please do sign up for the group!  We’ve been growing quickly and, having shifted our meeting place to the Tri-C West campus, now have room for a lot more growth.  We’re also moving beyond simple gathering, with some great ideas for helping out local organizations and sharing knowledge and skills.  Even if you can’t make this month’s gathering, you should still join up so you’re in the loop.

• I’ll be delivering the keynote at the first annual CIW Partner Conference in Destin, Florida, at the end of September.  No official title for the talk as yet, but the general theme will be how we’ve gotten to where we are, what I see as the best ways to train the next generation of web designers and developers, and the best tools currently available to current designers/developers.  I may also participate in a panel, depending on exact scheduling.

• In mid-October, I’ll be on stage at the first Voices That Matter: Web Design conference in San Francisco (which will make my second trip to the city in the space of three weeks).  We’re looking to do sort of an open “Conversation With…” format with lots of audience questions and commentary, which is a little unusual for me.  Jeffrey and I did a conversational session with Brian Alvey at ‘Meet the Makers’ back in the day, but I haven’t really done a Merv Griffin since.  Should be fun!

• Then, in mid-December, I’ll be doing three hours of CSS at Web Design World Boston.  It will pretty much be like it was last year: a mix of deep dives into obscure (yet important) corners of CSS, assessments of current trends, fun with cutting-edge techniques, and open-format Q&A.  We’ll have three hours (with breaks) to play around, so that’ll leave plenty of time to wander into the weeds and come back mostly intact.

I’m starting to do some rework on the sidebar here on meyerweb, and a “coming soon” list is one of the things I have in mind.  Those of you who actually do drop by the site will probably notice the sidebar mutating over time, since I’m going to do my reworking live and in public.  That sounds so much more grandiose than the reality of fiddling with markup and making mistakes, doesn’t it?  It’s editing 2.0!

• Staging The World Over was published on Tuesday, September 4th, 2007.
• It was assigned to the An Event Apart, Cleveland, and Speaking categories.
• There have been two replies.

Chicago, Chicago.  It was my sweet home Chicago for all of a year, and admittedly that was back around the national bicentennial, but I still enjoy my visits.  I’ve just learned to accept that the traffic jams are omnipresent, and to chill accordingly.

We drove in on Friday afternoon and left Wednesday morning, tired but content. As I knew would be the case, the folks who came to AEA Chicago were filled to the brim with awesome.  We had a great time röcking out, groovin’ to the tunes, filling Fadó, wondering about Shreddies exchanges, and savoring the lunches.  I’ve gotten my pictures onto Flickr in what is, for me, close to record time, and added them to the show’s photo pool.  All with geocoding, natch.  Gotta geocode.

If you want to know what other people thought of it, Jeffrey‘s got some links—perhaps understandably, Brain Freeze’s post is one of my favorites—and Technorati will be happy to point you to what everyone’s saying.  I can tell you what I thought, though: fantastic.  I can’t wait to do it again!

• Magnificent Chicago was published on Friday, August 31st, 2007.
• It was assigned to the An Event Apart category.
• There have been eleven replies.

CSS Sculptor got a very nice write-up from King Z over at The Daily Report, for which I thank him profusely.  I think he’s pegged the tool pretty well in terms of its intent and target audience(s).

What mystified me was the turn the comments took: suddenly they went from giggling over the splashimation and exhortations to port Sculptor to other environments (Coda got several mentions) to an multi-party argument over which was better, Sculptor or Project VII‘s CSS Layout Magic.

Um, why?

As Al Sparber, creator of Magic, stated quite accurately, “They are two very different tools conceived in very different ways”—nothing to add to that, really.  But even if we were to imagine a world where they were very similar tools that operated in very similar ways, I still don’t see why it would have to be a “battle” situation.  It’s not like our world is so small that there’s only room for one of any given thing.

I mean, take a step back and look at the wider development landscape.  There are a whole bunch of web development environments out there (Dreamweaver, Expression, Coda, Firefox with extensions, etc.).  All of them serve the community, each in its own way.  Each is used by a community of people, many of whom gather to help each other improve their skills.  Why try to create conflict between those communities?  What useful purpose could that possibly serve?  We’d be as well served to start a Mac vs. Windows vs. Linux debate.  Which is to say, not at all.

And so it is with the artificial conflict that so mystifies me, that of Sculptor vs. Magic.  Project VII has very loyal customers, and rightly so: they put out great stuff.  I hope that we’ll also have loyal customers, because that will mean we also created something great.  (Obviously, I already think we did, but then I would, wouldn’t I?)  It seems kind of obvious to me that these two communities have way more in common than they do differences.  My usual reaction on encountering someone who’s a huge fan of a web site or a piece of software is to smile and nod knowingly, like we’re part of a secret club or something.  Because in a sense, we are.  We get fired up by the same kinds of things.  We’re our kind of people.

I admit this is veering dangerously close to plaintive “can’t we all just get along?” territory, but c’mon, folks.  There’s already more than enough tension and conflict in the world.  Let’s try not to add to it, yeah?  Now everybody throw the hörns!  Seriously, throw ’em, and put in a little “ROCK!” just for me.  You’ll be amazed at how much better you feel.

• Contrived Conflicts was published on Thursday, August 23rd, 2007.
• It was assigned to the Culture and Web categories.
• There have been thirteen replies.

I alluded yesterday to “backstage work”.  One of the things going on back there was my work with the folks at WebAssist to create a tool that allows both novice and experienced web developers to create and alter CSS-driven layouts.

The end result is Eric Meyer’s CSS Sculptor (v1.0.0), a Dreamweaver extension that gives the user tons of options and outputs pretty darned clean markup and CSS.  (Even if you’ve no interest at all in Dreamweaver tools, you should still follow that link.  How many chances are you going to have to see me throw the mëtäl hörns?)

Well you might wonder how much code I contributed to this software.  Well, okay, none.  What I did contribute was guidance on the interface and its organization; on what options to present, and how; on ways to handle things like print styles and the print CSS options; and on the CSS and markup that results, including the optional explanatory comments in the CSS.

One of the primary goals with this project was to create a tool that would expose as much CSS as possible to users without overwhelming them, and that would actually teach by dint of showing all the options.  One of the things we heard a lot in the beta test was users saying things like, “Oh, so that’s what that CSS thingy does! I’d always wondered.”  Which was exactly what we’d hoped to hear, along with “Hey, I’ve never heard of this CSS property before!”.  (We heard that one too.)

There are some things I expect will be improved in future releases, like shorthand value minimization—the simplest example of that being a condensation of 0 0 0 0 down to just plain 0.  We discussed including that feature but decided to postpone it for a variety of reasons, not least of which was working out the logic required to figure out when to minimize, which isn’t as simple a problem as you might first think.  There were a few other things we didn’t get in the initial release; such is the way of software.  We’ve got a list of potential features, of course, and are looking forward to hearing what users suggest.

As for what features did make it in, there’s a fairly large list, so it’s probably best to check out the Features page or take the product tour—with video commentary starring, you guessed it, yours truly.  So if you’ve ever wanted to see me greenscreened over screenshots and being intermittently goofy, then at long last your prayers have been answered!  (Or will be, once we get the load problems resolved.)

What makes this whole thing an especially interesting experience for me is that, for the first time in my life, I’m participating in an affiliate program.  Basically, what I earn from sales of CSS Sculptor depends on affiliate fees earned by referral links like this one here (and also earlier in the post).  That might sound like a rip-off, but it has the potential to be quite the opposite.  The affiliate cut is literally an order of magnitude greater than any reasonable per-unit royalty would be.

This compensation scheme (as they say in the UK) is actually an experiment on both sides: WebAssist has never really worked with an outside individual on a product like this, and so they honestly don’t know if the affiliate approach will pay better than a per-unit royalty, or worse.  So we’re going to try it out and see what happens.  Fortunately, I’m in a position that I feel I can afford to experiment like this, allowing both myself and WebAssist to find out what works best in the long run.

Thus, if you’re planning to buy CSS Sculptor or know someone who is, I’d be grateful if you either clicked through one of the links hereabouts or linked to the product using my affiliate URL.  I’ll have a link in the sidebar in the near future as well.  The sidebar’s due for an overhaul anyhow.

So that’s one of the things that’s claimed my time over the last few months, and I’m pretty excited that it’s seeing the light of release.  I’m even more excited about finding out what people think could be better about it so that we can improve what’s already a pretty darned nifty tool.  If I do say so myself.

• CSS Sculptor Released was published on Thursday, August 23rd, 2007.
• It was assigned to the CSS and Projects categories.
• There have been fifty-seven replies.