Skip navigation

The bug card you have says some buttons aren’t appearing properly in IE7 and the latest Chrome. So you dive in with your front end tweaker and start disabling styles dynamically hoping you can affect some change in the cascade that will fix the bug live in the browser right there in front of you. Bam! Looks good in Firefox/Chrome and then you open IE and things go to hell. Sound familiar?

It’s at this point that you should really stop what you’re doing and try to isolate the problem. I’ve spent more than enough time hacking in this way to know that it’s a lost cause and infinitely frustrating to boot. The best way to fix a rendering issue in a case like this is to isolate your problem so you can control the number of variables you are testing.

Here’s how I like to break down my isolation debugging process:

1. Create a Test Case

Open a new html file in Textmate or your favorite code editor and create a brand new HTML page. I like to keep a skeleton page so I can do this quickly. This page should have no stylesheets or scripts loaded.

http://gist.github.com/665184

2. Replicate the Environment

Bring the HTML in question into your sample page as it appears in your production code. Also bring only the CSS that applies to those elements and put them in a style block in the head of your sample page.

3. Verify

You probably have some assumptions about what you think the problem is, this is the step where you verify that. Open your sample page in the browsers you want to test in and see what kind of results you get. The goal here is to eliminate the thousands of lines of other CSS and JavaScript that might be altering the way your markup is displayed.

4. Refactor

Once you’ve verified things are behaving the way you want you should probably refactor that HTML and CSS to contain less presentation in your markup. Often markup from legacy applications has been touched by many different people with varying interpretations about how to write HTML; that’s ok but given you spent the time to isolate this problem you may as well do some cleanup.

5. Verify … Again

You’ve made changes, run your test page through the browsers you are testing for again. Repeat step 4 and 5 until you’ve got a good baseline to work with. It’s also good to remember the answer to http://dowebsitesneedtolookexactlythesameineverybrowser.com at this point. 🙂

6. Integrate

You were able to eliminate a bunch of redundant CSS selectors and redundant markup. Great! Now it’s time to inject your newly refactored code back into the mess of 50 CSS and 40 javascript files. This can be challenging based on how many dependencies you touched in your refactoring but at least you have a baseline of what to expect now.
Integration is going to result in some more rendering anomalies but now you have a core set of solid CSS/HTML that you know will work. What you do now is go through Firebug/Webkit Inspector and start disabling styles in the cascade that also affect your elements until you get the result you are looking for.

Conclusions

You will probably still have to fiddle but at least you will have eliminated a significant amount of frustration by isolating the problem and proving out your assumptions about how the markup and css will behave in other browsers. Of course you could avoid a significant amount of this cross browser troubleshooting by using something like Compass and SASS, but that’s a topic for another blog post 😉

I hope this was helpful to you and I wish you luck on improving your front end debugging process and reducing the amount of frustration experienced.

I've been playing a lot of basketball at work these days on lunch and coffee breaks. As a programmer who sits most of the day, it's nice to have a place to go to spend some energy. I've been keeping track of my progress in shooting free throws and my percentage has been steadily improving. I think I shot 80% last week (using a general warmup and then 10 in a row as my benchmark). I had what I like to call a "micro-epiphany" the other day when I went out to shoot baskets.  I started thinking about what it takes to be successful at basketball and realized that there are two primary areas of skill required: mechanics and focus.

To succeed in putting the ball through the hoop you have to be solid in your mechanics. Your guide hand needs to support, but not influence, the weight of the ball on your shooting hand. The ball should be positioned in your shooting hand in front of your head and not above it. When you release the ball you need to have a proper follow-through that directs and puts the proper amount of spin on it. The amount of weight you put into your shot is also influenced by the usage of your legs and the proportion of force you exert with your arms. When you break it all down from a mechanics point of view there are lots of things going on in a shot. Add in other variables like juking defenders, shooting from the triple-threat position, jump-shots and you can see how the number of points of failure in the mechanics of a shot can grow exponentially. In order to combine all the elements of a successful shot you require an understanding of all these mechanics; more importantly you need to have focus.

Focus is like the glue that holds all the pieces together. When I was learning to shoot in high school we would do many drills that broke down each of the components of a shot into the basic parts. It's necessary to break things down when you are working with complex processes because people, by nature, develop bad habits. I haven't played ball competitively since the end of grade 12 and it was surprising to me how bad my shot had become when I first picked it up again almost 6 weeks ago. Luckily I had a solid foundation of skills and the knowledge of how to do "corrective surgery" on my shot techniques that I was able to improve significantly and bring my shooting percentage up. (It remains to be seen if I can still perform under the pressures of defense and actually shoot well when playing against other players). However, even if I was perfect in all of the mechanics I would fail to make my shots count if I didn't have a focus on what I was doing. It's hard to describe it accurately so I'll attempt to convey a brain dump in words of what goes on inside my head during a shot when I'm attempting to focus.

"Ok, setting up for a shot, feet are planted, I know what I'm going to do."
"The ball is going to go in the hoop, I'm aiming for the back of the rim because historically that's where I hit a higher percentage of my shots"
"Good leg extension, I need to followthrough with my hand and point to the rim. Don't forget to reach for the cookies".
"The ball is going to go in, I aimed for the back of the rim."
"Release felt good, that shot is going in."

