Week 4 Update!

— 4 minute read

Highlights:

  • Demo Mode!
  • Updated data strategy
  • Created an identity
  • Removed PWA

Week 4 Update

After the poor progress last week, this week has been very productive. I'll try and run down the main updates, issues I hit and anything else interesting that happened!

Demo Mode

I felt an important thing with this is for potential users to be able to demo it without signing up, and especially without connecting their FreeAgent account. It's something people will be understandably nervous about cos of the nature of the data being passed around.

So I first had to get some demo data, unfortunately FreeAgent don't have a prepopulated account that could be used which is a shame. However, I decided to just use my own data as a seed and then randomise the time and money values. So I added some randomising code to the data loading routines and then dropped this data into a JSON file. Now when you load data in demo mode it requests a specific year/month but I just grab a random month from the demo dataset, I update the dates stored to match what you requested and then it gets sent back. This is anonymous enough for me and is random on top of it.

With the demo data in place you can now go to https://www.app.freelanceinsights.com/demo and see the dashboard in action. Boom!

Data Loading Strategy

I've been back and forth on this topic a few times but think I've settled on something now! To summarise how things work:

  • On first load of the app (after connecting to FA) the app will request 12 months worth of data (12 months is only really requried for the heatmap display currently). Each month is loaded via it's own AJAX call (I could group these to reduce traffice but for now it's fine, perhaps later), and that data is then cached on the client. Previously I cached this on the server but I want to minimise the amount of personal data stored under my control.
  • On subsequent loads, the app will request the last 2 months of data. The thought process being that the last 2 months is more likely to change than the last 12.
  • The last 2 months data is used for the main displays of Current Month vs Last Month figures.

And that's it - it's much simpler when I write it out. It wasn't when I was trying to figure it all out!

Identity

I'm getting close to wanting people to actually start engaging with the project, even if it's just a wee peek as a follower of the blog. However, the 'identity' of it left a lot to be desired, so this morning I went about trying to create a somewhat more appealing logo to at least be used as a favicon and for the main header of the app.

I'm 100% not a designer so this was never going to win awards but I thought I could come up with something that didn't hurt people's eyes. I've always liked the idea of using negative space so thought I could combine the F and I in some way.

Anyway, a few iterations later and I've settled on this version. Any design critique is more than welcome!

Freelance Insights Logo

Favicons etc

With the logo settled on I used RealFaviconGenerator to upload the logo to and have it generate all the icons that are needed. Dead easy to use and would recommend it.

Removing PWA & Service Worker

Vue apps generally come with a PWA plugin by default which sets up a service worker to have caching and having the app work as a PWA. This was fine and just trundled on without any set up from me but when I deployed the new icon and some other updates it would report an app update but I couldn't get it to actually reload the new resources.

Some quick Googling showed I should window.location.reload(true) in the service worker's 'updated' callback, which I did but resulted in an infinite loop of refreshing, with the new content never actually being pulled down. Long story short, I didn't feel like wrestling with this at this point when I'm going to be pushing updates regularly and there's no one using it, let along using it as a PWA. So I ripped out the PWA plugin and service worker and we can tackle that another day!