Subscribe: .NET slave
Added By: Feedage Forager Feedage Grade B rated
Language: English
bytes bytes  bytes  extensions  file  files  mimemap fileextension  new  studio  visual studio  visual  web essentials  web 
Rate this Feed
Rate this feedRate this feedRate this feedRate this feedRate this feed
Rate this feed 1 starRate this feed 2 starRate this feed 3 starRate this feed 4 starRate this feed 5 star

Comments (0)

Feed Details and Statistics Feed Statistics
Preview: .NET slave

Mads Kristensen

Latest blog posts


Bundling, minification and client-side compilation

Mon, 08 Jun 2015 09:23:09 PDT

For the past couple of years, Web Essentials have been including features for bundling and minifying JS and CSS files as well as compiling LESS, Sass and CoffeeScript. As of Web Essentials 2015 that is no longer the case. However, I’ve gotten so many requests to bring these features back that I’ve created two new Visual Studio 2015 extensions to deal with it. And I need your help testing them before Visual Studio 2015 goes RTM.

Bundler & Minifier

This extension allows you to perform bundling and minification of JS, CSS and HTML files very easily and, in my mind, takes a better approach to how it’s done over the same feature in Web Essentials.

Download from VS Gallery Bundler & Minifier
Download nightly CI builds from
Source code on GitHub  

Web Compiler

Based on what I learned building compilers for Web Essentials, this extension improves on the stability and usability significantly. You can now very easily specify which LESS/Sass/CoffeeScript files to compile and with what settings for each file individually.

Read more and download Web Compiler
Download nightly CI builds from
Source code on GitHub 

Why new extensions?

In the past year or so, I’ve started separating out features from Web Essentials into smaller single-purpose extensions. I’ve done that for several reasons.

  1. It keeps the Web Essentials source code smaller and more maintainable
  2. Since it’s smaller, I hope to get more contributions from the community
  3. If one feature in Web Essentials cause a crash/hang, then the entire extension is broken
  4. Issues are much easier to deal with in smaller extensions
  5. By having smaller extensions, you can install just the ones you need

The code in Web Essentials for dealing with Bundling, minification and compiling was very error prone and almost impossible to maintain. For several months I wasn’t even able to compile Web Essentials itself due to a lot of weirdness in the node based compilers being used.

Help wanted

Given that these two extensions are brand new and the amount of requests for them has been so immense, it becomes really important that they both are working awesomely when Visual Studio 2015 goes RTM. So please help me test them out by installing them and reporting any issues to their GitHub issue tracker. If you want to contribute then you’re more than welcome to send pull requests with modifications and/or unit tests. If you want to add new features, all I ask is that you open an issue first so we can discuss it before sending the pull request.

These extensions are for a huge portion of Visual Studio web developers who don’t want to setup Grunt/Gulp to handle the client-side workflows, but instead have happily relied on Web Essentials in the past. These extensions are for you.

New handy Visual Studio extensions - part 2

Mon, 19 Jan 2015 12:22:34 PST

A few months ago I wrote about some small handy extensions I created for Visual Studio. This is part 2 with even more handy extensions. So here are some of the extensions I’ve worked on since then.

Open Command Line

Though I’m not a console-person, I do use both PowerShell and the regular command line quite a bit. Mostly I use the command line to run Grunt commands or with other commands that have to do with my Visual Studio projects.

The problem is that I always have to cd my way to the root of my projects before I start executing any commands.


With the Open Command Line extension I can now just hit Alt+Space  to open my console of choice already on the path of my project root. It supports any console including PowerShell, cmd, Bash etc.

Download Open Command Line on the VS Gallery

Open from Azure Websites

Sometimes when I build websites, I need to download the deployed content and run it locally. That’s a little cumbersome to do manually, so this extension helps make this super easy.

The extensions adds an Open from Azure Websites button that does it all automatically and opens the remote website as a project in Visual Studio.


Download Open from Azure Website on the VS Gallery 

Visual Studio Auto Updater

I love Visual Studio extensions and I use a lot of them every day. However, it can sometimes be annoying to keep them all up-to-date when new versions are released.

(image) The Visual Studio Auto Updater will automatically download and install updates to extensions in the background so you don’t ever have to do it manually again. It will only update the extensions that you have approved for auto updating.

Download Visual Studio Auto Updater on the VS Gallery

All of these extensions are of course open source and available on either my GitHub profile or on the LigerShark profile.

Grunt and Gulp Intellisense in Visual Studio 2013

Mon, 15 Dec 2014 17:03:58 PST

