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

In the last few hours, I have been working on improving the information architecture and the URLs for my tutorials. For the last six or seven years the way the URLs to my tutorials have looked is like this:

/tutorials/web/css/1/2/

Now, with a bit of work, I've written a much more beautiful system, and that makes the URLs look like this:

/tutorials/web/css/using_css/

The new system uses URL rewrites alongside a clever automated (cron) generated JSON in which all of the titles are given friendly names:

JSON
[{
  "page_name": "What this tutorial is",
  "category": "web",
  "category_name": "Web",
  "topic": "css",
  "topic_name": "CSS",
  "route": "/tutorials/web/css/1/1",
  "area": "1",
  "page": "1",
  "title": "what_this_tutorial_is",
  "friendly_path": "web/css/what_this_tutorial_is"
}, {
  "page_name": "What CSS is",
  "category": "web",
  "category_name": "Web",
  "topic": "css",
  "topic_name": "CSS",
  "route": "/tutorials/web/css/2/1",
  "area": "2",
  "page": "1",
  "title": "what_css_is",
  "friendly_path": "web/css/what_css_is"
}, {
  "page_name": "Using CSS",
  "category": "web",
  "category_name": "Web",
  "topic": "css",
  "topic_name": "CSS",
  "route": "/tutorials/web/css/2/2",
  "area": "2",
  "page": "2",
  "title": "using_css",
  "friendly_path": "web/css/using_css"
}, {
  "page_name": "Why CSS is used",
  "category": "web",
  "category_name": "Web",
  "topic": "css",
  "topic_name": "CSS",
  "route": "/tutorials/web/css/2/3",
  "area": "2",
  "page": "3",
  "title": "why_css_is_used",
  "friendly_path": "web/css/why_css_is_used"
}, {
  "page_name": "Classes, IDs and tag selection",
  "category": "web",
  "category_name": "Web",
  "topic": "css",
  "topic_name": "CSS",
  "route": "/tutorials/web/css/2/4",
  "area": "2",
  "page": "4",
  "title": "classes_ids_and_tag_selection",
  "friendly_path": "web/css/classes_ids_and_tag_selection"
}, {
  "page_name": "Display, positioning, floating and visibility",
  "category": "web",
  "category_name": "Web",
  "topic": "css",
  "topic_name": "CSS",
  "route": "/tutorials/web/css/3/1",
  "area": "3",
  "page": "1",
  "title": "display_positioning_floating_and_visibility",
  "friendly_path": "web/css/display_positioning_floating_and_visibility"
}, {
  "page_name": "Width, height, padding, margins and overflow",
  "category": "web",
  "category_name": "Web",
  "topic": "css",
  "topic_name": "CSS",
  "route": "/tutorials/web/css/3/2",
  "area": "3",
  "page": "2",
  "title": "width_height_padding_margins_and_overflow",
  "friendly_path": "web/css/width_height_padding_margins_and_overflow"
}, {
  "page_name": "Borders, box shadows, border radius and box sizing",
  "category": "web",
  "category_name": "Web",
  "topic": "css",
  "topic_name": "CSS",
  "route": "/tutorials/web/css/3/3",
  "area": "3",
  "page": "3",
  "title": "borders_box_shadows_border_radius_and_box_sizing",
  "friendly_path": "web/css/borders_box_shadows_border_radius_and_box_sizing"
}, {
  "page_name": "Color, backgrounds, opacity and gradients",
  "category": "web",
  "category_name": "Web",
  "topic": "css",
  "topic_name": "CSS",
  "route": "/tutorials/web/css/3/4",
  "area": "3",
  "page": "4",
  "title": "color_backgrounds_opacity_and_gradients",
  "friendly_path": "web/css/color_backgrounds_opacity_and_gradients"
}, {
  "page_name": "Font families, sizes, weights, variants, styles and alignment",
  "category": "web",
  "category_name": "Web",
  "topic": "css",
  "topic_name": "CSS",
  "route": "/tutorials/web/css/3/5",
  "area": "3",
  "page": "5",
  "title": "font_families_sizes_weights_variants_styles_and_alignment",
  "friendly_path": "web/css/font_families_sizes_weights_variants_styles_and_alignment"
}, {
  "page_name": "Descendant selector",
  "category": "web",
  "category_name": "Web",
  "topic": "css",
  "topic_name": "CSS",
  "route": "/tutorials/web/css/4/1",
  "area": "4",
  "page": "1",
  "title": "descendant_selector",
  "friendly_path": "web/css/descendant_selector"
}, {
  "page_name": "Child selector",
  "category": "web",
  "category_name": "Web",
  "topic": "css",
  "topic_name": "CSS",
  "route": "/tutorials/web/css/4/2",
  "area": "4",
  "page": "2",
  "title": "child_selector",
  "friendly_path": "web/css/child_selector"
}, {
  "page_name": "Adjacenct sibling selector",
  "category": "web",
  "category_name": "Web",
  "topic": "css",
  "topic_name": "CSS",
  "route": "/tutorials/web/css/4/3",
  "area": "4",
  "page": "3",
  "title": "adjacenct_sibling_selector",
  "friendly_path": "web/css/adjacenct_sibling_selector"
}, {
  "page_name": "General sibling selector",
  "category": "web",
  "category_name": "Web",
  "topic": "css",
  "topic_name": "CSS",
  "route": "/tutorials/web/css/4/4",
  "area": "4",
  "page": "4",
  "title": "general_sibling_selector",
  "friendly_path": "web/css/general_sibling_selector"
}, {
  "page_name": "Universal selector",
  "category": "web",
  "category_name": "Web",
  "topic": "css",
  "topic_name": "CSS",
  "route": "/tutorials/web/css/4/5",
  "area": "4",
  "page": "5",
  "title": "universal_selector",
  "friendly_path": "web/css/universal_selector"
}, {
  "page_name": "Attribute selector",
  "category": "web",
  "category_name": "Web",
  "topic": "css",
  "topic_name": "CSS",
  "route": "/tutorials/web/css/4/6",
  "area": "4",
  "page": "6",
  "title": "attribute_selector",
  "friendly_path": "web/css/attribute_selector"
}, {
  "page_name": "An introduction to pseudo-selectors",
  "category": "web",
  "category_name": "Web",
  "topic": "css",
  "topic_name": "CSS",
  "route": "/tutorials/web/css/5/1",
  "area": "5",
  "page": "1",
  "title": "an_introduction_to_pseudo-selectors",
  "friendly_path": "web/css/an_introduction_to_pseudo-selectors"
}, {
  "page_name": "Advanced CSS pseudo selectors",
  "category": "web",
  "category_name": "Web",
  "topic": "css",
  "topic_name": "CSS",
  "route": "/tutorials/web/css/5/2",
  "area": "5",
  "page": "2",
  "title": "advanced_css_pseudo_selectors",
  "friendly_path": "web/css/advanced_css_pseudo_selectors"
}, {
  "page_name": "Shorthand CSS",
  "category": "web",
  "category_name": "Web",
  "topic": "css",
  "topic_name": "CSS",
  "route": "/tutorials/web/css/6/1",
  "area": "6",
  "page": "1",
  "title": "shorthand_css",
  "friendly_path": "web/css/shorthand_css"
}, {
  "page_name": "Precedence and specificity",
  "category": "web",
  "category_name": "Web",
  "topic": "css",
  "topic_name": "CSS",
  "route": "/tutorials/web/css/6/2",
  "area": "6",
  "page": "2",
  "title": "precedence_and_specificity",
  "friendly_path": "web/css/precedence_and_specificity"
}, {
  "page_name": "CSS rules",
  "category": "web",
  "category_name": "Web",
  "topic": "css",
  "topic_name": "CSS",
  "route": "/tutorials/web/css/6/3",
  "area": "6",
  "page": "3",
  "title": "css_rules",
  "friendly_path": "web/css/css_rules"
}, {
  "page_name": "Optimising CSS delivery",
  "category": "web",
  "category_name": "Web",
  "topic": "css",
  "topic_name": "CSS",
  "route": "/tutorials/web/css/6/4",
  "area": "6",
  "page": "4",
  "title": "optimising_css_delivery",
  "friendly_path": "web/css/optimising_css_delivery"
}, {
  "page_name": "Cross platform and browser compatibility",
  "category": "web",
  "category_name": "Web",
  "topic": "css",
  "topic_name": "CSS",
  "route": "/tutorials/web/css/6/5",
  "area": "6",
  "page": "5",
  "title": "cross_platform_and_browser_compatibility",
  "friendly_path": "web/css/cross_platform_and_browser_compatibility"
}, {
  "page_name": "Server-side generated CSS",
  "category": "web",
  "category_name": "Web",
  "topic": "css",
  "topic_name": "CSS",
  "route": "/tutorials/web/css/6/6",
  "area": "6",
  "page": "6",
  "title": "server-side_generated_css",
  "friendly_path": "web/css/server-side_generated_css"
}, {
  "page_name": "CSS and Sass",
  "category": "web",
  "category_name": "Web",
  "topic": "css",
  "topic_name": "CSS",
  "route": "/tutorials/web/css/6/7",
  "area": "6",
  "page": "7",
  "title": "css_and_sass",
  "friendly_path": "web/css/css_and_sass"
}, {
  "page_name": "An introduction to responsive web design",
  "category": "web",
  "category_name": "Web",
  "topic": "css",
  "topic_name": "CSS",
  "route": "/tutorials/web/css/7/1",
  "area": "7",
  "page": "1",
  "title": "an_introduction_to_responsive_web_design",
  "friendly_path": "web/css/an_introduction_to_responsive_web_design"
}, {
  "page_name": "Tablet and smartphone friendly CSS",
  "category": "web",
  "category_name": "Web",
  "topic": "css",
  "topic_name": "CSS",
  "route": "/tutorials/web/css/7/2",
  "area": "7",
  "page": "2",
  "title": "tablet_and_smartphone_friendly_css",
  "friendly_path": "web/css/tablet_and_smartphone_friendly_css"
}, {
  "page_name": "CSS transform",
  "category": "web",
  "category_name": "Web",
  "topic": "css",
  "topic_name": "CSS",
  "route": "/tutorials/web/css/8/1",
  "area": "8",
  "page": "1",
  "title": "css_transform",
  "friendly_path": "web/css/css_transform"
}, {
  "page_name": "CSS transitions",
  "category": "web",
  "category_name": "Web",
  "topic": "css",
  "topic_name": "CSS",
  "route": "/tutorials/web/css/8/2",
  "area": "8",
  "page": "2",
  "title": "css_transitions",
  "friendly_path": "web/css/css_transitions"
}, {
  "page_name": "CSS counters",
  "category": "web",
  "category_name": "Web",
  "topic": "css",
  "topic_name": "CSS",
  "route": "/tutorials/web/css/8/3",
  "area": "8",
  "page": "3",
  "title": "css_counters",
  "friendly_path": "web/css/css_counters"
}]

