Design and Technology.

This page details some of the technology, techniques and design / development choices I have made in creating this website.

Hosting

This website is hosted on a VPS which I rent from Interhost. They are my choice as they are cheap at £17.95 a month. Also so far reliablility has been excellent in the over 12 Months I have been with them. The server itself runs CentOS 4 and using Plesk for domain and hosting administration. It uses Apache2, PHP 5.0.4 and MySQL4.1.2. Despite having Root access to the server I have never bother to update any of the pre-installed standard config.

Framework

About 6 months ago (as I write this in May 2008), I started think that I would redesign my website and having built a number in the past decided that a framework would help me in this task. I had also written a number of useful classes for common task and though it would be a good idea to extend those. I already a class for MySQL interaction, a class for AJAX handling, which paired with an AJAX Javascript object I had written. Also, I had a primitive templating system and plug-in Authentication scripts.

About 5 months ago I realised I was trying to re-invent the wheel and there already existed many good frameworks, that had overcome the endless problems I was encountering trying to write my own.

So I discovered MVC and the joys of CakePHP. I'm sure some of the other PHP frameworks out there are just as good (CodeIgniter, Sympony, Fusebox to name a few) - but I liked Cake and have found it perfect for my needs. The general gist of the framework is the MVC methodology separating the Model (your data and data source - e.g. a database) the Controller (the business logic) and the View (the presentation layer - e.g. your web templates).

This approach makes designing a website, even a dynamic database-driven one dead easy.

Web Standards and semantic code

This is a bit of a hobby horse of mine, but I believe in follwing standards, creating compliant code and in the idea of accessibility and semantics. The first thing I do on finding a new website that I thiks looks great is to turn of CSS and see how it looks. Then I go right down into the source.

If it still looks good then I am satisfied with the design, and I turn off Javascript and try again. Hopefully everything still works, or at least I am presented with a "graceful" degradation to the system.

So, in this site I aim to keep the source as semantic as possible, the CSS and XTHML (1.0 Strict) valid and the javascript non-essential where possible, but always gracefully degraded if unavailable.

Design and CSS

I touched on CSS in the last section, but I wanted to focus more on it here. Style is important. It's what makes your site unqiue and is what draws your visitors eyes where you want them to go.

I spent quite a lot of time getting the typography right so that the text was correctly spaced and readable. Check out the CSS Test Page which show what works and what doesn't with the CSS on this site. However I do have a thought that the reading area is too wide, which does hinder reability. Unfortunately I haven't really thought what could go on the right instead. I hope it can be some of Rosie's doodles (!) as they are pretty cool. but we'll have to see...

I'm not graphic designer, that much is probably obvious to you now. That is why there are also no images on this site, especially when it comes to images for layout / design. My preference is to do everything in CSS directly if I can. That gives this site it's clean lines, but in some ways makes it a little boring.

My financée, Rosie, is a bitter more talented in that respect, so maybe I'll get some of her doodles on here in due course.

Third Party Scripts / Libraries

As with the framework, I can recognise when I am trying to re-invent the wheel, and often there are good solution's already in existence that just need a little prodding to be what you want them to. I have just 2 major third party libraries to create this website. Both of them are used in the blogging tool and both for ease of blogging.

MarkDown

MarkDown is a text-to-html converter. It has an intuitive syntax which makes writing text to be converted to HTML a doddle. When I found this I immediately wanted to use it, but the original is written in Perl. However there have been many ports of it including PHP Markdown, which is the script I used in this site.

GeSHI: Syntax Hilghter

I have blogged about GeSHI but will mention it briefly here. It is fantastic for syntax highlighting. Absolutely fantastic. Completely configurable, extendable, customisable and lots of othe words ending in able.

I use it to post code snippets on my blog and I use a custom BBCode style way of doing it. So I can write:

MySQL:

[code syntax='mysql']INSERT INTO `some_table` VALUES('some data', 'to insert', 'into a', 'mysql table');[/code]

Javascript:

[code syntax='javascript']var someObject = { "someVar" : "some value", ["some", "array"], { "a":"complex", "nested":"object" } }; 
alert(someObject.nested); //will alert "object"[/code]

PHP:

[code syntax='php']class Test extends Previous { 
    var $excellent = true;
    function __construct($bIsExcellent){ 
      $this->excellent = ($bIsExcellent);
      /* now return */
      return $this->excellent; 
    } 
}[/code]

and I get the output:

MySQL:

Javascript

PHP

It's pretty useful.