Viswanath

As a web developer and designer, many times I face situations where web pages take more time to load, which is very undesirable not only to client but also to end-user. So, many times to make clients and end users happy I tried to do research on how to improve performance of my web page. I found YAHOO's Best Practices for speeding up your Web Site is a very nice place to where one can find best solutions to improve performance and speed up your Web site. Besides content of above article I found many more interesting and practical ways to speed up Web page, which I listed below for benefit of other developers.

1) Save Images in right format to reduce their file size.

If you have a lot of images, it’s essential to learn about the optimal format for each image. There are three common web image file formats: JPEG, GIF, and PNG. In general, you should use JPEG for realistic photos with smooth gradients and color tones. You should use GIF or PNG for images that have solid colors (such as charts and logos).

GIF and PNG are similar, but PNG typically produces a lower file size. Read Coding Horror’s weigh-in on using PNG’s over GIF’s.

• 1)If you have to place a background image, some large image or a screenshot then the suggested format is JPG/JPEG.
• 2)If you have to use small graphics like button images, header images, footer images, navigation bar images or clip arts, then the suggested format is PNG.
• 3)If an image is not required to be in high or true colors and 256 colors are enough, then GIF is preferred.

2) Use Css Sprites to reduce HTTP

A CSS Sprite is a combination of smaller images into one big image. To display the correct image, you adjust the background-position CSS attribute. Combining multiple images in this way reduces HTTP requests.

For example, on Digg (shown above), you can see individual icons for user interaction. To reduce server requests, Digg combined several icons in one big image and then used CSS to position them appropriately.

You can do this manually, but there’s a web-based tool called CSS Sprite Generator that gives you the option of uploading images to be combined into one CSS sprite, and then outputs the CSS code (the background-position attributes) to render the images.

3) Off-load site assets and features.

Unloading some of your site assets and features to third-party web services greatly reduces the work of your web server. The principle of offloading site assets and features is that you share the burden of serving page components with another server.

You can use Feedburner to handle your RSS feeds, Flickr to serve your images (be aware of the implications of offloading your images though), and the Google AJAX Libraries API to serve popular JavaScript frameworks/libraries like MooTools, jQuery, and Dojo. This allows our server to handle just the serving of HTML, CSS, and CSS image backgrounds. Not only are these solutions cost-effective, but they drastically reduce the response times of web pages.

4) Use Cuzillion to plan out an optimal web page

Cuzillion is a web-based application created by Steve Souders (front-end engineer for Google after leaving Yahoo! as Chief of Performance) that helps you experiment with different configurations of a web page’s structure in order to see what the optimal structure is. If you already have a web page design, you can use Cuzillion to simulate your web page’s structure and then tweak it to see if you can improve performance by moving things around.

View InsideRIA’s video interview of Steve Sounders discussing how Cuzillion works and the Help guide to get you started quickly.

5) Using Get method for AJAX based requests

use the GET method for Ajax based Requests, because if you use POST method then the request header would be sent first, followed by the data, which basically splits the request in two steps. A single-step request can be achieved with GET if a cookie is not too long and the URL is not larger than 2k.

• When using ASP.NET AJAX and the UpdatePanel control for partial page rendering, use the maximum number of update panels to update small chunks of page, but use them wisely. Don’t set the Update property to Always unless needed. Instead, set the update mode to Conditional, otherwise all the partial chunks would be sent together after each asynchronous postback.
• Ajax based requests can also be cached when using the GET method. If the URL is the same, then cached data can be used from the client, and a round trip to the server can be avoided.

6) Using Call backs instead of AJAX in some situations.

Ajax is a great solution for asynchronous communication between client (web browser) and HTTP servers, but one solution can't be applied to every problem. This means that Ajax is great mechanism for sending requests to the server without making a full page postback, but what if you need to send a request to the server and don’t even need partial rendering?best solution is Callback.

For example, if you need to check whether a user exists or not, or if a user has forgotten his/her password and you just need to send a request to the server to check if user name exist, there is no need for client-side render - just a server side operation.

