Scott Hanselman

Useful Visual Studio Extension - Web Essentials from Mads Kristensen

November 8, '11 Comments [62] Posted in ASP.NET | Tools | VS2010
Sponsored By

Visual Studio 2010 is really extensible and that's allowed many folks on the team to try out new features for Web Development without having to rebuild Visual Studio itself. One of those "playground" extensions is called "Web Essentials" by Mads Kristensen. Mads handles HTML5 and CSS3 tools for our team. You might remember Mads from when we released the Web Standards Update a few months back.

Web Essentials is Mads' playground and it's pretty awesome. It's so awesome that I think you should check it out and then, *ahem*,  leave a comment on this post encouraging Mads and gentle urging his boss(es) to get these features into the next version of Visual Studio.

First, it adds a few nice touches to the CSS Editor in Visual Studio. As you can see below, it adds a little glyph next to each color that shows you the actual color.

A nice visual refresh to the Visual Studio CSS editor

If you hover over the colors, you'll get a preview with more details. You'll also get font previews on mouse hover.

Font Previews are fun

These are just nice little touches that make you smile. They also smooth little issues with my daily workflow. After having them, I miss them when they are gone.

There's also some more functional features, like embedding tiny images in your CSS files as base64. Sounds nuts, but if  your small icons are so small that the HTTP Headers are larger than the image itself this can be an easy way to remove an HTTP request.

Here I'm taking the tiny "Ajax Loader" PNG in my app and turning it into an inline image.

Embed Resource as base64

So those

Look at the tiny images as base64

It even has some evil little helpers help you use well-known CSS hacks to control visibility of rules. Like, if you hate yourself and use IE6. ;)

Enabling evil with IE6 hacks

You can minify just a selection of text if it makes you happy.

image

You can drag and drop images and automatically get a background-image CSS rule, which is a HUGE time saver. Oy. All this and a bunch more little subtle stuff.

The best feature and feature that should cause you to download it NOW is that you can do live CSS editing in Visual Studio with a real-time preview.

Fire up a CSS file and hit Ctrl-Alt-Enter. Then click Settings and hit "Live Update CSS." Bam. As you type it'll get updated in the browser. Love this.

image

Do you like these playgrounds? Do you want some or all of these features in Visual Studio? Sound off below.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web
Tuesday, November 08, 2011 1:18:46 AM UTC
I remember when VS2010 was in beta, and one of the big demos was integrating a 'rich preview' of XmlDoc, inline in the code.
Whatever happened to that?
I have been waiting for an inline HTML editor that will display XmlDoc in the formatted form, and allows me to use some kind of rich editor (all inline) for adding the markup tags...

Im a big proponent of verbose xml documentation, but anything to motivate my team to do this would be a big help.

Is this available anywhere?
Adam Langley
Tuesday, November 08, 2011 1:23:38 AM UTC
+1 for Base64 encoding of images in css
A little feature for a lot of value
Tuesday, November 08, 2011 1:30:37 AM UTC
@curchy,

It also works for embedding fonts using the @font-face directive
Tuesday, November 08, 2011 1:31:39 AM UTC
Definitely include this functionality. Would love to have these featuers built in.
Andre
Tuesday, November 08, 2011 1:42:54 AM UTC
I've always wondered what happened to Mads after blogengine. It felt like to me he dropped of tue face of the earth. Glad to see he is still making a dent in the world and doing good for our community.
Tuesday, November 08, 2011 1:48:41 AM UTC
Yes - this would be nice to see in Visual Studio. I have something like this with Telerik JustCode, but it would be nice if it was in the core Visual Studio (So I could dump Telerik :)).
Tuesday, November 08, 2011 3:21:14 AM UTC
Every single one of these features should be standard in Visual Studio! That is all. :)
Tuesday, November 08, 2011 3:21:38 AM UTC
Love these features... just wish they were available in my preferred editor, VS 11 :)
Tuesday, November 08, 2011 4:15:46 AM UTC
+1 for @font-face 64 byte embedding. Also, those little glyphs are a life saver.
Tuesday, November 08, 2011 5:57:14 AM UTC
A lot of these features are also,contained in Resharper from jetbrains. Nonetheless a valuable tool!
Tuesday, November 08, 2011 6:06:10 AM UTC
It sure seems like it's a 'no-brainer' to add this to VS. It gets a little closer to the convenient Silverlight way of designing, and it helps remove the most cumbersome part of modern web development--CSS. Si, Por Favor!
Jarrod Skulavik
Tuesday, November 08, 2011 6:42:57 AM UTC
Love the extension but it seems to clash with others that I have installed-- I think it doesn't like Resharper?

