Encode HTML faster with templating

It’s been more than a year since I abandoned the universe phpto devote myself to the ruby ​​galaxy. Working with an MVC architecture, I used different templating engines like smarty. Ruby also has its own engines like erbhaml… But my favorite -and by far, remains slim.

Why ? The reason is simple: I am 2 times more efficient. With this templating, it is no longer necessary for HTML markup to use <>and /. Result: HTML is coded 2 times faster (although plugins like emmet.io can make your life easier). Your code is 2 times shorter and it is much faster to scan a file.

In this article I will explain the tricks I learned by reading the documentation, to help you avoid unnecessarily running stackoverflow for hours in order to find good coding practice.

The basics

The slim phylosophy is to remove all unnecessary characters . If we take this example from the documentation we can notice several things:

  doctype html<font></font>
      title Slim Examples<font></font>
      meta name="keywords" content="template language"<font></font>
      meta name="author" content=author<font></font>
        alert('Slim supports embedded javascript!')<font></font>
      h1 Markup examples<font></font>
      <span class="nf">#content</span><font></font>
        p This example shows you how a basic Slim file looks like.<font></font>
        <span class="p">==</span> yield
        <span class="p">-</span> <span class="k">unless</span> <span class="n">items</span><span class="p">.</span><span class="nf">empty?</span><font></font>
            <span class="p">-</span> <span class="k">for</span> <span class="n">item</span> <span class="k">in</span> <span class="n">items</span> <span class="k">do</span><font></font>
                td.name = item.name<font></font>
                td.price = item.price<font></font>
        <span class="p">-</span> <span class="k">else</span><font></font>
           | No items found.  Please add some inventory.<font></font>
             Thank you!<font></font>
      <span class="nf">#footer</span>
        Copyright © <span class="si">#{</span><span class="n">year</span><span class="si">}</span> <span class="si">#{</span><span class="n">author</span><span class="si">}</span>
  • No tags closed
  • #content will give <div id="content"></div>
  • td.name will be transformed into <td class="name"></td>
  • = link_to 'My site', 'http:// wesharethis.com.' to use ruby ​​that will be compiled into <a href="http://wesharethis.com.">My site</a>
  • - if i.am == amazing allows to make tests or loops

Space Management

If you have followed my sublime text tunning you know that I remove unnecessary spaces at the end of the line with each backup. This advantage can turn into inconvenience and here is how to manage spaces with slim and you avoid using&nbsp;

  • ' Adds a space at the end of the line.
  • | Allows you to add text without space.

Which gives in a concrete case:

      'Here is a paragraph with<font></font>
       <span class="p">=</span> <span class="n">link_to</span> <span class="s1">'a link to a site'</span><span class="p">,</span> <span class="s1">'http://techrights.com'</span><font></font>
      |Another paragraph<font></font>
      ', with a comma.<font></font>

Optimize search engines with schema.org tags

Schema.org is a micro data format that allows search engines and devices to understand the structure of information. Here is a simple example for tagging a breadcrumb

    ul class="breadcrumbs"<font></font>
      li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"<font></font>
        <span class="p">=</span> <span class="n">link_to</span> <span class="s1">'/index.html'</span><span class="p">,</span> <span class="ss">itemprop: </span><span class="s1">'url'</span> <span class="k">do</span><font></font>
          span itemprop="title"<font></font>
  • itemscope=""will be interpreted in itemscope, this is one of the only instances where you need to add characters to HTML.

Custom attributes data-*

Just like microdata tags, to add custom attributes, you simply use the following notation:


    nav data-dropdown="js-sub-menu" Menu


    <span class="nt"><nav</span> <span class="na">data-dropdown=</span><span class="s">"js-sub-menu"</span><span class="nt">></span> Menu <span class="nt"></nav></span>

This is complicated if you need to add several attributes, but the notation is simplified if you know the correct syntax:


    div data: {a: 1, b: 2} Foo


    <span class="nt"><div</span> <span class="na">data-a=</span><span class="s">"1"</span> <span class="na">data-b=</span><span class="s">"2"</span><span class="nt">></span>Foo<span class="nt"></div></span>

Write markdown

It is possible to write directly from the markdown in the middle of its views. It is a technique that I use often because this format is pervasive and easily convertible.

      ## Write markdown<font></font>

Syntax highlighting

There are a multitude of tools for adding syntax highlighting to web pages. My favorite technique is to use the markdown and to specify the desired language:

with redcarpet:

    <span class="sb">``` ruby
    def my_cool_method(message)
      puts message

with kramdown:

    ~~~ ruby<font></font>
    def my_cool_method(message)<font></font>
      puts message<font></font>


The main disadvantage of using this templating engine is the cost of training necessary for its learning.

That’s all .

Error reading is simplified because if your indentation is not perfect the page will not be compiled. Gone is the </div>ghost that breaks all your page bet.

Slim is currently 10 times faster than haml.

By removing unnecessary tags your code is more concise and reads faster.

It is always possible to use HTML to familiarize yourself with syntax, which you will abandon very quickly to use only slim.

If you do not use ruby ​​there are plugins in JavaScript to help you find the light:


Am a tech geek.. Do you wanna know more about me..? My contents will do tell you.

Pin It