Jamie Balfour BSc

Welcome to my personal website!

Technology enthusiast

I am very interested in technology, particularly relating to computer science. I am most interested in web design and development.

My main hobby is programming. One of my most well known products from this is ZPE. I also am the sole creator of BalfBlog, BalfBar and BalfSlider.

A little bit about me

In 1997, when I was six years of age, I got my very first computer. I was always very interested in the ins and outs of it and dismantled it to see how it worked.

Years later, in 2016 I received my BSc (with honours) in Computer Science, obtaining a First class degree.

I'd like to welcome you to my website and hope you enjoy using it as much as I have enjoyed building it!

Google Plus
Me
Jamie Balfour BSc
Full stack developer

About jamiebalfour.com

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 writing jamiebalfour.co.uk with my own HTML5, CSS, JavaScript and PHP.

- Jamie Balfour
Website Version 3.x

Version 3.x logo

This website was designed, developed and created by myself, Jamie Balfour. My brother, Michael Balfour, contributed some artworks (in particular the favicon and JB Logo).

My website was designed to be usable above stylish, 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 than before"
  • "Awesome."
  • "Your new site looks great! Can you do a site like that for me?"
  • "It's really good."
  • "Smart."
  • "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 a***d 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.0.22-0ubuntu0.16.04.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:

Webutation

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 adopted HTML5, CSS and JavaScript – all open standards. Apple’s mobile devices all ship with high performance, 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. There are a few exceptions such as the Magnific Box (although I do have my own alternative, it's just not used fully across the website [yet]) amongst other things. However, the majority is created and written by me, including the menu, 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.

The technology

Since my update to the VPS package, I have had a lot more control over the technologies of my website. I now use:

The 2013 website

My logo

My new logo created by Michael Balfour. © Michael Balfour 2013

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 This is my way of keeping the website consistent. It's simply PHP files that are prepended and appended to the content. - 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 one.

With the introduction of DragonScript, the whole website became far more consistent and the introduction of many new features came along.

Thanks go to the following

  • My brother, Michael Balfour
    • For my logo.
  • Arvixe.com
    • The new host of my site. Arvixe offers multiple databases, Ruby On Rails, Perl and much more and makes it worth the money. Not only that, but it costs me a bit less than the previous host, One.com. I'm very happy with the service and support.
  • FreeSitemapGenerator.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 service!
      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.
  • Hilite.me
    • 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.
  • Mobile Detect
    • 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.
  • Magnific Popup
    • Magnific Popup is used to make modal popup windows (lightbox) when certain images are clicked. It is found in my articles, reviews and tutorials as well as my gallery and blog. A simple bit of jQuery and it's up and running - saving me rewriting something that already exists. It's lightweight too.
  • OneSignal
    • 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).
    • Jonathan Craig
    • Graeme Reid
    • Calum Cormack
    • Murray Szymanski
    • Sharang Shandil
    • Ben Stevenson
    • Brodie Hamilton
    • 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
    • When I started work on this site, I was not a web developer. I had never used CSS or JavaScript but I had written my own HTML editor into Wonderword. In fact, the HTML is knew looked something like
      HTML
      <body bgcolor="green" width="40" border="1">
      													
      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 building process.
  • 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 Corporation
    • 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
    • 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.

Previously used tools

  • CloudFlare
    • Thanks to the fantastic people at CloudFlare, my website has better security and I no longer need to minify my JavaScript and CSS as it's all done on CloudFlare. I managed to optimise my CSS and JavaScript so that when CloudFlare minifies them they come to the same size as if I were to use a minification program.
  • CSS Menu
    • For their menu, which I used until about October 2013 when I discovered how good MenuCool's menu was and replaced this menu with their menu.
  • CSS Minifier
    • Used to minify the CSS on my website. It makes the download times much lower.
  • JavaScript Minifier
    • Used to minify the JavaScript on my website. It makes download times much lower.
  • jQuery SmartMenus
    • One of the best menu system around. Prior to this, the website used a double menu system where there would exist one desktop/tablet menu and one mobile menu. Now, cutting down to a single menu, the jQuery SmartMenus menu saves me time and saves on download time. It was removed when I decided to make my own menu, JBBar (now BalfBar), which looks very similar but it much lighterweight and easier to customise.
  • MenuCool
    • One of the greatest websites out there for it's excellent collection of web site tools and features. Until February 2014 I used their menu, image slider and some other stuff from them. Now I don't use any of it, and have made my own image slider and my own menu.
  • TextFixer
    • This site gave me the concept for my search box. Whilst I originally had one of my own, I felt it was very inconsistent with the rest of the world's search boxes, so I used the one that was provided by them found here for a while before making my own.
  • VideoLightBox
    • A great way to show my YouTube videos on this site is to use the VideoLightBox display. It place the video in a minature pop up window like display and allows users to watch videos on my site in a modern and stylish manner.
  • One.com
    • The previous host of this site, a really great host who had been there to help me from when I was a simpleton non-web developer, to the days when I do every last bit in pure HTML. I'd been with One.com since April 2010 and used their template originally (which was awful) but their dedication had made me continue to remain here (despite the lack of multiple databases and no ASP.NET). In February 2014, I changed to Arvixe.com.

