Quality Control

Things have been really hectic at work since March 5. This has cut into blogging time, but that isn’t that rare of an occurrence. Unfortunately, I have been so busy, I had even forgotten to “check” my blog since the first week of April. You see, even when I am not actively developing content, I do try to, once a week or so, “smoke test” the blog – make sure it is formatting/rendering correctly and that URLs, videos, and images that I am linking to are still active. Now that I have enabled AdSense, I also check my earnings - $1.51 so far this month. (Do I drive some serious traffic or what?)

So imagine my embarrassment earlier this week, when, after work one evening, I jump into my blog after several weeks and see that selected posts have these ugly-ass rectangular boxes overlaying my content. The overlays were transparent rectangles with a thin outline on Google Chrome (my browser of choice) and white rectangles on Microsoft Internet Explorer – didn’t have the heart to check Firefox. Yuck. The only thing worse than a blog that doesn’t feature new content is one that doesn’t render correctly. One of my favorite recent posts was afflicted and a spot check of other posts told me it was not an isolated issue.

Sigh. So while I mostly enjoy developing software, sometimes when you are really tired, you just want to use the damn machine and system software stack – not fight with it. But I wasn’t going to bed without fixing the overlay. So I set out debugging it. I am very good about making backup of my Blogger template – this is the customizable XML file that renders the content of your posts – it provides the look and style of the pages – the elements around the actual blog posts.

Google provides some UIs for customizing your template, but, even though my professional expertise is in server-side stuff, I can sling a little HTML and CSS as well, so I will often directly edit the template. (Google advises against this.) Anyways, so I thought maybe had injected some bugs into my template and just hadn’t noticed them – but I hadn’t updated the template since mid-March. So I went back and restored some earlier templates and they all showed the same ugly rectangles, so I inferred that the breakage was in some interplay between Blogger itself or the various widgets that my blog uses.

So I started removing those widgets one at a time until I could find the culprit, the offending widget. Turns out that when I removed Disqus from my template, the ugly white rectangles disappeared. So round one of the fight was completed. Disqus, or something else’s interactions with it, was breaking my blog. Disqus is this free commenting system. It is the code that allows you to post comments and reactions and do threaded discussions and all that stuff at the bottom of each blog post. So Disqus is important and I really like Disqus – the concept, the implementation, and the team that builds it seems pretty sharp. Disqus seems to have its share of haters as well – such is life.

So, even though most comments made about my blog come through Facebook (and that is good too), there have still been around a hundred or so comments that have been made using Disqus. I really wanted to continue to see those comments because they are quite good. So round two is on – I need to get Disqus working correctly and it is getting really late.

Praise the Lord for Google Search – it is just so damn good – it continues to amaze me. First set of search terms I kicked were: “disqus white rectangles Blogger”. Before I even got to drill down on the first item on the search results, I was confident that I hit the jackpot. It is so intellectually satisfying when you feed just a perfect set of search terms into that engine and you see that first item and know you have got it from just the summary of that first item. In my case, it was a page from the Disqus Knowledge Base and had a recent date of March 12, 2012 on it. This had to be the fix – and sure enough it was.

So, in the spirit of giving back to the community, I thought I would write up the following tech note in case anybody else hits this (and of course, as a side effect, drive some traffic to my blog from search engines).

Environment	Google Blogger, Disqus, Google Chrome 18.0.1025.162 m, Microsoft Internet Explorer 8.0.6001
Symptom	When Blogger post pages are loaded, at the end of the load, two adjacent rectangles are overlaid on top of blog content. On Chrome, the rectangles are transparent – on IE they are white. Clearing browser cache does not remedy issue.
Fix	This is a known issue documented in the Disqus Knowledge Base under the title of “Mobile Theme Is Covering Content”.
Steps to Remedy	Log into your Disqus Dashboard. Click on “Admin” and then “Settings”. From the Settings Page, select the “Appearance” tab. From the Appearance tab, specify the following in the “Custom CSS” field: #disqus_thread { clear: both !important; } You can also add that CSS directly to your Blogger template.

Sorry for the inconvenience – I’ll try to do a better job in the future on the Quality Control side of things on the blog. If you see anything funky or out-of-whack (RIP JoePa), just add a comment – I get email notification of those – and it will be addressed quickly. Oh – and I’ll give you a cut of my AdSense earnings.