The Power Of Handlebars - Console.log(thoughts)

I finished my first rails app with a jQuery Front End and my biggest takeaway from this is that Handlebars is AWESOME! Without it, this would have been harder and taken much longer.

For those of you who don’t know, what Handlebars is, it’s a JavaScript tool that allows you to build html templates. But that’s not the best part! With the templates made, you can effortlessly insert a JavaScript object from an API or from your app. Here’s an example using my calendar app.

Here is my template for a task that will render on the calendars’ show page.

<script id="event-template" type="text/x-handlebars-template">
  <div class="event">
    <div class="event-desc" id="task-">
        <!-- Post Header -->
<header class="intro-header" style="background-image: url('/img/home-bg.png')">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="post-heading">
                    <h1>My Calendar</h1>
                    
                    <span class="meta">Posted by PhreeMason on May 27, 2017</span>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Post Content -->
<article>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">

				<p>This app was supposed to take only 3, maybe 4 days to make. However, I learned pretty early that rails is much harder when you aren’t within safe cozy blanket of a learn lab/code along. Like always, it took me quite some time to figure what I wanted to make. The idea for a calendar app came to me while I was browsing programmer forums and came across a layout template for a beautiful calendar design which can be seen <a href="https://responsivedesign.is/patterns/calendar/">here</a>.</p>

<p>The template only showed an outline for the month August 2014, with the days hard coded. It was up to me to build out the months and days for the rest of the calendar. I also need a reason for the calendar app, so I decided to make it a site to keep track of tasks and dates, similar to the calendar app on most phones.</p>

<p>At first I had trouble getting my models to behave and interact the way I wanted them to. I wanted to make a calendar that was very accurate, one that keeps track of leap years and accurately displays each day under the correct weekday. The problem was I couldn’t think of a way to do that without reinventing the time model, which is not what I wanted to do. After failing to create my own time model I realized I only needed to display time, not create it.</p>

<p>This first thing I did was creat methods that properly display month days.</p>

<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>  def first_week_days
    week_days = []
    day_of_week  = DateTime.new(year, order).wday
    n = 7 - day_of_week
    (1..n).each { |e| week_days &lt;&lt; e }
    week_days
  end

  def middle_week_days
    week_days = []
    start = first_week_days.last + 1
    finish = last_week_days.first - 1
    all_days = (start..finish).map { |e| e }
    all_days.each_slice(7) {|e| week_days &lt;&lt; e }
    week_days
  end

  def last_week_days
    week_days = []
    day_of_week = DateTime.new(year, order).end_of_month.wday
    n = days - day_of_week
    (n..days).each { |e| week_days &lt;&lt; e }
    week_days
  end

</code></pre></div></div>
<p>The beginning days and ending days for any month varies. Months can begin on any day of the week and end on any day of the week. However the days in the middle of the month are the same for all months. I used ruby’s datetime model to help identify the days at the end and beginning of a month. 
The first_week_days method uses the datetime model to find out which day of the week the first day of a month falls on and stored the value in day_of_week. This value is then subtracted from 7 so I can identify which days to allocate to the first month and which days to give to the previous month. The same process is repeated in the last_week_days method however this time it tracks the last day of the month instead of the first and counts backwards from the last day. This middle_week_days method simply gathers all the days between the first two methods and breaks them up into groups of seven in order to fill up all the middle weeks.</p>

<p>After displaying the days of a month, I need to show the tasks for that day within the calendar. I also needed to show users their upcoming tasks. To accomplish this I wrote a sql query to retrieve all tasks that did not already expire.</p>

<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>  def self.upcoming_for_user(user)
    tasks = joins(:calendar).where(["calendar_id = ?", user.calendar.id]).where('start_time &gt;= ?', Time.now).order("start_time")
  end
</code></pre></div></div>

<p>This method gets all tasks from the database for a given user with a start time that did not already pass. Although it’s just one line, it took me about 20 minutes to write!</p>

<p>My favorite part of this project <em>also where I spent most of my time</em> was styling the elements using css. This was my first time styling a site solo and I enjoyed it and am proud of the final results.</p>



                <hr>

                <ul class="pager">
                    
                    <li class="previous">
                        <a href="/2017/05/02/sinatra_poolite/" data-toggle="tooltip" data-placement="top" title="Sinatra Poolite">&larr; Previous Post</a>
                    </li>
                    
                    
                    <li class="next">
                        <a href="/2017/06/16/the_power_of_handlebars/" data-toggle="tooltip" data-placement="top" title="The Power Of Handlebars">Next Post &rarr;</a>
                    </li>
                    
                </ul>

            </div>
        </div>
    </div>
</article>

<hr>

    </div>
    <div class="event-time">
        
    </div>
  </div>
</script>

And this is what my tasks object looks like

Object {id: 1, content: "awesome stuff being done here", time: "Jun 22,  4:05 AM", day: 22, month_time: "06 05 AM"}

As you can see the template is written in html. Within the html are handlebars expressions indicated by two curly braces. JS objects can replace the expressions in the curly braces. This is where my tasks objects comes into play. My task object has a property of ‘content’ and ‘month_time.’ The Handlebars template will grab the values of ‘month_time’ and ‘content’ and replace the expressions of the same name.

The output will look like this:

  <div class="event">
    <div class="event-desc" id="task-22}">
        awesome stuff being done here
    </div>
    <div class="event-time">
        06 05 AM
    </div>
  </div>

The html above can then be appended to an element on the page. This is great because without it, I would have to write all the html inside a JavaScript string. Then append the string to an element on the page. This can get messy if you need to input more than one line of html and specify classes, ids and other attributes. Also, your string will not be properly formatted in html which makes it hard to edit later if its long.

Take a look at the same template using only JavaScript:

`<div class="event"> <div class="event-desc" id="task-${day}"> ${content} </div> <div class="event-time"> ${month_time} </div> </div>`

Gross!