6 Comments

Update Jan 1st 2014. TypeScript support is back in Web Essentials!

When Web Essentials was ported to Visual Studio 2013, a lot of features were removed. This was because many of those features were built directly in to Visual Studio 2013 and therefore no longer needed support by Web Essentials. That’s not exactly the reason why the support for TypeScript was removed.

TypeScript has been evolving at a steady pace since it was released in the fall of 2012. It’s now up to version 0.9 and that means that the final 1.0 release is getting closer. The Compile on save feature introduced by Web Essentials 2012 has now been rolled into TypeScript and the feature will be broadened in the months to come. That means Compile on save will be natively available for more project types, including ASP.NET projects, in the foreseeable future. If both Web Essentials and the TypeScript tooling provide the exact same functionality, there is bound to be conflicts.

You might remember what happened when LESS and CoffeeScript tooling was moved from Web Essentials into Visual Studio 2012 Update 2. Unless you updated both at the same time, Visual Studio would crash. The Visual Studio Web Team had to write a blog post about it and even ScottGu mentioned it. It was bad. Really bad.

In order not to repeat the same mistake twice, we’ve opted for not having TypeScript tooling in Web Essentials. That’s not to say we’ll never add extra TypeScript features in Web Essentials, but it means that we are doing what we can to avoid any collisions between the two toolsets.

As a TypeScript user you should take this as a positive thing, because it means that TypeScript is getting closer to its final 1.0 release and it will have some of the features you used to rely on Web Essentials to provide.

3 Comments

imageIn Web Essentials 1.7 for Visual Studio 2013 it is now easier than ever to work with images. In this video I'm demoing a lot of new features including:

  • Paste image from clipboard onto VS editor
  • Lossless image optimization
  • Create image sprites
  • Sprites are better with LESS/SCSS
  • Base64 encode images
  • Optimize base64 encoded images

Image workflow in Web Essentials and Visual Studio 2013

    More features were added to Web Essentials than what I'm showing in the demo video. These features include:

    • Paste image from clipboard onto CSS, LESS, SCSS, JavaScript, TypeScript, Markdown
    • Save base64 encoded image back to disk
    • Re-embed existing image as base64 encoded dataURI
    • Adding more images to a sprite
    • Changing an existing sprite without breaking your site
    • Optimize image from the HTML editor (Smart Tag on <img> element)
    • Base64 encode images from a Smart Tag in the HTML editor
    • Save base64 encoded image to disk from HTML editor
    • Drag 'n drop existing image onto Markdown editor

    Please let me know what you think about these new image workflow features.

    7 Comments

    Today was the long-awaited day when Visual Studio 2013 RTM was released. Check out Scott Guthrie’s blog post about all the new features for web developers. Today is also the day Web Essentials 2013 ships as version 1.0.

    Don’t mix RTM and RC!

    The new release of Web Essentials 2013 only works on Visual Studio 2013 RTM. Though you can install it on VS 2013 RC, some features will not surface and you might see a few alert boxes telling youSomething went wrong”.

    Also, all the Browser Link extensions will only work for VS2013 RTM. That’s because the Browser Link API in Visual Studio changed slightly between RC and RTM.

    You can still download the version of Web Essentials that works with Visual Studio 2013 RC.

    A new web-based menu

    With the introduction of Browser Link in Visual Studio 2013, it’s now possible for Web Essentials (and anyone else) to use the API to create brand new features that simply wasn’t possible before.

    One such feature is the Browser Link menu that shows up at the bottom of your pages in the browsers. It looks like this:

    image

    It floats at the bottom of your web pages, but unless your mouse cursor is hovering it, it will be semi-transparent to get out of the way:

    image

    You can also toggle the visibility of the menu entirely. Just hit the CTRL key to either show or hide the menu. If you always want it to be hidden until you manually hit the CTRL key, then check the Auto-hide box on the right.

    The idea behind the menu is to make it easy to discover the various Browser Link features provided by Web Essentials. Keep in mind that this is our first attempt at injecting a menu on your web pages, so I’d be really interested in any feedback you might have on this approach.

    I’ve been using it for about a month now and I absolutely love having it there. I auto-hide it and then just hit CTRL when I need it and it hasn’t been annoying at all.

    Stability and reliability

    During the Visual Studio 2013 Preview and RC timeframe, we saw a lot of crashes caused by Web Essentials. I knew that was a possibility because the various Visual Studio API’s changed between Preview and RC (and also for RTM in the case of Browser Link).

    It was therefore a top priority for me to make version 1.0 of Web Essentials as stabile and reliable as possible. A lot of bugs have been fixed and it’s probably the most reliable version of Web Essentials ever.

    That said, there might still be a few hiccups left undiscovered. If you encounter any, even small ones, please don’t hesitate to open a bug on GitHub so it can be fixed.


    Please enjoy Web Essentials 2013, suggest new features and send pull requests.

    4 Comments

    Web EssentialsAt the //build/ conference when Visual Studio 2013 Preview was released, I open sourced Web Essentials 2013 live on stage. So far that has been really successful with 110 pull requests sent by the community. And Visual Studio 2013 is not even out in its final version yet!

    Now it’s time to open source Web Essentials 2012 as well. It has taken a little longer than I wanted, but now it’s finally done and published.

    The code

    The source code for both Web Essentials 2012 and 2013 is on GitHub.

    Web Essentials 2012
    https://github.com/madskristensen/WebEssentials2012

    Web Essentials 2013
    https://github.com/madskristensen/WebEssentials2013 

    Remember to also check out my latest project SideWaffle that I’m building with Sayed and the ASP.NET/Visual Studio community.

    35 Comments

    Recently, a lot of people have asked for Intellisense support for AngularJS in the Visual Studio HTML editor. The bad news is that there is no extensibility for providing additional HTML attribute Intellisense, so I can’t ship this support in Web Essentials.

    The good news is that we can accomplish this through a more manual mechanism.

    image

    Here’s what you need to do:

    Step 1

    Find the file commonHTML5Types.xsd located in the Visual Studio install directory and back it up (just in case). Mine is here:C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\Packages\schemas\html

    Step 2

    Download this new version of commonHTML5Types.xsd and replace the existing one from the directory in Step 1 with it.

    Step 3

    Restart Visual Studio and that's it. You now have all the ng-* attributes available in Intellisense. This Works On My Machinetm, so please let me know if it works on yours too.

    I still want to add native support in either Visual Studio or Web Essentials, so if this is something you’re interested in, please vote for it here.