Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at the New York ColdFusion User Group (Jul. 2008) with: Simon Free and Peter Bell

Am I The Only One Who Likes White Space In My ColdFusion Code?

By Ben Nadel on
Tags: ColdFusion

I love white space in my code (NOT MY PAGE OUTPUT). It find it ups the readability like 1000% percent (at least!). It's not just that I like it, I need it. I can't even read other people's code without first tabbing it properly and spacing it out. Maybe I have reading issues, maybe I am the only one, but white space is the programmer's friend.

I don't want to pick on anyone's code, but I have to use some sample. I grabbed a snippet of Ray's blog code. Everyone loves Ray, including myself, so I hope this is not offensive. This is just to demonstrate the way I see code. So anyway, here is a code snippet from the blog.cfc:

  • <!--- If byDay is passed, verify X is int between 1 and 31 --->
  • <cfif structKeyExists(arguments.params,"byDay")>
  • <cfif not val(arguments.params.byDay) or val(arguments.params.byDay) lt 1 or val(arguments.params.byDay) gt 31>
  • <cfset structDelete(arguments.params,"byDay")>
  • <cfelse>
  • <cfset arguments.params.byDay = val(arguments.params.byDay)>
  • </cfif>
  • </cfif>
  • <!--- If byMonth is passed, verify X is int between 1 and 12 --->
  • <cfif structKeyExists(arguments.params,"byMonth")>
  • <cfif not val(arguments.params.byMonth) or val(arguments.params.byMonth) lt 1 or val(arguments.params.byMonth) gt 12>
  • <cfset structDelete(arguments.params,"byMonth")>
  • <cfelse>
  • <cfset arguments.params.byMonth = val(arguments.params.byMonth)>
  • </cfif>
  • </cfif>
  • <!--- If byYear is passed, verify X is int --->
  • <cfif structKeyExists(arguments.params,"byYear")>
  • <cfif not val(arguments.params.byYear)>
  • <cfset structDelete(arguments.params,"byYear")>
  • <cfelse>
  • <cfset arguments.params.byYear = val(arguments.params.byYear)>
  • </cfif>
  • </cfif>
  • <!--- If byTitle is passed, verify we have a length --->
  • <cfif structKeyExists(arguments.params,"byTitle")>
  • <cfif not len(trim(arguments.params.byTitle))>
  • <cfset structDelete(arguments.params,"byTitle")>
  • <cfelse>
  • <cfset arguments.params.byTitle = trim(arguments.params.byTitle)>
  • </cfif>
  • </cfif>

That code works well, but I look at this and my eyes go blurry. Even though the lines are short, I have trouble getting from one line to the next because it all sort of bleeds together. Let's contrast this to the way I would space it out:

  • <!--- If byDay is passed, verify X is int between 1 and 31. --->
  • <cfif structKeyExists( arguments.params, "byDay" )>
  •  
  • <cfif (
  • (NOT val( arguments.params.byDay )) OR
  • (val( arguments.params.byDay ) lt 1) OR
  • (val( arguments.params.byDay ) gt 31)
  • )>
  • <cfset structDelete( arguments.params, "byDay" ) />
  • <cfelse>
  • <cfset arguments.params.byDay = val( arguments.params.byDay ) />
  • </cfif>
  •  
  • </cfif>
  •  
  •  
  • <!--- If byMonth is passed, verify X is int between 1 and 12. --->
  • <cfif structKeyExists( arguments.params, "byMonth" )>
  •  
  • <cfif (
  • (not val( arguments.params.byMonth )) OR
  • (val( arguments.params.byMonth ) lt 1) OR
  • (val( arguments.params.byMonth ) gt 12)
  • )>
  • <cfset structDelete( arguments.params, "byMonth" ) />
  • <cfelse>
  • <cfset arguments.params.byMonth = val( arguments.params.byMonth ) />
  • </cfif>
  • </cfif>
  •  
  •  
  • <!--- If byYear is passed, verify X is int --->
  • <cfif structKeyExists( arguments.params, "byYear" )>
  •  
  • <cfif not val( arguments.params.byYear )>
  • <cfset structDelete( arguments.params, "byYear" ) />
  • <cfelse>
  • <cfset arguments.params.byYear = val( arguments.params.byYear ) />
  • </cfif>
  •  
  • </cfif>
  •  
  •  
  • <!--- If byTitle is passed, verify we have a length --->
  • <cfif structKeyExists( arguments.params, "byTitle" )>
  •  
  • <cfif not len( trim( arguments.params.byTitle ) )>
  • <cfset structDelete( arguments.params, "byTitle" ) />
  • <cfelse>
  • <cfset arguments.params.byTitle = trim( arguments.params.byTitle ) />
  • </cfif>
  •  
  • </cfif>