That's the problem with VS extensions, you just don't know which ones don't play nice together, which ones slow you down a ton, etc..
Tuesday, November 08, 2011 8:06:05 AM UTC
Just installed it and already like it... definitely features that should be included in Visual Studio by default :)
Tuesday, November 08, 2011 8:25:45 AM UTC
Too bad it's not compatible yet with .less (and the Web Workbench extension)
kipusoep
Tuesday, November 08, 2011 8:49:21 AM UTC
This is good to hear. Will download the web essentials. I already have the web standards update. display the hex color value saves me enough to try out this add-on and I see a lot more good stuff! font-preview is for me personal less valueable, but also nice to have.
Embed resource as base 64 is awesome! saves me a lot of trouble and does decrease http requests! so thats better for the end user experience as well. same for minifying! nice to have that in visual studio!

ps. 'make visible for IE6 only' should have a nuke icon or demon or something. Skulls are less evil (because of pirates of the Caribbean)
Tuesday, November 08, 2011 8:53:47 AM UTC
Looks very useful. Only thing not so keen on is the promotion of the use of CSS hacks. These things should really be handled using conditional comments and seperate stylesheets for the various IE browsers as necessary.
Andy
Tuesday, November 08, 2011 9:47:25 AM UTC
So yeah, after playing with it for a little bit - immediately I want it to do more...

For example - unless I'm missing something, can you specify the browser engine that it uses to render the live preview?
Tuesday, November 08, 2011 10:13:35 AM UTC
Love the extension I think I'll get addicted to live preview and color preview...!
It should def be included in VS by default
Pierrick
Tuesday, November 08, 2011 10:24:07 AM UTC
Am I doing something wrong or Live Web Preview renders page using IE7 standards? If so, then it's not really a usable feature.
Tuesday, November 08, 2011 10:53:44 AM UTC
Excellent addition to the standard VS functionality.

These features should definitely be included "as standard" in Visual Studio, however, there should always be the ability to enable/disable each specific piece of functionality (via the Tools>Options menu).

Best of both worlds.

Tuesday, November 08, 2011 11:06:37 AM UTC
They're nice but not essential so if included by default on VS they should come disabled or easily disabled as a whole.

The best solution is to keep it as an optional Extension that we can choose to install from Tools>Extension Manager.

Please don't slow down the IDE performance (which directly affects productivity) with these kind of things, the IDE is already eavy enough.
Tuesday, November 08, 2011 11:58:11 AM UTC
Awesome
Tuesday, November 08, 2011 12:31:10 PM UTC
Man, that's why I love Visual Studio. Visual Studio is the first IDE of the world contrary to IE, which is the most damn browser ;).

Scott, thanks for introducing this great extension. I enjoyed it.
Tuesday, November 08, 2011 12:57:32 PM UTC
A live preview, ever more "liver" (like firebugs, where the preview reacts as you change the CSS) in long overdue.

The other things are nice, but not a big deal.
Tuesday, November 08, 2011 1:18:37 PM UTC
If anyone is doing VS Live conferences, I highly recommend checking out Mads' presentations. He covered this stuff (and more) at VS Live in Redmond 3 weeks back, and it was AWESOME. As a guy who's spent a lot of my time as a "front end" .NET developer, these new tools are very, very appreciated.
Tuesday, November 08, 2011 1:23:10 PM UTC
Mads,
Awesome extension! Thanks for sharing this with us!

