Scott Hanselman

NuGet Package of the Week #5 - Debugging ASP.NET MVC applications with Glimpse

April 19, '11 Comments [19] Posted in ASP.NET | ASP.NET MVC | NuGet | NuGetPOW
Sponsored By

Hey, have you implemented the NuGet Action Plan? Get on it, it'll take only 5 minutes: NuGet Action Plan - Upgrade to 1.2, Setup Automatic Updates, Get NuGet Package Explorer. NuGet 1.2 is out, so make sure you're set to automatically update!

The Backstory: I was thinking since the NuGet .NET package management site is starting to fill up that I should start looking for gems (no pun intended) in there. You know, really useful stuff that folks might otherwise not find. I'll look for mostly open source projects, ones I think are really useful. I'll look at how they built their NuGet packages, if there's anything interesting about the way the designed the out of the box experience (and anything they could do to make it better) as well as what the package itself does.

A Client Side Glimpse into your Server

Glimpse is like the FireBug client side debugger, except it's implemented in JavaScript on the client side with hooks in to ASP.NET on the Server Side.


Glimpse includes not only better Route Debugging support than Phil Haack's original Route Debugger, but also excellent support for the little used but totally useful Trace.Write().

Let's just see it in action. You can do this with me now, in less than 5 minutes.

From a new ASP.NET MVC application (Or WebForms, for that matter), install Glimpse.

Add Library Package Reference

Before I run my app, I'm going to sprinkle in some Trace.Write and Trace.TraceError just to make the point.

public ActionResult Index()
ViewBag.Message = "Welcome to ASP.NET MVC!";
Trace.Write("Hey, this is nice");
Trace.TraceWarning("Oh, this could be bad.");
return View();

public ActionResult About()
Trace.TraceError("Oh, no! That's bad");
return View();

Now, I'll run my app. I can turn Glimpse on with a Bookmarklet, but I like visiting http://localhost:portname/Glimpse/Config and pressing the big "Turn Glimpse On" button. I'll drag the bookmarklet onto my toolbar one day.


Glimpse Config

Next, when I visit my site, notice the Glimpse control panel at the bottom! Insane. It's NOT a browser plugin, Dear Reader, that's all JavaScript.

Gimpse DIV up on the default ASP.NET MVC page

*Mind blown* see my Server-side Trace information in the Trace tab?  Isn't that nicer than Trace.axd?

If I switch to the Routes tab, I can see which Route matched my /Home/About request.

Using Glimpse to Debug Routes

Here's the Execution tab of Glimpse. I can see the methods that were executed, including those that weren't. Insane.

The Execution Tab of Glimpse

Glimpse, along with ELMAH,  is officially my favorite add-on to ASP.NET MVC. I'll be using it every day and I recommend you do as well.

I'm only touching the surface of what Glimpse can do, but I'll leave that extended tour their great site at


About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

Mix 11 Videos - Download them all with RSS

April 18, '11 Comments [19] Posted in ASP.NET | ASP.NET Ajax | ASP.NET Dynamic Data | ASP.NET MVC | Channel9 | HTML5 | IE9 | IIS | Mix | NuGet | Speaking | VS2010
Sponsored By

Such a fun time was had at Mix 11 this last week in Vegas. I only saw a few talks as I was busy presenting, but now as I sit at home on my first day back, I say to myself, Self, how can I get all the Mix videos at once?

First, you can watch all the videos online at 

Second, you can get them via RSS. Most major browsers are hiding the RSS button these days, but the discovery metadata is all still there. In IE9, for example, if you show the Command Bar, you can see the RSS Feeds for the Mix site:

Hey, the Mix Site has RSS feeds in its Meta Tags!

What's all this awesomeness? Oh, yes, it's the Mix talks via RSS with enclosures, just as you've always wanted. Now you can list the thousand ways that you might retrieve these lovely files and abuse Microsoft's bandwidth while hoarding knowledge on your multi-terabyte personal SAN.

Direct links to the Mix RSS feeds that include Enclosures:

So now you can get them with iTunes or Zune, or PowerShell, 'cause that's bad-ass. Yes, you can use Curl also, nyah.