Granted, my version of the code is twice as long, but my eye skims through it three times as fast. I see VERY clear deliniation of where the major IF statements are. By breaking the IF conditions onto multiple lines, I easily see why the IF statement would or would not fail. To me, this code is easier to read, easier to debug, and waaay easier to maintain.

Now, my white spacing is not random. I have rules that I follow:

I place two line breaks between major "thoughts". In the above, I consider a major thought to be the testing and application of the ARGUMENTS structure.

I put argument padding and argument spacing in all my method call. For example, Trim( strValue ) vs. Trim(strValue). I do NOT do this for expression grouping (ex. (2 + 3)). Notice there is not spacing before the 2 or after the 3. This allows my eye to easily skim code and see the difference between method calls and expression grouping. Also, as I traverse a line, I can easily see where the method call beings, what arguments there are, and where the method call ends.

I put padding in all larger IF statements, SWITCH statements, and any other "wrapper" statements. A "larger" statement is any one where the inner code has more than one line or requires an inline ColdFusion comment.

I break all compound clauses (ex. OR, AND) onto separate lines. This makes seeing the different parts much much easier. I even tab in parts of a very complicated conditional statement:

  • if (
  • (
  • something
  • OR
  • somethingelse
  • )
  • AND
  • (
  • something
  • OR
  • somethingelse
  • )
  • ){

This allows me to easily see how the condition is put together and how I can update it.

So, am I totally crazy here? Am I taking crazy pills? Am I the only one on this planet (and I have looked at SOOOO much code) who is having a love-affair with white space? What gives? Why does so much code out there look like it's been run through the Javascript obfuscator function??? People... it's not the size of your code that matters, it's how you use it.



Reader Comments

Just to be the voice of dissent ... I actually prefer the compressed method. I couldn't really tell you why, though. My best guess would be that I mentally equate "line of code" with "logical/atomic operation", and thus find breaking a logical operation across several lines, even if it improves readability, to be ... less than appealing.

But that's just me.

Reply to this Comment

I can't say I'm quite as "crazy" with my whitespace as you are, but I couldn't agree with the concept more. When I code, indenting and spacing are a big part of what I do. Nothing worse than coming back to a piece of long and hairy code 6 months later and no being able to figure out what you were attempting because of a lack of good formatting.

In the end, for me, proper code formatting is right up there with good documentation.

Reply to this Comment

Rick,

Yeah, I figure that plays into it a lot for people. I always hear people talk about how many lines of code they have.

Reply to this Comment

Demian,

Yeah, I will agree with you that my white space is definately more excessive that most peoples. What can I say, I love my tabbing :)

Reply to this Comment

Get off the crack, dude! Superfluous white space is soooo 1998! ;)

Kidding aside, I prefer the compressed code, mostly because I don't have a NORAD-sized monitor; I can "take in" and mentally process more at a time. Less scrolling, all that stuff...

In fact, when I work on existing code that has the whitespace (and/or gratuitous carriage returns), I usually gut the "extra" stuff right off the bat.

Reply to this Comment

Seth,

It's funny you mention monitor size. I have a nice monitor, but I can't stand horizontal scrolling. I don't mind vertical scrolling, heck I can do it with my mouse without moving (the scroll wheel). But the second I have to scroll horizontally I lose my mind set. And don't dare mention line-wrapping - that's probably the worst invention for readability ever :)

