14 Comments

Today is a big day for all ASP.NET web developers. Both Visual Studio 2012, Windows 8 and Windows Server 8 is being released to MSDN subscribers.

Web Essentials 2012 logoIt is also the day that the first version of Web Essentials for Visual Studio 2012 is being released, or simply Web Essentials 2012. Download it here

As we developed the brand new CSS editor in VS2012, we did it with extensibility in mind. The first Web Essentials for VS2010 already demonstrated what could be done with the old CSS editor, but we wanted to make sure we wouldn’t run into any shortcomings in the extensibility model for VS2012. So the development of Web Essentials 2012 started back in January and it helped shape the extensibility of both the HTML and CSS editors.

Here are some of the most interesting new features.

Browser compatibility checks

Did you remember to use all the vendor specific CSS properties? How would you know if you didn’t? Don’t worry, Web Essentials uses VS2012’s CSS schemas to find out for you. Those schema files are up-to-date with all the vendor specific properties.

You can do quick checks on any property, pseudo class/element or @-directive to get a overview of what browsers are supporting the particular thing your mouse is hovering over. In this case the border-radius property:

image

In case there are any issues with your CSS file’s browser compatibility, the Messages list will be used to display them.

image

I’ve build a website that shows you exactly what’s supported by the VS2012 CSS editor. Web Essentials for VS2010 also had this feature, but it has been approved immensely in the new version and is a lot more accurate and up-to-date.

Clicking one of the browser compatibility errors takes you directly to the place in your CSS file where the error occurred. You can now use a Smart Tag to add the missing vendor specific properties.

image

In a big CSS file, going through the errors one-by-one can be a little time consuming, so it would be nice if you could perform some of these actions for the entire file in just a single click.

image

See the numbers 1-4 in the context menu? They are numbered like that for a reason. To clean up your stylesheet, start clicking the first menu item. Then move to number 2, then 3 and lastly 4. This ensures that things are done in the right order.

I’ve tested this on really big CSS files up to 15,000 lines with hundreds of browser compatibility errors and it only took a few seconds to run the auto-fix.

LESS, CoffeeScript and Sass

Good news for any LESS or CoffeeScript fans and semi-good news for Sass fans. The LESS editor is the most evolved of the three and you get all the goodness that Web Essentials 2012 brings to CSS directly in your LESS files. CoffeeScript and Sass (only .sass files, not .scss yet!) are supported in terms of colorization, formatting and outlining/code-folding.

image

The LESS editor does a lot more than just colorize nicely as shown above. It gives you full Intellisense for variables and Mixin’s as well.

image

Also variables gets a first-class treatment in Intellisense. Hovering a variable will also show you its value.

image

For both LESS and CoffeeScript, a preview window is shown on the right side of the editor where the compiled CSS or JavaScript respectively, are displayed.

image

Every time the LESS or CoffeeScript document is saved, the preview window is updated to reflect the changes. Sass doesn’t have this ability in this first release of Web Essentials, but it’s coming. So is support for the new Sass syntax, often referred to as SCSS.

Paste JSON as classes

When you have to work with JSON and especially JSON REST API’s, it can be time consuming and cumbersome to create all your C# classes after what an API is returning. With Web Essentials 2012, that is now very easy.

Let’s say you copied this example JSON from the documentation of some JSON API out on the web.

image

You could construct the C# class manually based on this JSON string. But you could also just right-click in the C# editor.

image

Clicking Paste JSON As Classes will parse the copied JSON string from the clipboard and convert it into C# classes.

image

It uses JSON.NET behind the scenes, just like ASP.NET Web API does, so by using them together you will know that the serialization and deserialization is working as expected.

Improved color workflow

The color squares introduced in Web Essentials for VS2010 has been vastly improved. They now cover all types of colors, including all the new CSS 3 specific color formats.

image

The color converter has also been updated accordingly.

image

Let’s say you want to slightly darken or lighten a color in your stylesheet. That is now very easy using SHIFT+CTRL+ARROW UP/DOWN when the cursor is located on a hex color value. I don’t have a image demoing this, so you will have to imagine that the color changes its brightness. The color stays the same, but the brightness is adjusted.

The same shortcut key combination can be used to change any number values as well as move properties or whole rules up and down in the document.

Intellisense everywhere

A lot of work has been put into making Intellisense appear everywhere you might need it. Even as a URL auto-completer.

image

Animation names are also populated from the keyframes or any vendor specific keyframes implementation as well.

image

CSS 3 font embedding is of course also supported.

image

Even the more important ones are covered.

image

HTML elements, class names and ID’s? Yep, got that too.

   

And a whole lot more.

Download Web Essentials 2012

