Blog
My 10k Apart entry is a Notable Project
Another 10k Apart competition, and another Notable Mention!
After taking a break for a few years the 10k Apart competition from A List Apart was back this summer with a new challenge. Build a compelling web experience, delivered in 10kb or less and make it work without JavaScript.
Having taken part in the two previous editions I went to work straight away on my entry for this year. I created a little game called Country Hopping. It's a bit like Pokemon Go, but without all the walking. The aim is to link as many bordering countries as possible before running out of neighbours or making a mistake. You get three lives, but if the last country picked has no neighbour left, you lose no matter what.
To make it work without JavaScript, I used PHP for the game functionality. PHP is a server side programming language. There is no need for downloading anything extra on the users end for it to work.
The main challenge I faced was the amount of buttons I needed on a page. I compiled a list of all countries with neighbours and there are 162. Creating a html button for each one, on a plain web page without styling, takes you over the 10kb download limit. I needed a clever solution.
First, I split the world in two: east and west (of the Atlantic Ocean). This solved the problem for the west, but the east was still too big. Next I used a .htaccess file with compression rules to make the files as small as possible. This did the trick. And it left me with enough kb to style the experience with CSS.
Like the previous 10k challenges this was a fun little project to do alongside client work. Useful too. Page speed and making websites work in all conditions are important for any website. Finding ways to build a good website that loads fast is challenging, but worth the effort.
I am delighted that my entry is one of the Notable Projects. I browsed through the other entries and there are plenty of good ones. It's amazing what you can do with just 10kb if you put your mind to it.
The next challenge is yours. Play Country Hopping and see how many countries you can link together. If you would like to see the code, you can check it out on Github.