Sketching Your Code On Paper

Just as an author sometimes requires a quick brainstorm in order to get his/her thoughts in order, so do programmers require something similar. You can't just start coding. Technically you could, but you'll be at a loss as to what to code. You'll define some variables here or there. You'll start a for loop. And maybe you'll create a few functions in order to get a general idea. But after some time, you'll be deleting more than you are writing. So one of the more useful methodologies that I've been using for the past couple of years, is to write and draw everything down before I touch a single line of code.

And not on a whiteboard, where you'll on occasionally look at it if you're in the vicinity. But on something that you can carry with you wherever you go. A small notebook. In a recent post, I ran through how to developer a blackjack game in JavaScript. But before I coded that up, it looked something like the following.

I worked out the variables that I would most likely require and a quick sketch of the entire thing. Coding after that was very simple. I simply looked at the sketch and followed along. Changes can be made instantly, and more importantly you can take it with you, wirelessly.

So before you start that next big project, get out your pen and paper and start writing. Here are a few guidelines that I use myself and that I've used for some time now.

Catchy Title

It sounds weird to title your ideas, but it helps. And the more descriptive the better, because at some point down the line you're going to forget what it is that you had in mind. So be as descriptive as possible.

What's the objective?

Writing down a small 2 or 3 sentence objective is a good way to begin the creative process. If you're making a new website for a client let's say, then your objective is pretty much whatever it is that your client wants. If you're making a blackjack game, then your objective are the game rules.

Objective: Create a JavaScript game using vanilla JavaScript.
Allow for 'n' players

This is just a small sample of my actual Objective when I made the game. Essentially, any thought that comes to mind I jot down. Whether random or not. I just want to get an idea of the process that I'll be partaking in.

Pseudo-Code

This is where it starts to get fun.

1. Create cards
2. Create deck
3. Create players
4. Shuffle
5. Push cards to players
6. Hit me
6a. Deal card
7. Stay
7a. Update players
8. Check for winning condition

This pseudo code will change many times. It will get added to, deleted, renamed, etc until it makes sense. Before I even touch the code still. But also many times, after I start to write code. If I hit a snag somewhere that doesn't make too much sense, I can quickly go and update my pseudo-code and fix it before I even worry about for loops and conditional statements.

Sketch it out

This last step is huge. Because it instantly tells you what your idea is and brings it to life before your eyes. Normally it could take you days to weeks to come up with a test design or to even mockup a concept if you were to code it up. But it can take you minutes to a few hours to design your idea on paper. Draw even the smallest detail. Even the tedious items. The link to the contact page. The shadow on the button. The border on the div. Everything. By the time that you finish your drawing, it should be almost production ready.

So pick up a cheap notebook if you're just starting out and on your very next project start to draw. Don't worry about what you're drawing, just draw. It will slowly begin to take shape and to make sense before your eyes. By your fifth or sixth project you should be sketching/coding at a much smoother and faster rate.