I was debating whether to call this release version 1.1 or 2.0 because it contains quite a lot of new functionality. I’ve decided to stick with 1.1 since it also features a lot of fixes and tweaks to the current functionality. Download it at the VS Gallery. Now, let’s take a tour of the new features. Option dialog This was the top requested feature from the original Web Essentials for Visual Studio 2010. It finally made it in. You can set the most important options through this dialog. If I forgot some options, please let me know so I can add them for the next release. JSHint for JavaScript JSHint is a really good way of making sure your JavaScript follows certain coding guidelines and best practices. The default settings are very relaxed, but you can turn on more rules through the new options dialog. The error window updates as you type, so you don’t have to right-click the .js file to kick off JSHint. It happens as you write. Better LESS and CoffeeScript The LESS editor has been updated with the latest functionality that is needed to truly take advantage of LESS. This includes: Support for @import directives Intellisense across imported .less files for Mixins and variables All the validation from the CSS editor now shows up in LESS Both CoffeeScript and LESS now uses the official compilers Compiles and creates a .css/.js file when a LESS/CoffeeScript file is saved in VS JavaScript regions Some people hate them, other people loves them. This is a feature that was in the original Web Essentials 2010 an by popular request now made it in the 2012 version. Re-embed base64 dataURIs The problem with embedding your images as base64 dataURI’s is to keep it up-to-date with the original image file as it changes. Now you can. Vendor help for @-directives Vendor specific validation and Smart Tags are now also available for @-directives. New performance validation Three new validators have been added that analyses the CSS for general performance issues. They validation the following: Small images should be inlined (base64 embedded) Don’t use the universal selector (the star) Don’t over qualify ID selectors They can be turned on/off in the new options dialog. Other small features Simple-selector highlighting like C#’s identifier highlighting Option to place validation messages in either Messages, Warnings or Errors Diff any 2 files in Solution Explorer. Might be useful for diffing LESS and CSS Collapse long base64 dataURI’s Auto-insert closing curly with type-through support New LESS and CoffeeScript item templates. More to come in next version Bug fixes Thank you so much for reporting bugs. That is really helpful and increases the quality of the extension in general. Here are some of the bugs reported by the users: Invalid LESS and CoffeeScript would result in an ugly error message and crash VS sometimes Intellisense for animation-name now also applies to animation LESS formatting for negative units no longer inserts an invalid space Dark theme now works for the browser support tooltip Mustache/Handlebars no longer screws up JSON strings Wrongly inserted color swatches for LESS variables Download Visual Studio 2012 will alert you of this update if you already have the previous version of Web Essentials installed. If not or VS didn’t alert you yet, go download it at the VS Gallery.* $4.95/month ASP.NET Hosting with FREE SQL 2012 DB! – Click Here!

