How to Hack Anything

If you left a comment anytime between the launch of the new design and a few minutes ago, you may have noticed a nasty little bug that was causing the comment preview to display in the first sidebar instead of the post body area… this was happening whether you hit preview or post and it was driving me nuts. It didn't look good and it wasn't friendly.

So, I looked at the various aspects of the code involved with comments to see what was causing the problem. First I looked at the code for the comment form itself, but I couldn't see anything there that would generate a page so different from what I was expecting. When I viewed the source for the page in question, It showed that it was loading the proper style sheet for this blog, and yet, the layout did not match what was specified in the CSS. So I looked at the rest of the template code that drives the blog, and then, in desperation, I tried to read the JavaScript file that TypePad uses to generate and record comments. No dice. I could not find anything anywhere that specified the layout for the comment preview/CAPTCHA page.

So I filed a help ticket. I described the problem and then asked the following:

I'm not sure where I need to alter the code to fix this because I can't quite figure out what generates the preview.

Is it in the base CSS, the theme CSS, the comment form, template or comments.js?

Any help you can provide would be appreciated!

Jen replied with the following:

The comment preview/error page is just a standard format for all users. We are aware that this standard format doesn't look the best in all Advanced designs, and our team is working to make adjustments on this. At this time, we don't have a template in our Advanced Template sets to allow Advanced Template users to configure this page but this is in our plans for the future.

You can control what they'd like to display on this comment preview/error screen by using some CSS, so you might take a look at the classes that are used in that screen and see if that would help you.

Hmm. I was pretty sure I couldn't use CSS to fix the problem, since the generated preview page was only following some of the CSS in my style sheet. It had the correct banner image for instance, and the right styles for text… but the columns were in the wrong order and it was showing items in the sidebars that don't appear anywhere else on the blog. It was obvious that the page was being generated by an Advanced Template of some kind, but not one of mine.

So, I set it aside for a bit. I figured there had to be a way to fix it, but first I needed to figure out where it was coming from.

Later in the day, I was chatting with Michael Sippey and he confirmed that the post/preview page was system generated and couldn't be styled or altered on an individual basis. But then he gave me the teeny bit of info that was what I needed for a fix. He said:

It's basing [the page] off of [the template] you had when you converted your blog to advanced templates.

For a moment, I was all ready to give up. The reason comments were appearing in the sidebar was because the system remember a three column layout with posts in the middle. It was putting the preview where the post had been, but no longer was.

Since there is no layout in the standard templates that matches what I wanted (yet) there was no way I could generate an Advanced Template that would place the comment preview where I wanted it… which is when I had the Flash! If I converted from a single column Basic Template, or a two column layout with the sidebar on the right and then modified the templates and CSS the comment preview would show up in the left-most column, right?

Yup. Bingo.

So here's what I did:

1. From the Design Tab for this blog (that's important) I created a Basic Template with a single sidebar on the right.
2. I applied it to the blog, but did not republish so I could work on the templates before having the design go live.
3. In another tab, I opened the Design Tab and selected the current design for the blog from Saved Designs.
4. I then manually copied and pasted all the templates from the current design into the templates for the two column blog, making sure I had all the same filenames etc..
5. Once I had an exact copy of my current design, I went ahead an republished the blog… But since this time I had started from a design that expected the comment preview to go in the left-most column, that's where it puts it now. Yay!

So why am I telling you this entire story? What's the hack, the moral, the payoff, the gist? There's actually a bunch of lessons that this story touches on:

1. The most important lesson is that almost nothing is impossible but many things are less than obvious.
2. In design, and hacking especially, the answers come from looking at what things do rather than what things are supposed to do.
3. A subset of number two is that almost all the hacks I've come up with are based on using a feature for something other than what it's meant for. I'll remember that I can, in fact, control the layout for my comments preview page to match anything I can set up in Basic Templates. I like the fact that now that I know how to game the system a bit, I can even intentionally display different numbers of columns and different sidebar items within a single blog.
4. Ultimately, the solution to many problems is to approach from the side, or behind, or upside down or backwards. Part of what makes me good at this kind of problem solving is that I practice all day long by reversing and inverting ideas to see what else they hold when held up to a mirror (so to speak).

Anyway, I'm really glad I got it fixed finally and I hope the story was of some interest to people.

Comments

[Posted: Feb 2, 2007 9:31:33 AM]

Great post! This is an excellent example of problem solving at its best. Your 4 lessons apply to all problem solving not just writing hacks. When trying to solve any number of IT problems either hardware or software I seen people get caught in the trap of ignoring possibilities based on as you say "what is supposed to happen". The trick is to look at things with an open mind. Thanks for an excellent reminder.

[Posted: Feb 2, 2007 11:27:02 AM]

Hi Michael,

Glad you liked it! I agree that this kind of approach applies pretty much anywhere.

BTW, I took a swing over to your blog and have subscribed to your feed. You're doing a great job yourself of writing about problem-solving and prevention. Nice work!

[Posted: Jun 16, 2007 12:50:32 AM]

hi john, how did you manage to have your banner appear on your preview comment page? love the blog by the way.