Here is the video

And the links to the font directory: Google Font Directory and a tutorial on getting started: tutorial

Sexy CSS+JS Form

I was working on our new open source project that i think you will like and I was working on the registration page. This is what I got in the end and i will walk you trough the process with me. This new tutorial is about styling the forms of your website, I find it very good looking and very simple to implement. We will use simple CSS and some JavaScript.

Usually for inserting text into the inputs or our forms we set the value attribute with the text and then use javascript to check for different scenarios for doing some fancy things. This is different we will use labels to fill the text and move them under the inputs and then just do our magic with JS.

The JavaScript library that we will use to create this effect for our forms is Jquery

1. Creating the markup!

            <div id="login">
                <div class="sayit">Log In:</div>
                <form action="javascript:void(0)" onsubmit="login()" autocomplete="off">
                    <label for="username">Username</label>
                    <input type="text" id="username"/>
                    <label for="password">Password</label>
                    <input type="password" id="password"/>
                    <input type="submit" class="medium button green" value="Log me In"/>
                </form>
            </div>

The above code is our markup and as you can see is very simple and it can be changed as you like because the code that we will use for checking for different scenarios in javascript will work without necessary classes or ids. We have 2 inputs and 2 labels, one is password one is text and we can work with these ones, you can add as many as you like.

Now let’s style these bastards!

2. Use CSS to style the form elements!

