The guys talk to Mads Kristensen about all the new web tools in Visual 2013, Web Essentials, Side Waffle and Web Dev Checklist.
Download / Listen:
Herding Code 180: Visual Studio 2013 Web Tools, Web Essentials and Side Waffle with Mads Kristensen
Show Notes:
- Intro
- (00:34) Mads works on the ASP.NET team building tools for everything that has to do with web development. He’s also done a lot of open source development – BlogEngine.NET, Web Essentials and some other Visual Studio extensions.
- (01:25) Jon asks Mads to overview what’s new in Visual Studio. Visual Studio 2012 included a new JavaScript and CSS Editor, Visual Studio 2013 added Browser Link.
- (02:48) Visual Studio 2013 has Browser Link, which allows you to connect any browser with Visual Studio. Any extension in the browser or Visual Studio can talk to each other via a web socket connection. The refresh browser feature in Visual Studio 2013 is just a proof of concept, the real feature is the communications channel.
- (04:07) Scott K Asks about the Page Inspector feature and whether that would be integrated with Browser Link. Mads says that Page Inspector was introduced with Visual Studio 2012. It includes browser tools and source mapping which allow you to trace the markup back to what generated it, including C# code and server controls. Mads took over the Page Inspector team almost a year ago, and they’re using the same underlying engine. Right now you don’t get live updates in Page Inspector with Visual Studio 2013, but with the Web Essentials extension you will.
- (07:19 Jon asks about how the source mapping works. Mads explains that the ASP.NET runtime injects a script tag at the end of your page, and Visual Studio is listening for it to connect on a localhost endpoint. Mads explains that the Browser Link connection is only made under specific conditions – running locally, in debug, etc.
- (09:10) Jon asks about some of the recent extensions Mads has demonstrated, especially the example which tracks unused CSS class names. Mads says this has been a long requested feature, but it’s only possible to do this right from inside the browser. They’re now able to add smart tags into the CSS editor to show unused CSS classes. It’s available now using Visual Studio 2013 and Web Essentials.
- (12:24) Scott K asks if it’s possible to see which classes are overriding others. Mads said it’s not there yet, but on the way.
- (13:08) Jon asks about the process for creating an extension, and what parts are open source. Mads says that the project and item templates are open sourced. He explains the steps to create a Browser Link extension. The project template contains a C# file and a JavaScript file which are able to talk to each other. The Browser Link JavaScript contains an isolated copy of jQuery. In both the C# and JavaScript, you can call directly into the other side using simple Call methods.
- (17:23) Scott K asks if they can hook up the model binder to allow deserializing more complex types. Mads says it’s not available yet, but on the way.
- (18:00) Scott K asks if they’ve done any prototyping for unit testing automation, to allow running JavaScript testing frameworks like Jasmine with Visual Studio integration. Mads says it was part of his initial pitch for the Browser Link feature, but it hasn’t been implemented yet.
- (19:04) Jon says they could also test performance using testing automation, and Mads says that they could do quite a bit more with performance and browser testing by working with browser extensions – Page Speed, SEO, accessibility, etc. They can call off to any service anywhere on the internet.
- (21:10) Jon asks about some of the extensions and prototypes he’s worked on. Mads says he’s wrote an extension for LESS and CSS editors which updates the page as you type – without even requiring you to save the CSS document.
- (23:50) Mads talks about the inspect mode extension. When you hit ctrl-alt-I in the browser, you can hover over any DOM element and see the source in Visual Studio (including controls, views, Master Pages, partials, etc.).
- (25:35) Mad talks about design mode (ctrl-alt-d) which turns any DOM element into a content editable field, which allows you to type in the browser and change the server-side code. He talks about some complexities due to changing the server-side code which throws off the source mapping, and how when they make some future changes to allow updating source maps on the fly they’ll be able to allow pretty complex browser-based design and editing.
- (29:35) Scott K asks if they could use the shadow DOM to allow updating the source maps. Mads says that wouldn’t work with older browsers, and there’s some discussion of legacy browser support.
- (31:17) Scott K talks about a feature he liked in Brackets, which allowed viewing styles applied to a code fragment when editing HTML. He asks if he could get something like Visual Studio 2013 Code Lens to view the styles and navigate to the CSS. Mads talks about some of the complexities there, explaining how they inject ID’s into all elements and include the mapping in a JSON blob. Given an element ID, your JavaScript can look up the source file and range that corresponds to it on the server.
- Web Essentials
- (36:12) Mads talks about the history of Web Essentials. It started out in 2010, but the old Visual Studio HTML and CSS editors limited what he could do. He used Web Essentials as the test project to make sure that Visual Studio 2012 supported the extensibility API’s, then released a new version to correspond with Visual Studio 2013. He open sourced it at BUILD 2013 in June.
- (37:36) Jon asks about how Mads migrates features from Web Essentials to Visual Studio. Mads says that he does this on every Visual Studio release (including updates) which allows him to delete a lot of code. There are some features which don’t get migrated – niche features, features for which they’re still testing out the user experience. He talks about some neat features in Web Essentials that he likes, but he doesn’t think enough people use to justify migrating.
- (39:57) Jon asks about the language Web Essentials supports. Mads lists Markdown, LESS and Coffeescript. Mads talks about how they were able to include LESS and Coffeescript support from Web Essentials while waiting on the Visual Studio 2012.2 release, then removed it when that update shipped. He talks about the problems they hit due to the editor overlap. Mads said that situation caused him to change his philosophy on features to add in Web Essentials – he’ll no longer include features in Web Essentials which could cause a conflict with Visual Studio, especially compiler related features; that’s why he removed TypeScript support from Web Essentials.
- (44:14) Jon mentions robots.txt support in Web Essentials. Mads explains that this is a great example of how his personal web development frustrations turn into Web Essentials features. He’s hoping that open sourcing Web Essentials will lead other developers to contribute as well.
- Web Dev Checklist
- (46:35) Jon asks about Web Dev Checklist. Mads and Sayed were both working on building out some sites last year, and they came up with a list of important checks for any website – performance, accessibility, SEO, etc. They got on Hacker News and were happy that their site held up well under the traffic.
- Side Waffle
- (49:16) Side Waffle is a Visual Studio extension which gives you a lot of templates so you can add things to your projects which were written the write way, by experts. They’ve got Angular controllers, Durandel, robots.txt, etc. They’re hoping for other developers to add new templates.
- (51:36) Mads says that the teams at Visual Studio can’t create and maintain all the templates over time. Jon says he’s seen this again and again – new things get released but don’t always get maintained over the years. Mads says this makes it easy for developers to add and update templates.
- (53:28) Mads says Sayed came up with the name from ordering a side order of waffles in a restaurant.
- (54:24) Mads explains some of the technical complexities that he and Sayed had to deal with to allow adding new item templates to Visual Studio. Due to the strange ways they worked with MSBuild, Side Waffle isn’t allowed into the Visual Studio Gallery. They register Side Waffle as a Visual Studio gallery provider so when new templates are added, it will show up in the Visual Studio updates list. Jon’s confused, and Mads explains more about what’s going on.
- Lightning Round questions from Twitter
- (58:31) Barry Dorrans asks why Mads is pushing the #region agenda on unsuspecting HTML files.
- (59:08) Warren Buckly asks “There is support for LESS, will there ever be support for SASS?”
- (59:34) Jonas Eriksson asks Is it possible to extend the new HTML editor IntelliSense?”
- (51:52) Jonas Eriksson asks if it’s possible to start a Grunt task and monitor its output.
- (1:00:09) Saul asks how to create a static website in Visual Studio.
- (1:01:07) Bret Ferrier asks about getting Angular IntelliSense with TypeScript.
Show Links: