DEMO.md

# Visual Studio and Web Essentials - Web Tooling #

---

## Overview ##

In this demo you will perform several changes to GeekQuiz in order to showcase top web developer featuers included in the new version of Visual Studio and Web Essentials.

### Goals ###

In this demo, you will see:

1. The new HTML editor features, including HTML 5 snippets and zen coding
2. The new CSS editor features, including Color
3. Browser Link and the extension support for it
4. IDs and classes Intellisense in JavaScript

### Key Technologies ###

• Web Essentials
• Visual Studio 2013
• Browser Link

### Setup and Configuration ###

Follow these steps to setup your environment for the demo.

1. Follow the steps detailed in this link to setup local sources for the following directories:

   1. C:\Program Files (x86)\Microsoft Web Tools\Packages
   2. C:\Program Files (x86)\Microsoft ASP.NET\ASP.NET Web Stack 5\Packages

   

2. Install Web Essentials 2013 (if it is not already installed).

3. Open the GeekQuiz.sln solution located under source/begin.

4. If you don't have a user account, launch the application and register one.

5. Log-in in both Chrome and IE and select to be remembered. This will avoid having to enter the credentials during the demo.

6. Dock Visual Studio to the right and set up the layout of IE and Chrome as shown in the following figure.

   

7. In Visual Studio, open Index.cshtml in the editor.

## Demo ## This demo is composed of the following segments:

1. Browser Link and Web Essentials
2. Intellisense improvements

### Browser Link and Web Essentials ###

1. Expand the browser menu in the Visual Studio toolbar and select Browse With....

   

2. Hold down CTRL and select Google Chrome and Internet Explorer.

   

   Selecting multiple browsers

3. Click Set as Default and click Cancel.

4. Press CTRL + F5 to start debugging.

5. Replace the <!-- TODO: add options here--> comment in the index.cshtml file with the following code snippet and press TAB.

   button.btn.btn-info.btn-lg.option{Answer $}*4

6. Click the Browser Link Refresh button.

   

   Refreshing Linked Browsers

7. Click Internet Explorer (to set focus on it) and press CTRL + ALT + I.

   Speaking point: Let's change the color of the border around the question.

8. Place the mouse over the light blue border and click on it, as shown in the following figure.

   

   Inspecting the Border

   Speaking point: Note that the element and its children are highlighted in Visual Studio. Now we know which CSS class we need to change.

9. Back in Visual Studio, press CTRL + ,, type site.css and press ENTER.

   

   Opening the Site.css file

10. Scroll to the bottom of the file.

    

    Scrolling to the botton of the file

11. Click the light blue square that is part of the border property of the .flip-container .front class.

    

    Opening the Color Picker

12. Expand the color picker by clicking the button with the chevrons, circled in the following figure.

    

    Expanding the Color Picker

13. Select a new color, close the color picker and press CTRL + ALT + ENTER to update the browsers.

    

    Updating the Border color

14. Open the Index.cshtml editor.

15. Click Google Chrome (to set focus on it) and press CTRL + ALT + D.

16. Place the mouse over the question's title and click on it, as shown in the following figure.

    

    Editing the Question

17. Update the original text with What does it look like when I write a longer question?.

    Speaking point: Explain that the VS editor is updated and changes are saved automatically.

18. Back in Visual Studio, click the Browser Link Refresh button so IE is refreshed.

1. Expand the Error List window and double-click the SEO related warning.

   

   Opening the SEO warning

2. When asked if you would like to insert a <meta> tag, click Yes. The editor for _Layout.cshtml is opened an the following code is automatically added.

   <meta name="description" content="The description of my page" />

3. Change the value of the content attribute to GeekQuiz and save the file.

Snippets and Intellisense

1. Switch back to the Index.cshtml editor.

2. Add the following code inside the <section> element.

   <form>
   	 <input type="text" id="name" />
   </form>

3. Type <label for=" inside the <form> element. As shown in the following figure, there is intellisense based on the Id of elements within the same valid scope (the <form>).

   

   Showing the id Intellisense

4. Delete the recently added <form> element and all its content.

5. Type <aud inside the <section> element as shown in the following figure.

   

   Inserting a audio element

   Note: This demo segment adds an <audio> element to the page to showcase HTML 5 snippet support. This is meant to be a joke and the changes will be deleted, since we don't actually want to add audio to the site.

6. Press TAB twice. The following code will be added.

   <audio controls="controls">
   	 <source src="file.mp3" type="audio/mp3" />
   	 <source src="file.ogg" type="audio/ogg" />
   </audio>

7. Delete the second line and update the source of the first one with the following link to the WebCampsTV Katana show: http://media.ch9.ms/ch9/11d8/604b8163-fad3-4f12-9607-b404201211d8/KatanaProject.mp3. The resulting code is shown below.

   <audio controls="controls">
   	 <source src="http://media.ch9.ms/ch9/11d8/604b8163-fad3-4f12-9607-b404201211d8/KatanaProject.mp3" type="audio/mp3" />
   </audio>

8. Add the following code at the bottom of the file.

   @section Scripts {
   	<script src="~/Scripts/init.js"></script>
   }

9. In Solution Explorer, right-click the Scripts folder, expand the Add menu and select JavaScript File.

   

   Adding a Javascript File]

10. Name the file init and click OK.

11. Add the following code to the new JS file.

    (function () {
    	 $(document).ready(function () {
    		  
    	 });
    }());

12. Type document.getElementsByClassName("") in the first line of the ready callback, as shown in the following figure.

    

    Showing Intellisense for the getElementsByClassName method

13. Delete that line.

14. Type var audioElements = document.getElementsByTagName("au") in the first link of the ready callback, as shown in the following figure.

    

    Showing Intellisense for the GetElementByTagName method

15. Select "audio" and press Enter. The result is shown in the following figure.

    

    Retrieving Audio Elements

16. Add the following code below the line you just typed.

    var len = audioElements.length;
    for (var i = 0; i < len; i++) {
    	 audioElements[i].play();
    }	

17. Click the Browser Link Refresh button. Once the pages are refreshed, audio will start playing.

18. Close both browser windows.

19. Delete the <audio> element and the @section Scripts.

    Speaking point: We don't really want our site to have audio (it seems a bit 1990s), so let's get rid of these things we have added.

---

## Summary ##

By completing this demo you should have showcased the featuers included in the new version of Visual Studio and Web Essentials while updating GeekQuiz:

1. Zen Coding for creating the buttons
2. CSS Color Picke for updating the color of the container's border
3. Browser Link to refresh changes done in Visual Studio automatically
4. Browser Link Extensions to reflect changes done in the browser in the source code
5. SEO warnings
6. IDs and JavaScript Intellisense
7. HTML 5 code snippets for adding audio

---