Following is great links which explain callbacks: Please click Here.

And many more to come....

When displaying an e-mail address on a website you obviously want to obfuscate it to avoid it getting harvested by spammers. here is a way to acheive it using css.

Using CSS display:none

css:
p span.displaynone { display:none; }

HTML:
<p> viswanath.malepati@<span class="displaynone"> null </span> gmail.com </p>


See the below example where I used the above css: To understand what is happening, copy below emailID add paste it you any where and you will find it to be "viswanath.malepati@nullgmail.com" instead of "viswanath.malepati@gmail.com"

viswanath.malepati@nullgmail.com

Css opimization is very important to bring it into a shape so that it doesn't bloat or become over weighted. This optimization can be optimized by taking some precautions while coding CSS let us discuss some those steps in brief here...

1) Grouping Selectors

Many times while writing CSS, when we are not aware of overall picture of what we are going to do (or) what actually we want, REDUNDANCY of code arises. different selectors will have same css code. So, try to avoid it by grouping selectors of same styling.

Here is an example

Un-Optimized CSS Code

In this example, you will see the same properties within 3 different selectors.

Optimized CSS Code
You can optimize the above css by grouping selectors that have the same properties. Each selector should be separated with a comma, see below for an example:

h2, p, .block {
font-size: 1.5em;
padding: 10px 10px 10px 25px;
margin: 10px 0;
border: 1px solid #ddd;
background: #f0f0f0 url(crown.gif) no-repeat 5px 10px;
}

2) Using Shorthand CSS

The multiple style rules of this example:

h1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal;
}

may be rewritten with a single shorthand property:

h1 { font: bold 12pt/14pt Helvetica }

3) Reduce Number of Line Breaks

It is self explinatory, what you need to do is do not use enter after Semicolon(;). Gave a sample below.

h2 {
font-family:verdana;
padding:0;
margin:5px 0;
color:#333;
text-decoration:underline;
}

/* you can do it like this */
h2 {font-family:verdana;padding:0;margin:5px 0;color:#333;text-decoration:underline;}

4) Remove Last Semicolon

After you use the above hint, this is adds much more to it.... what you need to do is, do not use semicolon for last styling. A sample below.

h2 {font-family:verdana;color:#333;}

/* removed */
h2 {font-family:verdana;color:#333}

5) Use Simple Comments

comments should be simple instead of complex ones.... let it be in single line..!

/************************************/
/* Content Page */
/************************************/

vs

/* content page */

6) Use Simple Color Codes

Instead of using full color code like this: #FFFFFF, #113344, #AABBCC, #FF0000

We can do it like this: #FFF, #134, #ABC, #F00

However, we won't able to change anything like this: #C4C4C4, #1A2B3C

7) Remove "px"

Very general approach while mentioning heights, widths, font sizes and so on... is to use px after the vale like:
h2 {padding:0px; margin:0px;}

But use it like this:
/* removed */
h2 {padding:0; margin:0}

8) Remove unused classes

During the development, due to the design changes, some of the classes that we have created might not in use. Sometimes, we just have to skim through the CSS code, and identify them and clean up the code.

Dust-Me Selector is a Firefox extension that finds unused CSS selectors. It extracts all the selectors from all the stylesheets on the page you're viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they're encountered.

9) Use Classes in Parent Elements

You may specify element style in the parent control.

Instead of using

<p class="myClass">Home</>
<p class="myClass">About us</>
<p class="myClass">Contatc us</>

you may also do this

<div class="myClass">
   <p>Home</p>
   <p>About us</p>
   <p>Contatc us</p> 
<div>

10) Never attach style to HTML Elements

Always specify styles in CSS. Don't add styles directly to elements.

Clickjacking or, more formally, user interface redressing, is a class of security vulnerabilities similar to phishing scams. The technique uses web standards to trick unsuspecting victims into performing actions they were not intending to.