input[type=text],input[type=password]{padding: 5px 10px; background-color: transparent;	position: relative; z-index: 2;}
label{position: absolute; z-index: 1;-webkit-transition: opacity 0.15s linear; color: #bababa; background-color: #FFFFFF; }

#login{width: 290px; margin: 0 auto;}
#login input[type=text],#login input[type=password]{width:270px; margin: 5px 0; font-size: 24px; font-weight: bold; border: 1px solid #ccc; -moz-border-radius:5px; -webkit-border-radius:5px; color: #595959;}
#login label{font-size: 24px; margin: 14px 10px;}

#login .sayit{font-size:24px; color: #595959; font-style: italic; padding-bottom: 5px;}

What we did here is make the label absolute so it will go under the input. This is important you will have to place the label before the input so remember this! The input will have a position relative and a z-index of 2 so we can be sure it will land above the label. Next we define the login div by using his id(#login). We use CSS3 for creating the round borders for the input and style the label by setting a big font-size to fit the input. The rest is pretty obvious, if you have trouble understanding this then let us know in the comments.

3. Make everything move with JS!

$(document).ready(function(){
    $.string(String.prototype);
    $("input,textarea").each(function (type) {
        $(this).focus(function () {
            if($(this).val().blank())
                $(this).prev("label").fadeTo('fast',0.45);
        });

        $(this).keypress(function () {
            $(this).prev("label").fadeTo('fast',0);
        });

        $(this).blur(function () {
            if($(this).val().blank()){
                $(this).prev("label").fadeTo('fast',1);
            }
        });
    });
});

We use here jQuery of course that we add using the google api like this:

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

And one plugin that I use to extend the jQuery string properties and that is $.string plugin. After we do that we create the above code and we assign to input and textarea elements a focus, keypress and blur actions. We use the focus action to lower the labels opacity to 45% then on keypress we just hide it for good. Then on blur we check to see if anything was written in our sexy element and if not then we fade the label back to 100%. This is kind of everything we do here, pretty simple.

4. Showing of a demo and download source

I’ve set up a demo here: DEMO

The source code you can either pick it from the demo page or from here: SOURCE

5. Wrapping up!

So here is our nice form styling that you can use on your website and that can be done very easily. Feel free to leave us comments and suggestions. Thanks a lot!

Have fun coding!

Performance

I was experimenting with new features for the past few weeks and while i was working on optimizing a website we are working on currently i was wondering what would it take to get a very big score on Yslow. But as Jeff says in this old post: “Yahoo’s Problems Are Not Your Problems”. So i was just doing the usual putting the javascript files at the bottom, minify every single one of them. I usually use this website: YUI Compressor Onlineit always does the job for me.

What Yslow goes round and round is the cache system of the browser. So what you are actually doing is making everything cacheable and as small as possible so that the browser takes everything loading from one bite. The browsers have a limited number of requests that they address at once so if you can get into that margin then you are good. So very important combine every file and make is small!

What have i done is use the gzip module of the apache server by using php and a .htaccess file. I believe this is one of the most nice ways to take advantage of this feature without making any changes to your website. What it does is adding lines of code at the beginning of txt/html/htm/php files, css files and js files. After we do this we add a closing line at the end and we are good. Gzip is in place up and running.

How do we do it? Well here is the code:

<FilesMatch "\.(css)">
    ForceType application/x-httpd-php
	php_value auto_prepend_file "address-to-this-file/gzip/gzip-css.php"
php_value auto_append_file "address-to-this-file/gzip/gzip-end.php"
</FilesMatch>

<FilesMatch "\.(txt|html|htm|php)">
    ForceType application/x-httpd-php
	php_value auto_prepend_file "address-to-this-file/gzip/gzip-gen.php"
php_value auto_append_file "address-to-this-file/gzip/gzip-end.php"
</FilesMatch>

<FilesMatch "\.(js)">
    ForceType application/x-httpd-php
	php_value auto_prepend_file "address-to-this-file/gzip/gzip-js.php"
php_value auto_append_file "address-to-this-file/gzip/gzip-end.php"
</FilesMatch>

The next step is a selective one since what we are doing is telling the browser to not look for a file until we tell it to. So if we set the expiration to 2 years from now the browser will always use the one it has in it’s cache until 2 years pass.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A600
ExpiresByType image/x-icon A2592000
ExpiresByType application/x-javascript A604800
ExpiresByType text/javascript A604800
ExpiresByType text/css A604800
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType text/plain A86400
ExpiresByType application/x-shockwave-flash A2592000
ExpiresByType video/x-flv A2592000
ExpiresByType application/pdf A2592000
ExpiresByType text/html A600
</IfModule>

We check for the expires module and if it’s activated then we just set the expiration dates. What does “ExpiresByType text/css A17200″ means? Css files “expire after 4.8 hours”
“A” before the numbers above stands for Access. This means that the stopwatch starts when a client accesses the file. You can also use “M” for modified.

TIME CHEAT SHEET

• 300 5 MIN
• 600 10 MIN
• 900 15 MIN
• 1800 30 MIN
• 2700 45 MIN

• 3600 1 HR
• 7200 2 HR
• 86400 24 HR

• 86400 1 DAY
• 604800 7 DAY

• 604800 1 WEEK
• 2419200 4 WEEK

• 2419200 1 MONTH (FEBRUARY)
• 2505600 1 MONTH (FEBRUARY LEAP YEAR)
• 2592000 1 MONTH (APRIL, JUNE, SEPTEMBER, NOVEMBER)
• 2678400 1 MONTH (JANUARY, MARCH, MAY, JULY, AUGUST, OCTOBER, DECEMBER)
• 31536000 12 MONTH

Now just download this thing and get a faster website. The rest of the Yslow rules are pretty simple to follow so i just felt i would let you know what i use for these 2 because i found them hard to figure out than the rest.

Update

Today I was trying to get the gzip code to work on our server and since we have a shared hosting here we are forced to comply with the rules. And guess what I get a “500″ error. So i found a new way of doing the same thing. This as long as you have Rewrite_module activated if this is not activated then i don’t think you can do much of a thing.

Here it is the .htaccess code:

RewriteRule ^.+\.(css|js|png|jpg|swf)$ gzip/compress.php [NC]

This will pass all files that are css, js, png, jpg, swf trough the compress.php file. And here is what the compress.php file does:

<?php
$basedir = $_SERVER['DOCUMENT_ROOT'];
$file = realpath( $basedir . $_SERVER["REQUEST_URI"] );

if( !file_exists($file) && strpos($file, $basedir) === 0 ) {
    header("HTTP/1.0 404 Not Found");
    print "File does not exist.";
    exit();
}

$path_info = pathinfo($file);
$extension=$path_info['extension'];

switch($extension) {
    case 'css':
        $mime = "text/css";
        break;
    case'js':
        $mine = "text/javascript";
        break;
    default:
        $mime = "text/plain";
}

if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))
    ob_start("ob_gzhandler");
else
    ob_start();
header( "Content-Type: " . $mime . "; charset: UTF-8");
header ("cache-control: must-revalidate");
readfile($file);
?>

The file checks for the extension of the file that is receives and ads the corresponding headers to it’s top.
Pretty simple. Download the zip file to get both versions.

