Jquery Advanced Best Practices

1. Always Descend From an #id

This is the golden rule of the jQuery selectors. The fastest way to select an element in jQuery is by ID:

$('#content').hide();
or select multiple elements descending from an ID:
$('#content p').hide();

2.Use Tags Before Classes

The second fastest selector in jQuery is the Tag selector ($(‘head’)) because it maps to a native JavaScript method, getElementsByTagName(). The best way is to prefix a class with a tag name (and descend from an ID):

var receiveNewsletter = $('#nslForm input.on');
The class selector is among the slowest selectors in jQuery; in IE it loops through the entire DOM. Avoid using it whenever possible. Never prefix an ID with a tag name. For example, this is slow because it will loop through all <div> elements looking for the ‘content’ ID:

var content = $('div#content'); // VERY SLOW, AVOID THIS
Also, DON’T descend from multiple IDs:

var traffic_light = $('#content #traffic_light'); // VERY SLOW, AVOID THIS

Cache the parent object then run queries on it:

var header = $('#header');
var menu = header.find('.menu');
menu = $('.menu', header);

4. Optimize selectors for Sizzle’s ‘right to left’ model

var linkContacts = $('.contact-links div.side-wrapper');

instead of:

var linkContacts = $('a.contact-links .side-wrapper')

5. Use find() rather than context

var divs = $('.testdiv', '#pageBody'); 

var divs = $('#pageBody').find('.testdiv');

var divs = $('#pageBody .testdiv');

5. Use direct functions rather than their convenience counterparts

For better performance you can use direct functions like $.ajax() rather than $.get(), $.getJSON(), $.post() because the last ones are shortcuts that call the $.ajax() function

6.Use shorcuts 

Consider, below jQuery code lines.

$("#elm").css("display", "none"); //Line 1

$("#elm").css("display", ""); //Line 2

$("#elm").html(""); //Line 3

Above code lines are very common but its unfortunate because some faster and more readable shortcuts available, yet ignored. Find below jQuery code lines that does the exactly same thing but these are more readable and fast.

$("#elm").hide(); //Line 1

$("#elm").show(); //Line 2

$("#elm").empty(); //Line 3

There are many more examples which you can find in your code. For example, to add CSS Class to any element

$("#elm").prop("class", "cssClass");

where the better approach would be,
$("#elm").addClass("cssClass");

Another example is of setting height and width,

$("#elm").css("height", "100px"); //Line 1

$("#elm").css("width", "100px"); //Line 2

using in-built jQuery functions,

$("#elm").height(100); //Line 1

$("#elm").width(100); //Line 2

Another common situation is of toggling (show/hide) of element. For example, 

if($("#elm").is(":visible")) 
    $("#elm").css("display", "none");
else 
    $("#elm").css("display", "");
where the better approach is,
$("#elm").toggle();


to be continued . . . .:)

JQuery Best Practices - DOM Manipulation

  Usually we folllow like this ..

 // Set's an element's title attribute using it's current text
  $(".container input#elem").attr("title", $(".container input#elem").text());

  // Set's an element's text color to red
  $(".container input#elem").css("color", "red");

  // Makes the element fade out
  $(".container input#elem").fadeOut();

This is fine if ..

If you like repeating yourself
If you do not care about performance
If you don't care about best practices

  Best Approach.. 

  // Stores the live DOM element inside of a variable

  var elem = $("#elem");

  // Set's an element's title attribute using it's current text
  elem.attr("title", elem.text());

  // Set's an element's text color to red
  elem.css("color", "red");

  // Makes the element fade out
  elem.fadeOut();

cache your selectors in variables :)

Another Example 

 Mostly we prefer doing like this ..

// Dynamically building an unordered list from an array

  var localArr = ["Greg", "Peter", "Kyle", "Danny", "Mark"],
 
  list = $("ul.people");

  $.each(localArr, function(index, value) {

    list.append("<li id=" + index + ">" + value + "</li>");

  });

// Dynamically building an unordered list from an array
  var localArr = ["Greg", "Peter", "Kyle", "Danny", "Mark"],
  list = $("ul.people"),
  dynamicItems = "";

  $.each(localArr, function(index, value) {

    dynamicItems += "<li id=" + index + ">" + value + "</li>";

  });

  list.append(dynamicItems);


 Append only once instead of doing it every time ..:)

Jst try :) 

HTML 5 - The header element

Several new tags or elements have been added in HTML5. The header tag (<header>) is one of them. It is used as header of one or more sections or as a header of the document. HTML5 header tag should be used as a container of introductory contents like <h1> – <h6> tags, table of contents, search form, logo etc. with or without navigational links. More than header element can be used in a HTML5 document and it is generally placed at the beginning of the document or <article> tag.

Important points need to be remembered:

