Weather – a weekend hack

Today I have been left to fend for myself whilst my other half is out doing virtuous deeds for others, and having spent the last week off in rural Norfolk doing everything but be on the internet, I wanted to spend some time putting together another quick hack to engage my brain before returning to work.

I always carry a notebook with me in my bag no matter where I’m going, and I use it to write down all the germs of ideas which could some day make it into something resembling an end-result. Today was the turn of something I’ve been thinking about for a while – just a simple page to display the weather. What’s new about that, I hear you ask? Well, nothing really, but like most personal projects it was created out of a need to tailor it to some very niche personal requirements.

I’m commuting into London at the moment, getting up at 6am, and religiously checking Google Now every day – firstly for ‘weather in Colchester’, and then ‘weather in London’. Only then can I move on to sleepily stumbling around, and attempting to dress myself in something appropriate to the day’s climate. The two places aren’t crazily far apart, but I’ve been caught out several times by it being a beautiful day in Colchester, only for it to be chucking it down when I get off the train, or vice versa. I feel the cold very easily, and being caught out without a jacket or hoodie makes for a very grumpy Sally. Once I’ve done my search, I flick through the timeline of the day to see what it looks like for the key times I’m going to be out and about. It’s not a lengthy process, but it could be simplified. So I made my own.

The result

You can see the final version here: https://sallylait.com/labs/weather/

The result was a responsive one-pager, with either 5 or 6 weather blocks (depending on the flow, layout-wise) showing the weather in Colchester and London at different times of the day. The 6th wasn’t actually needed, but I put it in at certain display widths as the gap being there didn’t look great, and I thought I might as well display something rather than putting in a blank square. Data comes from the forecast.io API, which allows 1000 free requests daily. As this is a small personal project that should be more than enough for me, but there is a paid version if you’re interested. All sorts of data is returned, which is one of the attractions of why I picked that particular API rather than others (other reasons being the sensible JSON it returns, the decent amount of free requests, and the documentation. It also has a nice dashboard to track API usage.), and the page could easily be extended to show more data. Except that wasn’t what it was about, and I deliberately wanted something simple.

For the weather icons I just used a simple icon font from from Meteocons. The icons are freely available as web fonts, desktop fonts, and images for both commercial and personal use. I haven’t customised them at all as they did the job (and my efforts would likely end up looking… less good…).

I’m quite pleased with the end result. As with previous hacks the intention was to do something quickly, get it online, and to give myself boundaries for what I wanted to achieve. I’ll be using it from Monday, so may end up introducing some tweaks depending on how it matches up to the ‘real’ weather. In a happy coincidence it’s been a gorgeous day here, and it was a lovely excuse to spend some time outside.

Future improvements

I do actually have some ideas for extending this in a different way, which could be quite interesting, but would be a much bigger piece of work. It’s likely to never come to fruition, but it’s back in the notebook for now.

At present the location coordinates are hardcoded to be the latitude and longitude of my home area and Liverpool Street in London. I could easily swap this out to be geolocated instead (and already have some geolocation work which could be transplanted very quickly), but I just felt it wasn’t needed. As I have a specific use-case for this, I wanted to keep the code as clean and simple as possible.

The API has seemed a bit slow at times during testing. I could put in some caching, although again, due to the fact that I’ll likely be using it once a day and will be the only user (although anyone else commuting to London from Colchester is welcome to use it!), this probably isn’t necessary and would again introduce some bloat. I’ll monitor this, and also the reliability of the data it’s sending me, and consider whether to switch to another service in the future.