$feed=[xml](New-Object System.Net.WebClient).DownloadString("")
foreach($i in $ {
$url = New-Object System.Uri($i.enclosure.url)
(New-Object System.Net.WebClient).DownloadFile($url, $url.Segments[-1])

Or, you can subscribe in iTunes from Advanced|Subscribe to Podcast, assume, of course, you want iTunes in your life.

I hate iTunes with the heat of a thousand suns

Or, in Zune (which is a good Podcast Downloader even if you don't have a Zune) you can go to Collection|Podcasts and click Add A Podcast:

Zune's OK

Another nice, lightweight Podcast Download is the Open Source "Juice!" from

Juice Podcast Downloader

Go get them! Here's the presentations that Web Platform and Tools Team (ASP.NET, IIS, etc) presented:


About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

Mix 11 - Web Platform and Tools Keynote Demo Script

April 13, '11 Comments [18] Posted in ASP.NET | ASP.NET MVC | HTML5 | IE9 | Javascript | Microsoft | Mix | NuGet | VS2010 | WebMatrix
Sponsored By

It's Day 1 of the Mix 11 conference here in Las Vegas. I work for the Web Platform and Tools (that's ASP.NET, IIS, IIS Media, etc) group and I did the Web Platform demos for Scott Guthrie's part of the keynote. A lot of people in Dev and QA worked hard all year long to make some fun and cool products and as the designated "talking head," I had just 16 minutes to make all of them (people + products) look good. I hope I did them all justice.

We built a backend and a front end for Rob and my sie The show is something Rob Conery and I do moonlighting on the side (it's our hobby, not our job nor a Microsoft thing) but we needed a new site and this was a fun idea since we built the original site in WebMatrix.

If you'd like ALL the new bits, no matter what's on your machine currently, go to and use one of the new "get everything" green buttons. It'll use Web Platform Installer and if you have nothing, you'll get the free VS Express. If you have Visual Studio proper, you'll get SP1, the new MVC 3 Tools Update as well as stuff like IIS Express and SQL Compact. Get Everything.

We updated the ASP.NET Website for Mix as well, with three new sections. We've also got three 3 intro videos for each technology, as well as an all new Learning Resource section AND free videos from Pluralsight!

Here's how you make the backend I made in the Keynote. You can watch it here. ScottGu and I were after the IE9/10 section.

You can seek within the Keynote using these links:

If you'd like a MUCH more detailed "Getting Started" tutorial of mine that Rick Anderson just updated to include the new MVC 3 Tools Update, check out the C# version here, and the VB version here.

This blog post just shows you how to do what I did, check out the tutorial for much more detail.

ASP.NET MVC 3 with Tools Update - This Developer's Life Backend Administration

From Visual Studio, click File | New Project and select ASP.NET MVC 3 Application. Name it "Backend."

Add New Project

Click Internet Application and make sure Use HTML 5 is checked.

New ASP.NET MVC 3 Project

Check out your packages.config if you like, or noticed the installed packages in NuGet.

Add Library Package Reference

Right click on Models, select Add Class. Name the file Podcast.cs. Here is your Entity Framework 4.1 Code First model:

namespace Backend.Models
public class Episode
public int Id { get; set; }
public string Title { get; set; }
public DateTime? PublishedAt { get; set; }
public string Summary { get; set; }
public string LeadImage { get; set; }
public string ShortUrl { get; set; }
public virtual ICollection<MusicTrack> MusicTracks { get; set; }

public class MusicTrack
public int Id { get; set; }
public string Name { get; set; }
public string URL { get; set; }

public int EpisodeId { get; set; }
public Episode Episode { get; set; }

Now, make sure you compile. I press Ctrl-Shift-B to do this, but you can also do it from the Build Menu.

Right click on Controllers, select Add Controller. Make an EpisodeController. Pick the Entity Framework template (remember you can make your own, if you like. More on this soon!) and click the Data context class dropdown and Make a PodcastContext. Your dialog will look like this.

Add Controller

Compile. Now do the same thing for MusicTrack. Now, check our your Solution Explorer and all your scaffolded code.

Wow, that's a lot of scaffolded code!

Right click on References and select Add Library Reference. You can also do this from the Tools | Library Package Manager menu.

Click on Online on the left side to access, and in the upper right corner, search for "EntityFramework.SqlServerCompact" to bring down support for SQL Server Compact Edition.

Add Library Package Reference (52)

Now, run your app and visit /Episode. Make an episode or three, then visit /MusicTrack.


Homework for you - Extend the Backend Demo!

  • Add the MvcScaffolding Nuget package and rerun the Add Controller commands. What's different?
  • Add an Editor Template for DateTimes with a jQuery DatePicker
  • Add different attributes like [StringLength] or [Range] to your Code First model. Delete the .SDF file in App_Data and re-run. How can you affect your database?
  • Add some other NuGet packages like IE9ify. What cool features can you add like Jump Lists using Javascript?

WebMatrix - This Developer's Life Frontend Administration

Ok, so now we need a frontend for our podcast site. We got one from They can sell you a template and then bring it down directly into Web Matrix. Since you may not want to buy a template just for this demo, you'll want to come up with some basic template for yourself. WebMatrix comes with a Bakery Template and some others, so perhaps try one of those. Perhaps the Bakery Template after clicking Web Site From Template.

We used a template like this, but like I said, I can't give it to you.

TDL Front

Maybe you can start here? ;)

Fourth Coffee - Home - Windows Internet Explorer (54)

You can right click on App_Data and bring in the SQL Database File (Mine was called TDL.sdf, but yours may vary) from the first step with Add Existing File. Some templates include databases. You can use them if you like, or delete them.

Files in Web Matrix

For the demo, I had two database files. The one I created in the first step, and then another one that I already filled out with all our shows earlier.

Lots of data in the database

If you're using the Bakery Template it's a little different from our template since it's about products and includes a featured product, but it's still a cool template.

I skipped some steps in the keynote to make the demo flow, for example, my images were already in an images folder. For this blog post, I'll copy the images from (or you can grab your family photos or whatever) and put them in /images.

Show Images

Next, I'll change the Default.cshtml for my (now) Bakery Template. I'll updated things in the Razor code like Products to Episode, and making sure I'm using column names from the TDL database, and not the Bakery one.

Page.Title = "Home";

var db = Database.Open("TDL");
var shows = db.Query("SELECT * FROM Episodes").ToList();

<h1>Welcome to This Developer's Life!</h1>

<ul id="products">
@foreach (var s in shows) {
<li class="product">
<div class="productInfo">
<img class="product-image" src="@Href("~/Images/"+ s.LeadImage)" alt="Image of @s.Title" />
<p class="description">@s.Summary</p>

It ends up being not much code. It's not as pretty as the more complex template we used, but you get the idea. You can take templates from anywhere (they don't need to be Razor templates, just HTML!) and then sprinkle in a little Razor code like I did.

I give you, "This Developer's Life - Cheesy Bakery Template Edition":

This Developer's Life Site - Cheesy Bakery Edition

Now if you like, click on Site, then ASP.NET Web Pages Administration (or, just visit /_Admin) and setup your password. I skipped the creating of a password in the keynote and used a site with an existing password we'd setup earlier. Read the instructions carefully.

Bakery6 - Microsoft WebMatrix (57)

The Web Pages Administration site runs local as part of your site, and is how WebMatrix talks to From here you can get helpers like the Facebook helper, Twitter helper, Disqus helper and more. Some of these helpers, like Disqus, require more setup that I showed in the keynote. For example, you have to visit, sign up for an account and get an API key, then tell your site about it before you use the helper. The Facebook and Twitter helpers also include lots of options, for example, the Twitter helper can be vertical or horizontal, and look different ways. Also check out IE9ify, a jQuery plugin and NuGet package that lets you add JumpLists and IE9 stuff to your site.

ASP.NET Web Pages Administration - Package Manager - Windows Internet Explorer (58)

At the end, I clicked Publish and then just imported the settings file from my ISP. WebMatrix then used WebDeploy to send my site and database to a server. That server was internal to the Mix keynote demo network, but Rob Conery and deployed the site the exact same way at 3am Tues morning. The public site at was written by Rob and I in WebMatrix, uses HTML5, jQuery with SQL CE for a database and is deployed with WebDeploy and sports a tidy HTML5 theme Rob wrote, inspired by the one from the demo.

I'll blog later in a separate post how I made the podcast player with HTML5 audio tags, jQuery and IE9 site pinning.

I hope you enjoy the products Dear Reader as much as we enjoyed building them!

Related Links

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

Taking Proper Screenshots in Windows for Blogs or Tutorials

April 7, '11 Comments [54] Posted in Tools
Sponsored By

What? A blog post on how to take a screenshot? Seriously? Sure, this might seem a silly or superfluous blog post, but I can assure you that I see lousy screenshots on blogs, online tutorials and more (including some of my old posts) at least daily. Perhaps it's my "geek eye" but I (and I assume you, Dear Reader) just know when something is wrong with a screenshot. Just like you are the only one who notices when someone is running a 4:3 image on a 16:9 flat screen at a convention and it looks darned unprofessional, the same is true with screenshots.

"A bad screenshot is equivalent to a misspelled world. It makes both you and the word look unprofessional." - Me, just now.

Sometimes the best way to show you how to do something is to first talk about how not to do something.

Don't save Screenshots as JPEGs

JPEG is lossy. Lossy means "throws stuff away." Always save your screenshots as PNG, which is a lossless (throws nothing away) format.

A badly JPEGed image with hard to read text

Don't do uncomfortable, unnecessary or bad resizing

When resizing, only do it if you have to. Always use the highest quality resize algorithm your paint application supports. I use Paint.NET. It's one of the greatest pieces of software out there that should have shipped with Windows. Try to resize things "evenly," like 50% or 25%. If you resize to 73% or or 431 pixels by something, you are throwing data away and your screenshot will look bad.

A badly resized image with blockiness

Try to avoid small resizes, like taking an image and resizing it to 95%. If you are that close, try reframing or resizing the thing you're shooting, rather than doing such a small resize.

Don't customize your environment to the point it's unrecognizable

Think about Framing Your Screenshot as you would a photograph. I don't care about your toolbars. I don't care about your add-ins or your browser bookmarks. Turn EVERYTHING unnecessary off. That means toolbars, toolboxes, windows, add-ins, bookmark bars - anything that would make your screenshot look like your system and not mine. Keep everything stock and standard if you can.

Too many toolboxes open in Visual Studio so I can't see the code

Don't use tiny fonts and fancy colors.

As you can guess by now, these rules apply to screencasts as well. That means 16pt or better, folks. I use Consolas 16pt, minimum. 20 or 24 for Console Windows. Keep the default colors for your IDE. For Command Windows, use either White Text on a Blue Background or Green Text on a Black Background. Both have been proven to be the highest contrast and easiest to see (by me in totally scientific tests.)

Totally unreadable small text on a black background in Visual Studio

Don't show me what's underneath your transparent Aero Title Bar

Notice how you can almost see stuff underneath the transparent title bars of these last few screenshots? That's lame. There's two ways to fix it. One, open up notepad with its white background and put it behind the application you are shooting so the white is what you see behind the transparency.

Notepad open behind Visual Studio

Then, you can crop around it and get a title bar that doesn't look like crap:

A title bar that doesn't have crap behind its transparancy

Two, use a proper screenshot tool like Window Clippings. More on this later, but it's truly a great tool and worth it if you are taking more than a few screenshots a week. It'll save you time and make you look good. Window Clippings does two things right around transparency. First, it'll programmatically and automatically put a background behind your image while its taking the screenshot, and second, it'll make your transparent regions actually transparent when it makes a PNG.

See this square corner? That's not transparent and looks subtly lame. This was taken with the Window Selection option in the Snipping Tool that came with Windows.

A non-transparent corner with extra pixels 

See this one taken with Window Clippings? It's correctly transparent as a PNG and there's even an option to include a nice drop shadow.

A nice shadow with a transparent rounded corner

Don't use Basic or Classic Theme for Screenshots

Again, I don't know your personal preference, but it doesn't matter. Make your screenshots look like the typical computer, not your computer as you refuse to let Classic Theme go. ¡Viva NT4! Um, no.

A screenshot using the lame basic theme for Windows

Don't use Raster Fonts or Disable ClearType

We're going for aesthetics and standardization, here. Consider these two screenshots. The first has ClearType off. Notice the blocky capital A, for example.

Lousy bitmapped text

Next, the same shot with ClearType on.

Nice antialiased text

Don't Over-Annotate or use wacky Callout Effects

Another great screenshot program is SnagIt from TechSmith. I use their Camtasia product for all my screencasts. As great as SnagIt is, it has the powerful ability to create "callouts" easily. Too easily.

Don't use callouts. May God have mercy on your soul for using them.

Don't get me wrong, SnagIt is an awesome tool. But just don't point it at your face. Avoid callouts, and when you do, stay classy.

A classy and subtle callout

Use ALT text

Try to use ALT text for all your screenshots. There's a blind person (or a hundred) reading your blog. Do them a favor and put in some nice descriptive ALT text on your screenshots. I like to leave them personal messages that you never see. It takes only a second, but it lives in your post forever and helps the visually impaired participate.

Don't forget to squish your PNGs

PNG may be a lossless format but you can often still squeeze 5-30% of the size out of them with tools like PNGOut. This is a must-have tool in your path. I add PNGOut as a post-build step when I make tutorials and you can even hook up Window Clippings to run it for you after a screenshot. It is CPU intensive, but it's worth the effort when publishing your content. Go do it now, get all the PNGs from your blog, run PNGGauntlet on them (it'll take a while) and compare the directories. You'll save tens of megs if you're like me, and your readers will reap the benefits every time they visit your site.

So, rolling all this advice up, here's a good screenshot and a bad one.

Bad Example

Here's a common example that completely bad. This screenshot is:

  • Using the Basic Theme
    • It was likely taken on a Virtual Machine that didn't have Aero turned on.
  • Not Transparent
    • The window corners are curved, but there's a corner pixel.
  • Oddly cropped to fit
    • The right side is missing, but just a bit. Either chop a lot, or none. Don't chop a little.
  • Poorly resized
    • Note the trouble resizing the words "Installed Templates"
      Notice the aspect ratio is ever-so-slightly wrong.
  • JPEG'ed
    • Note the lossy artifacts under the selection in the listbox.
  • Poorly Staged
    • Note the highlight in the listbox is gray? That means the window didn't have focus when the screenshot was taken. It makes it hard to see the point of the screenshot.

Bad Screenshot

Good Example

Good Screenshot

Or, given our self-imposed width limitation of 600 pixels, perhaps:

Better Screenshot

I hope this guide helps you, Dear Reader, if you create screenshots as a part of your job.

Please, care about your screenshots as much as you care about your text.

"If a picture is worth a thousand words, a crappy screenshot is a thousand misspelled words." - Me, Just now. Again.


Related Links

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

Hanselminutes Podcast 260 - .NET API design that optimizes for Programmer Joy with Jonathan Carter

April 7, '11 Comments [4] Posted in Learning .NET | Podcast
Sponsored By

Conery, Hanselman and HappinessScott sits down with Jonathan Carter to  brainstorm about optimizing APIs for programmer happiness, rather than programmer productivity.

Download: MP3 Full Show


NOTE: If you want to download our complete archives as a feed - that's all 260 shows, subscribe to the Complete MP3 Feed here.

Also, please do take a moment and review the show on iTunes.

Subscribe: Subscribe to Hanselminutes or Subscribe to my Podcast in iTunes or Zune

Do also remember the complete archives are always up and they have PDF Transcripts, a little known feature that show up a few weeks after each show.

Telerik is our sponsor for this show.

Building quality software is never easy. It requires skills and imagination. We cannot promise to improve your skills, but when it comes to User Interface and developer tools, we can provide the building blocks to take your application a step closer to your imagination. Explore the leading UI suites for ASP.NET AJAX,MVC,Silverlight, Windows Forms and WPF. Enjoy developer tools like .NET Reporting,ORM,Automated Testing Tools, Agile Project Management Tools, and Content Management Solution. And now you can increase your productivity with JustCode, Telerik’s new productivity tool for code analysis and refactoring.

As I've said before this show comes to you with the audio expertise and stewardship of Carl Franklin. The name comes from Travis Illig, but the goal of the show is simple. Avoid wasting the listener's time. (and make the commute less boring)

Enjoy. Who knows what'll happen in the next show?

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.