Bower package manager for Node.js Tools Visual Studio

Taswar Bhatti May 30, 2014 No Comments

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.

npm install -g bower

1	npm install -g bower

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.

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

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

1	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

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

bower install jquery#1.9.1

1	bower install jquery#1.9.1

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

app.use('/bower_components',  express.static(__dirname + '/bower_components'));

1	app.use('/bower_components', express.static(__dirname + '/bower_components'));

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

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

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

javascript, JQuery, Node, visual studio

bower, Javascript, JQuery, node.js, visual studio

jQuery: JavaScript locale sorting plugin

Taswar Bhatti May 9, 2014 No Comments

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.

var str1 = "apple",
    str2 = "orange",
    result = str.localeCompare(str2);

console.log(result);

1

2

3

4

5

var str1 = "apple",

str2 = "orange",

result = str.localeCompare(str2);

console.log(result);

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

Sorted fruits
<ul id="mylist">
  <li><%= MyResource.AppleKey %></li>
  <li><%= MyResource.OrangeKey %></li>
  <li><%= MyResource.PearKey %></li>
</ul>

1

2

3

4

5

6

Sorted fruits

</ul>

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.

(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));

javascript, JQuery

Javascript, JQuery, locale, localization, sorting

Visual Studio Node.js express with Twitter Bootstrap

Taswar Bhatti May 7, 2014 No Comments

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

doctype html
head
    title= title
    link(rel='stylesheet', href='/css/bootstrap.min.css')
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js')
    script(src='/js/bootstrap.min.js')
  body
    block content

1

2

3

4

5

6

7

8

9

doctype html

head

title= title

link(rel='stylesheet', href='/css/bootstrap.min.css')

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

