When I was building my "first" real web app. I used a lot of resources: blogs and tutorials from other developers and the developer community in general. Without these resources there would have been no hope. So I feel it necessary to immediately give back some of what I received and write a brief-ish post about the broad development process behind monospace.gallery: a simple web app.

Three Things

I used three "things": UX, Lean methodology and the Meteor node framework.


Monospace is a "distilled" idea. I say distilled because my aim, in general, is to offer the user as much as possible, with the least effort possible. In the case of Monospace.gallery the effort was reduced to only one click, while receiving a portfolio layout.

This might sound great, but after reflecting on it, I think it might actually be counter-productive. This app is so simple to use, it doesn't "feel" like it does anything. And yet it does the same as other, similar apps I've discovered. The difference is that the other apps require you to put in your username, choose a password, and setup other configurations - and by creating this interaction, it actually "feels" more like a product than mine.

This is when I discovered that very simple can actually be too simple. I've decided to stick with my one click setup anyway, and add more features.


Since this was mainly a learning process I needed to go through the whole process from start to finish as quickly as possible. That meant going Lean - MVP release as soon as possible.  Just get it out there.

To go lean I would need a framework to match it.

I like Node because I want to learn only one language, arguably the language of the web: javascript (which real programmers throw up all over).

Then I found Meteor: which is a web-app development framework based on Node.

Meteor: The Framework

Meteor is possibly the simplest and quickest way yet available to put together a valid web app, with a back and front end. It mainly achieves this by a clever integration between a templating framework and MongoDB Collections - and beefed-up with a series of handy-dandy plugins that do a lot of heavy lifting for you.

I'm big on APIs, and it just so happens that Meteor has some real cute oAuth plugins which make API connection and manipulation a doddle. And, along with the use of a special Collections method for storing data, the API JSON data that is usually pulled down from APIs just fits into mongo like a glove.


Meteor rolls with a bunch of plugin goodness - plenty of what you normally need you will find. For example, a user-accounts package. I was missing an oAuth plugin for Dribbble, so I had to write one: now it's available to you - free of charge. That's how it works.

Development and Deployment

I don't want to just go on about Meteor: but it's worth stating that Meteor comes with a local dev server, and "almost too easy" deployment. Really, I can't overstate how easy deployment is, it is literally one line of code.

The Front-end: Pre-processors

Of course, you can roll out your html/css/js the vanilla way. Or, you can have Chocolate and Strawberry, using pre-processors: in my case Stylus, Jade and Coffeescript:

Stylus: No designer likes colons and brackets, they're just superfluous.

Jade: Anyone who suffers from closing-tag issues (I'm looking at everyone) should use Jade. In Jade there are no closing tag issues - there are no tags!

Coffeescript: Python is an awesome programming language - it's clear and concise. And Coffeescript makes javascript more like Python.

Adding these pre-processors to a Meteor project is three lines of code - and collectively they'll save you a zillion lines of code (figuratively speaking).

Coding Environment

Just two words about my coding environment: I use the command line (terminal), vim and Atom.io.

Talk to me

Er..  I really think I've written enough in one post, but I'm not sure I actually said anything useful. If anyone found this useful, but maybe lacking details, please let me know and I'll write about it.