At first I was a bit sceptical but later on he actually makes sense.

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.

What tools today’s web developers are using.

Infographic by BestVendor.

Not so “hot” as the site has been built a few months ago but still worth showing.

Full HTML5 site on HTML5 Boilerpate and Kohana framework. Custom fonts using CSS @font-face with fallback to JavaScript cufon.

Really simple triangles working in all major browsers including IE6+

HTML

No surprises here. Our HTML is as simple as that.

<div class="arrow_top"></div>
<div class="arrow_right"></div>
<div class="arrow_bottom"></div>
<div class="arrow_right"></div>

CSS

The trick is to create an element with zero width and height. The actual size will be determined by the element’s borders. For example up arrow has top and bottom borders set as transparent and the left border with a solid colour. Imagine it as drawing an arrow where its pointing corner is our zero dimensions div element.

Demo

Arrow top

.arrow_top {
	width:0;
	height:0;
	border-top:30px solid transparent;
	border-bottom:30px solid transparent;
	border-left:30px solid #ff9600;
}

Arrow right

.arrow_right {
	width:0;
	height:0;
	border-top:30px solid transparent;
	border-bottom:30px solid transparent;
	border-left:30px solid #ff9600;
	margin-bottom:10px;
}

Arrow bottom

.arrow_bottom {
	width:0;
	height:0;
	border-left:30px solid transparent;
	border-right:30px solid transparent;
	border-top:30px solid #ff9600;
	margin-bottom:10px;
}

Arrow left

.arrow_left {
	width:0;
	height:0;
	border-top:30px solid transparent;
	border-bottom:30px solid transparent;
	border-right:30px solid #ff9600;
	margin-bottom:10px;
}

Arrow top with non transparent borders and pointing corner is a 5px / 5px div

.arrow_top_filled {
	width:5px;
	height:5px;
	border-left:30px solid #222;
	border-right:30px solid #222;
	border-bottom:30px solid #ff9600;
	margin-bottom:10px;
}

Arrow top right

.arrow_top_right {
	width:0;
	height:0;
	border-bottom:30px solid transparent;
	border-left:30px solid transparent;
	border-right:30px solid #ff9600;
	margin-bottom:10px;
}

If you’re a big fan of Nyan Cat meme

and you have Windows XP or 7 then you should be ecstatic about this.

There’s a plugin that replaces your standard progress bar with a Nyan Cat animation

Download and install instructions here

Just a quick tip, how to check if current page has been loaded in an iframe or was it accessed directly.

if (window.self === window.top) {
    // we're NOT in an iframe
} else {
    // we're in an iframe
}

That’s it.

Putting one like button on a page is very simple and comes down to pasting the code from Facebook like button generator found here.
It gets a bit more complicated when you need to add a few buttons along with a dynamically generated content. Best example would be a search results while every search result has it’s own like button.

Enough talk lets get down to the business

Prepare

Put this somewhere in your page. Let’s say just before </body> tag.

<div id="fb-root"></div>

Insert Like buttons

<fb:like href="http://example.com" send="false" layout="button_count" show_faces="false"></fb:like>

Initialize Like buttons

In your JavaScript code after inserting all the fb:like tags you need to initialize all those buttons. You can do that but running below code

	window.fbAsyncInit = function() {
		FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});
	};
	(function() {
		var e = document.createElement('script'); e.async = true;
		e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
		document.getElementById('fb-root').appendChild(e);
	}());

Remember to change ‘your app id’ to your actual app id.

Sometimes I need to insert some values into the database but only when a certain condition is met. The best example is a newsletter sign up. If someone has already signed up to your newsletter don’t add his email address again. Of course we can run one query to check if this email address already exists and if not run another query to save it in our database.
If for any reason you need to do the whole operation in one query things get a little more complicated.

Two queries

Lets say we want to insert some data only when field `email` does not equal test@example.com
First, select data:

SELECT `id` FROM `table` WHERE `email` = 'test@example.com';

if this email address already exists in our database we can let our users know about it. If no records were returned we can continue to insert new data:

INSERT INTO `table` (`email`) VALUES ('test@example.com');

One query

In a way we combine those two queries above into one:

INSERT INTO `table` (`email`)
    SELECT 'test@example.com' FROM DUAL WHERE NOT EXISTS (
        SELECT `id` FROM `table` WHERE `email` = 'test@example.com' LIMIT 1
    );

If the subquery doesn’t return any rows the insert will be carried out. In case of subquery finding this given email address condition is not met and data doesn’t get inserted.