I guess it really comes down to for-each-his-own

Reply to this Comment

I also like the compressed version. I think it is just a personal prefrence but it just seems cleaner to me.

Reply to this Comment

While I agree it does come down to an individual descision, the worst thing that I've seen happen in medium to large CF shops in no rules about it. Imagine working on an application with 10+ developers, each who follows their own set of beliefs... it leads to very hard to read, confusing, nasty code.

Reply to this Comment

Hi Ben,

I don't use quite as much white space as you do, but I do put white space between major steps within a method while I'm working on it. Then when I'm happy it is stable I pull out the extra lines as a "note to myself" that the method is "tight" now and something I don't need to worry about. Probably not as important as it used to be with code folding and the like, but works for me!

Reply to this Comment

I add whitespacing where it helps my readability as well. The more complex the statement, the more likely I am to break the statement up. I really like to break my SQL statements up w/whitespacing--as I think it's much easier to read.

However, my biggest pet peeve is people who use spaces instead of tabs to indent code. Not only does this increase the size of the file (and thus what you're amount of data your transferring to the customer) it's pain to work with.

The code base I inherrited at my current job was written using spaces to indent the code. Anytime I have to make a change to a template, the first thing I do is reformat the code.

I can only assume people who use spaces instead of tabs do so because they don't know that any decent text editor/IDE will allow you to configure the width of a tab.

I personally like setting my tab width to 2 spaces--as it maximizes the amount of code I can see on the page, but still provides me w/some visual difference between a space and a tab. Ironically, most of the code I've seen that indents w/spaces, did so using 2 spaces as the magic indent number.

Reply to this Comment

Oh my god! Spaces instead of tabs... I would go crazy! I don't know how people can function like that.

Reply to this Comment

Although I don't use quite the same whitespace rules as you, I am certainly as... "anal". I find myself unconciously tabbing someone elses code quite frequently. lol

Reply to this Comment

Adam,

Yeah, I do that all the time. When ever I am helping someone debug code at the office, the first thing I say is "Do you mind?" It has become just known that that means I am about to "ben-ize" the code making it more readable for me.

Reply to this Comment

I don't use as much space as you do :) but I like space. Readability is important for me, and code that's all collapsed without spaces or comments is impossible.

I like me the space, I add it usually whenever I am looking at some one elses code as well. Vertical scrolling, no thanks.

Reply to this Comment

Am I the Only One Who Misses Being Able to Automatically Do Code "Pretty Print" in HomeSite? AND CONTROL THE RULES!

OK, (this one time at band camp) do you remember this feature in Homesite where you could have it pretty print your CF Code (and HTML and ???) and you actually could control the rules, and how MUCH whitespace or linebreaks or tabs were used?

OK, so like the REAL reason I was following this was I was looking for where you got the code to DISPLAY the code that is the Skin Spider. That is what I was looking for...

Whazzat?

Reply to this Comment

Jeff,

I wrote the code that displays the Skin Spider code. A few people have expressed interest in this. I will clean it up and post it for people's use. Let me see if I can get something posted by Monday or something.

Reply to this Comment

That would be great, you display code code (humm, slightly confusing...) has some of the cleanest output I've ever seen.

Reply to this Comment

FWIW Sean Corfield wrote something similar for one of his CF United or cf.objective() persos this year (the conferences are starting to blur :->).

I think it was like 10 lines of code. You savecontent the script file, Regex stuff like LT and GT brackets to their & coded values and then cfoutput the value.

I guess extra points for different colors for different pieces a la Eclipse and DW, but that'd be more code than I'd be willing to write :->

Ben, looking forwards to seeing your implementation. Will buy you a beer or three if you can figure out how to get the coloring in!!!

Reply to this Comment

Yeah - a chance to show off some of those RegEx chops you were working on a while back!!!

If you give this a try and it isn't trivial, you may want to email Mark Drew - he may have some snippets of RegEx's in his Java code to do some of this . . .

Reply to this Comment

Too much whitespace! Too much scrolling.

Proper indentation with tabs is mandatory, but more than a single consecutive linebreak starts to make me feel queasy.

Reply to this Comment

Its all just personal preference, and mine is less whitespace.

Possible theory as to why I prefer this:

More spaces / line breaks actually equals more characters for the brain to take in, process, and decide its not a relevant character.
So, maybe extra whitespace is merely seen as noise by some people?

That said, not enough whitespace equals incomprehensible code.

I guess different brains like a diff signal/noise ratio!

My compromise:

No spaces in method calls.
One line break between statements.
One line per clause when the set of clauses is so long that it wraps past one line.

But, you're not crazy Ben, I've seen a lot of code in your style, particularly Flex code.

Reply to this Comment

A year late but I only just came across this thread in a Google search.

As a programmer of over twenty years, I am definitely of the mindset that whitespace and proper indentation are a programmer's friend. I cannot stand spaghetti code.

I always use one tab per level of grouping for block statements and single-line breaks between lines of code. I use this philosophy in all my programming whether it's ColdFusion, PHP, Javascript, HTML, XML, C++, C#, whatever. Just makes it easire for me.

No, you definitely are not the only one who likes whitespace in your ColdFusion (or any other) code.

Reply to this Comment

I come from a Design background and I have always considered myself a designer first and a coder/programmer second. I feel claustrophobic when I look at code that hasn't been tabbed or spaced out properly and I find that your examples Ben have been really easy on my eyes and make your sample code very easy for me to follow.

In my own code I utilize a lot of white space as well and I actually utilize two types of comments to separate "big ideas" with smaller ones. Since dreamweaver lets you color code CFM comments differently than HTML comments I have my CFM comments highlighted in yellow whereas my HTML comments remain subdued in gray. Oh, I also use caps to emphasize a really, REALLY big idea.

My commenting scheme might look something like this:

<!--- UPDATE THE RECORD --->

(some CFML goes in here)

<!--- first things first, validate the code --->

<!-- does this have a name? -->
(some cfml)

<!-- does this have a valid date -->
(some cfml)

<!--- If we have valid code, go ahead and perform the update --->
etc...

I know its hard to illustrate here, but in Dreamweaver you wind up with a series of highlighted yellow lines of text which really pop out at the reader, whereas the gray text acts as almost a whisper to help clear up what the next line or two of code will be doing.

Reply to this Comment

So, I just stumbled upon this when trying to look up tabs vs. spaces. Where I work we HAVE to only use 1 space char for indent, no tabs chars allowed whatsoever. I hate it.
Anyway, I like the compressed also. You said you don't like whitespace in your output, but you have tons of it. If you view source of this page, lines 174-415 is all whitespace. I saved the page as html as is and it is 83kb, when i remove all the whitespace, it is 79kb. 4kb is quit a bit in the grand scheme of things. I wish CF had better whitespace control w/o extra overhead.

D

Reply to this Comment

@Derek,

One char indents?? Oh man, I think I would go crazy :D I don't think I can even visually differentiate one character on a quick vertical scroll.

A lot of the white space produced by this site is just due to poor white space management. You can see HUGE in the source where custom tags are executing and creating white space. Most of it can theoretically be removed with proper management.

However, I would rather have readable code than tighter rendering. If / when it becomes an issue, I think it's something can be solved using more post-processing and caching rather than tighter lines of actual code.

Reply to this Comment

Speaking of white space, I have been debating with a few people on whether the following is a problem. I am far from a coder, I just know what I need to ;) (castleresorts.com/home)

