This website was designed, developed and created by myself, Jamie Balfour. My brother,
Michael Balfour, contributed some artworks (in particular the favicon and
My website was designed to be usable above good looking (functionality over form), but I feel
I have achieved both. Here's what people have said about it:
These are a selection of actual comments about my new website
(version 2.0 and onwards, particularly version 3.0 onwards):
"It does look smart and stylish. And it's much better
"Your new site looks great! Can you do a site like that
"It's really good."
"You should be very proud of yourself."
"You're obviously a good web developer, so would you be
able to build a site for me?"
"I know your site is great, even I'm proud of what you've done"
"Normally mobile versions of sites annoy me as most developers do half
versions that lack the functionally of the actual site (apart from yours which is actually a pleasure to use on my phone and tablet so kudos)."
The website has been laid out in as structured and formatted
a way as possible and I aim to continue to improve it. It now utilises
HTML5, CSS, PHP 7.1 and MySQL.
Every page on my site is also 100% HTML5 valid, unlike many sites
including Apple, Microsoft, Google and so on.
My website also passes Webutation's strict tests to ensure it is safe:
Building this site in June 2013 was inspired by a bunch of other websites, but most crucially
it was about learning web development.
There are many different web templates and free-to-use content management systems like
WordPress and Joomla, but they lack customisation features. In June 2013 I decided to start
A bit of history
My original plan for my site was to make it dedicated to explaining about me. By 2011, when I released
version 1.1 of my website, I planned to use it for my software downloads and not much more. Version 1.1. was short-lived since
it was not compliant with HTML5.
In 2012, things started to change and I planned to redo the site at the end of the year. I designed
the whole site myself, learned PHP and how CSS works and a bit more HTML. My inspiration from this came from
Steve Jobs' famous Thoughts on Flash press release and particularly this part:
...Though the operating system for the iPhone, iPod and iPad is proprietary,
we strongly believe that all standards pertaining to the web should be open. Rather than use Flash, Apple has
low power implementations of these open standards. HTML5, the new web standard that has been adopted by Apple,
Google and many others, lets web developers create advanced graphics, typography, animations and transitions
without relying on third party browser plug-ins (like Flash). HTML5 is completely open and controlled by a
standards committee, of which Apple is a member.
By May 2013, the site was redesigned. It was exactly how it was meant to look, but it's design
architecture was awful.
June 2013 saw me redo the site again, this time I really went all out. I fully learned everything I needed and
made the site as flexible and easy to build as possible. This version of the site that is now being used has been
this way since June 2013 and has only received minor frontend and backend changes since the release of
the fourth minor iteration of the site (3.4), featuring the full design for smartphone, tablet and desktop browsers.
Almost everything on the site is designed and built by me. jQuery and D3 are the only library used across the site that I did not build. However, the
majority is created and written by me, including the menu, popup frame, photo gallery, blog, login system and so on.
I never thought I'd become interested in web development at the end of it when I first started.
Since my update to the VPS package, I have had a lot more control over the technologies of my
website. I now use:
The new site focused far more on consistency. In 2013 in the days of version 2.0 WordPress was used for my personal
blog combined with my own style for my main website. Now the site is powered by BalfBlog, BalfBar and
DragonScript - all
my own projects. On top of that, I designed my photo gallery and the system that powers it - removing the need for the
third party version.
My website now also has a branding with the logo by my brother Michael and a colour scheme (more later) and focuses
on integration between all of the different sections. BalfBlog (which is not just a blogging system but a general content
management system) powers most of the pages on my website.
I also designed the site from the bottom up, clearing out all the HTML, CSS and JS from my original websites, and starting
from a clean slate. It seemed daunting at first but with time it became easier. On the 1st January, the website saw it's biggest
change since the release of version 3.0 - the introduction of DragonScript. My website was down for a total of 5 hours whilst I prepared
the backend for DragonScript. The reason DragonScript did not launch a new version is because it was a backend update, not a frontend
With the introduction of DragonScript, the whole website became far more consistent and the introduction of many new features came along.
In October 2017 since the release of Girder I started to get the feeling that I should rebuild my website with the new framework. In December 2017
I finally went ahead and did that for an early January 2018 release.
Thanks go to the following
My brother, Michael Balfour
For my logo.
Daniel Bruce: Entypo pictograms by Daniel Bruce — www.entypo.com
I currently use FreeSitemapGenerator for the generation
of my sitemaps. This makes life so much easier and I would
love to take a moment to thank them for their excellent
This fantastic website allows me to generate sitemaps of any size (as my site is now some
900 pages) for free. I do use desktop software for this too, but generally
freesitemapgenerator is used.
One of the greatest website achievements I have ever
seen. This allows the highlighting of code syntax and turns
it to HTML. Some pages on my site use this, although I still do
the code formatting on most of the pages.
A lightweight PHP library that makes it easier to detect whether a user is using a smartphone or tablet device and to make
the necessary reductions on the server side prior to the processed data being handed to the device - thus reducing the size of
the mobile version of this site.
OneSignal powers push notifications that are used on my website and through BalfBlog. They do a fabulous
job of making it easy to integrate it into your own website.
The people who like my site and have backed me all the way (the moral boosters).
Julian Merlin Ertel
My mum, father and brother
Some of my lecturers (Helen, Albert, Rob, Jamie, Greg, Santiago, Phil)
Those on the web who have helped me
had written my own HTML editor into
Wonderword. In fact, the HTML is knew looked something
I thought it was going to be an easy task to build a website that
would take weeks, instead, as I learned more from the great
people on the web, I decided to improve it more and more.
So thanks to those awesome people, I now have improved my
website far more than I had originally imagined. I never planned for it
to become as popular as it became and look the way it does now.
My university lecturers
Without my lecturers who introduced me to PHP I would likely
have never thought about being a web developer. Thanks go to Helen Hastie and
Albert Burger for introducing me.
Friends and family
Without the support of friends and family, this site
would not have been designed the way it is. I remember my trashy
first website was created with support of my friends (particularly suggesting what
they liked and did not), but not
the way it was this time.
I would especially like to thank Jonathan Craig
for testing parts of my site and notifying me of parts that did not work as expected during the
Microsoft and Apple
Both operating systems were used for the creation of
this site. Originally, I used Microsoft Expression Web 4,
but then changed to Mac OS X and Adobe Brackets, Aptana Studio 3, iWeb and
Adobe Dreamweaver CS6 and Adobe Dreamweaver CC.
To the companies whose software was used
Adobe for Brackets, Dreamweaver and Fireworks.
Aptana Foundation for Aptana Studio 3
Microsoft for Expression Web 4 and Visual Studio 2010
FileZilla developers for FileZilla
To the companies
whose hardware was used
I used my Nexus 7, iPad 1st Generation,
iPhone 5, iPod Touch 4th Generation and iPad Air during
the mobile and tablet debugging processes. For the
desktop debugging I used several HP machines running CentOS Linux 6.
I also used an Apple MacBook Pro 13" 2011 and an
Apple MacBook Pro with Retina display 2013 15" as well as an Apple
Mac mini 2012 and my custom built Zebra and Zebra X2 for testing and creating the website.
Pepsi was the drink of choice I had on those long summer
nights while I was working on this site. It was crucial
to keep me thinking.
Bootstrap was the inspiration for two parts of this website, the pill form and the warning and danger boxes.
I do really like Bootstrap and had considered switching to it in the past but in the end remember
how unique my own website actually is.
The site is how it is - exactly how I personally wanted it to
look. I was always going for a '960 page design' where every piece of
content fits in the middle of the document. The site is almost 100%
optimised as shown below:
Building a site to be speedy is not easy!
This website was designed and built using Aptana Studio 3, Adobe Dreamweaver CC,
Adobe Brackets, iWeb, Microsoft Expression Web 4.0, Notepad, my
own Painter Pro Ultra Edition and my own HyperWEB and a bit of FrontPage 2003.
The theme used on this site consists of my favourite colours:
grays and oranges. You should notice that the majority of the content
on the pages comes in one of these colours. In particular, demoed
here are the colours used.
If you are interested in knowing why I chose the orange and blue
theme, take a look at the colour scheme of the Pentium 4 logo. I was always dazzled by this colour combination and thought since
it was my favourite colour scheme I would go with it.
Thanks to colorcombos.com I have made cupcakes for my site's colour scheme.
Colour cupcakes for my wesbite's colour scheme!
As part of my 2015 performance redesign, I developed DragonScript. This moved a lot of the content management to
the server side and allowed me to maintain the website much better.
DragonScript or DS as I refer to it, is what generates my website. It's a very simple PHP script that I wrote to make managing my website
much easier and it allows me to specify specific features of each page such as the title, description and keywords meta tags, whether or not
the page should be cacheable, whether users should login to see the page, whether to include the JBMath style sheets and many other
small tweaks. In general, it means maintaining the site is easier. It was included as part of version 3.6.
DragonScript 2 was released in January 2017 and it has brought serious performance improvements on the back-end of the website
over what the original version brought.
Finally, the name DragonScript comes from my love for dragons (I've loved dragons as far back as I can remember) and because
it's a PHP script that does it. It's nothing like ZPE which is my scripting syntax.
Finally, in December 2017, DragonScript was redesigned to be similar to other websites that I have developed and is now
even better than before. DragonScript version 3 is far faster than version 2 and offers a lot more.
In December 2015, I chose to move from my semi skeumorphic design to a much flatter design. The result
is much better consistency, much easier layouts and less time spent rendering and downloading my website on the
This was one of the most important changes in the history of the website (probably after DragonScript) since
the consistency of my site was also greatly improved with it.
Website Version 1 (Caithness-shire) (April 2010)
Website Version 1.0 John o' Groats* (April 2010)
Simple black and white page layout, theme known as Swan
(provided by host)
Dudamobile mobile version of site
Multiple sections by order of when added
Website Version 1.1 Canisbay* (August 2011)
Sidebar has Facebook
Added a Software link on the front page
Links to Facebook, Twitter and Google+
Software section added
New pages (The Team, Development, Articles)
Website Version 2 (Dunbartonshire) (January 2013)
Website Version 2.0 Dunbarton (January 2013)
A completely new design
Fully redesigned to 960px width
Laid out using tables
Minor CSS2.1 features
Image slider on front page
Removed a few sections (such as The Team)
Development is now integrated into Computing
Background image and colour
Page layout design
Whilst building this version I realised quickly that it
lacked any kind of scalability.
Website Version 3 (Perthshire) (June 2013)
Website Version 3.0 Pitlochry (June 2013)
Full CSS construction
A new page layout
Improved to 1024px width
100% on computers with smaller screens (such as netbooks
New mobile menu
Improved front page
Sections on the menu are changed around, some sections
are removed (such as the Life section)
Website Version 3.1 Dunkeld (September 2013)
Better structure of the site
Website Version 3.2 Blair Atholl (October 2013)
Better tutorials in the Development section (now using HTML)
Articles, reviews and tutorials are displayed better
Increased width to 1065px width
Website Version 3.3 Stanley (December 2013)
This release of Version 3 is considered fully functional.
A responsive design with a mobile friendly menu
New multi level mobile menu
Better consistency between colours.
Better site tools.
Website Version 3.4 Perth (January 2014)
Website Version 3.4.1 Smeaton's Bridge (January 2014)
Removed some old styles such as code samples in columns
Reduced CSS file by 7000 Bytes (7KB).
Reduced the size of the whole site by 100MB by optimising
Cleaned up HTML
Website Version 3.4.2 Friarton Bridge (February 2014)
Fixed issues with WebKit browsers such as Safari and
Users need to login to their own account to download
Better iPad support
Website Version 3.4.3 St Leonard's Bridge (March 2014)
Added the My section, aka the login pages
Fixed an issue on smaller tablets that prevented the
menu working correctly
Added 1275 width to larger than 1600 displays.
Changed font to Helvetica from Overlock (thus reducing
download times as Overlock was a custom font)
Website Version 3.5 Auchterarder (May 2014)
New menu - one for all designs (jQuery Smartmenus)
Fixed issues with mobile site
Further improved the Download Center
New hosting package
Mobile menu improvements
jamiebalfour.com is the main site
Less IE8 support, but still supports it reasonably
well (the menu goes to mobile only)
JBlogs powered blog
New themed site - based on time of year
Website Version 3.6 Rattray (January 2015)
Powered by DragonScript to improve scalability
Feedback survey has been taken down
New Source Sans Pro font
New contact form
Dedicated Download Center to reduce requests to the main site (planned)
Gallery improvements using Magnific Popup
Site SEO improved further
Improved the gallery loading times
Website Version 3.7 Blairgowrie (November 2015)
JBBar menu (my own menu, now called BalfBar)
Flatter interface called Pill Form replaces Epic Form
More consistent interface
Better information architecture
Replaces the Source Sans Pro font (which was too thin
according to feedback) and uses Helvetica Neue and later the Roboto font.
Flatter interface in general, focusing on solid colours and
dropping gradients and curves.
Early 2017 added DragonScript 2
Website Version 4 (Haddingtonshire) (December 2017)
Website Version 4.0 Haddington (December 2017)
Completely redesigned infrastructure and layout system using DragonScript v3 and
my Girder framework. This version is focused more on performance than ever.
Dropped Magnific Popup in favour of BalfPopup which considerably reduces the size of the
BalfBar 1.2 is now staple to the site.
Old version snapshots
Version 3.7 in September 2016
Version 3.6 in November 2015
Version 3.4 in January 2014
Welcome to my website. My name is Jamie Balfour and I'm
a computer scientist. My website focuses on me but also has
tutorials designed to help you learn things I know.