Clickjacking does not rely on bugs in any software. Instead, the technique is simply an abuse of the growing graphical capabilities that advanced web standards like CSS provide to web browsers. A good introduction to clickjacking is provided by Steve Gibson and Leo Laporte on their Security Now! podcast.

As far as I’m aware, only Firefox when combined with the NoScript add-on and Internet Explorer when combined with the GuardedID product provide any measure of protection against clickjacking attacks. To date no other browser can detect, alert, or otherwise help you to avoid or mitigate the risks of clickjacking attacks.

That said, there’s gotta be something users of other browsers can do. Well, it may not be as much as what NoScript can do, but there is something: use a user style sheet to help expose common clickjacking attack attempts.

clickjane.css helps detect clickjacking attacks for all browsers

Until browser manufacturers provide built-in protections against clickjacking attacks in their software (which is arguably the best place for such logic in the first place), css that we are using attempts to instantly reveal common clickjacking attempts. Since it’s a CSS user style sheet, this approach should be cross-browser compatible so that users of any browser including Safari, Opera, and other browsers that don’t have other means of protecting against clickjacking attacks can use it.

Before and after clickjane.css

Here are two example screenshots of a benign clickjacking demo.

1. Before:
   

   Screenshot of Safari before clickjane.css is used to expose clickjacking attempts.

2. After:
   

   Screenshot of Safari after clickjane.css is used to expose clickjacking attempts.

Good habits you should get into to mitigate clickjacking risks

Here is a list of behaviors that you should make habitual while you browse the web. Engaging in these behaviors can dramatically reduce the likelihood that you will be victimized by a clickjacking attack.

• Explicitly log out of any service you have logged in to when you are done. That log-out button is there for a reason: use it!
• Avoid providing your browser with “Auto-Complete” information for critical sites, such as your bank.
• Make sure you are running Flash Player 10 or greater, which mitigates this vulnerability for Adobe Flash content.

clickjane.css

//------------------------------------------------------------------------------------------//

/*
* This is a user style sheet to do what it can to
* reveal clickjacking attempts. This is in no way
* a silver bullet to protect against clickjacking.
*
* @file clickjane.css
* @license GPL3
*
* Copyright 2008 Meitar Moscovitz (email : meitar@maymay.net)
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
*/

/*
* Clickjacking very commonly uses a transparent iframe.
* I can't imagine a modern web site that would ever do
* this, so let's just never allow transparent iframes.
*/
iframe {
filter: alpha(opacity=100) !important; /* for IE */
opacity: 1 !important; /* for conforming browsers */
}

//------------------------------------------------------------------------------------------//

Inspired by: Meitar Moscovitz’s article on Clickjacing

Why and how?

CSS files for larger sites can become pretty large themselves. Gzipping or compressing these files has shown to provide a reduction in the neighborhood of 70-80% of the original file size, a fairly significant 'weight loss'.

The obvious method to accomplish compression (on an Apache server) is to use either the mod_gzip or mod_deflate , these modules are not available to everyone. If you have access to those modules,, otherwise... PHP provides an alternative compression method (two actually) and this is exactly what we'll leverage here - so one could think of this method as a 'poor man's mod_gzip'.

Outline

There are two different, equally effective methods that can be used.

The first method involves adding a little snippet of PHP to the top of your CSS file, and then renaming your CSS file with a 'php' extension. The second, cleaner and more elegant solution involves adding two little files to your CSS directory, one of them an .htaccess file, the other a PHP file that contains the same snippet of code used in the first method.

The snippet

A little bit of PHP magic is needed to make this happen. The following code is all it takes:

ob_start ("ob_gzhandler");
header("Content-type: text/css; charset: UTF-8");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 ;
$ExpStr = "Expires: " .
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);

This code does 4 things:

1. 1.It uses PHP's ob_gzhandler to send compressed data. This function will first check to see if the browser requesting the file will accept 'gzip,deflate' encoding; if not it sends the file uncompressed.
2. 
   
3. 2.It sends a header for the content type and character set for the file - in this case text/css and UTF-8.
4. 
   
