Scott Hanselman's ComputerZen.com

Just about two years ago I joined Microsoft. I'm fortunate to work in a home office with a great team that I now lead. We work for the group at Microsoft that runs MSDN, TechNet, ASP.NET, Silverlight.NET, WindowsClient.NET, basically all the online education stuff. The giant group is called STO (Server & Tools Online) and our little group is "stoninja." That's our internal mailing alias.

We create content for all of the sites above but we're also active members of the community. We listen and drive feedback back into the product group. We're not part of the product evangelism group (DPE - Developer Platform Evangelism), but rather we focus primarily on online content creation. I like to think that we're the team that happens you after you go File|New Project, although we're constantly influencing what happens on both sides.

Fast forward to today and my little team is growing.

Lots of big stuff happening this week. Today Visual Studio 2010 Beta 2 is available to MSDN Subscribers and it'll be available for everyone on Wednesday.

I'm running Beta 2 on all my machines now and really digging it. It's much faster than Beta 1 and I'm doing all my work in it now. It's come a long way and I'm really impressed at the polish.

.NET 4

This is a big deal. This isn't ".NET 3.6" - there are a lot of improvements of .NET 4, and it's not just "pile on a bunch of features so you get overwhelmed." I've been working with and talking to many of the teams involved and even though it's a cheesy thing to say, this is a really customer-focused release.

Shouldn't every release be that way? Sure, and in this case there's a really clear focus on, as I like to say, "making the Legos the right size." This is as much about tightening screws as it is about adding new features.

There's more goodness that I can put in one post, but some personal favorite highlights are:

• Quicker to Install - A smaller Client Profile with a much smaller initial download (down to 0.8 megs from 2.8) for bootstrapping .NET client apps faster than ever)
• Side by Side - .NET 4 is a side-by-side release that doesn't auto-promote, meaning you won't break existing apps and you can have .NET 2.0, 3.5 and 4 apps on the same machine, happily.
  • Side-by-side CLR support for managed add-ins inside of apps like Explorer or Outlook. Again, new and existing apps in the same process, chillin'.
  • For more details on Application Compatibilty, check out the AppCompat Walkthrough for .NET 4 on MSDN.
