Javascript Best Practices

I found two links that is really useful for javascript developers: http://www.javascripttoolbox.com/bestpractices/ and http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/e6ea1b73adfe8228.
These two links talk about best practices when developing javascript code.

1. Always Use 'var'
Variables in javascript either have global scope or function scope, and using the 'var' keyword is vital to keeping them straight. When declaring a variable for use either as a global variable or as a function-level variable, always prefix the declaration with the 'var' keyword.

2. Avoid 'with'

3. Use onclick In Anchors Instead Of javascript: Pseudo-Protocol

When you want to trigger javascript code from an anchor <A> tag, the onclick handler should be used rather than the javascript: pseudo-protocol. The javascript code that runs within the onclick handler must return true or false (or an expression than evalues to true or false) back to the tag itself - if it returns true, then the HREF of the anchor will be followed like a normal link. If it returns false, then the HREF will be ignored. This is why "return false;" is often included at the end of the code within an onclick handler.

Correct Syntax

<a href="javascript_required.html" onclick="doSomething(); return false;">go</a>

What Not To Do

<a href="javascript:doSomething()">link</a>
<a href="#" onClick="doSomething()">link</a>
<a href="#" onClick="javascript:doSomething();">link&;lt;/a>
<a href="#" onClick="javascript:doSomething(); return false;">link</a>

4. Avoid document.all
Only Use document.all As A Last Resort
There is never a reason to use document.all in javascript except as a fall-back case when other methods are not supported and very early IE support (<5.0) is required.

if (document.getElementById) {
 var obj = document.getElementById("myId");
}
else if (document.all) {
 var obj = document.all("myId");
}

5. Use Correct <script> Tags
The LANGUAGE attribute is deprecated in the <script> tag. The proper way to create a javascript code block is:

<script type="text/javascript">
// code here
</script>

Tricks to use multiple group by within a single query

Here, I have 3 tables: users, photos, and friends. Each user has many photos and friends. I face one problem when I want to join to these two tables to get the total number of photos and friends of a specific user with a single query. Here is my first query I wrote that returns incorrect information:

SELECT
   u.id, COUNT(p.user_id) as total_photo, COUNT(f.user_id) as total_friend
FROM
 friends as f RIGHT JOIN (
 photos as p RIGHT JOIN users as u ON p.user_id = u.id)
 ON f.user_id = u.id
WHERE
  u.id = 1070
GROUP BY
   p.user_id

The reason would cause from GROUP BY. My friend, sophy, advised me to join users with photos first then make it as derived table. Last join it with friends, it works. Here is my query, but it is seems too complicated:

SELECT
     t_photo.*, COUNT(f.user_id) as total_friend
FROM (
     SELECT u.id as user_id, COUNT(p.user_id) as total_photo
     FROM
         users as u LEFT JOIN photos as p ON u.id = p.user_id
     WHERE
  u.id = 1070
     GROUP BY
         p.user_id
) AS t_photo
LEFT JOIN friends as f ON f.user_id = t_photo.user_id
GROUP BY t_photo.user_id

Double Request in RoR

Notice that when you have <img src="" /> in your view, it will double request to the server. Should be careful about this. Don't ever the src attribute of the img tag to blank.

Dynamic Height Code

Here is a css code called clearfix:

.clearfix:after {
 content: ".";
 display: block;
 height: 0px;
 clear: both;
 visibility: hidden;
}
.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Use it when items in a container is longer than the outer container or is unpredictable. This css code will make the outer container have a fixed height. Then you could use Element.getDimensions() to get the computed css height of that container.

Browser Dimensions and Document Scroll Offsets

Determining browser dimensions

IE: document.body.clientWidth & document.body.clientHeight
Firefox: window.innerWidth & window.innerHeight

<script type="text/javascript">

document.write("Your browser\'s dimensions are: ")
if (window.innerWidth) //if browser supports window.innerWidth
document.write(window.innerWidth+" by "+window.innerHeight)
else if (document.all) //else if browser supports document.all (IE 4+)
document.write(document.body.clientWidth+" by "+document.body.clientHeight)

</script>

Determining document scroll offset coordinates

IE: document.body.scrollLeft & document.body.scrollTop
Firefox: window.pageXOffset & window.pageYOffset
There is a pitfall on IE when you uses a doctype at the top of the page. The way to accessing the DSOC properties in IE6 changes, namely, from document.body to document.documentElement.

var iebody=(document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.body

var dsocleft=document.all? iebody.scrollLeft : pageXOffset
var dsoctop=document.all? iebody.scrollTop : pageYOffset

http://www.javascriptkit.com/javatutors/static2.shtml

Fix PNG image in IE

Here are some links about this issue:
http://www.pcmag.com/article2/0,1759,1645331,00.asp
http://msdn2.microsoft.com/en-us/library/ms532969.aspx

Here is my function that I developed, it works when you use div for png image:

function fixPNG(element, src) {
 $(element).style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
}