11 Comments

tl;dr

You need to update Web Essentials 2013 to version 2.2. If not, Visual Studio will crash. Download now.

Before Visual Studio 2013 Update 3

The upcoming release of Visual Studio Update 3 has API changes in some of the components that Web Essentials is extending. Those changes are not compatible with the current version of Web Essentials and will cause VS to crash after upgrading to Update 3. To be fair, those APIs were never public to begin with, so I was taking a chance when I was using them in Web Essentials.

If you are currently using Web Essentials 2.1 for Visual Studio Update 2, you should see this dialog show up the next time you open Visual Studio.

Web Essentials update notification

This is the first time this notification feature has been used after introducing it in Web Essentials 2.1. Good thing we did.

It’s important that you install this update immediately. You don’t have to restart Visual Studio – it’s enough that you just install the update. If not, you might forget to do it before you install Visual Studio Update 3. So go do it now.

It turns out to be good timing, since we have added some cool new features in version 2.2. Here’s a list of a few of them:

This is unfortunately the price we have to pay to be on the cutting edge. Lesson learned and we’ll do our best to make sure this doesn’t happen again. It’s not a guarantee since Web Essentials will continue to use APIs that are unsupported by Microsoft. That’s the only way we can add all those cutting edge features.

Download Web Essentials 2.2

16 Comments

So you have a website filled with images, CSS and JavaScript files, and you realize that you haven’t bothered optimizing the images or minified the CSS and JavaScript files. Or maybe you have, but your users can upload their own and they don’t get optimized/minified.

What’s the easiest way to go about that? Well, you could use tools like Web Essentials and PngGauntlet to help out, but that doesn’t solve the issue with user-uploaded files. You probably have to modify your website to include *.min.js files, commit them to source control, modify your website project and so on.

It would be much nicer if we didn’t have to worry about any of this and didn’t have to make any modifications to our website. It would be much nicer if it just happened automatically.

With Azure Websites that is now possible. Any web application hosted on Azure Websites no longer have to bother with these types of optimizations anymore.

It doesn’t matter if your website is running ASP.NET, PHP, Node.js or plain static HTML, it works for them all.

All there is needed is to install a NuGet package and publish the website to Azure. Here’s a video demonstrating how to add automatic image optimization.

The video shows how simple it really is to optimize images. To optimize CSS and JavaScript files, we can do the exact same thing, but with a different NuGet package.

Here’s what we need:

  1. Install NuGet package: Azure Image Optimizer
  2. Install NuGet package: Azure Minifier
  3. On a web application hosted on Azure Websites

How it works

Both the Image Optimizer and the CSS/JavaScript Minifier works the same way.

When they are installed and you publish to Azure Websites, an MSBuild trick makes sure to publish the Webjobs with your web application. As soon as that is done, Azure recognizes the Webjobs and starts them up.

The first time they start up, it can take a little while for them to finish the first pass of optimizations if you have a lot of files to optimize. You might even see the Webjobs restarting in the Azure portal. That’s ok, no problem. They start up immediately again and continues on where they left off.

The Image Optimizer supports .png,.gifand .jpg files. And the Minifier supports .js and .css files.

Server Explorer in Visual Studio shows us the Webjobs along with a log file and a cache file.

image

The log file is being written to every time a file has been optimized. You can open it by double clicking directly on the .csv file in Server Explorer. The cool thing about using a .csv file is that it an be opened in Excel, so you can easily do more calculations on the data.

The cache file (.xml) contains a list of files and their MD5 hash values. That ensures that the same files aren’t being optimized over and over again each time you publish or restart the WebJob.

If you have enabled Streaming Logs, then you can see the optimizations happen in real time directly within Visual Studio’s Output Window as well.

Open Source

As always, we keep our source code on GitHub and of course accept pull requests.

These features have been some that both Sayed and I have been wanting to add for a long time, but it was never possible before Microsoft introduced Azure Webjobs, because they required continuously running background tasks to work most reliably and in a way that scales.

The demo website used in the video is also open source and is great for playing around with these two optimizers yourself.

Happy optimizing!

0 Comments

The current JavaScript Intellisense in Visual Studio is generated based on IE’s JavaScript engine Chakraand its support for the various browser/DOM APIs. The cool thing about that is that the accuracy is really high, since the good folks on the IE team spends a lot of time implementing the APIs according to the web standard specifications. Awesome!

