Taswar Bhatti
The synonyms of software simplicity

Jade Node.js Template Engine, Filters & Mixins

In my previous post I have talked about conditional statements inside of jade. In this post I will write about filters and mixins in jade template engine.


Filters in jade means something different from what you may know as filters like the ones in Angular.js. In Jade filters allow you to use different languages (text formatters) with jade template. (e.g CSS, CoffeeScript, markdown, etc), and all filters are compile time, thus they does not support dynamic content.

For example to use markdown we would first install markdown

Now if we wish to use markdown in our jade template, we can simply use the :markdown syntax, Note: all filters use the colon “:” syntax, eg. (:sass, :less, :coffee, etc)


Mixins allow one to use reusable code blocks in jade. The way to declare mixins is by the keyword mixins following the tags that you wish to display, example

In order to use the mixin we just need to append it with the “+” sign

Mixin can also take arguments like function

One can also use conditional statement and blocks of jade inside of mixins, the indent statement below the calling of the mixin is taken as the blocl

In my next and probably last blog post on jade, I will talk about includes in jade and template inheritance.


Jade Node.js Template Engine, Conditional Logic Statements

In my previous post I have talked about databinding with jade, i.e. feeding data to your template. In this post I will write about how one can use conditional and logical statements (for, if, while statements) in jade template engine.

Ternary Operation

The conditional ternary operator can be applied in Jade as follow ( ? : )

Conditional Statements

Jade has built in (if, else statements, and also provides the unless statement)

Case statements

The case statement is more of a shorthand for the switch statement in Jade.


Jade provides (for, each, while as loops)

In my next post I will write about mixins and filters for Jade.


In my previous post I showed the basic syntax of jade when using express application in node.js, in this post I will go over the DataBinding aspects of jade template engine.

Jade Node.js Template Engine DataBinding through Interpolation

Jade provides interpolation of variables using the #{} syntax, Hash, Curly Brackets.
For example if we have a variable called name with a value of John, to display from our controller in Express Web Application in Node through jade, we will code it like

We can also declare a variable inside the jade file, using the dash and var (although the var is optional), as the example shows below one can also access an array or hashtable like syntax.


jade also provides a shortcut rather than using the interpolation syntax, by using just the “=” sign or by directly accessing the declared variables.

How to escape HTML

Sometimes we have to escape html in a string, even though jade prevents us from XSS, we may come across a situation we a using a wysiwyg editor, that requires non encoded text.
Jade allows us to escape html by using the “!” syntax, for both shortcut and non shortcut curly brackets syntax.

Hope you enjoy the series I will continue with our next blog with how to use filters and logic in Jade.


In my previous blog post I showed how one would install jade template engine for node.js and the terse markup that it provides. In this post I will continue on the jade and show the basic syntax of using jade template engine.

Basic syntax of Jade Template Engine for Node.js

As mentioned in earlier post, Jade is indentation-based, each level of indentation creates its own block. Thus the spaces are important/significant to it, also jade does not use end tags like html nor angle brackets. As we saw earlier in the p tag in our example.

Here is a simple example of h4 wrapped in span


In the next example if we removed the indentation we will not get h4 as the child of a span.


The using of the | character can also signal for a textblock of text.


Jade also provides a shorthand for textblock rather than using all the pipe “|” character one can just add a period to the tag, and add additional html elements.



Attributes like class and id can be added by using the bracket sytanx to a tag, and multiple styles can be added with an array like syntax.


One can also pass in data as JSON for data-* attributes


Here are some shortcuts of attributes for class and id when using jade, one can use the “#” for id and the period “.” of class right after the tag, and there is also automatic divs that jade provides


Block expansion

Sometimes the indentation could becoming annoying when you are creating ordered or unordered list.

Jade has a solution to this since being terse is what jade is all about, it provides a “:” shortcut to simplify this for us.

Comments and Block Comments

Jade also provides a way to comment out your template like the Javascript syntax it uses // and if you use // - it will not show the comment in the rendered html. It also provides a block syntax where if you indent the line after the comment it will comment out the following tags also.



I have covered most of the basic syntax of Jade here in this blog post, in my next post I will write about how to bind data into the template.


Jade is a templating laguage for node.js, it provides an alternative syntax to write your HTML, some may say more pythonic or haml style. Jade by default comes with express web application framework for node.js

Lets take a look at a simple jade file compare it to your html file.
HTMLvs Jade

As one can see the jade syntax is more terse and concise, but one has to remember those spaces/indentation are quite important for jade.

Installing Jade

Jade by default comes with express web application for node.js, but one can also install it by npm.

One can also compile and use jade with command line

To generate the html file we can run the jade command

As we can see above it automatically create the angle tags for us for the paragraph tag.

In my next blog post I will be covering the basic syntax of jade


Continuing on our previous blog post on bower, in this blog post, I will talk about how to create your own front-end packages in bower. One thing I forgot to mention in the previous post is git is required when using bower. If you are using windows you can install git for windows or Mac/Unix/Linux.

The very first thing one needs to do is create a bower.json file in your project root folder. By using the command below

The above command will prompt you to fill in the form and afterwards it will generate us a bower.json file.
bower init

Lets take a look at our bower.json file


Adding Jquery

For our package, we will require jquery and in order to add our dependency to the bower.json file we can use the install command line. Note: the –save which will update our bower.json file, if we did not use the –save option it will not update out bower.json file.

