Get started with WFL

Just pick something below to explore my work, services and more.

Latest Articles
Latest Art
Latest Photo
Latest Music

Let's talk about white space in code.

July 22, 2019Will Leffert

I'm a bit of a weirdo. My girlfriend calls me "obsessive", and I don't think she's wrong. I get bothered when I see bad kerning in text. Poor balance in designs. PNGs with JPG artifacts.

I also like to ensure my code has plenty of proper white space, regardless of whether I'm working in Python or not (disclaimer: I have never written anything in Python, but I do think its an interesting language).

In going through Andrew Mead's React course, I frequently get annoyed by his lack of white space in certain areas. He does fine with indenting, and actually puts an blank line between his imports and the rest of his code, but there is an extra bit of white space that I feel is critical in code. I'm going to call it "semantic vertical white space". Let's take the following psuedocode example:

function bobIsYourUncle(x, y) {
  variable bob = cleanup(x);
  variable uncle = cleanup(y);
  doStuff(bob);
  doMoreStuff(uncle);
  if bob = uncle {
    return "Bob is your uncle";
  } else {
    return "Bob is not your uncle";
  }
}

While this is pretty simple, imagine something a little more complex. Imagine more variables, more code running, and multiple functions being called overall. Finding the proper location for a specific action might be a little difficult if you're evaluating it, right?

I prefer to write my code with more vertical white space, like so.

function bobIsYourUncle(x,y) {
  variable bob = cleanup(x);
  variable uncle = cleanup(y);

  doStuff(bob);
  doMoreStuff(uncle);

  if bob = uncle {
    return "Bob is your uncle";
  } else {
    return "Bob is not your uncle";
  }
}

This makes it so much easier to understand. By separating out into sections, such as variables (or state, or whatever you commonly have in whatever language you're writing at the opening of something), data processing, and more, you are treating your code more like a story, with proper paragraphs.

Previously, you might want to cram as much as you could close together, to ensure smaller file sizes (at least, in web-based scripting languages like JS), because every bit counted. Now, we have minifiers. There is no reason not to utilize the freedom available by ensuring we utilize semantic vertical white space, which is just another great way to help us debug, and help others understand our code.

So, the next time you're writing code, don't just focus on commenting, line breaks and indents. Think about vertical white space, too!