After three and a half years, it’s about time for another redesign. Welcome to goer.org 4.0 — now with fewer features!

For comparison and amusement, the previous three revisions are preserved in amber here:

• goer.org 1.0 (2000-2003): Look at those elegant rounded corners! Clearly a site way ahead of its time.
• goer.org 2.0 (2003-2006): We’ve made the jump from a table-based layout to an all CSS version. It turned out… awfully boxy and green. Although to be fair, I believe this layout actually worked in Netscape 4 and Internet Explorer 4.
• goer.org 3.0 (2007-2010): Goodbye green, hello brown! This was my first attempt at a YUI Grids based layout.

I was satisfied with version 3.0 at the time, but over the last couple of years, I became more and more unhappy with the site. Not only did it still look amateurish, it was way too hard to read. But a major overhaul seemed daunting, and I wasn’t quite sure how to fix it in the first place.

An Epiphany

Then I downloaded Safari 5, which comes with the famous Readability plugin built in, and tried it out on a couple of popular news sites. The effect of seeing the article without all the extra navigational crap was startling, and it jolted me into taking a hard look at my own site.

• Why bother listing recent posts next to every entry? Especially since the posts aren’t necessarily so recent?
• Why show the blogroll next to every entry? Giving a nod to friends and family is nice, but do all those links need to be there every time?
• Why show my Delicious linkroll next to every entry? Is there a reason that Javascript needs to be loaded for every entry?
• Why is the Creative Commons section so huge?
• Does the site really need a site-specific search box? (Oops, it’s broken anyway.)

It occurred to me that just because blogs traditionally have linkrolls and tag clouds and thirty different “sharing” buttons and blog ads and God knows what else in the sidebar, doesn’t mean that’s how it has to be.

Now inspired, I read up a little on typography for the first time, well, ever. And the good news is that some of the principles of good typography are so simple that even knucklehead non-designers like myself can understand them. For instance, I had always believed that websites should let the main content area flow as wide as the user wanted. If the user wanted a narrower or wider view, they could just stretch their browser window. Oh sure, some websites force a particular column width — websites run by The Man! Why not be freaky and free?

However, now I realize that there is in fact an optimal range of width for English text. That’s why paperbacks are as wide as they are. That’s why newspapers and magazines have columns. And that’s why this site now uses a fixed width layout. If you don’t like it, take it up with the Commandant.

So What’s Changed?

A bunch of things:

• As mentioned above, the sidebar is completely gone. All the stuff that was there has been either A) miniaturized or B) moved to a separate dedicated page.
• Although the layout of the new site is actually much simpler, there are many changes to typography and general look-and-feel. The overall look I was going for was “book-like”.
• The banner at the top has been refined. The images are larger, and I’ve eliminated a couple of the picture frames. The site’s color scheme still derives from the images (browns and other warm shades).
• The comment form has been revamped according to the guidelines in Luke Wroblewski’s Web Form Design. That process might be worth a post all by itself.
• The backend is still Movable Type, but upgraded from MT3 to MT5. I put a lot of thought into other options: staying on MT3 forever, migrating to WordPress, and even (briefly) rolling my own system. That process might be worth a separate post as well.
• A number of performance improvements thanks to the slimmer design and some help from YSlow. Page weight is smaller, fewer HTTP requests, static assets have far-future Expires headers, etc. Most pages now fully load in subsecond time.
• Finally, the site has migrated from HTML 4.01 Strict to HTML 5. Not that I’m using any major HTML 5 features yet, but I do like me that HTML 5 doctype.

Credits

This redesign probably would not have been possible without:

• The engineers who support YSlow.
• Luke Wroblewski, for writing Web Form Design.
• The Yahoo! Search design team. I’m not a designer by any means, and my visual thinking is pretty weak. But thanks to being around some really talented people the last couple of years, I’ve managed to pick up a few tricks by osmosis. Remember, it’s not that the bear dances well, it’s that he dances at all.
• My wife Sarah, who has a much keener eye for color and layout than I do, and can spot something that’s a pixel out of line without even straining.

And that’s about it! Here’s looking forward to goer.org 5.0, coming in 2014 to a browser near you.

A disciple came to a temple to speak with a master ontologist.
“Master,” the disciple said, “teach me how to describe all existence!”

The master handed the disciple a pebble. “First, start by describing
this small stone.” The disciple went away and sat under a bridge by a
stream. For six days and nights he struggled to create a taxonomy for
the pebble. On the seventh day, he returned to the temple.

