First off, where props are due for Brainside Out: Wounded Knee Edition, props must be given.

Special thanks to Travis Beckham for his hot background patterns. Seriously, half the the internet is usin’ his stuff, and I don’t think he gets near enough credit. Wounded Knee uses pattern 130.

Props go to XPAIDER for the schweet retro font used in the new Brainside Out logo. Unfortunately, the XPAIDER website blocks any web browser except for Internet Explorer 5.5 and above, and that makes me want to cry molten tears. I did tell them how I really feel, and that will teach them to give away their quality worksmanship for free.

The wolf paw is from the well-known cultural stylings of Wuda Wooch! This particular one was inked on a flag that belonged to my Duluth roommate Tom. I hear that these days Tom is teaching at an elementary school or married or dead or something. Whichever it is, more power to ya, Tom!

Hover states for the header, footer and navigation links are done purely in CSS, using Pixy’s Fast Rollovers Without Preload technique. The image replacement code was inspired by the technique used by Jeffrey Zeldman on his site, which I particularly liked because it didn’t require any ugly hacks for fussy browsers. It is the Phark Revisited technique, and you can learn all about it (and all its kooky siblings) at David Shea’s little nook.

I’m doing something kind of interesting with the logo image in the header, a technique I discovered while working on a client site. To help shave bandwidth on an image that overlays text on a photographic background, I will sometimes render the background as a jpeg and the text as a gif with transparency.

To get the logo gif to anti-alias correctly, I will run the background image through a gaussian blur filter until I can sample an average background color, and then I paste the logo layers on top of that color. I magic wand and delete the background color with zero tolerance and no anti-aliasing, crop right up against the logo, save it as a gif, and position it over the background using margins and/or padding. There are a few advantages to this approach:

1. You can typically shave a few kilobytes off image size, as the background is happy to be rendered as a simpler jpeg file, and the logo is happy to be rendered as a smaller gif file. This is especially useful if you are using Pixy’s rollover technique, and you need to use larger images to render your rollover states in the same file.
2. There is no variance in jpeg artifacting on the background when the logo hoverstate is initialized. Only the gif is swapped out, and the gif ain’t the whole image.
3. If you aren’t happy with the placement of your logo relative to the background, you can adjust margins and jostle it around pixel by pixel, without editing the image file. If you’re anything like me when you hack together a design, you keep a shoddy history of layered files that are all outdated and not very hot compared to what you ultimately churn out.

Of course, in its implementation on Wounded Knee Edition, this technique failed painfully on the first count. I think it bloated my header file size by, like, 20K. The size of the gif image in relation to what I truly require for the rollover state is far from optimized.

Sure. It may be lousy, but it’s my lousy!

While studying Douglas Bowman’s beautiful three-column layout at Stopdesign, I came to a sudden realization as to how one can achieve the look of a tabled layout (with multiple columns that stetch automatically to each other’s heights) without using tables. I’ve seen tons of different techniques for doing it, but they all seem to require ugly nests of semantically meaningless <div> tags that make me feel ill.

It occurred to me that I was going about the problem backwards, in that I was trying to figure out how to get each element to “stretch” to the height of the longest element; to force them to fill up the dead space not populated by content. However, the solution was not in the elements and what they contain, but in their containing element.

I assigned a small, vertically tiling background image to my div#whopper element, which wraps my header, footer, navigation and content elements. Bammo. No matter what I put in the navigation column, no matter what I put in the content column (words, pictures, dead armadillos, abstract concepts of time and beauty, etc.), everything appears at the same height and looks pretty.

Check out the mysterious fellow silhouetted in the navigation… pretty neat, huh? Navigation is marked up as an unordered list, and the hover states are achieved with Pixy’s technique, swapped background colors, and padding.

As far as I can tell, everything displays perfectly in IE6.0/Win and Opera 7.5/Win. Mozilla and Firefox are having strange hiccups in rendering the borders between navigation links, and IE5.2/Mac likes to make the border between the navigation and content columns disappear. The CSS validates and the page layout validates as XHTML Strict.

The way I play fast and loose with content, however, will likely blow up my XHTML validation on just about every page. Until I reign myself in, then, I won’t be putting any of those cute CSS buttons anywhere on this site. So forget it. And quit asking.

First off, a slight history lesson. I started building what ultimately became Brainside Out in January of 2001. At that time it was called Cromlech, and it was clumsily spun with the help of Go Live and Dreamweaver.

The first Cromlech was called Version 0.001, which I relaunched for a few weeks in January 2004 to test my new l33t sk1llz with CSS and XHTML. Version 0.001 was replaced in early February 2001 by version 0.002, which was in turn replaced by 0.009. They were all strikingly similar, but each involved enough work that I considered them relaunches. In late March I replaced Version 0.002 with Version 0.01, whose artistic direction was inspired by the popular snowboard graphics of that year.

