Hola ALA! For Overcaffeinated readers: I’m happy to announce that CSS Drop Shadows, an article by yours truly, has just been published by A List Apart. This is amazing for me, since I’ve considered ALA to be a great resource ever since I was a wee little web designer.

For visitors from A List Apart: Thanks for checking out the site. Let me know if you enjoy your stay here. Posts you might fancy: Technicals on using block borders as rulers and anchor functionality. Funnies: The perfect compile and Mochilas pa’ los cuadernos! (an exploration of Spanish slang). If you like those, you may want to check out the stuff in the abridged section. Of course, there’s also the comic, which hasn’t been updated much lately, but has almost a year’s worth of weekly update archives. Thanks for dropping by!

— sergio at 11:39 AM  

It’s hard to believe that the land that gave us McDonalds, Taco Bell and Dunkin Donuts could produce Barnes & Noble. Good ambience, well-lit, with great coffee and buttloads of books that you can sit down and read. It just doesn’t get any better than that (well, maybe if they were free).

As soon as I arrived in Chicago, I performed a quick raid on the nearest B&N. A bookstore blitzkrieg, if you will. I knew exactly what I was looking for, and went straight for it. There it sat, staring at me in beautiful cream colored 48pt Eplica, its cover lush with green duotones. Neil Gaiman’s American Gods was finally within my grasp. As an afterthought, I grabbed Heinlein’s Starship Troopers on my way to the register.

The Heinlein book lasted all of one day. It has very interesting socio political propositions, and is waaay deeper than the movie. At times it’s hard to believe the book dates back to 1959.

American Gods is a different story. I just finished it today, and it’s one of the most entertaining, finely crafted novels I’ve read in a long time. At times, Gaiman’s way with words rivals that of Camus, and you just know that behind every passing reference tossed casually by the characters, there are oodles of mythologic knowledge. Can’t recommend this one enough.

Later forays into B&N provided me with more Gaiman, Heinlein, a lot of Pratchett, some Vonnegut and other jewels. I’m happy now.

— sergio at 11:45 PM  

Chicago! Chicago! Chicago! If you say it over and over it kind of loses its meaning and starts to sound silly…

Anyway. As you may have noticed in recent posts, I’m getting a little flaky these days, so vacations are due (going into a year without). I’m taking two weeks off work and I’ll take the opportunity to visit the parents in Chicago (if you’re wondering: they’re both Mexican, haven’t been there for that much time — long story).

If there are any Overcaffeinated readers living in or near the Chicago Area who’d like to go out for a beer/coffee/whatever floats your boat, let me know at sergio@overcaffeinated.net. I’d love to hang out while there. I’ll be in the Windy City starting Sunday. See you!

— sergio at 03:19 PM  

It somehow feels right; sitting here at work late into the night, long after lights-off. Having the whole place to myself provides an excellent opportunity to put on the headphones and indulge in energetic ghost Orchestra direction — which the guards on the other side of the security cameras most likely find a welcome respite from nasal exploration watch.

I finish the code, take a good, tentatively proud look at the subroutines and upload the whole thing. As I submit the program and keep hitting <enter> to refresh the screen, I wonder if this will be the magic one. The compiler coughs up, sputters and throws a veritable barrage of warnings and two or three severe errors. The perfect compile is still somewhere in the future. Lurking. Awaiting me. Mocking me.

As I recode — pausing momentarily to break into full-on Director mode or coordinate a particularly difficult tenor clef Solo by the cellist — I wonder if it will come tomorrow.

I start planning meetings and setting personal deadlines. The calendar sheepishly points out that it’s only five days to Valentine’s. Automatically, the mind slips into generic-ex-girlfriend mode (all of which have had trouble with her — the machine — at some point or another).

- “You can’t honestly be serious.”
- “Oh, but I am. Just imagine: No warnings. No errors. No weird return codes. Just the goods. Very very clean. And of course, it would run perfectly after that.”
- “So it’s… what? orgasmic?”
- “I think it would be more like very, very good foreplay.”
- “There’s no way in hell compiler output can be likened to sexual intercourse.”
- “Ahh… Then, honey, you’re not doing it right.”

— sergio at 10:24 PM  

One of my best friends got married yesterday. Marriage. That’s a mouthful. I’ve known him for 12 years. We used to get into bars with fake ID’s, drink copious amounts of coffee discussing pointless subjects and do stupid things like lie our way into the morgue to see dead bodies or go down the sewer pipes to see what the city was like from underneath.

We tend not to notice the prevalence of light until we’re confronted with the utter lack of it. The sewer made a very thorough job of stating that fact. Suddenly we were enveloped by blackness, the entrance we’d left behind become a single orb of light floating about. I turned on the flashlight, silently recalling all the urban legends about swarms of giant rats and crocodiles that hide in the sewer. Up front, two tiny eyes reflected the light back at us. Horror set in. We started screaming at the top of our lungs and huddled together as a single mouse went past us. Then we recovered composure, tried to hold on to what little pride we had left, and went on. He kept saying he felt like Jean Valjean in Les Misérables.

