This is all your app is: a collection of tiny details. (Contd.)

About a month ago, world famous blogger Jeff Atwood published on his Coding Horror blog an article called "This is all your app is: a collection of tiny details.". The article immediately caught my attention as this is something that continuously frustrates me also in my surroundings and something I'll put my effort into, in order to improve that situation.

Getting the details right is the difference between something that delights, and something customers tolerate.
So, what is it about? The quote gets to the point quite well. There has to be some kind of passion behind when creating your app, the striving to get things right till the most tiny detail. I'm for sure a person that is extremely nit-picking in these things, but take the following example of a piece of HTML:
<input type="checkbox"/><label>Check 1</label>
<input type="checkbox"/><label>Check 2</label>
<input type="checkbox"/><label>Check 3</label>
<input type="checkbox"/><label>Check 4</label>
Nothing else than a series of checks the user must agree with. Now when placed in this form on some page, the user has to explicitly click on each box of the checkbox input field in order to set the tick. This is annoying, isn't it?? Instead one would intuitively click directly on the text. Note, these are really details, the app would work also without them, basically, the customer would tolerate them.

But on the other way optimizing it wouldn't cost anything but a couple of more minutes, like:
.clickable {
and then
<input type="checkbox" id="check1"><label for="check1" class="clickable">Check 1</label>
<input type="checkbox" id="check2"><label for="check2" class="clickable">Check 2</label>
<input type="checkbox" id="check3"><label for="check3" class="clickable">Check 3</label>
<input type="checkbox" id="check4"><label for="check4" class="clickable">Check 4</label>
I'm just writing out of my head, but something like this could work. A simple CSS class adding a hand pointer when hovering the checkbox text and adding a for="..." to the label s.t. a click on them will set the focus on the corresponding checkbox, thus activating it. It's a simple as that, but you need to do it.

This is a silly example, simplified, but taken from a real code-base and there are many other examples I could mention, many other tiny details:
  • Just showing an empty list in case when no results have been found instead of a user-friendly message telling that no entries have been found
  • In a wizard, not validating the fields of the 1st step immediately when trying to switch to the next one, but showing all errors upon wizard completion.
  • ...

It's the Same With Coding

It's the same with coding, just that most probably you won't delight any customer but most probably your programmer colleagues. If you see a piece of code that needs refactoring, refactor it!! If you encounter some functionality which you could reuse in your context, do it, refactor it, generalize it and reuse it in your specific situation (obviously if generalization doesn't make things more complicated).

Again, we (are | should be) talking about coding basics...but ultimately these are the things that make you a better coder, the things that make you stop sucking and become awesome instead ;).




Your ad here?