I'm a tinkerer, tuner & tamperer who's been around the block.

Some filters:


Canvas JavaScript polyfill for the vital and pivotal S we all drew in school.

The web canvas is a powerful tool, the API is fairly straight forward, and provides us with the tools to draw almost anything. Circles, squares and lines are the building blocks we have used since the dawn of time…

That said, there is also one other basic shape… that we all learn in school… passed down through generations… as old as time… no one really knows its origin.


Absolutely a must have for any canvas project.

S.JS on GitHub

What have you made today?

Got a little sick of my old “new tab” page, so I built something small to replace it.

The idea of this little project was to build something that replaced the default “Chrome” new tabs page, which, although good, would be a little frustrating at times… it would load a whole google search bar, when really I was using the browsers URL bar to search anyway. It was also sending off requests this way and the next, which weren’t really neccesary.

All I really wanted was a simple speed dial, and some motivational text. So thats what I did!

The extension in action

One pleasant surprise, was that the FireFox addon’s use exactly the same api’s as Chrome, and that there is a whole documentation amongst browsers, about how to implement said extensions. Yay for standards!

The extension on GitHub
Chrome install page
FireFox install page

Toolsday - Headless Chrome

I had the pleasure of speaking with Una Kravets & Chris Dhanaraj about Headless Chrome

Toolsday has been a favorite podcast of mine since its conception, so it was great to be a part of it, speaking about Headless Chrome.

Podcast and shownotes

Tetris Pieces

A couple of months ago, I did a little commission work for Electric Object, in the form of Abstract Clocks. While working on the clocks, I ended up creating a bunch of different proof of concepts and directions. This was one of them.

The initial idea for “Tetris pieces” was to create a bunch of small video game demo’s that would use AI to play on your wall, I had looked at snake, a brick breaker game and a maze solver. Ultimately, I found myself drawn to the different renderings of Tetris games. It was so mezmerizing watching tetris play out automatically on the Electric Object, I had to stick with it.

To begin the project, I began researching tetri’s AI’s, and immediately found one that was absolutely perfect built by a very talented developer, Yiyuan Lee.

You can read about how the AI works in the post linked above. Here’s a snippet about how the AI decides where to put each piece. Its definitely worth the read!

To meet this goal, our AI will decide the best move for a given Tetris piece by trying out all the possible moves (rotation and position). It computes a score for each possible move (together with the lookahead piece), and selects the one with the best score as its next move.

The score for each move is computed by assessing the grid the move would result in. This assessment is based on four heuristics: aggregate height, complete lines, holes, and bumpiness, each of which the AI will try to either minimize or maximize.

From this point, I forked the code and set my mind to hacking how the pieces were drawn, so I could have multiple different looks and feels.

Tetris Pieces, on display.

These are, from left to right.

1: Ambient Blocks, in this version the tiles take up solid block colors. As the game goes on, the hue of these colors rotates very slowly, meaning whenever you look at the wall you should see slightly different colors. This playful touch made it my personal favorite.

2: Classic Tetris, in this specific rendering I’ve copied the colors and patterns from the original GameBoy game, including that ever present green tinge.

3: Colored Classic, using the colors of the tetris game that appeared on Super Nintendo, the colored tiles perhaps look the nicest on the screen, and definitely bring back some nostalgic feelings!

All in all, the project was definitely a good experience. When you have to plow into someone elses code, with no background its funny what you can learn. Finding and editing the code that renders the tetris pieces to the canvas was a little tricky, but ultimately very rewarding.

Tetris Pieces in Action
Tetris Pieces source on Github
Tetris Pieces on Electric Object


“If you really hate someone, teach them to recognize bad kerning” ~ XKCD

Smelvetica is an experimentation in taking one of the worlds most beloved fonts, and turning it into a morbid monstrocity.

This project began by pulling the original “Helvetica” font from my system files, and making a copy of it. From there I opened it in FontForge, which is a brilliant open source font editor.

Helvetica opened up for editing in FontForge.

From here, the task was fairly simple. I opened up each “version” of Helvetica (these being bold, oblique, light etc), randomly went through the capital and non capital letters and moved them around within their guide grids. This had the desired effect of ruining their beautifully crafted kerning, as such, creating “Smelvetica”.

With the fonts completed, the remaining work was to wrap it all up with a nice web page, and some installation instructions.

The Smelvetica website.

The installation ended up being the most devious part of the prank in the end, since it would install on the system it makes it really difficult for anyone to understand why everything looks just that little bit wrong.

Smelvetica website & examples
Smelvetica source and installation instructions

Passive Aggressive Office Simulator

“Remember everybody, the crisper is for green vegetables only, anything else found in it will be thrown out at the end of the day.” ~ Passive aggressive post-it note.

One of the funnier things I found from office life was the small messages that would blast out to the whole company “There’s a fire drill tomorrow.”, “The coffee machine on the first floor is broken” etc. Now that I’m working remotely, in a weird way, I miss them. As such, the passive agressive office simulator Slackbot was born.

Welcome to office simulator!

The core of this slackbot is the npm module, slackbots, which honestly made the whole process a breeze. The bot itself is broken into a few key pieces.

The first piece, is the scheduler, which will take specific actions (namely sending a passive aggressive message), and give it a time to be shared with everyone. These are generally within work hours.

The second piece is a “ticker”, which keeps the script checking the time, and seeing if there is anything that needs to be ran.

The final piece, is of course, the messages themselves. They were all hand written by me, and also include wildcard variants… so something like the day of the week, or a piece of stationary (please put the stapler back where you found it!) could be switched out, to add a small extra dimension of randomness.

Really keeping it passive

Another little piece, which I felt gave it that little bit of extra “officey” cringe, was follow up messages. If your office is out of ink, you’ll be sure to get another message when it gets back in!

Oh no, we're out of ink

… 5 days later

Phew, we have ink again.

Building a slackbot was a fun way to spend a day or two, honestly, the amount of articles and support docs out there makes it one of those technical, yet quickly rewarding projects!

Office Simulator source and installation instructions

Obnoxious dot CSS

Animations for the strong of heart, but weak of mind.

As you’ll know, if you’ve been following my projects for a while, or seen any of my talks, one of my favorite things to do is find something thats good, in this case, the increasingly awesome set of CSS api’s for animations, and see what terrible things can be made from them.

Obnoxious.css is an exploration into what kind of freakishly frustrating things you can do with CSS animations on the web, the project itself is modeled after Dan Edens Animate.css.

The website, in question.

The key to bad animations is fairly simple really, make them move to much, make them run to long, make them flash and jitter! All of these terrible components have been compiled into the Obnoxious.css library!

The crowining glory of these animations, is “fontalicious”, which contains a devestatingly frustating series of font changes.

Watch, as 10 fonts fly past before your eyes.

I always find that when you explore the way things SHOULDN’T be used, you get a little bit of appreciation for how good we ultimately have it.

Obnoxious.css website and examples
Obnoxious.css source and instructions

Friends Talk FrontEnd Podcast

The talented Jag Talon and I talk life, frontend and just generally hang out!

Friends Talk Frontend is an delightful podcast of developers discussing how they got to where they are now, and what their day-to-day life. In general, its always a good time!

Have a listen!

I don't know what you expected.