Thoughts From Eric Archive

This afternoon, I spotted the following sitting in a driving rain on a street corner half a block away from our house.

Uh…

• Somebody Must’ve Been Tanked was published on Tuesday, November 15th, 2005.
• It was assigned to the Humor category.
• There have been eleven replies.

During last week’s workshop in Chicago, I was asked to discuss Alex Robinson’s One True Layout.  This presented a bit of a challenge, since the article and its contents are rather new.  While I’ve read through it all and grasped the main points, I wasn’t entirely sure I grasped the nuances.  For that matter, I’m still not entirely certain that I do.  And I tend to be wary of speaking about things I don’t fully understand.  Still, the audience was interested, so I took the plunge, figuring that I could stick to the bits I knew relatively well.

The Any Order Columns seem straightforward enough, once you get that it’s using margins to shift elements around.  The Equal Height Columns aren’t really, perhaps more properly being called “Extremely Tall But Clipped Columns”, but they simulate the job well enough to count.  And then there is the case of Vertical Grids, which I’m still pondering.

But as an illustration of why I say I’m not sure I grasp all the nuances, it was literally while presenting on this topic during the workshop that I hit on an extension of Any Order Columns (AOC) that allows for AOC to be used with columns of mixed width measures.  It came in response to a question about that very thing.  I’d been showing how to do AOC with columns sized with consistent units, like all with percentage widths or all with pixel widths.  But, an attendee asked, what if you wanted to have one column with an em width and another with percentages?

Say, for example, you wanted the first and second blocks (to use the terminology from Alex’s examples) to be the center and right columns, respectively, and the third block as the leftmost column.  Furthermore, suppose you want the left column to be 10em wide, the center column 40em wide with 1em ‘gutters’, and the right column to be 200 pixels wide.  I’m using pixels because it’s a commonly-used unit, but if it makes you feel better, assume there are Flickr images there or something similar in that column.

All right.  So we have to move the third block leftwards by 40em of center width, 2em of gutters, 10em of the space it will occupy, and 200 pixels of the rightmost column—the second block.  That’s 52em + 200px, which is exactly the sort of thing CSS doesn’t allow for a variety of reasons, some more reasonable than others.  IE/Win allows expressions, but only with a proprietary value syntax that nobody else supports.  And it potentially could be done with JavaScript, which would require pulling some font-size information in order to compute various em widths.

Or… we could relatively position a float, using the float’s margin to handle one of the measures, and the relative positioning to handle the other.  So you start like this:

#block3 {float: left; margin-left: -200px;}

That will get the third block to sit right on top of the second.  That’s taken care of the 200 pixels, but what about getting it the rest of the way?  Add the following:

#block3 {float: left; margin-left: -200px;
  position: relative; left: -52em;}

This puts the third block right where we want it.

There’s one exception: IE5/Mac, which doesn’t pay attention to the relative positioning when the element’s been floated.  So far as I’ve been able to discern, this is the one reduction of browser support from Alex’s original AOC.

With a little bit of math, you can make this work so long as the elements to the left of the shifted column use no more than three different units in their sizing.  To handle two types of units, you could do something like this:

#block1, #block2, #block3 {float: left;}
#block1 {width: 35em; padding: 0 20px; margin-left: 9em;}
#block2 {width: 12em; padding: 0 15px 1em 5px;}
#block3 {width: 8em; padding: 0 0.5em;
   margin-left: -60px; position: relative; left: -56em;}

(code example with browser workarounds)

This approach would permit the ability to drop in pixel-sized decorations, like separators or drop shadows or whatever, while preserving em-width column contents in order to scale with font sizes.

Now suppose you have a mixture of all three unit types, which is a case I didn’t tackle in the workshop.  I might even have said it wasn’t possible to handle, but if I did say that, I was wrong.  With the addition of a negative right margin on the second column, we can handle all three units, as seen here:

#block1, #block2, #block3 {float: left;}
#block1 {width: 50%; margin-left: 11em; margin-right: 1em;}
#block2 {width: 200px; margin-right: -200px;}
#block3 {width: 10em; margin-left: -50%;
  position: relative; left: -12em;}

(code example with browser workarounds)

Note that I’m not saying that you’d necessarily want to mix fixed-width columns with fluid-width columns.  Doing so is a potentially volatile mix when using CSS-driven design, and this technique doesn’t make it any more or less volatile.  If you want to do it, though, this is a powerful approach.

In the examples to which I pointed, I came across some intermittent appearances of the double-margin float bug in IE5.5/Win, though oddly not in IE6/Win.  I didn’t try to work around these inconsistencies beyond using the display: inline hack from Alex’s original examples, but I’m sure they’re surmountable.  It’s probably as good a case as any for using conditional comments to serve up fixes to pre-IE6 versions of IE/Win.

You may have noticed that, if the browser window is reduced in width, the columns start dropping in the two-unit example.  That’s something that could likely be handled with a sufficiently wide container, although doing that risks the dread horizontal scrollbar.  You’d get the same scrollbar with either older CSS layout approaches or with table-driven design, though.

I suspect there are even more combinations and nuances to be found in the AOC technique, and still more in the column and grid ideas Alex has laid out.  Hopefully I’ve made a good start here.  For any omissions or inaccuracies there may have been in my Chicago presentation, I hope the attendees and organizers will accept my apologies.

• Multi-Unit Any-Order Columns was published on Wednesday, November 9th, 2005.
• It was assigned to the CSS category.
• There have been forty replies.

Recently, Alex Robinson published an article titled “In Search of the One True Layout“, and it basically turns the conventional wisdom about what CSS layouts can and can’t accomplish on its ear.

One of the article’s primary aims is nothing less than enabling multi-column layout using no extra markup (beyond a div to enclose each column’s content) and allowing the columns to be in any document source order.  Impossible?  No.  It appears to have done just that in all current browsers, and several non-current browsers as well.

Assuming this technique stands up over time, and I see little to no reason why it would not, this is a truly major development (and that’s an understatement).  There is a problem in recent versions of Gecko-based browsers which you can read about in Bugzilla entry 312777.  The problem has been fixed in very recent builds, but the question is whether or not the fix will make it into Firefox 1.5.  In comment 40 of that entry, one of the engineers indicates that having web developers put in their thoughts on the importance of this fix would be welcome.

Now, we don’t want to create a stampede here.  However, if you have a Bugzilla account and your assessment of the importance of the bug varies from the comments posted, or you have something new to add to the comments, then by all means contribute.

Getting back to Alex’s article, it also tackles the desire for equal-height columns in a tableless design environment.  Then, just to pile it on, Alex knocks out a way to create vertical grids without tables.  Later on, he ties it all together into one neat, shiny package.

So that’s basically killing three long-standing frustrations of standards-oriented design with one stone.  Any one of them is notable in its own right; put the three together, and I’m pretty much emerald green with envy over here.  It might just be time for me to consider hanging up my spurs, folks, ’cause it looks like there’s a new sheriff in town.  And he’s packin’.

• Layout Revolution was published on Tuesday, November 1st, 2005.
• It was assigned to the CSS category.
• There have been thirty-one replies.

With the finishing of the basement and the installation of the new TV, it was time to dump the cable company.  As a result of the feedback I got from people, I ended up choosing Dish network.  (Thanks to everyone who commented!)  Oh, did it feel good to jettison at least one localized monopoly.  I never liked Adelphia, not from the day they arrived in town.  The criminal indictment of their founder and some of his family members didn’t do much to improve my perception, either.

Of course, when you sign up for any new media service these days, you get swamped with a zillion deals and promotional packages.  I ended up with three free months of movie channels—HBO, Cinemax, Showtime, and a variety of offshoot niche channels.  There’s something like twenty-five of them.  At the end of the three months, I have to cancel or else they start charging me for the movie package.

