Its been long time, was busy with some project works.

Traditional approach (what we used to do):
As a web developer you might have come across a situation where you need to setup multiple sites on your local machine. May be you are working on multiple projects or working on your personal site and your regular project. Earlier what we used to do is change the doc root in your apache’s httpd.conf file [C:\xampp\apache\conf\httpd.conf]. Similar to this

DocumentRoot "C:/xampp/htdocs/myproject1"

So this will help us to point the localhost directly to myproject1 folder. In other words when you hit http://localhost/ you will get the contents of myproject1. If we had another site to be configured we need to change this DocumentRoot again and restart the apache.

New approach:

You can make your localhost to point to different folders on different port numbers. Follow these simple steps:

Step 1: Make your apache to listen to multiple ports. Go to C:\xampp\apache\conf\httpd.conf and search for the key word Listen you can see something like this Listen 80. Now tell your apache to listen to multiple ports, replace that with below content

Listen 80
Listen 8001
Listen 8002
Listen 8003

Step 2: Now go to “C:\xampp\apache\conf\extra\httpd-vhosts.conf”, this is the actual player. At the end of the file you can specify something like this below:

    ServerAdmin postmaster@dummy-host.localhost
    DocumentRoot "C:/xampp/htdocs/sample_project"
    ServerName localhost:8001

    ServerAdmin postmaster@dummy-host.localhost
    DocumentRoot "C:/xampp/htdocs/personal_site"
    ServerName localhost:8002

    ServerAdmin postmaster@dummy-host.localhost
    DocumentRoot "C:/xampp/htdocs/myworks"
    ServerName localhost:8003

Which tells your apache to take different folders on hitting different port numbers. That is when you hit http://localhost:8001/ it will take the contents from sample_project, similarly http://localhost:8002/ will point to your personal_site folder. http://localhost:8003/ will point to your myworks folder.

Default http://localhost/ will point your Document root folder that you have mentioned in your  httpd.conf folder. i.e in my case it is myproject1 foder.

By this we will be able to run 4 different sites on local machine. Hope this helps you people.

Note: You need to restart your apache whenever you change something in httpd.conf or httpd-vhosts.conf

For Mac Users

Lets go to the httpd.conf file at this location “/Applications/XAMPP/xamppfiles/etc/httpd.conf”

Also open the httpd-vhosts.conf from “/Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf”

So now your editor will ask for the password, enter your login password or your root password.

Now Search for listen in and replace the content there with this

Listen 80
Listen 8001
Listen 8002
Listen 8003

Now at the end of the httpd.conf file, add this line

"AcceptMutex flock"

Also search for the and below you should make “AllowOverride” to “All” and above this line add these options “Options Indexes FollowSymLinks ExecCGI Includes” i.e

    Options Indexes FollowSymLinks ExecCGI Includes
    AllowOverride All

Search for “# Virtual hosts” and remove the comment (#) below this line
i.e

# Virtual hosts
Include /Applications/XAMPP/etc/extra/httpd-vhosts.conf

Finally go to the httpd-vhosts.conf file and make sure your folders are configured as said above.
Here is a example:

    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "/Applications/XAMPP/xamppfiles/docs/dummy-host.example.com"
    ServerName dummy-host.example.com
    ServerAlias www.dummy-host.example.com
    ErrorLog "logs/dummy-host.example.com-error_log"
    CustomLog "logs/dummy-host.example.com-access_log" common

    ServerAdmin webmaster@dummy-host2.example.com
    DocumentRoot "/Users/yourname/Office/clientx/front_end"
    ServerName localhost:8001
    ErrorLog "logs/dummy-8001.example.com-error_log"
    CustomLog "logs/dummy-8001.example.com-access_log" common

    ServerAdmin webmaster@dummy-host2.example.com
    DocumentRoot "/Users/yourname/Office/testing_ground/test"
    ServerName localhost:8002
    ErrorLog "logs/dummy-8002.example.com-error_log"
    CustomLog "logs/dummy-8002.example.com-access_log" common

    ServerAdmin webmaster@dummy-host2.example.com
    DocumentRoot "/Users/yourname/Office/client1/development"
    ServerName localhost:8003
    ErrorLog "logs/dummy-8003.example.com-error_log"
    CustomLog "logs/dummy-8003.example.com-access_log" common

