Scott Hanselman

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"

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.

About   Newsletter

Hosting By

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.

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.

About   Newsletter

Hosting By

As I've said before, I'm not handy, but I'm trying. I want to also point out that I know exactly ZERO about gardening. All that said, here's what I did this year.

April 10th

This April my wife said it was time for us to have a garden:

One day, last week, it was sunny in Oregon. I looked at the strange yellow ball in the sky and grunted and then I went and bought lumber. I figured this is what people do when it's nice out. I've talked about a garden in the yard for years. This time, I made one.

I got NINE 2x12's, and THREE 4x4's. The first thing I learned was that 4x4s are in fact not four inches square. Turns out the whole inches thing is just a big lie in the wood world. This was news, but now I feel informed. :)

I ordered the dirt/compost, almost broke myself unloading two yards (not sure why it's called yards, but it was a trailer-load and a lot) and last night we planted our vegetables.

I cut the 4x4s into four small two foot posts. I made 1 cut each on 3 eight-foot 2x12s. At this point I had:

• 3 - eight-foot 2x12s
• 6 - four-foot 2x12s

I used wood screws and put them together like this. Make sure you use untreated lumber or "agriculturally treated" lumber. The idea being that you don't want any chemical leaching into the dirt from the wood. We also got weed cloth and covered the ground before I put dirt in the raised beds. This keeps the weeds from coming up from underneath and eating all veggies.

Then I dug 18" holes underneath each of the corners with posts, then flipped the frames over:

I ordered one yard of dirt with compost from a local dirt-person (did I mention I wasn't a farmer? He may have been a Jawa, can't be sure...) and spread it out with a rake.

Next, and this is important, in my opinion, I took some strong yellow nylon string and some nails and separated each bed into 36 one-foot square squares. We planted some seeds but we also found some "organic starters" that were basically little seedlings that had survived the hard part of childhood.

April 25th

Here's two weeks later...it was a little cold at night, sometimes hitting under 36F, so we used weed cloth to actually cover all the beds at night for a about four nights, just to keep them warm. We took the covers off in the morning.

June 25th

Here's two months later. Things are coming along nicely. We were watering for 5 minutes each morning at around 4am, but I was told that was a little too much so we lowered it to 10 minutes three days a week. We didn't use any chemicals.

August 15th

Here's just a few weeks later...things are starting to go crazy. At this point I've realized I've made a few mistakes. The most significant mistake I've made was that I didn't give my tomatoes anything to hold on to. If I did it again, I'd setup little tomato scaffolding and put the tomatoes all against one side of the bed. Interestingly enough, the "All New Square Food Gardening" book warned me of this.

Sept 21th

Here's just a few hours ago at lunch. I've thinned out some of the Zucchini. Here's another thing I learned during this process was this: Only plant stuff you want to eat. I have a metric-ton of Zucchini and one can only eat so much Zucchini bread.

Here's last night's haul. We just went through the garden and picked stuff that looked ready to go.

My conclusion is, gardening is subtle but it's not hard. The amount of effort put in vs. the amount of food you get is minimal. You should try it if you've got even four feet square you can get a non-trivial amount of food.

Related Links

• Paint Fence, Cut Wood, Pull Weed, Plant Tree - Finding Geek Balance Outside My Comfort Zone
• Sharpen the Saw for Developers
• Building your own Arcade Cabinet for Geeks - Part 7 - Success and Conclusion

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.

About   Newsletter

Hosting By

I've got many many gigs of 640x480 video of the kids and family taken on my Flip Ultra and then HiDef video taken with a Creative Vado HD, my current favorite pocket video camera. There's also a bunch of random videos taken with whatever video-capable digital camera I might have had with me at the moment.

These are fantastic video cameras (especially the Vado) but unfortunately the output they produce aren't easily streamed to any Game Console like a PS3 or Xbox360.

There's a glorious open-source multi-platform video transcoder out there called HandBrake. There's also the more sophisticated Expression Encoder. I usually use these applications (both can be called from the command-line) when I need to encode videos.

I figured I'd just drag the whole folder over and magically these apps would happily encode these hundreds of files and all subdirectories. Both apps are fantastic for doing one file at a time, but when you want to do a thousand, things break down. I googled with Bing for a while then decided that the batch files and MacGyver solutions I was finding were silly. Why not make my own ridiculous solution that at least worked for me?

Even better, why not do it as a one line PowerShell script and see if it's useful to you, Dear Reader? Even better, perhaps you'll re-write it in the comments and one day it won't suck as deeply as it does now.

Regardless, this script is currently, happily chewing away at all my videos and even better, these versions are streamable to my Xbox360 from my Windows Home Server. Woot. The Wife is happy.

Here it is:

gci . *.avi -R | foreach-object { $newfile = $_.Path + $_.DirectoryName + "\" + $_.BaseName + "-convert" + $_.Extension; &"C:\Program Files (x86)\HandBrake\HandBrakeCLI.exe" -i "$_.FullName" -o "$newfile" --preset "Xbox 360" }

Eek! But what price my immortal soul?

You need PowerShell for this, if you don't already have it. If you have Windows 7, it's already installed!

This poorly written script takes every *.avi file in the current (.) folder, and all folders underneath it (-R), and for each of this files, creates a new filename with the word "-convert" inside. It then calls the HandBrake command line (yours may be in "C:\Program Files" so you might need to change that. It uses the Xbox360 preset.

After this runs, you'll end up with a whole pile of foo-convert.avi files that should/will stream from your machine to your Xbox360 if you are using the free Windows Media Sharing Services. You can also change that profile and convert all your phone for your phone, or whatever you like.

Here's a snapshot of a classic baby video shown on the big screen. Don't you want to come over for dinner now? You can watch slideshows of all our still videos and now hours of family movies. Woot! Works For Me.

PowerShell experts? I'm quite rusty, and I was just interested in the "Getterdone" version. How can we make it better? How about making it so it only updates files that haven't already been encoded?

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.

About   Newsletter

Hosting By

My one-hundred-and-seventy-ninth podcast is up. In this unusual episode of Hanselminutes, organized late at night over Twitter, and recorded as a community conference call, Scott moderates a discussion on open source and the new CodePlex Foundation.

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?

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.

About   Newsletter

Hosting By