I’ll be cancelling.  It’s kind of handy having all those movies available, and I’ve caught a few I wanted to see in theaters but didn’t.  However, there is something about these “premium” movie channels, every last one of them, that kills the deal for me.

They all broadcast pan-and-scan formatted movies.  Not a letterboxed, widescreen showing to be found anywhere.

Last night, I found myself gritting my teeth over the ruination of several shots in Harry Potter and the Prisoner of Azkaban, a movie I was only half watching as it was.  Characters just vanished from shots that were, of a sudden, horribly balanced.  I can only imagine what outrages would be perpetrated on some of the classics of cinema.  I mean, come on.  The frickin’ SciFi channel shows letterboxed movies on a regular basis.  If the geeks over there can figure it out, you’ve got no excuse.

In short, there’s no way I’ll be paying to have mangled movies delivered to my home.  Fix that problem, and I might be tempted to sign up.  Otherwise, I’ll spend my movie-related money elsewhere, thank you very much.

• Premium Channels Just Aren’t was published on Thursday, October 27th, 2005.
• It was assigned to the Culture category.
• There have been thirteen replies.

After my recent post about teaching Carolyn sign language, several people, many of them new or soon-to-be parents, asked for advice on the basics.  Right up front, let me say that I’m not an expert in signing, or early childhood development, or any of that stuff.  I’m just a parent who’s tried to do his best for his daughter.  That counts for a lot, but this is still just one person’s perspective.  Before embarking on any program, consult your physician, blah blah blah.  Get me?  Cool.

So here’s what we learned, and what we plan to do with our next child.  (That’s not a stealth announcement, by the way.)

When we started out, it was with the book Baby Signs by Acredolo and Goodwyn.  The Baby Signs program—and it is a whole program now, with franchises and everything—employs a reduced and somewhat simplified subset of American Sign Language (ASL).  Many of the Baby Signs are in fact copies of ASL signs, but there are a few that are not.  The simplifications are meant to compensate for the lack of fine motor skills in infants.  For example, one sign for “dog” is snapping one’s fingers.  There’s no way most infants, or even toddlers, are going to be able to snap their fingers.  (Heck, some adults can’t manage it.)  So the Baby Sign for “dog” is to stick out your tongue and pant like a dog.

Where I think the book really helped us was in laying out the path for where to start, and how to proceed.  The basic advice is to start with needs like food, drink, and so on.  You make the association by speaking the word and making the sign as they interact with the thing.  So when you’re feeding your baby, as the spoon goes in, you say and sign “food”.  You do this often at each meal.

The time Acredolo and Goodwyn say to start is when your baby starts waving hello or goodbye to people.  This indicates that they have made a connection between a physical movement and a concept.  Kat and I, on the other hand, started when Carolyn was six months old, long before she started waving.  We kept it up for four months, demonstrating the same few signs over and over as part of our routine.  When she ate, we signed “food” and “bottle”; when it was bed time, we signed “sleepy”; and so on.  The important things were that we didn’t make a huge deal out of it, and we didn’t stop.  We just did it as if it were an everyday thing.

By ten months, Carolyn started to get it, right around the same time she started waving goodbye.  By her first birthday, she was able to stay with her grandparents for two days and nights and not throw any tantrums.  When she wanted something, she said so.  The grandparents, may I say, were astonished; here they had this 12-month-old who would just come up to them and say “hungry”—no fuss, no tears, no tantrums.

(And note the phrasing I just used in that paragraph.  To Kat and me, “saying” is now equally applicable to speaking and signing.  This experience has altered our view of communication in ways we couldn’t have imagined before we started.)

We most likely could have started at nine months, or even waited until she started waving, and still been successful in teaching her to sign.  On the other hand, it may well be that the reason Carolyn has taken her signing so far is we laid a broad foundation for it.  On the third hand, it could be that she’s become so proficient in signing due to the Signing Time videos we got her.  Each video has music, visual reinforcement of concepts, and demonstrations of signs from a woman who speaks it fluently.  (You can read more about the back story on their site.)  Carolyn loves music, and the songs are some of her favorites.  We bought one of the music CDs, and sometimes Carolyn will try to sign along with the songs.

