The Code Dreamer : Nitin Hayaran

Introducing PNRCheck.com

nitin — Wed, 30 Jun 2010 08:07:49 +0000

I don’t know when this picture was taken, or is it actually of India or not, but condition of Indian Railways is not a lot different from this. The trains are always crowded, and it is difficult to get reservation in train. Every train traveler might faced the problem of non-availability of tickets in Indian Railways. Anyways, here I am not going to discuss the condition of Indian Railways.

In this post I want to Introduce one of the web-service which I built for my use, and I think it would be useful for you as well.

The name of the website is PNRCheck.com. The website will help you to keep track of your waiting list / RAC tickets. The process is very simple:

You need to login to the website.
Submit your 10 digit PNR Number for tracking, and relax.
We’ll send you an SMS and E-mail as and when the ticket gets confirmed. Even if the ticket doesn’t gets confirmed we’ll send you the final status of ticket(on chart preparation).

By using this service you won’t have to go and check for ticket confirmation again and again, and I think this will definitely save some of your time.

How does it work

Its plain and simple, the service keeps checking for any update of your ticket from indianrail.gov.in. And whenever it sees that your ticket is confirmed, it shoots you an email and SMS about latest status of the ticket.

As this service is dependent on availability from IndianRail.gov.in, there might be some instances where, you are not able to see updated status, or the website is not allowing you to submit new tickets. In such instances I’d request you to kindly wait for some time and try again later, otherwise you can also try checking your ticket status from indianrail.gov.in.

Why PNRCheck.com?

The only reason, for creating pnrcheck.com is that, such a service is very much required. This service must be provided by Indian Railways in first place. They take decent amount of service charges from us, and can’t simply send us update about our ticket.

Lets start using this service may be Indian Railways will get some lessons from this and may be later they start sending us these updates. So I’d request you to please tell your friends about this website, so that more and more people can use this service.

PNRCheck.com Beta

The website is presently is in beta, so there might be some glitches here and there. I’d request you to kindly post your comments, feedback, errors through feedback button on left side of your screen.

Let me here thoughts about this service through comments.

Energy Saving Javascript

nitin — Sun, 27 Jun 2010 18:30:38 +0000

Title of this post may seem strange to you but this is true, You can actually save some energy by using this Javascript on your website. Let me tell you how.

This javascript turns the webpage black if there is no user activity on the page for some time. As the page predominantly turn black the script in-effect saves energy.

Image displayed is primarily a function of the user's color settings and desktop graphics, as well as the color and size of open application windows; a given monitor requires more power to display a white (or light) screen than a black (or dark) screen.

Roberson et al, 2002.

Just have a look at the Demo to see how it looks:

Energy Saving Javascript Demo

How to Use

Using this script is damn simple just place following script tag anywhere in the page. It would be good if you place this script just before

<script src="http://apps.nitinh.com/energy.js?time=100&credit=0" type="text/javascript"></script>

Configuration

There are two configurable parameters:

time : This is the amount of idle time before which the screen turn black. The time is in number of seconds and its value should be greater than 10.
credit : This is boolean field to show / hide credits in Black Screen. Values could be 1 or 0

Hope this script saves some of the valuable world energy.

Wordpress Hacks : Export and Redirect Posts based on their Category

nitin — Fri, 26 Mar 2010 16:03:06 +0000

Wordpress is an excellent blogging engine. It is easy to setup and even easier to use. It has got a huge collection of themes and plugins. Because of all these things Wordpress has got so widespread use.

Wordpress has the concept of categories to segregate posts in different types. When number of posts in some category becomes really huge, its good to make a separate website for this particular category.

I faced similar problem for one of my website and I decided to migrate all of my posts in “XYZ” category to a different domain. But, unfortunately Wordpress Admin Dashboard doesn’t provide any direct method to export all posts in a particular category.

So, to perform such migration we’ll have to go through several steps. For better understanding we can basically divide this full migration in two steps:

Export Posts / Comments based on its category
Redirect posts of this category

Export Posts based on its category

