Site’s fixed. Comment away. 
Category: Geek
A couple of months ago, I had written an entry entitled The Acronym Tag, which was a brief discussion on a standard, if decidedly underemployed, HTML tag. Following the discussion, I had used a little stylesheet trick to make more effective use of the <acronym> tag for my Internet Explorer readers.
Recently, though, Anne van Kesteren pointed out that I was actually making improper use of the <acronym> tag. He directed me to an article by Craig Saila that discussed the difference between an acronym and an abbreviation. You can read the article, but here is a distillation. The English language shortens words using any one of three ways, which are as follows:
# The acronym–a word which is created using the initials or syllables of a longer term or phrase
# The abbreviation–a truncated word or phrase (note: this result is not a pronouncable word)
# The initialism–an abbreviation made by using the initials of a longer term or phrase (note: this, too, does not result in a pronouncable word)
Initialisms, according to Saila, are not acronyms, but rather are abbreviations. A glance through my copy of Hodges’ Harbrace Handbook confirmed that Saila is right–acronyms are always new, pronoucable words (like laser), whereas abbreviations are either truncated with a period (like Jan.) or made of capitalized initialisms (like NJ).
No big deal. All of my acronyms since May are populated with MT Macros automatically. So, all I had to do was go through my MT Macros list and change all the “acronyms” that I couldn’t pronounce as words into “abbreviations” and rebuild the site. Right?
Well, yes and no. See, the <abbr> tag has a bit of a problem in Internet Explorer in that IE doesn’t support it–at all. It won’t generate a popup with the title when you mouseover it, and it doesn’t underline when you set up a border-bottom: 1px dotted gray; in your stylesheet. So, by modifying my MT Macros file, I effectively break the tooltip functionality for the IE visitors. Lame.
Some more poking and prodding turned up a couple of ideas. I discovered this page by Marek Prokop which discusses a JavaScript workaround for the IE problem. Since I use MT Macros, I can easily incorporate Prokop’s solution on the server side in my preflight processing.
More hunting around in my Macros code made me realize two things. First, that <abbr> tags were being converted to <acronym> tags (this was actually mentioned in Mark’s entry). Second, that both of those tags were being wrapped with a <span class="caps"> element. Google turned up this article indicating that the <span> was automatically being appended with MT Textile. I made the change that Arve suggested to my textile.pm file and went back to modify my MT Macros code, adding a couple of lines to process abbreviation tags the same way that acronyms are processed.
After everything is said and done, my <abbr> tags are wrapped with a <span> element which does the styling and the tooltip, further separating markup and style and making the site more semantically correct. Revised version of the Macros template can be found on the about page. Enjoy.
FYI, the site is doing that weird thing where it won’t rebuild pages. Ugh. Comments will probably not work for a little while.
Update: Okay, I’ve resolved the issue for now. The problem was an apparant issue with the use of the MTRegex tag in one of the PHP Juice comments. I’ve modified the comment, but am going to check with Brad Choate (regular expression Jedi master) to see what the problem actually was. More details later.
Non-Update: Never did quite figure out what happened. Brad had thought that the problem was in the MT Macros code that I have employed on the site rather than the MTRegex code. Whatever it was, a word of wisdom: if your site is taking forever to build, before going through and rebuilding the site from scratch, try to figure out what might have changed recently (added comments, changed markup, new plugin). It might just save you a few hours of downtime.
As Jai noted, I’ve switched the site over to PHP. That’s not the only thing I got done today. 
Mark Pilgrim recently wrote another reminder that gzip-compressing web pages can save you some serious bandwidth. Unfortunately, this requires some magic with Apache which I can’t seem to cast. However, Dean Allen pointed out that you can use a PHP function to gzip-compress your site on the fly. Gzip compression is supported by pretty much all modern browsers that matter (ones that don’t support it are given a regular uncompressed web page, anyway) and can reduce your bandwidth by half. Spiff.
Speaking of Dean, his Refer tracker runs on PHP as well. In order for it to track page hits, though, you have to have a PHP tag in each of your documents. This isn’t a big deal with MT templates, but, in order to get it to work with my site, I either had to override my .htaccess file to process HTML files as PHP, or migrate to PHP entirely. I’m not allowed to modify .htaccess files with my web host, so that leaves me with the inevitable choice to migrate. It took about a half-hour to pound out all of the details. The end-result is visible over here.
The new URLs were an inevitable conclusion of moving to PHP. I mean, if I’m going to change my URL structure, may as well go all out, right? In particular, I wanted to future-proof the URL structure from any future changes I might make to the site (like if I ported over ASP.Net or something–gack!). A search for future-proofing URLs in Movable Type brought me to Már Örlygsson’s helpful tutorial.
Finally, being a good netizen, I wanted to make sure all of my old inbound links still make it to their original content. I mean, not like I have a lot of them, so the ones that I do have I don’t want to disappoint. What I did to solve this is create another Individual Archive simply called “Boing.” It uses the old URL structure (<$MTEntryID pad="1"$>.shtml) to create a page which then redirects the user to the new page with this meta tag:
<meta http-equiv="Refresh" content="0; URL=/archives/<$MTArchiveDate format="%Y/%m/%d"$>/<$MTEntryTitle dirify="1"$>/">
I thought about making this a temporary fix, removing it after about a year or so, but it’s relatively harmless in terms of disk space and just maintains itself. I mean, a couple hundred bytes of data per entry and it keeps Our Story from massive link rot.
All that being said, though, a big part of the reason I switched to PHP was that I want to get back into some sort of development again. Web sites and databases are pretty much all I get to work with these days, so I thought, “why not?” Make Our Story PHP-based and mess around and have fun. Who knows? Maybe I might even end up coding the Ironworks web portal by hand. 
In part because they’ll make a great backup the next time I accidentally overwrite my Individual Archive Template with my Default Search Template in the middle of the night, but mostly because I’m all about open source: the index and archive templates that power Our Story can now be found here.
Just when Mozilla gets itself a not-for-profit foundation, AOL drops the Netscape brand and lays off their entire Gecko staff. 
A recent discussion about managing internet browsing (and information overload in general) got me playing around with Mozilla bookmarks. I discovered that, if you’re running Mozilla Firebird, you can have your bookmarks show up in your browsing window rather than a popup window or a side-panel–a la Safari.
Bookmark Panel (pretty cool):
chrome://browser/content/bookmarks/bookmarksPanel.xul
Bookmarks Manager (somewhat less cool):
chrome://browser/content/bookmarks/bookmarksManager.xul
By the way, you need to cut and paste these URLs into the browser for (I assume) security reasons.
Chad Dickerson: RSS Killed the Infoglut Star. At last, a way to manage the Internet information overload.
Ha! Give it a few months, Chad, and you’ll be subscribing to as many voices as you were visiting web sites! Has anyone else been facing this problem? I’ve been noticing more and more that I’m having an increasingly difficult time in keeping up with my Internet surfing. The reason, it turns out, is that I’m subscribed to 38 different news feeds from websites. To some, this may be a paltry sum–I don’t know how you live. To me, this is a staggering number. Every day I’m enslaved to reading the from 38 different authors.
“Why not cut back your reading?” I’m considering cutting back my feeds down to maybe ten that I read on a daily basis and maybe setting up some bookmarks in Mozilla that will open up a monthly reading list, or maybe a list of sites to read when I’m really bored. The frustrating thing with this is, when you have accessible to you the personal online journals of bleeding-edge technologists, humorists, and theologians, you want to be able to consume them all. I mean, who could resist reading the thoughts of these people on a daily basis? It’s probably a quandry not too unlike working at a library.
As I was talking with family tonight about how they manage their time in the very mundane aspects of planning dinners and living on a budget and so on, I became increasingly aware of how little free time I have–or, more aptly stated perhaps, how much free time I spend trying to keep up the most current trends on the Internet. I remember, too, when Darin went away to Bible school for a year and his description of how freeing it was to be away from “all that stuff,” referring to the daily rat-race of keeping up on technology and his industry in particular. I don’t think I want to get away from that entirely, but, to take a few steps back away from this full immersion of minds and get back to living a little.
There may be a technology solution to this problem, but probably not for the next couple of years. You know, that whole idea of having a semantic user agent be able to pick up news articles of particular interest (like the coolest new Mozilla enhancements) and dump the ones of no interest to me at all (like the latest squabbling over RSS). In the meantime, I really need to do something to keep from going nuts.
Thoughts?
Okay, as far as I can figure out from this, any time you have an position: relative; outer element that wraps a position: absolute; inner element, then that inner element should find its offset relative to the outer element. Or something.
The outer element looks like this:
#content {
position: relative;
clear: both;
border-left: 1px solid gray;
border-right: 1px solid gray;
margin: 0px 35px;
padding: 0px;
}
Again, the idea is that when I wrap this around an inner element that is positioned absolutely, any offset I use for the inner element should happen relative to the outer element. So, if I set top: 0px; in the inner element, it should position itself at the top of the outer element rather than the page itself. This works in all the browsers I’ve tested.
What doesn’t work is when I set right: 0px; in the inner element. Opera and Mozilla think that should be relative to the outer element. IE thinks it should relative to the page. I’m guessing by a vote of 2-to-1 that IE is wrong.
I tried to think hard of how to do this without using CSS hacks, but came to the inevitable conclusion that I had to hack the stylesheet. After consulting this page, I came up with this code for the inner element:
#right-column {
position: absolute;
top: 0px;
margin: 10px 0px 0px 0px;
padding: 10px 5px 5px 5px;
width: 220px;
right: 36px; /* IE5 off-by-one to the R */
voice-family: ""}""; /* Hide from IE5 */
voice-family:inherit;
right: 35px;
right /**/: 0px; /* Hide from IE6 and correct margin */
}
The first hack, voice-family: ""}""; hides anything after that from IE5. Not surprisingly, the IE5 representation actually suffers from two bugs: the right margin thing as well as an off-by-one pixel error. Whee. So, I had to set another margin: 35px; after that to make it look right in IE6. After that was all said and done, I could finally set the margin back to what it was supposed to be and hide it from IE6 with right /**/: 0px;. As many have said before me, this CSS stuff is hard.
IE5 is still acting up quite a bit with my new menu on the top right of the screen, so more bug fixes will be forthcoming.
Good News: I was able to create a site menu using an unordered list with the great help of this column at A List Apart. Right now there’s a whopping two items, but plenty of room for expansion.
Bad News: IE6 doesn’t like my layout. If you’re looking at the site in IE, you’ll notice that the sidebar is conspicuously hugging the right side of the screen. This is because IE does not correctly interpret a right: 0px; inside of a div with position: relative; margin: 0px 35px;. The reason this sucks is that I want to have a gray line that traces from the menu all the way down to the footer–like it does on the left side of the page. But, since Explorer doesn’t interpret the CSS correctly, the sidebar ends up overlapping any line I try to put over there. Any feedback is appreciated.