“Master,” the disciple said, “I have devised the perfect taxonomy for
this small stone.” He unrolled an entire scroll at the master’s feet,
covered on both sides with arcane markings, graphs, and code.

The master then struck the disciple on the head with a stick. The
disciple was then enlightened.

I’ve made another tweak to the comment form. Previously, my defense against comment spammers relied upon the Perl operator !. Although this stopped most spammers cold, over the last few weeks the spam has crept up from nonexistent to several a day. This is unacceptable. So after some arduous research, I have added another weapon to my arsenal: the Perl operator ne. Take that, evil spammers!

In all seriousness, adding the “Yes/No” radio button seemed the simplest-stupidest possible change I could make, right after the previous tweak (empty text field, type anything you like). I’m not sure if the radio button will work, but we’ll see over the next few days how well it holds up. According to my logs, the empty text field trick was blocking just about 98% of the comment spam. By that I mean, 98% of the requests that were actually trying to post to my real, active comment form. The standard MT comment script, mt-comments.cgi, is just getting hammered. Or it would be if it existed on this site.

So here’s hoping the radio button trick does a little better than 98%. At the very least, I like the humor value of asking the user explicitly whether he or she (or most likely, it) is a spammer. But if this doesn’t work, I’ll continue to morph the profile of my comment form until it eventually includes a CAPTCHA, a text-message challenge/response, and biometric identification submitted via snail mail. Remember to please seal those plastic bags before sending, people. Thanks.

(Or I could just use Akismet. But that’s kind of a last resort.)

goer.org: weblog. A website barely alive. Gentlemen, we can rebuild it.
We have
the technology.
We have the capability to make the world’s first…
errr, scratch that, we have the capability to make Evan’s first
not-completely-hideous website. goer.org will be that website. Better than
it was before. Better… stronger… faster.

Yes, after almost five years, I’ve finally redesigned the ol’ blog template. Out with the hideous green of goer.org 2.0, and in with the soothing earth tones of goer.org 3.0! (Hmm, so what was goer.org 1.0, then? You really don’t want to know.)

Aside from being vaguely displayable in Netscape Navigator 4, the previous design had very little to recommend it. The new design has several advantages over the old, including:

• It’s not hideously green.
• Oh, it’s hideously brown, you say? Well, according to Microsoft, brown is the new black. So there.
• As an added bonus, this design is one of the only sites out there where the little orange “feed” icons actually sort of harmonize.
• Atom 1.0 feeds. I was going to hilariously title this post, “Up and Atom!”, but then I discovered I was only about the 800th person to come up with that.
• Individual entry archives. The old blog had everything filed away on monthly archives (mimicking the format from back before I had blog software) and presented comments in a separate pop-up window (a hack from back when Phil Ringnalda taunted me into opening up comments, and that turned out the quickest way to enable them.) Now each post has its own page and its own set of permalinkable comments. Technology marches on!
• You can now post comments using a subset of John Gruber’s Markdown. That means bulleted lists, blockquotes, preformatted code blocks, and other goodies.
• There is a de.licio.us-powered linkroll.
• The site has migrated to MT 3, which has a wide array of nifty new features to play with.
• Did I mention, not hideously green?

Plus many other minor tweaks. And newly-introduced bugs. For one thing, this template looks a little sketchy in Internet Explorer 6. For one thing, the blockquotes are causing weird formatting glitches. Also, IE 6 does not seem to like border-style: dotted. But I’m sure this is all fixed in IE 7.

A final note: the banner at the top is a composite of photographs from Flickr. I can’t take a picture worth a damn, but fortunately other people can… and not only that, they sometimes release their work under a Creative Commons license. So thank you to the following people for making this redesign possible:

• mharrsch, for the cuneiform image
• rubberpaw, for the torah image
• Muffett, for the
  illuminated manuscript image
• machaggis for the antique printing press image
• reivax, for the IBM Selectric image
• gesteves, for the Macintosh image

And that’s all for now. Technically, this blog only has one post in it, so I’d better start filling it up. Don’t want to look like a newb…

Via Jacques, it looks like Sam Ruby has written some JavaScript that enables you to embed MathML and SVG in an HTML 4 document. XHTML is no longer required. Wow. Ever since XHTML came out, the only thing XHTML 1.1 has been able to do that HTML 4.01 couldn’t do was embed MathML and SVG. Now that’s gone.

There is also a little historical irony here.

