rajesh gollapudi's blog http://rajeshg.com Most recent posts at rajesh gollapudi's blog posterous.com Thu, 29 Jul 2010 05:54:00 -0700 Internet download and upload speeds in India http://rajeshg.com/internet-download-and-upload-speeds-in-india http://rajeshg.com/internet-download-and-upload-speeds-in-india
via netindex.com

Net Index by Ookla has recently ranked the Internet speeds across the globe. This index is created based on millions of recent test results from Speedtest.net. It compares and ranks user download and upload speeds around the globe.

According to this India, the average internet download speed in India is 1.26 Mbps and average upload speed is 0.64 Mbps. This places us at #126 and #101 ranks respectively for download and upload speeds. With the amount IT services that Indian IT companies provide, definitely we need a lot of improvement in this.

The same index ranks US at #27 and South Korea at #1 for both download and upload speeds.

Permalink | Leave a comment  »

]]> http://files.posterous.com/user_profile_pics/681852/41674_706545079_2156_q.jpg http://posterous.com/people/36jwzEOMAcIF Rajesh Gollapudi rajesh Rajesh Gollapudi Tue, 27 Apr 2010 09:57:11 -0700 The State of Web Development 2010 – Web Directions http://rajeshg.com/the-state-of-web-development-2010-web-directi-5 http://rajeshg.com/the-state-of-web-development-2010-web-directi-5

Tuesday, April 27th, 2010

The State of Web Development 2010 – Web Directions

Category: Survey

What are the current Web Directions? John Allsopp is back, with results from his latest State of Web Development 2010 survey.

There is a ton of content here, and the data is made available. For the full report you can grab the PDF.

This article summarizes the preferred environment of web developers and what's hot.

- Firefox is the browser of choice
- Preferred mobile browser is Safari
- Mac OS X is the preferred OS
- Most used js framework is jQuery
- Most developers test on IE (6-8), Safari 4/Chrome and Firefox >3.5

Permalink | Leave a comment  »

]]> http://files.posterous.com/user_profile_pics/681852/41674_706545079_2156_q.jpg http://posterous.com/people/36jwzEOMAcIF Rajesh Gollapudi rajesh Rajesh Gollapudi Fri, 12 Feb 2010 15:03:00 -0800 How to set child element opacity different from parent element http://rajeshg.com/how-to-set-child-element-opacity-different-fr http://rajeshg.com/how-to-set-child-element-opacity-different-fr

When using css (opacity) to set the transparency of an element, the child elements inherit the transparency of the parent element.

For example, if you set 50% transparency to the body element, the whole pages becomes 50% transparent. Even if you explicitly set the opacity to 1 for the child elements, the transparency is still there.

This is particularly not desired if your child elements has text.  As you can see from the screenshots, the text looks clear in Screenshot 1.  In Screenshot 2, the text dissolves into the background when opacity is set to 0.5. I used opacity 0.5 just to demonstrate this. The text looks better with opacity 0.9, but this is not the ideal solution.

Solution
To prevent this, the only way is to use a  png with the desired alpha transparency.
Note:
Transparent pngs are not supported by IE 6. So make sure that you use the fix mentioned at TwinHelix


 

Permalink | Leave a comment  »

]]> http://files.posterous.com/user_profile_pics/681852/41674_706545079_2156_q.jpg http://posterous.com/people/36jwzEOMAcIF Rajesh Gollapudi rajesh Rajesh Gollapudi Wed, 28 Oct 2009 19:59:00 -0700 Centering an element on a page http://rajeshg.com/centering-an-element-on-a-page http://rajeshg.com/centering-an-element-on-a-page

Here is how you can position an element at the center of a web page (both horizontally and vertically).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<html>
<head>
<style type="text/css">
div#centered {
    position: absolute;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type='text/javascript'>
$(document).ready(function(){
var height = $('#centered').height();
var width = $('#centered').width();
var docheight = $(document).height();
var docwidth = $(document).width();
var top = (docheight - height)/2;
var left = (docwidth - width)/2;

$('#centered').css('top', top+'px');
$('#centered').css('left', left+'px');
});
</script>
</head>
<body>
akjdakfjdkf
<div id="centered">
       <p>Paragraph 1 text.</p>
       <p>Paragraph 2 text.</p>
</div>
kadjkfjadkf
kajfkadjf
<div>
akjfkdajfk
</div>
<p>ajdfkdjaf kajfkdajf .jkjakdjfakdjf. 
kadjfkadjfka.
kdjfkajdfkdajf kajdfkadjf kjfkajdfka. </p>
</body>
</html>

The content of the div with the id 'centered', will be positioned at the center of the web page. The 'absolute' positioning ensures that it is positioned at the center w.r.t the webpage or document.Instead if you want to position an element relative to an enclosing div, changing docheight and docwidth variables accordingly ensures that your element is centered.

