Google's reCAPTCHA is great for getting rid of those pesky bots spamming your contact forms. Implementing reCAPTCHA on your site is very easy, albeit somewhat confusing if you try to follow official documentation.
Below example assumes you're using NodeJS with ExpressJS for back-end and Pug (formerly Jade) templating engine on the front-end. General principle is the same regardless of languages used.
I'll assume you've already set up your reCAPTCHA API keys. If you haven't just go to https://www.google.com/recaptcha/ and follow onscreen instructions.

Template files

Open up your template file where you want to use reCAPTCHA, in my case index.pug. Add reference to reCAPTCHA JavaScript file as mentioned in official documentation.

script(src='https://www.google.com/recaptcha/api.js')

Then copy the submit button code from official docs and paste it in your template, or in case of Pug, make it similar to below.

button.btn.btn-default.g-recaptcha(data-sitekey="your_site_key", data-callback="contactSubmit") Submit

Remember to change your_site_key to your actual Site Key. If you're copying and pasting code from reCAPTCHA website, it should have your key already filled in.

JavaScript to submit the form

Notice data-callback="contactSubmit" in the above code for the button. Copying code for the button directly from documentation may have a different callback function name. I called mine contactSubmit.
All you need to do is create a function in your JS file to handle form submission, making sure you pass the token value to it as an agrument and then pass it down the line to the server. Below is a pretty standard AJAX form submission example. I kept it to minimum to illustrate just the reCAPTCHA variable.

function contactSubmit(token) {
	var name = $('#contactForm #name'),
		email = $('#contactForm #email'),
		message = $('#contactForm #message');
	
	// check if the form fields are not empty
	if (name.val() !== '' && email.val() !== '' && message.val() !== '') {
		$.ajax({
			type: 'POST',
			url: '/handlecontact',
			data: {
				name: name.val(),
				email: email.val(),
				message: message.val(),
				recaptcha: token
			},
			dataType: 'json',
			error: function (data) {
				$('#contactForm #formFeedback')
                    .removeClass()
                    .addClass('alert alert-danger')
                    .html('Something went wrong, please try again')
                    .fadeIn('slow')
                    .delay(10000)
                    .fadeOut('slow');
				return false;
			},
			success : function (data, res) {
				if (data.success === true) {
					$('#contactForm #formFeedback')
                        .removeClass()
                        .addClass('alert alert-success')
                        .html(data.msg)
                        .fadeIn('slow')
                        .delay(5000)
                        .fadeOut('slow');
					// clean up form fields
					name.val('');
					email.val('');
					message.val('');
					return true;
				} else {
					$('#contactForm #formFeedback')
                        .removeClass()
                        .addClass('alert alert-danger')
                        .html(data.msg)
                        .fadeIn('slow')
                        .delay(10000)
                        .fadeOut('slow');
					return false;
				}
			}
		});
	} else {
		$('#contactForm #formFeedback')
            .removeClass()
            .addClass('alert alert-warning')
            .html('Please fill in all fields')
            .fadeIn('slow')
            .delay(10000)
            .fadeOut('slow');
		return false;
	}
}

ExpressJS - server side

Open ExpressJS file in which you handle your form data on the server side. In my case it's index.js, and add https module at the top to handle captcha verification request.

var https = require('https');

Then in the method handling your form data verify if user has passed captcha verification.
All you really need to do is send the reCAPTCHA token back to Google for verification. That's what we need https module for.

app.post('/handlecontact', function (req, res) {
	// verify recaptcha
	if (req.body.recaptcha === undefined || req.body.recaptcha === '' || req.body.recaptcha === null) {
		res.send({success: false, msg: 'Please select captcha first'});
		return;
	}
	const secretKey = 'your_secret_key';
	const verificationURL = `https://www.google.com/recaptcha/api/siteverify?secret=${secretKey}&response=${req.body.recaptcha}&remoteip=${req.connection.remoteAddress}`;
	
	https.get(verificationURL, (resG) => {
		let rawData = '';
		resG.on('data', (chunk) => { rawData += chunk })
		resG.on('end', function() {
			try {
				var parsedData = JSON.parse(rawData);
				if (parsedData.success === true) {
					// All good, send contact email or perform other actions that required successful validation
					res.send({success: true, msg: 'Your message has been sent. Thank you.'});
					return;
				} else {
					res.send({success: false, msg: 'Failed captcha verification'});
					return;
				}
			} catch (e) {
				res.send({success: false, msg: 'Failed captcha verification from Google'});
				return;
			}
		});
	});
});

When testing reCAPTCHA make sure you refresh the page between "submit" button clicks. Otherwise Google may think you're a bot for clicking too many times and not submit the form at all.

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 and configuration.

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

# make a directory, any directory is fine
mkdir ~/mod_pagespeed
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
# this will download all source code
gclient config http://modpagespeed.googlecode.com/svn/tags/0.9.1.1/src gclient sync --force

Compile mod_pagespeed

BUILDTYPE defaults to 'Debug', but we need a production ready build

cd ~/mod_pagespeed/src make BUILDTYPE=Release

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 mod_pagespeed is 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 below line

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 anymore 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.

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.

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

Nothing fancy here, result as expected:

Hello world!

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

<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>
      p.tangerine {
        font-size: 48px;
        font-family: 'Tangerine', serif;
      }
    </style>
</head>
<body>
    <header>
        <p>Hello world!</p>
    </header>
</body>

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.