Learning Knockout JS – Crazy Mom Baby Tracker Demo

I’m thrilled to be able to report my wife and I had our second daughter on May 8th, 2012. Vanessa was 7 pounds even and very healthy. Due to the birth, I took a few days off of work to help out (in many ways, I think I was more work for my wife being home). Most of my time has been spent getting acquainted with my new daughter, but occasionally, I’ve grabbed an hour here and there, usually in the middle of the night after a feeding, to read about knockout and even write a small demo as a learning exercise.

This little app is not meant to serve any commercial value and is very simplistic, but given the current situation I felt it was a fun and fitting topic.

To any mom’s out there, I mean the title to be lighthearted – no offense intended!

Ok, on with the article.

Knockout Demo Screenshot

What’s It Made Out Of?

The Crazy Mom Baby Tracker is intended to exercise the following technologies:

At the Southwest Florida .NET User Group, we recently had a Battle of the UI Frameworks which highlighted a general movement towards JavaScript-centric applications in the .net community. I thought we were aggressive at work, perhaps even cutting edge, but alas – it turns out we’re about where everyone else appears to be right now.

HTML5 is, of course, the latest version of HTML (at the time of this blog post) and all the rage. Though I will display HTML5 semantics, there are not any earth shattering HTML5 snippets throughout this demo.

jQuery is found throughout, as it has become the de facto standard for working with JavaScript these days.

Bootstrap was shown to me by our non-.NET marketing development team and it has been a nice addition for standardizing the HTML structure, CSS (or LESS) classes, and general user experience.

Knockout is very recent for me and the main purpose of this educational demo. It is a responsive MVVM JavaScript implementation that binds the UI to the underlying view model.

jqPlot is a jQuery charting library that I added into the project to visualize the data more interestingly.

A Little Prep Work Before We Get Building

This application is pure HTML, CSS, and JavaScript. As such, there is no need for the .net framework or Visual Studio. However, it certainly is a nice IDE to work in and by using the Nuget Package Manager you can get up and running very quickly. Therefore, all screenshots will be provided using Visual Studio, but this is not a requirement and you can ignore these references if you like.

First, let’s create a new Web Site. In Visual Studio, click File > New Website. Then under the template selector, choose ASP.NET Empty Web Site. By selecting this, you get a pretty bare web site that does not need to contain any ASP-related tags or code. After selecting an appropriate location to store the files you should be ready to begin.

Next, right click the project and select Manage Nuget Packages. You will want the following packages: jQuery, Bootstrap from Twitter, Knockout JS, and jqPlot.

Nuget Packages

Let’s also add a few placeholder files that we’ll work with later. Please create the following:

  • /Content/my.css
  • /Scripts/my.js
  • /index.html

Let’s Start Building

At this point, everything should be ready for us to start getting to the good stuff. Let’s open the index.html (our main application page) and add the css references for the selected Nuget packages, as well as our custom css file.

    <title>Crazy Mom Demo</title>
    <link rel="stylesheet" type="text/css" href="Content/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="Content/bootstrap-responsive.min.css" />
    <link rel="stylesheet" type="text/css" href="Scripts/jqPlot/jquery.jqplot.min.css" />
    <link rel="stylesheet" type="text/css" href="Content/my.css" />

Next, let’s add our script tags to bring in the code for the Nuget packages, and our own placeholder js file which we will use to add all of our custom logic to drive the application.

    <script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="Scripts/knockout-2.1.0.js"></script>
    <script type="text/javascript" src="Scripts/jqPlot/jquery.jqplot.min.js"></script>
    <script type="text/javascript" src="Scripts/my.js"></script>

Now that the references are in place, we need to build the structure of the html. Since we’re using bootstrap, we’re going to use the fixed grid layout they provide (hence the css classes “row” and “spanX”). The basics are below.

<div class="container">
	<h1 data-bind="text: title">Title</h1>
	<div class="row">
		<!—-panel for data entry -->
		<div class="span8">

		<!—-panel for my cute kids picture -->
		<div class="span4">
			<!-—we won’t cover adding this in the blog post -->