• Dynamic Language Support - The DLR (Dynamic language runtime) ships built-in with .NET 4 so you can mix-and-match your solutions and pick the best language (or languages) amongst C# and VB.NET as well as F#, IronPython and IronRuby. This includes better support for COM (yes, COM! People do use COM and it's even easier with the new dynamic keyword in C# these days.)
• More Web Standards Support - Better support for WS-* and REST making interop easier. (I love ADO.NET Data Services, but you know that already, Dear Reader. I'm a bit of a RESTafarian, these days.)
• Plugins Galore - Visual Studio 2010 uses MEF and WPF to enable a whole new world of clean managed extensions as well as an Online Gallery (there's an extension for that!)
• Multi-Framework Multi-targeting - You can't really overestimate how useful this is, but a picture is worth a thousand words. You can code all your apps in all your organization's frameworks with the same IDE:
  

Keep an eye on the blogs this week as the various teams talk about their favorite features.

On the ASP.NET 4 side:

• I'll be posting video interviews with the actual ASP.NET 4 developers all week on Hanselminutes on 9 up on MSDN's Channel9 so watch for those.
• Joe and I will also start populating the Learn section of ASP.NET with new ASP.NET 4 videos between now and Christmas as well.
• And of course, @ScottGu is continuing his series of ASP.NET 4 Tutorials, so watch his constantly updated rollup post. He's currently on #8!

Oh, yes, one other thing…

Fresh Look

You may notice a few things in the new Splash Screen above. There's a new Visual Studio logo that goes nicely as well as a new logo for MSDN. You probably heard that we launched a new MSDN this weekend and today we add the new logo and background. This new MSDN is the beginning of a more agile, community focused MSDN and you should expect to see and hear of cool stuff coming from the team, often, in the months to come. Of note will be the new MSDN Lightweight view, soon to be the default view for the library. 

In the coming weeks I'll dig into more details on the these new things and how they work together:

• Visual Studio 2010 and .NET 4
• Windows 7
• Microsoft Developer Network

Enjoy! Also, be sure to check out Soma's blog post and go get Visual Studio 2010 and .NET Framework 4 Beta 2 as soon as you can!

The team I work at Microsoft for is called Server and Tools Online, and one of the things we work on is the Microsoft Developer Network or "MSDN." If you go way, way up, our boss is Soma (Yes, this Soma), but down here in the trenches there's the folks that make content and systems to help you after you "File | New Project."

Our goals this year are to get back to basics and make sure that our online user experience meets these goals in as few clicks as possible.

PREVIEW: Check out the Live Preview of the new VB Dev Center. Other centers will follow.

INTERNATIONAL UPDATE: Our international team members are writing blog posts of their own:

• Germany:  Vorschau auf das neue MSDN Online
• Brazil: Preview do novo visual do MSDN

A few months ago I snuck a few "comps" out of a meeting with the designers on MSDN. A few months before that we talked about the a upcoming "loband" option for MSDN and performance improvements to the MSDN library that are bringing page-load times for the MSDN library to the 1- and 2-second level.

There was a lot of great comments and feedback from you in the comments of both of those posts and I took it all straight to the teams.

There's a bunch of big stuff going on in the next few months. We've got a new Operating System (Windows 7 is launching on Oct 22, in case you've been living in a cave, or a small home office like me) coming, there's also Microsoft's PDC November 17-19, and you know how we like to announce fun stuff at PDC. :)

I've got a bunch of comps (these are not final) from a recent meeting I wanted to share with you about what's new at MSDN to support all this newness and fix some old problems.

New MSDN - Why?

To be clear, this is more than a "visual refresh." Sure, there's a new design and it's pretty, but this is more about UX (User Experience) than it is about swapping out icons. We've got 5 main goals as a team to enable you, Dear Reader:

1. HELP ME - I've got a problem. What's the answer, quickly and accurately.
2. CONNECT ME TO PEOPLE - There's other people like me, connect me to them, and to the product group.
3. GET ME THE DOWNLOAD I NEED - Get out of my way, I just want a download. Bits, Scripts, Utils, Code, etc.
4. CONNECT ME TO THE PRODUCT - What's new with Product X? I've got feedback and I want to be heard.
5. KEEP ME SMART - I'm looking to sharpen the saw.

Our goals are to be transparent and authentic. I think you've seen that on this blog since day 0, and hopefully in the last two years after I joined Microsoft. The web continues to evolve and we want an MSDN that better reflects a focus on community, on fresh content, and on making things easier to find.

What's Coming

We'll be launching an entirely new MSDN very soon and I'll have all the details for you, Dear Reader, here on my blog. You'll be able to see a live pilot of the new design in the VB Dev Center this week. This will be part of an ongoing reinvention that will span the next year. We'll be listening to you and making sure you're getting what you need. For now it's at /vbpreview, and soon you'll see it the new layout at /vbasic and all of MSDN will change.

We're adding guidance for new developers on every Dev Center Home Page. There's also a renewed focus on consistency across the whole network. You'll find Related Content in the right margin throughout the network and primary content top center of every page.

There's a number of new active controls with dynamic community content. More content than ever will be driven by feeds and tagged so the freshest and most relevant content is easy to find.

Learning

Another focus is learning, particularly around educational videos and screencasts. There's a pile of them, but historically it's been hard to find the ones that apply to you, and no way to add comments and questions. This release adds video sharing, comments and ratings. There's also plans for a new video scroller - this is an artist's rendering I found in a design PPT.

Community Activity

More areas of the home page will be active content driven by feeds and bring people with interesting content, comments, code and perspectives to the front. It'll be easy to find what's new and what's popular in Forums, Galleries, Video and Code.

Downloads

Another point of focus for this first upcoming release is downloads. I've been beating the downloads drum since I got here and this release changes puts Downloads right up front. The downloads are better organized and all consistent. The Top downloads and samples are more visible and updated more often, putting them often within two clicks.

Even More To Come

I hope you'll agree when you see the new site that it's got better discoverability, readability, consistency and most importantly, more relevant content. You'll see more fewer, more focused Dev Centers, more task-oriented content, and more community content.

This is all the start of a leaner meaner MSDN and it's just the first "wave." I'll post about some other cool changes that we've got coming down the pipe soon.

Be Heard

A lot of people are working hard to make MSDN fresher, more relevant, faster and easier to navigate. Everyone is actively monitoring the MSDN Feedback Forum so if you've got questions, concerns, feedback, ideas or compliments, that's the spot. You can also post here in the comments and I'll make sure the right people hear what you've got to say!

Our business administrator emailed me just now:

Can you please send me instructions on how team members can share their desktop with you while they are presenting?  I may want to include this in my meeting requests for them.

This is our #1 challenge as remote employees - the 10 to 15 minutes of messing around with technology at the beginning of the meeting so we can really engage. I'm writing this post so I can point people to it when I setup meetings internally at Microsoft.

LiveMeeting is great, but sometimes it feels like a hassle. It's that tiny hassle that can keep you, as the local person, from setting it up, and it's the Remote Employee really suffers. However, if you've got Office Communicator, doing remote collaboration takes literally seconds to setup. Please, love your remote employees.

Here's a brief (Microsoft-centric) How-To that covers your options:

• How to Share Your Desktop to People with Office Communicator 2007 R2
  • And include Video
• How to Share Your Desktop to Remote People who don't have Office Communicator

How to Share Your Desktop to People with Office Communicator 2007 R2

There's a number of ways, so pick the right one for you. When you're just talking to less than 16 people or so (not an unreasonable number and fairly typical) just:

• Double-click on one person's name in Office Communicator to start a chat.
• 
• Drag other people you want into that first chat window.
• Click the Share button.
  
  Note: If you have multiple monitors and you just want to share one, click the down arrow to the right and select the monitor you want to share.

And, to include Video...

If you've got a webcam plugged in, you can click the video icon at any time to add video to the conversation. If you don't have a webcam, but you are in a room with a Microsoft Roundtable, just plugin the Roundtable before you start the chat. Then you'll be able to share video. The Roundtable will take care of showing the current speaker.

How to Share Your Desktop to Remote People who don't have Office Communicator

Sometimes you might want to share your desktop to up to 15 people where some don't have Office Communicator, either because they are external to the company or they're at home, etc. You can always use SharedView to share your desktop.

You install SharedView easily here and it won't mess up your machine. SharedView has an advantage over other sharing systems as it allows each attendee their own mouse pointer with their name over it. This makes it easy for folks to say "I mean this..." while simultaneously pointing.

As the presenter, after running SharedView you:

• Click the large menu ball in the upper-left then "Start a Session." You'll want to log in with a Windows Live ID (Passport) .
  
• You can copy/paste the invitation instructions and email them to your attendees, OR even easier: Just tell your attendees your Windows Live ID and ask them to sign in, then "Join a Session" and enter the presenter/host's Live ID.
• As the presenter, click "Share"...
   
  then scroll all the way to the bottom and select Share Entire Desktop then Press Start.
  

The big gun is always Live Meeting, but it's really not necessary for most day to day meetings when the collaboration tools are built into Office Communicator.

Hope this helps.

Cross-browser testing is a hassle. Most of the time you can follow standards and get a decent looking website working cross browser, but there's always variations. All browsers have their quirks and older IEs have more than their fair share.

As I see it, there's basically three main pillars of cross-browser testing:

Here's what's good and bad about each:

Breadth - Covering all Bases with a Screenshot Service

How does the site look across the big few browsers? What about the little several-dozen? You never know when someone running Iceweasel 2.0 or Kazehakase 0.5 is going to show up and complain.

I've used online tools like BrowserShots to basically run by website through several dozen browsers before and send me screenshots of how they all look. These are services that typically run a farm of virtual machines that are setup a hit your site with a few dozens different versions of browsers, then they give you screenshots.

This is really cool stuff, and very powerful, but it's tedious and takes time. It's not exactly "make change, hit reload."

Still, it's a tool in the toolbox.

Depth - Interacting with Many Browsers or Virtual Machines

You can always install a bunch of browsers, and everyone does this anyway. For IE6, IE7 or different versions of Windows, you can run Virtual Machines.

ASIDE: A lot of people don't know that you can download five different virtual machines for Application Compatibility testing and run them in Virtual PC for free.
This download page contains different VPC images, depending on what you want to test. You can get:
- IE6 on Windows XP SP3
- IE7 on Windows XP SP3
- IE8 on Windows XP SP3
- IE7 on Windows Vista
- IE8 on Windows Vista

Here's IE6 running in Windows XP under a Virtual PC on my Windows 7 installation:

Looks like my header doesn't show up in IE6! That's not good. I wonder why?

Depth - Look and Feel with SuperPreview

Expression Web SuperPreview (and the Free SuperPreview IE - 18megs) is a tool that makes it easy compare designs in multiple browsers side-by-side. You can also compare the site in the browser against a Photoshop comp. The thing that I think makes SuperPreview different from the other techniques and a useful tool for my toolbox is its depth inspection and quick iteration of comparisons.

Above, see how my site looks wrong in IE6? I can fire up SuperPreview and put Firefox 3.5 on the left and IE6 (or 7, or 8) on the right:

I can roll over the element in question and I get details synchronized between the two panes.

Fixing an IE6 Problem

I can see there are some differences in size (note the red numbers in the lower left corner of the IE6 site) and also the kind of obvious fact that my blog's header totally doesn't show up on IE6. It's not visible, but I can see in the DOM that it IS there. Looks like the problem is the CSS background-url, not the element itself.

If I'm really detail oriented, I can even overlay the two browsers 'onion skin' style and see compare element positioning in a unique way.

It seems I'm using a PNG as a background-image in my CSS and this technical is too amazingly 2002 for IE6. While I certainly don't want to encourage IE6 usage, if there's something simple I can do to at least make sure people see my header, I'll do it.

There's a great Open Source (MIT Licensed) JavaScript file called "DD_belatedPNG" that I can use to fix a lot of IE6's PNG image issues. This enables the use of PNGs for things like background-image in CSS. I'll add this hack to my main template.

<!--[if IE 6]>
<script src="http://www.hanselman.com/blog/themes/TheRightStuff2/css/hacks/DD_belatedPNG_0.0.8a.js"></script>
<script>
 /* EXAMPLE */
 DD_belatedPNG.fix('#header');
</script>
<![endif]-->

Now, I'll refresh the SuperPreview in one click. I'll also turn on "Lights Out Highlighting Mode" to better see how this one element looks.

Looks like I nailed it. From a positioning perspective, I'm off by a few pixels, but I've just made my site nicer for my IE6 (*cough* upgrade *cough*) visitors.

The SuperPreview team has said that they recognize the important of supporting other browsers like Chrome and Safari as well as other platforms like OS X. They are planning a cloud service to do Safari on OS X rendering, and I assume it'll look like just another browser to SuperPreview and give you all the same details and information! Take a look at the screenshot on their site. There's a section under the local browsers that says "Remote Browsers." The plural "Browsers" is a good hint to me that they've got some cool plans. Maybe they'll say something in the comments.

(Disclaimer: I don't know the SuperPreview Team and I don't work for them.)

WARNING OBSCURE STUFF ONLY I CARE ABOUT HERE: How does it work?

Well, note the disclaimer above. I'm just a dude with notepad.exe. That said, let's figure this out. If I go to the Help Menu, then Send Feedback, then click Create Attachment, I see this dialog, showing me the location of a zip file:

Anytime there's a ZIP file going somewhere, I'm there to unzip it and find out what's up. What's this? A "View Attachment" button? I love these guys already.

Looking inside the zip shows me a settings.xml that looks like just some serialized settings data, but it also shows a bunch of stuff like this, which makes me wonder if I could get my own plugins in there. (Probably not, but I can dream, right? And also mention that an SDK would be nice...more on that in a few sentences. ;) )

<PropertyBag Key="browserie6" Type="Microsoft.Expression.Web.PageAnalysis.Preview.Actions.PreviewPageActionDescriptor,Microsoft.Expression.Web.PageAnalysis.Preview, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
  <KeyValuePair Key="AssemblyName" Value="Microsoft.Expression.Web.PageAnalysis.Preview.InternetExplorer, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
  <KeyValuePair Key="TypeName" Value="Microsoft.Expression.Web.PageAnalysis.Preview.InternetExplorer.InternetExplorerUriCommand" />
  <KeyValuePair Key="Endpoint" Value="C:\Program Files (x86)\Microsoft Expression\Web 3\pipsone.exe" />
  <KeyValuePair Key="ActivationContext" Value="OutOfProcess" Type="Microsoft.Expression.Web.PageAnalysis.Core.Actions.InvocationModel" />
  <KeyValuePair Key="Id" Value="browserie6" />
  <KeyValuePair Key="FileName" Value="iexplore.exe" />
  <KeyValuePair Key="BrowserName" Value="Internet Explorer" />
  <KeyValuePair Key="BrowserVersion" Value="6.0" Type="System.Version" />
  <KeyValuePair Key="Enabled" Value="True" Type="System.Boolean" />
  <KeyValuePair Key="InternetExplorerUriCommand.HostedModule" Value="hostedie6.dll" />
  <KeyValuePair Key="InternetExplorerUriCommand.InternetExplorerVersion" Value="IE6" />
</PropertyBag>

OK, so they've got a nice plugin model. Note the "ActivationContext" Out of Process...they're controlling browsers, sometimes out of process.

Looks like there's a Microsoft.Expression.Web.PageAnalysis.Sdk file, and some interfaces in there. Cool that there's an SDK that they are using themselves for their analyses.

I notice also that there's a "HostedIE6.dll" which is unmanaged code. Looks like they've got a version of IE6 that's along for the ride. Awesome, that explains that.

There's folders with data for each browser involved in the analysis. Inside each is a file that shows a screenshot of the COMPLETE page as a very tall PNG. See the IE6 one at right.

Each browser "preview run" has a settings file of its own with details about if JavaScript was enabled, etc, but that's not the interesting part. The magic appears to be a serialized version of the browser DOM with a "pixel map" of all the locations of each DOM element.

This is what's giving me that rich exploration UI where I can hover over DOM elements and see things synchronized between four windows, two previews and two markup.

Of course, this isn't supposed to be Human Readable, as it's a serialization format, but here's the general idea:

<DetachedDomNode TagName="div" id="header" X="26" Y="22" Width="971" Height="80" HasLayout="true" Position="relative" style="behavior: none; zoom: 1; position: relative">
  <DetachedDomNode TagName="div" id="syndicateheader" X="860" Y="46" Width="123" Height="32" HasLayout="true">
    <DetachedDomNode TagName="a" class="rssLinkStyle" X="860" Y="46" Width="32" Height="32" HasLayout="false" href="http://feeds.feedburner.com/ScottHanselman">
      <DetachedDomNode TagName="img" class="rssLinkImageStyle" X="860" Y="46" Width="32" Height="32" HasLayout="true" alt="RSS 2.0 via Feed" href="http://www.hanselman.com/blog/images/feed-button-32x32.png" src="http://www.hanselman.com/blog/images/feed-button-32x32.png" />
    </DetachedDomNode>
    <DetachedDomNode TagName="a" X="895" Y="49" Width="88" Height="26" HasLayout="false" href="http://feeds.feedburner.com/ScottHanselman">
      <DetachedDomNode TagName="img" X="895" Y="49" Width="88" Height="26" HasLayout="true" href="http://feeds.feedburner.com/~fc/ScottHanselman?bg=FF6600&amp;fg=FFFFFF&amp;anim=1" src="http://feeds.feedburner.com/~fc/ScottHanselman?bg=FF6600&amp;fg=FFFFFF&amp;anim=1" style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" />
    </DetachedDomNode>
  </DetachedDomNode>
  <DetachedDomNode TagName="h1" X="40" Y="36" Width="943" Height="32" HasLayout="false">
    <DetachedDomNode TagName="a" X="40" Y="36" Width="533" Height="32" HasLayout="false" href="http://www.hanselman.com/blog/" />
  </DetachedDomNode>
  <DetachedDomNode TagName="div" class="description" X="40" Y="68" Width="943" Height="20" HasLayout="false" />
</DetachedDomNode>

I love this stuff. Very clever. I look forward to see the next steps from the SuperPreview team.

Where do I get it?

There are two versions of SuperPreview right now. First there's the full version you get with Expression Web (which includes Web, SuperPreview, Design 4 and Encoder 3), then there's the Free Internet Explorer only version, it's 18 megs and you can download it here.

Expression Web SuperPreview can render in IE6, IE7 and IE8 and it won't mess up your computer.

Related Links

• Virtual PC Tips and Hardware Assisted Virtualization
• Windows 7 - Seamless Apps in Windows Virtual PC (Virtual XP) and Application Compatibility
• Free: Expression Web SuperPreview "IE Version"