Practical Jade

You Know, If That's Your Thing

I've been a big fan of coding my HTML in Jade as of late. Benefits are that it is cleaner, shorter and much less redundant. I also like that div.random-div is the tag in HTML and CSS. There are some drawbacks, however, such as minified code, which shouldn't be too big of an issue most of the time, and harder integration with CMSs. There is also the whole "pre-compiling" thing, which could be a plus or minus depending on which side of the fence you're on.

Is Jade Pratical?

Before we get into actual code, what type or stage of project is Jade practical for? From my time with it, I've learned that Jade is great for developing the follow:

  • Dynamic, static sites ("dynamic, static sites" say whattttt? I'll get into this later!)
  • Sites built on Node.js
  • Prototypes
  • Building sites before CMS integration
  • A site with a lot of redundant code

With that said, let's get into what I deem the "practical" parts of Jade.

Includes

How you ever wished upon a shooting star that you could simply include an HTML file inside another HTML file? Well, you're wish sort of came true. HTML Imports are a thing, the support is just not there yet. Jade, however, has includes, a way to import files into one another. Jade even transfers variables, mixin, ect, from file to file. Jade includes are pretty simple: include ./global/_head.jade.

Template

Jade also has the ability to compile templates, allowing for us to inject multiple sections of content into a singular template file! First up is the layout file, which is just a jade file using the keyword block to define content blocks. The block keyword is followed by an identifer, such as "content", or it can be left blank if it's the default block.

// layout.jade
html
	include head.jade
body
	block content
	block side

Once the layout is built, we will use the the extends keyword to define a page as part of a template. The extends keyword should be followed by the path to the layout.

// index.jade
extends layout.jade
block content
	| This is some generic content
block side
	| This is a side navigation

Variables

This is sort of cheating as Jade doesn't technically have variables, but it supports inline JavaScript. That means you can harness the powers of JavaScript in your HTML, opening a lot of possibilities. To create a variable in Jade, you'd write begin the line with -, and write a declaration in pure JavaScript. These are great for any content that might change that is used multiple times throughout a site, like an address or email:

-var finalEmail = "info@awesomesaucepasta.com"
p= "For delicious pasta, email us at"+finalEmail+"!"

Interpolation

As you might have noticed in the example, we used added the strings together using JavaScript to write out the paragraph. This can make your code ugly, especially if the dynamic variable needed is something as small as an email. Luckily, Jade supports interpolation. To display a variable on the page, you simple have to write a # in front and surround it in curly braces. Using interpolation, our code will look like this:

-var finalEmail = "info@awesomesaucepasta.com"
p For delicious pasta, email us at #{finalEmail}!

Arrays

I use arrays a lot in my code. They're awesome for, as you probably guessed, iteration! Being able to have one giant list of anything in HTML is always handy, but here is an example. Let's say Awesome Sauce Pasta has grown, and their business can no longer be contained by one email! They want us to replace their old email with three new ones:

-var contactEmails = ["info", "catering", "marketing"];
p To contact a department, email us at one of the following:
ul
	each val in contactEmails
		li= val+"@awesomesaucepasta.com"

With these adjustments, the code will now repeat the last line three times, one for each of the emails!

Objects

Objects are honestly just about my favorite things in JavaScript, and that extends to Jade. Let's say Awesome Sauce Pasta loves the last fix, but now they want a department name, days that departmet is open, and a phone number accompanying their new emails. We can use objects to accomplish this easily.

//I hate wrapping lines, and my code editor breaks with these really long lines(What's up with that, amirite?). I've found that using .push() is a nice and simple solution.
-var contactEmails = []
-contactEmails.push({department: "General info", email: "info", openOn: "Every Day", phone: "555-5576"})
-contactEmails.push({department: "Catering", email: "catering", openOn: "Wed-Mon", phone: "555-5576+1"})
-contactEmails.push({department: "Marketing", email: "marketing", openOn: "Mon-Fri", phone: "555-5576+2"})
p Contact a department:
ul
	each dep in contactEmails
		li= dep.department+": "+dep.email+"@awesomesaucepasta.com"+" | "+dep.phone+" | "+"open "+dep.openOn

Conclusion

There are awesome parts about Jade, and awful parts of Jade. When choosing it for your project, think wisely!

Comments