I don't know if that accurately conveys what happens in nearly a microsecond, but it's roughly what goes on in my head during a successful shot. The things I've bolded are what I believe to be the most important parts of making that shot. Here's the breakdown as I can categorize it:
  1. Have a plan.
  2. Reiterate the plan.
  3. Reinforce good habits I know.
  4. Express confidence in the plan. Reiterate again.
  5. Celebrate victory upon execution.
Having a plan is important. It helps focus my energy into a consistent framework that I know has worked in the past. Reiterating things helps me to re-focus if distractions start to creep into my mind. Talking to myself about the good habits I've developed helps me to avoid falling into the bad ones. Expressing confidence solidifies the action I'm about to take and removes any doubt in my mind that what I'm about to do will be successful. And claiming victory, which may seem unimportant, is crucial to seeing that ball go through the hoop. The last few moments before the ball leaves my hand are a critical point in the timeline of the shot. Everything up to that point has been mechanics but once the ball leaves my hand I can't let down in my mental focus. It's almost as if I will the ball to go through the hoop and my mental concentration is just the final exclamation point, the stamp of approval, on the entire process.

"Swish. The ball went into the net. I knew it would. That was a great shot!"

Once execution is complete and I can see the results of all my hard work I find it helps to reflect on what went well and give myself a pat on the back. Positive reinforcement of this kind works much better than beating myself up over the few mistakes I may have made in the process of taking the shot.

I'm sure there are many parallels that can be drawn between what I've talked about here and other facets of life, but I'll leave that up to you the reader to do. 

All I know is that it feels good to play ball again. It feels good to focus 🙂

I haven't written anything here in a while. Life's full of seasons just like the planet; I guess it's been winter on the blog while it's been summer outside (if you can call the torrential downpour "summer"). I have a friend who went through an interesting experience recently. I don't want to get into the details because they aren't important, what's important is the lessons learned by my friend and, by proxy, me. I'll try and relate what I've learned through some stories.

When I was in elementary school there was a certain hierarchy in place: the bullies intimidated the people who were weaker minded or easily influenced into supporting them in their cause. They would surround themselves with these people, the "yes men", and form what appeared to be an invincible force of fear and intimidation. Bullies do this for many reasons but the most fundamental is that they want to get their way. I was involved with many altercations with the bullies because I refused to align myself with what they wanted. I chose to stand up for what I believed in and didn't feel like having someone else dictate how I could or couldn't act. I'll be honest, standing up for what I believed in caused me a lot of pain and grief. I got into fights, was picked on and made fun of, and generally seen as one of the unpopular kids as a result. But I didn't compromise what I believed in; I didn't stand for someone influencing what I believed or what I could do. I wasn't a yes man then.

During the transition period between elementary and high school (grade 8 – grade 9) I noticed some interesting things about the relationship between the bullies and the yes men; they broke down. Part of it may be because of the size difference in our elementary schools (a few hundred) and the high school (almost 2000) but I think it was also due to the summer when most kids are on vacation or go out of town. The bullies didn't have their yes men around to back them, nor did they have a steady stream of kids to pick on so I think they had to find other things to do to scratch the "bully" itch, whatever that is. High school was also a change for me, it afforded me the opportunity to not be on the bottom of the pecking order, so to speak. The bullies weren't in my classes and the circle of yes men they had built up in elementary was disbursed throughout various course selections, timetables and schedules. Without the bullies and their yes men around I developed self confidence, I wasn't afraid to voice opinions in class and contribute to the discussion around me. I developed my own sense of direction in life, the things I felt were important, what I valued and what I wanted to do with my future. I wasn't a yes man then either.

Fast forward 20 years or so later and I've got a house, a beautiful wife, two amazing children, a dog who wears a tie ( ask me later :), a job and responsibilities. Those all sound like pretty great things; you might even say after reading this far that the relative level of success I've achieved has been because I wasn't a yes man. The thing is, I've been a part time yes man for a while. Sometimes I stand up for what I think is right and sometimes I just keep my mouth shut. The bullies aren't around anymore like they were in school, they don't beat me up or call me names or get their friends to throw rocks at me, however there are new bullies and they aren't always people. Ideas can be bullies, things you read on the internet, things you listen to on the radio, books you read… they all call you to make some sort of choice when they engage you. Money can be a bully, we always want more of it yet often getting more truly never satisfies us; being a yes man to the money bully ends up in nothing but grouchiness in my experience. We can also be bullies. We try and surround ourselves with yes men who will make us feel validated about our decisions and justify the things we do. 

The thing I've realized is that whether you're the bully or the yes man either way it sucks. The people in life who are the most successful are those who don't compromise what they believe to conform to a certain standard. They stand up for what's true and good and noble and what drives them to be the kind of people they are. They stay true to their convictions.

I'm done being a yes man.

via tweetie

Posted via web from david mosher

via tweetie

Posted via web from david mosher

via tweetie

Posted via web from david mosher

via tweetie

Posted via web from david mosher

via tweetie

Posted via web from david mosher

via tweetie

Posted via web from david mosher