An awesome animated responsive grid in a few lines of javascript and css3 goodness

Screen Shot 2013-08-15 at 4.36.33 AM

Responsive grid is a pain to many people, because sometime they have to achieve the desired effects either using complex plugins, css layout styling with the help of media queries. And here comes a nifty solution which works perfectly well in all devices. The responsiveness is done using a few lines of Javascript which listens to window resize event. But to save the browser from refreshing the layout, it uses debounce technique which only fires after the resizing is done.

The trick is pretty neat. All you got to do is tell it a minimum width of the grid items. Then, once resized, it divides the window width by that minimum, extract the integer part and displays that many items in a row by setting a width (in percentage) for each of them.

var minWidth = 250;
$(document).ready(function(){
	$(window).resize($.debounce(250,function(){
		var w = $(window).width();
		var numberOfItems = parseInt(w/minWidth);
		var itemWidthinPercentage = 100/numberOfItems;
		$(".grid ul li").css({width:itemWidthinPercentage+"%"});
	}));
});

See the working grid at http://hasinhayder.github.io/responsivegrid and resize the window to check out how it fits perfectly.

The animation is done using the following css3 transition for each list item

-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
-ms-transition:all 0.2s ease;
transition:all 0.2s ease;

Checkout the demo and fork the github repo to customize it anyway you’d like to :)

Page grid-layout designing is fun with this 12 line parser :)

If you are familiar with css grid frameworks like 960 or 1kbgrid, then you already know that designing the layout is just repeating the container divs in a specific pattern. These grids made our page layout design into a easy job. But if you are one lazy ass like me and dont want to write that much(?) at all, then grab yourself a piece of cake and use the following snippet.

Say you are using 1kbgrid and your grid layout contains 3 rows,
1st row contains 2 spans where1st span is 8 column wide, 2nd span is 4 column wide
2nd row contains 3 spans which has a width of 3 column, 3 column and 6 column respectively
3rd row has 2 spans where 1st span has 6 column and 2nd span has 6 column
4th row has only one span of 12 column width

Now lets write a pattern like the following
8+4.3+3+6.6+6.12

If you look carefully then you will see that “.” is used as a row separator, and in each row spans are separated by a “+” sign following their width in column :)

function parseTo1KbGrid($pattern){
    $grid ="";
    $rows = explode(".", $pattern);
    foreach ($rows as $row){
        $grid .= "<div class='row'>\n";
        $spans = explode("+",$row);
        foreach($spans as $span){
            $grid .= "<div class='column grid_{$span}'><p></p></div>\n";
        }
        $grid .="</div>\n";
    }
    return $grid;
}

Now if you run the following code, it will generate the complete grid for you.

$pattern = "8+4.3+3+6.6+6.12";
echo parseTo1KbGrid($pattern);

The output will be like this

<div class='row'>
    <div class='column grid_8'><p></p></div>
    <div class='column grid_4'><p></p></div>
</div>
<div class='row'>
    <div class='column grid_3'><p></p></div>
    <div class='column grid_3'><p></p></div>
    <div class='column grid_6'><p></p></div>
</div>
<div class='row'>
    <div class='column grid_6'><p></p></div>
    <div class='column grid_6'><p></p></div>
</div>
<div class='row'>
    <div class='column grid_12'><p></p></div>
</div>

For 960 CSS grid framework, use the following routine

function parseTo960Grid($pattern) {
    $grid ="";
    $rows = explode(".", $pattern);
    foreach ($rows as $row) {
        $grid .= "<div class='container_12'>\n";
        $spans = explode("+",$row);
        foreach($spans as $span) {
            $grid .= "<div class='grid_{$span}'><p></p></div>\n";
        }
        $grid .="<div class='clear'></div>\n";
        $grid .="</div>\n";
    }
    return $grid;
}

Designing grid layout for 1kbgrid and 960 is now even easier, eh?

Performance tips for web applications

I have recently came by the article “High performance websites” in yahoo developer network. This article pointed 13 key points to speed up your application. These are