1. <header> and <head> tags are completely different.
2. A <header> tag can’t be placed within <footer> or <address> tag. Also header element can’t be placed within another header element.
3. HTML5 header element is supported by latest versions of all web browsers. Internet Explorer 8 or earlier versions of Internet Explorer do not support header element.

There are few HTML5 header tag examples given below:

Below the header tag is used as document header

1 <header>
2 <h1>This is the heading of the page</h1>
3 With some supplementary information
4 </header>
Below the header element is used as article header

1 <article>
2 <header>
3 <h1>Title of this article</h1>
4 By S Ghosh
5 </header>
6 Contents of the article
7 </article>

In summary <header> give us some great added semantic value in order to describe the head of a section.

An Inroduction to HTML 5

HTML5 is the latest version of Hyper Text Markup Language. The version of this language is 5 and it is still under development. The main aim of HTML5 is to increase the latest multimedia support and to decrease the dependency on client side scripting language like JavaScript and third party plugging like Adobe Flash Player etc. HTML5 can be effectively run on low-powered devices such as smart phones, tablets etc. Several new elements like <video>, <audio>, <canvas> etc. have been introduced in HTML5.

HTML5 is being developed in joint collaboration of the Web Hypertext Application Technology Working Group (WHATWG) and World Wide Web Consortium (W3C). As the development of HTML5 are still going on so it is not yet an official standard. No web browser supports all HTML5 elements yet, but popular web browsers like (Firefox, Chrome, Internet Explorer, Safari, Opera etc.) are adding more HTML5 tags support in their latest versions.

HTML5 and CSS3 have become popular tools that help in building a well-defined website. Each of them have many advanced features of their own but nowadays, they are used in combination with each other by expert web designers, to create refined web pages with semantic accuracy. Let us have a look at some advantages of HTML5 and CSS3.

• The first benefit you get is that the readable codes are semantically accurate. When a web design is not semantically accurate, it cannot attain a good rank. HTML5 and CSS3 help you to overcome this. The readable codes are very simple and easy to understand.
  
  
• The tutorials in the language help designers in developing a better web page. This paves way for the designers to make use of apt tools or elements in the language for a website.
  
  
• Many websites need some extra plug-ins to view the videos in the web page. In case of  HTML5 and CSS3, the audio and video effects are tagged and viewed without the support of third party plug-ins.
  
  
• Using separate codes for the purpose of updations are important for all types of websites. These codes do not give a proper output at times. In HTML5 and CSS3, as the scripting is not necessary
   for validation you can avoid the usage of confusing complex codes.
  
  
• Many browsers do not support all types of web pages but HTML5 and CSS3 help the designer to develop a web page that is compatible even with previous versions of your browsers.
• Some elements in HTML5 and CSS3 allow you to handle graphics and photos efficiently. These elements use some procedural methodologies to draw up the graphics directly into the browser.
  
  
• Flash applications are bound to cause problems. HTML5 combined with CSS3 provides you with many alternative features to support media. As CSS3 has enhanced itself with many  features, there are many added elements that bring in the wow factor, when it is used with HTML5.
  
  
• Creating Box Shadow requires numerous images and this process is made simple by using these new technologies. The text shadow is an element added to make the webpage more attractive. This can be carried out using the simple codes in CSS3. It makes the web layout very simple.
  
  
• One of the popular elements in web design is the use of rounded corners for buttons, layout elements, menus and much more. Using the ‘border-radius’ property, you can easily create rounded corners.
  
  
• Many websites have contact forms, that help the clients get in touch with the company. Some forms may not be supported by browsers. There are many types of forms designed with HTML5 and CSS3 which have a unique design and are compatible with all the common browsers.
  
  
• Using these technologies you can have full control over the colors in the templates, thereby eliminating the need to use separate codes for the color theme.

Yiinfinite-Scroll

This extension uses the infinite scroll jQuery plugin, from http://www.infinite-scroll.com/ to create an infinite scrolling pagination, like in twitter. This kind of pagination is also called Endless Scroll.


You want to See the code Lets go ....

Flipping of image with another using JavaScript

Below is very simple snippet code for flipping of two images using JavaScript. If possible you guys can make it generic snippet code. This code will help in mainly for showing / hiding of div’s, for example if he clicks on ‘Show Image’ it will automatically changes to ‘Hide Image’. Its a simple snippet code.


Below is the div, in div – Initially I am showing the hide image, when user clicks on this image, the image as well as the title of the img will be swapped with show image and the title will be ‘Maximize’… and Vice-Versa.

The below function should be placed in <script></script>.

//This Function is for Flipping of 'Show Image' to 'Hide Image' and Vice-Versa
function flip(imageID) {
var img = document.getElementById(imageID);
if (img.src.indexOf('images/hide.gif') > -1) {
img.src = 'images/show.gif';
img.title='Maximize';
} else {
img.src = 'images/hide.gif'
img.title='Minimize';
}
}

 below div should be placed in <body>.