On the front end, the page is found via its friendly_path value. To keep the order correct, the pages are not given a key. Although it would make it slightly faster to give them this key, it would mean that the order isn't correct any longer.

Changes to title names will actually break the system and any changes made will need to be followed by a running of the automated script (which happens every evening anyway).

I'm still testing this feature out, so if you find any bugs, let me know. 

Posted by J B Balfour in Website news

Over the next few weeks, I'm moving all of my teaching resources from PowerPoint and Google Slides to my own website which will bring them to HTML and CSS and bring them alive.

By bringing them to the web, I can use what I know best to make these slides highly interactive and useful. I have in the past done this with some of the slide decks I have used at talks I have carried out (such as my talk at Amazon on a small business using AWS to promote growth) and also as an introduction to ZPE but things haven't been as smooth as they will be this time.

This project stems from my hatred for both Google Slides and PowerPoint due to the lack of something that mirrors CSS - I have been developing my own PowerPoint theme over the last few years and every time I think of something new, I need to update all of my slides. CSS fixes this and it's something I've wanted for a very long time.

It's now found at https://www.jamiebalfour.scot/teaching/slides/.  

Posted by J B Balfour in Website news

Since about December, I have been modifying my website with some pretty big changes here and there (for example, the H1 element is now centred and rounded). 

