HTML is not for me

I am not a friend of HTML (or XML in general). I have always hated it, no matter if I was editing a .plist, .xml, .jsp, .html... or whatever file. XML is just very hard to read and also allows for a lot of syntax errors.

There are a lot of helpers for HTML, helpers that extend the syntax. Just to name a few that I have (had to) work with.

  • twig/swig
    • used in PHP/Node
  • handlebars
    • used with JavaScript
  • Mustache
    • used with JavaScript
  • ejs
    • used with JavaScript
  • eco
    • used with CoffeeScript
  • Freemarker
    • used with Java
  • jsp
    • used with Java
  • .. ok let's stop here
    • I guess you get the picture, I've done them all

Most of these just look super nasty and make HTML even uglier than it already is.
For those of you who don't know any of the languages, let me just show you an example

Handlebars

  
<body class="{{#if ie}}ie{{else}}good-browser{{/if}}">
  {{#with data}}
    <header class="{{#if data.nomenu}}offsreen{{/if}}">
      {{#if data.loggedIn}}
        Hello {{data.user}}
      {{else}}
        Please Log in:
        <br/>
        <button>Log in</button>
      {{/if}}
    </header>
  {{/with}}
</body>


.. Yeah I guess that should do because I already lost track.

Maybe ejs is better?

EJS (EmbeddedJavaScript)

  
<body class="<% if ie { %>ie<% } else { %>good-browser<% } %>">
  <header class="<% if data.nomenu { %>offsreen<% } %>">
    <% if data.loggedIn { %>
      Hello <% data.user %>
    <% } else { %>
      Please Log in:
      <br/>
      <button>Log in</button>
    <% } %>
  </header>
</body>


Can we just agree that it's not better? Thank you

let me show you how this would look in Jade and after that, let's start with a small tutorial.

  
body(class=ie?'ie':'good-browser')
  header(class=data.nomenu?'offsreen':'')
    if data.loggedIn
      | Hello #{user}
    else
      | Please Log in:
      br
      button Log in

Now Im not saying that everybody is happy or should be happy with this but to me it just looks a lot cleaner and is less of a hack.

If you also like this syntax better and would love to learn more about Jade, I have some awesome news for you.

I am writing a tutorial about Jade

A tutorial with multiple parts and this is part #1

Let us start with some things that might be useful while you build prototypes or experiments on Codepen.

Loops

Jade offers some native loops

1. For loop

for in jade is just an alias for each so you can do

  
ul
  for animal in ['dog', 'cat', 'mouse']
    li= animal


it will render

  
<ul>
  <li>dog</li>
  <li>cat</li>
  <li>mouse</li>
</ul>


2. each loop

Remember the example above and this one can be done with each or for

  
ul
  each animal, index in ['dog', 'cat', 'mouse']
    li #{index + 1}. #{animal}


will render

  
<ul>
  <li>1. dog</li>
  <li>2. cat</li>
  <li>3. mouse</li>
</ul>


define variables

We can also define variables, to do something like this:

  
- var animals = {dog: 'Pluto' , cat: 'Pete', mouse: 'Mickey'}
ul
  - for name, animal in animals
    li #{name}:  #{animal}


will render

  
<ul>
  <li>Pluto:  dog</li>
  <li>Pete:  cat</li>
  <li>Mickey:  mouse</li>
</ul>


while loop

to just iterate from 0 to 100 you can do

  
- var length = 100
ul
  while length--
    li


But let's take the first example from above and reverse the order with a simple while loop

  
- var animals = ['dog', 'cat', 'mouse']
- var length = animals.length
ul
  while length--
    li=animals[length]


will render

  
<ul>
  <li>mouse</li>
  <li>cat</li>
  <li>dog</li>
</ul>


But the while loop is a lot more powerful than that.
Let's render the list in the default order with a while loop

  
- var animals = ['dog', 'cat', 'mouse']
- var index = 0
ul
  while index++ < animals.length
    li=animals[index - 1]


Real for loops

We are still limited. What if we want a simple for loop as we know it from Javascript

  
- var animals = ['dog', 'cat', 'mouse']
ul
  - for (var i = 0; i < animals.length; i++)
    li= animals[i]


Notice the - in at the beginning of the line.
We have already seen it when we defined the variable but what does it do?
- at the begining of the line defines "unbuffered" code. Since Jade uses JavaScript, we can simply execute JavaScript after a -

This also means we can do things like:

  • get the current Date
  • manipulate strings
  • ...

Here's an example that uses the current date

  - months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
- today = new Date();
- yesterday = new Date();
- yesterday.setDate(yesterday.getDate() - 1);

- todayDay = today.getDate()
- todayMonth = today.getMonth()
- todayYear = today.getFullYear()
- yesterdayDay = yesterday.getDate()
- yesterdayMonth = yesterday.getMonth()
- yesterdayYear = yesterday.getFullYear()


.calendar
  .leaf.today
    .year=todayYear
    .month=months[todayMonth]
    .day=todayDay
  .leaf.yesterday
    .year=yesterdayYear
    .month=months[yesterdayMonth]
    .day=yesterdayDay


(click rerun)

That's it for today. I hope you learned something from this post and maybe on your next pen you will decide to give it a try.
Just think about how easy it is to generate 50 divs for a funky animation.

The next post should be coming soon. I am not sure which part I want to cover but here are a few ideas

  • mixins
  • conditionals
  • interpolation

You can vote the next topic in the comment section or just wait to get surprised


1930 13 32