Visual-Studio-and-Web-Essentials

Visual Studio and Web Essentials - Web Tooling

Note: Many of the features in this demo (e.g. Browser Link) do not work in the ASP.NET 5 RC1 release. Support is being adding in Visual Studio web tools for ASP.NET Core, but is not available yet. You can complete this demo using a new ASP.NET MVC 5 application (File / New / ASP.NET 5) until they are supported in ASP.NET Core.

---

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 2015
• Browser Link

Setup and Configuration

Follow these steps to setup your environment for the demo.

1. Install Web Extension Pack (if it is not already installed).

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

3. Dock Visual Studio to the right and set up the layout of Microsoft Edge and Chrome as shown in the following figure.

   

4. 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. Snippets and Intellisense

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 Microsoft Edge.

   

   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 Microsoft Edge (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?.

    

    Updating the 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.

    

    Refreshing Linked Browsers

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

    

    Opening the SEO warning

20. When asked if you would like to insert a <meta> tag, click Yes.

    

    Adding the description meta tag

21. The editor for _Layout.cshtml is opened an the following code is automatically added.

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

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

    <meta name="description" content="GeekQuiz" />

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="~/js/init.js"></script>
   }

9. In Solution Explorer, right-click the js folder located in wwwroot, expand the Add menu and select New Item....

   

   Adding a Javascript File

10. In the Add New Item dialog box, select JavaScript File under the DNX | Client-Side, name the file init.js and click Add.

    

    Adding the init.js file

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.

    

    Refreshing Linked Browsers

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 features included in the new version of Visual Studio and Web Essentials while updating GeekQuiz:

1. Zen Coding for creating the buttons
2. CSS Color Picker 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

---