Keep yourself protected with modular JavaScript

Taswar Bhatti August 11, 2014 2 Comments

Here is another quick tip on creating modular JavaScript, namely function wrappers, or more technically called Immediately-Invoked Function Expression (IIFE). A self-invoking anonymous function runs automatically/immediately when you are create it, but don’t confuse it with document.ready or window.onload.

The basic of IIFE is to use a wrapper so that it does not pollute the global namespace, all variables used inside the function will not be visible to the outside scope. You may have seen this kind of code, something along the line of:

(function() {
 //code code code
})();

1

2

3

(function() {

//code code code

})();

For example the variable defined below bar will not be able to access it outside the scope.
IIFE provides a protection/encapsulation to your code.

(function() {
  var bar = "hello";
})();

bar = "world"; // <-- Error, we dont know what bar is so its undefined

1

2

3

4

5

(function() {

var bar = "hello";

})();

bar = "world"; // <-- Error, we dont know what bar is so its undefined

If you wish to pass in data to your anonymous function, for example in our code below we are passing in the global window object to our function.

(function(w) {
   var height = w.height; 
 
})(window);

1

2

3

4

(function(w) {

var height = w.height;

})(window);

The last benefit of using the IIFE, is that it provides a way to create more modular Javascript.

The code below shows a module called counterModule and how we use it.

 var counterModule = (function() {
    var count = 0;
    return {
        increment: function() { count++; },
        decrement: function() { count--; },
        print: function() { alert(count); },
        reset: function() { count = 0; }
    };
})();

counterModule.increment(); //count = 1
counterModule.increment(); //count = 2
counterModule.print();  //alert box 2
counterModule.reset();  //back to 0
counterModule.print();  //alert box 2

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

var counterModule = (function() {

var count = 0;

return {

increment: function() { count++; },

decrement: function() { count--; },

print: function() { alert(count); },

reset: function() { count = 0; }

};

})();

counterModule.increment(); //count = 1

counterModule.increment(); //count = 2

counterModule.print(); //alert box 2

counterModule.reset(); //back to 0

counterModule.print(); //alert box 2

And if you have written any JQuery plugin you may have already seen the module pattern used for plugins. In the code below we are injection Jquery into our anonymous function.

(function($) {
    $.fn.helloWorld = function() {
        return this.each( function() {
            $(this).text("Hello, World!");
        });
    }
}(jQuery));

1

2

3

4

5

6

7

(function($) {

$.fn.helloWorld = function() {

return this.each( function() {

$(this).text("Hello, World!");

});

}

}(jQuery));

This is the very basic of a module pattern, and if you wish to read more about the module pattern I suggest you Addy Osmani book on Javascript Design Patterns

javascript, Learn Series

Javascript

Learn to love the JavaScript falsy conditions

Taswar Bhatti August 8, 2014 No Comments

Here is a quick tip for JavaScript falsy conditions for programmers or for people who come from Java or C#.

In Java and C# when we thinks of using a compare conditions in a if statements, we tend to use something along the line of:

if(val != null && val.length > 0) {
  //do stuff
}

1

2

3

if(val != null && val.length > 0) {

//do stuff

}

We tend to bring this baggage of knowledge to JavaScript also, but it is not necessary. In JavaScript one can simply use the conditionals as below.

if(val) {
 //do something
}

1

2

3

if(val) {

//do something

}

Here is a table that will show you what could be the values of val that would translate to false.

Type	Result
Undefined	false
Null	False
String	if length == 0, false
Object	true
Number	if NAN or 0, false

Here is some sample code if you wish to test out falsy in JavaScript.

function testFalsy(val) {
  if(val) {
    console.log("True");
  } else {
    console.log("Falsy");
  }
}

testFalsy(true); // Output: True

testFalsy({}); // Output: True

testFalsy([]); // Output: True

testFalsy("hello world"); // Output: True

testFalsy(3.14); // Output: True

testFalsy(new Date()); // Output: True

testFalsy(false); // Output: Falsy

testFalsy(null); // Output: Falsy

testFalsy(undefined); // Output: Falsy

testFalsy(NaN); // Output: Falsy

testFalsy(0); // Output: Falsy

logTruthiness(""); // Output: Falsy

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

