A screenshot of a group of Hermits, grouped by their current times in hermitclock.com

Introduction

Since my last update, HermitClock has been going strong and steady. In fact, I’d taken a bit of a break from HermitClock development throughout June to focus on redesigning and rebuilding my website. Now that the dust has settled, I’m ready to return to HermitClock to add some new and exciting features. Before anything new can be added, I decided it would be best first to do some housekeeping and to get everything in the best state possible to give me a strong foundation to build off.

Changes & Additions

Public

Recent Uploads via YouTube’s API

I’ve added a new section to the Hermit pages which shows the Hermit’s most recent YouTube upload. This was done a few weeks back and even has a whole blog post dedicated to sharing how I built a bespoke YouTube PHP client for this project. Using YouTube’s API, new uploads are queried twice a day for all Hermits.

Text Changes

As it had been a few weeks since I last reviewed everything, I combed through the site with ‘fresh eyes’. I read through the different pieces of text and updated the wording of a few sections. This extra clarity will be a nice, subtle improvement to the experience of new users.

I reviewed the time comparison widget which allows you to view what time it is for other Hermits/time zones relative to each other. I found that, while it worked, there’s room for improvement in the experience. For now, I’ve made some small tweaks to the text and layouts to make the functionality clearer. I’ve also done some work on the accessibility side of this, which I’ll share later.

Changes to the Default Grouping

I’ve changed the default grouping of the Hermits on the homepage to group by their current times. You can still opt to group them by the canonical time zone name should you prefer, but this means that any Hermits who are currently aligned in their time-of-day, are all together. While this is a preference thing, there were a few members of the community who felt this would make more sense as a default.

Under-the-hood

Behind the scenes, I made a lot of improvements. These include but aren’t limited to:

  • Refactoring sections of code for readability and reducing repetition.
  • Making docstrings more consistent throughout the project.
  • Adding more comments to different blocks of code, where the additional context helps improve the speed at which something can be comprehended.
  • Adding a whole admin dashboard to the website to allow the data to be managed from the website itself. This is powered by Laravel Filament and is a great tool for allowing easy access to the data.
  • Various bug fixes and optimisations (detailed below).

Bug Fixes

I’m glad to say, there aren’t many bugs (that I’m aware of) in the current/recent builds of HermitClock. The only true bug fix I had to carry out over this sprint of development was surrounding the YouTube API.

Laravel handles custom environment variables in a pretty easy way. This is how my personal YouTube API key is stored for the website to use. Frustratingly, as a part of deploying the site to its production environment, it’s best practice to cache the configurations for the site, which includes the environment variables.

Caching the configs was causing the YouTube API key to not work, and this broke the API itself. As such, I’ve been running the site without caching its configurations for a few weeks now. While this isn’t a breaking issue, I’ve now implemented my custom environment variable so that it’s cached as a part of the config.

Accessibility

Since initially building the time comparison widget, I’ve learned about a new accessibility feature which is aria-live. This attribute is used to tell screen reading technology that a specific section on a web page is going to have its content change and, when the content changes, that it should be read out.

I’ve implemented this onto the time comparison widget so that now, whenever it’s used to check time differences, any assistive software the user has should know to read out the results automatically, drastically improving the experience for the user.

Optimisations

As I’ve mentioned above in the bug fixes section, I’ve now got my configurations cached for the production environment. While this isn’t likely to make a noticeable difference, it will have a tiny effect on the load speeds. Even if you or I can’t tell, improving the server’s response time is always a good thing!

I use Google Tag Manager to load in Google Analytics. I then have a cookie banner to make everything GDPR compliant. To preserve the integrity of my analytical data, and to improve the load speeds while working on development copies of the site, I’ve now set it so that these pieces of code only run on the production version of the site. This is great for my experience as the website’s administrator.

Since adding the YouTube API integration, every single upload on a Hermit’s main YouTube channel has created a record in HermitClock’s database. Over 8 months, this has totalled over 1000 entries already. While that’s nothing compared to the billions of pieces of data an SQL database can handle, I decided there was no reason to bloat everything up. I’ve now set up automatic pruning for these records, meaning that any video entries older than 6 months are pruned once a day. This will ensure that the website’s performance doesn’t drop over time, as the database won’t be growing indefinitely.

The Future

From a user perspective, this isn’t the most exciting sprint for HermitClock’s development. However, it’s been a great period of growth for the project as a whole. Most importantly, everything is now in a strong position to leap forward with new, exciting features. While I cannot guarantee what will be feasible, and when certain things are implemented, here’s a quick list of what’s on my radar for adding over the coming months:

  • Live streaming status’, showing who is currently live.
  • Support for any time zone in the time zone comparison widget, instead of just time zones where Hermits reside.
  • More top-level pages: providing more information about what HermitClock is.
  • The ability to ‘lock in’ or choose a favourite background image, and persist it between sessions.
  • A newsletter which users can sign up for to keep updated on the latest HermitClock news.
  • 3d skin previews for the Hermits, as well as historic skins which Hermits have used in the past.

You can check out the other updates for HermitClock here on my website. And, as always, you can check out HermitClock itself here.

Leave a Reply

Your email address will not be published. Required fields are marked *