This seems like someone doing something in loops and they should use cfsilent? There doesn't seem to be a purpose for this white space and the debate is whether it would slow the site down. I personally think that much has to affect it right?

Reply to this Comment

@Tessa - OMG! That is major white space. That will slow the site down a little. I did a test. The document size with all objects and white space as is 952Kb uncompressed! Almost 1MB! For a home page that is unacceptable. The HTML doc alone was 161Kb.
So I took it apart and stripped out all the white space and leading tabs and spaces and trailing spaces and it came to 81Kb for the HTML doc and 845 KB uncompressed for the whole thing. With the code indented properly, 98 KB and 861 KB uncompressed.

So yes, it makes a difference. The page size is doubled with all that white space.

Derek

Reply to this Comment

Oh my gosh, thanks for doing that you are so awesome. I was right then. Woohoo!

DO you do contract work? I have a few things I need some help with. Let me know and thanks again for taking the time to check that out!

Mahalo

Reply to this Comment

@Tessa,

I agree with Derek - that is a tremendous amount of white space in the source file. I can't even image what kind of code would be required to produce that. Keep in mind that when I talk about white space, I am referring to the code, not to the rendered output.

Reply to this Comment

But the rendered output white space is a direct correlation to the code wouldn't you say? Obviously not using cfsilent, cfprocessingdirective or any such white space reduction mgmt.

