Useful Visual Studio Extension - Web Essentials from Mads Kristensen
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.
If you hover over the colors, you'll get a preview with more details. You'll also get font previews on mouse hover.
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.
So those
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. ;)
You can minify just a selection of text if it makes you happy.
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.
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.
About Newsletter
Hosting By
+1 for Base64 encoding of images in css
A little feature for a lot of value
A little feature for a lot of value
@curchy,
It also works for embedding fonts using the @font-face directive
It also works for embedding fonts using the @font-face directive
Definitely include this functionality. Would love to have these featuers built in.
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.
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 :)).
Every single one of these features should be standard in Visual Studio! That is all. :)
Love these features... just wish they were available in my preferred editor, VS 11 :)
+1 for @font-face 64 byte embedding. Also, those little glyphs are a life saver.
A lot of these features are also,contained in Resharper from jetbrains. Nonetheless a valuable tool!
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!
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..
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..
Just installed it and already like it... definitely features that should be included in Visual Studio by default :)
Too bad it's not compatible yet with .less (and the Web Workbench extension)
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)
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)
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.
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?
For example - unless I'm missing something, can you specify the browser engine that it uses to render the live preview?
Love the extension I think I'll get addicted to live preview and color preview...!
It should def be included in VS by default
It should def be included in VS by default
Am I doing something wrong or Live Web Preview renders page using IE7 standards? If so, then it's not really a usable feature.
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.
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.
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.
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.
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.
Scott, thanks for introducing this great extension. I enjoyed it.
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.
The other things are nice, but not a big deal.
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.
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!
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!
This looks pretty friggin' amazing, particularly the live editing. Nice work, Mads, downloading this now.
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.
Personally, I'd like to see more built in tools that actually help you better organize CSS and such, like integrated support for LESS.
Great stuff, makes the job easier for me :)
I really hope they make the next version of Visual Studio!
I really hope they make the next version of Visual Studio!
Downloading.....Installing....Not supported for any versions installed....
Curse you Express versions!
P.S. Make this one work for VS 2010 Express :)
Curse you Express versions!
P.S. Make this one work for VS 2010 Express :)
+1 for Web Essentials.
Please include in the next version of Visual Studio
Please include in the next version of Visual Studio
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.
@Mihhail Maslakov,
The issue with IE7 rendering mode is fixed and will be in the next update shortly
The issue with IE7 rendering mode is fixed and will be in the next update shortly
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
+1 for any feature he gets out of his playground to be in next release of VS
VS2010 and extensions,
how do I love thee?
let me count the ways..
how do I love thee?
let me count the ways..
@kipusoep,
Version 2.2 is compatible with .less files and the web workbench extension (except for a few things)
Version 2.2 is compatible with .less files and the web workbench extension (except for a few things)
.LESS support would be awesome!
BTW .. Have followed Mads for years... his .net blogs were always simple, clever and useful!
BTW .. Have followed Mads for years... his .net blogs were always simple, clever and useful!
>>> .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!
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!
Why there is no comment/uncomment css line/s button to the menu in the VisualStudio css editor
Just awesome! It's the little things that add up to big things for a web dev on a daily basis!
Thanks Mads!!!!!
Thanks Mads!!!!!
This is awesome! I hope it makes it into the next version of Visual Studio!
5! I'm using this tool for some time and updates with improvements comes reguraly. Good job!
This is brilliant! The color glyph alone is priceless. Would love to see this baked-in as standard.
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.
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.)
This is something that should be baked into all versions (Express, Matrix, etc).
@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
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
The "embed resource as base64" feature never popped up for me no matter what I've tried. Please help.
@Andrew,
There was a bug in the WAP vs. Website project types. Update the extension to version 2.4 and it should work
There was a bug in the WAP vs. Website project types. Update the extension to version 2.4 and it should work
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:
I hope this helps track down this problem, I appreciate the extension!
Joe
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
@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?
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?
@Mads Kristensen
I sent you the zipped project twice but got a delivery error message both times. Did you get my e-mail(s)?
I sent you the zipped project twice but got a delivery error message both times. Did you get my e-mail(s)?
@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
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
@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.
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.
@Mads Kristensen
Sure enough, the update seems to have cleared up the problem! Thanks for being so willing to help.
Sure enough, the update seems to have cleared up the problem! Thanks for being so willing to help.
+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.
It is cool, but not sure whether it will cost lots of CPU and other resources or not. I've already installed 5 ones.
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.
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?