The outcome

The site is how it is - exactly how I personally wanted it to look. I was always going for a 'page design' where every piece of content fits in the middle of the document. The site is almost 100% optimised as shown below:

Pingdom results

Building a site to be speedy is not easy!

Software used

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.

Theme

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.

#FF6600
#226699
#FFA600
#000000
#333333
#555555
#777777
#AAAAAA
#CCCCCC
#DDDDDD
#EEEEEE
#F0F0F0
#F8F8F8
#FFFFFF

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

Colour cupcakes for my wesbite's colour scheme!

DragonScript

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.

Flat design

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 client device.

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.

Version history

For more detailed information, see the changelog (no longer maintained).

Website Version 1 (Caithness*) (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
    • Sidebar added
    • Multiple sections by order of when added
      • About
      • Life
      • Computing
      • Politics
      • Cycling
      • Development
      • Photos
      • Articles
      • Reviews
      • Tutorials
  • 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
    • Top bar
    • Floating survey
    • Footer
    • Search page
    • New pages
    • A new JavaScript powered menu
    • Minor CSS2.1 features
    • Better content
    • 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)
    • Tableless design
    • CSS3Menu.com menu
    • Full CSS construction
    • PHP construction
    • HTML5
    • A new page layout
    • Site links
    • Sidebar
    • Search box
    • Some CSS3
    • JavaScript
    • Improved to 1024px width
    • 100% on computers with smaller screens (such as netbooks or tablets)
    • New mobile menu
    • Site restructure
    • Subscribe page
    • 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 CSS3
    • MenuCool.com menu
    • New gallery
    • Better structure of the site
    • Floating menu
  • Website Version 3.2 Blair Atholl (October 2013)
    • New logo
    • Better tutorials in the Development section (now using HTML)
    • Articles, reviews and tutorials are displayed better
    • More JavaScript and jQuery for a more fluid design
    • 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
    • Tablet friendly
    • Mobile friendly
    • New multi level mobile menu
    • Gray header.
    • Better consistency between colours.
    • Better site tools.
  • Website Version 3.4 Perth (January 2014)
    • Website Version 3.4.1 Smeaton's Bridge (January 2014)
      • Printer friendly.
      • 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 HTML
      • Cleaned up HTML
    • Website Version 3.4.2 Friarton Bridge (February 2014)
      • Fixed issues with WebKit browsers such as Safari and Chrome
      • Users need to login to their own account to download software now
      • 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
    • Speed improvements
    • Better SEO
    • 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
    • General improvements
    • Image frames
    • Dedicated Download Center to reduce requests to the main site (planned)
    • Gallery improvements using Magnific Popup
    • Site SEO improved further
    • Modularised website
    • 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

*Caithness, John o' Groats and Canisbay are codenames decided in 2013, some time after that version of my website was released.

My website as of version 3.6

Version 3.6 in November 2015

Version 3.0

Version 3

Version 2.0

Version 2

Version 1.0

Version 1

Site accessibility

A lot of the original functionalities that once existed here have been removed.

This page was generated in 0.24 seconds using 2097152 bytes. Slow? Let me know.

To use project mode, the window must be greater than 920 pixels in width.
Click here to disable Project Mode.
This site uses cookies to deliver its services, to personalise ads, to store preferences and to analyse traffic. Information about your use of this site is shared with other companies. By using this site, you agree to its use of cookies.
Contact me
Contact Jamie Balfour

Get in touch with me via this form.