We need a container wrapping the layout, and a few other layout related div’s to format the page. Notice the h1 tag which has our first knockout data-bind attribute. This is going to look for a property on the viewmodel called “title” and bind the innerText to it’s value.

Next, inside the data entry panel, let’s add two textboxes and a pair of buttons to control adding baby weight entries.

<form class="form-inline well" data-bind="submit: addItem">
	<h3>Enter the babies weight below</h3>
	<input id="pounds" type="text" class="input-mini" data-bind="hasfocus: true" />

	<label>Remaining ounces</label>
	<input id="ounces" type="text" class="input-mini" />

	<button type="submit" class="btn btn-primary"><i class="icon-ok icon-white"></i> Add Baby Weight</button>
	<button type="reset" class="btn btn-danger" data-bind="click: clearItems"><i class="icon-remove icon-white"></i> Start Over</button>

The css classes for the form are also from bootstrap and help to stylize the form. You can view the bootstrap documentation for more details.

The form has a knockout binding for submit to call the function on the viewmodel “addItem”. There is also a binding for the click event of the reset button to clear all data in the viewmodel (not just the form fields as normal).

Directly below the form, let’s add a section for displaying notifications and data validation. We’ll again use knockout to bind the results of the messages based on what is happening in the viewmodel.

<div id="alert" class="alert" 
		visible: msg().length > 0, 
		css: { 
			'alert-success': msgType() == 'success', 
			'alert-error': msgType() == 'error', 
			'alert-info': msgType() == 'info' }"<
	<a class="close" href="#" data-bind="click: hideAlert">×</a>
	<p data-bind="text: msg"></p>

Let’s now add the final pieces to allow for a bit of data visualization. We’re going to use a chart control from jqPlot and a table displaying the individual entries.

<div id="resultsChart" data-bind="chart: items()"></div>

<table class="table table-striped" data-bind="visible: items().length > 0">
			<td>Total Pounds</td>
			<td>Total Ounces</td>
	<tbody data-bind="foreach: items">
			<td data-bind="text: display()"></td>
			<td data-bind="text: totalPounds()"></td>
			<td data-bind="text: totalOunces()"></td>
			<td><a href="#" data-bind="click: $parent.removeItem"><i class="icon-remove"></i></a></td>

The chart is interesting, as it will be a custom binding we create for knockout to work with jqPlot. Data within the table are bound to an array of items and looped through using the foreach knockout binding. I’ve also added a remove button next to each entry to allow for the removal of entries added by mistake. Notice the scoping when specifying the knockout binding; while looping through the items, we’re at the individual item level – therefore, we must move up one level to access the viewmodel directly ($parent) and call the removeItem function.

jqPlot Chart Screenshot

Wiring Up the Logic with Knockout and jQuery

Now that we have a clear picture of what we want this application to look like, let’s wire up the viewmodel and make it actually perform.

Open up your my.js file and begin by creating a good old jQuery ready event:

$(function () {

We’ll put our code in here. Let’s also create our own namespace with the following code to avoid any collisions.

// global namespace
var my = my || {};

We now need a model to structure the baby weight entries. Let’s create it as follows:

// models
my.BabyWeight = function(pounds, ounces) {
	var self = this;

	self.pounds = pounds;
	self.remainingOunces = ounces;

	self.totalOunces = function () {
		return (self.pounds * 16) + (self.remainingOunces * 1);
	self.totalPounds = function () {
		return (self.pounds * 1) + (self.remainingOunces / 16);
	self.display = function () {
		return self.pounds + 'lbs - ' + self.remainingOunces + 'oz';

This could contain knockout observables and computed values, but it’s not particularly necessary the way the demo is set up. The BabyWeight model has two properties: pounds and remainingOunces which together make up for the entire weight of the baby. I’ve also added a few calculated properties to add to the tabular data for each entry.

Let’s now create the viewmodel which will contain the bulk of our knockout observables.

// view model
my.vm = function(existingItems) {
	var self = this;

	// properties
	self.items = ko.observableArray(existingItems);
	self.msg = ko.observable("");
	self.msgType = ko.observable("info");
	self.title = ko.observable("Crazy Mom Baby Tracker v.001");

	// methods
	self.addItem = function () {
		var pounds = $('#pounds').val();
		var remainingOunces = $('#ounces').val();
		var itemToAdd = new my.BabyWeight(pounds, remainingOunces);
		// validate
		if (itemToAdd.pounds == "" || itemToAdd.ounces == "") {
			self.msg("Oops, either the baby has become weightless or you didn't enter any data.");
		else {

		// add to items array

		// update msg
		self.msg("You've successfully weighed the baby in at " + itemToAdd.display());
	self.clearItems = function () {

		// clear items

		// update msg
		self.msg("All weight entries have been cleared.");
	self.hideAlert = function () {
		self.msg("");  //clearing the message will auto-hide since it's bound
	self.removeItem = function (item) {

		// remove item from items array

		// update msg
		self.msg("The weight entry has been successfully removed.");

Note the use of this line:

var self = this;

This helps to maintain reference to the proper this when inside callbacks from anonymous functions.

The observables ensure that changes to their values will be automatically reflected in the UI for any bindings. For example, as an item is added or removed from the items array, the UI for the chart and table will automatically be updated, well as soon as we add the custom binding to the chart that is. Let’s add that now:

// kick off knockout bindings
ko.applyBindings(new my.vm([]));
// add custom binding for charting
ko.bindingHandlers.chart = {
	init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
		// empty - left as placeholder if needed later
	update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
		// prepare chart values
		var items = ko.utils.unwrapObservable(valueAccessor);
		var chartValues = [[]];
		for (var i = 0; i < items().length; i++) {

		// clear previous chart

		// plot chart
		$.jqplot(element.id, chartValues, {
			title: 'Baby Weight'

The custom binding simply updates the chart on any change to the passed in valueAccessor, which we specified in the html as the items array in the viewmodel. jqPlot uses the element.id, in our case a div tag, to act as the placeholder container to drop the chart into. See the jqPlot documentation for much more detail on creating significantly more elaborate charting capabilities.

Some Odds and Ends

I didn’t cover the my.css file but I used this to add some very minor additional styling to the page. Most of the styles though do come “out of the box” from bootstrap. I hope someone finds this useful and please feel free to correct any mistakes I’ve made – this is certainly meant to reinforce my own pursuit in working with knockout and I welcome any advice.

Fun and Struggles with MVC – No Parameterless Constructor Defined

It’s taking a little while, but I’m starting to understand the magic behind model binding in MVC. It’s fairly simply to try it out while watching videos and tutorials that are out there; but when I applied it to our enterprise application with a fairly large collection of domain models that already exist, I had less than ideal results.

Here’s the struggle I was having…

The Problem

I have an entity called a SalesRep which has several properties including a few complex object properties such as EmailAddress , PersonName (struct), and Address (street1, street2, city, state, etc.) as well as many primitives.

I had both GET and POST Create actions defined in the SalesRepController as follows:

/// <summary>
/// Add a new sales rep.
/// </summary&rt;
/// <returns&rt;</returns&rt;
public ActionResult Create()
   return View(new SalesRep());

/// <summary>
/// Save a new sales rep.
/// </summary>
/// <param name="salesRep"></param>
/// <returns>If successful, the SalesRep/List/ View.  If not successful, the current SalesRep/Create/ view.</returns>
public ActionResult Create(SalesRep salesRep)
   var logic = new SalesLogic();
   logic.SaveSalesRep(ref salesRep);

   return RedirectToAction("List");

However, when calling the Create action on the SalesRepController, I would get the following Parameterless constructor error and could never even enter into a breakpoint.

No Parameterless Constructor Defined for this object

The Solution

After spending quite a bit of time experimenting and searching the internet, I couldn’t readily resolve the issue. Feeling as though I was never going to grasp MVC, and cursing the videos that looked so ridiculously easy, I spun up a new trivial sandbox project. I created new simplistic models, new controllers, and everything worked perfectly. So what made my old enterprise entity classes different? The answer was… the constructors.

As you can see in the above error message it is properly reporting that it could not find a parameterless constructor for the object; but which object? I had been looking at the SalesRep object and even the View and Controllers, but what I should have been looking at was the complex properties within the SalesRep as MVC recursively reflected all of the properties and created them with a parameterless constructor. In my case, we had an EmailAddress which specifies a single constructor:

public EmailAddress(string value) {
   //our code

It was while MVC was auto-magically wiring up the form elements to the email address object that the action came tumbling down.

A Simple Recreation

I’ve recreated this scenario using a simpler class slightly modified from Scott Allen’s pluralsight demo’s.

Below is a screenshot of my newly created Movie class which contains three properties; Name, Year, and Studio. Name and Year are both primitives, while Studio references another entity.

Movie Class

Here is the Studio class with the pertinent name parameter constructor only. There is no parameterless constructor in this class and because we have specified a constructor the default is overridden.

Studio Class

When we now reference this property within the Create View to allow for model binding we will encounter the error.

Movie View

We can correct this by adding a parameterless constructor in the Studio class and all is well again.

Catching up to MVC

Contrary to my nature, I’ve been reluctant to adopt the “latest and greatest” from Microsoft for the past twelve months or so. A good deal of my tech lag time has been due to my primary position leading an Oracle Enterprise Business Suite (EBS) project which has put me in the world of red, not blue. It’s been the unfamiliar – Oracle DB, Jdeveloper, and putty – that I’ve been working in more than anything made in Redmond lately. However, there is an equally valid reason – I’ve lost a bit of my Microsoft faith over the countless hours of podcasts, reading articles, and attending events which had left me completely unsure what Microsoft was doing (and questioning whether Microsoft knew as well). For quite a while it felt as though everything Microsoft created was tossed into the eco-system somewhat half-baked and what received the most buzz stuck. Perhaps this is Microsoft adopting some of the open source mentality that has been so hard on Microsoft in the past; perhaps it was simply to create a competitive nature internally at Microsoft; but to some critics, and even a handful of die-hard developers like myself, it seemed scattered and without direction.

There’s a bit more of a problem that I now understand more fully than when I was younger; time is not an infinite resource. Before I would jump whole-heartedly into a new technology learning with vigorous disregard of whether that technology would rise to the top or fall by the wayside. The cost was minimal; it only meant time away from things I probably shouldn’t be doing anyway.

Now that I have a daughter (as well as another on the way) and other family demands, I have to choose very carefully what my training time can go to. Should the focus be MVC, WP7, Silverlight, BizTalk (or gasp, Oracle SOA Suite), Entity Framework, jQuery, HTML5/CSS3, Azure, Denali, Kinect SDK, or any of the now vast array of Microsoft offerings available to developers?

So, as I’ve found myself occupied in other technologies, I rode the fence to see what shook out. It looks like Microsoft is finding their groove again and it’s time to brush aside the fallout and introduce the winner(s).

Welcome MVC to My Toolbox

As most of you know, MVC as a pattern has been around for quite a while. It is this reason that I originally waited to see if Microsoft’s implementation would survive or if the community would look to past MVC frameworks and decide to go back to something from the open source community or an established Java MVC implementation that would be ported over.

Obviously, that does not appear to be the case and Microsoft’s MVC implementation has been a huge success.

So now it’s time to get to work. I’ll be periodically posting about my learning process with MVC if any other developers are interested. There is a huge list of resources now available for MVC and as I post (or you comment), I will try and steer developers to what I consider the most useful.

Disclaimer and decisions made about the example material

Please note that there is still a plethora of examples showing simple MVC apps which I am intentionally choosing to not use in these blog posts. I am starting with a quite large project to accurately compare MVC to “the real world of enterprise applications”. I’ve also decided to employ logic and models via a service layer instead of directly in the MVC project. P.S. – way to go MVC for allowing this, it should be played up more in examples!

Also, in case you didn’t pick up on this earlier, but this is a learning journey for me with MVC – I am by no means an expert… yet.

Without further ado, here are my notes from the first foray into MVC with an enterprise application.

Project Orange (the anti-apple)

It’s not important what this project is, but it is intended to have multiple tiers where the web tier will be MVC. Let’s look at the setup of the projects:

Project Orange Projects

BusinessDataLogic is a combined BLL and DAL using entity framework.
Models are the business entities and DTO’s.
Services are WCF services which wrap the business logic and expose DTO’s.
Utilities are just helper classes that are common throughout the tiers (extension methods, etc.)
Web is MVC.

MVC Presentation Tier

Let’s take a closer look at the web application and the asset structure:

Project Orange MVC

As you can see, I’ve added a service reference for my WCF Inventory service. I’ve also added an ItemController and a corresponding View directory for Item.

I’ve added one new method within the ItemController for searching:

// GET: /Item/Search/had

public ActionResult Search(string text)
   var client = new InventoryService.InventoryClient();
   var items = client.SearchItems(1, 1, text);
   return View(items);

I’ve created a Search view which was auto-scaffolded based on the strongly typed model. The scaffolding is a nice feature and I can see this being extensible in the future.

Two things that I did get tripped up on for just a short while which required some trial and error was that I needed to create a new routing rule in global.asax to handle my Search action url format:

//Search Item
   new { controller = "Item", action = "Search", text = UrlParameter.Optional }

I also discovered that _Layout.cshtml is essentially the masterpage (called a layout in MVC terms) and is auto-loaded by default from _ViewStart.cshtml.

That’s actually not a bad start for just opening up a project template and getting going, the wizard-style adding of files was very intuitive. Now it’s on to the resources to start learning more.

What Resources I’m Using This Week

Pluralsight: I’m finishing up the free MVC video on ASP.net and like the quality so much I’ve requested for our entire team to purchase seats through work. The catalog is certainly Microsoft-based but also has some “fringe” technology courses as well.

I’m not paid for any recommendation or traffic to Pluralsight, I just like their material.

HTML5 by Bruce Lawson and Remy Sharp: In line with using MVC, I think this is also an appropriate time to embrace HTML5 (as the rest of the world has gone crazy over it) as some of the HTML generated appears to be doctype’d for HTML5 in MVC as well now.

I did enroll in Amazon’s referral program, so there is a slight compensation for purchasing the book after clicking the image below.

My Recent Speaking Presentations

Presenting at Florida Gulf Coast University (Careers in Technology)

Tonight, Charlene Gamero and I did a presentation on Careers in Technology to students at FGCU. There was a solid turn out, mostly because they were forced for an assignment, but we’ll take credit anyway.

I mentioned during the session that writing a blog was an extremely beneficial endeavor and in doing so remembered how I’ve neglected to write anything within the past month. Oops.

So, to both fill a little content, and provide the material for any of the students that were interested please enjoy this short post of the slide deck from our presentation.

Careers in Technology Presentation

Presenting at Oracle Open World (Value of Upgrading to Release 12.1 of Oracle Manufacturing)

Oracle OpenWorld 2011

On Oct. 6th, I presented on a customer panel regarding our new implementation of Oracle EBS, Agile PLM, and Oracle MOC. Though the title of the talk was a little misleading for my particular part (being a fresh implementation, not an upgrade), there was a lot of good information covered that is only found in R12; specifically, the reasons for our project – Manufacturing Execution System (MES) and Manufacturing Operation Center (MOC). There were two other customer speakers which did a great job to round out the session. I’ve included the slide deck (with the other presenters information excluded since I did not request their permission for publishing) in the link below.

On a sidenote, Open World was a lot of fun and educational though quite sad just prior to the concert when many of us found out Steve Jobs had passed away.

Value of Upgrading to Release 12.1 of Oracle Manufacturing Presentation

Moving to the Cloud, as a Consumer

Recently, I’ve been thinking a lot about the cloud. As a .NET developer, most of my thoughts have been on whether there were any projects I had which would make sense to reside on Azure. I struggled with the temptation of putting something up for the pure sake of trying it out but couldn’t really come up with a valid business case for the current suite of applications my team develops on. The assumption is there that moving applications to the cloud have some immediate benefit, such as scalability, ease of use in future deployments, and minimizing the need for internal infrastructure maintenance. However, whether these benefits would materialize is still in question and in most cases there simply isn’t a need right now.

So, with all of the uncertainty of putting business critical systems in the cloud yet, I thought I would try as a consumer first. I broke down my current day to day needs from my machine to see what I could potentially offload to the cloud. Here is my initial list:

  • Programming
  • Office
  • Pictures
  • Videos
  • Virtual Images
  • Note Taking
  • Email
  • Instant Messaging (Communication)
  • Twitter/Blogging/Social
  • System Administration (putty, VNC, remote desktop)
  • Zune/Music/Podcasts (WP7 Downloads)


This is a difficult one because this is where I draw on the horsepower of my machine throughout the day. I did work with a consultant about eight months back where he was running his development environment purely inside an Amazon EC2 instance that he would remote into whenever needed. There are some pretty nice advantages to this, such as, being able to access your full development environment from a netbook or lightweight, inexpensive laptop. Also, this removes the worry about breaking, losing, or having your primary development machine stolen.

The two options I am currently looking into are the VM role in Azure or Amazon EC2.

In addition to the development environment and OS, I focused on source control. Most companies that employ full time developers have centralized source control. However, if you’re on your own, or want to have separate source control for your non-work related projects, there are several options you can explore.

Several companies host Team Foundation Server (TFS) for a monthly fee of anywhere from $15-40 per user per month. Check out a list of TFS hosting companies from Microsoft.

If you are working on purely open source projects that you would like to source control, you can also host your code on Codeplex.

For more cost effective cloud-based source control (as low as $7 per month), try comparing some of the Subversion providers.


There are quite a few options for storing documents online, but besides Office 365, I haven’t seen a really complete set of tools for developing document content without a local install.

A free alternative to Office 365 is Google Docs for basic document types.


I am still on the lookout as to how I want to store pictures and videos. My current search has narrowed me down to Photobucket and Flickr with Flickr being the clear favorite for me. However, if someone has a really great suggestion, please let me know because I’m not quite sold yet. With either solution, it looks like you’re probably going to have to pay a fairly nominal amount in order to make this a truly usable option.

Virtual Images

See Amazon EC2 and Microsoft Azure VM Role above.

As a side comment, I really like spinning up VM’s for specific purposes instead of polluting my machine with hacks and patches to get all of the software I need to run on a single instance without causing headaches.

Note Taking

This is an interesting one. I had been diligently using OneNote for quite a while now and only last week switched to Evernote. I am pretty confident I will be staying with Evernote for one primary reason, compatibility. Above everything else, is the wide array of compatibility for devices and operating systems. I run an Ubuntu environment in addition to my Win7 and WinXP VM’s as well as I may be looking into the Asus eee Transformer 2 tablet when it comes out in October. Both Linux and Android Honeycomb do not support OneNote to my knowledge and do not require any additional license purchases for OneNote.

One thing I did like about OneNote a little better was the much richer text entry for note taking that OneNote offered, however for my personal notes it is something I can live with in Evernote.

One final note, for Evernote Pro Edition there is a charge of $5 per month which allows greater bandwidth usage per month for storing your notes.


There are countless options for webmail, however I have separated my work email through company exchange and my personal email through Google Business Apps. I use the free business version so I can maintain my personal domain instead of gmail.com.

Instant Messaging

There are several options here, especially around which particular instant message client you used locally, however if you want to aggregate nearly all of the major services and access a completely web-based client, then meebo.com is a decent choice.


All of the usual suspects for online tools. Twitter, Hootsuite, WordPress, Blogger, Facebook, LinkedIn, etc.

Obviously, I use WordPress for my blog but I included Blogger because many colleagues of my use Blogger and like it quite a bit.

System Administration

In most cases these days, this means the following tools I need to access: PuTTY, VNC, and Remote Desktop. PuTTY is nice since there is no install needed, so I can put it on my cloud file storage (read below) and access it directly. Sometimes I wish more programs were like this.


Viable contenders include Amazon, Spotify, and Pandora. Unfortunately for my WP7, Zune needs to be locally installed and occasionally help sync my physical device. If anyone knows of a way around this or really good services for storing and accessing all of your music please let me know.

General Storage

Again, there are a lot of options for simple file storage. I’ve tried a few and here are the ones I liked best.

Microsoft’s Skydrive, used by several applications including OneNote gives you 5 GB of free space and the ability with Windows Live Mesh to automatically sync files across several machines. Photos I take with my WP7 automatically are uploaded to Skydrive for safe keeping (and helps limit the space taken up on my phone itself). The downside, is that I had several problems with Windows Live Mesh not working properly inside my guest VM’s and often failing to sync or connect to the service on my host machine. I still use Skydrive for my WP7 photo storage automatically, but I’ve switched off for file storage.

Google Docs was the original location of my offline stored documents but it’s fairly crude interface and lack of support for so many file types hindered my long term use.

Ubuntu One is very similar to Skydrive and performs live syncing as well, but to my understanding is only for the web and Ubuntu operating system. I also ran into problems connecting to the service often with Ubuntu One but it worked enough to make it on the list.

Finally, the service that I currently run and plan to use for a long time is Dropbox. Similar to Windows Skydrive, Dropbox is both a web version and a client installed helper application which monitors a local folder syncing files to and from the cloud. I can readily install the client tool in multiple operating systems, inside of both host and guest VM’s, and it seems to always connect in the background without problems.

There is a cost for Dropbox depending on the amount of storage you need and if it is quite large you may want to continue comparative shopping. You can view their price chart to help make your decision as to whether Dropbox is right for you.

Not Everything Can Go to the Cloud

Unfortunately, there is still quite a bit that I need to run natively, especially anything that requires communication to physical devices (Kinect, WP7, USB devices, video camera, etc.)

Also, certain development requirements may not be able to run in a virtualized environment such as the Windows Kinect SDK, XNA Game Studio (this may no longer be true but it was for quite a while and I’ll leave it up to someone else to fact check as it’s getting late).

Other Useful Web-based Services

Passpack for storing passwords online.
Delicious for storing bookmarks online.
Mint for personal spend tracking and planning.
Zillow for depressing home valuation and trending.
Bitly for url shortening and link tracking.

TFS Management with Team Foundation Sidekicks 2010

Recently, I’ve had a series of unfortunate events regarding my development environment. I’ve had some hard drive issues, some difficulties with a VM that I had been working on, and so it goes. All of these problems led to a rebuild recently and the spin up of a brand new development environment.

Unfortunately, rebuilding your trusty dev environment is never as quick and easy as you think it will be and I was left with a few files orphaned from TFS in the old Workspace. If you’re not familiar with this, Team Foundation Server (TFS), the “best-more-than-just-source-control” source control, is Microsoft’s top of the line source control and project/build management software for development environments. When working with TFS, you use Workspaces which map a local directory on your machine to a server source control directory. All check-ins/check-outs are controlled and attached to the activity in this Workspace. Because these Workspaces are machine specific, if you abruptly change computers, you will need to create a new Workspace, and though the same user account can be used to attach to TFS and create the Workspace, you can (if you’re not careful, like I was unfortunately) leave files checked out to yourself in a different Workspace. Since this Workspace is no longer active (computer may be replaced), the Workspace is left in limbo.

There are of course ways to clean this up natively with TFS; however they are command line only tools. Now all true geeks should be comfortable working in command line, but to be perfectly honest, this activity is so rarely executed that it is much, much, much easier to do with a graphic tool called Team Foundation Sidekicks 2010 instead of returning back to documentation or Bing (noticed how I didn’t say Google).

So, without any further ado, let’s run through the quick tutorial of installing and using Sidekicks.

Step 1: Know Where to Get It

Mosey on over to Attrice to download the appropriate version. For TFS 2010, you will want Team Foundation Sidekicks 2010, for prior versions of TFS; you will want Team Foundation Sidekicks.

I will be installing 2010 in the following screenshots.

TFS Sidekicks 2010 Download

Step 2: Install and Configure to Your TFS

Now that you’ve downloaded the application, go ahead and install. No instruction necessary here, just run the install package.

Once you are up and going, you will be asked to Connect to a Team Foundation Server. Enter your server information and a valid administrator privileged TFS user account and password.

TFS Sidekick 2010 Connect to TFS Configuration

Step 3: Using Sidekicks

Sidekicks has several areas of TFS you can administer. See the screenshot below to view the Workspace, Status, History, Label, Shelveset, Users View, and Code Review options. To clean up my orphaned Workspace guess which option I will be selecting?

TFS Sidekick 2010 Modules

Once in the Workspace Sidekick, you can filter to find the appropriate Workspace(s) to administer. I searched by username and found three (one is my active Workspace created on the rebuilt development environment, the other two were from old environments that I had never cleaned out). I selected the two obsolete Workspaces and clicked the red X delete icon; done deal, pretty straight forward. Below is a screenshot of the Workspace Sidekick and my remaining active Workspace.

TFS 2010 Workspace Sidekick

jQuery Makes 100% Height So Much Easier

jQuery gets an insane amount of hype these days and for the most part it is warranted. The interesting thing to me is that I never see amazingly new things with jQuery that you couldn’t do with plain old javascript before; however, jQuery just makes it so much easier.

One simple example is the infamous “CSS 100% height” issue. If you’ve done any CSS work, at some point you’ve come across the desire to have a 100% height div or table and have shuffled through all of the hacks and tweaks on how to do this. Often times, the examples use javascript to not only set the height, but also maintain the proper height when resizing the window.

I remember writing client-side code to set the height based on the DOM object height or clientheight and then finding out that it only worked in a particular browser. To maintain the same results across multiple browsers meant an extensive amount of hacky code checking browser type and version.

jQuery to the Rescue

Enter jQuery, where with a single attribute of height() you can abstract all of the difficulty of finding the appropriate height of an object regardless of browser or operating system.

Below, I’ve setup an example of using jQuery to autoset the height of a content div in the middle of the screen. The code also automatically adjusts on resizing the browser window.

Setting Up the HTML

Below is a very basic HTML layout. It consists of a header, a content section, and a footer.

<div id="header">&nbsp;</div>
<div id="content">&nbsp;</div>
<div id="footer">&nbsp;</div>

Add a Bit of CSS

Below, I’ve set the HTML and Body tags to 100% and 0px padding/margin. This allows the javascript method to key off the total height of the HTML element. I’ve also set some colors and fixed heights for the header and footer just for visibility in the demonstration.

html, body
    height: 100%;
    padding: 0px;
    margin: 0px;
    background-color: Blue;
    height: 100px;
    background-color: Red;
    background-color: Blue;
    height: 50px;

A Short jQuery Snippet

First, we need to discuss the sizeContent() method. This method simply gets the total height of the page via $(“html”).height() and then subtracts the header and footer heights. This gives us the necessary height for the content. We then simply set the CSS height attribute for the content div to the newHeight value.

$(document).ready() and $(window).resize() are pretty self explanatory and simply call the sizeContent() method upon page_load and on any event the window is resized.

//Initial load of page

//Every resize of window

//Dynamically assign height
function sizeContent() {
    var newHeight = $("html").height() - $("#header").height() - $("#footer").height() + "px";
    $("#content").css("height", newHeight);

Where to Host My jQuery Web Application?

If you’re looking for a place to host your web application there was recently some interesting news. Web.com made a big move by purchasing Network Solutions for (reports vary) $560 million!

Network Solutions now has VPS hosting (“Virtual Private Server” hosting), for more advanced and technologically-inclined website builders who want more control over their websites, and more capability in the structure they’re using. Head over to Network Solutions to check it out today.

Happy coding!