Wordpress admin panel is very rich, and it does provide direct method to export posts, pages, comments, custom fields, categories, and tags. But you can only export it based on its author, there isn’t any way based on category. So, basically what I did was :

Create a new user “AUTHOR_1”
Change author of all the posts in category “CATEGORY_XYZ” to “AUTHOR_1”
Export posts of “AUTHOR_1”

Step 1 and 3 are quite obvious and straight, the only challenge is with Step 2. The best way I felt was to dig into the Wordpress database and change author on table level itself.

Database Manipulation

Wordpress stores all posts in a table called “wp_xxxxxx_posts”. This table consists a column named “post_author”. So basically we’ll have to change this column for our posts. To do this just run following queries on your wordpress database.

NOTE : Before running any query on database level, I’ll recommend you to take backup of the datebase.

Get TERM_ID

SELECT  `term_id` ,  `name` ,  `slug`
FROM  `wp_h8kac5_terms`
WHERE  `name` LIKE  'CATEGORY_XYZ'

Here you'll have to note the "term_id" In following query put term_id taken form above query.

Get TERM_TAXONOMY_ID

SELECT  `term_taxonomy_id` ,  `term_id` ,  `taxonomy` ,  `count`
FROM  `wp_h8kac5_term_taxonomy`
WHERE  `term_id` = %term_id%
AND taxonomy =  'category'

Here you have to note "term_taxonomy_id". Secondly you can see a column "count", this count should be equal to the posts returned in :

http://www.example.com/wp-admin/edit.php?category_name=CATEGORY_XYZ

Update AUTHOR_ID in Posts Table

This is the final sql query to update author. Before this you need to find the user_id of the user we just created. This can be found in table "wp_h8kac5_users".

UPDATE wp_h8kac5_posts
SET post_author = %USER_ID%
WHERE id IN (
SELECT object_id FROM `wp_h8kac5_term_relationships` WHERE `term_taxonomy_id` = %TERM_TAXONOMY_ID% )

You need to replace %TERM_TAXONOMY_ID% from the "term_taxonomy_id" returned from the previous query.

Export Posts

Hurry !! half the battle is won. We have changed author of all the desired posts. Now we just have to log on to admin panel and export the posts of this author. This can be done from:

http://www.example.com/wp-admin/export.php

Imports Posts on New Domain

Now log on to the admin dashboard of new domain and import these posts from:

http://www.example.com/wp-admin/import.php

At at this point we have done with export part of this migration process. Now the only thing left is to redirect these posts. For redirection we’ll use .htaccess rules.

Redirect posts of the category

On my website I have following permalink format :

/%year%/%monthnum%/%category%/%postname%/

So, basically “Category” is the 3rd parameter in my URL Scheme. You need to keep similar URL Scheme on your new website. According to this URL pattern we have to write a rule in .htaccess file.

# BEGIN Redirection

RewriteEngine On
RewriteCond %{REQUEST_URI} ^(/\d{4}/\d{2}/)([^/]+)(/.*)$
RewriteCond %2 ^CATEGORY_XYZ$
RewriteRule ^(.*)$ http://www.new-domain.com/$1 [redirect=permanent,last]

# END Redirection

Just put above code in starting of .htaccess, and you are all done.

You can test our implementation by visiting any post of “CATEGORY_XYZ”, it should be redirected to your new domain.

Feel free to shoot any queries through comments.

Sexy Tooltip using CSS3 (no images)

nitin — Thu, 18 Mar 2010 08:45:59 +0000

CSS is Awesome, but “CSS3” is Awesomely Awesome.

With CSS3 we can make our pages even more beautiful without using additional images and extra markup.

In this post I have tried to make tooltips using CSS3. This is just a sample implementation for tooltip, you can have even better variants.

Here, this example is semantic HTML. No empty elements, no unnecessary extra elements, no JavaScript, no images.

The inspiration for these tooltips is from the excellent attempt from “Nicolas Gallagher” in Pure CSS speech bubbles.

Lets first head on to the demo for its actual effect.

Tooltip Demo

Tooltip using CSS3