The CSS editor in Visual Studio has unprecedented support for both W3C standards and vendor specific properties, pseudos and @-directives. See the full list here. However, not all vendor specific prefixes are supported, just the major ones: -moz-, -ms-, -o- and -webkit-. In case you have to target really old versions of Safari, it would be nice to have -khtml- as well. Visual Studio 2012 makes it very easy to add support for new properties or to augment existing ones with additional values. An easy VS extension Visual Studio extensions or VSIX packages as they are called, have a reputation of being notoriously difficult to write and the documentation is lacking. For adding your own custom schema to the CSS editor, this is most definitely not the case. In fact, it couldn’t be easier. Step 1: Download and install the Visual Studio 2012 SDK The SDK is needed for Visual Studio to know how to open extensibility project types. Step 2: Download the CustomCssSchema project  and open it in VS2012 This project contains the custom -khtml- schema and the ability to compile into an extensibility package – a VSIX. The project is very small as shown below. The only 2 files we care about for this scenario are the /Schemas/css-vendor-khtml.xml and KhtmlSchemaProvider.cs files. The rest of the files are used by the VSIX to display the right icons and descriptions in the Visual Studio Extension Manager as well as on the VS Gallery website. They are pretty self-explanatory once you open them and look at what they do. The CSS schema The css-vendor-khtml.xml schema file is not a complete KHTML schema. It is merely an examples to get you started. Check it out here. It makes it possible to create brand new properties, pseudos and @-directives. You can even inherit from properties already supported by VS and you can add additional property values to existing properties. It’s all explained in the XML file. The schema provider class The KhtmlSchemaProvider class is responsible for registering your XML schema file with the CSS editor. It is really simple as you can see below:That’s all the class does. Get started After downloading the SDK and the CustomCssSchema project, just hit F5 in Visual Studio. That launches an instance of Visual Studio. This extensibility instance is called the Experimental instance. Now open a .css file in the Experimental instance and check to see if the -khtml- properties are present in Intellisense. If they are, you are ready to start customizing the css-vendor-khtml.xml file. The different ways to extend the schema is all explained inside the css-vendor-khtml.xml file itself, so I won’t go in to details here. You can add multiple XML schema files. As many as you like, actually. Just make sure to create corresponding SchemaProvider classes as well. Publishing the extension You are now done with your custom CSS schema extension and want to put it on the VS Gallery for everyone to download. First, you need to locate the .vsix file that is produced every time you build the CustomCssSchema project. It’s in the bin folder. Now go to the VS Gallery website and sign in using your Live ID credentials. After signing in, this button becomes visible:Click it. It takes you to the first step of the little upload wizard. Choose “Tool” and click Next to show the next step where you are going to upload the .vsix file. Step 3 is basically about adding some tags and descriptions. That’s it. Your VSIX is now available for everybody to download!! Extra benefits When building custom schemas, you get some added benefits you might didn’t consider. 1. Snippets are automatically created to include your custom properties. All the vendor specific snippets in VS2012 are auto-generated based on the schema files. That means that if you include -khtml-border-radius in your custom schema, that property will now be included in the regular border-radius snippet. 2. Works in LESS and SCSS too Any editor that is built on top of the VS2012 CSS editor will get the same Intellisense for your custom schema. One such editor is the LESS editor included in Web Essentials 2012. Happy coding!* $4.95/month ASP.NET Hosting with FREE SQL 2012 DB! – Click Here!

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. Web Essentials for VS2010 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.    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. 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. 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. 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.* $4.95/month ASP.NET Hosting with FREE SQL 2012 DB! – Click Here!

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…* $4.95/month ASP.NET Hosting with FREE SQL 2012 DB! – Click Here!

A few weeks back i found out that the method I use to minify CSS was about 5% more efficient than the YUI Compressor. I tweeted about it and was encouraged to post the code that does the actual minification. public static string RemoveWhiteSpaceFromStylesheets(string body) {   body = Regex.Replace(body, @"[a-zA-Z]+#", "#");  body = Regex.Replace(body, @"[\n\r]+\s*", string.Empty);  body = Regex.Replace(body, @"\s+", " ");  body = Regex.Replace(body, @"\s?([:,;{}])\s?", "$1");  body = body.Replace(";}", "}");  body = Regex.Replace(body, @"([\s:]0)(px|pt|%|em)", "$1");   // Remove comments from CSS   body = Regex.Replace(body, @"/\*[\d\D]*?\*/", string.Empty);   return body;} The method takes a string of CSS and returns a minified version of it. The method have been modified for demo purposes, so you might want to optimize the code yourself.* $4.95/month ASP.NET Hosting with FREE SQL 2012 DB! – Click Here!

A video showing you how easy it is to embed images directly into stylesheets to reduce the number of HTTP requests [More]* $4.95/month ASP.NET Hosting with FREE SQL 2012 DB! – Click Here!

A checklist for websites [More]* $4.95/month ASP.NET Hosting with FREE SQL 2012 DB! – Click Here!

Specify the default script and stylesheet types to validate your XHTML [More]* $4.95/month ASP.NET Hosting with FREE SQL 2012 DB! – Click Here!