How this site was created

Published on: 20th Dec 2014
In Technical

Creating this website was a great programming exercise, but it did not deviate much from any software development project I have been involved in... Let me explain:

Software development projects is not for the faint-hearted. It normally is Does "High Rise" refer to the building or the budget? [25]

  • Under a very tight timeline
  • Under budgeted
  • With unrealistic expectations
A good project manager will tell you to choose any two of the following: This application must be
  • Very cheap
  • Done in record time
  • Must have all the "bells & whistles" not seen before
(If it is to be very cheap and done in a record time, it cannot have all the "bells & whistles". If it is to be very cheap and have all the "bells & whistles", it will take a very long time to do. and so on...)

In most software development projects there is a disconnect between the analysts, the project manager, the developers and the clients.

In our office we have the following poster stuck to our project wall as a reminder of this:

When the project manager, analyst, developer and client are all the same person, the project is definitely heading for disaster - I played all these roles for this website, and my won expectations for this website was also to be very cheap, get finished in a week or two and have all the "bells&whistles"!

My previous version of a personal website was written using two PHP scripts and utilising a freeware embedded Flash object to display some photos. With the rise of the smart phone and tablet Flash based websites have become more and more of a problem as most smartphone and tablet browsers do not support Flash. So the need to convert it to a pure html based site became more and more pressing. The initial idea was to make use of WordPress, as I would like to have to functionality of publishing some articles as well.

I installed WordPress on my server, bought a "responsive" theme and start setting it up. This particular theme (or maybe it is the way WordPress handles it) had a really unintuitive way of setting up photo galleries and assigning photos to the galleries, but eventually I got the hang of it.

Then, with the basic site set up, about a hundred photos uploaded and assigned to galleries, and two articles published, I decided to show it to my colleagues at work.

The site did not work!

The company where I currentlly work, uses internet filters that tags this site as a "Social or Personal" site, (They were spot on!) which is not allowed! The next 2 weeks I spent every evening to see what I can change to allow it through their filters, every morning I tested it at the office, without any success! Till today, I still believe it is possible to change the settings as I know I can access other WordPress sites from within their firewall, but at the time I decided that this is a waist of time, and that I could have been finished developing a custom website if I used my time differently - after all, I am a developer!

I spent a few evenings researching the technology and then started the development. I decided on the following technology: Reality check time [26]

  • PHP 5.4 (I already have this on my development environment and cannot change it so easily)
  • MySQL - for the same reason...
  • Bootstrap CSS framework as it is great to scale to various device form factors (I decided on version 2.3 as I still want IE8 comaptibility)
  • Fancybox jquery lightbox software. (If you every need lightbox functionality on your site, then I will recommend you get you a copy of Fancybox. It is not expensive and it scales well to all devices. You can read more on their website here)
  • Zoomify panning software. (I also purchased a copy of Zoomify and created a tag to embed a link to a Zoomify page from within the editor) See more about Zoomify here

Writing the blog portion of the website was the most difficult, and as time went by, I convinced my client (myself) that a very basic editor with a tagging and parsing system must suffice. This current version of the editor only allows the most basic of formatting, namely,

  • Embedding an image
  • Link to a Zoomify page
  • Creating a bullet list (like this one!)
  • Format paragraphs
  • Text Decorating: Bold, Italic, Larger and Smaller text
  • Creating a heading

To test my editor, I converted a few old articles to see if it gives enough functionality (I already have a wishlist of extra features, or enhancements on the existing features) to publish articles that look good, display correctly on most device form factors and is easy to use.

What started of as a project to update a website consisting of 2 PHP scripts with an embedded Flash photo viewer eventually ended with a total of 32 PHP scripts and 5115 lines of code. I decided to include a "Keep me informed" member list functionality, and just the administration around the account maintenance consists of 6 PHP scripts with a total of 995 lines of code! I did not make use of a PHP framework (such as the very good YII framework I am using for as this was to be a very small project, but I ended up writing my own set of utilities, which on its own, is more than 1000 lines of code!

The next important step is to publish photos and articles on a regular basis to make all of this worthwhile for you, the reader!

(If you have read up to here and did not click on a photo yet, do so to see them in larger format and also to browse through the rest of this gallery)