function testFalsy(val) {

if(val) {

console.log("True");

} else {

console.log("Falsy");

}

testFalsy(true); // Output: True

testFalsy({}); // Output: True

testFalsy([]); // Output: True

testFalsy("hello world"); // Output: True

testFalsy(3.14); // Output: True

testFalsy(new Date()); // Output: True

testFalsy(false); // Output: Falsy

testFalsy(null); // Output: Falsy

testFalsy(undefined); // Output: Falsy

testFalsy(NaN); // Output: Falsy

testFalsy(0); // Output: Falsy

logTruthiness(""); // Output: Falsy

Learning these fundamental idioms in JavaScript allows one to write cleaner Javascript code.

javascript

false, Javascript, learn

Jade Include & Template Inheritance Part 6

Taswar Bhatti August 5, 2014 1 Comment

Jade Node.js Template Engine, Include & Template Inheritance Part 6

In this post, I will write about using includes and template inheritance in Jade template engine.
You can also check out my previous 5 post on Jade.

Jade Node.js Template Engine Part 1
Jade Node.js Template Engine Basics Syntax Part 2
Jade Node.js Template Engine DataBinding Part 3
Jade Node.js Template Engine, Conditional Logic Statements Part 4
Jade Node.js Template Engine, Filters & Mixins Part 5

Includes (aka partial views for .net developers)

To include css, javascript, html file, one can use the include directive in Jade. Lets say, you have a css that you wish to include in your jade file, you can then use the include like below, include can also import any html file that you may, or even markup text.

html
    head
        title Hello Includes
        include style.css
        style(type="text/css")
           include style2.css
    body
        p Two css were added
        include footer.jade
        include data/copyright.html

1

2

3

4

5

6

7

8

9

10

html

head

title Hello Includes

include style.css

style(type="text/css")

include style2.css

body

p Two css were added

include footer.jade

include data/copyright.html

One thing to note is the scope in the parent file and the include file is shared, so it allows one to use variables inside the include that are defined outside. Also one has to use the right extension for the file with the correct path. The example above shows the data/copyright.html is an html file located in the data folder.

There are also some other ways to include, css and javascript code blocks in Jade.

//include the jquery with script tag
script(type='text/javascript' src='jquery.min.js')

//code inside of script tag
script(type='text/javascript').
    if (typeof username !== "undefined") {
        alert(username);
    }

//include with link tag for css
link(rel='stylesheet', href='style.css')

//style inside of style tag
style(type='text/css').
    #content {
        font: 12px Arial;
    }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

//include the jquery with script tag

script(type='text/javascript' src='jquery.min.js')

//code inside of script tag

script(type='text/javascript').

if (typeof username !== "undefined") {

alert(username);

}

//include with link tag for css

link(rel='stylesheet', href='style.css')

//style inside of style tag

style(type='text/css').

#content {

font: 12px Arial;

}

Template Inheritance

Most sites have a generic look and feel, and if you are using includes (partials) it could soon become very ugly and hard to maintain all the includes. This is where Jade provides us with template inheritance, using the Block keyword as placeholders to inject other templates into the view.

We may have already seen this if we have used express web engine the layout.jade file as show below

//layout.jade
doctype html
html
  head
    title= title
    block stylesheets
      link(rel='stylesheet', href='/stylesheets/style.css')
    
    block jscripts
        script(src="jquery.min.js")
  body
    block content
    block footer

1

2

3

4

5

6

7

8

9

10

11

12

13

//layout.jade

doctype html

html

head

title= title

block stylesheets

link(rel='stylesheet', href='/stylesheets/style.css')

block jscripts

script(src="jquery.min.js")

body

block content

block footer

In order to use this layout file, Jade provides us with the keyword extends, for example in our index.jade file we can extend the layout like.

extends layout

block content
  h1= title
  p Welcome to #{title}

block footer
  Copyright &copy; 2014

1

2

3

4

5

6

7

8

extends layout

block content

h1= title

p Welcome to #{title}

block footer

From the above example, we see that we are replacing content, but Jade also provides us with prepend and append to the blocks. For example, if we wish to add zepto.js to our layout we can use the append keyword.

extends layout

append jscripts
  script(src="zepto.js")

block content
  h1= title
  p Welcome to #{title}

block footer
  Copyright &copy; 2014

1

2

3

4

5

6

7

8

9

10

11

extends layout

append jscripts

script(src="zepto.js")

block content

h1= title

p Welcome to #{title}

block footer

Or if we want to prepend a css file to the link tag, so that style2.css loads before style.css we can use the prepend keyword.

extends layout

prepend stylesheets
  link(rel='stylesheet', href='/stylesheets/style2.css')

block content
  h1= title
  p Welcome to #{title}

block footer
  Copyright &copy; 2014

1

2

3

4

5

6

7

8

9

10