One thing about the Signing Time videos is that they teach straight ASL, with no simplification for toddlers.  (They’re really meant for pre-schoolers and later, though the company has since come out with a set of Baby Signing Time videos.)  That’s something we definitely plan for the next child: to teach regular ASL, and not use the simplified signs from Baby Signs.  The child may not get every sign exactly, but they’ll get close and we’ll know what they mean.  We see that with Carolyn now, and if you think about it, it’s no surprise that a signer would not do every sign exactly as the manual shows it.  Do those of us who speak say every word, and construct every sentence, exactly as the rules of our languages dictate?  I think not.

We will, however, use the approach from Baby Signs: start with needs, demonstrate signs as we say the corresponding word, and be patient.  And we’ll probably start early, like we did with Carolyn.  If she’s still signing when the baby arrives, then it’ll be exposed to signs even younger than was Carolyn.

Something to point out is that neither Kat nor I knew any signing when we started.  We’ve learned with Carolyn, and thanks to the videos, I think she knows a few more signs than we do.  So even if you don’t know signing now, that’s no barrier to trying this.  At the outset, it will be simple enough that you’ll have no trouble remembering the signs you’re teaching.  After that, if the signing takes off, you should easily be able to keep up with new signs.  In expanding our signing vocabulary, we’ve found the ASL Browser (as seen in a recent episode of Alien Loves Predator) to be very valuable.  It doesn’t contain every word you can imagine, but it has just about everything you’ll really need.

The other thing is that you’ll probably have quite a few friends, relatives, and such ask you if you’re doing the right thing, or why you’re wasting your time.  If you know a speech therapist, you may have to be prepared for dismissiveness of, or even outright hostility to, what you’re doing.  If you’re going to be easily discouraged by that sort of thing, it might be better not to start at all.  The first few weeks or months of effort will be discouraging enough, as your baby will likely just look at you with a puzzled expression when you sign.  (Of course, most babies that age are puzzled by half of what they see, so it’s not like you’ll be alone.)  Babies, like most of us, crave routine and are bothered by inconsistency.  If you’re going to start, you have to stick with it.

Obviously, I can’t guarantee that every child will take to signing as well as Carolyn did, or even that they’ll take to it at all.  Some parents I’ve talked to said they tried signing, but their kid started talking at ten months so there was no need for signs.  Others have said their kids just never showed much interest in signs—including, astonishingly enough, some deaf children.  But I can say that signing can very definitely work, and work well.  We’ve been talking with (as opposed to talking to) Carolyn for a year now.  Had we not used the signs and her speech had developed at the same rate, we’d just now be starting to talk with her, and only in very limited ways.

I hope this little glimpse of my experience will be a help to some of you out there.

• Signing Up was published on Thursday, October 27th, 2005.
• It was assigned to the Personal category.
• There have been seventeen replies.

Matt Mullenweg announced Akismet yesterday.  It’s a comment-spam defense system for WordPress, and I’ve been using it for a few weeks now.  (This is why Gatekeeper disappeared from the site near the beginning of the month.)  It isn’t perfect, but it’s darned close, and it’s been getting better as time has progressed.  That’s one of the promised features: the longer it’s used and the more people who use it, the better it gets.

I don’t pretend to understand all the details of Akismet’s workings, although I have a fairly good idea of how it works.  I have some concerns, mostly in that it seems like spammers could poison the well by injecting tons of false “not spam” data into the service in order to get their messages through.  I also worry about attacks on the service itself.

Furthermore, I have to say it’s a bit frustrating that you have to have a wordpress.com API key, which means you have to have a wordpress.com account, which means it’s not a one-stop plug-and-play solution.  (Especially since getting an account is, currently, an invitation-only sort of thing.)  On the other hand, having to have an account probably confers some control advantages—if an account is found to be consistently marking things as “not spam” when everyone else is marking them spam, it can be kicked out of the service.

