I wanted to add Google AdSense to my blog just to see how easy it is to do. I’ve googled a bit and found a handful of plugins that claim to do it all for you. I couldn’t decide which one to choose and started thinking from a different angle. It turns out that you don’t need any plugins to install Google AdSense on your site and what’s most important you don’t even need any programming knowledge! The whole process will take you no more than 5 minutes.

1. Log in to your blog’s admin panel.
2. Click on Appearance.
3. Click on Widgets.
4. Find a Text widget and drag it to the Sidebar (or any other place where you want the AdSesnse to appear).
5. Enter title. I’ve used “Interesting Links”.
6. Paste your Google AdSense code into widget’s content area. My code looks like this:

   <script type="text/javascript"><!--
   google_ad_client = "ca-pub-4589490261258499";
   /* allurcode */
   google_ad_slot = "2642741863";
   google_ad_width = 300;
   google_ad_height = 250;
   //-->
   </script>
   <script type="text/javascript"
   src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
   </script>
   

7. Click Save.

That’s it, we’re done! Go to your blog’s homepage and smile

Note. Allow a few minutes for Google to create the adds before they actually show up.

Very nice infographic by http://jeffwongdesign.blogspot.com/

I’m not going to write about whether I think mod_pagespeed is good or not, is it suitable for your website, why you should use it or not. I’ll focus only on installation.

Since you’re here and still reading I assume you want to speed up your website with Google’s mod_pagespeed. If you’re on a machine where for any reason installing from .rpm or .deb is not possible read on.

Dependencies

First we need to install Chromium ‘depot_tools’, which are used to build multiple open-source projects with dependencies on other open-source projects.

mkdir ~/bin
cd ~/bin
svn co http://src.chromium.org/svn/trunk/tools/depot_tools

You will need to add the depot_tools to your path. i.e. in bash:

export PATH=$PATH:~/bin/depot_tools

Check out mod_pagespeed and dependencies

mkdir ~/mod_pagespeed    # any directory is fine
cd ~/mod_pagespeed
# always check for latest version by going to http://modpagespeed.googlecode.com/svn/tags/ in your browser
# then copy link to /src ie. http://modpagespeed.googlecode.com/svn/tags/X.X.X.X/src
gclient config  http://modpagespeed.googlecode.com/svn/tags/0.9.1.1/src
gclient sync --force     # this will download all source code

Compile mod_pagespeed

cd ~/mod_pagespeed/src
make BUILDTYPE=Release   # BUILDTYPE defaults to 'Debug'

Install mod_pagespeed

First edit centos.sh and change parameters according to your needs. Then run it.

vim install/centos.sh
cd install
./centos.sh
./centos.sh staging
./centos.sh install

Restart Apache

/etc/init.d/httpd restart

Check if Apache loaded mod_pagespeed.

httpd -M # list static and shared modules, mod_pagespeed should be here
httpd -l # list compiled in modules

If above doesn’t work try something like this:

/usr/src/httpd/httpd -M
/usr/src/httpd/httpd -l

If it’s there go to /etc/httpd/pagespeed.conf and configure it. I’ll write a bit more about configuring mod_pagespeed in my next post. If it’s not there make sure mod_pagespeed.so is in Apache module directory and if not copy it there.

locate mod_pagespeed.so
cp /tmp/mod_pagespeed.install/mod_pagespeed.so /usr/local/apache2/modules/

Edit your Apache configuration file and add Include /etc/httpd/pagespeed.conf if it isn’t already there. Next edit /etc/httpd/pagespeed.conf and add

LoadModule pagespeed_module /usr/local/apache2/modules/mod_pagespeed.so

Restart Apache and you should see something like X-Mod-Pagespeed: 0.9.1.1-173 in your website’s response headers.

References:

http://code.google.com/speed/page-speed/docs/using_mod.html
http://code.google.com/p/modpagespeed/wiki/HowToBuild

Problem

Gmail recently made a few changes in their email rendering engine. Unfortunately for us our image based HTML newsletters that used to look fine in gmail are now broken. Each image seems to have a weird spacing after it.
If you’ve been sending HTML newsletters for your clients for some time now, you probably have your own email templates that work well in all email clients. Well not all thanks to Google.

Solution

To make things back to what they were just add style=”display:block;” to every img tag in your HTML email and we’re back in business.

Technorati code: G8GA9E4SYN2J

Google just made our life much easier by announcing Google font api and Google font directory.
Using custom fonts on your website is as easy as adding two lines of code. Lets consider this simple example.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Custom fonts</title>
<meta charset="utf-8" />
<style>
      body { font-size: 48px; }
</style>
</head>
<body>
<header>
	<p>Hello world!</p>
</header>
</body>
</html>

Nothing fancy here, result as expected.

Hello world!

Now lets add those two aforementioned lines. Line 6 and line 9 in below listing.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Custom fonts</title>
<meta charset="utf-8" />
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
<style>
      body { font-size: 48px; }
      p { font-family: 'Tangerine', serif; }
</style>
</head>
<body>
<header>
	<p>Hello world!</p>
</header>
</body>
</html>

and the effect

Hello world!

The font directory is a bit limited at the moment but I think we can safely assume that Google will be adding more fonts over time.