David Banks

Web Developer

Rebuilding the Howick Weather Station Website Part 1 - Background

19 November 2018PWAPreactJavaScript

This is the first post in a series of posts about the rebuilding of my Howick Weather Station website.

Background

I run a home weather station where I live in Howick, Auckland, NZ. I have loved observing the weather since being a kid, and then finally in late 2009, at the end of my first year of university, I purchased and set up my weather station.

Part of the dream was sharing all that data with the world. At first, I didn’t really have many ways to do this apart from the weather station PC software generating pre-built web templates. But over time I became hungry for full control of what went on the web - full customisation of the content, experience and design.

First Efforts

During my early uni years, I did some entry level Computer Science for general education papers (my main degree was in Mathematics and Statistics), and it was here the first seeds were sown for my love of web development.

Using what I had learnt I started on my journey of building that fully customised website for my weather station. Initially, my knowledge was very limited and my designs and coding were a little questionable :) I iterated several times over the following few years, adding features and changing designs.

Decision Time

Jumping forward a few years, at the end of 2013 I had just finished my Masters in Statistics, and reached a point where I had to make a decision - find a job in statistics and stay on that career path, or attempt to pursue a career in what I was becoming increasingly passionate about - web development.

I spent the next 6 months attempting option 2. I dedicated my time to self-learning, practicing, upskilling myself. I built the current version of the Howick weather station during this year of 2014. And eventually my choice paid off - I got some work doing some small front end web apps and managed to get into a web development career!

Today I can safely say that it was one of the best decisions I've made in my life so far. It's awesome to do something you love for a living!

Re-assessing Howick Weather

Fast-forwarding to the current day, 2018, I have gained over 3 years of valuable commercial experience. I’ve learnt heaps since 2014 and it became painfully obvious my code for the Howick Weather Station website was not something I would be proud to show to fellow developers. It was disorganised, inconsistent, lacking an overall well-defined structure in the codebases (frontend and backend), hard to maintain and debug, and hard to even understand some of the code I wrote 4 years ago!

Another problem is the current version is not mobile friendly. It only shrinks down to 768px width. At the time, I had great trouble figuring out what to do about graphs and charts on such small screens - how to get it to fit into such a small space. And looking at my fairly low proportion of mobile traffic to the website back then, I decided to leave this challenge until another time.

And finally the front end space had been evolving rapidly the last several years. There are now awesome new tooling and frameworks to help build dynamic data-driven websites like mine, and browser support is far better than it was 4 years ago.

Change was calling.

Answering the call of change

Therefore while I am in between jobs, I’ve taken it upon myself to rebuild EVERYTHING from the ground up, frontend and backend. Nothing will be left safe from being refactored and in fact the majority will be totally rewritten. Even the database structure and the data pipeline required to process the weather data on my local weather PC and sync it to the web servers where the web site is hosted will need to change.

The new codebases need to be structured, organised and easy to understand, maintain and extend. The code must be easier to read, better commented, and common functionality should be split out into reusable pieces.

According to Google Analytics over 50% of the web traffic now comes from mobile devices - so the new site must be mobile friendly. The previous challenge described above must be tackled and solved this time.

Performance was never an issue on the existing site - but must be monitored so that the new site is as fast as possible.

I’ll be writing about some design decisions, the technology stack, and problems I’ve run into (and how I’ve got around them) in the coming few months. Stay tuned!