Describe, at high level, what needs to be done to make a sandwitch, in your head. Then write code that looks exactly like what you said in your head, as much as possible. Dont worry if it turns out to be impossible to implement that way - you can always tweak it later until it becomes possible. Just try to make sure it reads more or less clearly.

Repeat with each of the steps, checking whether there already is a library that does that for you.

  function makeSandwich() {
    var breadSlices = getBreadSlices(2);
    var ham = getHam();
    var butter = getButter();
    var butteredSlice = spread(breadSlices.first(), butter);
    return foodPile(butteredSlice, ham, 
                    cheese, breadSlices.last());
  }

As you progress this way, you'll notice that you'll be able to implement some processes in terms of more generic functions (e.g. spread and foodPile).

You'll also notice that you need an environment (macro, such as kitchen, or micro, such as frying pan) to temporarily place stuff that you're working with, while you wait for some process to complete. Thats when you start creating classes and objects that represent this environment.

Real code example:

https://github.com/jlipps/async-showcase/tree/master/promise...

One of the best ways I ever came across to break down a problem.

I thought garlic fries, like the sort at Giants games, were delicious! Some garlic, olive oil, parmesan, etc. I was shocked to discover that here and in the UK garlic chips consist of chips (fries) with garlic-accented mayonnaise spread all over them.

And don't call it Aoli. That's just dressing up a disgusting condiment with a fancy word.

Since then I've looked at the ingredient list of every other product with great suspicion, expecting to find mayo everwhere...

I use butter and mayo for one of two things: flavour (eg I love kerry gold on toast ;-) often nothing else) or moisture - but if I don't need the moisture, usually because I've got tomato, peppers, coleslaw, relish or something else providing that, I will leave butter and mayo out. Unless I want them for the flavour. (As an side, I don't understand why people would ever want butter on a breakfast roll)

These are precisely the instances in which I would want something oily (butter, marg or mayo) as waterproofing for the bread. (Mustard also works, if it's appropriate for the sandwich.) "Everyone has the gout," as they (don't actually) say in French.

I just don't need a peanut butter and butter and jelly sandwich.

Of course I also grew up in very immigrant heavy areas so that may have been part of it.

In Russia, where I grew up this is the only way to make a sandwich.

In the UK, standard practice is to butter sandwiches on the inside, ie on the surfaces of the bread which interfaces with the filling. Are you by any chance talking about buttering the outside?

I think a lot of it comes down to the fact that most sandwiches these days are prepared and then eaten right away, whereas I was brought up in a world where sandwiches tended to be prepared long in advance of being consumed.

That said, Americans will cheerfully slather "mayonnaise" on bread.

example story: as a user I would like a form page that take an address I enter and renders a google map of it

http://i.imgur.com/38pXuJT.png

High level overview:

  var form = renderForm();

  form.onAddressEntered(function (address) {
    renderMap(address)
  });

  form.onAddressEntered(function (address) {
    renderMap(address)
  });

  onAddressEntered(function (address) {
    renderMap(address)
  });

  function onFormSubmit(form, listener) {
    document.getElementById(form)
      .addEventListener(function(e) {
        e.preventDefault();
        listener(e);
      })
  }

  onFormSubmit('address', function (address) {
    renderMap(address)
  });

Lets see if there is a pre-made function to serialize a form. (looks up) Ah, found it.

Lets modify onFormSubmit again. It should now add an event listener to the selected form which serializes the form and prevents the default submit event.

  function onFormSubmit(form, listener) {
    var form = document.getElementById(form);
    form.addEventListener(function(e) {
      var data = serializeForm(form);
      e.preventDefault(); // which is submit
      listener(data);
    })
  }

  onFormSubmit('addressForm', function (data) {
    // lets make sure we got that first part right
    console.log(data.address); 
    renderMap(data.address)
  });

So how do I render a map? Etcetera.

I think its important to always have a written-in-code high level overview of the process, even if it turns out that the current high-level overview is potentially wrong. You can always change it as your understanding (of both the process and the tools) grows. But at the end, that overview becomes your code, and the end result will unavoidably end up as understandable as your current understanding of the entire thing.

The hardest part of this process is to stop worrying about getting all the details right (at the beginning) and only focus on whether the code you're writing is describing your understanding of the problem well.