2020-03-01 17:00 | misc

Site Update 3

I changed career just over a year ago (of writing), but just like the decorator who doesn't decorate his own house, I had not yet updated my own site.

I used a number of scroll effects before, and un-necessary imagery. As a freelance web developer, I had client projects on the go, but non-disclosure agreements meant I could not list them in a portfolio. I tried instead to demonstrate my ability on my own website.

The other goal of the site was to stick my money where my mouth was and use my own custom-built CMS, but in reality, I only ended up using this CMS once. Client projects - for the most part - required tucking into an existing codebase, or the scope of the project was far beyond what a CMS could be catered for.

The technology behind the site ended up gathering dust. There were little annoyances which made me seldom add new content to it, and I just didn't have the time to go through and maintain a CMS which would otherwise not be used on client work.

I had great fun doing all the front-end effects however. Timing which elements animate depending on the scroll was easier than expected, and the overall effect gained positive feedback.

I am now Technical Director of a Saas platform called Sports Injury Fix (which will get it's own blog entry - soon). Over the last year, i've certainly had things to write about, but never actually got around to publishing them.

I can sense this entry is starting to get boring so i'll get on with it - probably the most contreversial aspect of the site you are now looking at is that it is written in VueJS. It has nothing server-side, and if you've followed my very limited blog to date, you know what my critical opinions have been on React, and other JS frameworks. I am going to admit I was wrong.

The key reasons I avoided React (I say React, because it's _the_ framework I commented on before I even knew about VueJS) was down to stability and maintainability. Clients are paying us as professionals to deliver them a project that they can get the most out of. Due to React being so new and un-tested, using React felt like using clients as canaries down a very unstable mine.

Naivety was another reason. I have seen so many people say "you should use React - you can put all your code in the front-end" - no, you cannot (or should not, rather). Client-side code is public. A client is not paying you to develop code which someone else can inspect and copy into their own project, but to develop something for them only. If any outside developer asked me what our tech stack is in Sports Injury Fix, I can guarantee they would make this comment. I was dismayed at one person in particular when I showed him his own code which he thought was magically hidden away..

We hired a full-stack developer who is way ahead of his age, and he introduced me to VueJS. I was nervous about porting to it, and a few hiccups made me feel like I let myself down, but it has been more than worth it. The time saved by it (compared to traditional Javascript) is still hard to believe, let alone the much tidier and maintainable front-end code.

I won't bore you with the technical reasons other than it lets you focus on the variables and data, rather than having to write swafts of code to get a value from an element, do something with it, put it back, change other elements, etc. No one wants to write or maintain boilerplate code.

The gist of all this was to write a new version of the website which solves the identified problems:

  • Reduce the amount of useless imagery. It's a blog mostly. I've no need (currently) to demonstrate front-end ability and effects, and being honest, my freelance career was more focused on the harder data processing tasks anyway.
  • Reduce maintainence. I updated Symfony more times than I wrote a blog post. I had issues with NPM updates, though most of that was me being silly.
  • Improve deployability. I don't use a database on this site, and can pretty much deploy it to a free micro server on AWS or Google Cloud and spend pennies a year at most. I update the site (and content) by pushing updates to a Git repository.
  • Remove barriers to content writing. Previously, I would need to log in, use a wysiwyg editor, and near-enough pray the formatting would be ok. Adding image content was a nuisance of jumping through CMS hoops, because I had no interest in updating that just for myself. I now write content in html. Might try a Markdown parser, but for now this is perfectly fine.
  • Avoid having to tweak things to get slight differences working. I'm not a fan of Bootstrap or Foundation-sites anymore. I moved to Tailwind, and haven't looked back.

Well, that's that. The added bonus of a full VueJS site is that it can be turned into a Progressive Web App with barely any additional changes, though that's a step too far for a blog site.

You can probably guess from the overall look of the site, but the overhaul took a few days of casually dipping into this to get it built, and a little extra time to port over the old content.