<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>M. E. Patterson - Author, Geek &#187; haml</title>
	<atom:link href="http://mepatterson.net/tag/haml/feed/" rel="self" type="application/rss+xml" />
	<link>http://mepatterson.net</link>
	<description>bestselling author of Devil&#039;s Hand, a supernatural thriller; writer of fictions and web software</description>
	<lastBuildDate>Sun, 18 Dec 2011 23:19:07 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
	<!-- google_ad_section_end --><!-- google_ad_section_start -->	<item>
		<title>Why use HAML (and SASS)? I already know HTML.</title>
		<link>http://mepatterson.net/2010/02/why-use-haml-and-sass-i-already-know-html/</link>
		<comments>http://mepatterson.net/2010/02/why-use-haml-and-sass-i-already-know-html/#comments</comments>
		<pubDate>Tue, 02 Feb 2010 21:53:49 +0000</pubDate>
		<dc:creator>M. E. Patterson</dc:creator>
				<category><![CDATA[Coding]]></category>
		<category><![CDATA[haml]]></category>
		<category><![CDATA[rails]]></category>
		<category><![CDATA[ruby]]></category>
		<category><![CDATA[sass]]></category>

		<guid isPermaLink="false">http://blog.digimonkey.com/?p=68</guid>
		<description><![CDATA[The title of the post is more-or-less a verbatim quote from a coworker, as well as from an unrelated colleague of mine from a previous job. I was asked that question and, to be honest, I was a little thrown both times. I didn&#8217;t actually know why I use HAML.  I guess I&#8217;d never really [...]]]></description>
			<content:encoded><![CDATA[<p>The title of the post is more-or-less a verbatim quote from a coworker, as well as from an unrelated colleague of mine from a previous job.  I was asked that question and, to be honest, I was a little thrown both times.  I didn&#8217;t actually know <em>why</em> I use HAML.  I guess I&#8217;d never really considered it much after I started doing everything with it.  It just seemed <em>better</em> and more fun.</p>
<p>So I spent all last night thinking about the answer.  Why use HAML?  For that matter, why use SASS either?  It&#8217;s notable, I guess, that yesterday <a title="Chris Eppstein" href="http://chriseppstein.github.com/" target="_blank">Chris Eppstein</a> was polling his twitter followers on whether they wanted to break SASS and HAML apart to be separate gems &#8230; clearly others out there are using one but not the other.</p>
<p>And I suppose it&#8217;s not enough to answer that I use HAML and SASS because <a href="http://www.ralree.info/2007/2/8/cheating-on-erb-with-haml/" target="_blank">other</a> <a href="http://blog.obiefernandez.com/content/2008/01/are-you-using-h.html" target="_blank">luminaries</a> in the Ruby world <a href="http://railspikes.com/2007/4/9/haml-grigsby-s-first-rule" target="_blank">swear by it</a>.  As my Mom was fond of saying, &#8220;If all the other kids jumped off a cliff&#8230;&#8221;  So I guess that&#8217;s not entirely a valid reason.</p>
<p>So, here&#8217;s my attempt to coalesce <em>my</em> various reasons for using HAML (and SASS) into a single post, and to try and convince <em>you</em> why I think it&#8217;s a great idea.  And to throw a bone to Eppstein, I&#8217;ll try to make a case for why, though I have no problem with them being split into separate gems, I still believe they should always go together, just like peanut butter and grape jam.</p>
<p><span id="more-68"></span></p>
<h3>SIMPLER, SHORTER, LESS WORK</h3>
<p>So this is the obvious one.  Check out the two chunks of code below:</p>
<p>ERB (525 characters; 24 lines)</p>
<div class="codecolorer-container ruby blackboard" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;height:300px;"><div class="ruby codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color:#006600; font-weight:bold;">&lt;%</span> <span style="color:#9966CC; font-weight:bold;">if</span> <span style="color:#0066ff; font-weight:bold;">@users</span>.<span style="color:#9900CC;">empty</span>? <span style="color:#006600; font-weight:bold;">%&gt;</span><br />
&nbsp; &lt;div class=&quot;empty_collection&quot;&gt;<br />
&nbsp; &nbsp; &lt;em&gt;Could not find any users.&lt;/em&gt;<br />
&nbsp; &lt;/div&gt;<br />
<span style="color:#006600; font-weight:bold;">&lt;%</span> <span style="color:#9966CC; font-weight:bold;">else</span> <span style="color:#006600; font-weight:bold;">%&gt;</span><br />
&nbsp; &lt;table class=&quot;users_list&quot;&gt;<br />
&nbsp; &nbsp; &lt;thead&gt;<br />
&nbsp; &nbsp; &nbsp; &lt;tr&gt;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &lt;th&gt;Name&lt;/th&gt;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &lt;th&gt;Email&lt;/th&gt;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &lt;th&gt;Age&lt;/th&gt;<br />
&nbsp; &nbsp; &nbsp; &lt;/tr&gt;<br />
&nbsp; &nbsp; &lt;/thead&gt;<br />
&nbsp; &nbsp; &lt;tbody&gt;<br />
&nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&lt;%</span> <span style="color:#0066ff; font-weight:bold;">@users</span>.<span style="color:#9900CC;">each</span> <span style="color:#9966CC; font-weight:bold;">do</span> <span style="color:#006600; font-weight:bold;">|</span>user<span style="color:#006600; font-weight:bold;">|</span> <span style="color:#006600; font-weight:bold;">%&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &lt;tr class=&quot;<span style="color:#006600; font-weight:bold;">&lt;%</span>= cycle<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#996600;">'odd'</span>,<span style="color:#996600;">'even'</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">%&gt;</span>&quot;&gt;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;<span style="color:#006600; font-weight:bold;">&lt;%</span>= user.<span style="color:#9900CC;">name</span> <span style="color:#006600; font-weight:bold;">%&gt;</span>&lt;/td&gt;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;<span style="color:#006600; font-weight:bold;">&lt;%</span>= user.<span style="color:#9900CC;">email</span> <span style="color:#006600; font-weight:bold;">%&gt;</span>&lt;/td&gt;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;<span style="color:#006600; font-weight:bold;">&lt;%</span>= user.<span style="color:#9900CC;">age</span> <span style="color:#006600; font-weight:bold;">%&gt;</span>&lt;/td&gt;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;<br />
&nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&lt;%</span> <span style="color:#9966CC; font-weight:bold;">end</span> <span style="color:#006600; font-weight:bold;">%&gt;</span><br />
&nbsp; &nbsp; &lt;/tbody&gt;<br />
&nbsp; &lt;/table&gt;<br />
<span style="color:#006600; font-weight:bold;">&lt;%</span> <span style="color:#9966CC; font-weight:bold;">end</span> <span style="color:#006600; font-weight:bold;">%&gt;</span></div></div>
<p>HAML (331 characters; 16 lines)</p>
<div class="codecolorer-container ruby blackboard" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="ruby codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color:#006600; font-weight:bold;">-</span> <span style="color:#9966CC; font-weight:bold;">if</span> <span style="color:#0066ff; font-weight:bold;">@users</span>.<span style="color:#9900CC;">empty</span>?<br />
&nbsp; .<span style="color:#9900CC;">empty_collection</span><br />
&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">%</span>em Could <span style="color:#9966CC; font-weight:bold;">not</span> find any users<br />
<span style="color:#006600; font-weight:bold;">-</span> <span style="color:#9966CC; font-weight:bold;">else</span><br />
&nbsp; <span style="color:#006600; font-weight:bold;">%</span>table.<span style="color:#9900CC;">users_list</span><br />
&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">%</span>thead<br />
&nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">%</span>tr<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">%</span>th Name<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">%</span>th Email<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">%</span>th Age<br />
&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">%</span>tbody<br />
&nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">-</span> <span style="color:#0066ff; font-weight:bold;">@users</span>.<span style="color:#9900CC;">each</span> <span style="color:#9966CC; font-weight:bold;">do</span> <span style="color:#006600; font-weight:bold;">|</span>user<span style="color:#006600; font-weight:bold;">|</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">%</span>tr<span style="color:#006600; font-weight:bold;">&#123;</span>:<span style="color:#9966CC; font-weight:bold;">class</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> cycle<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#996600;">'odd'</span>,<span style="color:#996600;">'even'</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">%</span>td= user.<span style="color:#9900CC;">name</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">%</span>td= user.<span style="color:#9900CC;">email</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">%</span>td= user.<span style="color:#9900CC;">age</span></div></div>
<p>Just in terms of key presses, you&#8217;re hitting the keys 37% less in this case if you use HAML.  In terms of lines of code, you&#8217;re getting a 33% reduction.  (Hell, WordPress doesn&#8217;t even need to display a scrollbar for the HAML example).  I don&#8217;t know about you, but to me that&#8217;s a significant win right there.  Every second I spend typing monotonous stuff is a second I didn&#8217;t spend building a feature.  And when you&#8217;re writing hundreds of lines of code in a day, that can add up to a lot of extra time to either drink beer or add extra polish to the feature you&#8217;re implementing.</p>
<h3>COGNITIVE DISSONANCE BETWEEN HTML AND CSS</h3>
<p>That&#8217;s just a fancy way of saying &#8220;my brain has to switch gears too much or too drastically, reducing its efficiency.&#8221;  Anyone who has done significant amounts of HTML and CSS can tell you that the constant back-and-forth between the stylesheets and the html templates becomes something of a rhythm, a development pulse of sorts.  But with that rhythm comes delay and context shifts.</p>
<p>In HTML, I type:</p>
<div class="codecolorer-container html4strict blackboard" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="html4strict codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;highlight&quot;</span>&gt;</span><br />
&nbsp; this is some stuff<br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>&gt;</span></div></div>
<p>In CSS, to style this, I type:</p>
<div class="codecolorer-container css blackboard" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="css codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #6666ff;">.highlight</span> <span style="color: #00AA00;">&#123;</span> <br />
&nbsp; <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#f00</span> <span style="color: #00AA00;">&#125;</span></div></div>
<p>For those of us well-versed in modern web development, that shift isn&#8217;t tough, but it&#8217;s still a shift.</p>
<p>Using HAML:</p>
<div class="codecolorer-container ruby blackboard" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="ruby codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">.<span style="color:#9900CC;">highlight</span> <br />
&nbsp; this is some stuff</div></div>
<p>That alone improves the contextual parity some, even if you don&#8217;t use SASS and just use straight CSS.  You type &#8220;.highlight&#8221; to make the div.  You type &#8220;.highlight&#8221; to style it.  Simple.</p>
<p>If you use SASS, it gets even better:</p>
<div class="codecolorer-container css blackboard" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="css codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #6666ff;">.highlight</span><br />
&nbsp; <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#f00</span></div></div>
<p>Now, you don&#8217;t even have to worry about the curlies (which don&#8217;t exist in HTML, causing cognitive dissonance).  In fact, the &#8220;code&#8221; in both the HAML and SASS templates is nearly identical in structure.  The only difference is that in the former, you provide the data to display, and in the latter, you provide the presentation styling for that data.  If you buy the whole concept behind &#8220;separation of concerns&#8221; (and you should!), this makes life clean and satisfying.</p>
<h3>LOWER BARRIER TO REFACTORING</h3>
<p>If you&#8217;ve spent as much time as I have looking at someone else&#8217;s legacy code in massive enterprise apps, you know how painful it can be to jump in at first.  <em>What the hell does this construct even do?  Why did they implement this?  Why did someone write 6 lines of code that duplicate a function that Ruby/PHP/Java/whatever already has?  What are all these non-standard method calls and where do the actual methods live?</em></p>
<p>This path of fiery hoops must be jumped through before you can really get down to a level of comfort with the code.  And you need that comfort to reach your full development speed when implementing or refactoring in that part of the app.  The faster you can get there, the sooner you&#8217;ll be able to demonstrate your value to the team and to the product.  </p>
<p>The bane of my existence has been so-called &#8220;cowboy coders,&#8221; those individuals who feel it necessary to hack together fast, poorly-considered implementations in order to move on to the next thing and prove to their superiors how &#8220;awesome&#8221; they are, because they can knock out 10 new features a day.  Nice.  Good for you, buddy.  But you&#8217;re costing me, and your team, and therefore yourself, even more time in the long run, with your mistakes, poor architecture that becomes &#8220;too big to remove&#8221; (hmm&#8230;where have I heard that before?), and a product that becomes shackled to the cowboy, who is the only one who understands the parts of the app they wrote.  And God forbid if they ever leave the team&#8230;</p>
<p>HAML/SASS provide a buffer against the cowboy.</p>
<p><del datetime="2010-02-02T15:43:56+00:00">Forcing</del> <del datetime="2010-02-02T15:43:56+00:00">Harassing</del> Coercing your teammates to use HAML (and SASS) reduces the cognitive complexity of the presentation layer (aka the &#8216;view&#8217; for you MVC folk), both in terms of number of lines and characters your brain has to process, and in terms of its immediate understandability.  And that makes you faster, and your team faster, and your teammates faster.  Faster means more features with more polish sooner in the release cycle, with less bugs.  And the reduced complexity has the additional benefit of helping to prevent <em>future</em> bugs, because it&#8217;s more obvious what&#8217;s going on in a particular template.  Think of it as the programming equivalent of <a href="http://en.wikipedia.org/wiki/Scotchgard">Scotchgard</a> sprayed on your templates; it might not prevent every stain, but it helps you get the carpet clean quicker.  </p>
<p>Sure, the cowboy might still plow through poorly thought-out code (that&#8217;s a problem for another day), but at least now it&#8217;s easier to understand WHAT he&#8217;s doing with 200 lines of business logic jammed into the view.  And it&#8217;s easier to see why it should be refactored immediately!</p>
<h3>ENCOURAGING BEST PRACTICES</h3>
<p>At the risk of igniting some holy war about what actually <em>constitutes</em> best practices in the various spheres of HTML, CSS, Ruby, Rails, etc, I think it&#8217;s worth discussing the concept of &#8220;best practices.&#8221;  I think adopting Best Practices has gotten a bad rap in the eyes of some developers, especially those for whom learning the latest and greatest tech in the community seems like &#8220;following a fad.&#8221;  Sometimes, the latest and greatest is actually better, because people in the community are actively thinking about better ways to do the things we do every day.  Don&#8217;t dismiss it out of hand because you&#8217;re defending your little island of knowledge.  Any time you hear yourself saying, &#8220;I already know how to do this. Why should I learn something else?&#8221; &#8230; stop!  Pause and consider your own motivations.  There&#8217;s a chance you&#8217;re dismissing the new tech because you feel threatened by it.  Embrace change, people!  Embrace new ideas!  Try new things!  It will make you (A) more educated in your field and (B) more marketable, which gets you (C) better pay and more responsibility.  This is a much better and more-fulfilling path to job security than defending your turf and digging in your heels while the programming community moves on past you.</p>
<p>So, that said, I think HAML provides a major advantage here, as well.  It&#8217;s established best practice that presentation templates (whether in Rails, or Django, or home-brew MVC-based architectures) should not contain business logic or even much in the way of presentational logic.  HAML does a great job of gently encouraging you to avoid this problem:</p>
<p>This bit of ruby code is straightforward in HAML and, I would argue, reasonable in the view:</p>
<div class="codecolorer-container ruby blackboard" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="ruby codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color:#006600; font-weight:bold;">-</span> <span style="color:#0066ff; font-weight:bold;">@users</span>.<span style="color:#9900CC;">each</span> <span style="color:#9966CC; font-weight:bold;">do</span> <span style="color:#006600; font-weight:bold;">|</span>user<span style="color:#006600; font-weight:bold;">|</span></div></div>
<p>But in ERB, you&#8217;ll sometimes see things like this:</p>
<div class="codecolorer-container ruby blackboard" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="ruby codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color:#006600; font-weight:bold;">&lt;%</span> <br />
<span style="color:#0066ff; font-weight:bold;">@users</span>.<span style="color:#9900CC;">each</span> <span style="color:#9966CC; font-weight:bold;">do</span> <span style="color:#006600; font-weight:bold;">|</span>user<span style="color:#006600; font-weight:bold;">|</span><br />
&nbsp; full_name = user.<span style="color:#9900CC;">first_name</span> <span style="color:#006600; font-weight:bold;">+</span> <span style="color:#996600;">' '</span> <span style="color:#006600; font-weight:bold;">+</span> user.<span style="color:#9900CC;">last_name</span><br />
&nbsp; savings = <span style="color:#CC0066; font-weight:bold;">sprintf</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#996600;">&quot;%.2f&quot;</span>, user.<span style="color:#9900CC;">savings</span><span style="color:#006600; font-weight:bold;">&#41;</span><br />
&nbsp; <span style="color:#9966CC; font-weight:bold;">if</span> savings == <span style="color:#006666;">0.0</span><br />
&nbsp; &nbsp; savings = <span style="color:#0000FF; font-weight:bold;">false</span><br />
&nbsp; &nbsp; savings_row_class = <span style="color:#996600;">'red'</span><br />
&nbsp; <span style="color:#9966CC; font-weight:bold;">end</span><br />
<span style="color:#006600; font-weight:bold;">%&gt;</span></div></div>
<p>While you <em>could</em> do all that in HAML, the inability to break stuff across multiple lines without starting a new hyphen-fronted line makes it feel <em>icky</em> somehow.  So then it gently encourages you to break up that code into the model and/or helper methods, where it should have been in the first place.</p>
<p>I&#8217;m not saying that HAML and SASS are silver bullets that make you or your teammates code better, but it sure helps.  And when someone you know starts bitching about not being able to break a HAML ruby line into multiple lines, you&#8217;re probably safe in assuming that they are on the path to doing something Naughty&#0153;</p>
<h3>CONCLUSION</h3>
<p>So there you have it.  There are many other reasons to use HAML and SASS that I&#8217;m sure I didn&#8217;t cover here.  The &#8220;fun-ness&#8221; of it, the beauty of the syntax, the ability to have it render templates in different formatting modes depending on production or development environments, etc.  But hopefully this gives you some food for thought on why <em>I</em> use it, and why maybe you should give it a look (or a second look, maybe?)</p>
]]></content:encoded>
			<wfw:commentRss>http://mepatterson.net/2010/02/why-use-haml-and-sass-i-already-know-html/feed/</wfw:commentRss>
		<slash:comments>49</slash:comments>
		</item>
	<!-- google_ad_section_end --></channel>
</rss>

