html input button issue

Try the below script and click on fun2 button. Button inside label tag have some problem, that is the second button invokes the onclick of the first button and then the second button.



 



Now remove the label (begin and end) tag and try the same code. Everything would work fine.


 

Simple javascript optimizations

Let us see some of the most simple javascript scripts optimizations which can make big difference,

Rule: Consider using local variable instead of global variable.

Rule: Avoid using eval() or function constructor.

Rule: Pass function, not string to setTimeout() and setInterval(). Passing stirng is same as calling eval().

Rule: Avoid using with().

For-in loop vs for loop

Slow:

function forinloop()
{
    var count=10000;
    var arr=new Array();
    for(var i=0;i<count;i++)
    {
        arr[i]=i;
    }
    var value=0;
    for(var index in arr)
    {
        value+=arr[index];
    }
}

Faster:

function forloop()
{
    var count=10000;
    var arr=new Array();
    for(var i=0;i<count;i++)
    {
        arr[i]=i;
    }
    var value=0;
    count= arr.length;
    for(var index=0;index<count;index++)
    {
        value+=arr[index];
    }
}

Rule: Avoid using for-in loop, instead use for() loop.

String concatenation vs array join

Slow:

function stringcat()
{
    var count=10000;
    var str="";
    for(var i=0;i<count;i++)
    {
        str+="first,";
    }
}

Faster:

function arrayjoin()
{
    var count=10000;
    var arr=new Array();
    for(var i=0;i<count;i++)
    {
        arr[i]="first";
    }
    var str=arr.join("");
}

Rule: Avoid string concatenation and use array join. The performance difference in significant only in IE 7.

Inbuilt functions vs primitive operations

Slow:

function mathmin()
{
    var count=10000;    
    for(var i=0;i<count;i++)
    {
        var a=10;
        var b=5;
        var min = Math.min(a, b);
    }
}

Faster:

function primitiveop()
{
    var count=10000;    
    for(var i=0;i<count;i++)
    {
        var a=10;
        var b=5;
        var min = a < b ? a : b;
    }
}

Rule: Avoid function calls, try to use primitive operations. The performance difference in significant only in IE 7.

External function vs inline function

Slow:

function minfunction(a,b)
{
    var min = a < b ? a : b;
    return min;
}
function externalfunction()
{
    var count=10000;
    for(var i=0;i<count;i++)
    {
        var a=10;
        var b=5;
        var min=minfunction(a,b);
    }
}

Faster:

function inlinefunction()
{
    var count=10000;
    for(var i=0;i<count;i++)
    {
        var a=10;
        var b=5;
        var min = a < b ? a : b;
    }
}

Rule: Avoid external function calls, try to use inline functions. The performance difference in significant only in IE 7.

Comments in the script

Slow:

function withcomments()
{
    var count=50000;    
    for(var i=0;i<count;i++)
    {
        /* dummy comments */
        /* dummy comments */
        var a=10;
        /* dummy comments */
        /* dummy comments */
        var b=5;
        /* dummy comments */
        /* dummy comments */
        var min = a < b ? a : b;
        /* dummy comments */
    }
}

Faster:

function withoutcomments()
{
    var count=50000;
    for(var i=0;i<count;i++)
    {
        var a=10;
        var b=5;
        var min = a < b ? a : b;
    }
}

Rule: Avoid comments in performance critical script. The performance difference in significant only in IE 7.

Try catch in performance critical functions

Slow:

function withtrycatch()
{
    var count=50000;
    for(var i=0;i<count;i++)
    {
        try
        {
            var num=parseInt("10");
        }
        catch(e)
        {
            //handle exception
        }
        finally
        {

        }
    }
}

Faster:

function withouttrycatch()
{
    var count=50000;
    for(var i=0;i<count;i++)
    {
       var num=parseInt("10");
    }
}

Rule: Avoid using try catch inside performance critical function.

Search Engine Optimization (SEO)

Developing a website or web application which can be indexed by search engine is very critical and it is called searching engine optimization of the website or web application.

Before starting the optimization let us look at some of the basic rules to be followed

Rule: Focus on the originality and quality of the content of your website.

Rule: Remember your ultimate consumers are your users, not search engines.

Rule: Original content is ranked high in the search result page.

Rule: Increasing the traffic to your website is more important than the rank of the page in the search result.

Rule: Perform any kind of optimization only to improve the user experience.

Below are some of the critical optimization rules

Rule: Use brief, but descriptive title in "title" (<title>Search engine optimization<title/>) tag. Choose a title that effectively communicates the topic of the page's content.

Rule: Create unique title for each page of the website.

Rule: Google search engine does not use keywords "meta" tag (<meta name="keywords" content="search engine optimization, indexing, optimization, rules" />) for indexing.

Rule: Provide crisp and clear description of the webpage in the description "meta" tag (<meta name="description" content="Critical rules for search engine optimization." />). Also provide unique description for each page of the website.

Rule: Use | (pipe) or - (hyphen) as separator and not _ (underscore) in "title" tag and description "meta" tag.

