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

Send some love:
Buy me a Coffee

Some filters:

Upcoming: I'll be at WebConf Asia in June, grab a (discounted) ticket here and say hi!

The Zen Zone

The Zen Zone is an exploration into what it takes to slow myself down, switch off, meditate.

The idea behind the Zen Zone has been sitting in my head for a year or so now… the thought that I sometimes get stuck focusing on a simple boring task, but when I’m supposed to be focusing on something, like work for example, I find myself wandering aimlessly.

After using Vue recently for the What Have You Made Today extension, I decided to rock back to React for this one. Honestly I feel that both of them are very similar when it comes down to designing and ideating while you create… so no harm dancing around a little bit.

I set out to build a few simple “games” that would keep me captivated, and went in search of inspiration outside of the regular web circles.

The Switches game is inspired by… well, every day switching on the lights. As well as that little satisfaction you can get when animating things nicely in code.

The Switches Game.

The Swirl game has been inspired by the Japanese zen gardens, of which monks would focus on to help clear the mind.

The Swirl Game.

The Break game was inspired by the general nature and make-up of all things. Everything can be broken down into smaller and smaller pieces.

The Break Game.

The games are stitched together in a way that makes me feel like I can expand upon these games easily, add more to the platform, and grow it out when I feel.

Having launched the project, there is a lot to be done straight off the cuff design and development wise. So lots do do still!

The Zen Zone
The Zen Zone on GitHub

Jolly JS Journeys

Had a blast at JSConf Asia! I’ve been talking about the journey of creation for a while now, and am always changing how I want to present it. This is one of my favorite renditions.

Honestly, JSConf Asia was really top notch this year, I met an incredible group of developers from all different backgrounds. Could barely sleep afterwards. I highly recommend it to anyone thinking of going!

Watch on YouTube.


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

I don't know what you expected.