To use this website fully, you first need to accept the use of cookies. By agreeing to the use of cookies you consent to the use of functional cookies. For more information read this page.

Personal Blog

Today, I discovered a few security enhancements that I could apply to my website so in the next few days I will be working to improve the login system further as well as making the site more reliable when dealing with threats.

I'd like to thank Jonathan for his unsuccessful attempts at breaking into my website and Ben for suggesting it.

Posted by J B Balfour in Website news

There are more photos in my Photo Gallery of Petro.

Posted by J B Balfour in Website news

I have mentioned that I would be adding new tutorials to my website in the past so this may not necessarily be new news, but hey, nothing like a site update.

Most recently, version 3.6 of my website was released, a new version in the way the site is coded, making the site more consistent on the server side and easier to manage. 

Very recently after, I started to work on a new tutorial on CSS. This is the first of many planned tutorials and will hopefully be finished by May this year. As well as this, I've had emails and comments stating that my PHP tutorial is good, but since reading through it myself, I find it a bit too short and have decided to extend it far further with a new section on Advanced PHP planned.

These are all planned for the CSS tutorial:

  • Width, height, padding and margins
  • Borders, box shadows, border radius and box sizing
  • Colour, backgrounds and gradients
  • Fonts, font families, font weights and styles
  • Pseudo-CSS selectors
  • Advanced pseudo-CSS selectors
  • Adjacent sibling selector
  • Child selector
  • Descendant selector
  • General sibling selector
  • Universal selector
  • Minification and combining CSS
  • Optimising CSS
  • Cross platform and browser compatibility
  • jQuery and CSS
  • Shorthand CSS
  • CSS @ rules
  • Precedence and specificity
  • Server side generated CSS
  • Introduction to responsive web design
  • Tablet and smartphone friendly CSS
  • Printer-friendly CSS
  • Advanced responsive CSS
  • CSS content
  • CSS transitions
  • CSS transformation

Bringing it all together

Posted by J B Balfour in Website news

Yesterday I worked tirelessly to make my site more modular and many new fixes. On top of that, I have just made my site far more flexible and easy to update.

I'm expecting to be able to work on my site in a far better way now as well, keeping it far more flexible and making changes far easier. As a result I released version 3.6 just yesterday, 1st January 2015.

Happy 2015!

Posted by J B Balfour in Website news

Since I started my website, I've been putting in loads of little things that make my site more attractive.

In my eyes, CSS is one of the best things to come to the world, because with it your creativity can flow wildly and you can build sexy sites.

Anyway, enough about that and enjoy some of my favourite styles and features of my site. Each of these elements is entirely my own work - none of the styles are taken from others. This post will not be focusing on my blog although I created it.


My note is used to represent something of importance that should be noted.

Code sample

My code sample is used to hold a piece of code in it.

Data table

My data table is used as a table designed for holding data, rather than being used for any form of layout. The black style was inspired by the dark mode on my site.

The inline code sample

My inline code sample is used to put code in the middle of a paragraph of text.

The tooltip

My tooltip is used within an article or page to represent information that should likely be already known and is left out of the main body of the article. Hovering the text will make the tooltip bubble visible.

The image frame

My image frame is designed to hold an image. It also has space for a caption below.

The block image frame

My block image frame is different to my standard image frame in that it will take precisely 50% of the content space (minus padding and margins) and if another image goes to the side will begin floating to one side.

The photo gallery album container

The album container is a feature of my photo gallery that many find particularly nice. This is used to hold a front photo of a collection of photos.

Colourful lists

In Novemeber, one of the features I decided to build was a collection of different colourful lists. A few have said they are very full of character and bring some nice new design features to my site.

The floating logo

I've had loads of comments from people who like my logo, but also people liking the fact it floats over the page.

The lined document

This document style that looks like a lined piece of paper was designed for keeping notes on my site. I use it in the University section.

A lot of this has now changed since this went mostly on a skeumorphic design pattern.
Posted by J B Balfour in Website news

I've updated a few features on the site, particularly I've had to remove the snowflakes animation as it was slowing the performance of the system that was browsing the site - not good for usability!

I've also added a more friendly settings panel as pictured:

When the settings button is clicked this appears as a modal dialog like a lot of other features across the website.

I've also changed the search box, and whilst it looks the same, it is far easier to maintain and should appear better on older browsers, including old versions of Firefox and IE.

Posted by J B Balfour in Website news

I have updated my search box on my site four times since the start of 2013, and I'm never entirely sure what design to go with. I currently like the design of my search box but it is so flawed that it's become such a site hinderance. Even now, as browsers get better and better, things just don't always work the way you planned with websites. 

Tomorrow evening I will begin a new search box. You can tell me what you think in the feedback form.

Posted by J B Balfour in Website news

Whilst not necessary, I do build a lot of customisation features into my website. One such feature is the Invert Colour feature that inverts the colour of the page and it's contents - using a black background and white text making it easier to read. All features are used throughout the browsing session of the site or you can choose to store them in a cookie on your computer so that every time you visit the site these features are enabled.

Now I'm adding another customisable feature to my site with Dark Mode. Dark Mode is a similar functionality to Invert Colour. The only difference is that it only affects the menu. Please take a look at this:

Posted by J B Balfour in Website news

Aim: The aim of the latest update was to make the website more consistent across multiple platforms.

In the last major update prior to this (3.4), I changed the site to have multiple fonts across the different platforms: Helvetica was used on Macs and iOS devices and Segoe UI on Windows and Windows Phone devices. 

Today, I'm happy to announce a cross platform Open Sans font has been installed on to this website. As well as that there is a far more consistent search box on the site with no issues on any of the modern browsers.




Posted by J B Balfour in Website news

As I did last year with my website, I have decided to theme my site based on events like Halloween. This year the site is totally different from last year with a special font for the top and the headers. The site will still work as before, only some parts will look different.


Posted by J B Balfour in Website news