Jump to content
Can't remember your login details? Read more... ×
Sign in to follow this  
stickmangumby

Generating clean HTML output from server side code

Recommended Posts

I'm a bit of a neat freak. I like it when all my <td>'s line up and stuff.

 

I'm trying to figure out a good method to write readable ERb templates, that produce readable HTML. I'm finding that if I want to tab-align my interpreted code, I get a whole lot of leading tabs being appended to my actual HTML output. For example:

 

<% if @foo.value == "1" -%>
	<td>
	<% (1..5).each do |i| -%>
		<span>
		<% if i / 2 == 0 -%>
			<%= i * 5 %>
		<% else -%>
			<%= i -%>
		<% end -%>
		</span>
	<% end -%>
	</td>
<% end -%>

Produces something awful like this:

<td>
					<span>
							1						</span>
					<span>

							10
						</span>
					<span>
							3						</span>
					<span>
							20
						</span>
					<span>
							5						</span>

			</td>

As you can imagine, when you're iterating through table cells and printing a lot of fields, either you HTML output gets messy, or your ERb templates get messy (say if you had everything from <span> to </span> on the one line).

 

One thing I've tried, and not liked, is not indenting the <% opening tags, and indenting the code within them. However, with a tab width of 2, and the fact that one uses both <% and <%- opening tags, this doesn't really help much.

 

Does anyone have any wisdom to share?

Share this post


Link to post
Share on other sites

im probably not the best person to answer, because I literally could not give a damn what my HTML looks like. Its too much effort to make it look nice, for something that really dosent matter to me(or users)... check out gmail's html... they obviously agree with me! :)

 

That said, something simple would be to change your editor's preferences to insert spaces instead of tabs for .erb.html files. Then the generated html would have nice small indents.

 

If you cant do it in you editor, you could run a search&replace one-liner to do it for you, something like....

find /RAILS_APP_ROOT -name "*.html.erb" | xargs perl -pi -w -e 's/\t/  /g;'

Share this post


Link to post
Share on other sites

I tend to think of the html output of my templates like the output of a compiler and hence am not concerned with what they look like as long as they work. I am more concerned with my templates being tidy and easy to read.

 

You can always view your outputted HTML with Firefox's DOM viewer which presents it in a nice tree layout no mater what the HTML looks like.

 

- Edit

The DOM viewer I use is actually part of Firebug.

Share this post


Link to post
Share on other sites

In my experience, you either make your ERB template neat, or you make your ERB template output neat. Pick one :P

 

If you're concerned about output neatness take a lookt at HAML. The guy that created it shared your neatness concerns, if you haven't come across this before you might find the syntax takes a little getting used to but overall it should be a win. Personally I stick with ERB, I think I find it hard to let go of the HTML :P

 

By the way, if you continue with ERB check out Erubis. It's the fastest implementation for this templating format out there.

Share this post


Link to post
Share on other sites

Thanks for the replies everyone.

 

My main concern is the fact that I'm using helpers that are generating their own code that I want to be able to easily look at and debug. This is slow to find and hard to read when my HTML is full of misaligned tabs and awkward newlines.

 

@dave_blob, thanks for the tip on converting tabs to spaces. I've got that going and it certainly is helpful... 8 spaces in a tab is too many in Firefox!

 

@SledgY, I just got into Firebug on the weekend, I'll check it out.

 

@hetman, you win at Ruby on Rails again! I just had a bit of a browse of the reference for HAML, and it looks friggen awesome. I'll give it a go tomorrow, but it seems very promising if I can get used to it :)

Share this post


Link to post
Share on other sites

Speaking of firebug. I still haven't figured out how to expand all nodes in the HTML display Firebug gives you. If this is a problem then Opera can help. Opera's Firebug analogue is called Dragonfly, you can activate it through the menu: Tools --> Advanced --> Developer tools. This one does have an expand all nodes button (also check out the DOM snapshot tool here.

 

Firefox still wins because it will highlight the element in the actual page when you mouse over the HTML dom object (very handy while debuggin CSS display issues). However I find Dragonfly's error console a bit more verbose and helpful... I had a bug in one of my CSS files I didn't even know about until I ran this over it.

 

One more thing to keep in mind. Firebug and Dragonfly will let you execute JavaScript through a command line. This can be very helpful when coding your scripts. Use it well :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×