Reply to this Comment

@Derek,

Yes, depending on the situation, there will be some correlation. But, I think we can both agree that the kind of whitespace that Tessa is seeing is simply outrageous. I mean, seriously, what kind of code could even be doing that?!?!

Reply to this Comment

meh, that didn't work out, was supposed to be tons of space, but u get the idea. would love to see the code tho.

Reply to this Comment

I can't figure out how they did that either. I don't use coldfusion enough. Could it be from working in loops?

Lately I keep running across situations where someone who seems very qualified, more qualified than me even,not knowing obvious things. A good friend of mine asked me to help her out because she was having trouble with the designer she hired. When I looked up the person, I realized she was a well known designer in the area who had bid on some of the same jobs I did and got them even though she charges double what I do, simply because of her reputation and client list. I really didn't think there was anything I could do to help. But my friend gave me access to her site via ftp so I could get a look at the rootfiles, and I couldn't believe what I saw (she had her index.htm file buried 4 subfolders deep first of all, her contact form was built but never coded and it had been that way for 8 months, she used photoshop for the design and didn't slice the images, her photos were huge, she had major directory errors, she used NO templates and there were 50 pages so any changes to the header footer etc she was doing over for every single page. Her photos weren't aligned properly, I could go on and on. I don't understand how she is out there selling $4000-8000 sites like this with no SEO, no tracking options, nada. I mean, she was doing some designs that I wasn't even sure how she did and had a few dynamic sites up that I don't even know how to do, yet she is clueless on these basic functions??? How does something like this happen?

Reply to this Comment

BTW, I am clearly no expert or pro, my point of this rant was that I continue to be cleaning up behind people who are charging more than I am and who have more experience and should know better. It is frustrating. I don't know everything but I can guarantee if something isn't working I will figure it out.

That is it! I am upping my rates tomorrow!

Reply to this Comment

@Tessa,

Ha ha, wow, that seems like a crazy job. Some people just have no idea what they are doing I suppose.

Reply to this Comment

@Tessa

In my experience with inheriting the work of multiple vendors is that the rates they charge do not correlate with skill, rather with how well they market themselves.

Businesses are always more willing to hire the person with the glossy pamphlets and gift baskets, etc. but then not pay much attention to the fact that the coding is terrible and often leaves a website vulnerable to cyber attacks. They make their money in the fact that they are only likely to get sued about 1% of the time.

...

Or maybe I'm just cynical because I've frequently had to decipher someone else's poorly written, uncommented code whenever something breaks down. But on the bright side being a ColdFusion "firefighter" is how I've been staying employed lately.

Reply to this Comment

Ben,

I always refer to your blog as an example of how code should be indented.

Everybody has its arguments. We have unconscious preferences that we later try to rationalize.

If you work for yourself, don't worry, be happy. If you work for a team (and if your personal project succeeds that will happen), this topic is crucial.

Have you find any good automatic tool to indent the code according to your rules?

It'd be great to check out the code, format it to our preferences, change it, and then put it back to the original format before check it in. That would be the end of the debate.

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.