It’s on github you can fork it there or download it!

Fork on github!

DEMO

Performance

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.

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

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.

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.