“I hear about all these new HTML tags, but I don’t have any problem with using <div>s like I’ve always done. Why should I care?”

The questioners are referring to the new elements introduced with HTML5, including <nav> (which encapsulates a part of your page containing navigation elements), <article> (think of a newspaper story, with its heading, byline, callouts, etc.), and <time>, among others. While it’s true the Web survived for many years without these new elements, there’s no reason to stand on tradition. The new elements provide a number of benefits to both Web developers and end users, and, best of all, you can start using them right away!

• Content aggregators and search providers can better figure out your content. News aggregators and search engines are everywhere, and are often an excellent way to disseminate your published content. Why not make it easy on them by explicitly marking what parts of your page they care about and what parts they can ignore?
• Screen readers need all the help they can get. Many potential visitors require assistive devices to view the Web, but Web sites have been slow to adopt tools to help. HTML5’s new elements help out by letting screen readers know what sections of the page represent real content, and what sections are simply visual fluff.
• The new tags are there, regardless. Either natively or with easy and clever workarounds, practically all browsers in use today recognize the new elements. Plus, they’ve been standardized by a number of industry groups. It’s never been easier to simply start working with them and you can rest easy knowing the new elements are here to stay.
• Your coworkers will thank you. The new elements are far more descriptive than the <div> standby is, meaning the same content is considerably more understandable to other developers looking at your HTML source. Self-explanatory semantic markup reduces confusion and is often cleaner-looking than its cousins with pervasive use of <div> tags.
• You’re probably already using them. These elements were added to the HTML5 specification because Web designers were already using them…just in a more verbose format. Most Web sites have common sections, like a header, navigation, and footer, yet there was no way to signify this with HTML. Thanks to the new elements, instead of something like this (which used to be all over the Internet):

  <div id='footer'>...</div>
  

  …we now have a much more concise representation of the same concept:

  <footer>...</footer>
  

  Much better.

Whether you’re working on a Web site for the newest, hottest start-up or helping maintain a 10-year-old internal Web site, the new HTML5 elements can provide you with a number of benefits. They’re easy to start using, respected by Web developers and search engines alike, and, soon, you’ll start to wonder how you lived without them. If you’d like to learn more about using these elements, check out Headspring’s HTML5 Boot Camp!

Have you encountered other benefits of using the new HTML5 elements? Have a particularly-elegant use case for one? Let us know in the comments!

[
  {
    "title":"Myst: The Book of Atrus",
    "author":"Rand Miller"
  },
  {
    "title":"The Hobbit",
    "author":"J.R.R. Tolkien"
  },
  {
    "title":"Stardust",
    "author":"Neil Gaiman"
  }
]

In this example, we’ll display this collection of books as a simple unordered list, but don’t let that stop you from experimenting!

The Template

First, we need to define our Underscore template, which we’ll do in a <script> block (meaning browsers will ignore it while rendering the page, but we can still reference it by its client ID) with the type of text/template (so your fellow developers will know it’s a template versus a standard bit of JavaScript).

<script id='tmpl-books' type='text/template'>
  <ul>
    <% for (var i = 0; i < books.length; i++) { %>
      <% var book = books[i]; %>
      <li>
        <em><%= book.title %></em> by <%= book.author %>
      </li>
    <% } %>
  </ul>
</script>

If you’ve worked with tools like ASP.NET “WebForms” or Rails, you may recognize the “bee sting” operators (<% and %>), which Underscore uses to both output data to the rendered template and encapsulate behavior (as JavaScript). In this template, we first loop through the “books” collection (which we’ll define in the next section), pluck out each book as the loop progresses, and print out the
title and author of each as an unordered list item.

You’re free to inject as much JavaScript as you wish into your templates, but I find they’re most maintainable when the script is kept to a minimum (for me, this means mostly just loops and ternary operators, like the one below).

<% book.published ? print('(' + book.published + ')') : '' %>

(The print() function is a handy alternative to the <%= %> syntax for outputting values inside other functions, like we’re doing here.)

The Result

Now that we’ve defined our JSON source and the template for displaying our data, we need simply to tell Underscore to render the template and give us back the output HTML (using Underscore’s template() function).

In our example, data represents our JSON collection of books, but keep in mind your JSON data source may be named something different. We’ll tell Underscore to put this data inside the books collection, which we’ve referenced in our template.

// Get the template's markup...
var tmplMarkup = $('#tmpl-books').html();
// ...tell Underscore to render the template...
var compiledTmpl = _.template(tmplMarkup, { books : data });
// ...and update part of your page:
$('#target').html(compiledTmpl);