Boss(es),
Please get these into the next verson of Visual Studio!

Scott,
Always enjoy your articles!
Tuesday, November 08, 2011 3:48:34 PM UTC
This looks pretty friggin' amazing, particularly the live editing. Nice work, Mads, downloading this now.
Tuesday, November 08, 2011 3:58:27 PM UTC
Most of these features are trivial novelty items, IMO. I'm not opposed to their inclusion, but I'd have concerns about performance. It's already annoying at times when you're opening a large code file and have to wait for the tools to catch up / parse the file. Cute features like this seem like they'd only add to that lag.

Personally, I'd like to see more built in tools that actually help you better organize CSS and such, like integrated support for LESS.
Tuesday, November 08, 2011 4:14:45 PM UTC
Great stuff, makes the job easier for me :)

I really hope they make the next version of Visual Studio!
Tuesday, November 08, 2011 4:33:02 PM UTC
Yes, I want these features in the next Visual Studio ! thanks, Bill
Tuesday, November 08, 2011 4:41:08 PM UTC
Downloading.....Installing....Not supported for any versions installed....

Curse you Express versions!

P.S. Make this one work for VS 2010 Express :)
Tuesday, November 08, 2011 5:02:11 PM UTC
Neato!
Tuesday, November 08, 2011 5:04:25 PM UTC
I use this quite often. Love it. Great work Mads!
Tuesday, November 08, 2011 5:36:33 PM UTC
+1 for Web Essentials.
Please include in the next version of Visual Studio
Tuesday, November 08, 2011 7:23:12 PM UTC
Interesting stuff. I have recently created a NuGet plugin which provides similar functionality as its preview feature, but use quite different way to do that. I used ajax long polling to refresh the css file or the whole page whenever a save action is detected.
Tuesday, November 08, 2011 7:25:30 PM UTC
@Mihhail Maslakov,

The issue with IE7 rendering mode is fixed and will be in the next update shortly
Tuesday, November 08, 2011 10:06:17 PM UTC
A big fan of Mads since early days of BlogEngine.

+1 for any feature he gets out of his playground to be in next release of VS
Wednesday, November 09, 2011 2:55:17 AM UTC
VS2010 and extensions,
how do I love thee?
let me count the ways..
Wednesday, November 09, 2011 3:39:34 AM UTC
@kipusoep,

Version 2.2 is compatible with .less files and the web workbench extension (except for a few things)
Wednesday, November 09, 2011 5:10:52 AM UTC
Just downloaded it awesome thanks
Wednesday, November 09, 2011 6:47:44 AM UTC
.LESS support would be awesome!

BTW .. Have followed Mads for years... his .net blogs were always simple, clever and useful!
Wednesday, November 09, 2011 7:00:00 AM UTC
>>> .less files and the web workbench

Yes Mindscapes's Web Workbench was a great tool - but some clashes with the fantastic "Chirpy" and the decision to turn the freeware version of Web Workbench into "Nagware" forced a de-install.

The case still stands: Native VS2011 support for LESS and/or SCSS(sass) would be FANTASTIC!


Wednesday, November 09, 2011 9:42:59 AM UTC
Why there is no comment/uncomment css line/s button to the menu in the VisualStudio css editor
maboy
Wednesday, November 09, 2011 3:08:05 PM UTC
Just awesome! It's the little things that add up to big things for a web dev on a daily basis!

