PeteL's Blog : Internet Explorer

Testing Multiple IE Versions, VPC’s and Super Preview

PeteL — Mon, 20 Jul 2009 21:40:42 GMT

It’s been almost 2 years now since we first shipped the Internet Explorer testing VPC’s so that you could test IE6 and at the time IE7 on the same machine. We understand the need for people to test IE6, IE7 and IE8 on the same machine, and remain committed to shipping the VPC’s!

The VPC’s will remain an important component of testing your sites, because they give you a real, and accurate way of seeing how your site interacts with not just rendering, but JavaScript, and other components in the browser.

But there’s a new option that will work fantastically for testing layout and rendering of pages, Expression Web SuperPreview. SuperPreview allows you to compare multiple rendering engines side by side, or even super-impose one over the other. For example, you could see what a page looks like in IE6 under the same page in IE7. Does everything line up, are the images in the right place, are the right fonts used. SuperPreview for Internet Explorer is free and can be downloaded on the Expression Web website.

The limitation of SuperPreview For Internet Explorer is that it only supports the different rendering engines of IE. Now that’s great, but we all know that IE is not the only browser on the internet – wouldn’t it be great if you could do IE8 overlaid on Firefox 3.5? But you can! The full version of SuperPreview that comes with Expression Web, supports all of the IE rendering engines, and also supports Firefox! The full version of SuperPreview comes with Expression Web, which will be available later this summer – keep an eye on on the Expression website for when it’s released.

The big difference between SuperPreview and a lot of the other tools you can use online is that SuperPreview is either free (with the only IE limitation), or you need to purchase it as part of Expression Web; but once you’ve purchased it, it’s yours, it’s not a service you have to pay for every month, or per use. And most of those online services don’t give you the ability to interact with the DOM, do overlays, and a lot of the other cool features that SuperPreview has.

Soma has a really great blog post about Expression Web 3, and goes into some cool detail about SuperPreview.

Enjoy!
PEte

PS: I’m working on updating the next set of VPC’s. We’re trying something new this year, so hopefully you’ll see them sooner and with more regularity.

TechEd09 - Top 10 Mistakes Made By Web Developers

PeteL — Mon, 18 May 2009 23:59:00 GMT

I consider myself a developer more than a designer. In fact, I’m pretty bad at web design. I know what looks nice, and I know what doesn’t work well, but I’m not so good at creating kick butt designs. So, at TechEd last year, I presented “Top 10 Mistakes Made By Web Developers” and it went over extremely well, and I was asked to do it again this year. I did it twice at TechEd EMEA in Barcelona, and was asked to do it twice this year as we filled the room the first time!

Since it was an Interactive session, it’s not recorded, nor are the slides put online but I offered to share some of the sites I used both as good sites and bad sites and also share the slides!

I’ll be posting the demo code from WUX310 later this week!

Thanks!

Setting X-UA-Compatible with ASP.NET Pages

PeteL — Wed, 15 Apr 2009 18:47:00 GMT

I got an email today asking about the best way to go about adding the X-UA-Compatible tags on ASP.NET pages where you’ve got a master page, and may want to over ride the X-UA-Compatible tag in some content pages, but not others.

After playing around with it in Visual Studio for a few minutes, I pulled together the following scenarios:

Access To The Server

The optimal way to do this, if you have server level access, is to add the IE=EmulateIE7 as an HTTP Response Header from the server. Then, any pages served from that server will be rendered in IE7 mode. If Internet Explorer finds the X-UA-Compatible tag in both the HTTP Response Header, and as a META tag, the META tag will win out. Thus, if you've added the IE=EmulateIE7 to the server, you can over ride it by using the following code snippet:

protected void Page_Load(object sender, EventArgs e)
{
     HtmlMeta xuac = new HtmlMeta();
     xuac.HttpEquiv = "X-UA-Compatible";
     xuac.Content = "IE=EmulateIE8";
     Header.Controls.AddAt(0, xuac);
}

