Month: August 2011

.NET, TFS

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

Web Design

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;
}
        
#header
{
    background-color: Blue;
    height: 100px;
}
        
#content
{
    background-color: Red;
}
        
#footer
{
    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
$(document).ready(sizeContent);

//Every resize of window
$(window).resize(sizeContent);

//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!