17 Comments

imageThis summer has been one of the most productive I’ve ever had. Normally I spend summers balancing frozen margaritas in my hammock. That’s called Hammock Driven Development. You should try it.

Visual Studio 2013 Preview was released in June at the //build/ conference. I was there giving a talk about the brand new HTML editor, Browser Link and Web Essentials. Here’s the story of my road to //build/  and Visual Studio 2013.

Starting early

Mikhail, Todd and Alex, all developers on the web editors crew, started working on a new HTML editor for Visual Studio 2013 last summer before we shipped Visual Studio 2012. The codename for this new editor was Libra. My zodiac sign happens to be Libra, so I thought it was a fantastic name.

The HTML editor was based on WebMatrix’ HTML editor, which was much newer and all written in C#. The old HTML editor in Visual Studio was a mix between C++ and C#. It was old. From the nineties actually. It also had dependencies on FrontPage. Yes, FrontPage.

We went through all aspects of the editing experience to create the best HTML editor in the world. That meant scrutinizing every little detail till we got it just right. The formatter was the most challenging piece from a UX point of view. We spent months getting it perfect. I had no idea something so seemingly simple could be such a challenge.

The formatter was just one piece of the puzzle. Another big piece was the validator. Our test engineer, Van, had for a while wanted to learn Python. So when we needed a big pile of real-world HTML documents for testing, Van decided to teach himself Python, write a web crawler and download thousands of web pages to validate against. The guy is not normal.

Libra is a huge project and we’re not done yet. We’ll never be done – the HTML editor will continue to evolve.

Visual Studio Update 1

While work continued on Libra, we were preparing for the first update to Visual Studio 2012. This update became very important, because this was the first time we introduced new modern web languages to Visual Studio. It was a great day when we shipped both CoffeeScript,LESS and KnockoutJS Intellisense in Visual Studio Update 1.

For me, this marked the day when Visual Studio entered into the modern web arena full force. Not only that, we actually shipped both CoffeeScript and LESS several months earlier in Web Essentials. The cadence of which we were able to get valuable technology in the hands of web developers was unprecedented at Microsoft it seemed.

Two other very popular features from Web Essentials was also promoted into Visual Studio Update 1 – Paste JSON as Classes and Handlebars syntax highlighting. This was a good release.

Shortly after the release, Peter was able to join the Libra effort while Mikhail moved on to another team at Microsoft. We now had all the developers on the web editors crew working full time on Libra.

Up until this time, Libra was the only project we had started working on for Visual Studio 2013. But that was about to change.

The Eureka crew

Back in October 2012 I took over as program manager for the Eureka crew. Eureka was the codename for Page Inspector, which was a feature first introduced in Visual Studio 2012. I now had the responsibility for both the web editors and Page Inspector.

I’ve always found the technology behind Page Inspector fascinating, so this was pretty exciting to me. Long before I joined the Eureka crew, I had been trying to figure out how to move Page Inspector out of Visual Studio and into the browser, but was never able to nail the right user experience. I just knew it had to live in the browser somehow.

After an evening of Ballmer Peaking with Sayed, all the pieces started to fall into place – a true eureka moment in fact. The next day I sent a mail to my boss, wherein I pitched Artery – the codename for what was to become Browser Link.The email went out February 25th, 2013.

The Eureka crew couldn’t start working on it just then. We had to finish the work on Page Inspector for Visual Studio Update 2 first. It wasn’t until April before Dan and Joe started coding on the proof of concept. At this point, we didn’t even know if it was technically possible, let alone if we were even able to make it in time for Visual Studio 2013.

We did make it, but for the June release Browser Link was very far away from being feature complete. We basically shipped the proof of concept. As you can see from this video, we’ve come a long way since then. Browser Link is going to change everything.

Side Projects

During Christmas time last year, both Sayed and I were each building a website. He built one for his new MSBuild book and I built one for Web Essentials. We gave each other tips and tricks and decided to put them all online. In January 2012 we introduced the Web Developer Checklist. It got leaked before it was done and made the front page of Hacker News on a Sunday night. We had to hurry up and finish it right then.

