Scott Hanselman

NuGet Package of the Week #1 - ASP.NET Sprite and Image Optimization

March 7, '11 Comments [22] Posted in ASP.NET | ASP.NET MVC | NuGet | NuGetPOW
Sponsored By

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.

Sprite and Image Optimization Preview 3

First, I noticed that the ASP.NET Sprite and Image Optimization preview has been updated to Preview 3. These is an example of something that Microsoft might ship with a future version of ASP.NET, but that you can use today. It's even easier because it's in NuGet.

Install-Package AspNetSprites-MvcAndRazorHelper

They've structured this nicely. There are three packages, in fact, with the "leaf" packages depending on the Core.

image This is an API for ASP.NET to automatically generating CSS sprites and inline images. It works in ASP.NET WebForms, MVC as well as Web Pages. Nice example if you're writing a library of your own and you want it to work for all three ASP.NET techniques (remember it's all ASP.NET). All the source is up there.

The idea behind sprites is that if you've got a page with dozens or even hundreds of small images, perhaps icons on the page, you'll be paying for all those HTTP requests. Instead, why not retrieve a single image with the little ones oriented in a grid, then let the browser break them up at runtime with CSS as "sprites." However, the actual creation of those original grid-like images are often a hassle.

Not only do you have to make the original images, you'll also need to create a CSS file with the relative positions of the image you want in the source image.

You can also do "inline" images in some new browsers by base-64 encoding small images and putting them inside the img tag on the page itself.

Example of an inline image 

ASP.NET Sprites in WebForms

They include a helpful readme.txt (this is a best practice) in the App_Sprites folder that is created when you install the package. Here's the readme. It's nice because it really tells you everything you need to know AND includes pointers to docs. You'd be surprised how few packages do even this. Remember that your NuGet user is likely either IN Visual Studio or NEAR Visual Studio, and since NuGet exists to prevent us from hunting for stuff, don't make your user hunt for things.

For detailed information on ASP.NET Sprites and the Image Optimization Framework, go to http://aspnet.codeplex.com/releases/view/61896

QUICK START:

1) Add your images to the "App_Sprites" directory.
2) Depending on your application type:

****************************
*** ASP.NET Web Forms 4 ****
****************************



**********************************
*** ASP.NET MVC 3 (ASPX Views) ***
**********************************

<%: Sprite.ImportStylesheet("~/App_Sprites/") %>
<%: Sprite.Image("~/App_Sprites/YOUR_IMAGE.jpg") %>

********************************************************
*** ASP.NET MVC 3 (Razor Views) or ASP.NET Web Pages ***
********************************************************

@Sprite.ImportStylesheet("~/App_Sprites/")
@Sprite.Image("~/App_Sprites/YOUR_IMAGE.jpg")

I fire up Visual Studio and make a new ASP.NET WebForms project. Remember I can use NuGet from the command line, from within VS with a dialog, or from within VS using PowerShell.

I right-click on the References folder in the Solution Explorer, and search for "Sprite" online. I'll install the AspNetSprites-WebFormsControl.

Add Library Package Reference (19) 

Now, I just add some images to the App_Sprites folder. Here's my images in Explorer:

App_Sprites

Next, I just run the application once. Look at the same folder now. Note the sprite0.png? (Of course there are settings you can override.) See how the new sprite file is a merge of all the little images?

App_Sprites (21)

There's also new .CSS files as well with new CSS classes to access each one. Very cool.

.camera-png
{
width:48px;
height:48px;
background-image:url(sprite0.png);
background-position:-0px -0px;
}

However, with WebForms I never have to worry about this stuff. Remember that WebForms is about controls. I can add this control and WebForms will handle the IMG tag and the CSS tag.

ImageUrl="~/App_Sprites/video.png" />

And the image is output like this for maximum compatibility.

Pretty cool.

ASP.NET Sprites in ASP.NET MVC (as a Razor Helper)

Now, if I do the same thing, except install-package AspNetSprites-MvcAndRazorHelper in an ASP.NET MVC project.

For an ASP.NET MVC project, I add the CSS manually in the of my _Layout.cshtml:

@Sprite.ImportStylesheet("~/App_Sprites/")

And then I use the Sprite helper wherever I want see an image:

@Sprite.Image("~/App_Sprites/video.png")

Works exactly the same as the WebForms one, except the usage feels more like MVC. Again, this package is a nice example of how one library can be made available for WebForms, WebPages and MVC.

Feel free to recommend cool NuGet libraries in the comments and I'll add them to what I expect will be a very large queue!

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

Transferring/Moving a VHD from Windows Virtual PC (Windows XP Mode) to another computer

March 6, '11 Comments [4] Posted in Tools
Sponsored By

One of the great things about Windows 7 is "Windows XP Mode" which is basically that you get a copy of Windows XP that runs under Windows Virtual PC. It can run "seamlessly" which means you can run XP apps within the VM under Windows 7 with complete compatibility and it looks like the apps are running under Windows 7 itself. They are in the Start Menu and you don't have a "VM Window" like you usually see.

