Building Geese Games

I got into a general life slump recently, and so to try and cheer myself up more, I’ve taken up building fun projects. I joined this industry because I wanted to build things, but I found that I got so carried away with organising coding events for others, I'd not made time for myself. I started ‘Geese Games’ last year, but I only really got as far as designing a colour scheme and general layout. I got a bit intimidated by the quiz functionality, so sheepishly put it to one side. This meant that the design was already in place though, and that I couldn't get caught up in fussing over design too much. So I figured this would be a good starting point!.

Why geese? I really like geese, and I wanted something super silly, so that I’d not end up taking it too seriously. So I intentionally made a slightly ridiculous design and picked out some pretty odd types of geese, and got stuck in. It got a bit intense; at one point I got such tech tunnel vision that I accidentally put one goose type in as ‘Great White Frontend Goose’, went around telling people that there really was such a thing as a 'great white frontend goose and then later realised I'd actually just made a typo. Little bit awkward... But it has been good intense, and I've had so much fun with this project! Building it has made me pretty happy.

Techwise, it’s gone great so far. I’ve really enjoyed the freedom of getting to choose both the tech and the general direction. Having a fun project with a series of small, fun goals also distracted me from my normal imposter syndrome of ‘oh god I should be able to do this JS exercise why can’t I’. I’ve gotten to play around with lots of new things that I’d have otherwise not have used, as well as things I already knew, and had a lot of fun! I've written up key learnings below to wrap up the project.

React

A quiz like this definitely doesn’t need React, but I wanted a reason to play with it. I knew React from my day job, but it’s been a while since I last got to use it and I wanted to practise it more. I’m a little uncertain on how well React and accessibility mesh together, and wouldn't use it for everything, but it is a nice tool to develop with.

Accessibility

At the start, the quiz was purely visual, as it was just a React exercise. Halfway through the project though, I decided I also wanted to explore how to incorporate a11y into this. I had a think about how to do this, and decided to add an alternate screen reader version of the quiz, whereby the alt text of the goose quiz image lists facts about the goose. This required getting more data, because at that point in time, each goose description was one big chunk of text copied from Wikipedia which included sporadic references to the actual goose name (which was both a little unstructured and would have also ruined the quiz). So I researched things like ‘weight’ and ‘uk population’, added this to the goose data, displayed this on the detailed goose info pages, and then created new alt tags specifically for the goose quiz page image that summarised this information. A side bonus of creating this screenreader version was that the information on the detailed geese pages became more structured, which benefits everyone.

React Router

I’d not deployed a React app to GitHub before this project, had assumed it would be a bit more straightforward than it was, so I learnt a lot here. One thing that caught me up was having to use <HashRouter= instead of <BrowserRouter=. I don’t like the hash appearing in the browser, so one thing I wanted to do was switch to a Page Enum situation. I ended up passing data through the router across pages though, and I’m not sure how I’d do this without Router anymore. So that’s something else to work on!

Styled Components

Jo Frank ran a introductory workshop on styled-components at uncodebar 3 in 2017. It was a great workshop and afterwards I wanted to carry on playing with it, so I put it in this project. I’m still undecided about it; I don’t like the randomly generated classnames that get put into the DOM, but I do like how quick it makes changing CSS, because it’s right there in front of you in your component. I'm still on the fence when it comes to projects like this. Having said that, I know from my dayjob that it can come in handy when you’re doing more complicated things with JS and CSS, so I would probably be much more pro using it in a more complex project.

Govuk-react

The govuk-react has been one of my favourite parts of the project. I absolutely love the GOV.UK Design System, and hadn’t known there was a React version that could be pulled in. I stumbled across it when having a play around with getting the non-React version, and got up and running with it very quickly. I will definitely be using this again in the future!

ES6

I don't do a great deal of JavaScript in my day job at the moment, and so a big reason for wanting to do this project was to get to do more. There isn't anything particularly advanced in this project, JavaScript-wise, but it was all good practise. In particular, for some reason, I’ve always had a mental block with the ES6 map stuff. I’ve come across it several times in several different projects but every time I’ve really struggled to get my head around it. This project has been the first time that I’ve felt like I’ve properly understood it though. I’m not saying I could now knock out a map function on a napkin in an internet-less field somewhere, but I’m still happy with this small breakthrough!

Things left to do

There are still some things I want to do. I want to tidy up some of the React structure and JS, and in the process add in Redux. It doesn't necessarily need Redux, but I'd like to practise Redux. Another thing; the site isn't particularly mobile responsive at the moment, which is also something I want to improve, and the CSS could be improved a lot. I have plans for something else I want to work on next, but I'm sure I'll dip into the project here and there though over the next few weeks!

Thanks yous

Huge thank you to the people who’ve helped me out with this project along the way, either with technical advice, moral support or project suggestions: Alex Bokii, Pete West, Henry Blyth, Marilyn Magnusen and Bob Whitehall.