One quick note about the Page_Load method, you'll note I use the Header.Controls.AddAt(0, xuac) method. The X-UA-Compatible tag needs to occur BEFORE any code on the page is run, if it doesn't IE will ignore the X-UA-Compatible tag; so it's best to makes sure this is the first tag on the page.

No Server Access

If you don't have access to the server, and you want to put the X-UA-Compatible tag in the ASP.NET MASTER page, you could do something like this:

In the master page, I'd create a Content Place Holder:

<asp:ContentPlaceHolder ID="cphMeta" runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
</asp:ContentPlaceHolder>

Then, in the individual pages, where you want to override, and go to IE8 standards, you'd insert

<asp:Content ID="Content1" ContentPlaceHolderID="cphMeta" runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
</asp:Content>

IE For Developers at Web 2.0 Expo

PeteL — Tue, 23 Sep 2008 21:21:00 GMT

Here's the slide deck from my session at Web 2.0 Expo last week. I cut out a few things in order to get it to fit in the 50 minute slot they allotted me, so it's kind of short, if you're looking for full details, check out the deck from Fronteers as it has a bit more detail on things.

I did add a bit about search providers to this deck, so there is a little new stuff there.

It was great to be in NYC for the week, and I met a lot of great people. It was exciting to see all the people who want to see IE8 and hear their excitement about standards and the new features! I can't wait to deliver!

IE VPC's - Which Ones Next?

PeteL — Tue, 05 Feb 2008 02:58:00 GMT

Apologies for going dark the last little while, I'm going to do my best to change that again. Lots of stuff going on here that I'm really excited about, but before I get into that, I want to do an unscientific survey.

We currently offer developers and designers the following VPC images:

XP + SP2 with IE6
XP + SP2 with IE7

We're looking at the next batch now, and I'm curious, if we were to add one more, which of the following would you prefer?

Vista with IE7
Vista + SP1 with IE7

Also, if you're a Mac user, and want to see either VPC images compressed with ZIP, or Parallels users, a comment would be appreciated. No promises on these, I just want to understand what is more important to you.

Thanks!
PEte

Web Tools Or Tools For Web People

PeteL — Wed, 21 Nov 2007 01:22:16 GMT

A couple of days ago, I got an email from the guys at DebugBar letting me know that they had just released their Beta1 for Debug Bar 5.0. They've got a pretty good tool bar for doing web design and web development in IE. Their DebugBar adds features like a DOM Inspector, an HTTP Inspector, a JavaScript Console and Inspector, an HTML Validator among other things. It's free for personal use, and the commercial license is easy to obtain.

There are a couple of other tools worth pointing out as well

Fiddler2 a web debugging proxy written by one of the PM's on the IE team
IE Developer Tool Bar the Microsoft IE Developer Toolbar. There's lots of info on it here
IE6 and IE7 Virtual PC images
Visual Web Developer Express 2008 has great JavaScript debugging features
AjaxView a great tool from MS Research for remotely monitoring web2.0 applications for doing perf work
Nikhil's Web Development Helper is an add-on that helps AJAX and ASP.NET developers see what is going on with their code

Hope this helps!

PEte

IE7 Installation Update

PeteL — Thu, 04 Oct 2007 19:40:46 GMT

It's crazy to me that I've been in this new role for just over a year now, in fact, it's just about 13 months. In that time, I've seen IE7 ship, taken on new products like Expression Web and Visual Web Developer, met so many fantastic developers and designers and have had the awesome opportunity to travel all over the place for work.

Today, we updated the installation experience to make IE7 available to as many Windows users as possible. As of today, IE7 will no longer require Windows Genuine Advantage validation, and will be available to all Windows XP users. If you're not already running IE7, you can get it from the Internet Explorer home page on Microsoft.com. We've made a few other small tweaks to the UI, including enabling the menu bar by default, and created a new MSI installer that simplifies deployment for IT administrators in the enterprise environment.

