Hacker News Reader

Comment by agys | Hacker News Reader

I always line up columns like the example above. I think it is a distortion from my background in typesetting and graphic design, but the readability improves greatly… for me at least!

  const style = {
      x               : 3,
      y               : 2,
      width           : 0,
      height          : 0,
      backgroundColor : 'white',
      color           : 'black',
      fontWeight      : 'normal',
      shadowStyle     : 'none',
      borderStyle     : 'round'
      paddingX        : 2,
      paddingY        : 1,
  }

View on HN

Thanks for posting that example. It helped clarify why I dislike that style so much.

Please don't take offense! What works for me doesn't have to be what works for you, OK? :-)

But the insight - if I dare call it that - is that one style leads me to read across each line, where the other style leads me to read down the columns.

In your example, my eyes see an x, a y, a width, a height, a backgroundColor, a color, and so on. And then I see a 3, a 2, a 0, another 0, a 'white', a 'black', etc.

As you can tell, I am reading down the first column, and then reading down the second column. And by then I'm losing track of which thing goes with which.

It's not that I mean to do that, it's just how my eyes are drawn when I see something arranged in columns.

If we reformat this without the column alignment, it looks like this:

  const style = {
      x: 3,
      y: 2,
      width: 0,
      height: 0,
      backgroundColor: 'white',
      color: 'black',
      fontWeight: 'normal',
      shadowStyle: 'none',
      borderStyle: 'round'
      paddingX: 2,
      paddingY: 1,
  }

It's definitely not as nice looking this way! But now I read it completely differently:

We have an x of 3, a y of 2, a width of 0, a height of 0, a backgroundColor of 'white', a color of 'black', etc.

This style leads me to read across each line instead of down each column. I think that may be why it is easier for me to understand.

And to repeat myself, I am truly grateful to you for posting this example. It helped me get some understanding of what goes on in my eyes and brain.

You are very cautious with me in not taking any offense; thank you (I won’t)! For me the aligning and the subsequent empty space which is created between the two columns allows very fast skimming in the values of -both- columns. I don’t have any isse in tracking horizontally. Any spreadsheet uses the same technique (aided by the cell lines).

I use this style also in expressions: often when coding graphics you have similar operations or variables and ordering it in “column fashion” allows quick skimming and error spotting.

Another (real) example:

  const neighbors =
      get(x - 1, y - 1, w, h, prev) +
      get(x,     y - 1, w, h, prev) +
      get(x + 1, y - 1, w, h, prev) +
      get(x - 1, y,     w, h, prev) +
      get(x + 1, y,     w, h, prev) +
      get(x - 1, y + 1, w, h, prev) +
      get(x,     y + 1, w, h, prev) +
      get(x + 1, y + 1, w, h, prev)

Yes, that is a great example of something that falls flat in a proportional font or without using column alignment.

My only suggestion is to be more generous with whitespace inside the parentheses:

  const neighbors =
      get( x - 1, y - 1, w, h, prev ) +
      get( x,     y - 1, w, h, prev ) +
      get( x + 1, y - 1, w, h, prev ) +
      get( x - 1, y,     w, h, prev ) +
      get( x + 1, y,     w, h, prev ) +
      get( x - 1, y + 1, w, h, prev ) +
      get( x,     y + 1, w, h, prev ) +
      get( x + 1, y + 1, w, h, prev )

I don't quite understand why, but most modern coding styles prohibit ever putting a space inside the parens. I think the common philosophy is to follow the same conventions you would when writing English prose. But we're not writing prose, we're writing code! To me it is more readable if we allow a little breathing room inside the parens.

I adopted this style for a while (I mostly code individual and personal projects so I’m not obliged to follow style-guides) but reverted back…

This looks better in monochrome text but usually the editor colors allow a fast distinction of the parentheses, variables and literals so the extra space is not needed for me.

As a digression, this is exactly the same issue that I have with autoformatters. For example, clang-format under default settings turns your example into:

    const neighbors = get(x - 1, y - 1, w, h, prev) + get(x, y - 1, w, h, prev) +
                      get(x + 1, y - 1, w, h, prev) + get(x - 1, y, w, h, prev) +
                      get(x + 1, y, w, h, prev) + get(x - 1, y + 1, w, h, prev) +
                      get(x, y + 1, w, h, prev) + get(x + 1, y + 1, w, h, prev)

In the past, I've resorted to things like adding no-op `+ 0` for alignment and empty comments to force it to preserve line breaks while still allowing it to autoformat the rest:

    const neighbors = get(x - 1, y - 1, w, h, prev) + //
                      get(x + 0, y - 1, w, h, prev) + //
                      get(x + 1, y - 1, w, h, prev) + //
                      get(x - 1, y + 0, w, h, prev) + //
                      get(x + 1, y + 0, w, h, prev) + //
                      get(x - 1, y + 1, w, h, prev) + //
                      get(x + 0, y + 1, w, h, prev) + //
                      get(x + 1, y + 1, w, h, prev)

I really wish that autoformatters had the smarts to understand that if more than X% of the non-whitespace columns within a block repeat the same character from top to bottom, then the lines are probably intentionally aligned that way and that it should try very hard to preserve that alignment. That would eliminate my one real objection to autoformatters. (Bonus points for detecting parallel structure in the code and exposing it through alignment in the first place, but that's a much harder generalization of the problem. I'd settle for just leaving that to me and then not destroying it.)

Wow, that was actually an insightful and respectful comment, that made me appreciate both sides of the argument.

Bonus internet points for you today sir.

Reply on news.ycombinator.com