script(src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js')

script(src='/js/bootstrap.min.js')

body

block content

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

.wrapper {margin-top: 80px;margin-bottom: 80px;}
.form-signin{max-width:380px;padding:15px 35px 45px;margin:0 auto;background-color:#fff;border:1px solid rgba(0,0,0,.1);}
input[type="text"] {margin-bottom: -1px;border-bottom-left-radius: 0;border-bottom-right-radius: 0;}
input[type="password"] {margin-bottom: 20px;border-top-left-radius: 0;border-top-right-radius: 0;}

1

2

3

4

.wrapper {margin-top: 80px;margin-bottom: 80px;}

.form-signin{max-width:380px;padding:15px 35px 45px;margin:0 auto;background-color:#fff;border:1px solid rgba(0,0,0,.1);}

input[type="text"] {margin-bottom: -1px;border-bottom-left-radius: 0;border-bottom-right-radius: 0;}

input[type="password"] {margin-bottom: 20px;border-top-left-radius: 0;border-top-right-radius: 0;}

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

extends layout

block content
	div.wrapper
		form.form-signin(method="post", id="loginForm")
			h2.form-signin-heading Please login
			input(class="form-control", id="username", type="text", name="User", placeholder="Enter your username")			
			input(class="form-control", id="password", type="password", name="Password", placeholder="Password")
			input(class="btn btn-lg btn-primary btn-block" type="submit", value="Log In")
	div.footer

1

2

3

4

5

6

7

8

9

10

extends layout

block content

div.wrapper

form.form-signin(method="post", id="loginForm")

h2.form-signin-heading Please login

input(class="form-control", id="username", type="text", name="User", placeholder="Enter your username")

input(class="form-control", id="password", type="password", name="Password", placeholder="Password")

input(class="btn btn-lg btn-primary btn-block" type="submit", value="Log In")

div.footer

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

javascript, Node, Uncategorized, visual studio

bootstrap, express, Javascript, node.js, visualstudio

C# tip: How to count values of Dictionary that contain List using Linq

Taswar Bhatti May 1, 2014 No Comments

Here is a quick C# tip of counting up values of a Dictionary<TKey, TValue> where the values contains a List<T> using Linq.

Lets say you have a Dictionary that contains Dictionary<string, List<Guid>> and you wish to find out how many items of Guid you have.

You can easily do it by the Sum Linq aggregate operations

 int sum = dict.Sum(x => x.Value.Count);

1	int sum = dict.Sum(x => x.Value.Count);

This will tell you the amount of items you have in all the list.

And if you wish to just find out if there are any items in the list, rather than counting. For example you need to enable or disable a button on a UI, one can use the Linq Any quantifiers, it would be more efficient than the Sum Aggregate operator.

var hasItems = dict.Any(x => x.Value.Any());

MyButton.Enabled = hasItems;

1

2

3

var hasItems = dict.Any(x => x.Value.Any());

MyButton.Enabled = hasItems;

C#

.net, C#, csharp, dotnet, LINQ, tips

Visual Studio Node.js, creating express applications

Taswar Bhatti April 29, 2014 No Comments

Here is a simple walk through of creating a express application with node.js using Visual Studio (NTVS).

First lets launch visual studio and go to the JavaScript section and select the Blank Express Application.

Once selected, I have named my application SimpleExpress, Visual Studio will start creating the skeleton of the project for you, and if you do not have express it will start downloading it for you using NPM.

Click on Yes, and it will download all the dependencies.

Once completed you cant hit F5 on Visual Studio to build the solution and launch the new browser.

You may get an error though. The error says doctype 5 is deprecated, you must now use doctype html, lets look for the layout.jade file in the view folder and change the first line from 5 to html like this

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content

1

2

3

4

5

6

7

doctype html

html

head

title= title

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

body

block content

Now when you hit F5 your solution should build and you will be able to view the site.

If we look into the code of index.js inside of routes folder we find.

exports.index = function(req, res){
  res.render('index', { title: 'Express' });
};

1

2

3

exports.index = function(req, res){

res.render('index', { title: 'Express' });

};

The first parameter is requesting for the index view and the second parameter is a json object that passes in the data of title, kind of like an anonymous ViewModel that you may pass with your ASP.NET MVC framework for the view to render.

Lets add another parameter into the json object.

exports.index = function(req, res){
  res.render('index', { title: 'Express', username: 'Taswar Bhatti' });
};

1

2

3

exports.index = function(req, res){

res.render('index', { title: 'Express', username: 'Taswar Bhatti' });

};

Now we can edit the index.jade file and read the parameter

extends layout

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

1

2

3

4

5

extends layout

block content

h1= title

p Welcome to #{title}, #{username}

There is also another way of sending data to a client by using resources and not using a view or the layout.
If you open users.js file you will see

exports.list = function(req, res){
  res.send("respond with a resource");
};

1

2

3

exports.list = function(req, res){

res.send("respond with a resource");

};

And if you go to your http://localhost:1337/users

The response send back is just a stream of text, rather than html with a layout etc.

I have just touched the surface of express with node, in future blog post I will go more in details of using express to build an application.

Node, visual studio

node, node.js, NTVS, visual studio

Using NDepend to Analyze Quality of your Code

Taswar Bhatti April 15, 2014 No Comments

Disclaimer : My license for NDepend was provided for free by Patrick Smacchia at NDepend. The article below is based purely on my observations and the use of NDepend.

A Review of NDepend

I have know about NDepend since 2008-2009, but have never used a third party static analysis tool other than Visual Studio built in tools.

So lets get started and see what NDepend brings us. After downloading and installing NDepend, launching VisualNDepend.exe I got this screen. Note: NDepend is also integrated with VisualStudio, one can also launch it through the solution context.

There appear to be a big arrow in red that is animated and is calling for an action. By clicking on it I am able to navigate to a Visual Studio Solution that I wish to analyze.
Let me pick a WPF Prism Demo project I wrote last year to play around Prism.

After picking the solution I am given the option to include all the projects that I wish to analyze in the solution.

The analysis then just zips through and it opens a new html page for report on your browser.

And a window/dialog to guide us through the report in the VisualNDepend.

I have choosen to look at the dashboard from the dialog, lets see what NDepend finds for my demo project.

First thing I notice is I have 1 critical violation, if I dig deep into it I see that the name Bootstrapper is violating the rule of “Avoid having different types with same name”. All Prism applications require a bootstrapper, it is something that loads your IoC container modules. It is somewhat debatable if its a violation since it inherits from UnityBootstrapper, but I can understand why there is a conflict also, maybe one should have named it ProjectNameBootstrapper.

The next thing that I looked into is the Dependency Matrix. The dependency matrix looks a bit like an odd matrix of numbers, and each number signifies the coupling of the code.

One thing that I did find helpful is the dependency graph, it shows you how your projects are related to one another in a graph, as far as I can tell I have only scratch the surface of things, it can also dig into each method and find out what calls are made to what modules.

Summary

I have to say NDepend is a very powerful tool which allows one to write LINQ like queries called CQL, for customizing your own static code analysis. I also think that this tool is catered towards System Architects not your day to day coder, since the information that you can get using the tool is enormous. Maybe a lite version may help with day to day coder, mainly focusing on critical errors and violations, something that can even integrates into your unit test.

Review

code analysis, ndepend, review

Microsoft Most Valueable – mvp Professional 2014

Taswar Bhatti April 1, 2014 No Comments

So today I received MVP award for C# 2014 🙂
You can expect more from me this year on talks and blog post.

.NET

microsoft, mvp

C# tip How to String compare

Taswar Bhatti March 19, 2014 No Comments

Here is a quick C# tip, when using string compare don’t use

var str = "Hello";

if(str.ToLower() === "hello")

1

2

3

var str = "Hello";

if(str.ToLower() === "hello")

use the Equals and StringComparison.InvariantCultureIgnoreCase enum.

var str = "Hello";

if(str.Equals("hello", StringComparison.InvariantCultureIgnoreCase))

1

2

3

var str = "Hello";

if(str.Equals("hello", StringComparison.InvariantCultureIgnoreCase))

The thing you need to note is which rules are appropriate current culture, the invariant culture, ordinal or another culture entirely.
One can create the compare from StringComparer.Create(culture, true)

.NET, C#

.net, C#, csharp, dotnet

Installing Node Tools for Visual Studio 2013

Taswar Bhatti March 17, 2014 No Comments

Node Tools for Visual Studio is currently in Alpha 1.0 and its free and opensource, in this post I will show you how to install Node and Node Tools for Visual Studio (NTVS).

NTVS

First lets install Node.js
Download Node from http://nodejs.org/

The currently version is node-v0.10.26-x64
Step one lets run the msi that we just downloaded from nodejs.org

Node Install

Read and Accept the License Terms and Conditions and click on next.

Node Install Screen 2

I have chosen the default location which is C:\Programs Files\nodejs

Node Install Screen 3

Remember to install npm, Node Package Manager is the package manager for node, similar to NuGet for .NET

Node Install Screen 4

Node Install Screen 5

Node Install Screen 6

Node Install Screen 7

Finally we will verify with command prompt if node was installed properly by typing the command node -v

Node Verification screen

Now lets install the NTVS tools for visual studio.
Download it from http://nodejstools.codeplex.com/

I have downloaded the Visual Studio 2013 version of it, it also comes with a 2012 version.
Let run the NTVS 1.0 Alpha VS 2013.msi

Read and accept the terms and condition and click install

Node Visual Studio

ntvs2

ntvs3

Now we will lauch Visual Studio 2013 and go to the JavaScript section, one will find templates for Node.js

NTVS

In my next post we will go through and write a simple node and express web application.

.NET, javascript, Node, visual studio

Javascript, node.js, visual studio

Motivating a Software Development Team

Taswar Bhatti February 26, 2014 1 Comment

Here are some tips on motivating software development teams

Not exactly like the image above, but more realistic motivation for knowledge based people, especially developers. Being a lead for many years I found these tips very useful so I though I would share them, and to be honest they are mostly just common sense stuff.

1. Build Trust
Be with the team build trust just like a coach who motivates a team for a game, keep them motivated before and during and after the game, even for the next game. Keep them engaged have food/lunch with them (there is something about breaking bread together), bring them pizza during crunch time.

2. Realistic goals and targets
Get the input and agreement with the team, for work the team has to do, don’t just assign the work to the team/person and mark it (2 week project) when the team/person who is involved in doing the job does not even know about the work/task that needs to be done. Have them involved during the scoping of the project since they will have insights to the project or code base that as a lead or manager did not think about.

3. Measure performance
Are we on track or off track, how do we measure (Agile, Scrum/Kanban board, Story Board), what resources my team members need to get back on track. Maybe there needs help in some area expertise, support and tools

4. Celebrate success and incentives
Even for small milestones, not just at the end, rewarding the team all together not just the super man hero attitude. A Starbucks or TimHorton card for everyone goes a long way, also buy nick knacks for a reward. Let people know that they are awesome for what they do.

5. Know your team
Is the person a detail oriented person, are they right for the job that you have assign them Find out if they are introvert or extrovert, what are their idiosyncrasy, being aware of where they are on the project, be mindful treat people with respect. During a marathon, runners get water at certain spots, being the manager you need to be the person who is handing out the water and cheering for them, so that your team is motivated and hydrated to keep them running, same goes for software development.

6. Meet regularly
Have small/daily meetings with the team to find out if there are any road blocks and additional resources that is required. Have monthly meetings with individuals one-on-one to talk to about: future projects, how as a manager you can improve (reviews goes both ways), a form of retrospective on things that one can do well, get inputs from individuals sometimes people may not like to speak in a crowd, having 1-1 input is great for even performance review, take notes, rather than leaving it for end of year one should do it every month.

7. Its not about you, its about the team and give them a purpose
Its about the team now, as a manager you need to know what motivates your team. Is it money? Is it work life balance? comfortable environment? working remotely? Every one is different and is motivated differently, find out what makes the developer “ticks” and unlock the potential of the developer. Allow them to create a purpose to what they are building find ways to show values of what they do and not something nonsense that they are building.

8. Share work with Autonomy
There is something called the “bus factor” for a reason. If developer A is the only person who knows the database code and no one else does, what happens if tomorrow s/he gets hit by the bus? Utilize your team to know all the skills of the system, have people work on a project together to motivate each other, be confident in their ability, let them have the autonomy of making decisions on modules.

9. Be positive
No one wants to work for a negative workplace/person. Show your excitement on the business or project you are completing. Being positive is infectious, it will lift the spirit of others and grows like a snowball.

Agile, Misc

agile, software development, team

Bower package manager for Node.js Tools Visual Studio

jQuery: JavaScript locale sorting plugin

Javascript Locale Compare

Problem at hand

Visual Studio Node.js express with Twitter Bootstrap

C# tip: How to count values of Dictionary that contain List using Linq

Visual Studio Node.js, creating express applications

Using NDepend to Analyze Quality of your Code

A Review of NDepend

Summary

Microsoft Most Valueable – mvp Professional 2014

C# tip How to String compare

Installing Node Tools for Visual Studio 2013

Motivating a Software Development Team

Opinions are my own and not the views of my employer

LinkedIn

My Book

Archives