Some have raised privacy concerns because every comment submitted to your site gets analyzed by the Akismet service.  This doesn’t bother me, but it might some.

Overall, I’ve been pretty happy with Akismet.  It has let through less spam than Gatekeeper did in the weeks before I disabled it and all my other anti-spam measures to test out Akismet.  You’d think a Gatekeeper setup wouldn’t let anything through, but you’d be wrong; I assume there was a hole in my PHP.  Akismet may not be the end-all solution—after all, if it becomes effective enough, the spammers will have major incentives to defeat it, and will most likely find ways to do so—but it seems to be working very well for now.

• Akismet was published on Thursday, October 27th, 2005.
• It was assigned to the WordPress category.
• There have been thirteen replies.

Sunday in Sydney was a day of truly beautiful weather, and after breakfast I accompanied Tantek, Amber, and Derek on a “makeshift Matrix” tour of Sydney.  Amber had done some digging online and found out where a variety of scenes from The Matrix were filmed in Sydney.

Now, you have to understand that Tantek is a major Matrix fan—he’s one of the few people I know who actually liked the sequels, and having discussed it with him, I understand why he did.  As anyone who knows Tantek will be unsurprised to learn, he liked them for some very deep philosophical and intellectual reasons; and yes, he has solid ground on which to base those reasons.  Now consider that Tantek and I are both perfectionists, and that he had a 12″ Powerbook loaded up with his DVD of The Matrix along for the tour.

Yeah.  We geeked out.  Big time.

Thanks to Amber’s research and our obsessive analysis, we established fairly exact shooting locations and angles for:

• The “Adams Street Bridge” sequence, including exterior shots seen during the car ride after Neo gets picked up.  It turns out that he tried to get out roughly seven feet further on from where he was picked up, despite having ridden in the car for a minute or so.  See Tantek’s posts “Then go to the Adams Street bridge“, “Stop the car“, and You know that road” for pictures and more commentary.
• The fountain sequence, from the crossing of the street at the beginning of the sequence to the walk through the crowds and the side angles on Morpheus, Neo, and passers-by (including my finding a slice of the Sydney Harbor Bridge just barely visible over a series of green scrims); and, of course, the fountain itself, which is kind of hard to miss.  We think someone should do a flash-mob recreation of the “freeze program” bit and document it.  (Further, we acknowledge that convincing the pigeons to freeze will be a bit of a challenge.)  See also Tantek’s post “Agent training program, part 1“.
• The exterior shots of the building where Morpheus was being interrogated.  See also Tantek’s post “Agent Training Program part 2, Westin Sydney stairwell, Morpheus interrogation.

We also noted where the urban landscape had changed since shooting.  For example, there’s an entire building missing from the background of the initial Adams Street Bridge shot, and we deduced that construction had just started when they filmed.  You can see the construction fencing in the background, but no girders or walls.  Similarly, the building across the street from the interrogation building has either changed or been replaced; also, none of the lobbies of the building look anything like the lobby where the shootout took place.  I was able to identify the building visible through the window of the interrogation room, but we were unsure of the location of the room itself.

We also determined that it’s incredibly unlikely that the spiral staircase scene where Neo experiences déjà vu was shot in the Sydney Westin.  Several web sites claim that it was, but while we found a number of staircases that had similar tile patterns (only rotated 45 degrees), none of them were even close to being a match with what appears on-screen.  (See Tantek’s post Sydney Westin: Not the Matrix hotel” for more.)  And we seriously plumbed the depths of the Westin, at one point getting onto a guest floor without having the required guest card and, at another, taking a service elevator to the kitchens.  We also found an unlocked, unguarded Ethernet router with a number of open ports.

So that was fun.  On the spot, I dubbed it “urban spelunking”, which is no doubt a completely unoriginal formulation but I was proud of it anyway.