We went from the sewer pipe into a rain drainage pipe. It was somewhat smaller and very dusty but had half open manholes that let air and light in. We kept going that way for some time, finding nothing more dangerous than poisonous spiders, and came out into an unkempt patch of land that housed a dry riverbed. The smell of decomposing flesh turned our attention to the big Rottweiler that was hanging from a tree with a rope round its neck, lynching style.

We eventually made it to street level, several blocks from where we had started, and walked back. I decided I should read Les Misérables and tried to forget the dog.

There he was yesterday, standing next to the altar, reading the corniest passages from the Song of Songs to his bride (because that’s the kind of guy he is), and all I could think about was the time we went into the sewer.

— sergio at 08:00 PM  

In taking a break from discussing such Earth-shatteringly relevant subjects as my Obsessive-Compulsive tendencies or Spanish slang, I’ve decided to get some CSS goodness out of the way.

From time to time I get emails asking questions about this or that detail of the site’s design, or CSS in general. I know first hand how difficult it can be to coerce most browsers out there into rendering a consistent layout, so I’ll try to share my experience with the nightmare that is cross-browser CSS. Hopefully this will be useful to someone.

There’s a little trick I like and that is somewhat counter intuitive. I stumbled upon it when making categories for the links page.

The unruly ruler

You know those little separator things that you can find in the Index or page headings of some books? The ones that look like someone screwed up with the title alignment and then made a half assed attempt at fixing it by adding a segmented line next to it? I love those things. So I set out to fabricate my own. Here’s what we’re aiming for, taken straight from the Game Over book¹:

Being freshly thrown into the fantastic world of CSS based design, I figured it’d be a snap to set up the little bugger.

I was all kinds of wrong.

The obvious, semantically correct way to go about making one of these would be to use an <hr> (Horizontal Ruler) tag, align it to the left and put some text over to its right. In a perfect world, we might even get away with it. But alas, it was not meant to be. The <hr> cross-browser styling support is flaky at best, as exemplified in this writeup. Not only does the element not support consistent border/background properties; it also floats all over the place in logic-defying mockery. I quickly abandoned that approach.

After considering the options, I settled for a block element with only the top border visible, floated besides a title. Now, we want this to be as semantically correct as possible, so we’ll encase the whole thing in an <h3> heading (<h1> is the image header on top of the page, <h2> is the one used for the blog entry dates and such). We also want to be able to specify different margin properties for the containing header and the title, so it’s a good idea to put the title in its own blockable element. Thus, we get the following markup:

We’ll use the <span> elements as our blocks (we could use divs, but that’s somewhat less elegant). Notice that the first one belongs to the ruler class. Far from some subtle subversive political commentary, this is done so we can style it and set it apart from the one that contains the title. The id is there so we can use this heading with an anchor². We’ll start the styling with the following:

This yields the following:

Hello World

Not quite there yet. The block element spec adds a linebreak at the end of each block, and when created they assume the maximum available width, so we need to float the ruler. After adding float: left; we get:

Hello World

Which is ghastly. The ruler span, being an empty element and now floated to the left, has collapsed into oblivion. It’s still there, mind you, but doesn’t have any noticeable width to speak of. So we add width:50%; to the ruler to pull it from under there.

Hello World

Now we’re talking! For some correctness, we’ll move the ruler further down. We could do this by using a pixel measurement, but that would be too easy, wouldn’t it? Pixels, although exact, are not resizable in IE with the text size increment tool, and our ruler would fall short of the vertical center when this happened, so we’ll go with em’s. Em’s are resizable in IE (the white whale to our Web Developer Ahab).

The Em’s approach presents another problem: due to differences in the box model implementation, IE’s rendition of n em’s is a few pixels off (remember the comment about my obsessive compulsive tendencies?). What we do is take advantage of IE’s shortcomings: we’ll specify the margin twice. Once for the browsers who do get the standard right, and the other one for the different flavours of IE:

That !important tells compliant browsers that the rule should take precedence over other rules for the same property, regardless of position. IE doesn’t get this and thus ends up with the rule specified further down (order is extremely important when working with CSS). In this case the difference is minimal (.05 em) but when I did this for the links pages, the actual difference was .2 em (that’s rather big). It’s an interesting hack, so I’ll leave it here. Finally, this yields:

Hello World

TA-DAH!!! Now that wasn’t so painful, was it? Here’s the full code for copy/pasting:

The width of the ruler can be changed by fiddling with the width value in the ruler class. The properties for the two <span>’s don’t mix up because the first one uses a more specific selector (notice the span.ruler bit).

This technique works for IE 5.0, 5.5, 6, Gecko-based browsers (Moz/Firebird), Safari, Opera, and degrades gracefully for Lynx/text based browsers (the text is enclosed in a header next to an empty span after all, so there’s not much to interfere). Hope you liked it.

_______

¹ Full Title: “Game Over — Press Start to continue” by David Sheff. Excellent recount of the story of Nintendo and the gaming industry

For info on setting up that cool image placeholder, check out Dunstan’s excellent writeup

² For more on this, see this entry

— sergio at 06:19 PM