Interested ??? Lets head on to its code

HTML Markup

The HTML used here is very simple, just add class”tooltip” and in title put tooltip text.

<a class="tooltip" title="This is first tooltip" href="#">Link</a>

CSS Code

The CSS for this effect utilizes :before and :after to show tooltip. Moreover box-shadow, gradient, border-radius properties of CSS3 are used to add some glare. Here is the code.

a.tooltip:after{
	font:12px/1.4 Arial,Georgia,sans-serif;
	content: attr(title);
	display:none;
	position:absolute;
	padding:5px 10px;
	top:0px;
	margin:1em 0 3em;
	color:#fff;
	background:#075698;
	left:-20px;
 
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
 
	background:-webkit-gradient(linear, left top, left bottom, from(#075698), to(#2e88c4));
	background:-moz-linear-gradient(top, #075698, #2e88c4);
	background:-o-linear-gradient(top, #075698, #2e88c4);
	background:linear-gradient(top, #075698, #2e88c4);
 
	-moz-box-shadow: 0px 0px 4px #000; /* FF3.5+ */
	-webkit-box-shadow: 0px 0px 4px #000; /* Saf3.0+, Chrome */
	box-shadow: 0px 0px 4px #000; /* Opera 10.5, IE 9.0 */
	filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#000'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#000')"; /* IE8 */
}
 
/* creates triangle */
a.tooltip:before{
	z-index:13;
	position:absolute;
	content:"\00a0";
	display:none;
	width:0;
	height:0;
	border-style:solid;
 
	top:-3px;
	left:0px;
	border-width:15px 7px 15px 7px;
	border-color:transparent transparent #075698;
}
 
a.tooltip:hover::before{
	display:block;
}
 
a.tooltip:hover{
	z-index:10;
	position:relative;
}
 
a.tooltip:hover::after{
	width:200px;
	display:block;
	margin:25px 0 0 10px;
}

Hope you'll like it.

Beautiful Nag Screen using JQuery & CSS3

nitin — Tue, 16 Mar 2010 16:51:18 +0000

Yesterday I wrote about a beautiful implementation for nag screen using mootools and CSS3. Thanks for all of my visitor for showing interest in it.

Considering requests from some of the users, I have also worked on its jQuery version. In jQuery version I have also tried to remove the bugs pointed out by one of the user.

The new jQuery version also have following improvements:

Close button can be used to close nag screen
Now the whole text doesn’t jumps when nag screen sticks to top

thanks “Seeker” for pointing out these bugs.

Head over to Demo and download the source for this page.

Demo of Nag Screen

Download Nag Screen Code

Be sure to check out the MooTools version.

Beautiful Nag Screen using Mootools & CSS3

nitin — Mon, 15 Mar 2010 12:30:04 +0000

Nagscreen : Messages on the webpage that reminds (or nags) the user to register, or show some notification. These messages appear on the webpage in a way to seek user attention. Here in this post we'll be creating beautiful and dynamic Nag Screen using Mootools.

The application of nag screen is widespread, it widely used by various websites to show important messages on the webpage. Some examples of such screens are :

Update notices in wordpress
Import address book message, which facebook shows
Registration messages shown on various websites

So, considering such a wide use of nag screens I’ve tried to make them a little beautiful and flashy.

Just have a look at the demo to see the effect :

Nag Screen Demo

For capturing the scroll events I have used “ScrollSpy” developed by “David Walsh”. Thanks David for make such useful and easy to use plugin.

You can always access source of the webpage for its better understanding. To grab the source please download it here:

Download Source

For further clarification and suggestions please drop comments.

Be sure to check out the jQuery version.

How to Create a Simple Slideshow using Mootools / JQuery

nitin — Sat, 13 Mar 2010 17:13:47 +0000

When we want to show lots of content in limited screen space, Slideshows comes to rescue. Making use of slideshows is the optimal way to present large amount of information. In this post i'll walk you through the process of making a very simple(minimilistic) slideshow using Mootools / Jquery.

You must have seen various types of slideshows around the web. Creating such slideshow is also very simple. With little smart code one can make it very quickly.

As it is said “A picture is worth a thousand words”, similarly I believe a demo is worth a thousand words. So lets hit the demo and try it ourselves.

Demo using Mootools

Demo using JQuery

So, Interested ??? Lets head over to its implementation.

Action Plan

Step 1 : HTML Code Markup
Step 2 : Setup CSS for the Slideshow
Step 3 : Javascript for getting desired effect

Step 1 : HTML code

In this step we’ll make basic markup for the slideshow. This basically consists two parts, one which shows the bigger picture and second to show list of thumbnails. Here is the necessary HTML code for these two parts.

<div id="bigPic">
    <img alt="" src="imgs/1.jpg" />
    <img alt="" src="imgs/2.jpg" />
    <img alt="" src="imgs/3.jpg" />
    <img alt="" src="imgs/4.jpg" />
    <img alt="" src="imgs/5.jpg" />
    <img alt="" src="imgs/6.jpg" />
    <img alt="" src="imgs/7.jpg" />
    <img alt="" src="imgs/8.jpg" />
    <img alt="" src="imgs/9.jpg" />
    <img alt="" src="imgs/10.jpg" />
</div>
 
<ul id="thumbs">
    <li class="active" rel="1"><img alt="" src="imgs/1_thumb.jpg" /> </li>
    <li rel="2"><img alt="" src="imgs/3_thumb.jpg" /> </li>
    <li rel="3"><img alt="" src="imgs/4_thumb.jpg" /> </li>
    <li rel="4"><img alt="" src="imgs/5_thumb.jpg" /> </li>
    <li rel="5"><img alt="" src="imgs/6_thumb.jpg" /> </li>
    <li rel="6"><img alt="" src="imgs/7_thumb.jpg" /> </li>
    <li rel="7"><img alt="" src="imgs/8_thumb.jpg" /> </li>
    <li rel="8"><img alt="" src="imgs/9_thumb.jpg" /> </li>
    <li rel="9"><img alt="" src="imgs/10_thumb.jpg" /> </li>
    <li rel="10"><img alt="" src="imgs/2_thumb.jpg" /> </li>
</ul>

Here fist div#bigPic contains all the big images in the slideshow. Whereas, the ul#thumbs contains thumbnails images.

Step 2 : Necessary CSS Code

This section shows, the necessary CSS code. CSS style used in demo for other styles are not included here.

#bigPic{
	width:940px;
	height:300px;
	padding:1px;
	border:1px solid #CCC;
	background-color:#FFF;
	margin-bottom:10px;
}
#bigPic img{
	position:absolute;
	display:none;
}
ul#thumbs li.active{
	border:2px solid #000;	
	background:#fff;
	padding:2px;
}
ul#thumbs, ul#thumbs li{
	margin:0;
	padding:0;
	list-style:none;
}
 
ul#thumbs li{
	float:left;
	margin-right:7px;
	margin-bottom:5px;
	border:1px solid #CCC;	
	padding:3px;
	cursor:pointer;
}
ul#thumbs img{
	float:left;
	width:80px;
	height:80px;
	line-height:80px;
	overflow:hidden;
	position:relative;
	z-index:1;		
}

