Stv.Whtly

April 12, 2008

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:

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!

April 8, 2008

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.

April 3, 2008

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.

March 30, 2008

Upgrading WordPress using SubVersion

I have just upgraded my WordPress install to the lastest release, luckily with SubVersion the whole process can be achieved with minimum time and effort.

Paul went through the upgrade steps on his blog, but thought I would go through them here as I went along.

Unfortunately when I initially installed WordPress I committed it directly to the root directory unlike the more popular location of the subdirectory /blog, but not to worry.

Here are the steps I followed to complete the update:

# Backup the current directory...
cp -Rp http httpBACKUP
# Create a new location for the update...
mkdir httpNEW
# Checkout the latest release from the repository...
svn co http://svn.automattic.com/wordpress/tags/2.5/ httpNEW/
# Copy across any custom changes/themes and config file...
cp -Rp http/wp-con* httpNEW/
# Copy over the .htaccess file..
cp -Rp http/.htaccess httpNEW/
# Delete the old directory...
rm -rf http
# Rename/move the update to the original location...
mv httpNEW/ http
# Switch the SubVersion Repository...
svn switch http://svn.automattic.com/wordpress/tags/2.5/
# Finally, run the browser based update script...
http://yourdomain/wp-admin/upgrade.php

And that’s all there is to it really, now every time I need to update WordPress I can simply copy and paste the above commands.

March 25, 2008

JS submit is not a function

Today I was asked by a colleague to aid them with adding functionality to a form that would allow it to be submitted by pressing ‘ctr + s’ keys.

As a group of web developers this key combination is something that comes almost naturally to us when editing and constantly saving code, so should prove a useful addition to the form that is not too difficult to implement.

I began by setting up the event observers to watch for the two required keys to be pressed.

Once the required key codes ( 17 and 83 ) were captured it should have been a case of simply referencing the form and applying the submit method.

document.forms['form_id'].submit();

To see if what was written so far would actually perform the desired action we tested the page using our default browser Firefox, only to discover we were receiving the following error:

document.forms.form_id.submit is not a function

This was all very puzzling but eventually resorting to a search on Google provided a number of answers.

It turns out that all our problems came back to the fact that the submit button on the form had been given the name of ‘submit’ – which is a JavaScript reserved word – resulting in ambiguity in the browser and therefore no longer referencing the method.

The solution to this is a very simple one – renaming the submit button to anything other than ‘submit’ or any of the reserved words in JavaScript.

March 23, 2008

JS String Splitting in Internet Explorer

Over the past few days I have been working on a JavaScript based syntax highlighted code editor to add to my JS Library (known to some as the Juice Library).

I wanted to split the lines of code displayed into a series of words with any spacing preserved, so started off by splitting each line on any none word “W”.

var words = line.split(/W/g);

This worked fine in Firefox, but when it came to IE the results were not quite what I was expecting. All the words were matched but all white space had been completely ignored, so instead I turned to using “b” as the delimiter.

var words = line.split(/b/g);

This took me a step closer to what was required but it was still not the desired result as I didn’t want any non-word characters to be grouped with alpha-numeric values, such as “123”.

I spent a little – in fact too much -time browsing the web for some pointers and came across an article posted on the SitePoint blog outlining the inconstancies of the String.prototype.split method across different browsers, which seemed explained the problem I was getting earlier but unfortunately offered no resolution.

Now to try and find a solution to all this.

Because splitting on “W” was almost correct I reverted back to using that and now knowing what I had read over at SitePoint I somehow needed to prevent any non-word character sets from being ignored but without affecting the output in any way.

One possibility that arose was to wrap use the special character of null “” around each section and then split on that value. I tried a long winded version of the following to see if it would take me any closer to the desired result and simplified it afterwords.

var words = line.replace(/(W)/g, '$1').split('');

The output form this was pretty much almost what was required in both FF and IE, however it does not ease my frustration in the time wasted coming up and researching into this solution.

I can now continue on with my syntax highlighter in peace, or at least until the next major cross browser issue arises.

March 16, 2008

FF AdBlock add-on blocking local images

I received an email last night from a colleague regarding his recent visit to the Fubra site using the Firefox web browser. In his email ~~Matt~~ Wardy pointed out that he could not see the central image on the homepage relating to advertising.

Whilst digging around for a reason he found that there was an inline style of “display: none;” applied to the image although no inline style was visible in the source code, which asked the question of where was it coming from?

As with many development and layout issues in Firefox they often come back to one of the many extensions or add-ons that you have installed – for example wondering why JavaScript isn’t working and then realising that it’s simply because you had disabled it earlier on to ensure your site will work without it enabled :S.

In this case it was found to be that AdBlock was installed, so by either disabling the AdBlock add-on or whitelisting the Fubra site and hitting refresh, all image problems appeared to have been resolved – for now.

A quick solution was applied for anyone visiting the site with AdBlock enabled in order to avoid the hiding of imagery.

For now I’ve renamed the images and it seems to have solved the problem.

I found it very interesting that the AdBlock extension would automatically block localised images simple because they contained the phrase ‘advertising’.

It seems to me that the add-on may be acting a little greedy here and should maybe only exclude images from third party websites containing this phrase or similar phrases if any.

After all, adverts are usually put in place for a reason and in a lot of cases without them it’s unlikely that the site would be there at all.

March 3, 2008

Becoming a Blogger

At last I am now an official blogger according to the results from Google.

define: blogger – “The author of a blog”.

Over at Fubra they like to encourage – or nag – all employees to write their own blog and be part of the ever increasing population of online bloggers.

Until now I have been putting off the process of setting up my own blog in the hope that one would just magically appear or allow me to create one with minimum effort.

Thanks to the wonders of Subversion and WordPress I was able to quickly and easily install a blog on my vserver that Fubra have kindly supplied.

It can’t really get much easier than running the following cmd to checkout from the WordPress repository:

svn co http://svn.automattic.com/wordpress/branches/2.3/ .

All that was left was to come up with a quick and simple design to get away from the default template theme.

So there you have it, the kick start to my future in blogging.

Oh, and a quick thank you to my boss Paul for backing me into a corner and pressuring me into this whole blogging malarkey.