In May 2001 Version 0.01 was succeeded by Version 0.05, which I designed while under the influence of mono, Fear and Loathing in Las Vegas and essays written by Kentucky 12th graders. Version 0.05 used stolen pictures of brick walls and thick Photoshop bevel filters, which signalled my first venture into using photographs to determine art direction.

In October I redesigned and released Version 0.09, which incorporated hot pictures of Tettegouche State Park and the Baptism River, and took advantage of frames for consistent navigation. Version 0.09 went through a few iterations until it was stable enough to be considered Version 0.10. When March of 2002 rolled around I launched Version 0.15 with a design inspired by the mishmash of found objects that my life had become. I scanned agates, concert tickets, 35mm film, typewritter ribbon, and anything else that looked cool and could be carried or dragged kicking and screaming onto the scanner bed.

Version 0.50, launched in May 2002, saw a considerable redesign. With my site still running on the UMD server I had figured out how to run CGI scripts, and thus installed Greymatter to automate (and decentralize) my blogging process. The design was pink and blue for some reason, and it actually incorporated the same shocky fellow we see in today’s footer. The school year ran out before I could get a solid design in place, but thanks to Greymatter I was able to post updates while working at camp for the summer. Trés cool.

Finally, for September 2002 I pulled up my roots from the UMD server and grafted my existence onto a platter at Pair Networks. Version 0.51 was a temporary design more than anything else; a proof of concept on the new server under the guise of Dane’s Bored. Oh yeah, and it was less pink. That was good.

However, thus freed from the surly bounds of the University, in late September 2002 I finally got an installation of Movable Type up and cookin’ on Dane’s Bored. A rather hideous and painful period of growth followed, as I quickly realized I didn’t have nearly the expertise with HTML (nor CGI plugins and templates, for that matter) to actually change anything. It was only four months ago when I had learned enough HTML to muck around and get Greymatter working, and Movable Type demanded a new degree of sophistication.

Finally, by January 2003 I had enough figured out that I could launch new Movable Type templates with pictures of Colorado mountains, Derek’s sled dog puppy, and certain things like this and that, this and that, this and that. Throughout this period, each design gruesomely cannibalized its predecessor, so there is little known record of what existed at this time.

During the spring of 2003 I tried to create my own XHTML/CSS tableless layout, with a design inspired by the graphics and colors of Atari gaming. It kinda worked, but the design was hell for anyone who wasn’t using a computer with the exact hardware and software configuration as my own. When I moved to Hood River for the summer I went back to the drawing board, registered www.brainsideout.com, killed www.danesbored.com, and soon launched Brainside Out: The Cowboy Edition.

Cowboy Edition managed to be tableless without the tortured code structure of Atari Edition, and it was attractive enough that I survived on it until I moved to Bend in November 2003. Why, I’m certain that there are sections of this website, tucked away from direct sunlight, that are still using Cowboy Edition to disasterous effects. While living in Bend I have experimented with testing a few different designs, and finally settled on Rugged Edition for some time.

Rugged Edition was inspired by the album art for Nature of Maps by matt pond PA, and tried to incorporate scanned topo maps into a design with subtle colors to match. It never really worked to my satisfaction, and despite attempts to rescue the design by adjusting colors or adding gradients, it always look so… pink. At its prime, however, Rugged Edition was by far my most sophisticated, compliant, accessible, semantic, and flexible design to date.

But now that is all behind us. Ladies and gentlemen, I present to you Brainside Out: Wounded Knee Edition.

The answers are coming.

Okay. Things are looking pretty good now. Welcome to the new hotness. It has been a long haul and now I’m dizzy and tricked out on dnL, so it’s probably about time to hit the sack.

In completely unrelated news, comments have been disabled, and will remain as such until someone quits spamming my blog with modern remedies for a physical concern that is as old as time.

Right now, allz I can say iz…

hold on to yer butts.

ATTENTION: What follows is a huge and ungentlemen-esque spoiler for Peasant’s Quest, the latest hot release from the fellows at Videlectrix. So many of the delicious treats in this game pop up when you are trying to do the impossible, or are doing stuff totally wrong, or are just dinkin’ around trying to do any old thing, and the trouble is that a walk-through absolutely defeats this purpose.

But sometimes, life can just be a little bit frustrating. Honestly, in a moment of weakness during Peasant’s Quest I too grappled for Google, just to see if anyone out there could help a brutha out. No one had drafted anything of the sort, and at that moment I vowed I’d sketch out the game if I managed to beat it. Not in the intent of building a paint by numbers kit for everyone, unless of course it was a paint by numbers kit that you need to hunt and kill in the woods, drag back to the arts and crafts table, and clean and gut for all the little campers who want to bring something nice home to mom and dad and are sick of being creative with mud, sticks and crusted blood.

So with that, I present to you the Grand and Massive (though not particularly massively grand) Peasant’s Quest Walk-Thru of Rarely Seen Semblance and Order ®

You start here. Do you see where you start? That’s where you start. Go two screens south and one screen west to the cottage with the crunch berry bushes out in front. Go inside. Talk to the lady. Get some chicken feed. Try to steal the baby. Try to sleep in the bed.