Many of the changes that have come have been very subtle and not changed any of the usability of my website. However, with the latest update, I also took a look at how 'BalfPopup' was working on my website and noticed it was highly inefficient. I made several changes to this so that it could be used with much more ease. However, at the same time, I broke one of my gallery's oldest features - the previous and next buttons. 

These were very useful and will have to return at some point very soon. They are also featured on my microgallery tool as well but do not work there either.

Posted by J B Balfour in Website news

Every version of iOS is a masterpiece of artistry and creativity that makes designers reconsider their design language, particularly in the field of technology. 

A result of that is that when Apple began to remove curved user experiences from it's operating systems several design teams across the world saw this and followed suit. 

Version 3.x of my website focused on the move from skeuomorphic things like my notepad style notes, box shadows everywhere and generally ugly interface to a much flatter interface. The interface was very square. This is how most flat interfaces start off. Apple's did, and back then square designs were in and curved ones were out. But slowly but surely Apple's own design language has changed to encourage the use of subtle curves into their operating system.

Well, you may or may not have noticed, some subtle curves have made their way into my website, and it all started with something as simple as my little quick alert box (try running a code sample of my website to see what I mean). You'll also have noticed that all the buttons on my website are curved too. This change is minor and fairly unlike the version 3.0 move from skeuomorphic elements to flat ones, but it's important and it's been received very well. 

