Category: "JavaScript"

Craching

Crache - Poorly configured server caching which prevents distribution of updated files such as CSS, images, and javascript. Crached pages display poorly until the browser cache is cleared.

*** This can be a very subtle problem, as developers often clear the browser cache by force of habit. They would not notice the problem. Site visitors that return to your site after updates may be presented with pages that do not display or function properly.

Key resources

(Apache)

http://httpd.apache.org/docs/2.2/caching.html
http://httpd.apache.org/docs/2.2/mod/mod_expires.html
http://httpd.apache.org/docs/2.2/mod/core.html#fileetag
http://httpd.apache.org/docs/2.2/mod/mod_cache.html

(Mozilla Firebug and YSlow)

https://addons.mozilla.org/en-US/firefox/addon/1843
https://addons.mozilla.org/en-US/firefox/addon/5369

javascript - Common applications

I consider javascript the language of last resort. The browser compatibility and security issues associated with it can make it the most complex part of a page. For this reason, I strive to deliver pages to the browser ready for display. This isn’t always possible.

javascript is a vital part of web development, and I use it alot, but carefully. The following list describes some of the most common uses of javascript:

  • Alert boxes (usually just debugging)
  • Confirm boxes - great for ‘Are you sure … ‘ processing
  • Detection of form inputs changed to ensure user doesn’t lose changes
  • Changing state of buttons and inputs to disabled/readonly and back again
  • Changing status displays, like colors or text on the page
  • Opening new windows (window.open), often used for help and … Easter Eggs :)
  • Timers (see post about Ladybug)
  • Google (and other) Map APIs - these are cool http://code.google.com/apis/maps/documentation/
  • Hiding content / menuing, using style.display="block/inline/none”
  • Client-side validation and assisting the user in correcting errors, must revalidate on on server-side
  • Page level validation - Ensuring that inputs are not only valid, but valid with respect to each other - for example if the status is ‘extended absence’, a return date must be specified. As mentioned about, server-side validation must also be performed.
  • RIAs (Rich Internet Applications) - Sophisticated interfaces. These are usually based off javascript libraries & kits like dojo. Fundamental javascript skills are vital to work with the toolkits.
  • Control of players - like Windows Media player and Flash
  • Browser-specific page adjustments that can’t be done on the server-side
  • Used to add things like Google analytics, support external data collection systems http://www.google.com/analytics/, also Google ads
  • Choosing different .CSS files - often used to assist visually impaired site visitors with text size or color choices
  • AJAX
  • Input interaction - For example, if one input is chosen, another may be presented or set to a specific value

Google Map - Flying Ladybug (US)

The code snippet below allows you to add a ladybug (or any other image), to fly over a map. The coordinate boundaries are for the United States (min_lon, min_lat, max_lon, max_lat), but you can change them to suit your needs.

After a random number of seconds, the ladybug lands on the map. When the site visitor moves the mouse over the ladybug, she will fly to a different, random point on the map. This continues forever. The site visitor will tire of this long before the ladybug does. :)

This piece of code was named cartesian/optimize.js and included into page with a script tag. This allows you to quickly remove the code prior to deployment.

Recommended application … none. This is strictly for fun.

var bugIcon = new GIcon();
        bugIcon.iconSize=new GSize(32,32)
        bugIcon.shadowSize=new GSize(0,0)
        bugIcon.iconAnchor=new GPoint(16,32)
        bugIcon.infoWindowAnchor=new GPoint(16,0)
var bugFlag = new GIcon(bugIcon,'cartesian/bug.gif',null,null)

min_lon=-70
min_lat=30
max_lon=-130
max_lat=50
lat_range=max_lat-min_lat
lon_range=max_lon-min_lon
lat=(Math.random()*lat_range)+min_lat
lon=(Math.random()*lon_range)+min_lon

var bug=0

function makeBug()
{
bug=new GMarker(new GLatLng(lat, lon),bugFlag)
map.addOverlay(bug)
GEvent.addListener(bug, "mouseover", flyBug)
}

function flyBug()
{
lat=(Math.random()*lat_range)+min_lat
lon=(Math.random()*lon_range)+min_lon
map.removeOverlay(bug)
delete bug
bug=new GMarker(new GLatLng(lat, lon),bugFlag)
map.addOverlay(bug)
GEvent.addListener(bug, "mouseover", flyBug)
}

window.setTimeout("makeBug()", 25000*Math.random());

Cool Hover Effect

The link above provides a nice hover effect, done with CSS and a tiny bit of javascript.

The approach is to use two divs. The outer or container div has a background image assigned through CSS. The inner div contains the text, and is hidden (display:none) on page load. The inner div uses a white background, with opacity to mute the background image and make it easier to view the image.

On hover, the inner div is changed to display:block.

Both divs have an id and class. The outer div id is required to assign the background image, the class is used to set float:left, and any other common attributes. The inner div id is used to identify it in the javascript, so the display attribute can be controlled, and the class is used to describe and position the text and opacity.

The code was written to run within a loop, hence the 1 on the ids.

dojo Form Demo

This is a very simple demonstration of a dojo form. Please use ‘View Source’ to view the code.

Supporting server-side PHP.

json.php

Returns the submitted input. Demonstrates a ’successful’ transaction.

<?php
header('Content-type: application/json');
echo <<<END
{"sText":"{$_REQUEST['sText']}"}
END;
?>

error.php

Returns a 503, service not available.

<?php
header("HTTP/1.0 503 Service Not Available");echo 'Server side error';
exit();
?>

timeout.php

Sleeps for 3 seconds to force a timeout.

<?php
sleep(3);
?>