{"id":298,"date":"2007-12-21T01:51:20","date_gmt":"2007-12-21T06:51:20","guid":{"rendered":"http:\/\/www.phpied.com\/fancy-formatting\/"},"modified":"2007-12-21T01:51:20","modified_gmt":"2007-12-21T06:51:20","slug":"fancy-formatting","status":"publish","type":"post","link":"https:\/\/www.phpied.com\/fancy-formatting\/","title":{"rendered":"Fancy formatting"},"content":{"rendered":"

Writing readable code means proper indentation. Usually you'd tab (or use 2 or 4 or 3 spaces) after every curly bracket. Something like this:<\/p>\n

\n
if<\/span> <\/span>(<\/span>true<\/span>)<\/span> <\/span>{<\/span>\r\n    <\/span>\/\/<\/span> indent<\/span><\/span>\r\n    <\/span>if<\/span> <\/span>(<\/span>false<\/span>)<\/span> <\/span>{<\/span>\r\n        <\/span>\/\/<\/span> another indent<\/span><\/span>\r\n        <\/span>\/\/<\/span> and some more<\/span><\/span>\r\n    <\/span>}<\/span>\r\n<\/span>}<\/span><\/pre>\n<\/div>\n
Same goes when you have a bigger hash\/object sort of thing:<\/p>\n
\n
var<\/span> <\/span>memememe<\/span> = <\/span>{<\/span>\r\n    <\/span>name<\/span>: <\/span>'<\/span>Stoyan<\/span>'<\/span>,\r\n    <\/span>family_name<\/span>: <\/span>'<\/span>Stefanov<\/span>'<\/span>,\r\n    <\/span>blog<\/span>: <\/span>'<\/span>https:\/\/www.phpied.com<\/span>'<\/span>,\r\n    <\/span>kids_count<\/span>: <\/span>2<\/span>,\r\n    <\/span>books_count<\/span>: <\/span>3<\/span>,\r\n    <\/span>occupation<\/span>: <\/span>'<\/span>programmer<\/span>'<\/span>\r\n<\/span>}<\/span><\/pre>\n<\/div>\n
Sometimes I find myself going a little fancy and aligning all the values in the name\/value pairs:<\/p>\n
\n
var<\/span> <\/span>memememe<\/span> = <\/span>{<\/span>\r\n    <\/span>name<\/span>:        <\/span>'<\/span>Stoyan<\/span>'<\/span>,\r\n    <\/span>family_name<\/span>: <\/span>'<\/span>Stefanov<\/span>'<\/span>,\r\n    <\/span>blog<\/span>:        <\/span>'<\/span>https:\/\/www.phpied.com<\/span>'<\/span>,\r\n    <\/span>kids_count<\/span>:  <\/span>2<\/span>,\r\n    <\/span>books_count<\/span>: <\/span>3<\/span>,\r\n    <\/span>occupation<\/span>:  <\/span>'<\/span>programmer<\/span>'<\/span>\r\n<\/span>}<\/span><\/pre>\n<\/div>\n
But recently, inspired by Firebug's Net panel way of presenting header information, I tried aligning the keys to the right in addition to aligning the values to the left. So I ended up with something like this:<\/p>\n
\n
var<\/span> <\/span>memememe<\/span> = <\/span>{<\/span>\r\n          <\/span>name<\/span>: <\/span>'<\/span>Stoyan<\/span>'<\/span>,\r\n   <\/span>family_name<\/span>: <\/span>'<\/span>Stefanov<\/span>'<\/span>,\r\n          <\/span>blog<\/span>: <\/span>'<\/span>https:\/\/www.phpied.com<\/span>'<\/span>,\r\n    <\/span>kids_count<\/span>: <\/span>2<\/span>,\r\n   <\/span>books_count<\/span>: <\/span>3<\/span>,\r\n    <\/span>occupation<\/span>: <\/span>'<\/span>programmer<\/span>'<\/span>\r\n<\/span>}<\/span><\/pre>\n<\/div>\n
Fancy, eh? I liked the way it looks. But then I thought that when writing maintainable code, anything fancy suggests uncommon, uncommon suggests that other team members won't be using it, so it means breaking the rule #1 of writing maintainable code: be predictable<\/em>. (this also happens to be rule #1 of other common activities, such as driving on the highway and designing usable web sites)<\/p>\n
This type of formatting is also not easy to type in an editor, so it will require a little more effort. Those two drawbacks are enough, I believe, to dismiss this idea. But I can't help myself liking the way the code looks. Here's a piece of PHP, which looks even better than javascript, because even more characters are centered.<\/p>\n
\n
<?php<\/span>\r\n<\/span>$memememe<\/span> = <\/span>array<\/span>(<\/span>\r\n          <\/span>'<\/span>name<\/span>'<\/span> => <\/span>'<\/span>Stoyan<\/span>'<\/span>,\r\n   <\/span>'<\/span>family_name<\/span>'<\/span> => <\/span>'<\/span>Stefanov<\/span>'<\/span>,\r\n          <\/span>'<\/span>blog<\/span>'<\/span> => <\/span>'<\/span>https:\/\/www.phpied.com<\/span>'<\/span>,\r\n    <\/span>'<\/span>kids_count<\/span>'<\/span> => <\/span>2<\/span>,\r\n   <\/span>'<\/span>books_count<\/span>'<\/span> => <\/span>3<\/span>,\r\n    <\/span>'<\/span>occupation<\/span>'<\/span> => <\/span>'<\/span>programmer<\/span>'<\/span>\r\n<\/span>)<\/span>;\r\n<\/span>?><\/span><\/pre>\n<\/div>\n
Ain't that cool?<\/p>\n","protected":false},"excerpt":{"rendered":"
Writing readable code means proper indentation. Usually you’d tab (or use 2 or 4 or 3 spaces) after every curly bracket. Something like this: if (true) { \/\/ indent if (false) { \/\/ another indent \/\/ and some more } } Same goes when you have a bigger hash\/object sort of thing: var memememe = […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,54,40],"tags":[],"_links":{"self":[{"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/posts\/298"}],"collection":[{"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/comments?post=298"}],"version-history":[{"count":0,"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/posts\/298\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/media?parent=298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/categories?post=298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/tags?post=298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}