11

extends layout

prepend stylesheets

link(rel='stylesheet', href='/stylesheets/style2.css')

block content

h1= title

p Welcome to #{title}

block footer

Note: Conditional statements like if else do not work with blocks since they are evaluated during compile time. The code below does not work.

if(loadLogin)
  extends loginlayout
else
  extends layout

1

2

3

4

if(loadLogin)

extends loginlayout

else

extends layout

Summary

This marks the end of the Jade, node.js template engine series, if you have any questions feel free to contact me, in the upcoming post I will write more about node and grunt/gulp (the Javascript task runner/ stream building system).

Sign up and follow my mail list if you wish to be posted on upcoming blog post.

Node, node.js

jade, Javascript, node.js

Jade Node.js Template Engine, Filters & Mixins Part 5

Taswar Bhatti July 28, 2014 No Comments

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

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

npm install markdown

1	npm 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)

#content
   :markdown
     ## This is a markdown H2 tag with two hash
     [I'm an inline-style link with title](https://www.google.com "Google's Homepage")

//HTML output
<div id="content">
  <h2>This is a markdown H2 tag with two hash</h2>
  <a href="https://www.google.com" title="Google's Homepage">I'm an inline-style link with title</a>
</div>

1

2

3

4

5

6

7

8

9

10

#content

:markdown

## This is a markdown H2 tag with two hash

[I'm an inline-style link with title](https://www.google.com "Google's Homepage")

//HTML output

<h2>This is a markdown H2 tag with two hash</h2>

<a href="https://www.google.com" title="Google's Homepage">I'm an inline-style link with title</a>

</div>

Mixins

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

mixin myFancyList
   ul
     li a
     li b
     li c

1

2

3

4

5

mixin myFancyList

ul

li a

li b

li c

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

+myFancyList

1	+myFancyList

Mixin can also take arguments like function

mixin bullet(name)
  li= name

//usage 
ul 
  bullet('a')
  bullet('b')
  bullet('c')

1

2

3

4

5

6

7

8

mixin bullet(name)

li= name

//usage

ul

bullet('a')

bullet('b')

bullet('c')

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

mixin blog_post(title)
  h2= title
  if block
    block
  else
    p There is no content for this blog yet

//usage
+blog_post('hello world')

//output
<h2>hello world</h2>
<p>There is no content for this blog yet</p>


//usage
+blog_post('hello world with content')
  p This is a hello world post

//output
<h2>hello world with content</h2>
<p>This is a hello world post</p>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

mixin blog_post(title)

h2= title

if block

block

else

p There is no content for this blog yet

//usage

+blog_post('hello world')

//output

<h2>hello world</h2>

<p>There is no content for this blog yet</p>

//usage

+blog_post('hello world with content')

p This is a hello world post

//output

<h2>hello world with content</h2>

<p>This is a hello world post</p>

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

javascript, Node, node.js

jade, jade template engine, Javascript, node.js

Jade Node.js Template Engine, Conditional Logic Statements Part 4

Taswar Bhatti July 21, 2014 No Comments

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 ( ? : )

- time = "AM"
- greeting = (time == "AM") ? "Morning" : "Evening"

p Good #{greeting}
- var morning = false
body(class=morning?'AM':'PM')

1

2

3

4

5

6

- time = "AM"

- greeting = (time == "AM") ? "Morning" : "Evening"

p Good #{greeting}

- var morning = false

body(class=morning?'AM':'PM')

Conditional Statements

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

- authorized = false
div
   if authorized
     p Welcome User
   else
     p User must login

div 
  unless authorized
    p You must login

1

2

3

4

5

6

7

8

9

10

- authorized = false

div

if authorized

p Welcome User

else

p User must login

div

unless authorized

p You must login

Case statements

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

- input = 10
case input
  when 0
  when 1
    p input is 0 or 1
  when 10
    p input is 10
  default
    p input is #{input}

1

2

3

4

5

6

7

8

9

- input = 10

case input

when 0

when 1

p input is 0 or 1

when 10

p input is 10

default

p input is #{input}

Iterators

Jade provides (for, each, while as loops)

//each statement
- list = ['a', 'b', 'c']
ul 
  each item in list
    li= item

//while loop
- index = 0
ul 
  while index < list.length
    li= list[index]
    - index++;

//for loop 
ul
  - for(var i = 0, len = list.length; i < len; i += 1) {
    li= list[i]
  - }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

//each statement

- list = ['a', 'b', 'c']

ul

each item in list

li= item

//while loop

- index = 0

ul

while index < list.length

li= list[index]

- index++;

//for loop

ul

- for(var i = 0, len = list.length; i < len; i += 1) {

li= list[i]

- }

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

javascript, Node, Uncategorized

jade, Javascript, node, node.js

Jade Node.js Template Engine DataBinding Part 3

Taswar Bhatti July 14, 2014 1 Comment

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

p Hello my name is #{name}

//output
<p>Hello my name is John</p>

1

2

3

4

p Hello my name is #{name}

//output

<p>Hello my name is John</p>

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.

- var name = "john"
p Hello my name is #{name}

- list = ['a', 'b', 'c']
p Lets learn the #{list[0]}, #{list[1]}, #{list[2]}

- items = {"name": "john", "age": "5" }
p #{items.name} is #{items.age} years old.

//output
<p>Hello my name is john</p>
<p>Lets learn the a, b, c</p> 
<p>John is 5 years old.</p>

1

2

3

4

5

6

7

8

9

10

11

12

13

- var name = "john"

p Hello my name is #{name}

- list = ['a', 'b', 'c']

p Lets learn the #{list[0]}, #{list[1]}, #{list[2]}

- items = {"name": "john", "age": "5" }

p #{items.name} is #{items.age} years old.

//output

<p>Hello my name is john</p>

<p>Lets learn the a, b, c</p>

<p>John is 5 years old.</p>

Shortcuts

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

- lorem = "This is a sample lorem ipsum text, that isnt quite lorem ipsum"

p= lorem

- x = {"name": "john", "age": "5" }

input(type="text", name=x.name, value=x.age)
//output
<p>This is a sample lorem ipsum text, that isnt quite lorem ipsum</p>
<input type="text" name="john" value="5" />

1

2

3

4

5

6

7

8

9

10

- lorem = "This is a sample lorem ipsum text, that isnt quite lorem ipsum"

p= lorem

- x = {"name": "john", "age": "5" }

input(type="text", name=x.name, value=x.age)

//output

<p>This is a sample lorem ipsum text, that isnt quite lorem ipsum</p>

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.

- name = "Hello <b>John</b>"
p!= name

- test = "test <i>abc</i>"
p !{test}
//output 
<p>Hello <b>John</b></p>
<p>test <i>abc</i></p>

1

2

3

4

5

6

7

8

- name = "Hello <b>John</b>"

p!= name

- test = "test <i>abc</i>"

p !{test}

//output

<p>Hello <b>John</b></p>

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

javascript, Node, node.js

express, jade, node.js

Jade Node.js Template Engine Basics Syntax Part 2

Taswar Bhatti July 7, 2014 No Comments

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

 span
   h4

1

2

span

h4

<span>
  <h4></h4>
</span>

1

2

3

<span>

</span>

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

span
h4

1

2

span

h4

<span></span>
<h4></h4>

1 2	<span></span> <h4></h4>

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

span
    | Hello
    br
    | world

1

2

3

4

span

| Hello

br

| world

<span>
      Hello
      <br />
      World
</span>

1

2

3

4

5

<span>

Hello

<br />

World

</span>

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.

span.
    <u>Hello</u>    
    <b><i>world</i></b>

1

2

3

span.

<u>Hello</u>

<b><i>world</i></b>

<span>
    <u>Hello</u>    
    <b><i>world</i></b>
</span>

1

2

3

4

<span>

<u>Hello</u>

<b><i>world</i></b>

</span>

Attributes

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.

span(id="mySpanId", class="boldTheSpan") Hello World
span(class=['boldTheClass', 'italicClass', 'underlineClass']) Goodbye World

1 2	span(id="mySpanId", class="boldTheSpan") Hello World span(class=['boldTheClass', 'italicClass', 'underlineClass']) Goodbye World

<span id="mySpanId" class="boldTheSpan">Hello World</span>
<span class="boldTheClass italicClass underlineClass">Goodbye World</span>

1 2	<span id="mySpanId" class="boldTheSpan">Hello World</span> <span class="boldTheClass italicClass underlineClass">Goodbye World</span>

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

span(data-sizes={options: ['small', 'large', 'xlarge']}) Hello World

1	span(data-sizes={options: ['small', 'large', 'xlarge']}) Hello World

<span data-sizes='{"options":["small","large","xlarge"]}'>Hello World</span>

1	<span data-sizes='{"options":["small","large","xlarge"]}'>Hello World</span>

Shortcuts

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

span#mySpanId.BoldClass Hello World
#myDiv Goodbye world

1 2	span#mySpanId.BoldClass Hello World #myDiv Goodbye world

<span id="mySpanId" class="BoldClass">Hello World</span>
<div id="myDiv">Goodbye world</div>

1 2	<span id="mySpanId" class="BoldClass">Hello World</span> <div id="myDiv">Goodbye world</div>

Block expansion

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

ol
  li 
    a(href="apple.html")Apple
  li.hightlight 
    a(href="orange.html")Orange
  li 
    a(href="pear.html")Pear

1

2

3

4

5

6

7

ol

li

a(href="apple.html")Apple

li.hightlight

a(href="orange.html")Orange

li

a(href="pear.html")Pear

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

ol
  li: a(href="apple.html")Apple
  li.highlight: a(href="orange.html")Orange
  li: a(href="pear.html")Pear

1

2

3

4

ol

li: a(href="apple.html")Apple

li.highlight: a(href="orange.html")Orange

li: a(href="pear.html")Pear

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.

// this is a comment
// - this will not show up in the render html
// comment out the tag below
  span#mySpanId.BoldClass Hello World

1

2

3

4

// this is a comment

// - this will not show up in the render html

// comment out the tag below

span#mySpanId.BoldClass Hello World

<!-- this is a comment -->
<!-- comment out the tag below
    <span id="mySpanId" class="BoldClass">Hello World</span>
-->

1

2

3

4

<!-- comment out the tag below

<span id="mySpanId" class="BoldClass">Hello World</span>

-->

Summary

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.

javascript, Node, node.js

jade, node.js, template engine

Jade Node.js Template Engine

Taswar Bhatti June 23, 2014 No Comments

Jade Node.js Template Engine is a templating language 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, it is designed primarily for server side templating in node.js, and last but not least it is a high performance template engine.

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

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>Hello world</h1>
    <p>
      This is a simple hello world example
    </p>
  </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Hello world</h1>

<p>

This is a simple hello world example

</p>

</body>

</html>

doctype html
html
  head
  body
    h1 Hello world
    p.
      This is a simple hello world example

1

2

3

4

5

6

7

doctype html

html

head

body

h1 Hello world

p.

This is a simple hello world example

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.

$ npm install jade

1	$ npm install jade

One can also compile and use jade with command line

$ echo "p hello world" > helloworld.jade

1	$ echo "p hello world" > helloworld.jade

To generate the html file we can run the jade command

$ jade helloworld.jade
   rendered helloworld.html
$ cat helloworld.html
<p>hello world</p>

1

2

3

4

$ jade helloworld.jade

rendered helloworld.html

$ cat helloworld.html

<p>hello world</p>

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

javascript, Node, node.js, Uncategorized

express, jade, node, tempalte engine

Bower: How to create and register your own packages

Taswar Bhatti June 11, 2014 2 Comments

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

bower init

1	bower init

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

Lets take a look at our bower.json file

{
  "name": "JqueryLocaleListSort",
  "version": "0.0.1",
  "main": "./localeListSort.js"
  "description": "JavaScript list using locale sorting",
  "keywords": [
    "jquery",
    "plugin"
  ],
  "authors": [
    "Taswar Bhatti"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

{

"name": "JqueryLocaleListSort",

"version": "0.0.1",

"main": "./localeListSort.js"

"description": "JavaScript list using locale sorting",

"keywords": [

"jquery",

"plugin"

],

"authors": [

"Taswar Bhatti"

],

"license": "MIT",

"ignore": [

"**/.*",

"node_modules",

"bower_components",

"test",

"tests"

]

}

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.

bower install jquery --save

1	bower install jquery --save

Our bower.json file will now look like

{
  "name": "JqueryLocaleListSort",
  "version": "0.0.1",
  "main": "./localeListSort.js"
  "description": "Javascript sort of list using locale",
  "keywords": [
    "jquery",
    "plugin"
  ],
  "authors": [
    "Taswar Bhatti"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "~2.1.1"
  }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

{

"name": "JqueryLocaleListSort",

"version": "0.0.1",

"main": "./localeListSort.js"

"description": "Javascript sort of list using locale",

"keywords": [

"jquery",

"plugin"

],

"authors": [

"Taswar Bhatti"

],

"license": "MIT",

"ignore": [

"**/.*",

"node_modules",

"bower_components",

"test",

"tests"

],

"dependencies": {

"jquery": "~2.1.1"

}

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.

(function ($) {
	$.fn.localeSort = function (options) {
		var settings = $.extend({}, $.fn.localeSort.defaults, options), $this = this;
 
		return this.each(function () {
			function sorty(list, compare, elem) {
		        elem = typeof elem !== 'undefined' ? elem : 'li';
 
				var listElements = list.find(elem);
 
				listElements.sort(compare);
 
				list.empty();
 
				listElements.each(function (index, li) {
					list.append(li);
				});
			}
 
			if (settings.ul === true) {
				sorty($this, settings.compare);
			}
		});
	};
 
	$.fn.localeSort.defaults = {
		ul: true,
		compare: function localeCompareSort(a, b) {
			var t1 = $(a),
				t2 = $(b);
			return t1.text().localeCompare(t2.text());
		}
	};
}(jQuery));

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

(function ($) {

$.fn.localeSort = function (options) {

var settings = $.extend({}, $.fn.localeSort.defaults, options), $this = this;

return this.each(function () {

function sorty(list, compare, elem) {

elem = typeof elem !== 'undefined' ? elem : 'li';

var listElements = list.find(elem);

listElements.sort(compare);

list.empty();

listElements.each(function (index, li) {

list.append(li);

});

}

if (settings.ul === true) {

sorty($this, settings.compare);

}

});

};

$.fn.localeSort.defaults = {

ul: true,

compare: function localeCompareSort(a, b) {

var t1 = $(a),

t2 = $(b);

return t1.text().localeCompare(t2.text());

}

};

}(jQuery));

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.

git init
git add *.json *.js .gitignore README.md
git commit -m "First version of my app"
git tag -a 0.0.1
git remote add origin https://github.com/username/RepoName.git
git push origin master 

bower register myPackageName git://github/username/RepoName.git

1

2

3

4

5

6

7

8

git init

git add *.json *.js .gitignore README.md

git commit -m "First version of my app"

git tag -a 0.0.1

git remote add origin https://github.com/username/RepoName.git

git push origin master

bower register myPackageName git://github/username/RepoName.git

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

//modified js file and bower.json file update the version number
git commit -m "Second version of my app"
git tag -a 0.0.2
git remote add origin https://github.com/username/RepoName.git
git push origin master

1

2

3

4

5

//modified js file and bower.json file update the version number

git commit -m "Second version of my app"

git tag -a 0.0.2

git remote add origin https://github.com/username/RepoName.git

git push origin master

javascript, Node

bower, front-end, Javascript, node, package manager

Bower the package manager for web front-end

Taswar Bhatti June 5, 2014 No Comments

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

npm install -g bower

1	npm install -g bower

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

bower search jquery

1	bower search jquery

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

bower install jquery

bower install jquery#1.9.1

bower install git://github.com/pivotal/jasmine.git

1

2

3

4

5

bower install jquery

bower install jquery#1.9.1

bower install git://github.com/pivotal/jasmine.git

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

<script src="/bower_components/jquery/dist/jquery.min.js"></script>

1	<script src="/bower_components/jquery/dist/jquery.min.js"></script>

Uninstall or Update a package

To uninstall or to upgrade a package e.g jquery

bower upgrade jquery

bower uninstall jquery

1

2

3

bower upgrade jquery

bower uninstall jquery

To upgrade all installed packages one just needs to use

bower upgrade

1	bower upgrade

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
or
bower list

1

2

3

bower ls

or

bower list

Information on a package

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

bower info jquery

1	bower info jquery

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

bower lookup jquery

Output:
jquery git://github.com/jquery/jquery.git

1

2

3

4

bower lookup jquery

Output:

jquery git://github.com/jquery/jquery.git

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 home jquery

1	bower home jquery

Caching

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.

bower clear-cache

1	bower clear-cache

And last but not least there is also help command

bower help

1	bower help

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

Node

bower, front-end, Javascript, node, node.js, visual studio

Jade Node.js Template Engine, Include & Template Inheritance Part 6

Includes (aka partial views for .net developers)

Template Inheritance

Summary

Jade Node.js Template Engine, Filters & Mixins

Filters

Mixins

Jade Node.js Template Engine, Conditional Logic Statements

Ternary Operation

Conditional Statements

Case statements

Iterators

Jade Node.js Template Engine DataBinding through Interpolation

Shortcuts

How to escape HTML

Basic syntax of Jade Template Engine for Node.js

Attributes

Shortcuts

Block expansion

Comments and Block Comments

Summary

Installing Jade

Adding Jquery

Installing Packages

Uninstall or Update a package

List installed packages

Information on a package

Caching

Opinions are my own and not the views of my employer

LinkedIn

My Book

Archives