Scott Hanselman's ComputerZen.com

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!

My one-hundred-and-eighty-first podcast is up. Scott chats with Mono Product Manager Joseph Hill and Monospace conference organizer and continuous learner Scott Bellware about the state of Mono. Is Mono competition or diversity? How hard are cross platform apps? Can you really write apps for your iPhone in C#? Where can you learn more about Mono?

• Mono Tools for Visual Studio
• MonoSpace Conference

I thought that a discussion around a new Open Source Foundation should be produced as an "Open Source Conference Call." We had nearly 100 people call in and dozens had their voices heard. If you like this format, let me know! Also, follow me on Twitter as that's where these kinds of things are organized!

Subscribe:

Download: MP3 Full Show

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.

Check out their UI Suite of controls for ASP.NET. It's very hardcore stuff. One of the things I appreciate about Telerik is their commitment to completeness. For example, they have a page about their Right-to-Left support while some vendors have zero support, or don't bother testing. They also are committed to XHTML compliance and publish their roadmap. It's nice when your controls vendor is very transparent.

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?

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"

You, Dear Reader, very likely don't need this information. I assume you're probably not a beginner. BUT, you likely KNOW a beginner. Share this information with them!

A bunch of people on Twitter discovered the MSDN Beginner Developer Center today. I tweeted it, figured it was a throw-away tweet and it was "re-tweeted" several dozen times. Apparently there's a hunger for Beginner content out there! Who knew? ;)

It's at http://www.msdn.com/beginner and here's some of the cool stuff. Tell your 12 year old and your great-aunt, Dear Reader. There may be a programmer inside one of them.

There's several tracks to go down, first the obvious Web Track and Windows Track, but also Aspiring Pro and Kid's Corner.

Web Track

The Beginner Web Developer center has three tiers, so you can start at various levels of "beginner." You can even start at the VERY beginning with no understanding of how the web works and go from there. The "Introduction to the Web" Video is very good! I'm going to send it to my Mom.

As you move through the three tiers you move up to VB and C# then start building a real application. Along the way you'll learn HTML, CSS, JavaScript and ASP.NET. There's also downloadable lessons, podcasts, videos and code.

Windows Track

This section has another nice video (in the absolute beginner part) in the style of "How Stuff Works" with an explanation of what an OS is, how a computer runs instructions, etc. It's a fun video. This section has lessons like "Life Before Mice" and "Problem Solving in Life and Technology."

Aspiring Professional

Taking it from amateur to "professional" is the real trick. I personally like to say that we're ALL amateurs. I mean, if you can get a gold medal in the Olympics as an amateur, then who am I to call myself a professional?

Regardless, there's more than just programming skills involved, there's also working in groups, as a team, in an office and how the software lifecycle works. There's also sections on moving to ASP.NET from PHP and moving to ASP.NET from Classic ASP.

Kids Corner

Do kids always get a korner because kids love alliteration? I assume so. They also get MS Comic Sans and other bright graphics to keep their tiny attention spans. Seriously, though, the videos are pretty cool and worth watching because it's fun to watch an 8 year old explain Object Oriented Programming.

• Video: What is the Internet - presented by kids
• Video: What are Objects and how does OOP work - presented by kids

As an aside, there's some really cool changes happening at MSDN...I've seen some artist comps and snuck stuff out before and used your feedback. I'm hoping to get a hold of some new screenshots and some insider stuff on the new low-bandwidth (and other) views for MSDN that will be launching soon. MSDN Libraries are getting faster, as fast as <2 second page load times worldwide is what I hear, so I'll try to dig up details on that also. More to come, soon.