However, this means that the Intellisense in Visual Studio doesn’t include APIs that IE doesn’t support yet, such as the Shadow DOM, Server-Sent  Events, HTML Imports etc.

The good news is that the JavaScript editor in Visual Studio can easily be extended to include Intellisense for all of these APIs. The even better news is that it can all be done in JavaScript.

To do that, we need 2 things:

  1. Add a JavaScript file to the global Visual Studio references
  2. Add code to that file containing Intellisense

So let's get started.

Add a .js file to the global references

First of all, we must create a .js file somewhere on disk. Potentially on a network share for your entire team, or just in the user's documents folder. It doesn't matter where.

Then add a reference to it in Tools -> Options like this:

JavaScript references

Make sure to chose Implicit (Web) in the Reference Group dropdown. Otherwise it won't take effect for web projects.

Write some Intellisense

Now that the file has been referenced by Visual Studio, we can start adding additional Intellisense to it. Open the newly created .js file as well as any other JavaScript file. We are using the other JavaScript file to test the changes we make to our Intellisense file. We don't have to restart VS to see the changes, just save your Intellisense .js file and the changes take effect immediately.

Let's start by adding support for the new HTML Imports API. It's really simple because it only adds a single new property to DOM elements called import. So an example of how to use it would be something like this:

var link = document.querySelector('link[rel=import]');
var partial = link.import;

The value of partialis a Document element just like window.document. To add Intellisense for the import property, simple add this one line to your Intellisense .js file:

Element.prototype.import = Document.prototype;

We are extending the prototype of the Element object with an import property and giving it the value of the Document object's prototype. So now when we type this into our other JavaScript file, we should see this Intellisense:

HTML Imports Intellisense

What I've found to be a good rule of thumb is to make the added Intellisense apply more broadly than the spec might call for. In the example above, the import property should only apply to <link> elements (HTMLLinkElement), but since VS can't always know what type of element you're referencing, it makes good sense to just make it apply to all elements. It's up to you of course, but I think that this makes for a better experience.

Web Essentials

Today, Web Essentials 2013 ships two .js files that improves JavaScript Intellisense. One adds JSDoc comment support and the other adds many of the missing APIs including support for Angular.js.

The issue is that Web Essentials can't always add those two files to the global references.

If you already have Web Essentials installed, then you already have these two files located in C:\users\yourname\.

The files are:

  • JsDocComment.js
  • Modern.Intellisense.js

So make sure to check if you already have them in the JavaScript References options:

image

If not, just add them in the above dialog. The APIs that are added through Web Essentials are:

  • Shadow DOM
  • Vibration API
  • Fullscreen API
  • Canvas (improvements)
  • Server-Sent Events
  • HTML Imports
  • Object.observe()
  • Angular.js

Contribute

You can help improving the JavaScript Intellisense shipped in Web Essentials by adding support for more APIs to the Modern.Intellisense.js file on GitHub. A great way to get started is to go to status.modern.ie to look for APIs that Internet Explorer doesn't yet support. Under each API there's a link to the W3C specification.

As an added bonus, all of this also applies to Visual Studio 2012, but you have to get the two .js files from Web Essentials 2013 manually since they aren't shipped with Web Essentials 2012.

4 Comments

web essentials3rd-party extensions have never been supported in the free Visual Studio Web Express. So you haven’t been able to install Web Essentials on Web Express before. With Visual Studio 2013 Update 2 and Web Essentials 2013 version 2.1 that is no longer the case.

You can now install and use Web Essentials on Web Express and get the exact same features as you would on the paid versions of Visual Studio. It’s the same code that runs in both. In fact, it’s the exact same extension that runs in both.

The reason for opening up Web Express for Web Essentials is to be able to provide cutting edge web tooling for free to anyone interested. Since Web Essentials is the ASP.NET and Web Tools Team’s official unofficial playground, we thought it would make perfect sense to broaden the support to the free versions of Visual Studio.

13 Comments

This year at the //build/ conference I gave a session on Visual Studio Web Tools and Web Essentials. It’s now online on Channel 9 in case you want to watch it.

