Wednesday, July 3, 2013


Humans are really not that creative, so for the last couple years I've become kind of obsessed with the idea of creativity prosthetics, tools to expand your imagination in one little area or another.

Contrarian is one of these. It's a tool for building website layouts on the fly. You interact with if through the keyboard (and if you're really neardy, through the dev-tools console in your browser) by pressing "N" for a new layout and "L" for layouts you like (then press "N" for another).  There's an evolutionary algorithm in the background that will learn your preferences over time, what colors you like, what border sizes, what widths for things etc... so over the course of a few dozen "L" hits it will start to show you progressively awesomer layouts.

You can also hit "S" for snapshots of the layouts you've "L"'d.

Okay the nerdery. Go no further unless you care about actually getting the code for those mockups.

I swear I'll make the UI for this better in the future, but if you just can't wait, open the dev console in your browser (Control Shift J in Chrome, and Control Shift K in Firefox) and type in "model.stock" that will return an object (it's actually the saved genome of all those things you said you liked in the past) in the stock object there's a "codes" property, that holds all the raw html (in the form of one long string) for each of the layouts you said you liked before.

I'm calling the project Contrarian because I had to break pretty much every best practice and good heuristic of front-end web development to do it. I build the html (and the stylesheet) dynamically with Javascript, I use tables for layout. I taint the canvas by trying to insert other images. Paul Irish is throwing up in his mouth right now and doesn't even know why.

Anyway, you're free to use this for whatever. Enjoy.

No comments: