Visual structure -- how we 'see' things.
Task: in these two snippets, find the word 'not.'
if (condition) { do something and another thing and check something
else while (condition2) { do not something else measure something calculate something
}
}
if (condition) {
do something
and another thing
and check something else
while (condition2) {
do not something else
measure something
calculate something
}
}
And, in the first snippet, figure out what the 'not' does in -relation- to the entire snippet, how it's affected by what comes before it and how it affects what follows afterward. Obviously this is gibberish code and it doesn't do anything, but the point is that the run-on-code is EXTREMELY difficult to glance at and without explanation -intuitively- understand the flow.
Each logical step or decision should have its own line. Each line is a discrete 'thought.' Run-on code is like reading a run-on sentence.
It's very similar to reading instructions like this:
- do this 1b) maybe do this 2) do more of that 3) do the previous item twice more, unless you didn't do 1b.
Rather than...
- do this
1b) maybe do this
- do more of that
- do the previous item twice more, unless you didn't do 1b.
In the 'sentence' format, I'm reading instruction 3 near the end of the line that references 1b. I have to make a mental note of where I am -horizontally-, look backwards, make a decision about that, then look forward to where I was reading and make another decision based on what I remember waaaay over on the left side of the screen.
...rather than seeing that I'm on -line- 3 (because that's the 'title' of the line,) glance up two lines to 1b and make a decision, then continue at line 3.
Visually, 1b and 3 are...
V
1b
3
^
...this far away vertically, rather than...
----------v---------------------------------------v ...this far away horizontally.
- do this 1b) maybe do this 2) do more of that 3) do the previous item twice more, unless you didn't do 1b.
It takes tens of thousand of lines of code to -really- learn how much TIME and AGITA properly structured code -saves-.
About the...
code here....
}
code here...
}
code here...
}
...wait till you've got a chunk of code where those three brackets are on three separate (printed) pages, with maybe another page of code between two of them. It gets 'not fun' reeeal fast.
This is even related to physical control panels, car dashboards, GUI layouts. The effects of many aspects of human visual perception can make something hard to use for no -apparent- reason, unless you know what to look for in the design.
UI is an art and a science, and these lines of text are our interface.
"Be the Code" -- Bill Murray, Caddyshack