At the 2004 W3C Workshop on Web Applications and Compound Documents, prominent W3C member and co-inventor of CSS Bert Bos went on record saying that JavaScript is the worst invention ever.

That always seemed harsh to me. Sure, JavaScript can be dangerous. You can easily shoot yourself in the face with it, boy howdy. But really, the worst invention ever? No wonder that Brendan Eich, inventor of JavaScript, expressed his irritation at the time — although this was less over the W3C calling his “baby” ugly and more about the disconnect between W3C’s recent work and the actual needs of web developers. In fact, it was right about this time that the WHATWG started picking up steam. But that’s another story.

Now fast-forward a couple of years. XHTML was the W3C’s baby.^[1] But with a not-particularly-long snippet of JavaScript, Sam Ruby has kicked the chair out from under XHTML. Actually, that’s not really the right image. Imagine a man with a chiseled jaw in a nearly immaculate tuxedo, Agent XHTML, clinging desperately to the edge of a sheer cliff with just two fingers. A dark, menacing, bearded figure approaches. “So,” he sneers, “you’re the best the W3C has?” Agent X looks up. “Ruby. I should have known you’d become a minion of J.A.V.A.S.C.R.I.P.T. Your evil master will never succeed in poisoning the World Wide Web!” Ruby just shrugs. “It’s a long way down, Agent X,” he says. Then he stomps on Agent XHTML’s fingers. The tuxedoed man plummets, screaming all the way down. Meanwhile, somewhere from his underground lair, the shadowy criminal mastermind known only as “Mr. Eich” watches all of this from a screen, stroking his pet cat thoughtfully. Hmmm, or does Brendan have a shark tank? Because that would be totally awesome.

1. Or more accurately, the last thing they’ve thrown over the wall to webdevs in the last five years.

I’m working on a new version of my ancient, long-neglected HTML Tutorial, which I originally wrote in 2002. The Official List of reasons why I’m doing this includes:

• finishing broken and missing sections, such as tables and forms
• updating the tutorial for the new web environment (IE 6 is now the baseline)
• migrating to DocBook so that I can provide multiple output formats
• replacing all copyrighted material in the examples with material in the public domain
• releasing the tutorial under a much more liberal license

But the real reason I’m doing this is because the tutorial currently says “tags” when it really should be saying “elements”. Arrgh! I cringe every time I read that. I’ve added a section about this to the tutorial so that others can avoid my mistake…

A Digression: What’s a “Tag”?

You’ll often hear people refer to “tags,” as in, “The markup tags tell the Web browser how to display the page.” Almost always, they really meant to say “elements.” Tags are not elements, they define the boundaries of an element. The p element begins with a <p> open tag and ends with a </p> closing tag, but it is not a tag itself.

• Incorrect: “You can make a new HTML paragraph with a <p> tag!”
• Correct: “It’s a good idea to close that open <p> tag.”

Now that you possess this valuable information, you’re in the same position as someone who knows that in the phrase “That’s not my forte,” the word “forte” should be pronounced fort, not for-tay. You get to feel slightly superior to people who say for-tay, but you really shouldn’t go running around correcting them.

Sometimes you’ll hear people say “alt tag,” which is even worse. An “alt tag” is really an alt attribute. This important attribute provides alternative text for images, in case the user can’t see the image for some other reason. We’ll talk more about this attribute later.

The element vs. tag confusion is sort of understandable: it’s a common mistake even among professionals, and they both look like angle-brackety things, after all. But attributes are not tags, not even close. If you hear someone say “alt tag,” this is a key indication that the speaker does not understand HTML very well. (You probably shouldn’t invite them to your next birthday party.)

I suppose I shouldn’t beat myself up, since nearly all of the prominent HTML tutorials get this and many other issues wrong, as any search for “html tutorial” makes depressingly obvious. Two notable exceptions are Stephanos Piperoglou’s Webreference.com tutorial and Patrick Griffith’s outstanding HTML Dog.

Sigh.

Look, go ahead and serve up “XHTML” as text/html. Really! So what? Yes, yes, if you actually served up your page with the right mime type so that it actually got parsed as XML instead of invalid HTML, your website would completely fall over. But hey, no worries! Fortunately, you’re not actually using your “XHTML” for anything that HTML 4.01 can’t do, so you can afford to blithely ignore the standard. Unlike, say, Jacques “The Hardest Working Man In Show Business” Distler.