Awesome website optimizer

Play with CSS3

If you saw our “ImageRoll” page and you used Firefox, Chrome or Safari then you saw the images being rotated in different angles well the way i did that is by using CSS3. I guess you already figured that out from the title.

CSS3 implements a lot of new features that can make your life easier of course you will not be able to use them quite yet. IE is not supporting like more than 90% of them so it’s useless if you want to make this for a client. The ones that we used on our blog are: box-shadow, border-radius and text-shadow. I think these are the most important of them but you can check all of them out by taking a look at this page: css3.info/preview/.

I’m gonna do a simple explanation on the ones we used and show you some code.

We used on the hrefs of the page this property:

-moz-box-shadow: 0px 2px 15px #333;

Now let’s explain. Why “-moz” in front of it? This is a simple hack for those who don’t know it. It tells the browser to render this only in mozilla based browsers. Next we have the property box-shadow and 0px means the top margin of the shadow, 2px means we move the shadow 2 pixels to the left and 15px
means we create a shadow with 15 pixels of size of blur if you want, #333 is of course the color of the box shadow. Pretty simple .

Now let’s rotate the images:

   -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);

You know -moz- already but we have a new one “-webkit-” this one means it will render in webkit based browsers, the most popular are: Safari and Chrome. Next we have the property “transform” and the degree of rotation “-10deg”.

The other one that we used all over the blog is text-shadow

text-shadow:1px 1px 0px #000;

This property is like this 1px means we move the shadow with 1 pixel from the top, 1 pixel from the left and 0 blur or size, #000 means of course the color of the shadow.

And here is a preview in 2 browsers IE and Firefox so you can see maybe you are not using a browser that supports CSS3.

Ie view

Firefox view

My imageroll page is inspired from this page: line25.com/tutorials/how-to-create-a-pure-css-polaroid-photo-gallery . Go and check it out (Y) .

Thank you and happy coding!

Cache Pic

As I said in my last post, I wanted from the first time to make a cacheing system for my imageroll page. Because i take the images from vi.sualize.us servers and we don’t want to make to much trafic and make stuff worse for them.

So what i did is simple, i made a class that extracts the rss data from theirs servers and get the images to display them. I do this every time someone visits the page. If any image is new for the first time we display the image from vi.sualize.us and run a functions in javascript to check for new images. If any new images exist then we cache them in a folder on our server and the next time a user visits the page that image will be shown from our server. Pretty simple.

For now i’ll just show you the stuff that makes this thing run and if you want i can share the whole script so that you can make one for your blog or website.

I’ll also try to make a WordPress plugin so you can integrate it easily in your blog.

So here we go. We start with the function that checks for new images:

functio checkCache($image_url){
            $path=pathinfo($image_url);
            $img_cached = 'cache/'.$path['filename'].'.'.$path['extension'];
            if(!file_exists($img_cached)) {
                createCacheImg($image_url);
            }
}

This function just checks if the image exists in the “cache” folder. If it’s not there then we run the “createCacheImg” function.

We now need a function to get the image so we check if the image is in the cache folder or not so we know what to display.

    function getImage($or_img) {
        $path=pathinfo($or_img);
        $filename=$path['filename'];
        $img_cached = 'cache/'.$filename.'.'.$path['extension'];
        if(file_exists($img_cached)) {
            $url=$img_cached;
        }else {
            $url=$or_img;
        }

        return $url;
    }

Very simple function that just returns the right url of the image.

Now we cache the image.

function createCacheImg($image){
        $srcsize = getimagesize($image);
        $w = $srcsize[0];
        $h = $srcsize[1];

        $path=pathinfo($image);
        $dest='cache/'.$path['filename'].'.'.$path['extension'];
        if($path['extension']=='jpg' || $path['extension']=='jpeg' || $path['extension']=='JPG') {
            $src_img = imagecreatefromjpeg($image);
        }else if($path['extension']=='gif') {
                $src_img = imagecreatefromgif($image);
            }else if($path['extension']=='png') {
                    $src_img = imagecreatefrompng($image);
                }
        $img_cpy=imagecreatetruecolor($w,$h);
        imagecopy($img_cpy, $src_img, 0, 0, 0, 0, $w, $h);
        if($path['extension']=='jpg' || $path['extension']=='jpeg' || $path['extension']=='JPG') {
            imagejpeg($img_cpy,$dest);
        }else if($path['extension']=='gif') {
                imagegif($img_cpy,$dest);
            }else if($path['extension']=='png') {
                    imagepng($img_cpy,$dest);
                }
        imagedestroy($src_img);
}

