Version SNAFU

Today I updated WordPress for an “urgent security release,” and as usual there are unexpected side effects. For some reason now, my sliding sidebar panels no longer work. No JavaScript errors; they just don’t do anything. I blame a Scriptaculous update that is probably embedded within. I hope within the next 24 hours to diagnose and fix the problem, but for anyone (emphasis on “one”) who’s wondering why the panels aren’t working, here’s a semi-explanation.

Update (1/1/2008): File under SEU. I think the problem was simply that I needed to clear my cache. The first suspicion was aroused when I fired up MAMP, ran the site locally, and found that the sliders were working just fine. At any rate, I re-uploaded all of my theme files plus the Scriptaculous and prototype.js files, cleared my cache, and now it’s working.

Sidebar enhancements

Sidebar screenshotYou may have noticed after the current site redesign that the sidebar panels now sport toggle buttons that allow you to open and close them with slick Scriptaculous sliding effects.

I’ve taken this a step further by using cookies to store your panels’ status, keeping the same panels opened or closed as you go from page to page (and between browser sessions… but since it’s client-side, it doesn’t follow you to different computers).

The next step will be to add handles, allowing you to change the order of the panels as well. Stay tuned! (Or not.)

For the geeks among you, I’ve facilitated all of this additional functionality by writing some object-oriented PHP for handling the panels. It’s much cleaner and less prone to error.

Are you a web geek? Can a 404 error page excite you?

404 error signIf the former is true, it proves the latter. I’ll confess “yes” to both.

Today at work I was doing some miscellaneous web-related research (aimless surfing? no, no, never), and I came across a page of creative 404 error pages that inspired me to finally do something interesting with my own 404 error message.

Having lived in Atlanta (area code 404), I initially set out to do something that played off that. (I know, very original. I just wanted to make sure not to settle for “Tha 404.”) But it wasn’t long before my roadgeek tendencies kicked in and I thought of something even better.

Here’s my 404 page. (The image at right is a spoiler, of course.)

The sign image is (mostly) my own creation in Photoshop: I swiped the shield images for I-16 and Georgia 404 as SVGs from their respective Wikipedia pages, and the font is courtesy of another roadgeek. Whenever I start to question myself, I am reassured that there are others out there even sicker than I am.

Incidentally, there really is a Georgia 404, although the only place you’ll see a sign for it is on a small spur route near Savannah. Georgia’s Department of Transportation has a funny little quirk in that it has given all freeway-grade roads a state highway designation in the 400 range. (I suppose the “4” indicates 4 or more lanes.) As far as I know (and as this PDF from the GDOT website seems to confirm), there’s only one road in the system for which this is the main designation, however: Georgia 400, which is a main commuter artery running north (well, northish) from Buckhead out to the north-central suburbs and beyond into Deliverance country, since both I-75 and I-85 veer off diagonally out of the city (into the northwest and northeast suburbs and beyond into Deliverance country).

All of the other freeways in the state have a “4xx” designation too, but there are generally no signs indicating such, because they all also have a familiar designation, usually an Interstate number.

As it happens, Georgia 404 is better known as I-16 (hence the double shields on my sign image), which, interestingly enough, is not really “interstate” even though it’s an “Interstate”; it starts in Macon and ends in Savannah.

The incredible ever-changing page background

Here’s more stuff that web designers might find interesting and everyone else will find either irrelevant or won’t even notice.

I kind of liked the abstract image I had as the background of the pages in this new site design (which, if you’re interested, can still be found on my IE6 users’ “welcome” page), but I was never completely satisfied with how it was just shoved into the upper left corner of the window. So I took a horizontal cross-section from a very colorful portion of that design, stretched it out into blurry vertical stripes, and made it the new background.

But, you may notice, there’s a bit more to the background than that. Once again it’s the magic of PNG alpha channel transparency at work.

The background of this page is actually the product of 3 separate images (a JPEG at the “back” and two transparent PNGs over it) overlaid on top of each other. In the bottom layer is the aforementioned blurry multi-colored vertical stripe image (JPEG). It’s 1600 pixels wide by 20 pixels high, tiled.

Next above that is my “Close to the Edge” image, a gradient from the teal of my color palette (at the bottom) to transparent (at the top). For a while I toyed with simply using this as a teal-to-black gradient, and I have to say it looked quite nice, but there’s not enough else going on visually with the design of the page, so a solid black band at the top of the page came off a bit boring. So, the gradient as an overlay on the stripes. This image is 50 pixels wide by 600 pixels high, and it’s fixed to the bottom of the window and tiled horizontally.

Above that is the (probably overused) “NTSC scanline effect” image, which produces the horizontal stripes. Unnecessary and as I said, probably overused, but it’s still kind of cool looking. Or would have been in 1998 at least. Call me old fashioned, if you think 1998 is old. (OK, in the web world, it’s ancient history.) This is a 20×20 image, also tiled.

