0 Comments

I just attended the TechDays 2012 event in The Netherlands and now it is all over and I'm heading back to Seattle in the morning. I gave a couple of sessions and here are the slides I used:

In the Tips & Tricks talk I demoed some of the extensions available for Visual Studio 2010. I've also done a Channel9 video specifically on those extensions.

It's been great being back in The Netherlands, which I haven't visited since 2009. Hopefully I'll be here again for Tech-Ed this summer.

17 Comments

Writing correct CSS can sometimes feel a little frustrating – especially with all the vendor specific properties and cross-browser techniques we need to be aware of. CSSCop for Visual Studio tries to help us write better CSS, by making sure we remember all the right vendor specific properties or that you cannot set the margin on inline HTML elements etc.

contextmenu

CSSCop uses the best CSS linting tool available today – CSS Lint. Like FxCop will frustrate you the first time you run it, so promises CSS Lint, which state:  “[CSS Lint] Will hurt your feelings* (And help you code better)”.

You might find a lot of errors when you run it the first time, but very quickly you learn the rules and will start coding accordingly.

screenshot

All the rules can easily be turned on and off in an XML file that is placed in the root of you project the first time CSSCop runs. It doesn’t impact performance in any way since it only activates when you manually invoke it.

I hope that you will give it a try and tell me what you like and dislike about it.

3 Comments

I’ve been pretty quiet about my latest extension for Visual Studio 2010 outside of Twitter, so I’m thinking it’s due time for a blog post about how and why Web Essentials came to be.

If you don’t know what Web Essentials is or haven’t tried it yet, you might want to read Scott Hanselman’s blog post.

Web Essentials was originally called CSS Essentials when it was first released in early 2011 because I wanted a name that clearly stated it was all about CSS. Years of web development had left me frustrated about the lack of attention CSS editors was getting by almost all IDEs, which in general only provided syntax highlighting, decent formatting and useless validation. Why did VB.NET and C# almost write itself when CSS was such a uphill battle with even the simplest tasks such as cross-browser rounded corners? That should be simple, right? Right?!

I still considered myself a new employee at Microsoft at the time, with plenty of stuff to learn in my new role as Program Manager for the CSS and HTML editors in the Web Platform & Tools team. That’s why CSS Essentials remained dormant for the first many months providing little to no features.

It wasn’t until September 2011 after the //BUILD conference, where we shipped the Visual Studio 11 Developer Preview that I revived the project with a few clear goals:

  • Have fun writing code
  • Live test features that we might consider including in Visual Studio
  • Provide value to existing Visual Studio 2010 users

Having fun

Spare time projects have to be fun to survive. I learned that when I started BlogEngine.NET almost 5 years ago.

Because it was so much fun adding new features to Web Essentials, I updated the extension almost daily. Some people really liked the frequent updates, but I got a lot of feedback from people who was so annoyed about it that they uninstalled it. That was no fun. Now I’ve slowed down the updates a bit and I still have fun.

Live testing of features

Some of the features are stolen inspired by Visual Studio 11 and some are unique to Web Essentials. Some of the shared features are implemented in different ways, but essentially solves the same problems. As a Program Manager for HTML, CSS and now also JavaScript, this is an ultimate way to get feedback on possible new features for Visual Studio. Please keep the feedback coming!

Provide value to VS2010 users

This is perhaps the most important part of the project. New versions of Visual Studio are usually 2-3 years apart and that’s a long time to wait for new features and general improvements. That’s also the reason why I released the Web Standards Update extension last June.

Despite my role at Microsoft, Web Essentials is a completely private project. No Microsoft developer was hurt during the making of the extension. Scouts honor, boss! The reason I have for keeping it a private hobby project is that it gives me complete freedom to experiment with various features and improvements. It unfortunately also means that there is no QA other than myself. And you of course.

Anyway, back to the story.

After the project was revived I decided to change the name to Web Essentials because it reached broader while keeping focus on web development. Also, I wanted to add features to the HTML editor, such as drag ‘n drop of user controls, video and audio files. Something I had wanted for years as a web developer.

The purpose now was to provide a broad set of improvements to make the experience writing client-side web code in Visual Studio better and more up-to-date.

As of this writing, the extension is now on version 2.6 with 44.000+ downloads. That’s 16 releases in 2 months and it includes features for CSS, HTML, JavaScript and general web project features as well. The future of web development in Visual Studio, I think, has never looked better then with Visual Studio 11 on the horizon. Until then, Web Essentials will continue being updated and push the envelope on what Visual Studio 2010 is capable of.

I would love to hear from you what sort of features, tweaks and improvements would make your life easier and more fun using the web tools in Visual Studio and Web Essentials. Most of the features in Web Essentials came from suggestions on Twitter and around the interwebs. So if you have a good idea, please share it.

3 Comments

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…