This function will save the image into the cache folder. Now we need a new file “checkcache.php” where we put this code:

include('functions.php');
$image=$_GET['image'];
checkCache($image);

Right now we should have this kind of structure in our imageroll folder: A folder “cache” a file “functions.php” where we place all these functions we just did and a file “index.php” where we run the javascript function and display the images.

The “index.php” file requires this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>

        <title>
            Image ROLL
        </title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">  google.load("jquery", "1.3.2"); </script>
    </head>
    <body>
<input type="hidden" id="image" value="http://test.com/image.jpg">
<img src="<?=getImage($image)?>" alt="test image"/>
</body>
</html>

We have here a simple index.php file that imports the google api and jquery so we can run a simple ajax function. This is the javascript code that you should insert in this file or a separate one if you want:

            $(document).ready(function() {
                checkCache();
            });

            function checkCache(){
                var page=$('#image');
                var url='checkcache.php';
                var pars='page='+page.val();
                $.get(url,pars);
            }

This will run this function after the page loads and it will check for new images. So this is just a simple script that will make you pages load faster expecialy if you load the images from outside of your server.

If you liked this i’ll go and make a more complex one and even share the imageroll script i did. That until i find the time and make a WordPress Plugin.

.header {
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:10px;
}

The code above is perfectly valid and will work fine, but we can save time and make the code much neater using the following code:

.header {
padding:5px 10px 5px 10px;
}

Using the code above we can specify all of the padding for the header div on one line. It works by applying the first attribute (5px) to the top padding of the div. The second (10px) applies to the right side padding, the 3rd (5px) attribute means the padding on the bottom of the div, and the forth (10px) attribute means the left side padding. The padding is always applied in this order.

It is possible to shorten this code even further using the following code:

.header {
padding:5px 10px;
}

This works by taking the first (5px) attribute to mean the top and bottom, or vertical padding, and the second (10px) attribute to mean the horizontal padding (left and right).

The exact same principles can be used to declare the margin of your divs, so what could have looked like this:

.header {
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:10px;
margin-top:5px;
margin-right:10px;
margin-bottom:5px;
margin-left:10px;
}

Can now look much neater, and is obviously much quicker to write using the following:

.header {
padding:5px 10px;
margin:5px 10px;
}

One of my favorite CSS shortcuts is the background property shortcut. This is how a typical CSS file could look without shortcuts:

.header {
background-image:url(images/image.jpg);
background-position:top;
background-repeat:repeat-x;
background-color:#fff;
}

However, with some nifty CSS it could look like this:

.header {
background: #fff url(images/image.jpg) repeat-x top;
}

The above code is much quicker and more manageable. Take note though, that all of the properties must be provided when using the background shortcut. If I missed off the colour specification at the beginning for example, the code would not work.

Another very useful shortcut is the font shortcut. The code below can be shorted considerably:

body {
font-weight: bold;
font-family: verdana, sans-serif;
font-size: 0.8em;
line-height: 1.2em;
}

Here is the shortcut:

body {
font: bold 0.8em/1.2em verdana, sans-serif;
}

It is important to write the shortcut in the same order as above so that web browsers don’t get confused!

This is my favorite shortcut of all. This saves me a great deal of time when I am developing web sites because whenever I have a problem with a layout or an element, the first thing I do is put a border around it so that I can see its dimensions and work out what’s going on.

Here is some typical code:

.header {
border-width: 1px;
border-color: #000;
border-style: solid;
}

This can be shorted to the following:

.header {
border:1px solid #000;
}

Then, whenever you are not sure why an element is not behaving properly, just use the border shortcut above to debug your code and see what the dimensions of the element are.

As you can see, you can make your code much shorter and neater using the CSS shortcuts outlined here. Once you get into the habit of using them, I guarantee that you will wonder why you ever did it differently in the past!

JQUERY upload plugin

Sometimes we come into a problem that is a little harder to do when it comes to customizing and that is the file upload input. Well Andris Valums helps us with a plugin he created for jQuery.

The plugin requires jQuery 1.2 or above and allows users to upload multiple files without refreshing the page.