Update Jan 16, 2015 – The newly released Visual Studio 2015 CTP 5 also supports Grunt/Gulp Intellisense using the files available in this blog post. In fact, the Intellisense will be a lot better in CTP 5 due to the support for Object Literal Intellisense in the JavaScript Editor.

I’ve spent some time figuring out how to get Intellisense working for Grunt and Gulp in the JavaScript editor. Today, I hit a breakthrough that lights up Intellisense automatically. All it requires is that you perform the following two steps:

  1. Download the JavaScript Intellisense files (zip with two files)
  2. Copy them to C:\Program Files (x86)\Microsoft Visual Studio 12.0\JavaScript\References

If you’ve installed Visual Studio under a different path, then you’ll have to find the correct folder at that location instead.

This trick also works in Visual Studio 2015 Preview, but then the folder to copy the JavaScript files to is: C:\Program Files (x86)\Microsoft Visual Studio 14.0\JavaScript\References

Here’s what it looks like when editing GulpFile:


And here is GruntFile:


This is my first attempt, so please give it a try and let me know what you think. I want to try building this into Visual Studio 2015 so your feedback is super important.

Media Files:

Grunt and Gulp Intellisense in Web Essentials 2015

Sat, 13 Dec 2014 12:57:05 PST

Update: See this new blog post for how to apply the Intellisense to both Visual Studio 2013 and 2015

The latest release of Web Essentials 2015 provides Intellisense for GruntFile and GulpFile. For Gulp it just works out of the box, but for Grunt we have to add a little JSDoc comment to our file for Intellisense to light up.

For Grunt, just add this JSDoc comment on top of the module.export line:

* @param {Grunt} grunt
module.exports = function(grunt) {…

The JSDoc comment instructs the JavaScript Intellisense engine that the grunt parameter is of type Grunt which is specified by Web Essentials.

JSDoc comments are now natively supported in Visual Studio 2015

Here’s a video showing the feature for both Gulp and Grunt.


I hope to be able to remove the requirement on the JSDoc comments, so that Intellisense will just work without you having to do anything.

Fall update 2014 - my year in review

Sun, 05 Oct 2014 14:08:53 PDT

Last October I wrote about my road to Visual Studio 2013 which was one big diary entry for an entire year in my professional life. This is such an incredible time to be working on the Visual Studio Web Tools Team and I’m so proud to work with some of the smartest people in the industry. This time last year, we were almost ready to ship Visual Studio 2013, so here’s what has happened since then. A few months before shipping Visual Studio 2013 we already started the work on Update 2. We decided not to be part of the first update to VS2013 because we had some rather large features that we knew wouldn’t be ready before Update 2. One of those features was the Sass editor because we had received a lot of feature requests for it. It was the most requested feature on the Web Essentials UserVoice page in fact. In Visual Studio 2012 Update 2 we released the LESS editor so we had plenty of experience with this type of CSS based language. Peter could reuse a lot of the code from the LESS editor (which he also implemented), so the iterations went pretty fast. Sass has a lot more features than LESS, so there was still a lot of new code and concepts to implement. The funny thing about both LESS and Sass is that they evolve very rapidly. It’s not like web standards from the W3C which can be years in the making. These two languages introduce new features and concepts many times a year, so it is a bigger challenge to keep the editors up-to-date. We’re still working on updating both implementations for VS14 in order to keep up with the changes and we will continue to do so going forward. We had one additional editor to implement for Update 2 and that was for JSON. Visual Studio never had a JSON editing experience before and we felt it was important to have one. Alex had been working on the support for auto-updating the _references file up until Christmas 2013, so the work on the JSON editor didn’t start until December 28. We were very ambitious with the JSON editor, because we wanted more than just syntax highlighting. We also wanted schema based Intellisense, validation, formatting and more. A full language service was needed. We broke it down into several pieces: Basic language service Syntax highlighting Formatting Syntax validation Brace completion/matching JSON Schema Intellisense Draft v3 and v4 support JSON Schema validation Enables more accurate Intellisense We knew we couldn’t do all of that for Update 2, so both Mike and Todd helped out with the JSON Schema support while Alex was implementing the language service and Anh was testing it all. We refer to the Update 2 JSON editor as version 1.0. In Update 3 we added better formatting and other important tweaks and in Update 4 we’re adding the validator. This will be version 2.0. I sent a pull request to the official JSON Schema website that added Visual Studio as the only editor that supports JSON Schema. To this day it’s still the only one. We’re not done yet and will continue to improve the editor in VS14 and beyond. Our team is now responsible for 7 separate editors. The highest number by any Visual Studio team. The editors are: CSS LESS Sass CoffeeScript Web Forms HTML JSON It’s quite the task to keep them all up-to-date with every release of Visual Studio and its quarterly updates. It’s sometimes a little overwhelming. To make the experience with JSON Schemas even better, I started working on a website for storing various JSON Schema files. It’s called and is completely open source. Web Essentials will automatically download the schema files stored on and bind them to known JSON files such as package.json, bower.json etc. In VS14 we’ll build this feature in and open it up for custom schema catalogs as well. We’re even working on a SublimeText plugin that will do the same. used to be hosted on m[...]

Optimizing static websites hosted on IIS

Sun, 07 Sep 2014 17:18:00 PDT

So you are building a website using static .html files instead of any server side technologies such as ASP.NET. That’s cool for various reasons, but my favorite is that it allows any developer on any platform to easily contribute on GitHub. No server-side components needed. Great! You’re almost done and decide to run performance analytics tool such as Google Page Speed on your site. Now the problems begin. Here’s some of the items that you are told to optimize: Minify HTML Set far-future expiration dates on static resources (JS, CSS, images etc.) Use cookieless domains for static files Use a CDN You could set up build processes using Grunt to do all of this work, but it is not that simple to do – especially after you already built your website. Most of these tools require you to setup your project in a specific way from the beginning. When you think about it, none of the above mentioned performance issues are relevant on a developer machine, they are only applicable to the live running production website. So if we could let the production server do some tricks for us to make all of this easier and without us having to modify our source code, that would be great. StaticWebHelper While building I encountered exactly these issues and decided to create a generic and reusable solution. My idea was to let IIS handle the issues while the website could still run statically without IIS at all on a development machine. The StaticWebHelper NuGet package does exactly that. Here’s what it does: Minifies any .html file at runtime and output caches Fingerprints references to static resources Creates a URL rewrite rule for handling the fingerprints Set’s far future expiration dates in the web.config Has support for CDNs using an appSetting Fingerprinting is a browser cache busting technique for changing the URL to references files, so the browsers will load any changes while still featuring far-future expiration dates. Read more about fingerprinting. #1 and #2 happens at runtime, but only once. It output caches the results so that no additional files are being created on disk and you get performance similar to static file serving. Any time a referenced JS, CSS or image file is updated on disk, it generates new fingerprints automatically. It also handles conditional GET requests (status 304). #3, #4 and #5 are all handled in the web.config. I use a custom reverse proxy CDN with nodes in both Europe and North America for serving static files cookieless. If you don’t need a CDN, it is still a good idea to use a different subdomain to handle static resources such as StaticWebHelper supports both scenarios equally and it’s easy to setup in web.config. For fingerprinting to work, it adds a URL rewrite rule in web.config. To see this in action, check out the source code of on GitHub. Especially, take a look in the web.config file. Azure Site Extensions If your website is hosted on Azure, then it’s really easy to let an automated Site Extension do further optimizations such as image optimization and JS/CSS minification. Read more about that here.[...]

New handy Visual Studio extensions

Sat, 06 Sep 2014 11:55:37 PDT

I’m a huge fan of Visual Studio extensions – both consuming and creating them. Whenever I come across a missing feature in Visual Studio, my first instinct is to search for an extension that provides it. If it doesn’t exist, I create it. In the past couple of months, I’ve created 3 tiny extensions that each adds features I’ve been missing. Each of these are highly specialized and solves a single problem each. Trailing Whitespace Visualizer I like my code files clean and without unneeded trailing whitespace. Format Document (ctrl+k, ctrl+d) takes care of removing the trailing whitespace, but I’d like to see it clearly in the editor while coding. Here’s what it  looks like: The color can be customized in case you don’t like red. Download Trailing Whitespace Visualizer on the VS Gallery Error Watcher I don’t normally have the Error List visible in Visual Studio, so I often save files containing errors, just to find out that my project won’t build or work at runtime. That’s annoying. I wanted a more visual way to be informed about errors without looking at the details in the Error List. My solution was to show the number of errors on the file containing them at the top of the editor window. When no errors exist in the file, nothing will be shown in the editor. If you save the document with errors, a small red line will flash briefly to make you aware of it. Download Error Watcher on the VS Gallery Add empty file Often times I just want to add an empty file to my project. It could be a .json or file for instance. In cases like that, I find that going into the Add New Item dialog takes to long and I sometimes have to search for the file type I want. It would be easier if I could just enter the file name with the extension I want and have it created for me. Also, the Add New Item dialog doesn’t allow me to create file names starting with a dot like in .gitignore. I added a button to the Add flyout context menu: This will prompt me for a file name: Here I can type whatever file name I want and it will be created, added to my project and opened in the editor. Download Add Empty File on the VS Gallery Remember, unlike some browsers, Visual Studio doesn’t slow down when using multiple extensions. Most of them only load in specific circumstances and doesn’t do anything when not used. That’s true for these three extensions too. All three extensions are of course open source on GitHub.[...]

Prepare web.config for HTML5 and CSS3

Mon, 18 Aug 2014 09:23:32 PDT

HTML5 and CSS3 introduces some new file types that enables us to create even better websites. We are now able to embed video, audio and custom fonts natively to any web page. Some of these file types are relatively new and not supported by the IIS web server by default. It’s file types like .m4v, .webm and .woff. When a request is made to the IIS for these unsupported file types, we are met with the following error message: HTTP Error 404.3 - Not Found The page you are requesting cannot be served because of the extension configuration. If the page is a script, add a handler. If the file should be downloaded, add a MIME map. The problem is that the IIS doesn’t know how to serve these new files unless we tell it how. This can be easily done in the web.config’s section by adding the following snippet: .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } The above snippet includes support for most video, audio and font file types used by HTML5 and CSS3. [...]