However, in order to save disk space and allow folks to have a base image and multiple XP images, the default disk setting for XP Mode is "differencing." That means that there's a base Windows XP Mode "base" VHD file in "C:\Program Files\Windows XP Mode\Windows XP Mode base.vhd." This file is the base that your instance of Windows XP is, ahem, based on.

If you want to move your Windows XP Mode Virtual Machine to another box, as I did tonight, you might get an error like:

...one of the parent hard disks is missing...

This means that the VM you moved can't find the base disk.

So the question is, how can you make your Windows XP Mode VHD more portable?

First, shut down your VM. Don't hibernate it, actually shut it down. They really want you to hibernate. To shut down, launch the main virtual machine and click the Ctrl+Alt+Del top level menu item, then select Shut Down.

Shutting down Windows XP Mode

Next, go to the Virtual Machines folder. I do this by typing "virtual" in the search box at the Start Menu. Confirm you are really powered down.

image

Next, right click your VM and select Settings, then click the Hard Disk 1 option on the left.

Windows XP Mode - Windows Virtual PC Settings

See how it has a Virtual hard disk file then a Parent Disk? Now click Modify.

Modify virtual hard disk - Merge

From this dialog, click Merge. We are going to Merge the two disks into one disk so we can move it to another machine.

You can choose to do this in place, or make a new file somewhere, which is what I did.

Modify virtual hard disk

Note that if you change the name of your VHD file, you may need to hook it up again in your VMC file (your Virtual Machine settings) when you move your disk to the other machine. Alternatively, you can open up the .vmc file in notepad and carefully change the name of the VHD it thinks it's pointing two in two places.

Last note, you'll likely be prompted for a Name and Password to log into your Windows XP VM on your new machine. You'll need to remember your password, but chances are your username is XPMUser. That's tricky.

Hope this helps.

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

This Developer's Life 1.1.4 - Obsession

March 4, '11 Comments [1] Posted in Podcast
Sponsored By

14-lead

In this episode we have our first listener-submission: Rob Sullivan talks about his obsessive-ness and how it helps him, and hinders him in his job. Rory Blyth and Scott then talk openly about Rory's compulsion to keep learning - which leads him to, among other things, stop policemen in the street and ask them about take-downs.

Download Here

In this episode we talk to 2 developers who harness their obsessive tendencies to further themselves in their career.

You can download the MP3 here (46 minutes) and visit our site at http://thisdeveloperslife.com.

Please consider subscribing with iTunes, or Zune.

Or if you have a BitTorrent client and would like to help save us bandwidth money, as well as the bragging rights of downloading legal torrents via RSS, get our Torrent Feed at ClearBits.

Also, please do REVIEW our show on iTunes.

The bandwidth and other costs for this week's show were picked up DevExpress and CodeRush!

DX_Slogan_350

Announcing our listener contest...This Developer's Life - Crowdsourced 1

Oh yes. We want to hear your stories. Record your best developer stories and send them to us and if we think they rock, we'll include them in the next episode of This Developer's Life.

What we need from you:

  • Your story. We don't want interviews, we want stories. Tell us about your passion, or something crazy that happened at work while solving some technical problem.
  • Keep your audio clean. Use a decent microphone or at least make sure you don't "overdrive" your microphone by talking to close or two loudly. Don't record while mowing the lawn and don't record in a giant echo chamber.
  • Be passionate. Talk to us like you're talking to a friend.
  • Don't worry about editing or music. Just share. We'll handle the Lady Gaga mashups.
  • Note we may move your audio around or change the order of stuff to make it more listenable or interesting or both.
  • Change the names of companies and people to protect the innocent (or guilty)
  • Know that by giving us your audio you're releasing it the Creative Commons and that we may or may not use it for a future show.

Send us a link to your audio file and what you're talking about and we'll do the rest. See you next time!

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 256 - JavaScript and jQuery: Moving beyond Alert()

March 4, '11 Comments [2] Posted in ASP.NET | Javascript | Podcast
Sponsored By

crockford-cover Scott talks to Elijah Manor and Dave Ward about how one can take their JavaScript knowledge to the next level. What are the major concepts I should study? Which plugins are the must-haves? What's "Modernizr" and how does it, along with the concept of feature detection make my life easier?

Download: MP3 Full Show

NOTE: If you want to download our complete archives as a feed - that's all 256 (Hex 0x100) 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 forASP.NETAJAX,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. Visit www.telerik.com.

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

Hanselminutes Podcast 255 - The Opinionated Cloud - Learning about AppHarbor

March 2, '11 Comments [1] Posted in ASP.NET | Cloud | Podcast
Sponsored By

Cloud Scott sits down with Rune from AppHarbor. AppHarbor has some strong opinions about how the cloud should work and how applications should be deployed. Is there room for another cloud offering? Is the cloud about elasticity or something else? What's a Cloud and what's Platform as a Service. All this and more as Scott gets educated.

Download: MP3 Full Show

NOTE: If you want to download our complete archives as a feed - that's all 255 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.NETAJAX,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. Visit www.telerik.com.

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.