In June we then released the Web Developer Checklist Chrome extension, which helps web developers test their websites for best practices. Many of the items on the checklist is currently being built into Web Essentials as Browser Link extensions, so now there’s full Visual Studio integration as well. It’s funny how things progress and evolve over time. From website, to Chrome extension, to Browser Link extension.

This happened at the same time I was working on a new blog engine for ASP.NET called MiniBlog. The idea was to see how simple I could write a modern blog engine with the latest technology. Exactly the same as when I started BlogEngine.NET many years ago. I used MiniBlog as part of the demo in my //build/ talk.

Leading up to //build/, I also started porting Web Essentials from Visual Studio 2012 to 2013 Preview. It was a bigger task than I thought, but it was done in time to release at //build/. It was even used in the keynote which I was very proud of.

Now both Web Essentials 2012 and 2013 are open source and have already taken community contributions. That’s fantastic and I’m very grateful for everyone who have pitched in so far. Thanks!

In July, Sayed and I finally started working on a project we had talked about doing for months. We wanted to make it easy for anyone to create and share Visual Studio item- and project templates. The project is called SideWaffle Template Pack and is an open source community extension for Visual Studio 2012 and 2013.


Now summer is over and Visual Studio 2013 RTM is almost ready to ship. I hope you’ll have as much fun using it as we had making it.

4 Comments

Web EssentialsAt the //build/ conference when Visual Studio 2013 Preview was released, I open sourced Web Essentials 2013 live on stage. So far that has been really successful with 110 pull requests sent by the community. And Visual Studio 2013 is not even out in its final version yet!

Now it’s time to open source Web Essentials 2012 as well. It has taken a little longer than I wanted, but now it’s finally done and published.

The code

The source code for both Web Essentials 2012 and 2013 is on GitHub.

Web Essentials 2012
https://github.com/madskristensen/WebEssentials2012

Web Essentials 2013
https://github.com/madskristensen/WebEssentials2013 

Remember to also check out my latest project SideWaffle that I’m building with Sayed and the ASP.NET/Visual Studio community.

11 Comments

I’ve been recording a quite a few videos lately for showing off new features in Visual Studio and Web Essentials. Some videos also shows prototypes of what is coming down the line. The question is  whether or not videos are the right format for this.

Personally, I prefer short demo videos over written articles or blog posts. There’s just something about seeing how a feature works instead of reading about it. However, there are situations where watching videos aren’t an option. For instance when on the bus with no headphones. Written articles works better for me in those situations.

I like doing videos and I’m considering doing more of them on a regular basis. The question is, are videos worthwhile or is a blog post better?

Check out my Youtube channel to get an idea of how I’d like to do the videos going forward.

10 Comments

Here’s a feature that you might have missed in Visual Studio 2013 RC. It’s one of my absolute favorite features because it solves a very common problem that I often run into when building websites.

I think it’s better to just show you what this feature does instead of writing about it. Check out the video below.

This means you no longer have to manually add references to any JavaScript file in order to get Intellisense for that file. When auto-sync is enabled in /Scripts/_references.js then you will always have Intellisense for all your .js files in your project no matter where they are located.

1 Comments

A little while back, Sayed Hashimi and I built the Web Developer Checklist Chrome extension as a companion for the website webdevchecklist.com. We built the extension in Visual Studio and quickly realized that we could optimize the development experience substantially by tweaking the build process along with other details.

From that experience, we now have a project template that contains all you need for writing a Chrome extension and it is available for download.

The project template gives you the following features:

  • JavaScript Intellisense for the Google Chrome object model
  • Folder structure suited for production ready Google Chrome extensions
  • MSBuild integration to produce .zip files to upload to the Google Web Store

It’s all explained in this short demo video.

As always, this project template is open source on GitHub.

Download the Visual Studio project template

Here’s a Channel9 video where Sayed explains how he modified the build system for this template if you’re interested. It starts around 13 minutes in.