1. Make Fewer HTTP Requests
2. Use a Content Delivery Network
3. Add an Expires Header
4. Gzip Components
5. Put CSS at the Top
6. Move Scripts to the Bottom
7. Avoid CSS Expressions
8. Make JavaScript and CSS External
9. Reduce DNS Lookups
10. Minify JavaScript
11. Avoid Redirects
12. Remove Duplicate Scripts
13. Configure ETags

I was trying to improve performance for a web application recently keeping them in mind. Let me describe how to do some of them technically.

Making fewer HTTP requests:
Each time file loads from your web server, it generates an http request. So you can reduce number of http requests by caching some contents which are almost static or changes very rarely. if these contents are loaded from browser cache, there will be no request for them over HTTP. You can use apache’s mod_expire module to cache specific tyyou (image, swf etc) of contents in your site. The following line in httpd.conf loads mod_expire successfully.

LoadModule expires_module modules/mod_expires.so

After that, write the following lines in .htaccess to cache all the image, swf and javascripts for one month from the current date, with the help of mod_expire

ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType application/x-Shockwave-Flash A2592000

If you are confused by the letter “A” with number of seconds associated with it, it actually means “Access time”

For reducing number of HTTP requests, you can also merge all your css files and javascript files into one css and js file.

Use a content delivery network
Yeah, that works really cool. You can serve your static contents more effectively from popular content delivery network (CDN) like akamai or Amazon S3. The benefit of using popular CDNs is that these CDNs are scaled and distributed and really knows how to serve your content faster than ever.

Add an Expiry Header
Expiry tags helps your browser to understand when to invalidate cache for a cached content. So you can ask how to add expiry header to your content. You can do it by injecting HTTP headers while delivering it from your server to end user’s machine i.e browser. Apache’s mod_expire module does the same thing, by MIME type of contents. But it doesn’t help to cache a single file or multiple files. So if you want to cache a specific file, you can do it using following PHP code.

<?php
header("Expires: ".gmdate("D, d M Y H:i:s", time()+600)." GMT");
header("Cache-Control: max-age=600");
?>

This will set the expiry time 600 seconds from the time of content delivered.

Gzip components
While delivering any data from web server to browser, you can apply gzip compression over it. These gzipped data are decompressed when received by brwsers and treated as regular data. Almost all of the modern browsers supports gzip compression. To compress your content, you can do it either automatically using Apache’s mod_deflate or manually via your code. If you like to do it using mod_deflate, then you have to enable mod_deflate first and then modify your .htaccess file to make use of that. The following line in httpd.conf enables mod_deflate with apache

LoadModule deflate_module modules/mod_deflate.so

Now if you want to make use of mod_deflate and compress your content on the fly while delivering, you can add the following line in your .htaccess file.

AddOutputFilterByType DEFLATE text/html text/plain text/xml application/x-javascript

Or you can write PHP code for delivering gzipped contents. The following piece of code delivers any javascript file as a gzipped one.

<?php
//gzipjs.php
ob_start("ob_gzhandler");
header("Content-type: text/javascript; charset: UTF-8");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 * 24 * 3;
$ExpStr = "Expires: " .
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);
include(urldecode($_GET['js']));
?>

To deliver a javascript file (say prototype.js) using gzipjs.php you can load your scripts like this

<script type=”text/javascript” src=”gzipjs.php?js=prototype.js” ></script>

But hey, don’t just include any file passed to it (as i did it here in gzipjs.php). I wrote the code quickly to demonstrate the process. In practice you must (M.U.S.T) sanitize the supplied argument before including. Otherwise it could be a very dangerous security breach.

Minify Javascripts
Minifying means compressing javascripts by removing unnecessary white space, comments and others. You can make use of customized rhino engine which is used by dojo’s shrinksafe. Rhino is a nifty tool for doing these things.

So, how to do it? Download custom_rhino from dojo’s shriksafe page. After that compress your javascripts using following command.

java -jar custom_rhino.jar -c infile.js > outfile.js

That means you must have JRE installed in your machine to execute the command shown above (rhino is developed using java). Now if you have number of script files and you want to compress them all at once, without applying his command for each of them, you can make a nifty batch file to do it for you. Here is the code. It will compress each script files into script.js.packed file.

for /F %%F in ('dir /b *.js') do java -jar custom_rhino.jar -c %%F > %%F.packed 2>&1

