award tour

“html makes it so easy to write forms that look like crap”
- Jamis Buck of 37signals

For some reason I’ve been thinking about that idea a lot this weekend. The 37signals post which made this comment pointed out Wufoo, a site that let’s you create nice looking html forms for collecting all sorts of user information. The site is also a testament to usability and just looks damn nice (see some screenshots here). None the less, it’s still not what I, as a programmer, needs as it’s a hosted solution for non-tech people. I could really use a Wufoo that spits out some rails templates (preferably in haml) which I can just slap into my project. I find myself making html forms far too often, repeating way too much work, and spending too much time on css details. I need something clean, cross browser compliant, and preferably with some client side validation.

Wuhoo actually provides a good start with this. Their templates page (which has some great color palettes) actually gives you a static form with some standard items (like radio items, date boxes, address boxes, etc) along with css and javascript to make it look quite nice. There’s still work to be done if to hook it into your project, but it’s a start. I also came across this post which shows how to use css to do all sorts of horizontal and vertical layouts from a plain html form. I feel like mixing these two things together and adding some jquery form validators (and convert it to haml) could be pretty handy.

Seems the kind of thing I’d do if I was consulting full time (or maybe the kind of thing I’d do starting around June).

Seems Internet Explorer 6 is just out to screw me whenever possible. I just realized that all the posts I did recently which included album covers weren’t aligning properly IE6. So I assumed the images where the problem and after a horrible amount of edit-and-check cycles I realized that the problem was actually related to the italic text in the paragraphs. IE, for some stupid reason, won’t overflow italicized text properly so the width of the containing “p” or “div” is too wide. Luckily a quick search on google turned up a great summary of the IE and italics problem. I tried using the fix they suggested but I couldn’t get it to work. So what did I do? I turned off italics for “em” tags within IE6 or below (using this conditional comment trick) . So, if you like italics you should use firefox (or safari) or upgrade to IE7.

If you’re one of the idiots still using ie6, for the love of god, please use a different web browser. I don’t care what, IE7, Firefox, Safari, Opera, lynx. Just make it anything else. I just spent the last 2 hours trying to figure out why something was so messed up in IE6. Turns out I came across the “IE6 double margin” bug. In short, if you have some css like this:

div#example {
    float:left;
    margin-left:100px;
}

IE6 will make the left margin about 200px, NOT 100px. So how do you fix it? Add “display:inline;” and, magically, IE6 decides that you want a 100px margin and not some random arbitrary number that you never wrote. And, yes, this works properly in IE7, Safari, and Firefox.

I had recently thought that maybe another redesign of award tour was in order. I really liked the concept of tumblelog’s and enjoyed the minimal themes over at tumblr.

Well, as fate would have it, I accidentally deleted my previous theme (the green one, along with all the images I had in posts plus any mp3s I ever posted) while doing a simple wordpress upgrade. It also turned out that I didn’t have a backup. So instead of bemoaning my loss, I decided to implement my new more tumblelog-like version of award tour. And don’t get me wrong, ‘fuck’ was yelled several times when I realized my mistake.

I quickly came across a tumblelog theme for wordpress called typographic. After using this as a starting point I quickly realized that I was using some big dirty hacks to make it look they way I want across multiple browsers. The last thing I wanted was to start coding something up which was going to be a giant fragile hack. This seemed like the perfect excuse to finally try out blueprint css.

Blueprint is a collection of CSS files which let you create easily create css grids and does a pretty good job of setting your text on a baseline (here’s an article about why you might want to baseline your text). Having used Yahoo’s UI Grid, I can tell you that blueprint is much more intuitive to use. I probably had the biggest parts of my layout switched over in under an hour. This is possibly because blueprint doesn’t allow you to create a fluid grid. As this wasn’t a concern from me, I can say that blueprint is awesome.

After that, I probably spent a couple hours hooking in comments which, for some reason, was totally left out of the typographic theme. Then I spent the last 6 or so hours polishing up a collection of small details. No matter what kind coding or designing I’m doing, I’m always suprised how much time the small details take. I guess an app really is just “a collection of tiny details“.