5.1 Jade

In the next two videos, we'll be exploring a type of HTML pre-processor. Which means to say, in a framework such as Jade language, we will be writing HTML in a certain syntax and then we will be compiling it into pure HTML. Often, such frameworks, such as Jade are known as templating engines and they work with some kinda server-side languages or frameworks. Jade in this case is often used with a server-side framework called Node JS. For this episode, we will learn how to code in Jade syntax and then render out to the corresponding HTML. For Jade, do check out the GitHub repository as well, especially on the section called Syntax. As well as the Command Line options for Jade that can get you started right away. So let's get started by installing Jade with npm. As usual, the command will be npm install -g, if you want to global install and then jade. Here in the Command Line documentation, you'll find various other options. Why don't we try out --version, once you have installed jade? And if everything is fine, it should give you the version number. So here I am in my Desktop, which has one file called index.jade. And .jade is basically the file to denote that we will be coding in Jade syntax. Right now, it is completely empty. To get started with Jade, it is basically HTML, which will render out into complete HTML syntax. So let's start with a simple tag, which is h1. That's it. You do not need any of those angular brackets. So why don't we go ahead and compile this into pure HTML? Now to compile this from Jade to HTML. The simple syntax will be jade and then the file name, which is index.jade. Jade will immediately understand that the compiled file will be index, which is the name of the input file and then index.html. So let's try it out. There you go, rendered index.html. And once we come back to our text editor, you will see index.html is complete with the opening HTML tag and the closing HTML tag. In our case, it is h1. So once again, just like the previous videos on the left-hand side, we will explore this Jade syntax. While on the right-hand side, we will immediately see the output, so that we have a much better understanding how Jade works. Now obviously with each change, we will not come back to the command line and keep compiling it. Why don't we instead pass it an option -w, which will watch for each save and will render out the changed HTML immediately. Great. So let's get started. Now obviously, inside each of the tag, we do want some contents. In this case, let's put on something. How bout Heading 1? There you go. This will be the rendered out HTML. So, as simple as that, make sure there's a little space between the tag name and the content inside the tag. Similarly, you can also try out a paragraph tag and there you go. This will give you the paragraph. Now at this stage, you might be realizing that they are basically compressing the entire code. It is not prettified or rather indented for human readability. I'm going to come back to the compilation in the command line, exit it. And this time, I'm gonna pass in another parameter called pretty. Let's try it one more time. And there you go. It is prettified. And now if you come back to the paragraph and let's say, you want a child tag. And in this case, it is span. Let's try it. So span let's just say, some content. And there you go. The span tag will be in the paragraph tag. So now that you know how to render out tags, some content inside tags and even some child elements. Let's explore something with the image tag. Now this is definitely not useful for image, why don't we put in some attributes? So, in Jade language to put into attributes, we start with circle brackets and then we put in the attribute name equal to and then the value. Which in our case, let's just put in pic.jpg. There you go. That looks much more reasonable and valuable for HTML. Now usually for image, we also have something called title attribute. In this case, if you want to add on a second attribute or a third attribute, make sure to put in the comma and then let's try once again a picture. So there you go. You will have two attributes source and the title. So after we have explored the attributes and how to input the value. Very quickly, let's explore some comments. So this is how you can put in silent comments. So you will simply put in slash slash dash and then the comment content and this will not in, output out the content at all. But if you want non silent comments. It would simply be slash slash and notice here, how it will output it as the HTML comments. Jade also comes with its own shortcuts. So let's try out one of them, such as doctype 5. Which means to say, doctype for HTML5. There you go. It will give us the familiar DOCTYPE html syntax. How about the familiar HTML tag and it has a language attribute. Let's put in a value of English. So, in this case, it will be something very similar to what we learned with the image tag. So we put in the language attribute and then English. And once we compile it, there you. It will be HTML. That is certainly looking like a very simple structure for any HTML document. Now usually inside the HTML, we have a head tag and a body tag. So notice once it is a child, we will have to indent it once. So let's save it and see how it is outputting. Yep, so there we see we have the head and the body. And since we have been compiling it with the option --pretty, it will even indent it out beautifully for us in the html. So under head, we usually have title and then let's put a content of the title. How about Jade Rocks! So there you go. We have the title tag. How about some script? And inside script, very similarly, we can include the attribute called source. Let's just say script.js. There you go. It's the script tag. Now let's just say, inside the body, we have another h1 and then we say, hello jade! And there you go. This very much looks like a very simple HTML document. Why don't we go ahead and open this in the browser. Yep, so there you go. Hello jade! And once we look at the view source, this is being compiled by the Jade. So what's the point of using Jade? Firstly, I feel that if you prefer a very simpler and cleaner syntax, Jades can help you do that. Also, if you want some flexibility in terms of outputting the format of the code, for example, pretty or not pretty, Jades can help you do that as well. Next, let's explore something called a par shells. Many times, I do have designers who know a little bit of HTML and CSS. Come up to me and say, I have like five pages and then inside each of the five pages, I have the very same header. Now it is okay if I change the header, but what I have to do is change the header and copy it five times in five different places. In this case, I almost immediately recommend them to use Jade. Let's see how to use that partial. So firstly, let me open up the navigation, so that we can see what's going on. Here, I will include a new file and let's call it head.jade. Inside head.jade, we will include the entire head tag. Now this is something every common in all our pages, for example, the main page, the about page, the content page. We usually have the head tag very similar. So why don't we go ahead and cut out this code and paste it in the file called head.jade. Now, all we need to do is include head. Of course, in this case, it is assuming that head.jade is in the same folder as index.jade. Now when I come back and compile it, yep, it will look exactly the same. Now this is where the power resides. Now, if I have a new file called say, about.jade, I can basically copy the entire thing, paste it. And here I can say, about us in the body in a h1 tag. And all I need to do is just include head, which will basically refer to the code inside of the file head.jade. So let's try to compile about to about.html. Obviously, it is not happening in our command line watcher. That's because previously, we only included index.jade. Why don't we include about.jade? Let's try to compile and watch it at the same time. There you go. Rendered about and index.html. So now when I go and click about.html, guess what? About us is shown here and in the head tag, we see the contents from here. Now this is where the power of partials lies. So instead of two pages, let's say, you have twenty pages and you want to change the title to Jade Rocks! And then maybe some changes. Now, all I need to do is just change once in the head.jade. And for this case, it seems that you will just need to come back and trigger the save in index and about. And now when you come back to the compiled about.html, notice how the title has changed in all the instances where the partial is used. Very powerful, if you do not have access to the server side code and you certainly want to mark up how it looks in 20 different pages. And you definitely do not want that two minute time spent in cutting and pasting the code. Also, it reduces a lot of errors for us when we do not cut and paste the code manually. Next, let me clean up a little bit. And this time, I have two files, index.jade and content.jade. Inside index.jade, let us explore some ways to add in class or IDs. So here if you include just .box, notice here it will compile to a div class of box. Now what if this box also has an ID? Yep, the warning ID will be included. What if you have another class? Let's say, the class is radius. And there you go. You will have two classes inserted here. Next, let's explore how we can add classes and IDs to a tag. So let's say, I have an anchored tag and it is a class called button and it also has another class called success. But it also has an id called of say, let's say, click. There you go. This is exactly how it will be output. Next, we will explore this feature called template inheritance. So let's see inside index.jade, I have a simple box here. And inside of this box, I have a paragraph and let's just call it a big note. I also have a h2. Now what if in another Jade template, you want this h2 block be replaced with another type of content. But basically, get the same content or layout of this page. So in this case, let me just also add .main here and you also have a paragraph called main content. So let's try to create a little box here, which can be replaced with any content we want. So in this case, I'll give it the definition block and then the name of the block. In this case, I'll say more and then just indent it. Now let's say, inside content.jade, I want to use the exact layout of index.jade. And in this case, I'll simply say extends and then index, which is the name of the template coming from index.jade. And once we compile content into content.html, notice how the syntax is exactly the same as index. So there you go. This is my index.jade and content.jade is basically extending the index saying that hey, I want the entire layout of index exactly as it appears. And that's why when you compile index and content, notice it is exactly the same. But guess what? Inside content, within this block more, you want something different. Now let's say, we want to replace this block more. So, instead of churning out h2 more content, which is exactly the same as the main layout, we want something different. So I'll say, block and then more and then I'll say, h2 from content.jade. Great. And notice when we turn out content.html only this little block will be changed, whereas index.html will not be changed. Now what if you want to append this little h2 tag after this? So, in this case, all you need to say is append more. There you go. So you will not only have more content, which is coming from index.jade, you will also have content from content.jade, because we said append. Now what if you want to prepend it. Well, just replace the word append with prepend. And notice where the word content from content.jade goes. That's right. It will go before the block more and it will be prepended. A very neat way to extend a certain layout and yet have the customizing ability to kind of replace it, append it or prepend it. Great. So that was a very brief introduction to Jade. Even if you are not using any server side language, Jade is a perfect way to create partials as well as extending a layout ensuring that our code is dry or don't repeat yourself. Do go ahead and try out the really simple online repel. As I previously mentioned before, Jade is a very common templating engine to be used with node JS or a JavaScript. So, anytime you come up to node and then you see Jade templating language being used, don't be afraid and jump right in.