<div><a href="#" onClick="flip('hide'); return false;" title="Minimize" style="padding:0px"><img src="images/hide.gif" id="hide" border="0"></a></div>

Javascript to strip special characters from a string

 <script language="JavaScript"><!--
var temp = new String('This is a te!!!!st st>ring... So??? What...');
document.write(temp + '<br>');
temp =  temp.replace(/[^a-zA-Z 0-9]+/g,'');
document.write(temp + '<br>');
//--></script>

Remove duplicates from an array using JavaScript

Here is a simple and easily understandable snippet code, to remove duplicates from an existing array using JavaScript. You guys! might have come across in some situation where in which the array has got some duplicates and want to remove those duplicates to show up unique ones. Below simple JavaScript code does the same, initially the respective array has got some value like below:

var sampleArr=new Array(1,1,1,1,1,2,2,3,3,3,4,4,4);

javascript code:

var sampleArr=new Array(1,1,1,1,1,2,2,3,3,3,4,4,4); //Declare array
document.write(uniqueArr(sampleArr)); //Print the unique value
 
//Adds new uniqueArr values to temp array
function uniqueArr(a) {
 temp = new Array();
 for(i=0;i<a.length;i++){
  if(!contains(temp, a[i])){
   temp.length+=1;
   temp[temp.length-1]=a[i];
  }
 }
 return temp;
}
 
//Will check for the Uniqueness
function contains(a, e) {
 for(j=0;j<a.length;j++)if(a[j]==e)return true;
 return false;
}

PHP Programming Language

PHP ( Hypertext Preprocessor ) was released in the 1995. PHP was originally known as Personal Home Page written as a set of Common Gateway Interface (CGI) in C Language byDanish/Greenlandic programmer Rasmus Lerdorf. Lerdorf initially created these Personal Home Page Tools to replace a small set of Perl scripts he had been using to maintain his personal homepage and was originally designed to replace a set of Perl scripts to maintain his Personal Home Pages (also known as PHP) in 1994. He combined these with his Form Interpreter to create PHP/FI, which had more functionality. PHP/FI included a larger implementation for the C programming language and could communicate with databases, enabling the building of simple, dynamic web applications. Lerdorf released PHP publicly on June 8, 1995 to accelerate bug location and improve the code.This release was named PHP version 2 and already had the basic functionality that programming php has today.

Mainly , PHP was designed to create dynamic and more interactive web pages. It is a server-side scripting language embed with HTML. Now a days , it is the most widely-used open-source and general-purpose scripting language. PHP code in a script can interect with databases, create images, read and write files and talk to remote servers. So the output from PHP code is combined with HTML in script and the result is sent to the user as a web page.

All major operating systems including Linux, Microsoft Windows, Mac OS X, and RISC OS , you can use PHP in all these operating systems. As you know there are procedural programming or object oriented programming. PHP uses either procedural programming or object oriented programming. Also you can mix them and use both ( procedural programming or object oriented programming ). As i mention above, PHP is used mainly in server-side scripting,command line interface and writing desktop applications. PHP also supports ODBC, theOpen Database Connection standard which allows you to connect to other databasessupporting this world standard. For database , phpMyAdmin is most widely used for PHP developement. Server-side scripting is the most traditional one for PHP development. In order to use PHP for server-side scripting you need

1. PHP parser

2. Web server

3. Web browser.

The PHP codes entered with the parser on a web server will be translated into a PHP page that can be viewed on your web browser. Main reason behind popularity of PHP language is , it can be embedded directly into HTML coding. It has more benefits such as the following

1. It can be used on all major operating systems.
2. It can be supported by most of the web servers.
3. The latest version of PHP development is a very stable and grown-up language used for web programming like Java and C#.

Special Thanks To Bilu

Special Thanks to bilu, the man behind the beautiful logo...and banner

PHP - Getting notice Undefined index

 The PHP notice errors are frustrating and you are 
tired of seeing them when you are working on your scripts.

 They are showed at the beggining of your pages and may 

reveal confidential information to the visitor like the path 

to the file or the php file name in some cases 

// Turn off all error reporting
error_reporting(0);

// Report simple running errors
error_reporting(E_ERROR | E_WARNING | E_PARSE);

// Reporting E_NOTICE can be good too (to report uninitialized
// variables or catch variable name misspellings ...)
error_reporting(E_ERROR | E_WARNING | E_PARSE | E_NOTICE);

// Report all errors except E_NOTICE
// This is the default value set in php.ini
error_reporting(E_ALL ^ E_NOTICE);

// Report all PHP errors (bitwise 63 may be used in PHP 3)
error_reporting(E_ALL);

// Same as error_reporting(E_ALL);
ini_set('error_reporting', E_ALL);