About my website

This website was designed, developed and created by myself, Jamie Balfour. My brother, Michael Balfour created the original logo which is what the current logo I created is based on (the current one was given to me by Indie Pheonix-Hill).

The question I get asked most frequently is this: what did you use to build the software, to which I reply, a bunch of editors. Normally at this point the response is, which ones did you use? Did you use Wix or WordPress or something? I then reply to tell them that the whole website has been hard coded from nothing using HTML, CSS, JavaScript, PHP, YASS, Java and powered by MySQL databases.

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 than before"
• "Awesome."
• "Your new site looks great! Can you do a site like that for me?"
• "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 baked 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.

Every page on my site is also 100% HTML5 valid, unlike many sites including Apple, Microsoft, Google and so on.

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 writing jamiebalfour.co.uk from the ground up using HTML5, CSS, JavaScript and PHP. Not one prebuilt content management system would be involved.

A bit of history

My original plan for my site was to make it dedicated to information about me. By 2011, when I released version 1.1 of my website, I planned to use it for my software downloads and documentation for my software 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. jQuery and D3 are the only libraries 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 and now I've got a successful business that does web development for other companies!

The technology

Since my update to the Jambour Digital Sahara server, I have had a lot more control over the technologies of my website. I now use:

The 2013 website

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

My 2024+ logo was created by Indie Pheonix-Hill

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 DASH (formerly BalfBlog), my WISP and DragonScript - all of which are 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. DASH (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 2015, 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 introduction of DragonScript was a major stepping stone for the backend of the website.

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

In October 2017, i.e. the initial 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. This was also the point at which DragonScript IV was conceived with the release of the 4th major iteration of my website.

Thanks go to the following

• My brother, Michael Balfour
  • For my logo idea (although the current version is my work)
• Daniel Bruce: Entypo pictograms by Daniel Bruce — www.entypo.com
• 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.com is used.
• 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.
• OneSignal
  • OneSignal powers push notifications that are used on my website and through DASH. 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 morale boosters).
  • Jonathan Craig
  • Graeme Reid
  • Calum Cormack
  • Murray Szymanski
  • Sharang Shandil
  • Ben Stevenson
  • Brodie Hamilton
  • Mark Young
  • 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 my own Wonderword. In fact, the HTML I 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 the 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 and eventually Atom.
• 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
  • Cyberduck developers for Cyberduck
  • Atom developers for Atom
• 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 and eventually my the Red Revolution 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.

The outcome

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

Building a site to be speedy is not easy!

The website is exactly how I wanted it to look and feel. Usability testing showed that people like the website the way it is.

Software used

This website was designed and built using Atom, 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.

Power efficiency

A crucial major development within my website from day one was on power efficiency. Many websites are not efficient with energy when in use. I made my website lightweight and made sure it drew very little power by making it performance efficient.

To do this, I ensured that JavaScript refreshes were kept to the bare minimum.

Theme

The theme used on this site consists of my favourite colours: greys mixed with blues 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 (this is actually only the light theme).

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 inspired by this colour combination and thought since the orange colour was my favourite colour scheme I would give it a go.

On the 29th of May 2019, I also added the dark mode to my website, which can be enabled directly or by using the operating system/browser theme.

Thanks to colorcombos.com I have made cupcakes for my site's colour scheme.

Colour cupcakes for my website'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 is what generates the pages on 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 log in 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.

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 uses my scripting syntax (YASS).

Next 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.

Now hosted on my own Jambour Digital Sahara web server, my website is powered by DragonScript IV (now a Jambour Digital product), offering double the performance and can handle five to six times more concurrent requests. It is also much easier to update.

What powers my website?

What powers my website?

I use a bunch of technologies that I have developed to power my website. I made an infographic that shows exactly what does power my website.

My website is made up of many things that I have made available on my website for others to download. They are available in the Projects section of my website.

For my website, I use a lot of my own projects such as BalfBar, BalfPick, Dash, BalfComment, ZPE and my own DragonScript IV.

Click on the picture to see it in all its glory.

Flat design

In December 2015, I chose to move from my semi skeuomorphic design to a much flatter design. The result is much better consistency, much simpler 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.

In 2020 I began to redesign chunks of the website and bring back subtle curves where it was appropriate. This move has taken away a lot of the original design language which focused on removal of curves.

Version history

The following is a history of the main changes made in each minor version.

The major version (1.x, 2.x, 3.x and 4.x) brought in several big changes. Version 1 was built with a WYSIWYG editor, whereas version 2 was my very first HTML version, version 3 was the first version to be responsive and version 4 was built with the exceedingly fast DragonScript 3 and DragonScript IV.

Website Version 3 (Perthshire) (June 2013)

Version 3.x logo

• 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.
  • 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 the mobile site
  • Further improved the Download Center
  • New hosting package
  • Speed improvements
  • Better SEO
  • Mobile menu improvements
  • jamiebalfour.com is the main site
  • Less support for IE8, 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
  • Uses the Source Sans Pro font
  • Flatter interface in general, focusing on solid colours and dropping gradients and curves.
• Website Version 3.8 Crieff (January 2017)
  • Updated to DragonScript 2 for major performance improvements
  • Updated to BalfBar 1.1

Version snapshots

Version 3.7 (Sept 2016)

Version 3.6 (Nov 2015)

Version 3.4 (Jan 2014)

Version 3.1

Version 2

Version 1