Thanks Mads!!!!!
Wednesday, November 09, 2011 3:43:43 PM UTC
This is awesome! I hope it makes it into the next version of Visual Studio!
Thursday, November 10, 2011 11:59:11 AM UTC
5! I'm using this tool for some time and updates with improvements comes reguraly. Good job!
Friday, November 11, 2011 8:59:04 AM UTC
This is brilliant! The color glyph alone is priceless. Would love to see this baked-in as standard.
Friday, November 11, 2011 1:34:57 PM UTC
Nice. This just blew up Visual Studio completely, it conflicts with something else (I don't recognize the names) and now I can't even open the menus.
Friday, November 11, 2011 1:36:35 PM UTC
Nevermind, it seems only the mouse was disabled, I was able to open the menus with the keyboard and managed to uninstall it. Everything works now. (Leaving this as a FYI in case anyone else has the same problem.)
Friday, November 11, 2011 3:34:23 PM UTC
This is something that should be baked into all versions (Express, Matrix, etc).
Friday, November 11, 2011 6:48:49 PM UTC
@Marcel,

That's terrible. Sorry about that.

Can you share with me what other extension you have installed so I can fix this conflict, please?

Thanks
Saturday, November 12, 2011 5:10:47 PM UTC
The "embed resource as base64" feature never popped up for me no matter what I've tried. Please help.
Saturday, November 12, 2011 10:55:10 PM UTC
@Andrew,

There was a bug in the WAP vs. Website project types. Update the extension to version 2.4 and it should work
Sunday, November 13, 2011 4:35:36 PM UTC
After installing the extension I get an error every time I start to edit a CSS file. After clicking OK to dismiss the dialog everything seems to work fine. I don’t get this error when editing HTML5, only CSS. It doesn’t seem to matter what version of CSS is selected in the editor drop-down list. I logged the error as the dialog suggested, below is the relevant (i.e. only) error line from the log file:

System.ArgumentOutOfRangeException: Specified argument was out of the range of valid values. Parameter name: index at Microsoft.VisualStudio.Text.Implementation.SimpleStringRebuilder.get_Item(Int32 index) at Microsoft.VisualStudio.Text.Implementation.TextSnapshot.get_Item(Int32 position) at MadsKristensen.WebEssentials.ColorSmartTagger.GetRealSnapshot(String classification, SnapshotSpan currentSpan, ITextBuffer buffer) at IntraTextAdornmentSample.ColorTagger.<GetTags>d__0.MoveNext() at Microsoft.VisualStudio.Text.Tagging.Implementation.TagAggregator`1.<GetTagsForBuffer>d__16.MoveNext()


I hope this helps track down this problem, I appreciate the extension!

Joe
Monday, November 14, 2011 10:43:48 AM UTC
Should be baked into vs.
Monday, November 14, 2011 4:02:25 PM UTC
@Joe Paris,

I can't repro the issue. Can I get you to send me the CSS file that causes this issue to madsk at ms dot com, please?
Tuesday, November 15, 2011 4:51:01 PM UTC
@Mads Kristensen

I sent you the zipped project twice but got a delivery error message both times. Did you get my e-mail(s)?
Tuesday, November 15, 2011 5:52:38 PM UTC
@Joe Pars,

I haven't received anything yet. Are you sending to madsk at microsoft dot com?

Also, there are a lot of fixes in version 2.5 which I released 5 mins ago. That might fix it for you.

Thanks again
Tuesday, November 15, 2011 9:41:45 PM UTC
@Mads Kristensen

That is where I was sending it, via the Hotmail web interface. Your mail server wouldn't kick it back because of the attached .zip file, would it?

In any case, I will try the updated version when I get home tonight and, if the problem persists, will try e-mailing a different way.

Wednesday, November 16, 2011 9:21:34 AM UTC
@Mads Kristensen

Sure enough, the update seems to have cleared up the problem! Thanks for being so willing to help.
Monday, November 21, 2011 7:55:51 AM UTC
+1
It is cool, but not sure whether it will cost lots of CPU and other resources or not. I've already installed 5 ones.
Wednesday, January 25, 2012 6:41:00 PM UTC
Holy crap! I was still uploading each of my images and converting them to base64 before embedding in the stylesheet. What a time saver. Oh, and the live preview looks awesome. Definitely get this in the next version of VS.
Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.