Where is Old Google Keyword Adwords Tool?

Google recently upgraded their keyword Adwords tool and their user interface has significant improvement. However it no longer allows me to show results for ONLY the keywords I entered, which was allowed in the old interface. I tried to find the old keyword tool and eventually found it. To save you some trouble here's the url to the old Google Adwords keyword tool:

https://adwords.google.com/select/KeywordToolExternal?forceLegacy=true

For those who don't know how to show results for only the keywords you've entered, do the following:

* Uncheck "Use Synonyms"
* Expand "Filter my results" and check "Don't show ideas for new keywords. I only want to see data about the keywords I entered."

I don't know how much longer they'll support this legacy interface, so use it while you can! I assume the new version will include everything the legacy one offers, but who knows.

Blogger Problems With Custom Javascript

In Blogger, I put my adsense javascript code somewhere in the HTML template but adsense just does not show? Why?

When you put javascript code in HTML template you have to be careful with comment inside of it. Your adsense code looks something like this:

<script type="text/javascript"><!--
google_ad_client = "pub-3404770245697982";
/* 160x600 ink, created 5/26/10 */
google_ad_slot = "9119188962";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

When you copy it and paste it in your blog's HTML template and save, Blogger would join everything within <!-- and //--> into one single line, making it a Javascript comment. That's why you don't see adsense. To fix it, simply remove <!-- and //-->. An alternative is to insert the adsense code in the individual post because Blogger leaves the formatting as it is, but it might be a hassle to do this for every post

CSS Class vs ID

Should I use class or ID to style when either option works?

I have been a back-end engineer for the past several years but I do dabble at front end stuff including CSS and Javascript. Today I am messing with my blog trying to style it better and this question hit me

To answer this question I need to understand the differences between a class and an ID. So I began searching on Google trying to find different perspectives on this issue. My original thought is this: I want to use class because an element can have one or more classes; whereas an element can only have one ID.

Here are some of the arguments and respective rebuttals I've put together:

Argument: ID is unique and is for unique elements of your page. This makes it easy to understand the semantics of your page.