5. 3.The next step sends a 'cache-control http header'. Here 'must-revalidate' ensures that any information that you pass along about the freshness of your document is obeyed.
6. 
   
7. 4.The final step is to send an 'Expires' header, to set an age on how long our cached file will last. Here we set it to expire in one hour.

Method One

This method, though not as clean as the second, is just as effective. All you need to do is place the PHP snippet from above into the top of your CSS document. Then, rename your CSS file with a 'php' extension, and then refer to that file when linking your css file, for example:

@import url(mycss.php);

Method Two

Method two is cleaner and more elegant, as it does not require the addition of any extra code to your CSS file, nor do you have to change the extension of the file. Clean and simple.

Two steps are necessary to implement this method.

Step one

First, you want to save the snippet provided above in a file called 'gzip-css.php' to the directory that contains your CSS files.

Step two

Here, simply add the following to an .htaccess file and save the file to the same directory as your CSS files:

AddHandler application/x-httpd-php .css
php_value auto_prepend_file gzip-css.php
php_flag zlib.output_compression On

This code does 3 things:

1. 1.The first line tells Apache to send all .css files to the PHP script handler.
2. 
   
3. 2.The second line prepends the code snippet to your CSS file.
4. 
   
5. 3.Optional: The third line tells PHP to use its built-in negotiated output compression automatically for every page it parses. If you use this method for compression, there is no need for having ob_start ("ob_gzhandler"); in the code snippet. So choose one or method or the other.

Inpired by : article on gzipping in 5411dotcom

Hi, lets see how to use AJAX in classic JavaScript and jQuery.

:::::::::::::::::::::::::::::: In Classic JavaScript ::::::::::::::::::::::::::::::

Step 1: Create Xml Http Object

var XmlHttpObj;

// create an instance of XMLHTTPRequest Object, varies with browser type, try for IE first then Mozilla
function CreateXmlHttpObj()
{
// try creating for IE (note: we don't know the user's browser type here, just attempting IE first.)
try
{
XmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
XmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(oc)
{
XmlHttpObj = null;
}
}
// if unable to create using IE specific code then try creating for Mozilla (FireFox)
if(!XmlHttpObj && typeof XMLHttpRequest != "undefined")
{
XmlHttpObj = new XMLHttpRequest();
}
}

Step 2: Function that uses above object to make a AJAX call.

function ajax()
{
var requestUrl;
requestUrl = "gettext.php";

CreateXmlHttpObj();

// verify XmlHttpObj variable was successfully initialized
if(XmlHttpObj)
{
// assign the StateChangeHandler function ( defined below in this file)
// to be called when the state of the XmlHttpObj changes
// receiving data back from the server is one such change

XmlHttpObj.onreadystatechange = StateLoadHandler;

// define the iteraction with the server -- true for as asynchronous.
XmlHttpObj.open("GET", requestUrl, true);

// send request to server, null arg when using "GET"
XmlHttpObj.send(null);
}
}

Step 3: Function that is called when response from above call arrives.

// this function called when state of XmlHttpObj changes
// we're interested in the state that indicates data has been
// received from the server
function StateLoadHandler()
{
// state ==4 indicates receiving response data from server is completed
if(XmlHttpObj.readyState == 4)
{
// To make sure valid response is received from the server, 200 means response received is OK
if(XmlHttpObj.status == 200)
{
// here write the code that uses the response and make changes on page
alert("XmlHttpObj in Text"+ XmlHttpObj.responseText);
}
else
{
alert("problem retrieving data from the server, status code: " + XmlHttpObj.status);
}
}
}

:::::::::::::::::::::::::::::: In jQuery ::::::::::::::::::::::::::::::

Just use below code in script tags.....