To make the plugin work you have to include jQuery and the plugin in your websites head.

%MINIFYHTML797fbaecd23cebcfff11fa70afacb1410%%MINIFYHTML797fbaecd23cebcfff11fa70afacb1411%

And after that you can add this for a div with a specific id:

$(document).ready(function(){

$.ajax_upload('#div_id', {
  // Location of the server-side upload script
  action: 'upload.php',
  // File upload name
  name: 'userfile',
  // Additional data to send
  data: {
    key1 : 'value',
    key2 : 'value2'
  },
  // Fired when user selects file
  // You can return false to cancel upload
  onSubmit: function(file, extension) {},
  // Fired when file upload is completed
  onComplete: function(file, response) {},
  // Fired when server returns the string
  onSuccess: function(file){},
  // Fired when server return something else
  onError: function(file, response){}
});

});

And after that just upload the file using:

if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
  echo "success";
} else {
  echo "error";
}

You can find more info on: http://valums.com/projects/ajax-upload/ or check out the demo page : Demo

jQuery pagination

Description

When you have a a large list of items (e.g. search results or news articles), you can display them grouped in pages and present navigational elements to move from one page to another. This plugin creates these navigational elements.

Usage

Include the pagination plugin script and the pagination.css file in your HTML page. In your HTML body create a container tag pair that will hold the link elements. Give it an id attribute (e.g. “News-Pagination”)

After you have loaded the contents and know how many items you want to display overall, create the pagination like this:

	// First Parameter: number of items
	// Second Parameter: options object
	$("#News-Pagination").pagination(122, {
		items_per_page:20,
		callback:loadContents
	});

This will create the navigation links inside the container. You will see the numbers 1-7, the first number is highlighted. When you click on another number, the highlighting changes and your callback function “loadContents” is called.

The plugin is highly configurable through the option parameter and all elements can be styled separately.

You can check out a demo here.
And download the source code here.

PNG Fix for IE6

Last night i was working on a site that uses a lot of transparent .png’s . As we all know, our dear MS IE 6 doesn’t know how to handle the transparency of PNG files.

For quite a while, i was using a Javascript png fix called SUPERSLEIGHT and i was very happy about how it worked.

But last night i came into a problem. I needed to make some rollover images which were transparent PNG’s, and when the images change, the transparency fix will break. So i started looking for a solution and i came over this function, which works perfect. The only thing was that this won`t work togheter with the original SUPERSLEIGHT script and it only fixes the png`s in IMG tags, and i had a lot of PNG images as backgrounds, inputs, etc.