Underscore kindly compiles the template with our well-formed data and produces the following output, ready for injection into our HTML page:

<ul>
  <li><em>Myst: The Book of Atrus</em> by Rand Miller</li>
  <li><em>The Hobbit</em> by J.R.R. Tolkien</li>
  <li><em>Stardust</em> by Neil Gaiman</li>
</ul>

Underscore’s templating feature quickly made its way onto my list of must-have tools for client-side Web development. Try your hand at a few JSON-backed templates using this versatile framework and it may appear on yours, as well.

Imagine your boss approaches you and asks for a report of all orders placed by the Acme Corporation on Thursdays. You recall how many times you and your team optimized the database containing this information so data could be written at break-neck speeds and moan when you think of the complex script you’ll need to write to retrieve the report your boss requires. Wouldn’t it be nice if, instead of lines and lines of arcane SQL, we could ask a database something like the following and get back exactly what we expect?

 select * from Orders where Customer = 'Acme' and DayOfWeek = 'Thursday'

No joins, no convoluted date parsing…in fact, this SQL statement is almost identical to the sentence your boss used, isn’t it? How do we get to this level of utopian question-answering? The key is in the concept of “complex writes and simple reads”: instead of saving data to a database only in some crazy “normal form” fashion, flatten out your data so you can more easily query against it. Let’s take a look at a simple date…say, my birthday this year: 13 December 2011 2:18 PM.

Normally, we’d stick this value into a column designed for holding dates…and that’s fine, assuming the only question we’ll ever want to ask is “show me something that occurred on 13 December 2011 at 2:18 PM”. Unfortunately, that sort of question almost never gets asked. Instead, it’s queries like “on Tuesdays” or “in the afternoon”. To answer these questions, our schema needs to be modified a bit. The original “date-only” schema might look something like this:

 OrderDate : datetime

After we flatten out the date and time, our schema might look something like this:

 Day : int Month : nvarchar Year : int DayOfWeek : nvarchar Hour : int Minute : int PM : bit

Given this schema, we can now ask a multitude of questions about the single record represented, such as:

• How many orders were placed in January?

   select count(1) from Orders where Month = 'January'

• What orders did Acme place on Friday afternoons?

   select * from Orders where DayOfWeek = 'Friday' and PM = '1'

Getting data into this type of schema is actually surprisingly easy; in fact, each of these values can be extracted from a single .NET DateTime object:

 var timsBirthday = DateTime.Parse("13 December 2011 2:18 PM"); var day = timsBirthday.Day; var month = timsBirthday.ToString("MMMM"); var year = timsBirthday.Year; var dayOfWeek = timsBirthday.DayOfWeek; var hour = timsBirthday.Hour; var minute = timsBirthday.Minute; var pm = timsBirthday.Hour >= 12;

It’s not just dates that can be flattened out in this manner! For a hypothetical generic Customer object, for example, you can extrapolate (and answer business questions on!) properties like these:

• Name
• Primary Contact
• Phone
• City
• State
• ZIP Code

Happy reporting!

Adding transitions to your CSS is quite simple. First, define the “start” and “end” states of your HTML elements as separate rules, like so.

a.button {
   background: #222;
   border: solid 1px #666;
   color: #666;
}

a.button:hover {
   background: #06a;
   border: solid 1px #fff;
   color: #fff;
}

Then, add the appropriate properties for transitioning your elements to both states (necessary since we’ll be transitioning both to and from each state). Since the transitions specification hasn’t been finalized, you’ll need to add some vendor-specific rules to support the majority of modern browsers. I’ve found CSS3Please to be an invaluable resource for this, as I always forget the correct vendor syntax to use.

.transition {
   -moz-transition: all 0.5s ease; /* Firefox */
     -o-transition: all 0.5s ease; /* Opera */
-webkit-transition: all 0.5s ease; /* Safari and Chrome */
    -ms-transition: all 0.5s ease; /* Internet Explorer */
        transition: all 0.5s ease;
}

Each of these lines, for the browser it targets, sets the following properties for animation:

• “all”: The name of the property to animate (in this case, all of them).
• “0.5s”: The duration of the animation in seconds.
• “ease”: A description of how the animation will behave over time. Experiment with some of the other variations!

For your convenience, here’s a JSFiddle so you can try it out yourself. Click on the “CSS” tab to see all the stylistic goodness and the “Result” tab to see it in action (assuming you’re using a modern browser, of course).