{"id":427,"date":"2015-10-21T20:30:21","date_gmt":"2015-10-21T20:30:21","guid":{"rendered":"http:\/\/www.audero.it\/blog\/?p=427"},"modified":"2016-08-02T18:43:58","modified_gmt":"2016-08-02T18:43:58","slug":"the-revolution-of-3-spaces-code-indentation","status":"publish","type":"post","link":"https:\/\/www.audero.it\/blog\/2015\/10\/21\/the-revolution-of-3-spaces-code-indentation\/","title":{"rendered":"The revolution of 3-spaces code indentation"},"content":{"rendered":"

When I started writing the first programs at University, I didn’t follow any particular code style or convention and, to be honest, I didn’t even know why those concepts were important. This is probably something that everyone has experience at the beginning, before they\u00a0defined\u00a0their own code style or started following the style of someone else. After a few months, I started attending a course with Professor Luigi Lamberti<\/a>\u00a0which, despite his very old<\/em> website, is one of the best computer scientists I had as a professor. He introduced me and my colleagues to the importance of conventions.\u00a0Instead of teaching\u00a0us his own conventions, this professor invited us to find our own style and stick with it.
\n
\nAlmost 10 years have passed since that moment and I’ve changed my conventions quite a lot. But there is one thing that isn’t changed and I’m still firmly advocating: the use of 3 spaces to indent the code. Now, I know that some of you might have already labeled me as crazy, but when it comes to code conventions there isn’t a truth or a way better than other. It’s all about tastes.<\/p>\n

Despite the catchy title, I don’t think I’m revolutionizing code indentations with my proposal. What I know for sure is that 3 spaces aren’t used a lot to indent code. This is proved by the fact that none of the in-browser developer tools gives you the option to set 3 spaces. They all give you the choice between 2 and 4 spaces, and tabs (or 8 spaces). I don’t know if this post will convince someone to change his\u00a0convention\u00a0or at least to give 3-spaces code indentation a try, but I still want to share my opinion.<\/p>\n

Other code indentation styles<\/h2>\n

I think that a large number of developers is moving away from tabs, and for a very good reason. When you use the tab, even if you have just a couple of nested blocks (like an if<\/code> inside a for<\/code>) your code is already gone well past the middle of the screen (dramatic reconstruction of the facts<\/em>). If you add another level of nesting then, well, your code is basically aligned to the right edge of the screen. As a result the ease of following the code drops drastically.<\/p>\n

Spaces are used by most of the developers but there are two dominant conventions: 2 and 4 spaces. In my opinion, 2 spaces don’t give the code enough room to be readable. I feel that 2 spaces aren’t enough to understand, at a quick glance, where a nested block ends and when another starts. On the contrary, 4 spaces give a block too much “breath” and I feel this leads to the same issue I mentioned for the tab.<\/p>\n

3 spaces seem just perfect. They give you enough space to quickly identify nested blocks, but not so much that after two or three level of nesting your code reaches the right margin of the screen.<\/p>\n

When I joined Digital Detox<\/a>, I proposed this convention to my colleagues. Some of them were really enthusiast about it even if they used a differe style. Others have been more skeptical and reluctant to move away from their conventions. However, after a couple of months a few of them gave 3-spaces indentation a try. They found it to be very effective, hence they joined my movement. Many others have simply kept their old style, which is totally fine.<\/p>\n

Now that I’ve explained my reasons for 3-spaces code indentation, it’s time to see it in action.<\/p>\n

Examples<\/h2>\n

In this section I want to show an example of code, taken from this repository of mine<\/a>, for each of the styles I’ve mentioned. By taking a look at them, you can ponder which one is easier to read for you. Maybe you’ll find that your previous choice doesn’t suit you anymore.<\/p>\n

2 spaces<\/h3>\n
\r\nfunction readFile(file) {\r\n  return new Promise(function (resolve, reject) {\r\n    var fileReader = new FileReader();\r\n    \r\n    fileReader.addEventListener('load', function (event) {\r\n      var content = event.target.result;\r\n      \r\n      content = atob(content.replace(\/^(.+,)\/, ''));\r\n      \r\n      resolve({\r\n        filename: file.name,\r\n        content: content\r\n      });\r\n    });\r\n    \r\n    fileReader.addEventListener('error', function (error) {\r\n      reject(error);\r\n    });\r\n    \r\n    fileReader.readAsDataURL(file);\r\n  });\r\n}\r\n<\/pre>\n
3 spaces<\/h3>\n
\r\nfunction readFile(file) {\r\n   return new Promise(function (resolve, reject) {\r\n      var fileReader = new FileReader();\r\n\r\n      fileReader.addEventListener('load', function (event) {\r\n         var content = event.target.result;\r\n\r\n         content = atob(content.replace(\/^(.+,)\/, ''));\r\n         resolve({\r\n            filename: file.name,\r\n            content: content\r\n         });\r\n      });\r\n\r\n      fileReader.addEventListener('error', function (error) {\r\n         reject(error);\r\n      });\r\n\r\n      fileReader.readAsDataURL(file);\r\n   });\r\n}\r\n<\/pre>\n
4 spaces<\/h3>\n
\r\nfunction readFile(file) {\r\n    return new Promise(function (resolve, reject) {\r\n        var fileReader = new FileReader();\r\n\r\n        fileReader.addEventListener('load', function (event) {\r\n            var content = event.target.result;\r\n\r\n            content = atob(content.replace(\/^(.+,)\/, ''));\r\n            resolve({\r\n                filename: file.name,\r\n                content: content\r\n            });\r\n        });\r\n\r\n        fileReader.addEventListener('error', function (error) {\r\n            reject(error);\r\n        });\r\n\r\n        fileReader.readAsDataURL(file);\r\n    });\r\n}\r\n<\/pre>\n
Tabs<\/h3>\n
\r\nfunction readFile(file) {\r\n\treturn new Promise(function (resolve, reject) {\r\n\t\tvar fileReader = new FileReader();\r\n\r\n\t\tfileReader.addEventListener('load', function (event) {\r\n\t\t\tvar content = event.target.result;\r\n\r\n\t\t\tcontent = atob(content.replace(\/^(.+,)\/, ''));\r\n\t\t\tresolve({\r\n\t\t\t\tfilename: file.name,\r\n\t\t\t\tcontent: content\r\n\t\t\t});\r\n\t\t});\r\n\r\n\t\tfileReader.addEventListener('error', function (error) {\r\n\t\t\treject(error);\r\n\t\t});\r\n\r\n\t\tfileReader.readAsDataURL(file);\r\n\t});\r\n}\r\n<\/pre>\n
Conclusions<\/h2>\n
When it comes to code style is all a matter of taste. In this article I’ve tried to explain the reasons that led me to choose 3-spaces indentation for my code. I hope my considerations intrigued you so much that you’ll give this style a go. If you do try it, let me know your thoughts.<\/p>\n","protected":false},"excerpt":{"rendered":"
Almost 10 years have passed since that moment and I’ve changed my conventions quite a lot. But there is one thing that isn’t changed and I’m still firmly advocating: the use of 3 spaces to indent the code. Now, I know that some of you might have already labeled me as crazy, but when it comes to code conventions there isn’t a truth or a way better than other. It’s all about tastes.<\/p>\n
Despite the catchy title, I don’t think I’m revolutionizing code indentations with my proposal. What I know for sure is that 3 spaces aren’t used a lot to indent code. This is proved by the fact that none of the in-browser developer tools gives you the option to set 3 spaces. They all give you the choice between 2 and 4 spaces, and tabs (or 8 spaces). I don’t know if this post will convince someone to change his\u00a0convention\u00a0or at least to give 3-spaces code indentation a try, but I still want to share my opinion.<\/p>\n","protected":false},"author":1,"featured_media":442,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7],"tags":[55],"class_list":["post-427","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-discussions-opinions","tag-code-style"],"jetpack_featured_media_url":"https:\/\/www.audero.it\/blog\/wp-content\/uploads\/2015\/10\/indentation.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9Or4e-6T","jetpack-related-posts":[{"id":197,"url":"https:\/\/www.audero.it\/blog\/2013\/12\/23\/enhancing-the-abbr-element-on-mobile\/","url_meta":{"origin":427,"position":0},"title":"Enhancing the abbr Element on Mobile","author":"Aurelio De Rosa","date":"December 23, 2013","format":false,"excerpt":"Today's world runs fast, really fast. When writing, a lot of people use abbreviations and acronyms to save time that we can find spread all over the web. They are so used that an HTML tag, , was created to identify them and help the semantic of web pages. In\u2026","rel":"","context":"In "CSS"","block_context":{"text":"CSS","link":"https:\/\/www.audero.it\/blog\/category\/css\/"},"img":{"alt_text":"The abbr tag unstyled","src":"https:\/\/i0.wp.com\/aurelio.audero.it\/blog\/wp-content\/uploads\/2013\/12\/abbr-unstyled.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":626,"url":"https:\/\/www.audero.it\/blog\/2016\/12\/05\/monkey-patching-javascript\/","url_meta":{"origin":427,"position":1},"title":"Monkey patching in JavaScript","author":"Aurelio De Rosa","date":"December 5, 2016","format":false,"excerpt":"When working on a project, we often use libraries that implement methods that aren't built-in in the programming language in use but we need. These libraries don't cover all the possible methods, so they might lack one or more crucial features we need. When this happens, we have two choices:\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/www.audero.it\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/12\/monkey-patching.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":553,"url":"https:\/\/www.audero.it\/blog\/2016\/08\/03\/power-simplicity-code\/","url_meta":{"origin":427,"position":2},"title":"The power of simplicity in code","author":"Aurelio De Rosa","date":"August 3, 2016","format":false,"excerpt":"A\u00a0few days ago I found an online test\u00a0featuring six exercises on JavaScript. For fun, whishing to challenge myself with something tricky, I decided to take it.\u00a0The test proved to be very simple, so it isn't worth a discussion. It's what happened next that inspired this article. I was talking with\u2026","rel":"","context":"In "Discussions & Opinions"","block_context":{"text":"Discussions & Opinions","link":"https:\/\/www.audero.it\/blog\/category\/discussions-opinions\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/08\/code-simplicity.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/08\/code-simplicity.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/08\/code-simplicity.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":148,"url":"https:\/\/www.audero.it\/blog\/2013\/09\/05\/how-to-create-custom-filters-in-jquery\/","url_meta":{"origin":427,"position":3},"title":"How to Create Custom Filters in jQuery","author":"Aurelio De Rosa","date":"September 5, 2013","format":false,"excerpt":"In some cases you may need a shortcut to collect elements for which jQuery doesn't provide a specific filter. This is exactly where custom filters come into play. In this article, extracted from my book Instant jQuery Selectors, you'll learn how to build a custom filter in jQuery. Please note\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/www.audero.it\/blog\/category\/javascript\/"},"img":{"alt_text":"jquery logo","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":56,"url":"https:\/\/www.audero.it\/blog\/2013\/07\/02\/how-to-solve-the-problem-of-font-face-inside-media-queries\/","url_meta":{"origin":427,"position":4},"title":"How to Solve the Problem of @font-face Inside Media Queries","author":"Aurelio De Rosa","date":"July 2, 2013","format":false,"excerpt":"Mobile connections aren't as good as the usual desktop ones, therefore the download time of custom fonts can take up to several seconds. A good approach is to use the @font-face rule only for certain range of media and screens using @media queries. Unfortunately this approach doesn't work for some\u2026","rel":"","context":"In "CSS"","block_context":{"text":"CSS","link":"https:\/\/www.audero.it\/blog\/category\/css\/"},"img":{"alt_text":"A page with custom font not completely downloaded","src":"https:\/\/i0.wp.com\/aurelio.audero.it\/blog\/wp-content\/uploads\/2013\/06\/aeon-megazine-mobile-168x300.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":273,"url":"https:\/\/www.audero.it\/blog\/2014\/02\/05\/why-people-think-php-sucks\/","url_meta":{"origin":427,"position":5},"title":"Why People Think PHP Sucks!","author":"Aurelio De Rosa","date":"February 5, 2014","format":false,"excerpt":"A long time has been passed since the first release of PHP. Over the years the language has been improved a lot, in terms of performance and features, thanks to the work of many contributors. At the same time, also its adoption among developers is grown dramatically. Looking at the\u2026","rel":"","context":"In "Discussions & Opinions"","block_context":{"text":"Discussions & Opinions","link":"https:\/\/www.audero.it\/blog\/category\/discussions-opinions\/"},"img":{"alt_text":"PHP elephants","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2014\/02\/php-elephants.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2014\/02\/php-elephants.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2014\/02\/php-elephants.jpg?resize=525%2C300&ssl=1 1.5x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":9,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":585,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts\/427\/revisions\/585"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/media\/442"}],"wp:attachment":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}