So, how does this all fit together? Well, the way I do it is by applying the JPEG to the <body> tag, which is immediately followed by a pair of nested <div> tags that fill the window and exist for the sole purpose of overlaying the other background layers. Then inside of that, the rest of the page’s HTML appears as normally.

Looking at it precisely, the CSS file contains the following:

body {
  background: #000 url(“images/body_bg_stripes.jpg”) top left repeat fixed;
  margin: 0;
  padding: 0;
}
#body_overlay {
  background: url(“images/body_overlay_bg_ctte.png”) bottom left repeat-x fixed;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
#body_overlay_2 {
  background: url(“images/scanlines_25_black.png”) top left repeat fixed;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

And the HTML for the pages follows this basic structure (with lots of stuff cut out in this example, of course):

<html>
…HEAD TAGS HERE…
<body>
<div id=”body_overlay”>
<div id=”body_overlay_2″>
…PAGE BODY HERE…
</div>
</div>
</body>
</html>

What’s really cool about this is that it results in a background pattern that, as a single image, would need to be at least 1600 pixels by 600 pixels (in other words, very large in both dimensions and file size), and even then it would not be able to achieve exactly what you see here because the gradient is fixed against the bottom of the window. In fact there’s absolutely no way to produce the background of this page without transparent PNGs. The 1600×600 image would easily be a few hundred kilobytes at a fairly low-quality compression level — far too big to justify, especially since it would still end up looking like crap. But as it is, the three images are 6857, 135, and 714 bytes respectively — less than 8 kilobytes combined. Sweet! (OK, it’s pathetic that I think something like this is “sweet,” but there it is.)

All hail PNG!

According to the official spec, it’s actually pronounced “ping,” which I dislike: “ping” already means something very specific (and very different) in the Internet world. But I’ll go along and stop calling it “pee-en-gee”. Apparently I have to start calling GIF images “jiffs” as well, since that’s what the creator of the format calls it. (Maybe as a form of rebellion I’ll start saying “LIE-nux” — or not.)

Anyway… savvy reader(s) will know I’ve actually been using PNG images featuring the all-important alpha channel transparency for nearly a year on my site; it’s what allowed me to swap in the various 34-themed photos in the old design as an underlay below the logo and navigation bar without having to create separate versions of the logo and navigation button graphics for each separate photo. Alpha channels allow you to build transparency information right into an image, so images can be overlaid directly on each other with complex layering effects, regardless of the color of the background. (This is all exceptionally arcane for anyone who doesn’t do web design, or more generally, graphic design; but to us in the field it’s potentially huge.)

Now, PNG has been around for several years, but almost no sites I’ve seen are really taking advantage of alpha channels yet, and with good — or at least, understandable, if lamentable — reason: Internet Explorer did not properly support PNG alpha channels until version 7, which just came out earlier this year. As a result, even though Firefox and Safari have both been able to display these images properly since their inception, no one could really use the format unless they were willing to have upwards of 90% of their visitors look at garbage.

I for one am willing to have my visitors look at garbage: if they’re using Internet Explorer 6, that’s what they’re dealing with anyway! Hence, for those of you who may still be using IE6, I present my annoying JavaScript alert whenever you enter the site. (The rest of you have no idea what I’m talking about, and be glad for it.)

But now, according to log stats on the sites I’ve developed at work (where I actually have stats to look at), the majority of Internet Explorer users have upgraded to version 7. Combine that with the fact that increased usage of Firefox and Safari (corollary: increased use of Macs) has pushed overall IE traffic down to around 80%, and I felt like the time was ripe to dive into a full-fledged transparency fest with this new web design.

Maybe I’ve just been slipped more of Steve Jobs’ special Kool-Aid, but since I’ve gotten to the point where I almost like Leopard’s translucent menu bar, it only seems fitting that I should honor (or, if you prefer, imitate) this new direction in computer interface design, legibility be damned! (OK, I know Microsoft’s on the transparency train too, and it’s hard to say who’s really pulling the mixed-metaphor cart here; Vista came first but Leopard is still ahead of it, and the whole concept behind Vista’s interface seemed to be another attempt at playing catch-up to Apple. But I digress, as usual.)

I actually no longer have access to any Windows computers that haven’t been upgraded to IE7, so I have no way of knowing what the new pages look like in IE6. I expect they’re pretty terrible. Guess what: blame Microsoft!

All hail PNG!!!

Note: I’ve just discovered that there’s a weird problem with an unexpected background image showing up across the top of the page in Safari 2.x, which is the browser most Mac users are running unless they’ve wisely switched to Firefox or zealously upgraded to Leopard. (In other words, it looks great on my MacBook, but I noticed the problem on SLP’s iBook!) I’m hoping to have it fixed soon… once I figure out where the hell it’s coming from!!!