Monday 7 September 2020

Re-design & the interactive timeline

A lot has happened in the past couple of years. I got married, had a child, switched jobs, and the apocalypse started. So many changes.

Similarly, I've changed the site a bit.

I've updated the Legacy of Kain Timeline to use Vue rather than the mix of Bootstrap, Jquery and Knockout. The end result is that there is less data to load, so the page should run faster.

Doing a calculation on the folders involved, the new page is almost a full Megabyte smaller than the previous. In modern times this payload difference probably doesn't mean too much, but it helps a bit, and it means that the libraries for making the page function are also smaller. Fewer calls, fewer complications results in it being outright quicker to run and respond to changes, even on my terrible laptop.

For example, changing the colour or toggling entries on the old one would take a few seconds for everything to be recalculated. In the new version, the changes are nigh instantaneous, because it is just changing the elements that have changed, not the entire page.

Part of the complication was changing libraries - I switched from using bootstrap to using vuetify. Both of these use similar layout methods (e.g. a 12 grid layout) but vuetify uses flex. Changing this meant that I had to adapt the whole page layout. Though this took a while, it was worth it - it's quite obvious that I had no idea what I was doing with the old layout (I put in column declarations, then overwrote them all, so what was the point of the declarations?)

I then filtered those changes through to the entire site, including this blog. I also removed redundant files, so my site should take up less room on the server for now.

All in all, it was a long arduous process, but hopefully worth it both for myself and for whomever navigates the site.

There is more content coming, but life is full-on.

No comments: