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.

There have been a number of occasions when looking over other developers CSS I notice bits of code similar to the following…

#div {
margin-top: 20px;
margin-bottom: 10px;
margin-right: 5px;
margin-left: 25px;
padding-top: 10px;
padding-bottom: 15px;
border-width: 1px;
border-style: solid;
border-color: #666666;
font-family: Verdana, Helvetica, Arial;
font-size: 14px;
font-weight: bold;
}

The above code is littered with properties that could easily be combined for more legible code and decreased file size. Some properties might even be removed altogether since they default to the desired value. Below you will find before and after examples of some of the most useful CSS shorthand properties. As a general rule any browser later than IE5 should support all of these.

Margin & Padding

#div {
margin-top: 0;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 15px;
(auto, 0, px, pt, em or % )
}

#div {
margin:0 5px 10px 15px;
(top right bottom left)
}

and

#div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 0;
margin-left: 20px;
}

#div {
margin:10px 20px 0;
(top right/left bottom)
}

and

#div {
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

#div {
margin:0 auto;
(top/bottom left/right)
}

and

#div {
margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 50px;
}

#div {
margin:50px;
(top/right/bottom/left)
}

Border

#div {
border-width: 5px;
(thin, thick, medium or set value) (default = medium)
border-style: dotted;
(solid, dashed, dotted, double, etc) (default = none)
border-color: blue;
(named, hex, rgb or 0-255) (default = value of elements/elements parent color property)
}

#div {
border:5px dotted blue;
}

and

#div {
border-right-width: 2px;
border-right-style: solid;
border-right-color: #666666;
}

#div {
border-right:2px solid #666;
}

and

#div {
border-top-width: 3px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 2px;
}

#div {
border-width:3px 2px;
}

Background

#div {
background-color: #CCCCCC;
(named, hex, rgb or 0-255) (default = transparent)
background-image: url(images/bg.gif);
(url or none) (default = none)
background-repeat: no-repeat;
(repeat, repeat-x, repeat-y or no-repeat) (default = repeat)
background-attachment: scroll;
(fixed or scroll) (default = scroll)
background-position: top left;
(top, right, left, bottom or center) (default = 0% 0%)
}

#div {
background:#CCC url(images/bg.gif) no-repeat 0 0;
}

Font

#div {
font-family: Verdana, Arial, Helvetica;
(Verdana, Arial, “Times New Roman”, etc) (default = varies by browser)
font-size: 12px;
(xx-small, medium, x-large, set value, etc) (default = medium)
font-weight: bold;
(normal, bold, bolder, lighter, 100-900 or inherit) (default = normal)
font-style: italic;
(normal, italic or oblique) (default = normal)
font-variant: normal;
(normal or small-caps) (default = normal)
line-height: 1.5;
(normal, px, pt, em, num or %) (default = normal)
}

#div {
font:italic bold 12px/1.5 Verdana, Arial, Helvetica;
}

List

#div {
list-style-image: url(images/bullet.gif);
(url or none) (default = none)
list-style-position: inside;
(inside or outside) (default = outside)
list-style-type: square;
(circle, disc, square, etc) (default = disc)
}

#div {
list-style:square inside url(images/bullet.gif);
}

Colors

Black: #000000 to #000
Blue: #0000ff to #00f
Dark Grey: #666666 to #666
Light Grey: #cccccc to #ccc
Orange: #ff6600 to #f60
White: #ffffff to #fff


Click here to download a PDF shorthand cheat sheet.

Most designers at some point have been faced with the phrase “intuitive design”. What exactly is intuitiveness and what can you do to make your designs seem more intuitive? The definition I like most is “spontaneously derived from or prompted by a natural tendency”. Basically the less conscious thought that goes into an end-users interaction with an interface the better.

Of course the “natural tendency” of some people may differ greatly from that of others so how can you decide what is an appropriate design? The most important step is to know your audience. Some information can be determined through the content you provide. If your content is geared towards developers chances are the technical experience level of your audience would allow for a greater amount of complexity. On the other hand, a site primarily targeting senior citizens would induce a whole different set of “best practices”. Regardless of your target, it is never a good idea to over-complicate things. Even highly competent web users can quickly become frustrated by confusing navigation. It is a natural tendency for designers to want to show off their elaborate design skills but even the prettiest design can be counter-productive if it slows users down.

These days, more and more emphasis is placed on accessibility. What would happen if images were disabled or if the end-user was blind and using a screen reader? It is easy to disregard the minority but in the competitive market of web design it is essential to be well-rounded and aware of the different consumption scenarios.

Many principles working together make up an intuitive design… color, contrast, placement, etc. Below are a few best practices that will aid in intuitiveness.

