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

Some filters:

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!

Abstract Clocks

I recently talked to Electric Object about building something on their platform for their artists program, this is what I came up with.

When I was looking into what I could do on the Electric Object, the biggest thing that stood out to me was that not many people were taking advantage of the fact that it can run a browser, and as such, can display something made programmatically on the fly, or change with time. Instantly I wanted to do something with time.

Over the years, I’ve amassed a large collection of clocks and timers on CodePen, which served as a big inspirational source. The general idea here, is that the clocks would be abstract and difficult to read, but after spending a week with them it would be as easy to read as a regular clock, in a sense, the same way people are able to read time from the sun.

The theme for the clocks came as a combination of the original circular clock face, but instead using gradients as clock hands. From here, a lot of experimentation and explorations occured, resulting in the 5 “types” of clock.

A few of the clocks.

You can read about how to understand each clock, on this little web page … some of them are a little trickier to get a handle on than the others, but ultimately learnable.

Abstract Clocks Demo’s & Instructions
Abstract Clocks code on Github
Abstract Clocks on Electric Object

OK, Get This

Things you probably didn’t know about, in 5 minutes or less!

I recently “bumped” into, a cool little app for recording small audio casts. I figured why not, and so “OK, Get This” was born.

The goal of this “podcast” is to highlight weird and wonderful events, happenings and coincidences in the world, and then talk about them for 5 minutes or less.

For example, The Emu Wars in Australia, or the history of tug-o-war fatalities, yikes!

The individual episodes are also embeddable, which is cool, and make for nice little sharable snippets.

EDIT: I’ve began exploring as another possible outlet for new episodes. In the app there are saved “episodes”, though it doesn’t seem like the website offers it yet.

OK, Get This on Bumpers
OK, Get This on Anchor

I don't know what you expected.