Effects of GZipping vs. minifying HTML files

Tue, 12 Aug 2014 08:19:57 PDT

Last time we took a look at the performance impact of using tabs vs. spaces in HTML files. One question that arose was whether or not it’s worthwhile to minify HTML when also using GZip. Let’s run the experiment.

I’ve collected a few real-world HTML files and done some minification and GZipping on them. Here’s the result:

Website File size Minified Gzip GZip & minified Savings 218,642 197,032 53,793 49,008 9% 130,014 121,534 27,114 25,392 6% 53,465 46,608 12,262 11,416 7% 38,888 24,139 8,075 6,795 16%

These pages already do minification on various sections, but none of them minifies the whole document. If none of them used any minification, the savings would have been higher than the table shows.

So, according to the results, minification will provide an additional 6-16% lower file size with GZip enabled.

16% is a rather large saving on top of regular GZip, so the data suggests that we must use both GZip AND minification.

Remember, this is a rather small experiment with only 4 real-world websites. It would be interesting to expand the experiment for more accurate statistics.

For HTML minification in ASP.NET, I like to use WebMarkupMin or Meleze.Web.

Effect of tabs vs. spaces in HTML files

Mon, 11 Aug 2014 20:48:33 PDT

Are you using tabs or spaces to indent your markup? Does it matter for performance which one you chose? Let’s run an experiment. Consider a page that generates a list of 50 items:
    @for (int i = 0; i < 50; i++) {
  • The count is @i
  • }
The code generates a long list of
  • elements and keep their indentation using the editor’s settings for tabs, spaces and tab size. Default in many editors is spaces and a tab size of 4. With spaces it looks like this: and with tabs it looks like this: It’s clear to see that the indentation takes up 4 characters when spaces are used and only a single character when using tabs. If we then compare the total file size of the two variations, here’s what we get: Tabs Spaces Saving Raw file size 1403 bytes 1703 bytes 300 bytes/18% Using tabs saves close to 18% of the file size over spaces. This is, however, not a true picture of a web page. All modern web servers use compression in form of GZip or Deflate before serving HTML to the browser. So let’s look at the numbers after GZip: Tabs Spaces Saving Raw file size 1403 bytes 1703 bytes 300 bytes/18% Raw file GZipped    327 bytes    332 bytes      5 bytes/1.5% When using GZipping, the saving from using tabs over spaces is just 1.5%. It’s still a saving and it counts. Yet again, this is not the complete story because some web developers make sure to minify the HTML by removing redundant whitespace, unneeded quotation marks etc. Normally this is done as a build step or at runtime. So let’s minify the HTML and see what results it produces: Tabs Spaces Saving Raw file size 1403 bytes 1703 bytes 300 bytes/18% Raw file GZipped   327 bytes   332 bytes      5 bytes/1.5% Raw file minified 1199 bytes 1199 bytes      0 bytes/0% Minified & GZipped   312 bytes   312 bytes      0 bytes/0% When minified, it doesn’t matter if tabs or spaces are used, since they are all stripped away. Conclusion Depending on the capabilities of your server, build setup, runtime etc., here’s a little chart of what to do based on the above findings: Use tabs or spaces I can minify Doesn't matter at all I can GZip but not minify Doesn’t matter much (tabs gives small benefit) I can neither GZip nor minify Tabs Keep in mind that this is a controlled experiment, so your mileage will vary. If you want to enforce your entire team to use either tabs or spaces, then take a look at .editorconfig. There’s a plugin available for practically all editors. In the next segment, we look at the effects of GZipping vs. minifying HTML files.[...]