Month: April 2008

Posted on

Google Static Maps API

Admittedly I have completely missed the boat on blogging about the Google Static Maps API which was launched back in February, but I was reminded of them the other day whilst working on a site admin panel.

As the maps I wanted to display were only a small addition to the panel providing a quick snapshot of a location, using the full JavaScript API would have been rather unnecessary.

This is where the static maps prove very useful and are an easy and quick addition to any web page, whether or not you use Google’s static map wizard. Continue reading “Google Static Maps API”

Posted on

Upgrading to WordPress 2.5.1

After receiving notification of the latest WordPress release I wandered over to the WordPress Blog to see what was included in the latest version (2.5.1).

Aside from what has been described as a “very important security fix” there were over 70 additional bug fixes, most of which I hadn’t come across myself although had heard of some troubles encountered by others.

Unlike my previous upgrade this time I just switched the subversion repository and ran the web based update script, shaving off an additional few minutes and therefore upgrading my install in under two minutes from start to finish!

svn switch http://svn.automattic.com/wordpress/tags/2.5.1/

Luckily everything seems to be working fine and I have faith in the WordPress releases, but if you want to be more cautious you should probably backup your database first.

As Paul’s response to my previous upgrade post mentions, any web scripts can be rolled back using svn.

It is highly recommended that you carry out the upgrade as it is said that the vulnerability to 2.5 will be made public shortly.

There is also to introduction of additional security in the form of secret keys, introducing randomness into the cryptographic functions used for cookies.

Simply obtain a secret key and paste the code into your wp-config.php file along with the other defined variables.

Posted on

Simple PHP Sparklines

Whilst designing a new layout for one of my current projects, I wanted to be able to provide the end user with the ability to quickly scan over a series of statistics.

The main page should act as overview of everything that is going on, therefore I wanted to avoid overcrowding it with lots of large graphs and instead simply show the basic trends.

A few months back I came across an implementation of Sparklines – data-intense, design-simple, word-sized graphics – which are often used to demonstrate stock market activity in a simple visual graphic.

I was just going to use a pre-made script from the many already available, but instead decided to knock one up myself and created a small PHP Class to generate and output a sparkline image using the GD Library.

To create a sparkline I can now simply include the class and then initiate it in a variation of the following:

$sparkline = new Sparkline();
$sparkline->data = Array(3,38,2,8, ... ,38,13,4,23);
$sparkline->output(); // Display image

This PNG image is generated and output to the browser:

Example Sparkline

A number of other setup options are available to customise the output further:

$sparkline->bg = '#000000'; // Background colour
$sparkline->width = 150;
$sparkline->height = 50;
$sparkline->line = '#336699'; // Line colour
$sparkline->points = '#333333'; // Start & end points
$sparkline->thickness = 2; // Line thickness
$sparkline->scale = 5; // Anti-aliasing scale size
$sparkline->output('saved/test.png', true); // Save to location and display

Customised Sparkline

All colours must be provided in hexadecimal format and if you are attempting to save the image the destination location must be writeable by Apache.

The Sparkline PHP Class source code is available for anyone to use as they may like, although I must confess it hasn’t been fully tested as yet!

Posted on

Professional JavaScript for Web Developers

When starting for Fubra back in 2006 I would have probably described my knowledge of JavaScript as basic to say the least. Knowing how to alert a bit of text and pop up a confirmation box was sadly pretty much the upper range of my ability at that point in time.

Since then I have found myself purchasing and reading a number of web development related books, whether they be JavaScript, PHP, MySQL or CSS. Each one highlighted something that I either didn’t know or simplified something I may have known already.

The majority of my collection is made up of books from the O’Reilly collection, but I also own a number of the Wrox publications. My current favourite – or should I say most referred to – is the Wrox edition of Professional JavaScript for Web Developers by Nicholas C. Zakas.

One of the most useful features it offers are the comparisons between IE and the DOM, highlighting what is and is not available to you across them both. The many examples provided throughout the book cover numerous situations across all the major browsers and provide a deeper understanding of the differences and how to work around them.

Recommending this book to anyone with an intermediate knowledge of JavaScript is something I would do without hesitation. Having recently lent it to a friend of mine, I have however discovered that it may not be so suitable to those just beginning JS or anyone having little development experience.

The synopsis does explain that the book:

Quickly covers JavaScript basics and then moves on to more advanced topics such as object-oriented programming, XML, Web services, and remote scripting

I am always on the lookout for books of similar nature to this on the subject of JavaScript in order to expand my collection and knowledge, therefore any suggestions or recommendations that you may have are welcomed.

Posted on

Cross Browser CSS Layout Debugging

I’ve spent the majority of today fixing CSS layout issues to ensure my latest work project will look just as good in IE6 as it does in Firefox and the other major browsers.

I tend to stick to Firefox as my development browser to test a project as I go along, this way I can almost guarantee that the layout will look fine when browsing in Opera, Safari (Win) and even IE7/8.

Internet Explorer 6 on the other hand is a whole different ball game altogether, even in standards compliance mode things can take an age to get sorted, often finding yourself floating elements as well as adding in any filters as it is unable to render png transparency or opacity correctly.

At least Microsoft had got the majority of things right when they released Internet Explorer 7 and now with the beta release of IE8 with the IE7 rendering engine option things are looking up for web developers.

Unfortunately we will have to put up with the woes of IE6 and below, at least until the percentage of users drops to a more insignificant amount. Currently around 30% of users are still browsing using IE6 which is enough to put doubt into every developers mind as to whether or not they should bother with it.

Currently I have Firefox 2 / 3 beta, Opera 9, Safari (Windows) and IE 8 (with built in 7 rendering option) all installed on my PC. Both Opera and Firefox allow for multiple installs of different releases on a single machine, but when it comes to IE6 I’ve had to either use the stand alone version or use a Virtual Machine with an XP and IE6 Image.

The stand alone version from Evolt is fine up until the point where you are wanting to test any filters, css conditional statements or set up a proxy connection.

The the virtual machine option on the other hand will render everything as expected, but does require you to go through the booting up process and download the latest image every couple of months as they expire.

With my irritations of backward compatibility aside, I believe as developers we should all continue to dedicate some of our time allowing as many people as possibly to have the same browsing experience, even though it can be a major chore at times and testing in each browser can have it difficulties.