For the past few months, I’ve been looking at how to improve the web development experience in Visual Studio. This summer I released the Web Standards Update which brings HTML5 and CSS3 to Visual Studio, and a few weeks back Web Essentials was published. This week I’ve been working on a proof of concept that eliminates the need for typing curly braces, colons and semi-colons when working with CSS. In non-English keyboard layouts, these characters can be rather difficult to type, because you need to use SHIFT and ALT to get to them. Here is a quick demonstration of how to write CSS without the need for these characters. I’ve been using this for about a day now on an English keyboard and I am so much more productive writing CSS. What I’m really interested in though, is whether or not YOU are when using this extension. Also, is it annoying, in your way, a waste of time, or the best thing EVAR!! Please try it out and let me know. I’d appreciate any feedback on this. Thank you! Try it today! Download the SpeedTyping extension for Visual Studio 2010 and let me know what you think on Twitter Who knows, we might add this to the next version of Visual Studio…

We just released the first Web Standards Update for Microsoft Visual Studio 2010 SP1. Despite its name, the update also works for Visual Web Developer Express 2010 SP1. You can read more on our team blog. In this first release of the update, we have focused on bringing the HTML5 support up-to-date, adding CSS 3 support and bring more new API’s to the JavaScript intellisense.  The plan is to make a release on a regular schedule to keep Visual Studio updated with the changes made by W3C. HTML5 Last year, we managed to sneak in HTML5 support when working on SP1 for Visual Studio 2010. Normally, a service pack is about bug fixes but we found that HTML5 was so important that the lack of it should be considered a bug. Unfortunately we where not able to do the same with CSS3 or the JavaScript API’s, but it was a good start. Due to a combination of the instability of the HTML5 specifications at the time and the resources we had to add HTML5 support for SP1, we ended up with very descent support for both intellisense and validation. Now the HTML5 specifications are more stabile and some additions and modifications have been made by the W3C since then. It’s therefore a good time to update the HTML5 and XHTML5 schema files that Visual Studio uses under the hood to provide intellisense and validation. Among the changes are: Added missing elements like u, s and bdi The type attribute is no longer required on script elements The source element is now supported inside video and audio elements Support for microdata including intellisense for schema.org vocabularies Full WAI-ARIA intellisense CSS3 For CSS3 we were not as lucky as we were with getting HTML5 into SP1. This was largely due to a combination of time and resources in terms of available developers. CSS3 is more difficult because the specifications change much more frequently than the specification for HTML5. For us it is a constant battle with keeping up to date with these changes and subsequently getting them into the next version of this update. That way we make sure that you will always have the latest and most accurate CSS3 support in Visual Studio. The CSS3 support includes: Will not invalidate filter, zoom and behavior properties Have intellisense for vendor specific schemas (-ms-*, -moz-* and -webkit-*) Up-to-date intellisense and validation for CSS3 properties and values JavaScript We’ve gotten a lot of customers asking for better intellisense for some of the new web API’s such as DOM Storage and Geolocation. In this update we are including intellisense for a lot of the API’s found in EcmaScript 5 including: New selectors such as getElementByClassName Geolocation, DOM storage and other new web API’s More info Check out the unofficial announcement or Scott Hanselman’s run-through Download If you haven’t already, I encourage you to download the Web Standards Update for Visual Studio SP1and try it out today. It’s a small and quick install.

Since the release of Visual Studio 2010 SP1 beta last month, there has been a lot of questions regarding the support for HTML5 and CSS3. HTML5 Visual Studio 2010 was originally released without HTML5 support, so does SP1 finally add support for it? Yes, to some extent. The entire HTML5 specification isn’t supported but most of the new elements and attributes are. That means you get both intellisense and validation for HTML5 with SP1. Turn it on After installing SP1 you have to tell Visual Studio to start using the HTML5 schema. Go to Tools -> Options, and then select Text Editor -> HTML -> Validation. You should now be able to select HTML5 or XHTML5 as the target schema. Or if you have the HTML Source Editing toolbar enabled, you can select it in the target schema dropdown. Intellisense support The new elements that are specific to HTML5 are shown in the intellisense list as you would expect. Even the new HTML5 specific attribute values for existing elements are shown. Prior to SP1 there had been a bug that caused a runtime error when an input element used some of the new type attribute values such as email in conjunction with runat=”server”. <input type="email" runat="server" />This error has been fixed and will be included in the final SP1. However, it is not part of SP1 beta. In the meantime, you can use the Textbox control instead which doesn’t cause the error. <asp:textbox type="email" runat="server" />CSS3 In SP1 there are a few improvements in the CSS3 support as well, though not as elaborate as with HTML5. The editor now supports the more advanced selectors such as div:nth-child(2n+1) without giving validation errors and the new color values rgba, hsl, hsla and 8 digit hex values are also supported. Start today The conclusion is that with Visual Studio today, you can build HTML5 and CSS3 web applications on top of ASP.NET, and with SP1 we are making it a lot easier for you. We encourage all ASP.NET developers to start taking advantage of what HTML5 and CSS3 has to offer already today. The Web Platform and Tools team takes web standards very seriously and you will see much better support for HTML5 and CSS3 in the future.