Step 3 : Javascript Magic

The basic idea to get the effect is in following steps:

Increase the z-index of current shown image
Show next image to be shown just below current image.
Now using fade out current image. This way next image will become visible.

Equivalent JS code used is as follows.

Using Mootools

If you use JQuery directly head on to next section with JQuery code.

var currentImage;
var currentIndex = -1;
var interval;
function showImage(index){
    if(index<$('bigPic').getElements('img').length){
        var indexImage = $$('#bigPic img')[index]
        if(currentImage){   
            if(currentImage != indexImage ){
                $(currentImage).setStyle('z-index',2);
                $clear(myTimer);
                var myFx = new Fx.Tween(currentImage, {
                    duration: 250,
                    onComplete:function(){
                        $(this).setStyles({'display':'none','z-index':1});
                        myTimer = showNext.delay(3000);
                    }.bind(currentImage)
                }).start('opacity',0);
            }
        }
        indexImage.setStyles({'display':'block', 'opacity':1});
        currentImage = indexImage;
        currentIndex = index;
        $$('#thumbs li').removeClass('active');
        $$('#thumbs li')[index].addClass('active');
    }
}
 
function showNext(){
    var len = $('bigPic').getElements('img').length;
    var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
    showImage(next);
}
 
var myTimer;
window.addEvent('domready',function(){
    myTimer = showNext.delay(3000);
    showNext(); //loads first image
    $('thumbs').getElements('li').addEvent('click',function(e){
        var count = this.get('rel');
        showImage(parseInt(count)-1);
    });
});

