11 Comments

Many Web Essentials users have requested a more formal process around nightly builds, that should result in a better delivery and update mechanism. To make it really easy to always run the latest and greatest, I’ve now created a custom feed for the Extensions and Updates dialog in Visual Studio 2012.

Here’s how it works:

Go to Tools > Options and open the the tab located under Environment –> Extensions and Updates.

image

Click the Add button and type “Web Essentials Nightly” in the Name field and “http://vswebessentials.com/nightly/feed.ashx” in the URL field. Now click the Apply button and you’re all set. Now click the OK button to exit the Options dialog.

Now the custom feed shows up in the Extensions dialog. Go to Tools > Extensions and Updates… to verify that the new feed is working. You should have a new sub category under the Online tab called “Web Essentials Nightly”.

image

The Nightly build shares the same extension ID as the official released versions of Web Essentials, so the newest one will always override the one installed – regardless if it’s the nightly build or the official version. And updates will work normally.

In other words, it should be perfectly safe to use this custom feed without any changes to how the update mechanism works from the user’s point of view. Only difference is that with this new feed, you can get the updates much faster than before.

Give it a try and let me know what you think.

30 Comments

This release has some cool features, some tweaks to existing ones and some bug fixes. Let’s take a tour and then go download it.

Automatic update to CSS schema files

The W3C continues to evolve the CSS specification and so do all the browser vendors. It’s therefore important to always keep up-to-date with the changes to take full advantage of the web platform. Web Essentials now automatically downloads new schema files whenever there is a change.

This is really cool, because Visual Studio will now always have the latest W3C specifications AND the latest vendor specific properties in Intellisense and validation. Latest schema files include support for Firefox 16, Opera 12.1 and all the rest.

This feature is very close to my heart.

Modernizr support

When writing any kind of modern web application, you can use Modernizr to fill in the gabs between old and new browsers. Modernizr is a JavaScript library that, among other things, places a lot of class names in the <html> element of web pages. These class names are very useful to utilize from CSS to provide graceful degradation for older browsers and now they are fully supported in the CSS editor.

image

As you might be able to tell, two things are happing in the above screenshot.

  1. Modernizr specific class names are bolded
  2. Hierarchical indentation supports the class names and indent correctly

I like this feature because it makes it very clear and transparent what is going on when using Modernizr.

Minification

Through a right-click menu in Solution Explorer, it is now possible to create .min files from both CSS and JavaScript files.

image

The .min file will be nested under it’s parent source file.

image

Every time a change is saved in the parent styles.css file, the styles.min.css file is automatically updated with the minified version of its parent.  The right-click gesture works on both individual CSS and JavaScript files, but also on folders, which will then create min files for all CSS or JavaScript files in that folder.

It only handles minification, not multi-file bundling. That’s coming in the next update.

CSS/LESS document outline

Get a sneak-peek inside any CSS or LESS file directly from Solution Explorer.

image

For CSS it will display @-directives, IDs and class names used in the file. For LESS it will also show the Mixins and variables used. You can navigate this outline using only the keyboard and have each item open up automatically in the Preview Tab.

W3C only

Tired of Intellisense for non-W3C properties, @-directives, pseudo elements and property values? You can now chose to only see the W3C standards. Using any vendor specifics will result in a validation error. Is this strange? Perhaps. Let me know!

Shorthand validation

This is a work in progress, but I wanted to include the early bits in this version. The CSS validator will now throw an error if you use properties that should be rolled into a shorthand expression. For instance, if you use margin-top, margin-right, margin-bottom and margin-left in the same rule, it will tell you to combine the properties into margin. Full parsing and validation is coming in a future version.

Nested LESS selector Intellisense

When writing nested selectors in LESS you will run into a very annoying problem with pseudo selectors. The Intellisense list will force you to write a pseudo selector when you in fact just wanted a colon. This is now fixed.

Source Control

The LESS, CoffeeScript and TypeScript compilers doesn’t know how to check files out of source control before they try to compile and override the output file. Web Essentials will now check out the right files to avoid write permission issues.

New options structure

The Tools –> Options dialog has been updated with even more options and with a more granular structure.

image

This makes it easier to search for specific items using Quick Launch (CTRL + Q) and also makes it less cluttered.

Minor improvements

Beyond the features mentioned, a lot of small tweaks and fixes also made it in to this release. Here are some of them:

  • Cleaned up right-click menu
  • Added minification inside the CSS and JavaScript editors
  • Disallow zero values in CSS (0px, 0%, 0em etc. should not have the unit)
  • TypeScript now supports ES5 correctly
  • TypeScript compiler switches now featured in the options dialog
  • General bug fixes

As always, let me know if you run into issues or have some ideas for new features or tweaks.

You should download Web Essentials 1.4 right now!

29 Comments

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.

image

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.

image

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.

image

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.

image

Vendor help for @-directives

Vendor specific validation and Smart Tags are now also available for @-directives.

image

New performance validation

Three new validators have been added that analyses the CSS for general performance issues. They validation the following:

  1. Small images should be inlined (base64 embedded)
  2. Don’t use the universal selector (the star)
  3. 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.

1 Comments

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.

image

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:

image

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.

image

Now go to the VS Gallery website and sign in using your Live ID credentials. After signing in, this button becomes visible:

image

Click it. It takes you to the first step of the little upload wizard.

image

Choose “Tool” and click Next to show the next step where you are going to upload the .vsix file.

image

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.

image

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!

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