Place custom_rhino.jar file and all your script files in same directory and run it. All your scripts will be packed.

I hope these tips will really boost up performance of your web application. This is just a basic article and I didnt go details of these tips. There are also other ways (like javascript on demand) which will also help increasing the performance.

Don’t forget to check other options from the original article at yahoo developer network.

Reference
1. http://betterexplained.com/articles/speed-up-your-javascript-load-time/
2. http://www.fiftyfoureleven.com/weblog/web-development/css/the-definitive-css-gzip-method
3. http://httpd.apache.org/docs/2.0/mod/mod_expires.html
4. http://httpd.apache.org/docs/2.0/mod/mod_deflate.html
5. http://developer.yahoo.com/performance/rules.html

List of RSS Feeds I read almost everyday

I am sharing a list of RSS feeds that I read almost everyday. And which one is my favorites RSS reader? Well, I use GoogleReader because of it’s excellent features like star and feed history. also I like it’s feed sharing feature.

1. Ajaxian : http://www.ajaxian.com/index.xml
2. Cow’s Blog : http://cow.neondragon.net/xml.php
3. IBM Developer Works (Web) : http://www.ibm.com/developerworks/views/web/rss/libraryview.jsp
4. IBM Developer Works (Open Source) : http://www.ibm.com/developerworks/views/opensource/rss/libraryview.jsp
5. Designer Folio : http://feeds.feedburner.com/dezinerfolio
6. Digg Technology : http://digg.com/rss/containertechnology.xml
7. DZone Latest Front Page Links : http://www.dzone.com/feed/frontpage/rss.xml
8. Freelance Switch : http://feeds.feedburner.com/FreelanceSwitch
9. HacksZine : http://hackszine.com/index.xml
10. International PHP Magazine News : http://www.php-mag.net/magphpde/psecom,id,26,noeid,26,.html
11. JSLabs High Performance Web Apps : http://feeds.feedburner.com/jaslabs
12. LifeHack : http://www.lifehack.org/feed/
13. Mashable : http://feeds.feedburner.com/Mashable
14. Maxdesign : http://www.maxdesign.com.au/feed/
15. Newsvine (PHP) : http://www.newsvine.com/_feeds/rss2/tag?id=php&d=v
16. PHP Freaks : http://www.phpfreaks.com/feeds/articles.xml
17. PHP Magazine : http://www.phpmagazine.net/syndicate.xml
18. PHP Coding Practise: http://php-coding-practices.com/feed/
19. PHP Developer : http://phpdeveloper.org/phpdev.rdf
20. PHP Geek : http://www.phpgeek.com/wordpress/feed
21. PHP Architct News : http://www.phparch.com/phpa.rss
22. Planet Ajaxian : http://planet.ajaxian.com/index.xml
23. Planet PHP : http://planet-php.org/rdf/
24. Programmable Web : http://feeds.feedburner.com/ProgrammableWeb
25. ROScripts : http://feeds.feedburner.com/ArticlesAndProgrammingTutorials
26. Sitepoint Blogs : http://www.sitepoint.com/blogs/feed/
27. Sitepoint News : http://www.sitepoint.com/recent.rdf
28. Smashing Magazine : http://www.smashingmagazine.com/wp-rss.php
29. Jonathan Snooks Blog : http://snook.ca/jonathan/index.rdf
30. TechCrunch : http://feeds.feedburner.com/Techcrunch
31. Technorati Javascript Links : http://feeds.technorati.com/search/Javascript
32. Technorati PHP Links: http://feeds.technorati.com/search/PHP
33. Veerle’s Blog : http://feeds.feedburner.com/veerlesblog
34. Web2List : http://feeds.feedburner.com/Web2list
35. Zen Habits : http://feeds.feedburner.com/zenhabits
36. Del.icio.us PHP Tags : http://del.icio.us/rss/tag/php
37. PHPExperts Forum : http://rss.groups.yahoo.com/group/phpexperts/rss
38. 456 Berea Street : http://www.456bereastreet.com/feed.xml
39. Particle Tree : http://feeds.feedburner.com/particletree
40. Simple Bits : http://simplebits.com/xml/rss.xml