function ajax(){
{

$.ajax({
type: "POST",
url: "gettext.php",
success: function(msg)
{
//alert(msg);
}
});

}


Note:
1. All the above steps should be places between script tags...
2. Function in step two should be called from any HTML tag.
3. Download samples here

Copy rights 2010. All rights reserved.

When to Use?
This is used when we want to access the any http or https url and then receive the data it sends back in java. Following is a sample code on how it can be used.

How to Use?
Replace the url you want to use and also parameters like param1, param2 which i used in the code to send parameters in encoded format. and then run...


I used it when I got into a situation where I need to send request to third party sever for fetching GPS related details. And the server responds back with a XML file. So, I should be capable enough to receive it and then parse it to get what exactly I wanted. I found this method very useful...

.......................................................................................................................................

import java.io.BufferedReader;
import java.io.DataOutputStream;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.PrintWriter;
import java.net.URL;
import java.net.URLConnection;
import java.net.URLEncoder;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import java.io.*;
import javax.net.ssl.HttpsURLConnection;


public class http_https_connection extends HttpServlet {
private static final String CONTENT_TYPE = "text/html";

public AtomDemo() {
super();
}

public void destroy() {
super.destroy();
}

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

response.setContentType("text/html");
PrintWriter out=response.getWriter();
getPostData(request,response);
out.flush();
out.close();
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

doGet(request, response);
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.flush();
out.close();

}


private void getPostData(HttpServletRequest request,HttpServletResponse response){
String RevcodeData=null;
String content=null;
String address = null;
try{

response.setContentType("text/html");

URL url;
URLConnection urlConn;

url = new URL("http://any host name.com");

urlConn = url.openConnection();
urlConn.setDoInput(true);
urlConn.setDoOutput(true);
urlConn.setUseCaches(false);
urlConn.setRequestProperty("Content-Type",
"application/x-www-form-urlencoded");

// Send POST output.
cgiInput = new DataOutputStream(urlConn.getOutputStream());

content = "keyword=" + URLEncoder.encode("param1","UTF-8")
+ "&productName="+ URLEncoder.encode("param2","UTF-8");

cgiInput.writeBytes(content);
cgiInput.flush();
cgiInput.close();

BufferedReader cgiOutput =
new BufferedReader(new InputStreamReader(urlConn.getInputStream()));
PrintWriter servletOutput = response.getWriter();
String line = null;
while (null != (line = cgiOutput.readLine())){
servletOutput.println(line);
System.out.println(line);
}
cgiOutput.close();

}catch (Exception e) {
// TODO: handle exception
}

}


public void init() throws ServletException {
// Put your code here
}

}

• Use this to create indexes for you tables in database which helps to retreive data faster.
• Indexes act like book marks which we keep in a book to access any page instantly.
  

Command Syntax:

CREATE INDEX Name of index ON table name (column1,column2,....)

Sample that I used:

CREATE INDEX GPSLOCATION_INDX1 ON GPSLOCATIONS
(LASTUPDATE, PHONENUMBER)

you are getting below exception?

" unable to find valid certification path to requested target " or
" Trying to open an SSL connection to a host using JSSE / JAVA"

Then, Go through this post...

............................................................................................................................................

When this comes into picture?

when trying to open an SSL connection to a host using JSSE. What this usually means is that the server is using a test certificate (possibly generated using keytool) rather than a certificate from a well known commercial Certification Authority such as Verisign or GoDaddy. Web browsers display warning dialogs in this case, but since JSSE cannot assume an interactive user is present it just throws an exception by default.

............................................................................................................................................

Manual Process:

1) Open the https website in any browser (say, Internet Explorer 8), whose certificate is needed.
2) You will find a LOCK symbol beside address bar. Click it.
3) Select View Certificate options.
4) This pops out a certificate window with 3 tabs (General, Details, Certification path).
5) Goto Details tab and click Copy to file and then next, next, next.... select path and finish
6) Certificate .cer of that site you are accessing is exported to ur PC.
7) Goto command prompt and set its path to your . cer that we exported in above step.
8) Import your .cer file into keystore using following command.
keytool -import -alias somename -file our_cer_file_name.cer -keystore keystore_name

you have successfully imported certificate of https site that you are accessing.