Rebuttal: Let's clarify this argument. ID is unique in the DOM and you should use ID to style any unique section in your page, such as the top navigation, the menu bar, the top heading, the footer, etc. If what you want to style applies to multiple sections (e.g. you want to style <h1> the same way as <p>) then you use class. Then just by looking at the style sheet you'll be able to kind of know the structure of the document (e.g. .post is a class and therefore the document may contain multiple sections that are considered "posts"; #header is an ID and therefore the document has only one header).

This sounds like a logical point but after giving it iterations of thought I cannot find any support for it Indeed ID is unique in the document, but how many site owners follow this rule? If very few follow you wouldn't be able to understand the semantics of the majority of the sites just by looking at the usage of class vs id in the style sheet anyway.

Argument: An ID has higher specificity than a class.

Rebuttal: Yes, if there are multiple CSS declarations that match a particular tag, the CSS declaration that includes an ID probably has higher specificity and will override the other declarations. For example say you have <div id="id1" class="class1"> this is a paragraph</div> and in your style sheet you have #id {color:black} and .class1 {color:red}, then #id {color:black} will be picked. However I don't see how this fact plays in this discussion. Feel free to enlighten me will ya?

Argument: The choice you make will have an impact on microformat.

Rebuttal: How true. However we are discussing whether to use class or id to STYLE your HTML If you need to use one or the other due to conforming to microformat specs then it's a different story. However even so, you would use class instead of id, and sticking with class gets my vote.

Conclusion: ID should only be used to uniquely identify an element so that you can getElementById() successfully in Javascript. ID should not be used to style. Class, on the other hand, should be used to style. Ok fine.. there's one drawback to using class: It is 3 letters more than id and may add to your style sheet's size if you have a ton of CSS declarations

Perl DBI module

I am using Perl DBI module. How do I turn off error printing?

Surprisingly this simple question is not well answered on the web, so here you are In DBI's connect function you can specify options. The ones that affect error handling are RaiseError and PrintError. To disable printing error on the screen, you set them both to 0:

RaiseError => 0,
PrintError => 0

Then when an error occurs during any DBI operation, you won't see any error on screen. When an error occurs, the appropriate error message will also be populated in $DBI::errstr. So you can use the following code to know whether an error has occurred:

if($DBI::errstr) {
# an error has occurred; do something here like print out the sql statement that has just been executed

So that you can do something without printing the generic error message. If you get a handle out of executing some operation, then you can also use that handle to detect an error:

$dbh = DBI->connect( "dbi:Oracle:archaeo", "username", "password", %attr);
if($dbh) {
### connect success!
} else {
### connect failed..
}

Hope it helps!

Blogger's Issues With jQuery

If you use Google's Blogger and you are using jQuery to achieve cool image effects, you may run into the following issues. Here are some of them and their proposed solutions

Question: I am using jQuery Cycle plugin. How come when I do the "fade" effect (or any effect at all) there's a long delay between two sequential images? One image is supposed to fade out as the next one starts to fade in, thereby creating a non-stop visual effect.

Answer: The editor you are using in Blogger is probably inserting HTML line breaks for each new line You do NOT want any line breaks in the div block that encloses the images you are fading in and out. It'll break the Cycle plugin where the fading effect is gone. For example the div block may look like the following:

<div id="slideshow">
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
</div>

You want to make sure there is no <br/> in this div block. Simple use the following div instead:

<div id="slideshow"><img src="image1.jpg" /><img src="image2.jpg" /><img src="image3.jpg" /></div>

Then you should be good to go.

Another way is to pick the "Use <br/> tags" radio button in  your Post Options located right below the editor. Then you'll have to explicitly put <br/> wherever you want breaklines, which is a bit of a hassle.

If this doesn't solve your problem, monitor the fading action in Firebug and see if the "opacity" attribute of each image is being dynamically incrementally updated from 0 to 1. This issue is caused by the opacity attribute not updated incrementally, and therefore an image either shows up completely or disappears completely.

WordPress Versus Blogger

Today I researched on which blog service provides best SEO right out of the box. My choices came to Blogger and WordPress. Here's what I am looking for

• Blog service: I want the blog service provider to host all my blogs. 
• Highly customizable: So I can control look-and-feel and include what I want and exclude what I don't want.

WordPress

• You can include as many static pages as possible, and the URL looks like /static-page-name/ which is totally customizable. The downside is that you lose the ability to categorize.
• You are limited to the templates provided to you, and you cannot change the look-and-feel unless you upgrade your account by paying a fee every year.
• URL format of a post looks like /year/month/day/page-title/
• Once you finish a blog you can come back and change published date and modify relative path of the URL, and the date in the URL will change accordingly.
• Allow inclusion of all kinds of widgets.
• Sometimes put ads on your posts unless you pay a fee to upgrade.
• Highly SEO optimized.
• The majority of highly popular blogs use WordPress.
• Recommended by Matt Cuts.

Blogger

• You can include as many static pages as 10 and the URL looks like /p/page-title.html which is not customizable.
• You are limited to the templates provided to you but you can change CSS all you want for FREE.
• URL format of a post looks like /year/month/page-title.html
• Once you finish a blog you can come back and change published date and modify post's title but the URL will NOT change.
• Allow inclusion of all kinds of widgets.
• Needs tweaks to make SEO optimized.
• More people use Blogger according to Google.

Bottom line is WordPress provides best SEO but less customization (without a fee) than Blogger. The fact that WordPress is recommended by Matt Cutts probably means that you should use WordPress. However I can just spend some time to make posts on Blogger more SEO friendly as I have been in this field for several years now, and that should solve all my issues. For people who are less familiar with SEO I still recommend that they learn about it and use Blogger, as the customization that Blogger allows is just too flexible to be overlooked.

Therefore my verdict is Blogger.

Blogger Problems With Custom HTML Template

How come I cannot link to comments or comment-form anchors in IE8?

Recently I found this issue in IE8. I have the following link at the top of a post:

<a href="#comment-form">Leave a Comment</a>

which when clicked is supposed to go to the comment form at the bottom. I learned of the anchor name in Layout -> Edit HTML -> Expand Widget Templates. In there I see the following:

<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>

In HTML you can create anchors like this so that you can allow users to jump to different places on the same page. This works perfectly in every browser except IE8.

The solution is to modify the following:

<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>

to

<a name='comment-form'><h4 id='comment-post-message'><data:postCommentMsg/></h4></a>

so that there's something between <a> and </a>. Basically the anchor CANNOT be empty and MUST enclose some text.

This fixes the problem.