• Stick to standard visual identifiers, consider Windows, popular software and major websites as the standard. They are what people are accustomed to and are already trained to operate.
• Minimize the gap between the users’ current experience level and the required experience needed to operate your website.
• Keep all site text on the same level as the audience.
• Poll users often and conduct field studies for important projects.
• Keep things as simple as possible, using wizards when appropriate to break up otherwise confusing information.
• Contrast should directly reflect information relevance. A users eye should immediately be directed to the most important parts of a page when visiting.
• Keep colors in harmony by designing with hue, saturation, and luminosity rather than RGB. Try and pick two primary hues and 1-3 complementary highlight hues.
• Physically print out all screens and create a hierarchy so you can easily see how you might improve website flow and depth.
• Keep instructions inline when possible.
• Design methodically… define your users, create use cases and storyboards.

As my first topic I am going to discuss PHP performance boosting utility eAccelerator. I am currently working on a PHP based web project that fires off about 30 XMLHttpRequests in succession. The response of each call is displayed on the website and needed after the completion of all the requests where the responses are added to a database. PHP session variables were a possibility however speed could easily become an issue since PHP would be handling many simultaneous sessions and the values would have the be retrieved from the hard disk. Alternatively a database based session handler might be faster but certainly not practical with so many commands being executed in succession. Cookies would have worked for most users however I do not recommend relying on cookies when the sole functionality of an application depends on them.

I also wanted to store the responses for quick retrieval, which are very small, ranging from a few bytes to half a kilobyte, since it is likely different users will request the same information frequently. With this in mind, neither of the previous options were ideal. Ideally the responses could be stored in memory and the PHP functions have the ability to quickly set and retrieve data. Obviously you would not want to try and store a multitude of very large objects in memory however in my case I could store thousands of key-value pairs using a small block of memory. This is where eAccelerator became a practical match for my application. It is among a few PHP memory caching options available such as XCache and Memcache. Although eAccelerator is first and foremost a PHP cache utility to store compiled scripts it also features the ability use memory as a temporary store for information through a powerful API.

On to the installation process… If you run a dedicated server with CPanel/WHM there is an option in the Easy Apache configuration wizard to compile with eAccelerator. Unfortunately, with the latest version of eAccelerator the put and get functions are not enabled on a default compile so I had to take the installation to command line. Keep in mind that you will need root access to be able to recompile Apache. The process I followed is below.

• Download the latest release 0.9.5.2 from http://eaccelerator.net/wiki/Release-0.9.5.2
• Upload the script to your server and extract the package
• CD to the directory
• Run export PHP_PREFIX=”/usr/lib” where “/usr/lib” is the location of your PHP installation
• Run ‘phpize’ if you are running multiple php branches to bootstrap eAccelerator by executing $PHP_PREFIX/bin/phpize
• Run ./configure –enable-eaccelerator=shared –with-php-config=$PHP_PREFIX/bin/php-config –with-eaccelerator-shared-memory
• There are other configuration options such as session support, a full list of options is available at http://eaccelerator.net/wiki/CompileConfiguration
• Run make
• Run make install
• Locate your php.ini file and locate the eAccelerator configuration section where you can set default garbage collection times, storage options, and memory allocation. You can find more information about the settings at http://eaccelerator.net/wiki/InstallFromSource
• You need to make sure that the cache directory referenced in your php.ini is created and the chmod is set to 0777.

Now you can create a simple test PHP script to put a key-value pair into memory and another to get the value of the key you added. A simple put command would look like “eaccelerator_put($key, $value, $ttl)” where $value is the time period in seconds that the key should be stored before being discarded. To retrieve the key’s value you can simply run the command “eaccelerator_get($key)”. You can find complete API details at http://bart.eaccelerator.net/doc/phpdoc/.

By default if you are in a shared environment this functionality will be extended to everyone but you can disable eAccelerator on a per-domain level in your vhosts file. Extending the get/put methods to all users in a shared environment could potentially be dangerous. If you create a phpinfo() file you can monitor the memory usage, number of cached scripts and number of stored keys.

So, how much does this really help? You should see a nice drop in CPU utilization since PHP scripts will be more efficiently compiled and since they are served from memory as long as you have memory available the response time is noticeably quicker. Overall I didn’t see any real performance compromises by enabling eAccelerator. Obviously you will be using more memory but you have control over the amount that is used for storage. After the max is reached then scripts and keys are stored in the cache directory reference in the php.ini file. If you are running PHP, have extra memory available and have root access then I highly recommend eAccelerator to increase server speed and add valuable functionality to store, retrieve and remove data in memory. There are a number of practical applications for this utility.