Thursday, 13 November 2008

My Very Own Blogger's "Day of 13th" Story, or RESPECT Your Code, Man!

Well, ok, this all happened yesterday (12th) but it counted as a day of 13th story nonetheless.

To begin from the beginning (yes, I know you're already yawning), I have this damning habit that, when I wake up in the morning, I check out the status and traffic on my two ongoing blogs, this one and the other one (incidentally, www.esotericoffeehouse.com). This particular day, since Firefox for some reason was going a bit slow, I opened the IE browser. Lo and behold, my face dropped, the site looked all jumbled up, the sidebar at the end of the home page, the header skewed on the page, in one word, DISASTER!!! Now, I had been in the habit of checking my page in both browsers before, but not for about two-three days now. Well, SOMETHING had happened that had simply shred my site to pieces on the IE browser. Ironically, only the first page (which as we all know is the blog's heart so to speak) was shattered, the rest looked normal. But who would want to visit the next pages of a blog whose home page seemed to come from la-la-land?

That was not the only irony, of course; I had just advertised my blog to a group that I know personally, so I was already bit sensitive about how they reacted to it anyway. Just thinking they would have opened IE and saw that abomination gave goose bumps and cold sweat.

In Firefox, it was all light and peace on earth, God bless them.

However, the difference between Firefox and IE only made me more clueless about the reason of the difference. How could it possible be that my site looked fine in Firefox and lousy in IE?

As it turns out, RL (codename for Real Life) intervened and I could not sort this out for the next half a day. When I returned, nobody had magically solved my problem: darn. What happened to an old-fashioned miracle.

I spent the next five or so hours trying to figure out what's wrong, with my rather rudimentary programming skills. I thought for a while that, just maybe, it was Bill Gates' fault. Almost everything in the world is, so why would my glitch be any different? If Firefox works and IE doesn't what else could I think? So I tested the theory. I downloaded Opera, the 3rd browser I know of. To my dismay, the site bombed on this browser too. Thus I had to concede that it was my fault, not someone else's (darn!).

I had a moment of despair. How on earth am I going to figure out why IE would react differently than Firefox to my blog? Then I remembered something. Someone, in ancient history, had told me that if something works in one browser and not in another it is most likely a coding problem. I can't remember where, or when this was said! But it was the beginning of my salvation.

A long salvation, that is. If the code was wrong, I had pages and pages of codes to review! Considering that AND the fact that my programming knowledge is so-so, I had a daunting task in front of me. But did I have a choice, really?
Now, the website is based on the Wordpress template. But throughout time I had changed it quite a lot, little by little. Of course, the problem had to be a some recent modification, but for the life of me I couldn't remember all the changes I had done in the past few days. I started looking into tons of code - but my 'fixings' only succeeded to make half of the messed up sidebar disappear completely.

You can imagine that by now I was freaking out. And it was 12 at night.
Ok, it's time to calm down and recollect. I remembered I never got anything done in a state of utter despair and frenzy, so that couldn't be the way. I breathed out, and started thinking methodically. The fact that the other pages except the 'home' was showing out just fine was an important clue. But to what? Well, as I looked at the code I realized that Wordpress structures every page like this (this is getting a bit technical): a header (from a header.php file) + a customized body + a footer (from footer.php). The only real variation amongst the pages was the "body" part which was either index.php, page.php, link.php, what have you. So what you see on your screen is really three PHP pages combined.

If the only page wrong was the "home" one, alias index.php, there must have been something there that was awry. Now, I had already gone through index.php and found nothing. But why not compare MY index.php with the ORIGINAL index.php?
So, my index on the top of the page against the original on the bottom half, I started to verify every line of code for differences.

Everything seemed alright, except - what is this? Is this an extra "!" in the php code?? That's what it looked like, so I removed it. By this time, it was 1 o'clock and I was getting really really tired. So I thought - please please let this fix SOMETHING so I may go to bed feeling a bit better. I closed my eyes, pressed 'refresh' on IE, opened it...
and lo and behold, like magic, like a real miracle, everything was back to normal. The trouble that had horribly messed up my home page on IE and Opera was due to an extra "!" in one line of the code! Firefox, being my friend, had probably chosen to overlook this error, but IE and Opera punished me for it.

That was it. I went to bed immensely happy and dancing on the inside.

Well, that was it and a lesson too. I was becoming a bit too cocky about my blogging knowledge. I was also starting to believe that I could mess around with the code as I saw fit and nothing was going to happen. The code came back to haunt me. And I had started to imagine that the code was just something in the background - but it is the foundation, the strength and the core of one's site. Nice articles, nice words, nice traffic - it's all good and well, but if the code 'ground' is not firm it will all go down the drain sooner or later.

My advice then, to myself and everyone else: learn CSS, HTML and as much PHP as you can. It's priceless. Respect the program, and all the people that worked long hours to deliver you a flawless template, as much as you might find it not snazzy enough. Oh yea, and of course: test your page in at least IE and Firefox every time you change it! Perhaps Opera and Safari too.

g'night folks.