Over the last few days, I have been working hard to update a range of products and services across my website. This list outlines the updates:
- ZPE ZULE updater (the system used to distribute updates for ZPE) has been fixed and improved
- ZPE 1.12.2 fixes the updater system for the new (faster update system)
- DASH 2.0 updater has also been fixed on both the server and product
- The online YASS runtime has been fixed
- The system status service is now more streamlined
ZPE 1.12.2 will be released in the next few days to address the updater issue. It will require a manual download to update it.
This day in 2018 was the most significant in the history of my website.
The plan was formulated in late 2017 to refurbish my website performance in a huge way.
The first step was to replace DragonScript 3 with a much faster version called DragonScript IV. DragonScript IV allowed my website to handle up to 6 times more requests simultaneously (up to around 1 million requests).
The second step was inline optimisation and caching. My caching system is substantial across my website and relies on several different technologies, such as cron jobs used to clear and freshen caches, automated scripts to generate cached data and my analytics system to determine what needs to be cached. The inline optimisation feature is similar to the caching system on my website, and it's what ensures that all data transferred is compressed before it is sent. If you take a look at my gallery on my website, you'll see that all photos are watermarked. The watermarking is preprocessed and cached and then reread when it is needed.
The third and final part of this was a bit more manual and required me to optimise other images and content across my website.
The result was that my website went from loading in 100 milliseconds to around 10 milliseconds.
balf.io is a new domain I aim to use as a nexus or portal to content on my website. For example, docs.balf.io is used to host documents from my website on a separate domain, and the main domain, balf.io, is a redirect site to make redirects easier and it uses the same URL redirect system as found on my website.
In fact, the codebase for balf.io is entirely the same as my website. So the slide viewer on it uses DragonSlides and the document system on it is my DragonDocs.
Some users of my website will notice that there has been a minor update to my website, bringing the version number up to version 4.3.
The update to version 4.3 brings a new font, the Oswald font, mainly being used for titles. It also fixes an issue that hasn't really been addressed on the web with text with background clipping when the text reaches the next line - it does this by splitting the text by spaces into inline spans with a 'glowing' background. Please have a look at my title to see what I mean.
This is the first change in a long time, probably some 4 years as Quicksand has been used almost everywhere. For fans of Quicksand like me, please do not fret, it's not going anywhere!
Next font size, I'm taking the font size back down to 16px instead of 17px. I had this like this for a good few years but in recent years I moved away from the agreed standard size of 16px up to 17px.
Some of these new changes actually also affect the slides hosted on my website as well.
A few improvements have been made over the last few weeks in DragonScript as well. This should make the website smoother than before.
Otherwise, the rest of the website remains the same.
I've wanted to do this for a long time - a dedicated server!
For the last five years, I've been running Jambour and all hosted websites using a VPS (virtual private server) with Digital Ocean - an absolutely marvellous company. Well, not any more! As of yesterday, most of my websites have been moved to my own dedicated server, sitting there in my office.
There are massive benefits to this.
Firstly, cost. It's actually much cheaper for me to run a dedicated server in my house than to rent a virtual part of a server. Our prices were going up so much that we started off paying £7 a month for our virtual private server in 2018 and by the end of 2022, we were paying over £26.
Second, upgradability is much easier, we can provision a second system quickly which can run an updated operating system and be spinning up in less than a second of downtime.
Thirdly, security. Unlike using Digital Ocean, the only way to connect to the server is from within my house, there is absolutely no other way to do this.
Fourthly, performance is much higher. A dedicated system can have whatever performance you want. We've got a 12-core system as opposed to a 4-virtual core system.
Fifthly, storage space. We have a whopping 256GB and 2TB of additional space available as opposed to 50GB.
Finally, ownership. I now physically own the server and can shut it down or turn it on whenever I need to.
I first introduced my tutorials back in 2012 when I began refurbishing my website. Since then they have become incredibly popular (I use a page visit counting algorithm that I have developed and I have noticed a huge spike in visitors to my reviews and tutorials over the last few months, with an average of around 500 visitors a day).
However, it struck me that in reality, my tutorials are not so much 'tutorials' but free online courses. I say this because when I look at say, my CSS tutorial, it doesn't focus on doing things in CSS like websites such as CSS Tricks does, but instead it focuses on giving a solid platform to build upon. For example, it teaches some of the core features like backgrounds and border-radii, but not more advanced things like the clearfix model or how to add gradient borders as I have been doing on my website.
From today on, these tutorials are now rebranded as my Courses and they will continue to be free, as with many of the resources I provide.
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:
/courses/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:
/courses/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:
[{
"page_name": "What this tutorial is",
"category": "web",
"category_name": "Web",
"topic": "css",
"topic_name": "CSS",
"route": "/courses/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": "/courses/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": "/courses/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": "/courses/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": "/courses/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": "/courses/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": "/courses/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": "/courses/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": "/courses/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": "/courses/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": "/courses/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": "/courses/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": "/courses/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": "/courses/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": "/courses/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": "/courses/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": "/courses/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": "/courses/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": "/courses/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": "/courses/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": "/courses/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": "/courses/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": "/courses/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": "/courses/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": "/courses/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": "/courses/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": "/courses/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": "/courses/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": "/courses/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": "/courses/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.
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/.
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.
Every version of iOS is a masterpiece of artistry and creativity that makes designers reconsider their design language, particularly in the field of technology.
An example of that was when Apple began to remove curved user experiences from its 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 in their operating system.
Well, you may or may not have noticed, that 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.