So write some manifestos! Slap those XHTML doctypes at the top of your pages! Go nuts! But before you do so, take some time out to be thankful that there are hundreds of bright, hardworking, underappreciated coders who are designing browsers to clean up after your mess, just as they did for the table/spacer-gif jockeys of yore. I don’t think that’s too much to ask.

Wait… I’m on vacation! Why am I writing about X-Philes stuff?

Well, before Viable Paradise starts up, I’m staying with my friends Byron and Karin in Boston. Yesterday, I spent all afternoon roaming around Boston on foot on about one hour of sleep. Today, I enjoyed a glorious brunch of French toast made from homemade whole-grain bread, fresh blueberries, maple syrup, and “sausage” patties made from beans and various spices, with gourmet tea and mocha. This delicious meal would have been entirely Vegan, except for the bacon. Mmmm, bacon. Anyway, this afternoon we’ve just been chilling at the house, killing some time, waiting for Karin to get back from work. Byron has been playing with his latest toy, the PhidgetServo 1-Motor board. And I’ve been cleaning out my email inbox. Which leads us back to… the X-Philes.

For many, many months, I’ve felt a gnawing sense of guilt every time I looked in my inbox. That’s because way down at the bottom, there’s been an ever-growing pile of X-Phile email to deal with. Some of the emails I responded to with a lie, saying, “Thanks for this submission! I’ll try to get to this soon.” But most of the emails I just ignored. Terribly, terribly rude of me. At the very least I should have told each person that truthfully, I wasn’t sure if I would ever get to their submission. But the more time went on, the more I neglected the submissions, and the more I neglected the submissions, the more I wanted to neglect them…

Finally, in an effort to regain control of my inbox, I went through the entire queue. But before I announce the new additions, I’d first like to apologize to everybody for sitting on this for so long. I am far, far too embarrassed to contact anyone individually about the status of their submission. Most have probably forgotten or don’t care anymore, but either way, my sincere apologies for not at least getting back to you in a timely manner.

And now, congratulations to our new X-Philes. They are, in order:

• Schillmania. The blog of fellow Yahoo! Scott Schiller.

• Sam Kauffmann. Associate professor of film at Boston University.

• Phonophunk. Website and musical showcase for John Serris.

• loadaverageZero. Dedicated to the latest standards in Web accessibility, design and programming using client-server, open-source technology.

• Ether Multimedia. Multimedia consultancy and production house in Sydney, Australia.

• Plerion Webdesign & Development. Web development and consulting with an emphasis on usability, accessibility, and standards.

• Simone Deville. The most technologically-advanced dominatrix site, ever.

• Funky Jah. Coding projects, music, and more (and if I knew more than twenty words of French, I could tell you all about it)

• SR-71 Online. Thousands of pages about military aircraft, including the awesome SR-71, aircraft of choice for X-Men and X-Philes eveyrwhere.

A special award should go to Scott Schiller, who sent in his site in November 2004. Ouch. You can see why I’m far, far too embarrassed to even contact the owners of the sites that made it, let alone the ones that didn’t.^[1] I’d also like to thank Drake Wilson, for helping kick me out of my lethargy and convincing me to go through the old list and purge all the sites that were dead or invalid.

Finally, I would be remiss not to share a fabulous message I received late last year from an anonymous Concerned Citizen:

Well, I can’t imagine why you think this CRAP

http://www.brantfordsymphony.com/

qualifies. There is hardly any XHTML in it – it’s just cut-up images. IMO, it encapsulates all that is WRONG with the web.

You can’t pretend to me that it is valid XHTML 1.1 – there are 177 errors on the main page alone.

So much for your list. How much are you being paid by these people to pretend their sites are what you claim they are?

Wow, XHTML hate mail! The only other piece of hate mail I’ve ever received was from an anonymous person who disagreed with my assessment of Howard Stern. It’s not immediately obvious which guy wins in the IQ department, though. Howard Stern Guy was far more profane and less grammatically correct than XHTML Guy, but I think Howard Stern Guy still pulls ahead if we take into account the key metric of “reading comprehension”. See, Howard Stern Guy managed to correctly assess that I do not like Howard Stern, while XHTML Guy failed to read the text on the main X-Philes page, even though I had helpfully bolded the key part:

Note that I do not check sites for whether they are “Bulletproof” (by, say, stress-testing them with invalid comments and trackbacks). Nor do I continually monitor these sites for validity. Ongoing XHTML maintenance is the site owner’s responsibility, not mine.