I was using a few extensions that are great for any web developer using Visual Studio 2013. I’ve compiled the list of extensions here and added a few additional ones that are really useful as well.

Web Essentials

logoThis is the ASP.NET and Web Tools team’s official unofficial playground – owned and driven by the open source community. It adds a huge number of features relevant for web developers, such as LESS/Sass/CoffeeScript compilers, code linters, additional Intellisense for JavaScript/CSS/HTML/JSON, validators, image sprite creation and a lot more.

Website: http://vswebessentials.com
Download: Web Essentials in the VS Gallery

SideWaffle

imageA delicious side dish for Visual Studio. This is an awesome template pack containing both Project Templates, Item Templates and Snippets for a wide variety of scenarios. From building Angular.js apps, Nancy FX projects, Browser Link and Chrome extensions and a lot more.

Website: http://sidewaffle.com
Download: SideWaffle in the VS Gallery

File Nesting

imageThis extension let’s you manually nest and unnest files in Solution Explorer. It also has an option for doing the nesting automatically based on file naming conventions. This is great for nesting *.min.js and other related files under parent files.

Download: File Nesting in the VS Gallery

JSON Schema Generator

json-logoVisual Studio 2013 will provide full Intellisense and tooltips for any JSON file that is associated with a schema. This extension lets you right-click directly on a JSON file in Solution Explorer and generate a schema file based on the source JSON file.

Download: JSON Schema Generator in the VS Gallery

Here are some additional extensions that might be of interest to you as well.

WebJobsVS

imageIn the Day 2 Keynote I showed how to create a C# console application project and use it as an Azure Webjob. To associate the console application with my web application, I used this extension. It was developed by folks working in the Azure team.

Download: WebJobsVS in the VS Gallery

SlowCheetah – XML transforms

Slow CheetahA great extension that enables you to transform your app.config or any other XML file based on the build configuration. Basically, this extension enables scenarios for XML transforms that are currently only available for web.config files.

Download: SlowCheetah in the VS Gallery

GruntLauncher

If you’re working with Grunt, Gulp, NPM or Bower, then this extension is for you. It allows you to easily run Grunt/Gulp tasks directly from Solution Explorer as well as update Bower components.

Download: GruntLauncher in the VS Gallery

Mexedge Stylesheet Extension

imageThis is a beautiful extension that provides CSS document outline directly inside Solution Explorer. Not only does it look great, it also gives a very convenient overview over media queries, selectors and rule sets. This is a must-have for any web developer working with CSS.

Download: Mexedge in the VS Gallery

PHP Tools for Visual Studio

imageIn my live Channel 9 interview we talked briefly about this excellent extension for PHP development. This gives you PHP Intellisense, debugging, code navigation and a lot more inside Visual Studio. A must-have for PHP developers that want the awesome power of Visual Studio.

Website: http://www.devsense.com/products/php-tools/
Download: PHP Tools in the VS Gallery

Cobisi Routing Assistant

This is a great extension for visualizing your ASP.NET routing table and to find what URLs map to what routes. It makes it easier to diagnose routing issues and even provides some great editor tooling features as well.

Website: http://cobisi.com/routing-assistant
Download: Routing Assistant in the VS Gallery

CssCop – FxCop for Stylesheets

imageIf you’re getting serious with CSS, then this extension is going to help you out. It runs CssLint inside Visual Studio to give you error messages that makes it easy to fix any rule violations.

Download: CssCop in the VS Gallery

Node.js Tools for Visual Studio

nodejsNTVS is a free, open source plugin that turns Visual Studio into a Node.js IDE. And it does a superb job at that. This gives you the power of Visual Studio for any Node.js development.

Download: NTVS on CodePlex

Chutzpah Test Adapter

imageA great extension for JavaScript unit testing. Chutzpah supports Jasmine, QUnit and Mocha tests inside Visual Studio and works from both the command line as well as inside VS.

Download: Chutzpah in the VS Gallery

Lua Test Adapter

imageIf you’re using Lua for your JavaScript unit tests, then this extension will integrate it directly into the Test Explorer in Visual Studio. It makes it really easy to execute tests all at once every time you build the project.

Download: Lua Test Adapter in the VS Gallery

Did I forget any extensions? Let me know in the comments below.