Our bower.json file will now look like

I will now use my previous jquery plugin that I created for sorting a list and add it to my project. The code is not really the focus here, it could be anything that you wish to publish, even a simple function of hello world.

Next we will add a gitignore file so that we don’t push up the bower_components folder if we have any, also I will create a repo on github. Note: bower requires a version number by using the git tag in order for it to register your package.

If you wish to modify your bower package, remember to update your tag version and bower.json file version or else it will not be published


My last blog post was about using bower in node.js express application Visual Studio, and I believe I did not do justice to it. In this blog post I will talk more about how to use bower for your front-end and all the command line associate with bower.

Again to install bower globally one can use the npm command line

To start using bower and to find packages e.g jquery, it will list out all the github repository that has jquery involved.


Installing Packages

To install latest jquery or by a version number we can append it with a “#” symbol like below, or by a git repo

In order to use jquery with bower on your site you can reference it in your html like

Uninstall or Update a package

To uninstall or to upgrade a package e.g jquery

To upgrade all installed packages one just needs to use

List installed packages

If one wants to find out what packages are installed in the solution one can use the command ls or list

bower ls

Information on a package

To find out information and version of a package that bower provides one can use the info command

bower info

One can also find out which repository bower is using for a package using the lookup command

There is also the home command which takes you the homepage of the repository, the below command will take you the github repository of jquery


Bower has a caching where when you run the install it will automatically download the package to your ~/.bower/cache so that when you run install again it will just use the cache version for a quicker install, on windows you will find bower cache to be located at C:\Users\YourUsername\AppData\Roaming\bower\cache and on unix/linux systems in your home directory ~/.bower/cache

One can also clear the cache by using the command cache-clear.

And last but not least there is also help command

bower help

In my next blog I will write about how to create your own bower packages and all about bower.json file.


In my previous post I have shown how to create an express app with node.js and in this post, I would like to introduce bower a package manager for front-end development.

Bower is a package manager just like Nuget, where it gets confusing is that node already has a package manager called npm. The difference is that bower is more of a front end package manger, think of it as managing your jquery, angular, ember, etc.

So lets get bower installed using our Npm manager in Visual Studio, we will install it globally to our package manager, so that every project can use it. One can also install it using command line, where the -g means globally.

Right click on npm in your solution and Manage npm Modules…


Once launched select the Global Packages Tab, and type bower in the package Name field and click on Install Globally.

install bower

The process will go through and npm Operation Completed Successfully is show on the npm window.

bower install npm

Node Tools for Visual Studio does not yet provide a way to use bower with the menu context, so in order to use bower one has to use a command prompt. I hope in the future they can provide a way to right click and say bower install etc.

We would need to right click on the project and select “Launch Command Prompt here

In the command prompt we install jquery, so we will type

bower install jquery

By doing so you will find a new directory created in your solution called bower_components and it will pull the latest version of jquery into it.

Jquery source installed
jquery bower

One can also install a specific version of package with bower by using the command

To use jquery that we just installed with bower in our express app, we will need to edit the app,js file and add

and you can then reference it in your html or layout file by


I recently had to do work on localeCompare in JavaScript and though I would write a plugin in JQuery and share it.

Javascript Locale Compare

JavaScript provides a localeCompare function for comparing two strings in the current locale. The locale is based on the language settings of the browser. To explain locale compare lets look at some text.

Basically the function returns

  • -1 if the reference string is sorted before
  • 0 if the two strings are equal
  • 1 if the reference string is sorted after

Problem at hand

When we are localizing applications we tend to use some kind of resources key, in .NET we use resx files to localize an application. For example we may have 3 key, something like the image below

In your code you may say something like

The output would display Apple, Orange and Pear and for English, the list is sorted properly, but if you translate those keys into french the sorting is incorrect, since in french Apple is Pomme. The display in French would be Pomme, Orange, Poire, which is incorrect. The sorting would also work for chinese 橙, 苹果, 梨.

In order to fix this I created a jquery plugin that would allow me to sort all unordered list

Below is the code for jquery plugin, I also have it on jsfiddle http://jsfiddle.net/taswar/bR9fZ/. One can also provide their own algorithm for compare, since if you are sorting a large amount of text, localeCompare may not be the most efficient algorithm and some browsers may implement it differently.


Here is a quick little tutorial of using Twitter Bootstrap with Node.js express in Visual Studio.

First we will create a ExpressBootstrap solution, select New Project and select JavaScript -> Blank Express Application.

I will name my solution ExpressBootstrap, in my app.js I have also add the app.locals.appname = ‘Express Bootstrap’ so that I can reference it in my application.

Next we will download and install bootstrap, this is the manual way of installing bootstrap, there is also an alternative by using bower, which I will cover in my next blog post.

One can download the latest bootstrap from http://getbootstrap.com/getting-started/#download

Once downloaded lets grab the css, font and js directory and copy them into our public folder in our express application.

Next we will change our layout.jade file to use bootstrap

I will now add some style to the style.css found in stylesheet folder.

Now we will modify the index.jade file to present us with a bootstrap looking login page site.

One of the downside you may find with jade is the space vs tab issue, one cannot mix spaces and tabs with jade, sometimes it becomes annoying when you have trailing space with some text, that you may not realize.

The end result we will get something like