Let us Jade #1 | Intro and loops
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
Hell yeah! I love Jade too.
So, I just learned what the '-' is for. Thanks!
As far as ideas for the next posts:
Overall, I'm psyched on this series. Thanks G! Stay awesome!
@brownerd All Jade features work in codepen, except includes because they need a special setting. But yeah, blocks work in codepen too. I will cover it when we get to mixins
Sweet! I didn't know that. Then, again, I haven't needed to use blocks yet either.
I have a few pens that use blocks. I would have to search though because I don't remember.
BTW @brownerd did you ever read my post Components in CodePen?
It describes how I share jade mixins over pens so I have reusable components. It's pretty sweet
Thanks, because I always did
until now.
while n--
makes sense though and is more compact.But... I have to say I still prefer JS for this. :)
Edit: no clue why indentation comes out messed up. :|
Thank you for doing this!! I'm going to start learning it...eventually ;)
@thebabydino
you can just use
or
the first one ends at
10
the second one ends at9
@pixelass Yeah, but I don't even need i :)
just added an example for @LukyVj
@pixelass Thank you Greg !
Love and Chocolate.
A gitch.
I personally prefer EJS:
CSS
I can switch toSCSS
easily, forSASS
I need to rewrite all. It the same withHTML
,EJS
andJADE
. (or javascript, typescript and coffeescript).@yukulele
It's not for me though ;) But I fully understand when people don't like Jade and use EJS (BTW: they're both originally made by Superstar TJ Halowaychuck)
I feel you with: "Sass against SCSS". I really like SCSS because its syntax is very close to CSS. But I have always loved the CSS syntax. (duhuh)... But since I really don't like HTML I have looked left and right to find my weapon of choice.
HAML ? Nope, not for me ;). Ruby is not my thing so HAML won't work for me.
The main reason why I like Jade is the ability to just write Javascript anywhere without the funny
<% if { %>
... stuff. (I mean there are tons of other reasons I will explain in later posts).I have worked with so many meta-languages that I think I know what makes a good meta language: (IMHO)
I also saw that in Hiccup which is:
It looks something like this:
which makes a lot of sense when you're in a Clojure project. Also I like the concept of functional programming and how it was applied to Hiccup.
Well anyways, I will continue this series and maybe you will find some interesting things because I can show you some thricks that are very hard to replicate in other languages.
lol @ "Can we just agree that it's not better? Thank you"