But what changes did we make for developers? In short, none. The IE7 Installation and Availability Update is all about changing the packaging and setup. The binaries didn't change, so pages will render and behave exactly as they did with the version of IE7 many people already have today. We decided that rather than releasing a new build with a few small fixes now, we would put our major efforts into the next version of Internet Explorer. Keeping the browser text matrix small is important to most of the developers we talk to. This means that you don't need to retest your website if you've already tested it with IE7.

There is a KB article on the changes that we made available at http://support.microsoft.com/kb/940767

I'm excited about what Internet Explorer has in store for the future, we're busy working on the next version of Internet Explorer; and I am looking forward to sharing it with you!

Free Windows Based Hosting

PeteL — Tue, 18 Sep 2007 02:48:00 GMT

Whew, I'm back from my 17 day cruise in the Mediterranian and while it's good to be back, I sure missed a lot! I'm still trying to get things sorted, but in the mean time I figured I'd share this little juicy bit with you.

Verio is offering free Windows based hosting for anyone who wants it! They don't require a credit card, and the offer is good through January 2010, so you get a good couple of years out of this. The offer is not available online (huh?), so you have to call and deal with a human. And since it's a 1-800 number, that'll make it a bit harder for those outside the USA.

In any event, if you want to take advantage of it, call Verio at 1.800.932.7483! And feel free to pass along

VWD Beta2, Web Developer Tools, IE VPC

PeteL — Fri, 27 Jul 2007 02:34:42 GMT

So as it turns out, it's been a while since I last posted. Things have been a little nutty around here. We just finished our fiscal year, and have started planning for our next fiscal year. It's been really exciting, lots of cool stuff happening around the next version of IE, planning for Expression Web 2, and getting ready for the launch of Visual Web Developer.

Visual Web Developer Beta 2

In fact, Visual Studio 2008 Beta 2, including Visual Web Developer Express Beta 2 is now available! I'm really excited that they're now available as they've come a long way since Beta 1.

If I had to name my top three fav features of VWD 2008, I guess I would say that they are:

JavaScript enhancements, including intellisense, and debugging
CSS and HTML enhancements
Data Access Improvements with LINQ

I'm really excited to see these guys get to Beta2. This is the team that I was on before I moved to my current role, and I've got a special place in my heart for them. They've done some awesome work here, and I'd recommend checking out VWD or VS Pro.

Web Developer Tools

At TechEd this year, John Hrvatin presented a chalk talk about developer tools for Internet Explorer. It was fantastically well attended, the room was overflowing! We're looking at ways we can rebroadcast the session online to share with all involved. But he did post a blog post a couple of weeks after TechEd with a summary of all the tools. It's certainly worth checking out.

I think my top three tools are:

IE Developer Toolbar
Fiddler
Visual Web Developer 2008 Express (okay, so it's not a add-on, but it works great with IE or any other web browser for web development)

IE VPCs

I've had a few emails the last week or two asking if we're going to update the IE VPCs that are available, as the time-bomb expiry is approaching. I've already started working on them, and should have them online in the next couple of weeks. I'm aiming to get them up by the 10th of August.

This round, instead of building them myself, I'm working with someone else to get them built, so it's a bit of a different process. I've given them all the instructions that I have, and once I get the images from them, I'll do a few tests on them to make sure everything works correctly, and then roll them out.

We'll release an IE6 and an IE7 VPC image again this time both based on Windows XP SP2 + the latest patches.

ReMIX: Presentations in PDF & Source for VS2008 Demo

PeteL — Thu, 28 Jun 2007 02:02:00 GMT

Yep, the internet is on! I think most of the comments I got yesterday all revolved around the fact that I posted all my presentations in PPTX format. I work for Microsoft, and well, I use PowerPoint to create my presentations. I figured most people, even if they didn't have PowerPoint on their machines would at least have the viewer so they could see the slides, but it sounds like quite a few people would rather have a PDF or some other format. So, here you go!

TechEd: Top 5 Web Blunders
ReMIX: Building Your Own Video Site
ReMIX: Implementing Rich UI
ReMIX: A Tour Around VS2008
ReMIX: Search Engine Optimization for Rich Media

Note that these are stored on my personal website, so I can't guarantee how long they'll last as they're not on an official Microsoft server.

I've also included with this post the source to the VS2008 demo that I did. I had to swap the pictures out and replace them with corporate clip art, but the rest of the content is the same. I included the source for what I started with, and the source that I finished with so that you can see where I started, and where I finished. If you want to follow along, you can watch the original demo at the MIX site

ReMIX: Implementing Rich UI For Web Applications

PeteL — Mon, 25 Jun 2007 23:51:00 GMT

In Amsterdam at ReMIX, I presented "Implementing Rich UI for Web Applications" where I showed how to deliver richly interactive web experiences with animation, video and more using Silverlight and Expression.

It was based on a session from MIX07 by Joe Stegman titled "Building Rich Web Experiences using Silverlight and JavaScript for Developers"

MIX07 Recap (It's Over)

PeteL — Sat, 05 May 2007 00:24:51 GMT

Wow, just wow, that's all I really need to say. MIX07 was insane, an absolute great time, and some fantastic new stuff coming out from Microsoft for the web. So what were the highlights, for me it came down to three things, first the announcements around Silverlight, second was all the great sharing we got to do about IE, and third, was meeting some fantastic people.

I didn't really get a chance to blog while I was at MIX this year, which I wish I had, but we were all so busy, attending sessions, hanging out, hearing what you had to say, eating drinking and being merry.

IE

As Chris mentioned on the IE Blog, we didn't have anything to announce this year at MIX, we were there to listen, and provide some information. Chris's IE session was standing room only, and it went over well. He talked about some of the great features of IE7, but then moved into the things that we've learned about shipping IE, and what we need to deal with with future versions of IE.

The point Chris brought up as one of the hardest things to balance is application compatibility. Almost every time we change IE, the rendering engine or the DOM we cause an application to break. So how do we balance existing applications vs handling standards better? Chris brought up the idea that there may need to be some kind of new switch that makes IE behave in a specific way. If it's not there, you get one thing, if it is, you get something else.

Silverlight

Silverlight is awesome, to put it mildly. Imagine building super sweet, rich web applications using technology you already knew, like maybe C#. That's the whole idea behind Silverlight. It's a cross-browser(!), cross-platform(!) plug in for delivering the next generation of media experience and rich interactive applications. The beta that is out today doesn't have support for the C# yet, but there is an alpha out that does. The demo's that they showed just awed me.

The best place to check out is http://www.Silverlight.net. There are plenty of demos, samples and other stuff there that just kicks butt. The fact that you can get high def video streaming easily, is amazing. One of the keynote partners was Netflix, who showed their streaming video service in Silverlight. The player they use today is great, it works, but why install that when the only application that is going to use it is their player? I'd love the idea of multi-use applications, not something that is only used for one purpose. And because it's a dot net application, they were able to add a whole bunch of super cool features, like video sharing, so you can synchronize watching movies with your friends anywhere in the world.

Meeting Great Folks

One of the things I love most about conferences is getting the opportunity to meet developers and designers. The guys from Microsoft Canada planned a small party at Tao on Monday night, and a whole bunch of us (21 or so) ended up at Postrio for dinner. It was a fun dinner, and a good way to hear about the stuff they were working on. My friend Adam passed his camera around the table and there are a bunch of his photos are on Flickr

Interesting Links from MIX07

If you didn't make it to MIX, there are other ways you can participate! You can watch the sessions online, or if you're outside North America, there are going to be several ReMix events around the world coming up. I'll be at a few of them in June, so keep an eye here for more info!

Favorite Web Development And Design References

PeteL — Tue, 24 Apr 2007 00:51:28 GMT

While at lunch today, we got on to the conversation of web design and web development resources. I have sitting on my desk at all times, well, unless I'm using them at home:

I've got a few other books that I keep handy, though I'm noticeably missing an HTML book, and a copy of the W3C CSS 2.1 spec.

I've got a few websites that I like to keep an eye on for resources, for example, color charts, HTML escape sequences, and such.

What about you, what are your favorite sites/books? What's sitting on your desk?

One Way to Level the Layout Playing Field

PeteL — Thu, 12 Apr 2007 22:02:13 GMT

One of my pet peeves about CSS and HTML standards is sometimes, they aren't overly explicit, and browser vendors pick arbitrary values for things like line height, or margin or padding and the like. Eric Meyer has talked about a reset.css stylesheet that would effectively eliminate those differences and override the browsers value with the ones that you know and you specify.

I'm excited to see that he posted a version of it (though reading the comments, it sounds like there will be a few revisions coming) on his blog today. I'd highly recommend checking it out. He based it on the one from the guys at Yahoo! UI, added a few things and tweaked a few others. It's certainly one way to help eliminate those frustrating hair pulling "why isn't this working" kinds of questions!

IE Public Bug Database - Connect

PeteL — Tue, 10 Apr 2007 07:10:27 GMT

I've been following the comments over on the IE blog about Molly's post, particularly the comments of Chris Beall, thacker and steve_web, and I figured I'd post a bit of a follow up to what they were saying and ask for feedback from the community.

In the IE7 timeframe, with the connect database open, we took in close to 10,000 bugs. I don't remember the exact number, but it was closer to 10,000 than 5,000. Yes, you read that right. The problem is that realistically, the number of real customer bugs out of that 10,000 submitted was tiny. I'm talking fractionally tiny.

So what makes a bad bug. We got bugs that basically said "IE sucks". That was it. No more detail than that. Every bug like that, takes time for someone to look at, triage, resolve, close, and so forth. It's not a short process. For each bug that we outright close, it's probably about 3 minutes work.

Then there are the bugs that say something like "x does not work." Great, so the bug gets handed off to a developer or a tester and asked to see if they can repro the problem. They'll likely spend 10-15 minutes on it. If they can get a good repro back to triage it goes with comments. If they can't, it still goes back to triage, where someone will end up closing it.

Then there are the diamonds. The great bug reports. Someone who includes a HTML and CSS snippet, an screen shot from IE and a screen shot from another browser. In cases like these, triage looks at the bug, makes a decision on how serious the problem is, how many users it will affect to fix it, what the implications are to fix it, and then either assign it to a developer, or reject it.

But wait, there is still another category, and this one is the most trouble some. Duplicate bugs. Say Chris Beall files a bug, and then thacker files another bug that but because of the way Chris filed his bug, and thacker filed his bug, don't find each other. Well, now, we've got two bugs filed for the same issue. Now triage looks at those two bugs, and tries to figure out if they're the same. Most likely, they'll assign them to a tester or developer to see if they are or not.

So what is the solution for today and the next version of IE? There are people on the IE team who are very much opposed to opening connect again. Primarily because we can't handle the volume of feedback that you have to give. Outside of Windows, I'd be willing to guess we've got the largest user base of ANY application. I think to not reopen it is not the best decision, but I completely understand the cost involved in reopening it.

I'm about to present a proposal to the IE management team (shh, don't tell them, I haven't told them yet ;)). Instead of opening Connect to every single web developer and web designer in the world, we open it to a select group of people. Those who have proven themselves to file good bugs and understand the problems that we've faced in the past. They need to be completely connected to the web world, and know and understand that the bugs we're looking at can't just be "IE SUCKZ!!!!111OMGBBQ!!!!111!!!1!" (and yes, we did get a bug similar to that). We need to find a way to make them accessible to you, so that you can tell them about your bugs, and they can look at it.

And finally, and I think more importantly, we need to find a way to make our bug tracking system more transparent to you. Let you know if we know about a particular bug, and if we're going to fix it in the next version, if we're punting it, or what not. I don't know today how we do this, but this is the thing that I'm trying to find the answer to today.

This post turned into one MUCH longer than I was expecting. Hopefully I'm coherent enough to have made some things clear and explained the difficulties faced by the IE team, and why the Connect database isn't open today. We need to find a good solution that works for all of us soon, and I'm working on it.