Google search results with google instant

Hi,

You guys might have noticed this recently that : In search results page, if you keep changing keyword, below results are automatically refreshed on each key press. This new feature is called Google Instant.

A week back I have noticed something in google results page which I felt like a tag line of a car ad “Get Ready To Get Surprised”.

Old methodology: A firefox addon

In the past you might have come across a addon for Firefox called coolPreviews which basically show you the search icon on the each search results, on mouseover of it will get the preview of that site. This addon is compatible with firefox3 and above versions, other browsers don’t have this option. I tried this earlier, and lost interest in it cause of its slowness, and memory eating.

Google Instant Preview

Go to google dot com and search for any keyword. [Try it in modern and fast browsers like Firefox or Google Chrome or Opera or Internet explorer >= 8th version].

On the right end of each result’s title there is a search icon present. Just click on it once. You are done! Keep moving to the below or above results by mouse overing on them. You can see the preview of that site without actually going on to the site. And response is amazingly super fast!!!.

• Huge Time Saving, really I mean it.
• When searching for product review or description –  You can decide which site has more images? which site has good video demo of it, or which site has more pictures on it to get a good feel about the product.
• You can avoid some sites which they only contains link to some other third site – this you will experience when you trying for some free MP3 files or ebooks.

In my point of view, from a web-development perspective, this is major mile stone achieved by google, Also which makes our clients to ask for “Give me the search results similar to google instant”

This is going to set bench mark for people in web to develop applications or sites to provide this kind experience. Its a major lesson for Microsoft! yeah, they will think again – “was it necessary for them to come to market with a product like Bing”?

When Bing released lot of articles on internet, news papers and even news channels yelled something like “Bing will take over Google” I can say then now “Kiss my ***”

This kind of user experience makes web a greater place to be. People will update there browsers to modern browsers like firefox or chrome or opera to get this kind of experience.

These are the some javascript functions which come in handy while writing javascript code.

push() and pop()
This comes in handy when you want to store some elements to array as you go on in the code. Think of a scenario where you need to collect some data in a big module and at the end i will show up the user that x number of elements are there and those elements are … etc. push() is a very efficient method in this case

var myDScollection = []; // Yes this is the array don't worry, and also JSLint says this is the best.

//Pushing a string
myDScollection.push('hey there');

//pushing a variable value
var myLoopVar1 = 10;
myDScollection.push(myLoopVar1);

So this array can be used to get the count or loop through each of the element of myDScollection

