A Whole Set of Changes Under The Hood

February 16, 2013

You might have noticed that the site has gotten a little overhaul. Yes, the brand new navigation of two days ago is gone and has been replaced by a new responsive navigation, written from scratch by yours truly. But in addition to the new, dynamic menu that has been added, a few tweaks have been made to the site as well.

New mobile tweaks

First, for mobile devices the titles of all articles will appear smaller. It's important that you can access the website on mobile as well as on the desktop and it should look equally good on all platforms. I do my best and here we go, a bunch of improvements in addition to improvements made a bunch of days ago.

A new way of navigating the site

Yes, the menu has been completely overhauled and exists in three different states: as a mouse-optimised menu that also works on iPad in landscape, as a touch-optimised portrait mode for on tablets (in portrait, obviously) and as a mobile menu for when you need access to the site from your mobile phone or device with a small display. You can also check out all these different states of the menu by resizing your browser window if you are on a desktop. Make that window smaller and you will see what I mean.

No more cookies

I've also removed the requirement for cookies if you want to use the archives or view a particular article. It used to be that your article selection was saved into a cookie and then loaded so your browser knew which article to show you. This has been changed.

Which article you select is now directly taken from the url (using the same principle behind $_GET in php, but using Javascript in this case) and no longer from a cookie. This has several advantages, among those hotlinking is the most important one. You can now directly copy the url to the article you want others to see, and they will be able to see said article without having to navigate to the archives or homepage. All because the post number is contained within the url. This required a bunch of back-end changes as well, so it wasn't a change that was done immediately. In the long run, I expect that this approach will be replaced by PHP and MySQL, because every time you load an article, articles.json needs to be loaded and parsed. If that file gets too large, the impact on the site loading is too big and that is a no-go.

Correctly titled articles

A minor change (it required only a single line of code to work) that was also made is that when you navigate to a certain article, your browser will now show the article title at the top of your browser window or on top of the currently selected tab. It used to be that this said 'Selected Article | The Cornerstone', but that has been changed so it now represents the title of the article. Navigation check

Also, if you navigate to an article and the article url is not correct, you will see an error message that tells you that the article could not be found or that the url is broken. This will usually only occur when an article has been deleted or if you have manually changed the url (for instance, you changed the end of the url to article.html?id=99 and article #99 doesn't exist). A glimpse of what to come

Now that these major changes have been made, you can expect other changes coming to the website as well. I'm probably going to add a portfolio section, and I'll see if I can't get a lightbox working for mobile devices. But that's for future endeavours.

TL;DR: I optimised the site and made it prettier. It also navigates better and requires no cookies.