As a developer it can be difficult to describe your work to non-coders. Much of what we do on a day to day basis is fairly abstract and takes place under the buffed-and-polished hood of the interfaces we all are accustomed to using. Once in a while though – a tool comes along that helps bridge the gap.
Earlier this week, a project strolled across my twitter feed called JSCity. Put together by the Department of Computer Science at Brazil’s Federal University of Minas Gerais, this program allows you to take any JavaScript codebase and render it into a three dimensional, interactive city (sidenote: this is just one implementation of what’s called the code city metaphor). Take a look at this wiki page, with examples from all sorts of commonly used JavaScript libraries.
So what does Kin’s codebase look like in city-form? Drumroll please:
It’s a rare treat as a developer getting to actually see something that you’ve only ever interacted with abstractly – but more importantly – it’s an excellent opportunity to give the team you work with new perspective on both your work, and the underpinnings of your product. I went a step further and marked up the generated image with some annotations to indicate what features belonged to which buildings:
Your Turn
I highly recommend giving this a whirl if you’re a developer, and taking the opportunity to look at your company’s website or product through a new lens. If you’re interested, here are a few things to keep in mind:
- All the instructions for setting up your own city are on the JSCity Readme.
- You’ll want to remove any JavaScript libraries (such as jQuery) from your project before rendering – the size of the libraries will often eclipse the buildings of your custom code.
- The screenshots are great, but the real magic is getting to move around and interact with your city in 3D.
- One counter-intuitive thing to remember is that the size of the buildings is often inversely proportional to the efficiency of your code (since the height translates to lines of code). So while it may seem majestic to have a few soaring skyscrapers in your city scape, they might be an indication some refactoring is in order. (I’m eyeballing our profile and time-off features as I write this…)
Good luck and happy architecting!