A while ago, a friend asked me for help on an application he was working. He shared a part of his code with me, a very standard HTML code that you can see below. But I got surprisingly shocked, and I’ll explain why.

<!-- Code snippet taken from my friend's project (28 lines) -->
<section class="profile">
  <div class="container">
    <img class="profile" src="<%= user.profile_picture.url %>" alt="">
    <div class="info">
      <div class="fullname"><%= user.fullname %></div>
      <div class="username">@<%= user.username %></div>
      <div class="id"><%= user.id %></div>
      <div class="bio"><%= user.bio %></div>
    </div>
    <div class="count">
      <div class="item">
        <%= user.media.count %>
        <br>
        <span>posts</span>
      </div>
      <div class="item">
        <%= user.followed_by.count %>
        <br>
        <span>followers</span>
      </div>
      <div class="item">
        <%= user.follows.count %>
        <br>
        <span>following</span>
      </div>
    </div>
  </div>
</section>

The code above seems pretty standard, right? Well, for me, not anymore. That’s because I got used to working with preprocessors. Preprocessors helps you write a cleaner and easy to read code.

A preprocessor is a program that takes one type of data and converts it to another one. In case of HTML and CSS, some of the more popular preprocessor languages are Slim and Sass. Slim is processed into HTML and Sass is processed into CSS. The HTML preprocessors we most use at Startaê are Slim and Emblem.js. Now take a look at the same code rewritten with the preprocessor in action.

<!-- Same code snippet rewritten in Slim(12 lines) -->
section.profile
  .container
    = image_tag user.profile_picture.url, class: 'profile'
    .info
      .fullname = user.fullname
      .username = user.username
      .id = user.id
      .bio = user.bio
    .count
      .item data-counter=user.media.count posts
      .item data-counter=user.followed_by.count followers
      .item data-counter=user.follows.count following

This way we could remove 16 irrelevant lines from the code; that’s half of the regular HTML code. The point here is not about removing lines of the code only, but writing a clean and understandable code in a faster way.

Core principles behind preprocessors

The following core principles were taken from HAML, one of the most famous preprocessors that influenced all the others.

  • Markup Should be Beautiful.
    Markup should not be used merely as a tool to get browsers to render a page how the author wants it rendered. The rendering isn’t the only thing people have to see; they have to see, modify, and understand the markup as well. Thus, the markup should be just as user-friendly and pleasant as the rendered result.

  • Markup Should be DRY.
    HTML involves major repetition. Every element is named twice: once before its content and once after. HTML preprocessors avoid all of this by relying on indentation, not text, to determine where elements and blocks of code begin and end. Not only does this result in smaller templates, it makes the code much cleaner to look at.

  • Markup Should be Well-Indented.
    HTML can get unreadable easily. Markup language with good indentation improves appearance, makes it easy to read for readers and also to determine where a given element starts and ends.

  • HTML Structure Should be Clear.
    Markup language with a clear structure will help in code maintenance and logical understanding of final result. It is unclear whether Haml offers any differential advantage in this regard.

Preprocessors can help you and your team to be more productive

Using a templating engine will remove redundancies from your code. DRYing these redundancies, you are able to find specific elements much easier. The indentation you were already using in raw HTML can be used to close your elements automatically. In my case, changing the markup language removed nothing less than 112 lines off the entire project. 2028 characters.

I have not written raw HTML for a long time and helping my friend with his application made me notice how stressful it can be. If you are interested in improving your workflow and having more neat HTML markups, you can pick a templating engine that fits in your stack:

Test it and let me know how it worked for you.

See you later, guys!