Posted by J B Balfour in Website news

As part of the JavaScript tutorial on my website, I introduced testing code live on my website. Testing code was a major piece of making the tutorial work, but it was always going to be very straightforward with JavaScript and require no real security concerns since it runs in the user's browser.

Today I began to develop a way of testing both PHP and Python samples that exist on my website. I aim to have this ready by mid-March but it is slowly being rolled out across my tutorials with much of the PHP tutorial already set up for this. 

I'm hoping this will be useful and bring further benefits to using my tutorials which I'm very proud of.

Posted by J B Balfour in Website news

After a long time of a very square/rectangular look to my website, I have brought back subtle curves here and there across the website. These curves are designed to make things like buttons more obvious as well as add to separation. There has been a lot of exploration around what suits it and what doesn't but I think the changes I have made are very clean and follow design techniques of today.

For example, input boxes and windows now have curves. You may have also noticed that I have introduced a new quick alert to the site as well as the newest version of BalfPick.

I'm aiming to make my design a combination of curved buttons and elements built on a flat design and think I've done it well so far.

Posted by J B Balfour in Website news
website
update

After having integrated push notifications into my website way back in early 2016, I'm now removing them from my website altogether. I think we can also agree, push notifications are quite an annoying thing these days and I've decided to remove them from my website - I never sent any for a while anyway.

From now on, the only push notifications that anyone will receive are from my blog. I intend to have an option to subscribe to these somewhere on my websites.

Posted by J B Balfour in Website news

Recently after an amount of thought, I have decided to finally make the switch from a sans font to a serif font. I am keeping the Roboto font on my website for things like the site links and masthead, but for the content, I have finally made the switch to Roboto Slab.

This is not necessarily going to stay, the thoughts of the readers and viewers are what determines what I do on my website, and whilst some have already expressed that they preferred the sans font, I am on the mindset that a serif font can also do the job well here.

I will revert this if the survey results do not show that people think this works well on my website.

Posted by J B Balfour in Website news
sans
serif
font
roboto
slab
website

All of my existing tutorials are being updated over the next few weeks with some small but very nice changes.

These changes are all inspired by my own experience of teaching. Firstly, all articles within tutorials will now have learning outcomes - what you are expected to know by the end of the article. Secondly, I am adding an "Over to you" section to many tutorials that allows you to try out some tasks based on what has been covered in the article. Thirdly I am now working on actively adding downloadable versions of all code samples across my website - this will include tutorials as well as pages like ZPE. This, again, will take a while for me to finish.

Posted by J B Balfour in Website news
site
update
tutorials

In case you hadn't noticed, for the last few days my website has been completely ad-free. Yup, that's right!

One of the original features of my website was the sidebar, and it's original purpose was to serve ads to users on my website and make a bit of money. Some months I would make as much as $40 which covered my website costs. But from last Monday I have been trialing out not running ads on my website at all and I'm quite happy to continue this.

Statistics now show a trend that people are less likely to trust a website if it has ads on it, so it makes sense. On top of that, after looking at my own website advert analytics I have noticed more people have ad-blockers than don't - so it no longer makes as much as it used to. So really, there's no point in me continuing with ads.

Posted by J B Balfour in Website news
jamiebalfour.com
google ads