100 Days: Gallery

A few months back, I collected all of the images and animations from my prior 100-day project in a gallery site. I tweeted the link at the time, but may have neglected to tie it back to this blog. Better late than never (this site’s spiritual tag-line):

As is the case with the majority front-end web development now, the app was made using a host of JS packages, but the main technologies used were: TypeScript, the AngularJS 2.0 beta, Sass, JSPM and Gulp. And although I use a fairly similar loadout at work, I was mainly interested in trying out Angular 2 on a small-scale project, given the enormous syntactic and notional differences between it and all 1.x incarnations.

I hosted the gallery’s source on GitHub, and while I wasn’t attempting to build a general-purpose gallery platform, I think it could easily be put to other uses. Give me a shout if you rework it into something else!

Insanity Press

A while before leaving the UK’s blustery shores for a land more maple-y and hockey-rich, I decided I couldn’t say farewell to my best friend without marking the occasion. Kris, as he is known to most, has been my acquaintance for more than a decade, after insisting one day on following me home from school, then calling round for me the next morning to walk back. Sure, his family had just moved across the street from my house, but I was distrustful of this sudden and unsolicited act of friendship. Nonetheless, he persisted, my contempt gave way to fondness, and the rest is a beautiful and only slightly unsettling bromantic saga.

And so: armed with many years’ worth of SMS logs between the two of us (amusing to exactly two human beings in the known universe), I set out to compile a mini-anthology of our textploits, over the course of our friendship. This is what it ended up looking like:

The first and most arduous step was sifting through the stupefying quantity of raw material to find the print-worthy conversations. I didn’t have a word count in mind when I started out, and the quality threshold was a little hard to find, but I got there. I used a very simple XML schema to manage the data, which looked like this:

 <conv div="And then:">
  <msg name="k"><![CDATA[Just WALKED down ye olde ass sliding stairs.]]></msg>
  <msg name="a"><![CDATA[Changed times... *single tear rolls down cheek*]]></msg>
  <msg name="k"><![CDATA[My ass will never slide these streets again.]]></msg>
  <msg name="a"><![CDATA[*solemn nod* 'Tis a burnt out husk of an ass.]]></msg>

Once I had sifted through the eons of texts and copied them into my XML file, I was left with a script of about 12,000 inane words. I then started work on the visual design, and decided on a retro-pixel look, to compliment the great deal of gaming shenanigans we undertake. I made up some 9-slice resizable speech bubbles and accompanying 8-bit avatars, then started work on a layout system in AS3 (for compilation to AIR for desktop). A finished page looked like this:

I knew the final size of each page would be A5, per the printing company I’d chosen, so I worked with a 1:1.4142 aspect ratio and wrote some classes to paginate the full script into bitmap-after-bitmap of carefully placed speech bubbles. From here, I added some code to save each page sprite out to PNG, ran this, and was left with a set of 48 page images.

I then took to the Colour Lovers site to borrow and manipulate some of their lovely patterns and palettes, and ended up with a set of 24 pixel-art-esque background spreads to use throughout the book. I brought the backgrounds and the previously-exported page content together in Photoshop, then printed the whole thing to PDF, conforming to the print-shop’s format.

The print and binding shop I opted for was the Gloucestershire, UK-based Inky Little Fingers, who did an excellent and speedy job of printing the books. I was pretty short on time amidst the many tasks involved in moving country, so I decided not to have a proof printed in advance of the final set. Sadly, as it turned out, the matte finish I picked for the front/back cover desaturated the design somewhat. To contrast to the printed shots above and below, here’s the original cover image. It would have been good to crank up the contrast and vibrancy to compensate for the finish, but as that was my only issue, and the rest of the book turned out great, I have no complaints.


My wife and I recently made the move from Glasgow, UK to her home province of Beautiful British Columbia™, Canada. While we’re getting set up over here, we’ve been graciously hosted by my parents-in-law. And as a direct consequence, we have all been playing a veritable butt-ton of board games – foremost of which has been Boggle.

When stumped for a gift…

It’s a fun game, and one variant is to sit around without any timer running and openly shout out words (of 4+ or 5+ letters, to keep it interesting) as you see them. After a while, you get the impression that there cannot possibly be any words left to find – but is that really the case? I wanted to find out…

…And I also wanted to avoid using one of the innumerable free solvers available out there, for the sake of – erm, fun?

So, as a weekend project, I wrote the above Boggle solver, publishing for Flash, (and courtesy AIR) Android and iOS, and uploaded the source code to GitHub: Please feel free to do what you like with it; the licence is MIT.

Here it is running on a Nexus 7 tablet and iPhone 4S

For anyone looking just to install the app on mobile (for those crucial on-the-go Boggle scuffles), the APK will install for any device set to allow 3rd party apps, but the IPA will only work for jailbroken iOS devices, unless you recompile with your own provisioning profile.

The app is using a modified word list from InfoChimps, with the words shorter than 3 and longer than 16 letters removed (per the rules and limitations of game). That still leaves around 100,000 words, so at least in my usage, it tends to come up with a high percentage of never-before-seen lexical wonders. Educational tool or ego-deflating depression fuel? You decide!

Colour Extractor Utility

This is a quick post to share a utility I put together to extract all unique RGB hex colours from a given image.

My use case: I’m working on a project where a grid of clickable colour swatches needs to be generated. Due to limited space, it’s been difficult to settle on the the specific palette, knowing that the flexibility of an RGB or HSL colour picker isn’t an option. So I’ve been mocking up a few different arrangements of swatches in Photoshop, and experimenting with their layout.

At the same time, things like available space could change at any point, so between that and the need to adjust colours down the line, I don’t want to lay all the swatches out by hand and be tied to one arrangement. The layout has to be generative, and so I just need a raw list of colours to work with. The initial plan was to use the eye-dropper and pick out each one, pasting the hex values into a text file – but then I noticed I’d have to do that 60+ times for each revision, and thought: “Hello?! This is the 90s! Make the computer do it.”

The utility is very simple, and will just sift from the top-left pixel, traversing right, then to the next row – comparing against a running list to identify all the unique colours. Each colour is stored as a hex value (e.g. 0xBADA55) on a new line in the clipboard-able text data. You can then use some basic find-and-replace commands to get the list into a workable format for your needs.

If your image has gaps between swatches as mine does, and a background colour, this will be picked up as the first (or second) colour in the list – so you’ll likely want to trash that before going further. Another potential gotcha is the presence of anti-aliasing in your image, which could add unwanted in-between colours into the list. If you’re dealing with such a palette image, I would consider scaling the image down using a non-resampling algorithm – such as the ‘Nearest Neighbour’ mode in Photoshop. With some experimentation you should be left with only your core palette colours, ready for import into the extractor utility.


I'm Adam Vernon: front-end developer, free-time photographer, small-hours musician and general-purpose humanoid.