Based on the feedback from my article last Friday I thought it would be useful to create a CSS cheat-sheet. For those of you that are not familiar with shorthand you can print this out and keep it handy. Try and use these principles whenever you code and before too long shorthand will become second nature.
JavaScript is an extremely powerful and flexible scripting language. Unfortunately flexible, for many people, means fallible. I am going to highlight 5 best practices that you can use in any JavaScript project. These are very broad, I will follow up soon with more specific best practices.
First and foremost, keep your code simple, clean and well documented. This is by no means unique to JavaScript but many people seem to think it is the exception to the rule. Your code should naturally comment itself but it is also important to at least introduce every function. I recommend two versions, a fully documented and formatted version and then a compressed version that you use in production. There are a number of free online utilities that can strip out comments and pack your script. There is no need to push out the extra size required for the documentation and formatting.
Second, keep your JavaScript in an external file. The only exception to this rule is if you have some very lightweight script specific to a single page or are setting up variables that cannot be done in the external JS. An external file results in greater scalability, maintainability and degradability. The correct way to reference an external JS file is as follows:
<script type="text/javascript" src="script.js"></script>
Third, separate your JavaScript from the presentation layer. We have all heard of unobtrusive JavaScript but we still see inline script all the time. Instead of cluttering your font-end code with dozens of event handlers add them dynamically. There are exceptions to this rule so please use common sense and separate the layers when it makes sense. An example of adding an onclick event handler from JavaScript:
var div = document.getElementById('div');
div.onclick = new Function("processClick(this)");
Fourth, properly define and scope variables. Many of the scripts I download hoping to use in a project I immediately throw out. The reason being that the programmer did not take the time to properly define and scope variables. Always reference the first instance of a variable by using var. Otherwise the only way someone can know if that is the first reference to that variable is by starting at the top and reading all the way down. It is also important to scope variables correctly. Don’t scope a variable on the global level unless you need it there. I also recommend differentiation of global and local variables though some kind of visual identifier such is all caps on global variables or some easily identifiable character.
Fifth, don’t assume JavaScript support in the first place. Depending on your audience you may choose to disregard this suggestion but for mainstream websites I highly suggest coding with the minority in mind (an estimated 5-10% of web users do not have JavaScript enabled) and degrade your scripts gracefully. JavaScript should be considered as an added feature and not a dependency. An examples of this would be links, the most fundamental element of a web page.
<a href="javascript:processClick()">link</a>
<a href="#" onclick="javascript:processClick()">link</a>
If the user clicks the either of the links above with JavaScript disabled nothing will happen. However, with the code below they could still navigate.
<a href="link.html" onclick="processClick(); return false;">link</a>
You will notice in the lower right corner of this entry that there is a reference to the number of Diggs for this post. If you click the counter you are taken to Digg. Digg does offer a few easily integrable scripts at http://digg.com/tools/integrate but does not document how to create a custom counter. To accomplish this you need to use the Digg API which is very easy to work with. There is no registration and your access key is simply the source domain. This example is customized for WordPress but can easily be modified to work in any PHP based project.
Here is the PHP function to grab the number of Diggs from the Digg API.
function getDiggs($url) {
$sturl = 'http://services.digg.com/stories?link='.$url.'&appkey=
http%3A%2F%2Fwww.yourdomain.com&count=1';
$ch = curl_init($sturl);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,true);
curl_setopt($ch,CURLOPT_USERAGENT,"www.yourdomain.com");
curl_setopt($ch,CURLOPT_TIMEOUT,10);
$res = curl_exec($ch);
$resinfo = curl_getinfo($ch);
curl_close($ch);
if($resinfo['http_code'] === 200) {
preg_match(’/diggs\=”([0-9]+)”/si’, $res, $r);
$diggs = number_format(($r[1]) ? str_replace(’,', ”, $r[1]) : ‘0′);
if($diggs == 1) {
$response = $diggs .’ Digg’;
} else {
$response = $diggs .’ Diggs’;
}
} else {
$response = ‘Error’;
}
echo $response;
}
If you plan on displaying your Diggs on multiple pages create a folder in your theme directory and include the file with the following…
<?php include(TEMPLATEPATH .'/folder/script.php'); ?>
Setup the variables to build the Digg link and the URL to pass to the PHP function. This will use the current post URL in a loop or on a standalone page so there is nothing to hardcode.
$diggurl = urlencode(get_permalink($post->ID));
$diggtitle = urlencode(get_the_title($post->post_parent));
$digglink = 'http://digg.com/submit?url='.$diggurl.'&title='.$diggtitle;
Finally add the link, in my case I have positioned the reference in the bottom right of the post and added a bubble comment background to the link with CSS. In the href I am passing the encoded link and the encoded title to Digg. You can also pass through the media type, description, and topic if you want. Click here for details.
<a href="<?php echo $digglink ?>" class="diggticker"><?php getDiggs($diggurl); ?></a>
The updated accordion script is available here.
The JavaScript accordion above is only 1.5kb. If you have a small project that could use an accordion and don’t want to include an entire JavaScript framework to do the job then give this script a try.
You will need to call the following function in your body onload where the first parameter is the div id of the accordion parent and the second tells the script which section to expand onload.
slider.init('slider',1)
There is no other JavaScript that needs to be added to the HTML. The onload function parses the children of the parent accordion div and adds the appropriate mouse events to the headings. This has been tested in Firefox 2/3, IE 6/7/8, Opera and Safari.
Click here to download the source code.
Updated 5/27/2008 - Slightly minified the code cutting off 1kb and added the script into a global namespace.
Updated 6/19/2008 - Shaved of a few bytes and added change the “c” variable to identify which section to be expanded onload.
Using a combination of a couple APIs, PHP and Curl you can easily incorporate maps into your website that fairly accurately identify a visitor’s location. Knowing a users location and further being able to map the location has many practical applications. I am going to breakdown the core elements of creating a map just like the one above. I plan on following up soon with more advanced Google Maps examples.
You will need the users’ address to begin. If you run a site that collects that information during registration it can be used for mapping otherwise you can get the users city, state and country by grabbing their IP address and then calling one of the available geocoding APIs available.
Grab the users IP address.
$ip = $_SERVER['REMOTE_ADDR'];
Get the users City, State and Country.
$sturl = 'http://api.hostip.info/get_html.php?ip='.$ip;
$ch = curl_init($sturl);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,true);
curl_setopt($ch,CURLOPT_TIMEOUT,10);
$res = curl_exec($ch);
$resinfo = curl_getinfo($ch);
curl_close($ch);
preg_match('/City: ([a-zA-Z].+[a-zA-Z]+)/’, $res, $r);
preg_match(’/ \(([A-Z][A-Z])/’, $res, $s);
$city = $r[1];
$country = $s[1];
The above API at http://hostip.info/ can also return the latitude and longitude which is needed to map the location however for the purposes of this demo I am using the Google geo locator API. You will also need a Google Maps API key which can be requested from http://code.google.com/apis/maps/index.html.
Call the Google API to get the latitude and longitude.
$key = "Your Google Maps API Key";
$address = urlencode($city.", ".$country);
$sturl = 'http://maps.google.com/maps/geo?q=' . $address . '&output=csv&key=' . $key;
$ch = curl_init($sturl);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,true);
curl_setopt($ch,CURLOPT_TIMEOUT,10);
$res = curl_exec($ch);
$resinfo = curl_getinfo($ch);
curl_close($ch);
$res = explode(",",$res);
$latitude = $res[2];
$longitude = $res[3];
Insert an image tag with the following SRC referencing Google’s API.
http://maps.google.com/staticmap?key=' . $key . '&size=506x280&markers=' . $latitude . ',' . $longitude . '&zoom=3
This is just the tip of the iceberg. For more details on the API visit the Google documentation at http://code.google.com/apis/maps/documentation/.
Click here to download the PHP source code.