9) Now you can check its presence in key store using following command:
keytool -list -keystore keystore_name

Note: listing command works when you are in the path where you keystor is present. Generally default keystore of java is available in you jdk/lib/security folder with name cacerts.
in my PC it is in C:\Program Files\Java\jdk1.6.0_16\jre\lib\security

............................................................................................................................................

Automatic Process:
( It can be done in two ways. Through GUI or Command Prompt.)

Steps for GUI way of importing certificate:

1) Open the https website in any browser (say, Internet Explorer 8), whose certificate is needed.
2) You will find a LOCK symbol beside address bar. Click it.
3) Select View Certificate options.
4) This pops out a certificate window with 3 tabs (General, Details, Certification path).
5) Goto General tab and click Install Certificate and then next then select Keystore and finish.
you have successfully imported certificate of https site that you are accessing.
............................................................................................................................................

Steps for Command Prompt way of importing certificate:

1) copy java code of InstallCert which I found it in Andreas Sterbenz`s Former
http://blogs.sun.com/andreas/entry/no_more_unable_to_find
2) Compile it java InstallCert ecc.fedora.redhat.com from command prompt and follow steps given in above link.

you have successfully imported certificate of https site that you are accessing.

Below is java class that does Base 64 encoding.

public class Base64 {

private static final String base64code = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+ "abcdefghijklmnopqrstuvwxyz" + "0123456789" + "+/";

private static final int splitLinesAt = 76;

public static byte[] zeroPad(int length, byte[] bytes) {
byte[] padded = new byte[length]; // initialized to zero by JVM
System.arraycopy(bytes, 0, padded, 0, bytes.length);
return padded;
}

public static String encode(String string) {

String encoded = "";
byte[] stringArray;
try {
stringArray = string.getBytes("UTF-8"); // use appropriate encoding string!
} catch (Exception ignored) {
stringArray = string.getBytes(); // use locale default rather than croak
}
// determine how many padding bytes to add to the output
int paddingCount = (3 - (stringArray.length % 3)) % 3;
// add any necessary padding to the input
stringArray = zeroPad(stringArray.length + paddingCount, stringArray);
// process 3 bytes at a time, churning out 4 output bytes
// worry about CRLF insertions later
for (int i = 0; i < stringArray.length; i += 3) {
int j = ((stringArray[i] & 0xff) << 16) +
((stringArray[i + 1] & 0xff) << 8) +
(stringArray[i + 2] & 0xff);
encoded = encoded + base64code.charAt((j >> 18) & 0x3f) +
base64code.charAt((j >> 12) & 0x3f) +
base64code.charAt((j >> 6) & 0x3f) +
base64code.charAt(j & 0x3f);
}
// replace encoded padding nulls with "="
return splitLines(encoded.substring(0, encoded.length() -
paddingCount) + "==".substring(0, paddingCount));

}
public static String splitLines(String string) {

String lines = "";
for (int i = 0; i < string.length(); i += splitLinesAt) {

lines += string.substring(i, Math.min(string.length(), i + splitLinesAt));
lines += "\r\n";

}
return lines;

}
/* public static void main(String[] args) {

for (int i = 0; i < args.length; i++) {

System.err.println("encoding \"" + args[i] + "\"");
System.out.println("007 is now "+encode("007"));

}

} */

}

................................
How to use it?
................................

1. 1) Copy above code.
2. 2) Paste it in a .java file with name "Base64" .
   
3. 3) Import above class in java file where you you would like to use Base64 encoding.
4. 4) use, String encoded_string = Base64.encode("any string");
5. 5) encoded_string contains your encoded string.
   

In this Zone, I post purely design oriented works...
When it comes to WHY such designs? kind of questions... Its purely based on client's taste. As, my clients wanted some unique and minimalistic designs, I tried them in this way based on WEB 2.0 principles...


Cravaka Info. Systems Website with WEB 2.0 standards

It has minimalistic UI and only horizontal accordion concept to navigate through whole site.This concept helped me to reduce page load time to a very great extent. See it bigger