for (i = 0; i < myDScollection.length; i++) {
    document.write(myDScollection[i] + '
')
}

Similary you can pop the contents of the array using myDScollection.pop()

Below is the link for playing with this stuff. Yes! I am right, here onwards there will be no demo files to download or show, you will have the direct access to my code what ever i am trying out for this blog. Enjoy

Play

On Wednesday, May 19, 2010 google has announced google web fonts. Its a open source and its the end of all our typographic problems. We were using flash, images etc to achieve the rich typography in the front end. Now all these things will be replaced with new concept from google.

All you need to do is visit this page http://code.google.com/webfonts choose the font which you need,
They will give you the code for it. Means its a new link tag similar to this

<link href="http://fonts.googleapis.com/css?family=Reenie+Beanie" rel="stylesheet" type="text/css">

You have to include this link tag in your page. And you need to specify the font family for this where ever you require that.

.class2{
	font-family: 'Reenie Beanie', arial, serif;
	font-size: 1.5em;
   }

More info at
http://code.google.com/apis/webfonts/

Google font API example

As we all know font-family: of CSS doesn’t support whatever you write. Which means, there are some standard fonts present in all the systems of the world. Which we use to specify as font-family in CSS. Otherwise it will take the default font available in the browser.

What if I need all headings of my site with some custom font like ‘Trade Gothica’. Specifying this value in CSS’s font-family will work well only if the machine used by end-user has this font.

We have a alternate method for this we can achieve this by using flash and sifr.

1. Convert your font to a flash file ( .swf ) file. No need to worry if you dont know how to do it. There is a site available for this Sifr Generator which will convert your font to a swf file.
2. You need 3 javascript files jquery-min.js,  jquery.flash.min.js and jquery.sifr.min.js
3. Rename your swf file to sifr.swf and place it in flash directory
4. You need to write a jquery script which scans all your class names which should be converted to custom font. Here in my example i am converting all my h1 and h4 tags of the page to custom font.

$(document).ready(function() {
    $('h1, h4').sifr({
        path: "flash/",
        font: "sifr",
        textAlign: "left"
    });
});

That’s it, you can see the flash doing cute job in your page.
Demo is here and you can download that example by clicking here.

Hi,

Here I start with a wonderful method to create rounded corner divs with drop shadow. You no need to touch the HTML for this!!! [You can see how it looks our final thing as shown in above image]

Here i have used Jquery to make this work. You need to specify one common class name for all the div’s which require rounded corners. In jQuery i am going to scan all these class names and append 4 <div>’s which create rounded corners. Also i am going to find out the width for all the divs and for each div i am going to insert another <div> which creates the drop shadow.

<div class="roundedCornerDiv">
	<div class="module-header">
		<h4>Title of the box 8</h4>
	</div>
	<div class="module-body">
		Aliquip luptatum concludaturque ad nam, qui eu quod vocibus, pri lorem graecis accommodare ne. Te sumo necessitatibus nec, sea cu virtute alterum, sed ad cibo posidonium. Ius postea tibique mnesarchum ad.
	</div>
</div>

Note the class name “roundedCornerDiv” which is our actual div for which we are going to make rounded corners and bottom shadow. This div contains two blocks header and body modules.

We are going to write a simple jQuery method to append 4 divs for rounded corner and one div for drop shadow. The code is as shown below

$(document).ready(function() {
	$('.roundedCornerDiv').each(
		function(){
			$(this).append('<div class="tr"></div><div class="tl"></div><div class="br"></div><div class="bl"></div>');
			$("<div class=\"dropShadow\"></div>").width($(this).outerWidth() - 7).appendTo($(this));
		}
	);
});

Befor doing all these things please include jQuery library and YUI grid library which makes our layout looks good and provide with jQuery pre defined functions

<link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

Create the rounded corner sprite image from any graphics editor like photoshp

Here is the CSS for our positioning rounded corners

.roundedCornerDiv {
	padding: 10px;
	border: 1px solid #f88907;
	background: #FFF;
	position: relative;
	margin-bottom: 16px;
}
.roundedCornerDiv .tl,
.roundedCornerDiv .tr,
.roundedCornerDiv .bl,
.roundedCornerDiv .br {
	position: absolute;
	width: 4px;
	height: 4px;
	overflow: hidden;
	background: url(../images/sprite.png) 0 0 no-repeat;
}
.roundedCornerDiv .tl {
	top: -1px;
	left: -1px;
}
.roundedCornerDiv .tr {
	top: -1px;
	right: -1px;
	background-position: -4px 0;
}
.roundedCornerDiv .bl {
	bottom: -1px;
	left: -1px;
	background-position: -12px 0;
}
.roundedCornerDiv .br {
	bottom: -1px;
	right: -1px;
	background-position: -8px 0;
}
.roundedCornerDiv .dropShadow {
	height: 10px;
	background: url(../images/dropshadow.png) 0 0 repeat-x;
	position: absolute;
	bottom: -11px;
	left: 3px;
	overflow: hidden;
}
.roundedCornerDiv .module-header {
	font-style: italic;
	border-bottom: 1px solid #333;
	font-size: 110%;
	margin-bottom: 8px;
}

/* Below things are for idiot IE6 only: WTF? */
.roundedCornerDiv .dropShadow {
	_bottom: -12px;
}
.roundedCornerDiv .bl,
.roundedCornerDiv .br {
	_bottom: -2px;
}
.yui-g .yui-g .roundedCornerDiv .tr,
.yui-g .yui-g .roundedCornerDiv .br ,
.yui-gb .roundedCornerDiv .tr,
.yui-gb .roundedCornerDiv .br  {
	_right: -2px;
}
.roundedCornerDiv  {
	_height: 1%;
	_zoom: 1;
}
.roundedCornerDiv .dropShadow {
	_zoom: 1;
}

I am a opensource guy. You can use the above code without any license. Happy coding

Demo

Download the source code

You guys might have come across a situation like this, someone sending a file to you which was written in MS Office 2007. But unfortunately you have MS Office 2003 installed in your office machine. The word document sent by the other person is in .docx format.

I searched microsoft site to find a file format converter, which was 27 MB ( earlier it was around 170 MB i guess but not sure) . This is what the reason i hate microsoft somuch. A Open Office can open all its files + all versions of microsoft office, why cant these guys.

Here found converting this file < 60 Seconds method
- Open your gmail account and attach the .docx file you have and send it to your won gmail id or forward the mail which has .docx attachment to your gmail account.
-Open the mail which has this attachment, click on the link “Open as a Google document”
-It will does the job in < 10 Seconds.
-On top right corner of the page, you can see a link called share, click on it and select email as attachment.

After digging deep into the sites and configuring my apache server ( after so many failures )
Here i came up with list of things to be done for

1. Gziping the CSS/JS, image and flash files
2. Removing Etags from CSS/JS and Image/flash files.
3. Adding expires header to CSS/JS and image/flash files.

First, Go to your apache’s httpd.conf file
I my case its “C:\xampp\apache\conf\httpd.conf”

The lines beginning with # indicate that these are comments
Remove the comments for these below mentioned lines

LoadModule deflate_module modules/mod_deflate.so
LoadModule expires_module modules/mod_expires.so
LoadModule headers_module modules/mod_headers.so

Add the below thing to remove the ETags. This can be added at the end

FileETag None

To Add expires header to all the files that are requested from the server

ExpiresActive On
ExpiresDefault "access plus 300 seconds"
<Directory "/myProject/webResources">
    Options FollowSymLinks MultiViews
    AllowOverride All
    Order allow,deny
    Allow from all
    ExpiresByType text/html "access plus 1 day"
    ExpiresByType text/css "access plus 1 day"
    ExpiresByType text/javascript "access plus 1 day"
    ExpiresByType image/gif "access plus 1 day"
    ExpiresByType image/jpg "access plus 1 day"
    ExpiresByType image/png "access plus 1 day"
    ExpiresByType application/x-shockwave-flash "access plus 1 day"
</Directory>

Note: Here “myProject” is the folder where my web pages are present. i.e “C:\xampp\htdocs\myProject”. Where “webResources” is the directory where my css, js, image, flash files are present. For all these files I am adding expires header of one day. Means these files can be can be cached for the entire day in the local browser. In other words these files are not changed at least for one day.

To Gzip the CSS and JS files that are present in the “webResources” folder

<Location "/sprintCommunity/webResources">
# Insert filter
SetOutputFilter DEFLATE

# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html

# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip

# MSIE masquerades as Netscape, but it is fine
# BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

# NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48
# the above regex won't work. You can use the following
# workaround to get the desired effect:
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

# Don't compress images
SetEnvIfNoCase Request_URI \
\.(?:gif|jpe?g|png)$ no-gzip dont-vary

# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</Location>

Please post a comment if this was useful to you. Thanks

<script type="text/javascript">
 setTimeout(function(){
	your_function_name();
	}, 3000);
</script>