It’s too bad that Google Maps has such low-resolution images for downtown Sydney, or else we could combine screen captures of the movie with some GMaps API magic to create an interactive virtual shooting tour.  Oh well.  Some day that problem will cease to exist.

After a very lovely and enjoyable dinner at Circular Quay, a short wandering tour of the Sydney Opera House, and a few hours’ sleep, it was off to the airport for the long, long flight back to the United States.

[Updated 10 January 2006 to include links to Tantek‘s blog posts.  Also: Hi, Kottke fans!  Nice to have you drop by.]

• Post WE05: Matrix Madness was published on Wednesday, October 26th, 2005.
• It was assigned to the Travel category.
• There have been ten replies.

On the Saturday after WE05 concluded, I took the ferry over to Manly Beach with Doug, Kelly, and Erik.  It just so happened that the Manly International Jazz Festival was being held that weekend, and with weather so beautiful and clear, it was impossible to resist heading over.  Once we got there, I kept snickering to myself at all the localized signs; I simply could not resist repeating them in a deep, booming voice: “MANLY T-Shirts!  MANLY Boatshed!  MANLY Frozen Custard!  MANLY Ocean Foods!  C’mon, try some!  It’s MANLY!”

As a result, I got curious about the origin of the name, so I asked a couple of locals.  According to them, the beach got its name because the aborigines who lived there were very manly, and enough so that the invaders gave the cove that name.  This, to me, sounded like the kind of jokey answer you give foreigners to find out how gullible they are, but if that’s the case, then it’s a joke they tell to each other as well.

The first act we caught was a Dixieland quartet that was filling time between stage acts.  I thought they were pretty good, especially considering they were all playing to a single microphone.  Then we saw Peter Ind from the UK, as well as some of his supporting players, The Ozboppers.  At least two of which were from America, but never mind that now.  Mr. Ind was really very good, but I took one look at him, turned to Kelly, and said, “Ladies and gentlemen—Gandalf on the bass.”

Seriously, that’s what it looked like.  I guess he would need a new gig after Sauron’s defeat.

Wandering onward, we stumbled across a small side-street stage where this absolutely incredible singer was belting out some jazz standards.  I was transfixed.  I mean, not only did she have this whole “hot librarian” look going, but her voice was simply unbelievable.  I can’t even properly characterize it, but my best attempt is the smoky expressiveness of Billie Holiday combined with the range of Ella Fitzgerald and the nimbleness of Anita O’Day.

It turned out we were listening to Elana Stone, who continued to transfix me and everyone around her through a few more numbers.  Afterward, I bought a CD (“In The Garden of Wild Things”, which she signed for me) and tried not to be too much of a gushing fanboy.  If Ms. Stone doesn’t become a major star, it will be a crime, although a part of me thinks that she was born several decades too late.  Had she been singing in the 1930s and 1940s, she would have been a sensation; her name would be up with those I mentioned previously.  I have this fear that her voice won’t have as big an audience as it should in the 21st Century.  At the same time, I very much hope that fear is misplaced.

The ferry ride back to Sydney was illuminated by a perfect (if cloudless) sunset and a dusky gloaming sky behind the Sydney Harbour Bridge, and marred by a terribly assembled Elvis impersonator and his even scruffier companion singing a number of Western ballads rather gratingly off-key, and twice nearly brained me with their guitar’s tuning pegs.  Even without the contrast with Ms. Stone, they would have been bad; so soon after hearing her, they were just short of abominable.  I’d have said something, except they appeared to be rather soused, and I try not to tangle with pickled Elvis impersonators unless there’s life and limb at stake.  It’s just one of my little guidelines in life.

Fortunately, the remainder of the evening was redeemed by a fine dinner overlooking Darling Harbour with assorted speakers and conference staff, great conversation about web design work and Australia going late into the night, and a leisurely walk back to the hotel with a friend.

Overall, a lovely day.

• Post WE05: Manly Jazz was published on Wednesday, October 26th, 2005.
• It was assigned to the Travel category.
• There has been one reply.