Go outside and try to get berries from each of the four bushes. You will find a super trinket in the last one you search.

Go one screen west and one screen north to the west “half of a lake”. Get some of ‘dem rocks from the shore.

Go one screen north and talk to the archer. Remember his odd speech mannerisms.

Go another screen north. Put the rocks in the bucket. Turn the crank and grab the monster maskus.

Go two screens north and one screen west, to your burninated cottage. Look at your cottage, and get the piece of paper on the ground. This is a map, and it’s sure to come in handy in this wildly complex world of sight and sound. As you’re joggin’ around this area, make sure that you avoid the Kerrek. He smells bad and he’ll pound ya into the ground if ya give him a chance.

Go one screen west and two screens north. Try to talk to the horse. Try to ride the horse. Put on the maskus and scare the crap outta the horse.

Go west, through the hole that the horse busted in da fence. Remember what the archer told you to tell his brother? Say ‘Haldo’. The brother will leave. Saddle up to the tree and get yerself an arrow.

Go back to the archery range (the map should make runnin’ ’round a bit easier on ya) and give the super trinket to the reunited brothers.

If you hit the bulls-eye three times you’ll get the SuperTime FunBow ™. You get unlimited tries, so if you’re an incompetent screw-up just keep talkin’ to the brothers until you finally get it right. Pay close attention to your timing, and be sure to compensate for the direction and speed of the wind. Cuz, like, yeah.

Go two screens north to find the Kerrek. Use yer arrow and kill him dead. The land will rain in celebration. Walk up to his stinky corpse and grab his stinky belt.

Go hop in the dried up mud puddle, which ain’t so dried up now that it’s been rainin’. It’s two screens south and one screen west of where you probably killed the Kerrek, but don’t let me boss you ’round. Use your map or do some freakin’ explorin’, you little devil, you.

Now that you’re caked in sweet-smelling mud, go one screen south and one screen west to find the Jhonka. Now that the Kerrek is dead the Jhonka is chillin’ in front of his cave with his loot, but ya’ll can’t grab his loot or else he’ll rend you into tiny bits.

Go one screen north and jump in the hay stack. Go south and get the Jhonka’s riches. When he inquires, it is in your best interest to tell him that no, you are indeed not stealing his riches. Tell him yes if you want. Go ahead. I’ll wait.

Go back to that lady’s hut, one screen south and three screens east, what with the crunch berry bushes and all. Give her the riches and she’ll give you the baby. Excellent.

Try using the baby on all sorts of things, like rivers and ponds and wells.

When you grow tired of that, take the baby to the abandoned hut representin’ on the south west side of the map. Move the rock on the right side of the hut and put the baby in the hole. The baby will do all sorts of magical things, including opening the door, graduating from school and becoming a drunk.

Go inside, open the drawer on the dresser and take the robe. Put on the robe. Now you’re stylin’.

Go one screen east. A half-naked man will pop out of the tree in the foreground. If you try to talk to him he disappears. I’m sure that there is somethin’ you can do with the feller, but I jus’ can’t figure out what it is. Nice pixelated nipples, regardless.

Go two more screens east and one screen north to the east “half of a lake”. Talk to the old man, walk up to the shore, and toss the chicken feed into the water. This is a very sentimental moment.

Go one screen east and open the door to the inn. Look around. Look at the man. Look at the rug. Look at the bed. Try to take the pillow. Ring the bell. Read the paper on the desk. Look at the painting. Finally, GET A ROOM.

After you wake up, look in the pantry. Get the pot of horse grease. Stumble out the front door. Stumble is right.

Go one screen south, and walk under the lantern to burninate yourself. Now you’re a real peasant!

Go two screens north and talk to the knight. Walk up the path, and at the next screen start climbing the mountain. Watch out for rocks. Rocks are bad. If you get hit by a rock you get deadified and the falling sound gets really annoying.

At the top, look at the bones. Try to get the bones. Walk in the cave.

The three keepers will ask you three Trogdor trivia questions. If you’ve actually been playing the game (rather than following a silly walk-through) these will be quite easy. If you answer a question wrong you will be cursed into writing unpopular folk songs or something equally hideous.

You are now armed with the TrogHelmet, the TrogSword and the TrogShield. Walk through the beaded curtain to meet your destiny.

Use your sword on Trogdor.

Talk to Trogdor.

Now you’ve won! Or actually, I’ve won and you’ve waltzed through a bunch of guided steps, thereby eliminating any potential joy of discovery whatsoever!

Note: Whatever I did to win, I have only managed to amass a scant 134 points out of a total of 150. I’m missin’ something, here, which might have to do with hanging out with the half-naked man or something. Nevertheless, I am one man with many things to do besides write walk-throughs for vintage-esque computer games, and while I probably won’t figure out this discrepancy on my own, I trust there are millions of you out there who are, at this very moment, trying to make up for my own shortcomings.