Fire.app Feature Tutorial

Using Template Helpers

Template helpers are methods which can be used to simplify building HTML. Fire.app provides a lot of built-in helpers and you can customize what you want.

Open http://127.0.0.1:24681/screenshots.html in your browser and you'll see the "Screenshots" page. Then open screenshots.html in your IDE and read the source code. You'll find that it has a lot of duplicated HTML code.

First, modify the file extension of screenshots.html from .html to .html.erb, so we can use ERB syntax in this file.

After modifying the file name, add a helper to generate LiveReload-js before </body>

<%= livereload_js %>

Refresh the browser to active the added JavaScripts. Now, the browser will automatically refresh after modifying files.

Next, we will use some helpers to simplify the placeholder texts. Please find the HTML content that is duplicated five times in <div class="main">.

<h2>Lorem ipsum title</h2>
<p><img src="http://placehold.it/640x360" /></p>
<p>Lorem ipsum … </p>

Delete four sections but leave one, then use helpers to replace the original content.

<h2><%= lorem_words(4+rand(4)) %></h2>
<p><img src="<%= lorem_image("640x360") %>" /></p>
<p><%= lorem_paragraph %></p>

In the code above, we see the usage of rand(). We used lorem_words(4+rand(4)) to limit the length of lorem_words()'s result between 4 (4 + 0) to 7 (4 + 3). Using lorem ipsum helpers to generate placeholder texts, we can make the page look more realistic. Furthermore, because the resulting content will automatically change each time after refreshing the browser, it's easy to find problems caused by different content length.

Then, use ERB syntax to duplicate the content.

<% 5.times do %>
    <h2><%= lorem_words(4+rand(4)) %></h2>
    <p><img src="<%= lorem_image("640x360") %>" /></p>
    <p><%= lorem_paragraph %></p>
<% end %>

Switch to your browser and you will see the content changed to five different placeholder sections.

Use this same idea to change the content of <div class="links"> and <div class="footer">.

<div class="links">

<div class="links">
    <h2>Information Links</h2>
    <ul>
        <% 5.times do %>
            <li><a href="#"><%= lorem_words(4+rand(4)) %></a></li>
        <% end %>
    </ul>
</div>

<div class="footer">

<div class="footer">
    <%= lorem_sentence %>
</div>

Switch to your browser again to verify that the page has already changed. Now we can continue to the next step.