So that was a brief overview of just a few of the features that I like the most, but there is so much more. Head over to the VS Gallery and check out a list of all the other features available.

Download Web Essentials 2012

12 Comments

I’ve been asked this question so many times lately, that a blog-post-answer seemed appropriate. There will be a Web Essentials for Visual Studio 2012!

The original Web Essentials for Visual Studio 2010 quickly became popular amongst web developers in the fall of 2011, when it was first released. Primarily, I think, because it added a lot of missing functionality to the CSS editor. It made working with CSS less painful and more fun – like it should be.

It was flawed, it was slow and it didn’t always feel very accurate. Most of these issues were fixed, but some still remain. I had to parse all the CSS manually using regular expression and other techniques and that had a lot of side effects. In fact, everything was done manually. It wasn’t pretty, but it worked for the most part.

image
Web Essentials for VS2010

image
Web Essentials for VS2012

Web Essentials for VS2012 will be different. The performance is spectacular and it feels – and  is – very accurate. The reason for this is largely due to the vast amount of feedback people submitted from the original Web Essentials. Bug reports and feature request still keeps coming in every week.

image image image
Intellisense for HTML tags, class names and ID’s in CSS selectors. Web Essentials 2012

All that feedback also made a huge difference in our priorities when building the brand new CSS editor in VS2012. We basically threw the old editor out after shipping VS2010 and started completely from scratch.  We didn’t do a lot of specifications, instead we prototyped a bunch of different ideas, iterated on them and finally implemented them. The time it takes to write a good spec is about the same time it takes to build a prototype, so it was a perfect way to be creative and come up with solid solutions.

The CSS experience in VS2012 is so much better than it ever was and significantly raises the bar for CSS editors in the industry, IMHO. So what role would Web Essentials play and was it even needed in VS2012 and beyond? Well, not all prototypes made it in the product. Also, not all features from the original Web Essentials made it either.

image
Right-click in the CSS editor to perform document-wide fixes in Web Essentials 2012.

So, I’ve been slowly porting Web Essentials, piece by piece, to Visual Studio 2012 to test the CSS editor for the past 6 months. Combine that with all the prototypes and experiments that never made it into VS and you have a good starting point for the next version of Web Essentials. Oh, and throw in a more friendly and helpful version of CssCop into the mix too.

image
New message types helps identify browser compatibility problems and helps with best practices

The ultimate goal of Web Essentials have always been to increase developer happiness by exceeding the expectations of what you would think possible in a CSS editor. Providing big features that really make an impact is always fun and hopefully helpful as well. Smaller features and even smaller details can have an equally big impact and I think that is the theme of the new Web Essentials – details with a big impact.

Synchronizing values of vendor specific properties in Web Essentials 2012

Not everything in the original Web Essentials was about CSS. It contained features for both HTML and JavaScript. However, most of those features actually made it into VS2012. That’s great, but that doesn’t mean that there isn’t useful features to be added outside of CSS.

image
Mustache/Handlebar support in the HTML editor for JavaScript templating and data binding

This is the first post in a series about the upcoming Web Essentials 2012. Later I’ll go more into detail about the individual features (there’s a lot!) and show some code. This was a primer and an overdue answer to the question.

Web Essentials 2012 will be available when Visual Studio 2012 RTM is released.

Teaser: Check out the prototype in this Channel 9 video.

6 Comments

Not everybody is able to upgrade to Visual Studio 2012 RC due to company policy or other reasons, but that doesn’t mean you can’t get some of its CSS 3 support in Visual Studio 2010 today. Whether or not you’ve got Web Standards Update installed or not, this is for you.

We’ve been able to port some of the support from Visual Studio 2012 into a format that is understood by Visual Studio 2010, but a lot of it I’ve had to port manually. Before proceeding, you should know that this is completely unsupported and at your own risk.

Here’s how to patch your installation of VS2010.

1. Download the new CSS 3 schema file

2. Locate the current CSS schema files. Mine are located at C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\Packages\1033\schemas\CSS. If you customized your install directory, then it’s located somewhere else, but the path should be similar.

3. If you have a file called css30.xml (from Web Standards Update), then replace it with the new downloaded file. If you don’t have css30.xml, then replace css21.xml with the downloaded file. I recommend you backup the old file before overriding it – just in case.

4. Restart Visual Studio 2010.

Caveats

Visual Studio 2010 doesn’t support some of the new CSS 3 constructs and unit types. This new schema file will not help with that. It can’t. What you do get is all the standard and vendor specific properties with Intellisense and validation to the degree Visual Studio 2010 supports it.

Because a portion of this new schema was edited manually by me, it is possible that it contains a few bugs. Please report them in the comments if you find any, so I can get it fixed.

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.