Rule: Provide URLs with readable text (e.g. http://codingrules.blogspot.com/2010/06/unit-testing.html) or keywords to access a webpage and not auto generated text or numbers (e.g. http://codingrules.blogspot.com/2010/06/20006.html).

Rule: Regularly check for broken links and remove the same.

Rule: Provide naturally flowing hierarchy for navigation and text for navigation. Avoid drop down menu, images or animation for navigation.

Rule: Provide site map for the user.

Rule: Submit your website's site map (xml format) with Google's webmaster tools for search engine to index your website. Generate XML site map for your website from http://www.xml-sitemaps.com/. Also Google's webmaster tools help webmasters better control how Google interacts with their websites and get useful information from Google about their site.

Rule: Provide custom 404 page, which can guide user back to a working page.

Rule: Write easy to read text content. Avoid images for textual content.

Rule: Try to use words and phrases on the webpage which the user would be looking for.

Rule: Use descriptive anchor text for links.

Rule: Format links to make it easy for users to distinguish between regular text and the anchor text of links.

Rule: Links on your page maybe internal—pointing to other pages on your site—or external—leading to content on other sites. In either of these cases provide descriptive anchor text for better user experience. Anchor text is the clickable text that users will see as a result of a link,
and is placed within the anchor tag <a href="..."></a>.

Rule: Do not design you entire webpage (or website) as image. Provide some text on the webpage which can be indexed by search engines.

Rule: Use descriptive name for images and not like "img1.png" or "pic.png".

Rule: Provide "alt" and "title" attribute text in the "img" tag (<img alt="" title="" src="" />).

Rule: Use "heading" tags (h1 to h6) to emphasize important text.

Rule: If the company name or the website name is embedded as image, then make sure the same is made available as text in the webpage (e.g. "title" tag or description "meta" tag etc).

Rule: For webpages with photo gallery, apart from providing image "alt" and "title" text, let the users to provide comments, which will increase the textual content of the webpage. But make sure to moderate the user comments.

Rule: User comments section can improve the textual content of the webpage. Moderate the user comments to avoid spam content.

Rule: Provide "Related links" section of links with in your website to increase the traffic to your website.

Rule: Provide complete address of your company on the website either on one of the webpage or on all the pages.

Rule: Use the company/product/service information, where ever applicable, instead of using we or our.

Rule: Use Google places, Videos, Images, Facebook, Twitter, etc for promoting your website.

Watch the below videos for more on SEO.

parseint defect

When using parseInt() in javascript to convert or check "08" (e.g. parseInt("08")), then it would return 0. Instead use parseInt("08",10), i.e base 10 for converting or checking.

HTML GET and POST

Let us quickly try to understand GET and POST request in HTML.
GET is used to request data from server and POST is used to submit data to server.

Let us create a simple HTML page called request.html as show below

<html>
    <head>
        <title>
            Request
        </title>
    </head>
    <body>
        <form method="GET" action="response.php">
            Enter the GET METHOD text:
            <input type="text" name="getinput" value="get value"/>
            <br/>
            Enter the POST METHOD text:
            <input type="text" name="postinput" value="post value"/>
            <br/>
            <input type="submit" value="Submit"/>
        </form>
    </body>
</html>

Save request.html file under apache\htdocs folder in c:\ if you have one.

Now create another file called response.php as show below

<?php
echo "GET:".$_GET["getinput"]; //GET
echo "<br/>";
echo "POST:".$_POST["postinput"]; //POST
?>

Save response.php file under apache\htdocs folder in c:\ if you have one.

If you notice the request.html source code the form tag's method attribute is set to GET.
Now open the request.html file using any of your web browser (e.g. http://localhost/request.html).
After the file opens in your web browser, hit the submit button.
Now you can notice the address bar URL had changed to

http://localhost/response.php?getinput=get+value&postinput=post+value

The above URL is also called Query String.
And the response would be

GET:get value
POST:

The above result is because we used GET method to QUERY/POST data to the server.

Now change the method attribute (form tag) value to POST in the request.html file and save the file.

Now again open the request.html file using any of your web browser (e.g. http://localhost/request.html).
After the file opens in your web browser, hit the submit button.
Now you can notice the address bar URL had changed to

http://localhost/response.php

And the response would be

GET:
POST:post value

The above result is because we used POST method to POST data to the server.

Take some time and try to understand the request.html and response.php file source code.
Please read more on Hypertext Transfer Protocol and Query string.

JSON with special character text in PHP with MySQL

If you want to use JSON with special characters text to write to MySQL database or read from MySQL database using javascript and PHP, follow the below steps

To save/write JSON with special character text,
In Javascript
1) Do encodeURIComponent to the value to be submitted in javascript before POST

In PHP
1) Do stripslashes of the received POST data
2) Do mysql_real_escape_string before insert or update SQL statement

To pass back special character text via JSON from database,
In PHP
1) Do json_encode before creating JSON string (Note: Do not include " before and after the encoded json value.)

Online IDE

I was searching for an online cloud based IDE to store and edit my hobby projects on the net. Then i found CODERUN.

Few more IDEs,

1) https://bespin.mozillalabs.com/
2) http://kodingen.com/

Online bookmarks

I have been using two laptops for some time. I used to save URL bookmarks in both the laptops. Recently i started using my Nokia 5800 and an iPad for web browsing. I started storing bookmarks in my iPad as well. I found it very difficult to remember the bookmarks and respective devices.
To solve this problem i found a decent enouhg solutions at google bookmarks.
Now i am managing all my bookmarks at google bookmarks. Now i can access my bookmarks from any where and any device!

USB computer

Let me quickly tell you how to make a USB computer!

1) get one 8/16 GB USB drive.
2) download ubuntu from ubuntu desktop to your PC/laptop.
3) burn the ubuntu iso onto the USB drive as per the instruction given on ubuntu desktop using the universal USB Installer, but select the persistance option ( step 4 in the univsal USB installer ) of your desired memory size.
4) great! Now you have a ubuntu USB computer.
5) now shut down your PC/laptop with out removing the ubuntu USB driver.
6) start your PC/laptop press F12 and a change the boot sequence to boot OS from mounted ubuntu USB drive.
7) do your work with the ubuntu USB drive.
8) once your are done with your work, shut down your PC/laptop and remove the ubuntu USB driver.
9) now carry your ubuntu USB computer where ever you want and mount it on any PC/laptop and do your work!