Confusing monad indentation

[dmitriz]

I find this example from https://github.com/MostlyAdequate/mostly-adequate-guide/blob/master/ch09.md confusingly indented:

// querySelector :: Selector -> IO DOM
querySelector('input.username')
  .chain(({ value: uname }) => querySelector('input.email')
  .chain(({ value: email }) => IO.of(`Welcome ${uname} prepare for spam at ${email}`)));
// IO('Welcome Olivia prepare for spam at [email protected]');

The nested nature here seems to be getting lost and too easy to confuse with sequential .chain (that would have made a simpler example).

It could perhaps be better to write it as

// querySelector :: Selector -> IO DOM
querySelector('input.username').chain(({ value: uname }) => 
    querySelector('input.email').chain(({ value: email }) => 
        IO.of(`Welcome ${uname} prepare for spam at ${email}`)));
// IO('Welcome Olivia prepare for spam at [email protected]');

Also this example might be more suitable for Applicative rather than Monad, because both operations are independent of each other and so would be more perfomant to run in parallel.