So i changed the supersleight script to ignore PNG`s in IMG tags, and i merged it with the other script.

How it works :

- Link the ‘supersleight-swap.js’ file into your document inside conditional comments so that it is delivered to only Internet Explorer 6 or older.

<!--[if lte IE 6]>
	<script type="text/javascript" src="path/to/supersleight-swap.js"></script>
<![endif]-->

- Copy ‘x.gif’ in the same directory as the page you’re using PNG’s on.

- Put in the function that swaps the images (for NORMAL browsers) :

function imgSwap(oImg)
{
   var strOver  = "_on"    // image to be used with mouse over
   var strOff = "_off"     // normal image
   var strImg = oImg.src
   if (strImg.indexOf(strOver) != -1)
      oImg.src = strImg.replace(strOver,strOff)
   else
      oImg.src = strImg.replace(strOff,strOver)
}

- Call the function in the ‘onmouseover’ and ‘onmouseout’ event of the IMG.

<img alt="a png image" src="path/to/image_off.png" onmouseover="imgSwap(this)" onmouseout="imgSwap(this)" id="img1">

Note that each PNG must have an ID attribute for this to work.

Twitter followers tutorial

You’re probably wondering why should i bother if we have TwitterCounter to show us the followers, well what if i don’t like the way it shows them what if i wanna do a counter with my own graphics , well i’m gonna show you how.

We’re gonna need the jpg to show the followers on and 2 classes to read the data.

Let’s get some twitter icons so that we can create a simple image in photoshop. With a simple google search we get on this article 100+ Remarkably Beautiful Twitter Icons And Buttons created by www.hongkiat.com.

I did a simple image that you can use if you want it’s all added to the download package.

Now let’s create the php code that will display that followers number…

We’re gonna need 2 classes that will get our job done easily, a twitter class and a class that will transform the xml output into an array one.

My follow chocksy image

Also you have to find out your id number that’s a little tricky and i don’t understand why twitter is not showing that so that you can find it. So here is how you can find your twitter id:

Go on your account page and on the right you have a button named RSS, now that button has an url like http://twitter.com/statuses/user_timeline/18107925.rss so the bolded number is your id that you’ll have to use in our php code.

include('xml2array.php');
include('twitter.lib.php');
$user = 'yournickname';
$password = 'yourpassword';

$twitter = new Twitter($user, $password);

$friends = $twitter->showUser('xml','yourid_number');
$xml=new XML2Array();
$arr=$xml->parse($friends);
$followers=$arr['user']['followers_count']['value'].' <span style='font-size:12px;'>followers</span>';

We will now show the image with the number in the right place. We’ll link the image to our account so that people can follow us and place the followers in the div we have between the a tags.

<div>
<a href="http://www.twitter.com/yournickname" target="_blank" style="text-decoration:none;"><div class="twitter" id="tell_followers"><?=$followers?></div></a>
</div>

Here we have the css that takes care of the followers number display.

.twitter{
color:#FFFFFF;
font-family:Tahoma;
font-size:24px;
line-height:14pt;
background:url(follow_me.png) no-repeat;
height:85px;
width:170px;
padding:35px 0 0 57px;
text-decoration:none;
cursor:pointer;
}

UPDATE (for blogers with a lot of visitors)

Since we use this script to make requests to the twitter API we have to be careful because the API does not allow us to make more than 100 requests per hour so if you have more than 100 visitors per hour you have to make this changes:

First of all let’s create a MYSQL table here is the SQL code for the table, a very simple one :

 CREATE TABLE `ajaxmast_blog`.`twitter_counter` (
`id` BIGINT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`followers` BIGINT NOT NULL ,
`last_set` DATETIME NOT NULL
) ENGINE = MYISAM

Ok after we’ve done that let’s connect to the db.

//DATA FOR SQL
define(USERNAME,'db_username');
define(PASSWORD,'db_password');
define(DATABASE,'db_name');
//END CONF

//connect to db
@mysql_connect('localhost',USERNAME,PASSWORD);
@mysql_select_db(DATABASE);
$db_query=mysql_query('SELECT * FROM twitter_counter LIMIT 1');

We’ll put the request to the twitter API in a function so we don’t have a very heavy code:

//function to get the followers nore easily
function get_followers($user,$password){
$twitter = new Twitter($user, $password);

$friends = $twitter->showUser('xml','18107925');
$xml=new XML2Array();
$arr=$xml->parse($friends);
$nr_followers=$arr['user']['followers_count']['value'];

return $nr_followers;
}

After that we create a difference function so we can calculate the minutes that have passed since we checked the twitter API:

function dateDiff($date, $date2)
{
    if($date2 > $date) {
        $tmp = $date2 - $date;
    }

    else {
        $tmp = $date - $date2;
    }

    $seconds = $tmp;

// Relative ////////
    $minutes = floor($tmp/60);
    $tmp -= $minutes * 60;

    // Total ///////////
    $tminutes = floor($seconds/60);

return $tminutes;
}

And for the final touch we check to see if the time has passed so we can call again the twitter API or if not we should display the followers from our database:

$curent_time=date('Y-m-d H:i:s');
$info=mysql_fetch_array($db_query);
$last_set=$info['last_set'];

$dif=dateDiff(strtotime($curent_time),strtotime($last_set));

//check for last request
if(mysql_num_rows($db_query)==0){
$nr_followers=get_followers($user,$password);

mysql_query("INSERT INTO twitter_counter (followers,last_set) VALUES('".$nr_followers."',NOW())");
}else if($dif<=10){
$nr_followers=get_followers($user,$password);

mysql_query("UPDATE twitter_counter SET followers='".$nr_followers."',last_set=NOW()");
}else
$nr_followers=$info['followers'];

$followers=$nr_followers.' <span style="font-size:12px;"> followers</span>';

And that’s it the rest is the same. I will place this version in the .rar file too so you can use it as you may like tell me if you want any changes done to it or anything. I would like to thank smashing magazine for the feature here is the article: ARTICLE.

Download SOURCES

You have in the download package the PSD file and the 2 classes that will help you work this out, also there is a test file too. Hope you find this useful.
Thanks for reading.