I recently had to come up with a good argument for upgrading a Windows Server 2003 to Windows 2008 R2. It is used as a web server, so the benefit I was looking for was the upgrade of IIS 6 to IIS 7.5. So I thought, why not make two deploys of the exact same website to both server editions and compare the performance. It so happens to be that there are many performance comparison articles about this floating around, but no one addressed the client-side aspect of the performance differences. I’d already prepared the <system.webServer> section of the web.config with various performance tricks for IIS 7. Of course, IIS 6 ignores the <system.webServer> section and therefore don’t get any of the performance enhancements. I’ve recorded the performance using YSlow and here is what the result looks like: Click for larger image The reason for the slightly different file sizes is due to the compression level of the native IIS 7 compression and my custom compression library. The interesting part is when the browser’s cache is primed. That means when the visitor has visited the website before. It should be noted that it is indeed possible to achieve the same performance metrics using IIS 6, but then you either need to add custom HTTP handlers or write to the IIS 6 metabase. Here are the performance optimization tricks I used.

A video showing you how easy it is to embed images directly into stylesheets to reduce the number of HTTP requests [More]

A very simple and small class for utilizing the Google Closure Compiler API for minifying JavaScript. [More]

Use a custom DTD that adds iframe support to XHTML 1.0 Strict [More]

How to use the Microsoft JScript compiler that's build into the .NET Framework [More]

Internet Explorer 8 introduced a new mechanism for ensuring backwards compatibility with websites built for IE7, so "the web" didn't break with IE8's more standards compliant rendering. You could tell IE8 to render your website as IE7 and therefore avoid having to fix potential problems with markup or stylesheets. You can do that in two different ways: Using a meta-tag:<meta http-equiv="X-UA-Compatible" content="IE=7" />or this HTTP header:X-UA-Compatible: IE=7 This puts IE8 into IE7 rendering mode. You can read more about how and why this was done and made into a standard at A List Apart. The bonus feature When IE8 renders a page, it looks for the meta tag or HTTP header in order to determine  whether or  not to render in regular standards mode or IE7 standards mode. So you would think that if you don't add the meta-tag or HTTP header, IE8 will just automatically render in IE8 standards mode, right? According to this flow diagram on IE8 rendering, this isn't the case. If you don't specify any meta-tag or HTTP-header, IE8 will go through a lot of checks in order to determine how to render your webpage. You can very easily avoid the overhead and uncertainty by specifying to always use IE8 rendering mode.  The diagram tells us to use the meta-tag to specify this directly: <meta http-equiv="X-UA-Compatible" content="IE=8" />This meta-tag tells IE8 to skip directly to the DOCTYPE check by bypassing all other checks. If you can't add the meta-tag but can add an HTTP header, use this: X-UA-Compatible: IE=8 The diagram tells us that the meta-tag is preferable over the HTTP header. Always target the latest IE browser Setting the X-UA-Compatible meta-tag/header to IE=8 only targets IE8 and no other browser. But what happens when IE9 ships? Microsoft has been clever enough to support the latest IE browser no matter what version might be. You can set X-UA-Compatible to IE=Edge and it will have effect on IE8 and all future IE versions. Keep in mind that upcoming beta releases and internal builds might not renders correctly, so use the IE=Edge at your own risk. Button disappears Another nice thing about directly specifying IE8 rendering mode is that the Compatibility View button disappears from the toolbar. Removing that choice might tell some visitors that what they are seeing is actually how you meant for your webpage to look. This is one of those little features that gives you a little extra control without compromising anything. I see no reason not to use this on any IE8 standards compliant website today.

How to use JavaScript and the browser as a tool to scale websites [More]