Maybe I should bold the whole thing? Set it to text-decoration: blink? Oh, well. And now to go roll around naked on the huge piles of dollar bills that I’ve made off of the X-Philes. Enjoy your weekends, all!

1. If you A) submitted your site, B) are not on the list above, and C) still care about this silliness, please check your referer logs. You’ll see a cluster of validations made in rapid succession — these should indicate which pages I checked, and the last page is the one that either failed validation or wasn’t serving application/xhtml+xml. Back in the old days, I used to send an email thanking people for their submission and mentioning what had gone wrong, but as I said above, I am just way too embarrassed to send out emails after all this time. But please feel free to contact me or resubmit if you like. My apologies again.

So I’m trying to make a couple of minor modifications to my Movable Type installation’s MT::App::Comments Perl module, in order to make life a little more difficult for comment spammers. My goal is hampered slightly because I don’t know a damn thing about Perl.

In fact, the only language I know reasonably well is Java. Which means that any time I look at code for Language X, my brain does its best to overlay Java syntax on top of Language X, adding in any bits of Language X that I might have accidentally picked up over the years.^[1] For example, I can read C++, sort of, because Java’s syntax was designed to be a lot like C++. Except that C++ has all these funny characters sprinkled in: ampersands and asterisks and God knows what else. And when my brain goes down into the depths to retrieve the meaning of these funny characters, it unlocks a door called “CS 5“,^[2] and I curl up in a fetal ball and start rocking back and forth and moaning, and the only thing that snaps me out of it is hearing my co-worker Jud singing “The Lunchtime Song.” Yes, we really have a lunchtime song. Want to make something of it?

Anyway, Movable Type is written in Perl, and the module that handles comments contains several hundred lines of code, some of which looks like:

if (!$q->param('text')) {
    return $app->handle_error($app->translate("Comment text is required."));
}

Now, even my poor little Java-addled brain can understand what this means. For starters, I understand “if” and curly braces. I undertand the “!“, the “return“, and the basic idea behind “handle_error(stuff);“. Heck, I even think I understand “q->param('text')“! And in fact, if you try to submit a comment and you leave the “text” field blank, you do indeed get an error message:

Comment text is required.

Try it! It’s fun!

So as a test of my elite Perl-hacking skills, I changed the snippet above to:

if (!$q->param('text')) {
    return $app->handle_error($app->translate("Comment text is required, silly."));
}

But to my great disappointment, submitting a comment with no text resulted in:

Comment text is required.

This could mean one of two things:

• The Perl module is cached in memory, and the server is not picking up my change.
• The actual error message is specifed somewhere else in the code, and the snippet I was editing is just a red herring.

The red herring possibility seems unlikely. First, it would be perverse to create a module named MT::App::Comments, have a snippet that appears to handle the empty text field error, but actually handle the error somewhere else. I mean, I know the Perl world is whacky and crazy and There’s! More! Than! One! Way! To Do It!, but seriously. Second, I grepped through all of MT’s Perl code and did not find that particular error string anywhere other than in the Comments.pm file.

That leaves us with the caching possibility. To test this, I renamed the Comments.pm file, and lo! this completely broke comments. Excellent! Except that when I moved the file back, comment functionality resumed, but the system still wasn’t picking up my changes. So it seems that the system’s cache does bother to check whether any of its Perl module files have moved, but it doesn’t bother to waste time checking whether the module contents have actually changed. Perish the thought!

I can understand a caching system that is extremely “sticky” — even if you totally mess with the underlying files, the system doggedly continues to run with whatever it’s got in memory, until you somehow force the system to re-initialize. And I can understand a caching system that continually monitors the state of its files and obediently re-reads the code if it detects any changes. But the in-between behavior makes no sense. Why would you break if a file is missing, but not bother to read the file again when the file magically reappears? I have a hard time believing that this is actually the case. I must be misunderstanding how Perl is working here. Then again, after encountering the utter stupidity of pod2html for Perl 5.8 on Red Hat,^[3] I’m willing to believe anything.

Update: Success! Turns out I was grepping in the wrong place. The hack is now in place. See comments.

1. This is sort of like trying to read French by A) looking for words that are very similar in English and B) sprinkling in the thirty-odd actual French words that you dimly remember from high school. Which is, coincidentally, exactly how I read French. Quel surprise!

2. After taking that class, I swore I would never, ever work for the computer industry. And if I ever had to write software, it would only be to do something useful, like solving a physics problem.

3. As opposed to pod2html for Perl 5.8 on FreeBSD, which basically works okay-ish.