This is often useful in situations where you want to display error messages like 404-page not found and for showing 'page redirect' messages.

Permalink | Leave a comment  »

]]> http://files.posterous.com/user_profile_pics/681852/41674_706545079_2156_q.jpg http://posterous.com/people/36jwzEOMAcIF Rajesh Gollapudi rajesh Rajesh Gollapudi Fri, 23 Oct 2009 16:26:00 -0700 How to make a footer stick to the bottom of a webpage http://rajeshg.com/how-to-make-a-footer-stick-to-the-bottom-of-a http://rajeshg.com/how-to-make-a-footer-stick-to-the-bottom-of-a

Often you face a situation where you don't have enough content on the webpage to make use of the space available in the browser window. A good example, for this is the "404 - File not found" page on your site.

I use the following technique to get rid of the situation where the footer doesn't stick to the bottom of the page. The idea is simple - Measure the height of the content and compare it with your window height. If the content height is less than the window height, then fill the difference with an empty space or to say exactly, add a div with the height set to the difference.

The code below uses jquery javascript library and should work pretty much in every browser. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

/**
 * @author rajesh gollapudi
 */
$(document).ready(function(){
    placeFooter();
    $(function(){
        $(window).resize(function(){
        //    console.log('You resized the window!');
			if ($('#footer-spacer').length) {
				$('#footer-spacer').remove();
			}
            placeFooter();
        });
    });
});
function placeFooter(){
    // console.log("window height: " + $(window).height());
    var bottom = $('#footer').position().top + $('#footer').height();
    // console.log("footer position: " + bottom);
    if (bottom < $(window).height()) {

        var diff = $(window).height() - bottom;
        // We need to add bottom padding to this difference. This is to push the footer up a little bit, if the footer has any padding defined. 
        var padding = parseInt($('#footer').css('padding-bottom')) + parseInt($('#footer').css('padding-top'));
        diff = diff - padding;


			$('#footer').before("<div id='footer-spacer' style='height:" + diff + "px;'></div>");
	}
}

Enjoy !!

Update:

I have updated the code above, to make sure that the footer sticks to the bottom on window resize events. Now when you are using FireBug, to should notice the footer moving up and down and window resize events. This is especially useful if you have a large monitor.

Permalink | Leave a comment  »

]]> http://files.posterous.com/user_profile_pics/681852/41674_706545079_2156_q.jpg http://posterous.com/people/36jwzEOMAcIF Rajesh Gollapudi rajesh Rajesh Gollapudi Thu, 22 Oct 2009 14:16:00 -0700 Tips to Speedup your website easily http://rajeshg.com/tips-to-speedup-your-website-easily http://rajeshg.com/tips-to-speedup-your-website-easily

If you use YSlow Firefox toolbar,  by now you should have a decent idea about why your website is slow or what you can do to get it up to speed. Here is a quick list of how to solve some of the problem that YSlow points out and others that I find useful.
1. Add Expires Headers
You need to set the expires headers in your .htaccess file in your web root or htdocs directory. For the beginners here is what I would suggest you to use:

1
2
3
4
5
6

# add expires headers
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 month"
</IfModule>

2. Disable FileETag is you don't use it
ETag (entity tag) is an HTTP response header returned by an HTTP/1.1 compliant web server used to determine change in content at a given URL. ETags were added to provide a mechanism for validating entities that is more flexible than the last-modified date but If you’re not taking advantage of the flexible validation model that ETags provide, it’s better to just remove the ETag altogether. Removing the ETag reduces the size of the HTTP headers in the response and subsequent requests thus improving site performance.
Add the following to your .htaccess file to remove ETags:

1
2

# disable etags
FileETag None

3. Compress components with GZip
Compressing the content (html, js and css), is an important step in optimizing the performance of your site. Depending on the amount of content you have on your site, at a minimum it should give at least 10% improvement in speed.
The code below needs to be added to the .htaccess file in your docroot.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<IfModule mod_deflate.c>
  # Compress all content, manually excluding specified file types
  # place filter 'DEFLATE' on all outgoing content
  SetOutputFilter DEFLATE
  # exclude uncompressible content via file type
  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|rar|zip)$ no-gzip

  # properly handle requests coming from behind proxies
  <IfModule mod_headers.c>
      Header append Vary User-Agent env=!dont-vary
  </IfModule>
  # Properly handle old browsers that do not support compression
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>

Permalink | Leave a comment  »

]]> http://files.posterous.com/user_profile_pics/681852/41674_706545079_2156_q.jpg http://posterous.com/people/36jwzEOMAcIF Rajesh Gollapudi rajesh Rajesh Gollapudi