JQuery Implementation

var currentImage;
var currentIndex = -1;
var interval;
function showImage(index){
    if(index < $('#bigPic img').length){
        var indexImage = $('#bigPic img')[index]
        if(currentImage){   
            if(currentImage != indexImage ){
                $(currentImage).css('z-index',2);
                clearTimeout(myTimer);
                $(currentImage).fadeOut(250, function() {
                    myTimer = setTimeout("showNext()", 3000);
                    $(this).css({'display':'none','z-index':1})
                });
            }
        }
        $(indexImage).css({'display':'block', 'opacity':1});
        currentImage = indexImage;
        currentIndex = index;
        $('#thumbs li').removeClass('active');
        $($('#thumbs li')[index]).addClass('active');
    }
}
 
function showNext(){
    var len = $('#bigPic img').length;
    var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
    showImage(next);
}
 
var myTimer;
 
$(document).ready(function() {
    myTimer = setTimeout("showNext()", 3000);
    showNext(); //Load first image
    $('#thumbs li').bind('click',function(e){
        var count = $(this).attr('rel');
        showImage(parseInt(count)-1);
    });
});

I have tried to keep the javascript code really simple if you still feel it difficult to understand just drop a comment about it. I'll try to explain your doubts.

Download Code

JQuery Implementation : Sideshow-Jquery.zip
Mootools Implementation : Sideshow-Mootools.zip

Django Template Tag to protect the E-mail address

nitin — Tue, 02 Feb 2010 10:26:51 +0000

Here is a Django Template tag which you can use to protect the E-mail address on your website against bots or spiders that index or harvest E-mail addresses. It uses a substitution cipher with a different key for every page load.

This template tag encrypts the email address and generates a equivalent Javascript code that can decrypt it. This Javascript produce an email link when it runs on browser. As most bots and spider don't executes Javascript they wouldn't be able to extract mail addresses. While a visitor of your web page will not notice that you used this script as long as he/she has javascript enabled.

A normal visitor with a javascript enabled browser will find no difference. The visitor with non-javascript browser will see “[javascript protected email address]” in stead of the E-mail address.

Template Tag Code

class EncryptEmail(template.Node):
    def __init__(self, context_var):
        self.context_var = template.Variable(context_var)# context_var
    def render(self, context):
        import random
        email_address = self.context_var.resolve(context)
        character_set = '+-.0123456789@ABCDEFGHIJKLMNOPQRSTUVWXYZ_abcdefghijklmnopqrstuvwxyz'
        char_list = list(character_set)
        random.shuffle(char_list)
 
        key = ''.join(char_list)
 
        cipher_text = ''
        id = 'e' + str(random.randrange(1,999999999))
 
        for a in email_address:
            cipher_text += key[ character_set.find(a) ]
 
        script = 'var a="'+key+'";var b=a.split("").sort().join("");var c="'+cipher_text+'";var d="";'
        script += 'for(var e=0;e
        script += 'document.getElementById("'+id+'").innerHTML="\\"mailto:"+d+"\\">"+d+""'
 
 
        script = "eval(\""+ script.replace("\\","\\\\").replace('"','\\"') + "\")"
        script = ''
 
        return 'id + '">[javascript protected email address]'+ script
 
 
def  encrypt_email(parser, token):
    """
        {% encrypt_email user.email %}
    """
 
    tokens = token.contents.split()
    if len(tokens)!=2:
        raise template.TemplateSyntaxError("%r tag accept two argument" % tokens[0])
    return EncryptEmail(tokens[1])
 
register.tag('encrypt_email', encrypt_email)

Usage

{% encrypt_email user.email %}

The javascript code it generates is something like this:

<span id="e857606962">[javascript protected email address]</span>
<script type="text/javascript">
/*[CDATA[*/eval("var a=\"cnel8gMuoCjaYRDkv7p+ErHI5qL2x-O3Q@GdtbWKUwT9VfZSN_J04.P1hiFAXz6Bmys\";var b=a.split(\"\").sort().join(\"\");var c=\"AXzVfPXCRgMAhw9fAe91.\";var d=\"\";for(var e=0;ee857606962\").innerHTML=\"<a href=\\\"mailto:\"+d+\"\\\">\"+d+\"</a>\"")/*]]>*/
</script>

Demo

For demo visit :

Demo

Hope this template tag will help you to secure your e-mail addresses from bots and spider.

Lets have a spam free web.

Make Your Firefox Even Better by tweaking its looks

nitin — Fri, 29 Jan 2010 11:09:28 +0000

Firefox is my favorite browser. The biggest reason for this is its repository of useful plugins. The only problem which I see in its default installation is the screen usage. With this I mean, Firefox wastes a lot of screen real estate in unnecessary menus, buttons. The good news is that it also provides flexibility to customize its overall look and feel.

I have to tried to optimize my Firefox, and I am pretty happy with the new look. It gives more space for webpage. More emphasis on stuff that is important.

Previous Look

New Look

Changes

In new look there are following changes:

Hide Menu Bar : As I have seen from my usage I don't really access menus. I simply use its keyboard shortcuts. So it is actually not needed for me.
Show Small Icons : Fairly decent visibility for buttons even when they are smal.
Place Firebug and Web Developer buttons before search bar : Being a web developer these two plugins are my best friends. So, I have kept their button on the top bar.
Hide Status bar : After placing Firebug in top bar I realized there is no need for a status bar. I only use it to access Firebug.
Hide Web-Developer Toolbar : After placing Web Developer Icon in top bar I realized there is no need for a separate menu bar. I can always simple show/hide it on clicking this button.

Analysis

I have reclaimed 75px from Firefox for my Web Pages. Initially webpage client area was 581px now it is 656px.

I really liked these changes in my browser. Hope you'll also like them.

Beautiful Nag Screen using Mootools & CSS3

Drop Shadow in Images : No extra markup

nitin — Wed, 06 Jan 2010 15:01:49 +0000

Drop Shadows adds extra glare to any design. They can be easily accomplished in any graphic editor, however its a little tricky in web programming. In this post I'll walk you through various ways in which you can add shadows to images without any extra markup used.
In all cases i'll use the same HTML code for showing Image.

<img src="image.jpg" class="thumbnail" />

CSS 3

In the latest public working draft we have a box-shadow property. This property can be used to draw a drop-shadow for a CSS box.

The CSS for the above example is :

.thumbnail{
    padding:4px;
    border:1px solid #DDD;
    -moz-box-shadow: 5px 5px 7px #999;
    box-shadow: 5px 5px 7px #999;
    -webkit-box-shadow: 5px 5px 7px #999;
}

Good naa !!!

But the problem with this implementation is that it doesn't work in IE. The Box Shadow property is supported by only :
+ Firefox 3.5
+ Safari (3.2.1)
+ Google Chrome 2
So its up to you whether you want to ignore IE users or not.

Now lets see other approach.

Using Background Shadow Image

In this approach we'll be using an extra image in background that will give shadow effect. This technique is also illustrated here "CSS Drop Shadows".

In this case the CSS used is:

.thumbnail{
    width:250px;
    height:250px;
    padding:4px 14px 14px 4px;
    background:transparent url('image-bg.png') no-repeat 0 0;
}

Some other implementations are

Demo 1

Demo 2

Hope this article will give more ideas for similar implementation.

Happy Coding!!!!