Not delaying the execution of scripts
<head> section of your HTML document, the script will potentially start before any
There are several possible ways to solve this problem. The first solution is the simplest, but also the one most prone to error: simply place any scripts at the very end of the document, just before the closing
</body tag. This guarentees that it will come after any
tokenOne is a different variable from
TokenOne. Scripts often break because you are trying to test or set the value of a variable that does not exist.
Confusing Concatenation & Addition
+ symbol to achieve their ends. It’s important to remember what you are joining together, how and why, and anticipate the result, in order to avoid errors:
alert(10 + 12); // result is 22 alert(10+"2"); // result is “102” – note that this is a string, not a numeral alert("There is no " + "cake"); token = 2; alert(10 + token) // result is 12 token = "Two"; alert (10 + token); // result is “10Two”
Confusing single and double quotes
alert('Two'); // result is Two alert("Two's"); // result is Two's alert ('Two's'); // result is an error
Not providing a fallback for an externally sourced framework
While Google’s servers are unlikely to fail, it is still possible. Sourcing your JQuery from Google has many advantages, but you should always provide a fallback. My preferred solution is the one popularized by Paul Irish’s HTML5 Boilerpate:
<script src=//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js> </script> <script>window.jQuery || document.write('<script src=/assets/scripts/jquery.min.js><\/script>') </script>
This provides a fallback option if Google’s servers are unresponsive; obviously, you must have a copy of the script in the assigned location (a copy of JQuery in /assets/scripts, in the case shown above).
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.