tag:blogger.com,1999:blog-57044502024-03-16T05:52:18.523-07:00Vishal Joshi's TangentVishal R Joshihttp://www.blogger.com/profile/05217117734084631137noreply@blogger.comBlogger294125tag:blogger.com,1999:blog-5704450.post-85379378106325987502014-06-26T07:43:00.000-07:002014-06-26T07:43:00.288-07:00Setting up DevOps for a Startup on Day Zero<p><a href="http://channel9.msdn.com/Niners/Glucose">Scott Hanselman</a> & I created our imaginary startup HanselJosh and the first thing we did was to get DevOps going on Day 0. Here is your 15 mins look on how to get your DevOps rolling by creating a new team Project, a web site with SQL database backing it, setting up continuous integration from a Git repository, coding within Visual Studio using ASP.NET and then browsing the deployed code in the new Azure portal. <p><a href="http://channel9.msdn.com/Shows/Azure-Friday/Vishal-and-Scott-create-a-new-startup-with-the-new-Azure-Portal/player?h=540&w=960" target="_blank"><img title="StartupAzureportal" style="border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px; display: inline" border="0" alt="StartupAzureportal" src="http://lh6.ggpht.com/-xFGq1z4A4zg/U6jmcUrUsyI/AAAAAAAAEZI/iIECOD988iU/StartupAzureportal%25255B3%25255D.png?imgmax=800" width="785" height="444"></a> <p>Areas covered in this video: <ul> <li> Creating a new Team Project after choosing version control, process template, etc. <li> Create a web site + SQL and configure it <li> Create new database and configure it <li> Open the repository in Visual Studio from the new Azure Portal <li> Clone the repository using the Git integration in Visual Studio <li> Create a new ASP.NET web site <li> Set up continuous deployment/integration <li> Commit and sync the project to Azure <li> Browse the deployed code</li></ul> <p>Useful topics and links: <ul> <li><a href="http://portal.azure.com/">The Azure Preview Portal</a> – Tour and learn more about the Azure portal.</li></ul> <p>Related Videos: <ul> <li><a href="http://channel9.msdn.com/Shows/Azure-Friday/Overview-of-the-new-Azure-Portal-with-Vishal-Joshi">Overview of the new Azure Portal with Vishal Joshi</a> <li><a href="http://channel9.msdn.com/Shows/Cloud+Cover/Episode-139-Exploring-the-New-Azure-Portal">Exploring the New Azure Portal</a></li></ul> Vishal R Joshihttp://www.blogger.com/profile/05217117734084631137noreply@blogger.com0tag:blogger.com,1999:blog-5704450.post-15575854914161649232014-06-25T07:31:00.000-07:002014-06-25T07:31:00.154-07:00Video: Azure Resource Manager, Portal and more<p><a href="https://twitter.com/intent/follow?original_referer=http%3A%2F%2Fchannel9.msdn.com%2FShows%2FCloud%2BCover%2FEpisode-139-Exploring-the-New-Azure-Portal&screen_name=ntotten&tw_p=followbutton&variant=2.0&xd_token=d92d824dd2d7f8" target="_blank">Nathan</a> & I got an opportunity to join <a href="https://twitter.com/intent/follow?original_referer=http%3A%2F%2Fchannel9.msdn.com%2FShows%2FCloud%2BCover%2FEpisode-139-Exploring-the-New-Azure-Portal&screen_name=chrisrisner&tw_p=followbutton&variant=2.0&xd_token=52a9965059163" target="_blank">Chris</a> on <a href="https://twitter.com/intent/follow?original_referer=http%3A%2F%2Fchannel9.msdn.com%2FShows%2FCloud%2BCover%2FEpisode-139-Exploring-the-New-Azure-Portal&screen_name=cloudcovershow&tw_p=followbutton&variant=2.0&xd_token=f0292909e8465" target="_blank">Cloud Cover</a> show to discuss how to make building cloud based apps easier using Azure resource manager, Visual Studio Online and Azure portal. We also talked about dashboards, Resource Groups, Journeys, Continuous Deployment, Visual Studio Online integration, Analytics, Monitoring, Hosting Plans, Billing etc. Hope you find it useful! <p><a href="http://channel9.msdn.com/Shows/Cloud+Cover/Episode-139-Exploring-the-New-Azure-Portal/player?h=540&w=960" target="_blank"><img title="CloudCover" style="border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px; display: inline" border="0" alt="CloudCover" src="http://lh6.ggpht.com/-c1UgD-n_HEg/U6jjI1B2eVI/AAAAAAAAEY8/SeNJjFNuBgo/CloudCover%25255B3%25255D.png?imgmax=800" width="785" height="442"></a> <p>Useful links from the show: <ul> <li><a href="http://portal.azure.com/">The Azure Preview Portal</a> <li><a href="http://blogs.msdn.com/b/windowsazure/archive/2014/04/04/introducing-web-hosting-plans-for-azure-web-sites.aspx">Article on Hosting Plans</a></li></ul> Vishal R Joshihttp://www.blogger.com/profile/05217117734084631137noreply@blogger.com0tag:blogger.com,1999:blog-5704450.post-14191873865437735702014-06-23T18:55:00.001-07:002014-06-23T18:55:40.151-07:00From the ground up: Building the Microsoft Azure Preview Portal<p> </p> <p><a href="http://www.twitter.com/brado_23">Brad Olenick</a> and I had a chance to sync with Cory about how we built the new <a href="http://portal.azure.com/">Microsoft Azure Preview Portal</a>. During this show we dig into the reasoning behind the new portal, what it is build with under the covers and the design decisions made along the way. This show actually contains early mocks of the portal, some point in time screenshots and other fun exclusive content hope you will enjoy it. <p><strong><a href="http://channel9.msdn.com/Shows/Web+Camps+TV/From-the-ground-up-on-the-Microsoft-Azure-Preview-Portal/player?h=540&w=960" target="_blank"><img title="BuildingAzurePortal" style="border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px; display: inline" border="0" alt="BuildingAzurePortal" src="http://lh5.ggpht.com/-J-g10ZCELH4/U6jamO5ktJI/AAAAAAAAEYs/sILBnee2nk8/BuildingAzurePortal%25255B3%25255D.png?imgmax=800" width="785" height="443"></a> </strong> <p><strong>Technologies Used</strong> <ul> <li><a href="http://www.asp.net/web-api">ASP.NET Web API</a> <li>HTML <li><a href="http://lesscss.org/">LESS</a> (CSS pre-processor) <li><a href="http://www.typescriptlang.org/">TypeScript</a> (JavaScript superset) <li><a href="http://knockoutjs.com/">Knockout</a> <li><a href="http://d3js.org/">D3.js</a> <li><a href="http://www.requirejs.org/">RequireJS</a></li></ul> Vishal R Joshihttp://www.blogger.com/profile/05217117734084631137noreply@blogger.com0tag:blogger.com,1999:blog-5704450.post-22415449589750963422014-05-20T09:50:00.000-07:002014-05-23T10:13:49.789-07:00Managing billing and saving money with the new Azure Portal<div dir="ltr" style="text-align: left;" trbidi="on">
In this Azure Friday video, <a href="http://channel9.msdn.com/Niners/Glucose">Scott Hanselman</a> and I dig into the new Azure Portal and explore how best to save money and be aware of your bill and resources. <br>
Areas covered in this video: <br>
<ul>
<li> Azure Portal </li>
<li> Billing Hub </li>
<li> Subscriptions </li>
<li> Cost by resource </li>
<li> Dashboard</li>
</ul>
<a href="http://channel9.msdn.com/Shows/Azure-Friday/Managing-billing-and-saving-money-with-the-new-Azure-Portal/player?h=540&w=960"><img alt="ManagingMoney" border="0" src="http://lh6.ggpht.com/-HXwTOfkWI74/U3PXMaJN3wI/AAAAAAAAES4/BFnwzITm1_g/ManagingMoney%25255B3%25255D.png?imgmax=800" height="442" style="border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: inline;" title="ManagingMoney" width="785"></a> <br>
Useful topics and posts: <br>
<ul>
<li><a href="http://portal.azure.com/">The Azure Preview Portal</a> </li>
<li><a href="http://blogs.msdn.com/b/windowsazure/archive/2014/04/04/introducing-web-hosting-plans-for-azure-web-sites.aspx">Introducing Web Hosting Plans for Azure Web Sites</a> </li>
<li><a href="http://blogs.msdn.com/b/bharry/archive/2014/04/03/visual-studio-online-integration-in-the-azure-portal.aspx">Visual Studio Online Integration in the Azure portal</a></li>
</ul>
Related Videos: <br>
<ul>
<li><a href="http://channel9.msdn.com/Shows/Azure-Friday/Overview-of-the-new-Azure-Portal-with-Vishal-Joshi">Overview of the new Azure Portal with Vishal Joshi</a> </li>
<li><a href="http://channel9.msdn.com/Shows/Cloud+Cover/Episode-139-Exploring-the-New-Azure-Portal">Exploring the New Azure Portal</a></li>
</ul>
<br>
<br>
<br>
<br>
</div>
Vishal R Joshihttp://www.blogger.com/profile/05217117734084631137noreply@blogger.com0tag:blogger.com,1999:blog-5704450.post-52664535884241998672014-05-16T09:30:00.000-07:002014-05-19T15:23:59.200-07:00Channel 9 Live: Enabling DevOps with Azure<div dir="ltr" style="text-align: left;" trbidi="on">
Brian Keller chatted with Jonah & I on Channel 9 LIVE at the //build 2014 conference just after the launch of new Azure portal. We chatted about several things about how the new design came about and also about funny things including failiens and HTTP 520 error, hope you will enjoy this.<br />
<a href="http://channel9.msdn.com/Events/Build/2014/9-012/player?h=540&w=960"><img alt="C9Live" border="0" src="http://lh6.ggpht.com/-M-gGzcToTFY/U3PBkTwhGUI/AAAAAAAAESQ/-GzeLi8NTsE/C9Live%25255B6%25255D.png?imgmax=800" height="456" style="border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: inline;" title="C9Live" width="772" /></a></div>
Vishal R Joshihttp://www.blogger.com/profile/05217117734084631137noreply@blogger.com0tag:blogger.com,1999:blog-5704450.post-18930869626438579932014-05-15T09:00:00.000-07:002014-05-18T18:53:00.447-07:00Overview of new Azure portal<div dir="ltr" style="text-align: left;" trbidi="on">
In this Azure Friday episode, I give a tour around the new Azure portal to <a href="http://channel9.msdn.com/Niners/Glucose">Scott Hanselman</a>. We will talk about blades, hubs, journeys, lenses and more. <br />
<a href="http://channel9.msdn.com/Shows/Azure-Friday/Overview-of-the-new-Azure-Portal-with-Vishal-Joshi/player?h=540&w=960"><img alt="AzureFridayOverview" border="0" src="http://lh4.ggpht.com/-hjcLwicmufw/U3PTww35lqI/AAAAAAAAESg/KTzQayQlFFo/AzureFridayOverview%25255B10%25255D.png?imgmax=800" height="442" style="border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: inline;" title="AzureFridayOverview" width="740" /></a> <br />
Areas covered in this video: <br />
<ul>
<li> Azure Portal </li>
<li> Azure hubs, blades, lenses, journeys </li>
<li> Customizing the Azure UI </li>
<li> Azure console </li>
<li> Azure templates</li>
</ul>
Useful topics and posts: <br />
<ul>
<li><a href="http://portal.azure.com/">The Azure Preview Portal</a> </li>
<li><a href="http://blogs.msdn.com/b/windowsazure/archive/2014/04/04/introducing-web-hosting-plans-for-azure-web-sites.aspx">Introducing Web Hosting Plans for Azure Web Sites</a> </li>
<li><a href="http://blogs.msdn.com/b/bharry/archive/2014/04/03/visual-studio-online-integration-in-the-azure-portal.aspx">Visual Studio Online Integration in the Azure portal</a></li>
</ul>
Related Videos: <br />
<ul>
<li><a href="http://channel9.msdn.com/Shows/Cloud+Cover/Episode-139-Exploring-the-New-Azure-Portal">Exploring the New Azure Portal</a> </li>
<li><a href="http://channel9.msdn.com/Events/Build/2014/9-012">Enabling DevOps with Azure and Visual Studio Online</a></li>
</ul>
<br />
<br />
<br />
<br /></div>
Vishal R Joshihttp://www.blogger.com/profile/05217117734084631137noreply@blogger.com0tag:blogger.com,1999:blog-5704450.post-90053001980788223892014-05-14T10:41:00.000-07:002014-05-14T13:46:08.512-07:00New Azure Portal – Trailer<div dir="ltr" style="text-align: left;" trbidi="on">
For last year and half I have gone dark on my blog and it has been because of the secret project I have been working on. Dreaming something crazy, forming the team, making something which is not attempted before, working with huge breadth of partners, simplifying complex scenarios to make it approachable by millions of customers, shipping it & finally users loving it is an awesome feeling which building the new Azure user experience has given everyone in my team. <br />
In some shape or form the goal was to re-imagine how cloud needs to be in the future and just before the release I spent sometime trying to build this 3 min video to give you a trailer of <a href="http://portal.azure.com/">http://portal.azure.com</a>. You can also find it on <a href="http://azure.com/">http://azure.com</a> Hope you enjoy it.<br />
<a href="http://channel9.msdn.com/Blogs/Windows-Azure/Azure-Preview-portal/player"><img alt="Trailer" border="0" src="http://lh5.ggpht.com/-x5K260TCmCQ/U3OqcT_ozbI/AAAAAAAAESE/2f3PJnrBRFw/Trailer%25255B7%25255D.png?imgmax=800" height="470" style="border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: inline;" title="Trailer" width="787" /></a></div>
Vishal R Joshihttp://www.blogger.com/profile/05217117734084631137noreply@blogger.com0tag:blogger.com,1999:blog-5704450.post-9720953758841665722012-09-18T01:50:00.001-07:002013-03-12T22:52:37.700-07:00Continuous Deployment from GitHub to Windows Azure<div dir="ltr" style="text-align: left;" trbidi="on">
On June 6<sup>th</sup> we <b>released Windows Azure Web Sites,</b> which is a rock solid and scalable way to host your .NET, PHP or Node.js websites. You can deploy to Azure Web Sites using Git. You can learn about that and many other Windows Azure Web Site features in <a href="http://bit.ly/OUXZRp">this introductory video that I recently did for our Windows Server 2012 launch event</a>.<br />
When you set-up Git publishing in Azure we create backend Git repo using our OSS project <a href="http://github.com/projectkudu/kudu">Kudu</a>. You can then use this repos’ Git URL to happily <b>git push azure master</b>. Needless to say this option is still available to you. In addition, today we are taking the Git deployment features to the next level by enabling direct service integrations with CodePlex and Github.<br />
Many customers have been asking that instead of having to push to azure directly every time, wouldn’t it be nice if you and your team could simply continue pushing to CodePlex/Github and then behind the scenes Azure could wake up and take the latest commits from your central source repo and update the site. Well, I am glad to let you know that this is feasible now.<br />
In this post I am going to focus on showing you how to take your website source code hosted in Github and hook up deployment of the sources to Windows Azure in a continuous deployment fashion. I am hoping to make this into a guided step by step walkthrough with minimal expectation of pre-requisites so hopefully you can follow along and have a great experience along the way.<br />
If you prefer video over a walkthrough then checkout <a href="http://www.youtube.com/watch?v=5NGieL0tinw&feature=youtu.be&hd=1">Enabling Continuous Deployment with Windows Azure Websites and Github</a><br />
To start <b>you will need following 100% FREE </b><b> pre-requisites</b>.<br />
<b>Required</b><br />
· You need to have an account on <a href="https://github.com/">https://Github.com/</a><br />
· You need to have Git on your machine. To get Git on your machine follow the instructions <a href="https://help.github.com/articles/set-up-git">here</a><br />
· You need to have a Windows Azure Account. If not then get one for free <a href="http://bit.ly/vishalAzure">here</a>!!<br />
<b>Recommended</b><br />
· I will use node.js during the walkthrough but this will work even if you want to use PHP or ASP.NET. You can have a clean machine and we will do the required setups along the way. <br />
· I will be using the free web development tool - <a href="http://webmatrix.com/">WebMatrix</a>, which will facilitate set-up of node.js if required. If you have not already, install WebMatrix 2 from <a href="http://go.microsoft.com/?linkid=9809776">here</a>. <br />
· I will be using SSH based push to Github. If you want to use SSH then learn how to <a href="https://help.github.com/articles/generating-ssh-keys">generate & use SSH keys for Github</a>. Alternatively, you can ignore SSH part and use HTTPS and still follow along the walkthrough below.<br />
· Learn about Windows Azure Web Sites via <a href="http://bit.ly/OUXZRp">video</a> or <a href="https://www.windowsazure.com/en-us/home/scenarios/web-sites/">article</a>. <br />
With pre-requisites behind us let us get started.<br />
<h4>
Step 1 – Find web site sources hosted on Github which you want to deploy to Azure</h4>
I am going to use the ExpressStarter site which <a href="http://jbeckwith.com/">Justin Beckwith</a> on our team wrote. I just made a fork to the site for demo purposes.<br />
<a href="http://lh6.ggpht.com/-lnbkP0GLf_s/UFj9UxlaI-I/AAAAAAAABzA/wIfmkXiu6Fk/s1600-h/clip_image00242.jpg"><img alt="clip_image002[4]" border="0" height="170" src="http://lh3.ggpht.com/-WD-FGEZoKB8/UFj9VkUA2CI/AAAAAAAABzI/Gak7ZQ-u-lg/clip_image0024_thumb.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image002[4]" width="624" /></a><br />
Notice the highlighted “Fork” button, click it and you will get your own copy of the ExpressStarter template. Once you fork it you will get both SSH and HTTP end points to your git repo. My <b><i>URL</i></b> looks like below<br />
HTTPS: https://Github.com/VishalRJoshi/ExpressStarter.git<br />
SSH: git@Github.com:VishalRJoshi/ExpressStarter.git<br />
I will be using these repo urls in the follow up steps:<br />
<h4>
Step 2 – Clone the Github repo locally on your machine</h4>
Open command prompt on your machine and navigate to a folder in which you would like to create the site. In my case I have navigated to C:\demos\GithubHooks. Now just type the command<br />
git clone <b><i>URL</i></b><br />
Since I am using SSH my command is going look like below: <a href="http://lh5.ggpht.com/-R1CIuGHSeS8/UFj9WkBGxsI/AAAAAAAABzQ/Ep3krBnNEPg/s1600-h/clip_image00442.jpg"><img alt="clip_image004[4]" border="0" height="139" src="http://lh6.ggpht.com/-DSgFN54d944/UFj9XMLlc7I/AAAAAAAABzY/a6qQvGNLz7Q/clip_image0044_thumb.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image004[4]" width="624" /></a><br />
Once the clone is complete the command prompt should look like:<br />
<a href="http://lh3.ggpht.com/-jcKQoJIll3s/UFj9XYGZ4LI/AAAAAAAABzg/3pSk45j0-tM/s1600-h/clip_image00542.png"><img alt="clip_image005[4]" border="0" height="179" src="http://lh5.ggpht.com/-9Q23lbIVM-A/UFj9X0lJtII/AAAAAAAABzo/R6ZV2CNpRs4/clip_image0054_thumb.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image005[4]" width="629" /></a><br />
<h4>
Step 3 – Make a quick change locally and push to Github </h4>
I am going to use WebMatrix for making the change especially because it supports <a href="http://jbeckwith.com/2012/06/07/node-js-meet-webmatrix-2/">bunch of node.js features</a>. You can get WebMatrix 2 for free from <a href="http://webmatrix.com/">http://webmatrix.com</a> Note: WebMatrix is not supported on Mac so if you are on Mac please use any other text editor that you would like and skip the WebMatrix steps:<br />
Once you open WebMatrix it should look like below:<br />
<a href="http://lh5.ggpht.com/-GSReo1ogoj4/UFj9YLAUa7I/AAAAAAAABzw/euHaSkm9PaM/s1600-h/clip_image00642.png"><img alt="clip_image006[4]" border="0" height="361" src="http://lh4.ggpht.com/-eAolpoEsvNc/UFj9YuqNuBI/AAAAAAAABz4/0MFVqsujAtY/clip_image0064_thumb.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image006[4]" width="562" /></a><br />
Click “Open Site” à “Folder as Site” and navigate to the folder “ExpressStarter” under the directory where you ran the git clone command:<br />
<a href="http://lh5.ggpht.com/-g_Iezle0ssw/UFj9ZCCEKtI/AAAAAAAAB0A/PepIt5Dj6kk/s1600-h/clip_image00842.jpg"><img alt="clip_image008[4]" border="0" height="325" src="http://lh3.ggpht.com/-1CluP-9CpgU/UFj9ZWQZVBI/AAAAAAAAB0I/_Gn4X9RWCTg/clip_image0084_thumb.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image008[4]" width="624" /></a><br />
Hitting “Select Folder” will trigger WebMatrix to identify your site to be node.js site as below:<a href="http://lh5.ggpht.com/-OQeLKIBYw_k/UFj9aNzUuBI/AAAAAAAAB0Q/z-VZLi-PidA/s1600-h/clip_image01042.jpg"><img alt="clip_image010[4]" border="0" height="187" src="http://lh4.ggpht.com/-CSgJX6dYR0A/UFj9aQhCOqI/AAAAAAAAB0Y/G2eoSb3ReXg/clip_image0104_thumb.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image010[4]" width="624" /></a><br />
Hit “Continue” and you will be presented with a EULA screen like below.<br />
<a href="http://lh4.ggpht.com/-Uq5wlnLDxns/UFj9ai8JzeI/AAAAAAAAB0c/glBY1igVsTk/s1600-h/clip_image01242.jpg"><img alt="clip_image012[4]" border="0" height="453" src="http://lh3.ggpht.com/-Dw0LLs3Mr7Y/UFj9bgCEF6I/AAAAAAAAB0o/JIuFcoIFvmw/clip_image0124_thumb.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image012[4]" width="624" /></a><br />
Accept the EULA and at this point if you do not have node.js/npm/iisnode installed on your machine WebMatrix is going to install it for you. You should see a progress screen like below:<br />
<a href="http://lh3.ggpht.com/-guqUxbmbLiE/UFj9cK9mACI/AAAAAAAAB0w/VmOlYB2mhn4/s1600-h/clip_image01442.jpg"><img alt="clip_image014[4]" border="0" height="461" src="http://lh5.ggpht.com/-YdTayViSVr8/UFj9chCyqFI/AAAAAAAAB04/lMHYiQdQuSQ/clip_image0144_thumb.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image014[4]" width="624" /></a><br />
And once all the installation is complete you should be able to run you site locally by hitting the “Run” button in the WebMatrix ribbon.<br />
<a href="http://lh6.ggpht.com/-IX3uaGWpq0U/UFj9c6TqT6I/AAAAAAAAB1A/dyQO8FSIYFI/s1600-h/clip_image01542.png"><img alt="clip_image015[4]" border="0" height="121" src="http://lh3.ggpht.com/-lQbJp_cGXIo/UFj9dSrJEcI/AAAAAAAAB1I/Z8erEukyq2o/clip_image0154_thumb.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image015[4]" width="338" /></a><br />
If for any reason you see your browser saying something like below, please email me at <a href="mailto:vishal.joshi@microsoft.com">vishal.joshi@microsoft.com</a> or send a tweet <a href="http://twitter.com/vishalrjoshi">@vishalrjoshi</a>.<br />
<a href="http://lh4.ggpht.com/-_GtjqIGIA2s/UFj9dlqFmGI/AAAAAAAAB1Q/AkflBvOveVI/s1600-h/clip_image01742.jpg"><img alt="clip_image017[4]" border="0" height="157" src="http://lh5.ggpht.com/-ddpBLX6az_k/UFj9eqVWcLI/AAAAAAAAB1Y/HV7HnKxOy1A/clip_image0174_thumb.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image017[4]" width="624" /></a><br />
Ideally, you will not get the screen above and your running site should look as below:<br />
<a href="http://lh4.ggpht.com/-MLDTyvmJAlI/UFj9fMmvFTI/AAAAAAAAB1g/kmGTeWxMn9s/s1600-h/clip_image0193.jpg"><img alt="clip_image019" border="0" height="324" src="http://lh3.ggpht.com/-5d417EM7Vwo/UFj9gn3AMqI/AAAAAAAAB1o/g-W-Ne__5tw/clip_image019_thumb.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image019" width="624" /></a><br />
Now, Let us now make a quick change. Click on the “Files” workspace at the left bottom corner of WebMatrix<br />
<a href="http://lh6.ggpht.com/-OdTfiF5cNvA/UFj9gxzqMqI/AAAAAAAAB1w/at-_SDeazH4/s1600-h/clip_image02042.png"><img alt="clip_image020[4]" border="0" height="119" src="http://lh4.ggpht.com/-MbCX4pytF6U/UFj9h7xMrUI/AAAAAAAAB14/cqz-0DKe4b0/clip_image0204_thumb.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image020[4]" width="210" /></a><br />
Now expand the treeview to layout.jade and make the quick change from “Your logo here” to something like “My Awesome Github Site”<br />
<a href="http://lh6.ggpht.com/-0eGn9zJGAbc/UFj9ieMIvgI/AAAAAAAAB2A/D7c8S45SYrI/s1600-h/clip_image02142.png"><img alt="clip_image021[4]" border="0" height="427" src="http://lh6.ggpht.com/-QMiaTMhYA88/UFj9i_vGQbI/AAAAAAAAB2I/ciwJtcdLta4/clip_image0214_thumb.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image021[4]" width="652" /></a><br />
You can hit the run button and see the change locally on the new node.js site if you like. With that, we are ready to push this change back to Github. Let us go back to the command prompt<br />
First change the directory to “ExpressStarter” as you will be one level above as shown below:<br />
<a href="http://lh4.ggpht.com/-o4DjNdXUY3w/UFj9jDY_hJI/AAAAAAAAB2Q/Q8y_U2IvUbI/s1600-h/clip_image02242.png"><img alt="clip_image022[4]" border="0" height="204" src="http://lh3.ggpht.com/-J6PHY0oFpFM/UFj9jac9gCI/AAAAAAAAB2Y/abZaVHlcp8I/clip_image0224_thumb.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image022[4]" width="632" /></a><br />
Next type the command <b>git status. </b>This will tell you what all files have been modified by you locally. Your git status command should show only one file changed<br />
<a href="http://lh6.ggpht.com/-VA0MY4096UA/UFj9jwZW-RI/AAAAAAAAB2g/1JT2o3Vwwms/s1600-h/clip_image02342.png"><img alt="clip_image023[4]" border="0" height="172" src="http://lh4.ggpht.com/-cFxaW27np30/UFj9uaPW8EI/AAAAAAAAB2o/HBhjdS2Kc4w/clip_image0234_thumb.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image023[4]" width="636" /></a><br />
Now we want to commit this change to our local git repository. To do this we will type type the command <b>git commit –am “My Awesome Github Site”</b><br />
<a href="http://lh6.ggpht.com/-E890t4UBtVc/UFj9unP_EBI/AAAAAAAAB2w/qbMLiEj5v8Y/s1600-h/clip_image0243.png"><img alt="clip_image024" border="0" height="73" src="http://lh3.ggpht.com/-_WfSP3yT6_k/UFj9vGdGh_I/AAAAAAAAB24/76GiuZ2x6yc/clip_image024_thumb.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image024" width="610" /></a><b></b><br />
Now that our change is committed locally we are going to push the change up to Github. To do that we simply have to type <b>git push origin master</b><br />
Since I am using SSH keys I will not be asked for any password, but if you are using HTTPS then you might have to type your Github password at this point. Nevertheless the result should be as below:<br />
<a href="http://lh5.ggpht.com/-65vlKtG5wjs/UFj9vUBfBqI/AAAAAAAAB3A/M_qHhY8KTGs/s1600-h/clip_image0253.png"><img alt="clip_image025" border="0" height="158" src="http://lh5.ggpht.com/-Wq2YpOnsh-g/UFj9vlA698I/AAAAAAAAB3I/_jOYRH_k7b8/clip_image025_thumb.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image025" width="617" /></a><br />
If we now go and check the Commit history on my repo in Github it should show something like:<br />
<a href="http://lh4.ggpht.com/-8ABwaKOuYQ4/UFj9wP0n7bI/AAAAAAAAB3Q/BqlmRG-3ls0/s1600-h/clip_image02742.jpg"><img alt="clip_image027[4]" border="0" height="277" src="http://lh5.ggpht.com/-Ba0vhJwoS0k/UFj9wpSic9I/AAAAAAAAB3Y/PVTzvhXv3VI/clip_image0274_thumb.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image027[4]" width="624" /></a><br />
At this point you have a working local site with a local git repo. You have also remote central git repo in Github. You are also able to make changes locally and push them to Github. You can also authorize other developers in your team to this Github repository and they too can push their local changes to Github.<br />
Our next goal here is to keep your workflow with Github exactly the same but in the process of pushing to Github we also want to be able to have the site up and running in Windows Azure. Do note so far we did not have Windows Azure in picture at all but now let’s set that up next.<br />
<h4>
Step 4 – Create a new site in Windows Azure</h4>
By now I assume you already have a free Azure account created, if not, create one <a href="http://bit.ly/vishalAzure">here</a>!! Once you have the account click on “Portal” button near top right of <a href="http://windowsazure.com/">http://windowsazure.com</a><br />
Now click on “+” icon on the bottom left of your Portal and you should get the below screen.<br />
Select Compute à Web Site à Quick Create and name your site something unique. You can choose the region and subscription of your choice. If you are using the free trial subscription than that is what will be selected by default.<a href="http://lh3.ggpht.com/-acK0C9Q2dv4/UFj9w7avuqI/AAAAAAAAB3g/zvGlqULkMtE/s1600-h/clip_image02942.jpg"><img alt="clip_image029[4]" border="0" height="431" src="http://lh5.ggpht.com/-z0s_YzOKr9E/UFj9xBhQpaI/AAAAAAAAB3o/chiW0I9Cpu8/clip_image0294_thumb.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image029[4]" width="624" /></a><br />
Now hit “Create Web Site” and wait for a few seconds. Your site should get running soon.<br />
<a href="http://lh5.ggpht.com/-n_6X1sLe1eI/UFj9xWXL_-I/AAAAAAAAB3s/0AqSWQKX8hc/s1600-h/clip_image03142.jpg"><img alt="clip_image031[4]" border="0" height="132" src="http://lh5.ggpht.com/-IL7ryL6Pxas/UFj9xoXSSgI/AAAAAAAAB34/4-9iLCVrrGc/clip_image0314_thumb.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image031[4]" width="624" /></a><br />
<h4>
Step 5 – Enable Git Publishing for the new site</h4>
Next step is to enable “Git Publishing” for your new Azure site. To do that click on the site above to visit the dashboard and click “Setup Git Publishing”<br />
<a href="http://lh6.ggpht.com/-kTgHk62-ics/UFj9yBpxFMI/AAAAAAAAB4A/WNzlnJl9S90/s1600-h/clip_image03342.jpg"><img alt="clip_image033[4]" border="0" height="436" src="http://lh4.ggpht.com/-zyOEN3WjLTQ/UFj9yp21wAI/AAAAAAAAB4I/tZ6wAhnmRxU/clip_image0334_thumb.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image033[4]" width="624" /></a><br />
This should show you some progress message and then land you on the below screen:<br />
<a href="http://lh5.ggpht.com/-4SbpAZQ7v04/UFj9zkZ-sjI/AAAAAAAAB4Q/DQXOaIh-wz0/s1600-h/clip_image03542.jpg"><img alt="clip_image035[4]" border="0" height="327" src="http://lh3.ggpht.com/-7Yns8a3_zOg/UFj9z_pvRTI/AAAAAAAAB4Y/MtkOnCDwQwM/clip_image0354_thumb.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image035[4]" width="624" /></a><br />
Open the flap which says “Deploy from my Github project” which should have the link “Authorize Windows Azure” as shown below:<br />
<a href="http://lh5.ggpht.com/-5SeH7-sMBFY/UFj90epL7cI/AAAAAAAAB4g/jPTjuRm8D2U/s1600-h/clip_image03742.jpg"><img alt="clip_image037[4]" border="0" height="241" src="http://lh5.ggpht.com/-t3_0XDrCxjw/UFj90uHKBaI/AAAAAAAAB4o/g9JsuwPi3SE/clip_image0374_thumb.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image037[4]" width="624" /></a><br />
Clicking the “Authorize Windows Azure” to your Github repository will launch a wizard which will set up service hook in Github. Let us follow the Wizard.<br />
<h4>
Step 6 – Follow the Wizard for hooking up your Github repo with your Azure site</h4>
First the Wizard will launch Github UI for you to log into. Just log-in with your Github credentials<br />
<a href="http://lh5.ggpht.com/-hhoSwgQBQco/UFj904hNEdI/AAAAAAAAB4w/vWHcah-4dQI/s1600-h/clip_image03942.jpg"><img alt="clip_image039[4]" border="0" height="374" src="http://lh5.ggpht.com/-zF05TYbZPts/UFj91Tn_MbI/AAAAAAAAB44/dJOGlXYfFYE/clip_image0394_thumb.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image039[4]" width="624" /></a><br />
On successful sign-in it will ask you to Authorize Windows Azure on Github like below:<br />
<a href="http://lh5.ggpht.com/-0COguEXCWD8/UFj912IBqgI/AAAAAAAAB5A/YhvMZ-WwTCk/s1600-h/clip_image0413.jpg"><img alt="clip_image041" border="0" height="386" src="http://lh6.ggpht.com/-gW8-HbWUa6I/UFj92CUlBxI/AAAAAAAAB5I/fWwL88KdTdU/clip_image041_thumb.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image041" width="624" /></a><br />
Click “Allow”. Doing so will take you to the below screen stating “Authorization succeeded” and listing all the repos that you have access to in your Github account.<br />
<a href="http://lh5.ggpht.com/--a9bpaqlGQ8/UFj-rX4rWlI/AAAAAAAAB5c/EoR8x4gvU8c/s1600-h/clip_image0423.png"><img alt="clip_image042" border="0" height="524" src="http://lh4.ggpht.com/-aR9KBddJFxY/UFj-r-ZUr_I/AAAAAAAAB5k/qDmMmMv_QTA/clip_image042_thumb.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image042" width="627" /></a><br />
Select the ExpressStarter project that we have been checking into in Step 3 and click the “check” button. Within few seconds your Azure portal screen should show “Deployment progress” as below:<br />
<a href="http://lh6.ggpht.com/-KTNBHeNWaS0/UFj-s-K-_XI/AAAAAAAAB5s/qS-VO1XYHes/s1600-h/clip_image04442.jpg"><img alt="clip_image044[4]" border="0" height="373" src="http://lh4.ggpht.com/-3eTzHZMrKt0/UFj-tGOPQ-I/AAAAAAAAB50/0YvTd7oRo_I/clip_image0444_thumb.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image044[4]" width="623" /></a><br />
This is a moment to pause again and think what just happened. What Windows Azure did was to use the authorization that you gave via oAuth wizard to access Github API to first list your projects for you. Once you picked your project then it went and setup a service hook.<br />
If you are really curious got to Github to your repository and click “Admin” as shown below<br />
<a href="http://lh6.ggpht.com/-stq2v3qXiqI/UFj-t_fax1I/AAAAAAAAB58/9bJ_ESXbjRA/s1600-h/clip_image04642.jpg"><img alt="clip_image046[4]" border="0" height="182" src="http://lh3.ggpht.com/-Dl3CZxAYqJY/UFj-uB6CkoI/AAAAAAAAB6E/KIPlbtf3YBs/clip_image0464_thumb.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image046[4]" width="624" /></a><br />
Then on the admin page you will see Service Hooks and Webhook Urls (1). <a href="http://lh4.ggpht.com/-HrY2T3XK2cE/UFj-vene-sI/AAAAAAAAB6M/_6-5uhIJHC8/s1600-h/clip_image04842.jpg"><img alt="clip_image048[4]" border="0" height="242" src="http://lh6.ggpht.com/-1N920_9QMo4/UFj-v2O6_MI/AAAAAAAAB6U/Ki2ZgD1oXj4/clip_image0484_thumb.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image048[4]" width="624" /></a><br />
That URL is essentially the URL to your <a href="http://github.com/projectkudu/kudu">Azure Kudu Service</a> which will be called by Github when there will be a push done on your Git repo within Github. As soon as Kudu Service receives a call from your Github account it wakes and pulls the latest commits from Github repo into the Azure repo. Currently we support only public repos to pull from but we are working on a solution to pull even from private Github repos over next few weeks.<br />
Once Azure repo gets a commit the usual flow of Azure deployment triggers which includes fetching npm packages in case of node, doing build in case of ASP.NET etc. And you see the deployment progress that you see above.<br />
Sometimes it might take time for the deployment progress to show, considering you now know what all happens behind the scene, please be patient, it will show up soon.<br />
<h4>
Step 7 – Check out your first auto deployment</h4>
Soon the deployment will be complete and you can see your first active deployment as shown below:<br />
<a href="http://lh6.ggpht.com/-s0pHVMPm82o/UFj-2HBFQUI/AAAAAAAAB6c/Q7NKNNfucY4/s1600-h/clip_image05042.jpg"><img alt="clip_image050[4]" border="0" height="186" src="http://lh6.ggpht.com/-pERHh0xfxwM/UFj-2jz3VVI/AAAAAAAAB6k/S4rP7pT4pko/clip_image0504_thumb.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image050[4]" width="624" /></a><br />
At the bottom of your Azure portal you will always see a black bar, which we call as command bar. It should have a browse button as shown below:<br />
<a href="http://lh3.ggpht.com/-V-Pi2XNaTb8/UFj-23hXjtI/AAAAAAAAB6s/JSE8HbJPM24/s1600-h/clip_image05242.jpg"><img alt="clip_image052[4]" border="0" height="48" src="http://lh3.ggpht.com/-CjqJ2rIfOAY/UFj-3GUCLVI/AAAAAAAAB60/8JNtH9RHMnU/clip_image0524_thumb.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image052[4]" width="624" /></a><br />
Click the “Browse” button and see your site launch live on Azure.<br />
<a href="http://lh5.ggpht.com/-4UcMB327PlQ/UFj-5PGsUHI/AAAAAAAAB68/iWUqH8vpj9c/s1600-h/clip_image05442.jpg"><img alt="clip_image054[4]" border="0" height="397" src="http://lh3.ggpht.com/-wG0MHuG59so/UFj-5VfdAPI/AAAAAAAAB7E/WlDeGErlTMs/clip_image0544_thumb.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image054[4]" width="624" /></a><br />
Hopefully you are happy as I am J well now let us go and make one more change to our local site.<br />
<h4>
Step 8 – Make another change locally and push back to Github</h4>
Go to WebMatrix and in the same layout.jade file make one more change. I am this time saying “My Awesome Azure Site” and hit “Save”<br />
<a href="http://lh3.ggpht.com/-ooyxGtXEcHk/UFj-80lfzhI/AAAAAAAAB7M/hL-1ht9Y8Bc/s1600-h/clip_image05652.jpg"><img alt="clip_image056[5]" border="0" height="387" src="http://lh5.ggpht.com/-jS9C0ZyNz7A/UFj-9QB3oTI/AAAAAAAAB7U/kgMtWlPa5v4/clip_image0565_thumb.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image056[5]" width="624" /></a><br />
Rest of the deal is same as Step 3 above so I will avoid the repeat screenshots for most but the steps in command prompt essentially are:<br />
<b>git status</b><br />
<b>git commit –am “My Awesome Azure Site”</b><br />
Now that the change it done it is time to see push the change to Github.<br />
<h4>
Step 9 – Check out your change go live on Azure</h4>
Just to see the awesome UI integration, I recommend you have your Azure portal side by side to your command window as you hit enter on the next command:<br />
<b>git push origin master </b><br />
<a href="http://lh3.ggpht.com/-g5CcobsmPKA/UFj-9nO0fOI/AAAAAAAAB7c/Eh55FbMQfm4/s1600-h/clip_image05852.jpg"><img alt="clip_image058[5]" border="0" height="233" src="http://lh4.ggpht.com/-pVgurI0vZxY/UFj-9zssF2I/AAAAAAAAB7k/-HYxpNi3a8g/clip_image0585_thumb.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image058[5]" width="624" /></a><br />
As soon as the git push completes you will see the Azure portal “Deployments” tab wake up and very soon you will have your second deployment <br />
<a href="http://lh6.ggpht.com/-y1QqgKM0jqI/UFj--cy4n_I/AAAAAAAAB7s/-iIF4ROcxuo/s1600-h/clip_image06042.jpg"><img alt="clip_image060[4]" border="0" height="230" src="http://lh6.ggpht.com/-fOOiF2Qa5sc/UFj--5EuXfI/AAAAAAAAB70/iRWf8wyDcQQ/clip_image0604_thumb.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image060[4]" width="624" /></a><br />
Now browse the site and notice that your second change has gone live as below:<br />
<a href="http://lh6.ggpht.com/-Dovy1BqK5JQ/UFj-_NXh1oI/AAAAAAAAB74/ieZnV_WZa-E/s1600-h/clip_image06242.jpg"><img alt="clip_image062[4]" border="0" height="303" src="http://lh3.ggpht.com/-XvV8Cm8mOqM/UFj-_SmNhtI/AAAAAAAAB8A/XIk8oPO6w4g/clip_image0624_thumb.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image062[4]" width="623" /></a><br />
<h4>
Step 10 – Rollback to the first change with ease</h4>
For most part we are done but it is worth doing one last fun thing. Select the previous deployment and notice that in the command bar below you will have a “Redeploy” button as shown below:<br />
<a href="http://lh3.ggpht.com/-uPFb7J1hpq4/UFj-__3D3II/AAAAAAAAB8M/oDs2JFrNKMg/s1600-h/clip_image06442.jpg"><img alt="clip_image064[4]" border="0" height="412" src="http://lh4.ggpht.com/-Smalb3kcGJQ/UFj_AeYqm9I/AAAAAAAAB8U/DBKBqMe4GG8/clip_image0644_thumb.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image064[4]" width="624" /></a><br />
Click that and you will be asked for a confirmation like:<br />
<a href="http://lh6.ggpht.com/-RajYIrP2APE/UFj_Ak_HLDI/AAAAAAAAB8Y/AmAc-Fyvw6M/s1600-h/clip_image06642.jpg"><img alt="clip_image066[4]" border="0" height="77" src="http://lh6.ggpht.com/-GAYBzYaExaA/UFj_A5Da76I/AAAAAAAAB8k/B3yuMZqjqfY/clip_image0664_thumb.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image066[4]" width="624" /></a><br />
Click “Yes” see the re-deploy kick in and notice that your “Active Deployment” changes within seconds<br />
<a href="http://lh3.ggpht.com/-BY1VC7gaqU8/UFj_B1ereDI/AAAAAAAAB8s/8GO11nJaTaU/s1600-h/clip_image06842.jpg"><img alt="clip_image068[4]" border="0" height="236" src="http://lh4.ggpht.com/-Ofdq1yPD5UM/UFj_CfyaORI/AAAAAAAAB80/gvnnG6uXzAI/clip_image0684_thumb.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image068[4]" width="624" /></a><br />
On browsing the site you will see that you are back to previous deployment<br />
<a href="http://lh6.ggpht.com/-4OST_mEHZak/UFj_CzACAsI/AAAAAAAAB88/NAjaOJTrKXM/s1600-h/clip_image0703.jpg"><img alt="clip_image070" border="0" height="189" src="http://lh3.ggpht.com/-m4mhBUKVbY4/UFj_DNS-CPI/AAAAAAAAB9E/Afeui6fVgf4/clip_image070_thumb.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="clip_image070" width="624" /></a><br />
<h3>
Conclusion</h3>
This is how easy it is to setup continuous deployments from Github to to Windows Azure. Almost the same type of workflow also works for CodePlex. If you have any questions of thoughts please do feel free to comment here or send me an email at <a href="mailto:vishal.joshi@microsoft.com">vishal.joshi@microsoft.com</a>. I will also continue posting updates on twitter <a href="http://twitter.com/vishalrjoshi">@vishalrjoshi</a>, hope you can join the conversation there too.<br />
//code awesomely<br />
Vishal</div>
Vishal R Joshihttp://www.blogger.com/profile/05217117734084631137noreply@blogger.com9tag:blogger.com,1999:blog-5704450.post-10021501951975071862012-09-06T13:06:00.001-07:002012-09-06T15:34:36.372-07:00WebMatrix 2 is Released<p>On June 6th, I announced  RC version of WebMatrix 2.   I highly encourage you to read the post <a href="http://vishaljoshi.blogspot.com/2012/06/announcing-webmatrix-2-rc.html">Announcing WebMatrix 2 RC</a> as it covers most of the new features that we are releasing.</p> <p>I also encourage you to visit <a href="http://www.webmatrix.com">www.webmatrix.com</a> which has tons of user documentation.</p> <p>Since the June RC release we primarily focused on getting polish on the product and as part of this post I am hoping to highlight the key changes since WebMatrix 2 RC.  This post is not intended to be flashy but hopefully will give you an understanding of the effort that the team took in taking WebMatrix 2 from RC to RTM. </p> <p>In last few weeks we have worked to make WebMatrix 2 available in 14 languages below:</p> <p> <br /> <table border="0" cellspacing="0" cellpadding="2" width="400"><tbody> <tr> <td valign="top" width="133">English</td> <td valign="top" width="133">Italian</td> <td valign="top" width="133">Czech</td> </tr> <tr> <td valign="top" width="133">German</td> <td valign="top" width="133">Korean</td> <td valign="top" width="133">Polish</td> </tr> <tr> <td valign="top" width="133">Japanese</td> <td valign="top" width="133">Russian</td> <td valign="top" width="133">Port-Brazil</td> </tr> <tr> <td valign="top" width="133">French</td> <td valign="top" width="133">Chinese-Simplified</td> <td valign="top" width="133">Turkish</td> </tr> <tr> <td valign="top" width="133">Spanish</td> <td valign="top" width="133">Chinese-Traditional</td> <td valign="top" width="133"> </td> </tr> </tbody></table> </p> <p>The goal for the RTW release was not to add a ton of new features but to actually make only targeted changes to make your experience with the product even more awesome and raise the quality even more.  We had given “Go-Live” license with the RC release already but now hopefully there would be nothing stopping you upgrading from WebMatrix  1 to WebMatrix 2.  JFYI: we will soon turn on the “Upgrade” flag in WebMatrix which will prompt millions of users using WebMatrix 1 to move to WebMatrix 2.</p> <p>WebMatrix 2 in my opinion is one of the best light weight web development tool out there.  With support for Node.js, PHP, ASP.NET, HTML5, CSS3, jQuery, SQL CE, SQL Server, MySQL, FTP, Web Deploy, Less, ScSS, Coffee Script, SEO, iPhone/iPad simulators and <a href="http://vishaljoshi.blogspot.com/2012/06/announcing-webmatrix-2-rc.html">many many other features</a> there is no doubt that it is probably the best web editing tool that one could possibly get for FREE, so if you are not already using it I hope you give it a try by downloading it below:</p> <p><a href="http://bit.ly/L77V6w"><img alt="image" src="http://lh5.ggpht.com/-lm1GuUL20p8/T9HReoCZk7I/AAAAAAAABU4/uO7oVvNCGPQ/image%25255B4%25255D.png?imgmax=800" /></a></p> <p>Since WebMatrix 2 RC <strong>we fixed over 100 bugs, many of them reported on <a href="http://stackoverflow.com/search?q=webmatrix">Stackoverflow</a> and <a href="http://webmatrix.uservoice.com/forums/128313-webmatrix-suggestions">user voice</a></strong>. Thanks for the taking the time to report issues, and helping us make WebMatrix 2 even better.  Below are some notable fixes that went in between WebMatrix 2 RC and RTM:</p> <ul> <li>Accessibility:  Microsoft has pretty high bar when it comes to accessibility and the team spent quite some time in making sure the product is highly accessible. </li> <li>Editor: Huge performance enhancements in editing of complex and big files. </li> <li>Editor: Better detection of JavaScript errors within script blocks of any html files. </li> <li>Editor: Formatting improvements on JavaScript Editor and enabling it to work more seamlessly with JSLint. </li> <li>Editor: Making sure that we show function signature help in JavaScript editor. </li> <li>Editor: Exposed extensibility points for Editor context menu. </li> <li>FTP: FTP publishing improvements including sub-folder publishing and re-tries in case of failures. </li> <li>Node.js: Code completion for Scoket.io for Node.js sites </li> <li>Node.js: Code outlining fix-ups for SaaS editor </li> <li>Node.js: Added a new template for package.json for Node.js sites </li> <li>PHP: Support for the new short PHP tag. </li> <li>PHP: Support for proper auto-completion for long PHP tags. </li> <li>PHP: Support for detection of PHP/MySQL Apps when downloaded from a remote location </li> <li>ASP.NET: Improved formatting of documents in ASP.NET Web Pages (Razor Syntax) </li> <li>ASP.NET: Making Comment/Un-comment work nicely across different types of syntax (CSS, JS, HTML, Razor) within ASP.NET Web Pages file. </li> <li>ASP.NET: Making C# colorization and intellisense more resilient in complex editing scenarios <!--EndFragment--></li> <li>ASP.NET: Proper validation for generic types in C# & VB editors </li> <li>ASP.NET: Handling the nuances of Web Pages 1 vs. Web Pages 2 effectively </li> <li>General: Support opening a random folder as a site in WebMatrix by right clicking on it in Windows. </li> <li>General: Shipping RTW version of IIS Express, Web Pages, Web Deploy, SQL CE and every other component which makes WebMatrix 2 into a one stop shop for web development. </li> <li>General: Making sure the product works seamlessly on Windows XP and beyond, both on x86 and x64 machines. </li> </ul> <p>With all these improvements we hope you will have fun using WebMatrix 2 and will create more awesome website in time to come.   Here is once again a link to the download.</p> <p><a href="http://bit.ly/L77V6w"><img alt="image" src="http://lh5.ggpht.com/-lm1GuUL20p8/T9HReoCZk7I/AAAAAAAABU4/uO7oVvNCGPQ/image%25255B4%25255D.png?imgmax=800" /></a></p> <p>/*code awesomely */</p> <p>Vishal</p> <p>PS: We now have few WebMatrix team twitter handles which you might want to consider following<a href="https://twitter.com/#!/vishalrjoshi">@vishalrjoshi</a> <a href="https://twitter.com/#!/JustinBeckwith">@justinbeckwith</a> & <a href="https://twitter.com/#!/webmatrix">@webmatrix</a></p> Vishal R Joshihttp://www.blogger.com/profile/05217117734084631137noreply@blogger.com5tag:blogger.com,1999:blog-5704450.post-72713768057990913222012-08-23T02:07:00.000-07:002012-08-23T02:10:47.667-07:00Relook at top cities for technology startups<p>USA today released an article today on <a href="http://www.usatoday.com/tech/columnist/talkingtech/story/2012-08-22/top-tech-startup-cities/57220670/1">Top cities for technology startups</a>.  It contains data from National Venture Capital Association.  It covered top 10 cities and gave a great writeup on what is happening in each place.  Their ranking was more or less based on amount of investment happening in each city and the usual suspects the winners as <a href="http://www.usatoday.com/tech/columnist/talkingtech/story/2012-08-22/top-tech-startup-cities/57220670/1">you can see</a>.</p> <p>I just thought of doing a little bit of hackery on top of the data to see how it would fair in case your parameters to select a city were different, here are quick results:</p> <h2>Top 10 cities based on most number of Startups</h2> <table style="line-height: normal; border-collapse: collapse" border="0" cellspacing="0" cellpadding="0" width="193"><colgroup><col style="width: 28pt; mso-width-source: userset; mso-width-alt: 1336" width="38" /><col style="width: 88pt; mso-width-source: userset; mso-width-alt: 4181" width="118" /></colgroup><tbody> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #4f81bd; color: ; vertical-align: middle; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #d9d9d9 none; text-underline-style: none; text-line-through: none" class="xl68" height="23" width="46" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#ffffff"><strong>Rank</strong></font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #4f81bd; color: ; vertical-align: middle; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #d9d9d9 none; text-underline-style: none; text-line-through: none" class="xl69" width="146" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#ffffff"><strong>City</strong></font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">1</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">San Francisco Area</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">2</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">New York</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">3</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Los Angeles Area</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">4</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Boston</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">5</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Chicago</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">6</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Austin</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">7</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Seattle</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">8</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Boulder/Denver</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">9</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">San Diego</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl71" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">10</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl66"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Washington DC</font></font></td> </tr> </tbody></table> <h2>Top 10 cities based on most number of <strong><u>Funded</u> </strong>Startups</h2> <table style="line-height: normal; border-collapse: collapse" border="0" cellspacing="0" cellpadding="0" width="193"><colgroup><col style="width: 28pt; mso-width-source: userset; mso-width-alt: 1336" width="38" /><col style="width: 88pt; mso-width-source: userset; mso-width-alt: 4181" width="118" /></colgroup><tbody> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #4f81bd; color: ; vertical-align: middle; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #d9d9d9 none; text-underline-style: none; text-line-through: none" class="xl68" height="23" width="46" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#ffffff"><strong>Rank</strong></font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #4f81bd; color: ; vertical-align: middle; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #d9d9d9 none; text-underline-style: none; text-line-through: none" class="xl69" width="146" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#ffffff"><strong>City</strong></font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">1</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">San Francisco Area</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">2</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">New York</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">3</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Boston</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">4</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Washington DC</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">5</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Los Angeles Area</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">6</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Seattle</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">7</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">San Diego</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">8</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Boulder/Denver</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">9</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Chicago</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl71" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">10</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl66"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Austin</font></font></td> </tr> </tbody></table> <h2>Top 10 cities based on <font style="font-weight: bold"><u>percentage</u> </font>of startups funded</h2> <table style="line-height: normal; border-collapse: collapse" border="0" cellspacing="0" cellpadding="0" width="193"><colgroup><col style="width: 28pt; mso-width-source: userset; mso-width-alt: 1336" width="38" /><col style="width: 88pt; mso-width-source: userset; mso-width-alt: 4181" width="118" /></colgroup><tbody> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #4f81bd; color: ; vertical-align: middle; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #d9d9d9 none; text-underline-style: none; text-line-through: none" class="xl68" height="23" width="46" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#ffffff"><strong>Rank</strong></font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #4f81bd; color: ; vertical-align: middle; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #d9d9d9 none; text-underline-style: none; text-line-through: none" class="xl69" width="146" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#ffffff"><strong>City</strong></font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">1</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Washington DC</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">2</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Boston</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">3</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">San Diego</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">4</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Seattle</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">5</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Boulder/Denver</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">6</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">New York</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">7</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Austin</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">8</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Chicago</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">9</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">San Francisco Area</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl71" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">10</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl66"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Los Angeles Area</font></font></td> </tr> </tbody></table> <h2>Top 10 cities based on <font style="font-weight: bold">total dollars invested <font style="font-weight: normal">(Usa today ranking)</font></font></h2> <table style="line-height: normal; border-collapse: collapse" border="0" cellspacing="0" cellpadding="0" width="193"><colgroup><col style="width: 28pt; mso-width-source: userset; mso-width-alt: 1336" width="38" /><col style="width: 88pt; mso-width-source: userset; mso-width-alt: 4181" width="118" /></colgroup><tbody> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #4f81bd; color: ; vertical-align: middle; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #d9d9d9 none; text-underline-style: none; text-line-through: none" class="xl68" height="23" width="46" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#ffffff"><strong>Rank</strong></font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #4f81bd; color: ; vertical-align: middle; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #d9d9d9 none; text-underline-style: none; text-line-through: none" class="xl69" width="146" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#ffffff"><strong>City</strong></font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">1</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">San Francisco Area</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">2</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Boston</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">3</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">New York</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">4</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Los Angeles Area</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">5</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Washington DC</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">6</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">San Diego</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">7</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Chicago</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">8</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Austin</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">9</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Boulder/Denver</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl71" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">10</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl66"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Seattle</font></font></td> </tr> </tbody></table> <h2>top 10 cities based on average funding across <font style="font-weight: bold"><u>All </u></font>startups</h2> <table style="line-height: normal; border-collapse: collapse" border="0" cellspacing="0" cellpadding="0" width="193"><colgroup><col style="width: 28pt; mso-width-source: userset; mso-width-alt: 1336" width="38" /><col style="width: 88pt; mso-width-source: userset; mso-width-alt: 4181" width="118" /></colgroup><tbody> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #4f81bd; color: ; vertical-align: middle; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #d9d9d9 none; text-underline-style: none; text-line-through: none" class="xl68" height="23" width="46" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#ffffff"><strong>Rank</strong></font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #4f81bd; color: ; vertical-align: middle; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #d9d9d9 none; text-underline-style: none; text-line-through: none" class="xl69" width="146" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#ffffff"><strong>City</strong></font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">1</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Boston</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">2</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Washington DC</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">3</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">San Francisco Area</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">4</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">San Diego</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">5</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Boulder/Denver</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">6</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">New York</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">7</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Chicago</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">8</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Los Angeles Area</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">9</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Austin</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl71" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">10</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl66"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Seattle</font></font></td> </tr> </tbody></table> <h2>top 10 cities based on average funding across <font style="font-weight: bold"><u>Funded </u></font>startups</h2> <table style="line-height: normal; border-collapse: collapse" border="0" cellspacing="0" cellpadding="0" width="193"><colgroup><col style="width: 28pt; mso-width-source: userset; mso-width-alt: 1336" width="38" /><col style="width: 88pt; mso-width-source: userset; mso-width-alt: 4181" width="118" /></colgroup><tbody> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #4f81bd; color: ; vertical-align: middle; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #d9d9d9 none; text-underline-style: none; text-line-through: none" class="xl68" height="23" width="46" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#ffffff"><strong>Rank</strong></font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #4f81bd; color: ; vertical-align: middle; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #d9d9d9 none; text-underline-style: none; text-line-through: none" class="xl69" width="146" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#ffffff"><strong>City</strong></font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">1</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">San Francisco Area</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">2</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Los Angeles Area</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">3</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">San Diego</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">4</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Boston</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">5</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Chicago</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">6</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Austin</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">7</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">New York</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">8</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Boulder/Denver</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl70" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">9</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; background: #dce6f1; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; mso-pattern: #dce6f1 none; text-underline-style: none; text-line-through: none" class="xl65"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Washington DC</font></font></td> </tr> <tr style="height: 14.4pt" height="19"> <td style="border-bottom: windowtext 0.5pt solid; border-left: windowtext 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl71" height="23" align="center"><font face="Calibri"><font style="font-size: 11pt" color="#000000">10</font></font></td> <td style="border-bottom: windowtext 0.5pt solid; border-left: #4f81bd 0.5pt solid; padding-left: 1px; padding-right: 1px; font-family: ; color: ; vertical-align: bottom; border-top: windowtext 0.5pt solid; border-right: windowtext 0.5pt solid; text-decoration: ; padding-top: 1px; text-underline-style: none; text-line-through: none" class="xl66"><font face="Calibri"><font style="font-size: 11pt" color="#000000">Seattle</font></font></td> </tr> </tbody></table> <p> </p> <p>The data correctly it is slightly skewed based on big players and huge investments happening in them e.g. Twitter/Facebook etc but nevertheless it tells us a little bit about patterns.  The full comparison data is listed below:</p> <p><a href="http://lh3.ggpht.com/-cqeKsmvwuVs/UDXzRRUQe3I/AAAAAAAABn4/1u187H51mkA/s1600-h/image%25255B6%25255D.png"><img style="display: inline" title="image" alt="image" src="http://lh6.ggpht.com/-MMwpgry09vg/UDXzSOGkYhI/AAAAAAAABoA/eXxdCfKjaIg/image_thumb%25255B1%25255D.png?imgmax=800" width="1150" height="391" /></a></p> <h2>Conclusion</h2> <p>This was not intended to be a conclusive article at all. It is just a fun exercise but in very broad strokes you can say something like:</p> <ul> <li>Your likelihood of getting funded is highest in Washington DC, Boston, San Diego, Seattle or Boulder/Denver.</li> <li>If you want to raise big money then you rather be anywhere in California or in Chicago or Boston.</li> <li>If you want to be cities filled with money then San Francisco, Boston, NYC, LA or DC are your best bets.</li> </ul> <p>But based on all of the above diggings it feels like <strong>Boston might really be the all around champion of the study and if you are wanting to remain frugal yet immerse in startup scenes then DC, Seattle or Colorado might not be bad choices after Boston either!!</strong></p> <p>Hope this was a fun read!!  I also hang out on twitter <a href="mailto:I@VishalRJoshi">@VishalRJoshi</a> if you would like to follow. </p> <p>-Vishal</p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:ab6987f9-8e0b-4b0b-8a9b-62b0e1a42116" class="wlWriterEditableSmartContent">Technorati Tags: <a href="http://technorati.com/tags/Startups" rel="tag">Startups</a>,<a href="http://technorati.com/tags/Technology" rel="tag">Technology</a>,<a href="http://technorati.com/tags/Venture+Capital" rel="tag">Venture Capital</a>,<a href="http://technorati.com/tags/Cities" rel="tag">Cities</a></div> Vishal R Joshihttp://www.blogger.com/profile/05217117734084631137noreply@blogger.com3tag:blogger.com,1999:blog-5704450.post-2530663929502737052012-07-21T10:43:00.001-07:002012-07-21T10:44:13.442-07:00& Thou Shalt Remember Me in Right Order<p>Thankfully many websites are settling for Facebook, Twitter, Google, Linked In or Live authentication so that the rest of us do not have to go through the pain of remembering infinite number of login credentials.  I still wish there was one but that is for later.  </p> <p>If you still have a reason to roll your own login controls please honor the tab order that users have grown to expect.  There are way too many sites who do not care about tab order for keyboard savvy users and hence mentioning this felt worthwhile.</p> <p>There are only five standard controls on most login forms User Name, Password, Sign In, Remember Me and Forgot Password.  Considering that Login forms are among the first interactions of a repeat user with your site it is surprising that many sites do not care enough to leave the tab order of “Forgot Password” before “Sign In” button.  <u>Do note that sub-consciously ample users type in UserName, Password and then hit tab-enter - if this redirects to forgot password then the site is leading users to pure frustration</u>.  At the minimum please check all of your login forms and fix the tab order on your site to make sure “Forgot Password” does not follow the “Password” field.</p> <p>The next control to care about is the check box for "Remember Me”.  The fundamental question worth asking is <strong>Whether to keep “Remember Me” checkbox or remove it all together?</strong></p> <p>Certainly sites like Linked In (below)</p> <p><a href="http://lh3.ggpht.com/-UiELKRS0GDI/UArqHIzUpMI/AAAAAAAABmQ/u6SiE8tFNJA/s1600-h/image%25255B37%25255D.png"><img style="margin: 0px; display: inline" title="image" alt="image" src="http://lh5.ggpht.com/-VThlfo6wyiw/UArqHu_wx6I/AAAAAAAABmY/ky7KUqP9aaI/image_thumb%25255B14%25255D.png?imgmax=800" width="589" height="77" /></a></p> <p>and also GitHub have chosen not to and directly use cookies to save the user information for next login.</p> <p><a href="http://lh6.ggpht.com/-tipXw3NZPNM/UArqH7FsPkI/AAAAAAAABmg/ML3jnIlBXZI/s1600-h/image%25255B42%25255D.png"><img style="margin: 0px; display: inline" title="image" alt="image" src="http://lh3.ggpht.com/-hvQ1QMYeyZ8/UArqIVSjYaI/AAAAAAAABmk/gJP_84OLO1s/image_thumb%25255B16%25255D.png?imgmax=800" width="406" height="267" /></a></p> <p>It obviously is a deliberate decision on their part.  So, does your site need that checkbox or can you live without it? Let us ask:</p> <ol> <li>Is the data presented in your site highly sensitive e.g. banking/medical? If yes, clearly you might not want to assume deemed approval from your users.</li> <li>Are your users super tech savvy (like in case of GitHub)?  If so, then maybe you do not want to bother them with a checkbox, make the UI cleaner esp. if you are ok with the risk of 1 in 1000 people accidentally not hitting logout.</li> <li>Is your user likely to access the site from shared computers? –Most likely yes.  Considering everyone has their own personal devices, plus Wifi being available at many public places one may say shared computers are going away.  Well they will someday but not yet <img style="border-bottom-style: none; border-left-style: none; border-top-style: none; border-right-style: none" class="wlEmoticon wlEmoticon-smile" alt="Smile" src="http://lh6.ggpht.com/-XYj-W1NBXtc/UArqIlyR5vI/AAAAAAAABms/vkLXiYzCleA/wlEmoticon-smile%25255B2%25255D.png?imgmax=800" /> I just came back from India and there are still cyber café’s there, there is one machine per household and every friend and family visiting each other shares the household computer.  Even here in US kids still grab every computer they can find to access internet and there are countless people who access shared computers in libraries, schools, conferences, events, computer stores etc.  If you aspire to have a popular site assume it will be accessed from a shared machine and people will forget to hit logout.</li> <li>Is browser’s native remember password good enough for you?  These days all browsers allow storing credentials in their credential caches but that is quite different (at least one-two whole clicks different <img style="border-bottom-style: none; border-left-style: none; border-top-style: none; border-right-style: none" class="wlEmoticon wlEmoticon-smile" alt="Smile" src="http://lh6.ggpht.com/-XYj-W1NBXtc/UArqIlyR5vI/AAAAAAAABms/vkLXiYzCleA/wlEmoticon-smile%25255B2%25255D.png?imgmax=800" />) than not seeing the login screen all together so when it comes to Remember Me checkbox I will assume that browser’s remember password feature will not influence your choice, they are different.</li> </ol> <p><u>So in nutshell unless you are GitHub who knows their users are tech savvy and are likely using their development machine to access GitHub OR some financial firm who will never offer users the benefit of remaining forever logged in you most likely want the “Remember Me” checkbox.</u></p> <p>I am all for not having one more control on the screen if not required and will deliberate this question again on every site but for now the odds are in favor of the “Remember Me” checkbox.</p> <p><strong>Assuming you want the “Remember Me” checkbox, the next question is whether the default should be checked or not?</strong></p> <p>Let us say you are a user who would like to Remember yourself but find the checkbox unchecked by default.  You will click “Remember Me” and then will be remembered for a long time till you clear your browser cookies.  You would face one time inconvenience but then you are done.</p> <p>Now let us say you are user who does not want to be remembered but the checkbox is checked by default. You will now have to uncheck everytime you log in causing you repeated pain.  Also even beyond that pain you will be surprised how many people will forget unchecking this and may not even know how to Log out (for reasonable number of people closing the browser window is still same as logging out).</p> <p>Just by using these rationales <u>I suggest keeping “Remember Me” unchecked by default</u>.</p> <p>That is what most of the login providers like Gmail</p> <p><a href="http://lh6.ggpht.com/-gsh5KGvUS3E/UArqJNG_zqI/AAAAAAAABm4/ZWoAvqWHuL0/s1600-h/image%25255B46%25255D.png"><img style="margin: 0px; display: inline" title="image" alt="image" src="http://lh5.ggpht.com/-wOg4GYd2E_g/UArqJsqAwDI/AAAAAAAABm8/zilk1P9LbWU/image_thumb%25255B17%25255D.png?imgmax=800" width="354" height="297" /></a></p> <p>Facebook</p> <p><a href="http://lh6.ggpht.com/-SrJ0zjxYyaQ/UArqJkxVx7I/AAAAAAAABnI/5uPh0XH0xJs/s1600-h/image%25255B50%25255D.png"><img style="margin: 0px; display: inline" title="image" alt="image" src="http://lh6.ggpht.com/-sWnmYRYYltE/UArqLJhDRtI/AAAAAAAABnQ/dNgwm65lC3I/image_thumb%25255B18%25255D.png?imgmax=800" width="466" height="92" /></a></p> <p>and Twitter do:</p> <p><a href="http://lh6.ggpht.com/-Im4q1e72FHU/UArqLx9U58I/AAAAAAAABnY/ntYNUfcKSGQ/s1600-h/image%25255B54%25255D.png"><img style="margin: 0px; display: inline" title="image" alt="image" src="http://lh6.ggpht.com/-KO5J4niM1_s/UArqMNJ7L8I/AAAAAAAABng/-brOp1gWSWk/image_thumb%25255B19%25255D.png?imgmax=800" width="313" height="120" /></a></p> <p>So now assuming that we want the “Remember Me” checkbox and want it unchecked by default  the next thought is <strong>whether the tab order of “Remember Me” should before or after “Sign In”</strong></p> <p>Again “Remember Me” hopefully will not have to be used again and again so having it after Sign In feels reasonable.</p> <p>If you want to go above and beyond then you could even <u>remember the most recently used (MRU) state of the “Remember Me” checkbox in a cookie separate from the actual auth cookie. That way even if the authentication cookie expires after X number of days your choice of last “Remember Me” would persist eternally</u>. Pro users will appreciate you for being thoughtful and it will further reduce the necessity of the “Remember Me” checkbox to be before “Sign In” in tab order. <img style="border-bottom-style: none; border-left-style: none; border-top-style: none; border-right-style: none" class="wlEmoticon wlEmoticon-smile" alt="Smile" src="http://lh6.ggpht.com/-XYj-W1NBXtc/UArqIlyR5vI/AAAAAAAABms/vkLXiYzCleA/wlEmoticon-smile%25255B2%25255D.png?imgmax=800" /></p> <p>Also many people land up having tab order independent of visual placement, I think that is wrong coz sub-consciously a user is going from left to right (except cases where the languages reads other way) and then then top to bottom.  Your controls and tab ordering should follow this too(i.e. forgot password does not have to be next to password field <img style="border-bottom-style: none; border-left-style: none; border-top-style: none; border-right-style: none" class="wlEmoticon wlEmoticon-smile" alt="Smile" src="http://lh6.ggpht.com/-XYj-W1NBXtc/UArqIlyR5vI/AAAAAAAABms/vkLXiYzCleA/wlEmoticon-smile%25255B2%25255D.png?imgmax=800" />).</p> <p>In most general cases I would recommend following the pattern</p> <p>UserName, Password, Sign In, Remember Me (unchecked), Forgot Password.</p> <p>In conclusion, your login screen has to match your application scenario, data and user expectations.  Be deliberate about your choices on every login screen of every app <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:3ddb7e8b-a809-4bc8-852f-b77827c38699" class="wlWriterEditableSmartContent">Technorati Tags: <a href="http://technorati.com/tags/Web+Development" rel="tag">Web Development</a>,<a href="http://technorati.com/tags/Web" rel="tag">Web</a></div> you create and give it the importance it deserves.</p> <p>/* code awesomely */</p> <p><a href="http://twittter.com/vishalrjoshi">@VishalRJoshi</a></p> Vishal R Joshihttp://www.blogger.com/profile/05217117734084631137noreply@blogger.com1tag:blogger.com,1999:blog-5704450.post-81654156198697477082012-07-17T11:58:00.001-07:002012-07-17T11:58:09.065-07:002 Minute Magic Videos for WebMatrix 2<p>We know that most of us are bombarded with infinite amount of information each day and sometimes 2-3 minutes is all we have to check a quick email or learn something new.</p> <p>In that spirit we have released 2 Minute Magic videos for WebMatrix 2 which you can watch during your tiny power breaks.  Hope you enjoy them!!</p> <h3><font color="#c0504d">Get Started </font></h3> <h3><a href="https://www.youtube.com/watch?v=9k0ToGK8pnI&feature=plcp"><u><font size="3"><font color="#3366aa">How to create a site using WebMatrix</font></font></u></a></h3> <p><a href="https://www.youtube.com/watch?v=4nlw3Qs7BiQ&feature=plcp"><u><font color="#3366aa" size="3"><strong>How to use the Site Workspace inside of WebMatrix</strong></font></u></a></p> <h3><a href="https://www.youtube.com/watch?v=G0ecotPcxuA&feature=plcp"><u><font size="3"><font color="#3366aa">How to create a site using the ASP.NET Starter Template in WebMatrix</font></font></u></a></h3> <p><a href="https://www.youtube.com/watch?v=aUT0ez6B-5w&feature=plcp"><u><font size="3"><font color="#3366aa"><strong>Using the Node Starter Template in WebMatrix</strong></font></font></u></a></p> <h3><font color="#c0504d">Publish/Remote </font></h3> <h3><a href="https://www.youtube.com/watch?v=7qNPhiQ7-wE&feature=plcp"><u><font color="#3366aa" size="3"><strong>How to create and publish a site in WebMatrix in less than 5 minutes</strong></font></u></a></h3> <p><a href="https://www.youtube.com/watch?v=beFElpWx7rQ&feature=plcp"><u><font color="#3366aa" size="3"><strong>How to edit sites remotely using WebMatrix</strong></font></u></a></p> <h3><font color="#c0504d">Editor </font></h3> <h3><a href="https://www.youtube.com/watch?v=dAewJ5y7KKk&feature=plcp"><u><font color="#3366aa" size="3"><strong>How to use Find and Replace inside of WebMatrix</strong></font></u></a></h3> <p><a href="https://www.youtube.com/watch?v=noXVFEOaApA&feature=plcp"><u><font color="#3366aa" size="3"><strong>How to use the Color Picker inside of the WebMatrix CSS editor</strong></font></u></a></p> <h3><font color="#c0504d">Web Trends</font></h3> <h3><a href="https://www.youtube.com/watch?v=b8drjB957ok&feature=plcp"><u><font size="3"><font color="#3366aa">Twitter/Facebook and other OAuth Logins with the Node Starter Template in WebMatrix</font></font></u></a></h3> <h3><a href="https://www.youtube.com/watch?v=9p4bQeeXwJE&feature=plcp"><u><font size="3"><font color="#3366aa">How to use Less CSS inside of WebMatrix</font></font></u></a></h3> <p><a href="https://www.youtube.com/watch?v=sUKIAKT0t6A&feature=plcp"><u><font color="#3366aa" size="3"><strong>How to use the Sass editor inside of WebMatrix</strong></font></u></a></p> <p><a href="https://www.youtube.com/watch?v=ZVrcKjLPJb4&feature=plcp"><u><font color="#3366aa" size="3"><strong>How to use Coffee Script inside of WebMatrix</strong></font></u></a></p> <h3><font color="#c0504d">NuGet & WebMatrix Extensions</font></h3> <p><a href="https://www.youtube.com/watch?v=EeYbKsrYU_E&feature=plcp"><u><font color="#3366aa" size="3"><strong>How to use the NuGet Gallery in WebMatrix</strong></font></u></a></p> <h3><a href="https://www.youtube.com/watch?v=jMswGIrV5WU&feature=plcp"><u><font color="#3366aa" size="3"><strong>How to use the extension gallery in WebMatrix</strong></font></u></a></h3> <h3><font color="#c0504d">Mobile Web</font></h3> <p><a href="https://www.youtube.com/watch?v=gj4elwBkn_E&feature=plcp"><u><font color="#3366aa" size="3"><strong>How to add mobile capabilities to your Node.js starter site in WebMatrix</strong></font></u></a></p> <h3><a href="https://www.youtube.com/watch?v=kVRPytpMqCs&feature=plcp"><u><font size="3"><font color="#3366aa">How to use jQuery Mobile in WebMatrix</font></font></u></a></h3> <p><a href="https://www.youtube.com/watch?v=4icZpLXopFU&feature=plcp"><u><font color="#3366aa" size="3"><strong>How to use the Windows Phone emulator inside of WebMatrix</strong></font></u></a></p> <h3><a href="https://www.youtube.com/watch?v=rx8hM9bOK9Y&feature=plcp"><u><font size="3"><font color="#3366aa">How to use the iPhone simulator in WebMatrix</font></font></u></a></h3> <p><a href="https://www.youtube.com/watch?v=YnNexjeZAqY&feature=plcp"><u><font color="#3366aa" size="3"><strong>How to use the iPad simulator in WebMatrix</strong></font></u></a></p> <h3><font color="#c0504d">Databases </font></h3> <p><a href="https://www.youtube.com/watch?v=7Y22krOAjh0&feature=plcp"><u><font color="#3366aa" size="3"><strong>How to use the database manager in WebMatrix</strong></font></u></a></p> <p> </p> <p>/*code awesomely*/</p> <p>Vishal</p> Vishal R Joshihttp://www.blogger.com/profile/05217117734084631137noreply@blogger.com1tag:blogger.com,1999:blog-5704450.post-10325120096708477112012-06-21T01:09:00.001-07:002012-06-21T12:07:37.287-07:00Git Deployment Credentials & Adding more users to Git repos on Azure<p><strong>Create New Site & Enable Git Deployment</strong></p> <p>As you know you need to use your Live ID sign into <a href="https://manage.windowsazure.com/">Azure portal</a>.  Once you log into the Azure portal you can create a new Web Site by clicking on the “New” command bar at the bottom:</p> <p><a href="http://lh6.ggpht.com/-i2JSgl09_Fc/T-LWvFd_fuI/AAAAAAAABik/_yYdFUb_VTo/s1600-h/image34.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh4.ggpht.com/-RK3KLyhp3dg/T-LWvq-vT4I/AAAAAAAABis/ZoTVOVj9nUE/image_thumb16.png?imgmax=800" width="821" height="458" /></a></p> <p>Once your site is created then on the right side under Quick Glance there should see a way to “Set Git Publishing” which will setup your Git Repository and give you a Git URL to push to.   At that time if you have not set up your deployment credential then you will be asked to do so.</p> <p><a href="http://lh6.ggpht.com/-yGq0M3fI8vU/T-LWv7Dgm7I/AAAAAAAABi0/2C1XYxiODrs/s1600-h/image16.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh5.ggpht.com/-zz59CzSiWZQ/T-LWwUV9GZI/AAAAAAAABi8/1sT4vBehQyI/image_thumb6.png?imgmax=800" width="821" height="487" /></a></p> <p><strong>Git/FTP Credentials in Azure</strong></p> <p>If you set your deployment credentials before and do not remember now then you will be able to “Reset deployment credentials” from the Quick Glance section as highlighted below.  Clicking on “Reset deployment credentials” should give you the below screen:</p> <p><a href="http://lh5.ggpht.com/-Mtf3YcNc0kw/T-LWwvsgdGI/AAAAAAAABjE/8BhDL-vQwD0/s1600-h/image5.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.ggpht.com/-an46wQbiXOo/T-LWxN6EKvI/AAAAAAAABjM/cSm8r6PyRlc/image_thumb1.png?imgmax=800" width="507" height="507" /></a></p> <p>We went back and forth on setting the text on this dialog to be as short and yet as meaningful as we could but I will try to re-iterate it here.  <u>Live id credentials can only be used to sign into </u><a href="https://manage.windowsazure.com"><u>Azure portal</u></a><u> and not to deploy via Git to Windows Azure Web Sites. For this very reason there are basic auth credentials available <strong>per user </strong>to be used for deployment. These are basic auth credentials which are used by both FTP and Git and are <strong>common for all the sites of the same user</strong>.  </u></p> <p>When you <strong>Set up Git publishing </strong>on any site then a Git repository is created specifically for that site and you get a Git repository URL.   Do note that after the repository is setup you also see a “Deployments” tab on the page which contains Git instructions.   </p> <p><a href="http://lh3.ggpht.com/-Xkp_G6UG2Kk/T-LWxlNa7YI/AAAAAAAABjU/YXH8QDkuxA0/s1600-h/image19.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh4.ggpht.com/-hOCx2HSvSGA/T-LWyDmZOJI/AAAAAAAABjc/xnz44l7Ctq8/image_thumb9.png?imgmax=800" width="821" height="534" /></a></p> <p>Typical Git URL in Azure looks something like below:</p> <p>https://<font style="background-color: #ffff00">vishal@</font>testsitevishal.scm.azurewebsites.net/TestSiteVishal.git</p> <p>notice that <font style="background-color: #ffff00">vishal@</font> is appended in front of the Git site name denoting the user name.  If I had another site called FooBar the URL would look like:</p> <p>https://<font style="background-color: #ffff00">vishal@</font>FooBar.scm.azurewebsites.net/FooBar.git</p> <p>The common part being my user name and when I actually start pushing my site from command prompt the only thing I will need to enter is the password and it will be the same whether I am pushing to FooBar or TestSiteVishal. </p> <p>I quickly created a Bakery site via <a href="http://vishaljoshi.blogspot.com/2012/06/announcing-webmatrix-2-rc.html">WebMatrix 2</a> and git pushed it to my TestSiteVishal above and my “Deployments” tab now looks as below (notable pieces being my live id and Deployed By field in the deployment history):</p> <p><a href="http://lh4.ggpht.com/-0g_B7tQ_EP0/T-Nw6tSaFvI/AAAAAAAABk0/CAlqOCImO7I/s1600-h/image%25255B3%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh4.ggpht.com/-a0o81mjN7Hg/T-Nw7EegtXI/AAAAAAAABk8/ABDc9Yp6zZw/image_thumb%25255B1%25255D.png?imgmax=800" width="821" height="203" /></a></p> <p>When I try to FTP access any of my site the credentials are the same (<u>except in case of FTP the username is usually SiteName\Username i.e. TestSiteVishal\Vishal or FooBar\Vishal</u>)</p> <p><strong>Additional Deployment Users for your Git Repo</strong></p> <p>Now let us do a tiny bit of extrapolation here.  A user has single basic deployment credentials for FTP & Git within Azure Web Sites which are applicable to any site that the user has access to.  Any user gets access to Azure Web Sites based on their <a href="http://msdn.microsoft.com/en-us/library/windowsazure/gg465713">Azure Subscriptions</a>, so as long as you can add users to Azure Subscription then other users should be able to get access to the same sites and thereby get access to the Git repo of that site as well.  It is possible to add more users to Azure Subscription by making them a co-admin.</p> <p>So as long as you can make someone as a co-admin on the subscription which has access to the Website with Git Repo then on that user’s dashboard they should see a Git url with their user name and they can use the procedure above to start deploying to that Git Repo.</p> <p><strong>Setting up a Co-Admin</strong></p> <p>Setting up a co-admin is relatively simple.  You can go to <a href="http://windows.azure.com">http://windows.azure.com</a> which is the original Azure silverlight based portal and follow the instructions on MSDN article at <a title="http://msdn.microsoft.com/en-us/library/windowsazure/gg456328.aspx" href="http://msdn.microsoft.com/en-us/library/windowsazure/gg456328.aspx">http://msdn.microsoft.com/en-us/library/windowsazure/gg456328.aspx</a> and you should be all set.</p> <p>If you are being redirected to the new Azure portal at <a title="https://manage.windowsazure.com" href="https://manage.windowsazure.com">https://manage.windowsazure.com</a> then click on “Preview” in the middle of the title bar as shown below:</p> <p><a href="http://lh6.ggpht.com/-E_H-CqGpXxw/T-LWyTtWGFI/AAAAAAAABjk/NZdxfHEYLlc/s1600-h/image23.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh5.ggpht.com/-s8b7ULJ6zyU/T-LWy-7vayI/AAAAAAAABjs/a6toZJEjIPA/image_thumb11.png?imgmax=800" width="821" height="29" /></a></p> <p>which should give you an option to go to the previous portal as shown below:</p> <p><a href="http://lh4.ggpht.com/-bRgmHB-TD3Y/T-LWzc6kBKI/AAAAAAAABj0/vRYYLC7h6zQ/s1600-h/image27.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh5.ggpht.com/-DWhwC1mRyE4/T-LWzh-MeII/AAAAAAAABj8/lMUwMn28YMw/image_thumb13.png?imgmax=800" width="821" height="160" /></a></p> <p>Once you are in the older Azure portal then click on “Hosted Services, Storage Accounts & CDN”, select the subscription of your choice and click “Add New Co-Admin” on the top Ribbon</p> <p><a href="http://lh4.ggpht.com/-JjlX4rev6nk/T-LWz_62Z5I/AAAAAAAABkE/ovNVW9xZ4zQ/s1600-h/image30.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh6.ggpht.com/-_iV3CbiFjKI/T-LW0KozWvI/AAAAAAAABkM/nh4Jzlir5vs/image_thumb14.png?imgmax=800" width="479" height="597" /></a></p> <p>which should then allow you to add other co-admins by using their Live Ids as below:</p> <p><a href="http://lh3.ggpht.com/-4HQALvdmIcQ/T-Nw7T6OFcI/AAAAAAAABlE/S8r-LuyARrA/s1600-h/image%25255B6%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh5.ggpht.com/-MqflwuwfC5M/T-Nw7ixL8CI/AAAAAAAABlM/zVv6s6-W-A8/image_thumb%25255B2%25255D.png?imgmax=800" width="548" height="324" /></a></p> <p>Now the second Live Id account which you added as co-admin should be able to create their own deployment credentials and should be able to use those deployment credentials to Git push to Azure.</p> <p>When I logged into Azure portal as co-admin (which I just added above) I could see all the sites from the original account and was able to  “Reset deployment credentials” from the dashboard.  <strong>Note: Since the co-admin does not know the original users credential the step of “Reset deployment credentials” is an important step for the co-admin</strong>.  After doing that when I moved to my “Deployments” tab it looked as below:</p> <p><a href="http://lh6.ggpht.com/-Gen1s3HQMPo/T-Nw8F5SP9I/AAAAAAAABlU/m3aDXMPZl2U/s1600-h/image%25255B10%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh4.ggpht.com/-TaCLu7BOuGg/T-Nw8eGLaCI/AAAAAAAABlc/vGZETZumQXI/image_thumb%25255B4%25255D.png?imgmax=800" width="821" height="198" /></a></p> <p>Notice that the deployed by is <font style="background-color: #ffff00">vishal</font> vs. the GitUrl has the user <font style="background-color: #ffff00">VishalRJoshi</font></p> <p>As a co-admin I can now use the Git URL to clone my site locally on a different machine using my own co-admin basic credentials.  Notice the command <font style="background-color: #ffff00">git clone https://VishalRJoshi@…</font>  below:</p> <p><a href="http://lh3.ggpht.com/-b39v2eCfRuM/T-Nw85-sPoI/AAAAAAAABlk/EEBecqfELwU/s1600-h/image%25255B14%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh4.ggpht.com/-uUlzH1JIMyU/T-Nw9MukJYI/AAAAAAAABls/Lu2SWDhCBQg/image_thumb%25255B6%25255D.png?imgmax=800" width="821" height="327" /></a></p> <p> </p> <p>I made some quick edits to the site and now I am ready to push to Azure again.  As a co-admin I need to add my Azure remote again so I will do so by using the command </p> <p><font style="background-color: #ffff00">git remote add azure </font><font style="background-color: #ffff00"><a href="https://VishalRJoshi@testSiteVishal">https://VishalRJoshi@testSiteVishal</a>…</font></p> <p>and then simply <font style="background-color: #ffff00">git push azure master</font>  and use the new reset deployment credentials.</p> <p>Finally I can see my change deployed to my Azure site using the co-admin user (notice the Deployed by field now says <font style="background-color: #ffff00">VishalRJoshi</font>:</p> <p><a href="http://lh3.ggpht.com/-oRUts8xPBjQ/T-Nw9p09C6I/AAAAAAAABl0/P4_9oOStOfk/s1600-h/image%25255B22%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh6.ggpht.com/-jKTH0e06Y84/T-Nw-JSKU3I/AAAAAAAABl8/grPudF3VcRE/image_thumb%25255B10%25255D.png?imgmax=800" width="821" height="377" /></a></p> <p>I hope this helps you add contributors to you Azure Git repository and you have fun with git pushing to Azure.</p> <p>/*code awesomely*/</p> <p>Vishal</p> Vishal R Joshihttp://www.blogger.com/profile/05217117734084631137noreply@blogger.com0tag:blogger.com,1999:blog-5704450.post-21091597109619971872012-06-20T12:24:00.001-07:002012-06-20T12:24:18.556-07:00Download logs for git push Azure master<p>When you git push to Azure there is a lot of diagnostic log and trace information is created.  This information is extremely useful for troubleshooting.  So if I was ever to face git push Azure master fail then looking into these is the first place I typically start.</p> <p>What is also interesting is that since these log files belong to your site “only you (or your co-admin)” can access it.</p> <p>Below is quick way to get to these files from <a href="https://manage.windowsazure.com/">Azure portal</a>:</p> <p>On your site dasboard on the right site you should notice “Quick Glance” section</p> <p><a href="http://lh3.ggpht.com/-TwjBuR1NmIs/T-IjVvW2l9I/AAAAAAAABhw/daM6f1Y8d9k/s1600-h/image%25255B3%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.ggpht.com/-C13tJvpaPJM/T-IjWALQTqI/AAAAAAAABh4/c1tquUXRSh0/image_thumb%25255B1%25255D.png?imgmax=800" width="637" height="318" /></a></p> <p>scrolling to the bottom of that you will see Deployment Deployment User and Diagnostics Logs.</p> <p><a href="http://lh5.ggpht.com/-S7M3wCFMQiw/T-IjWmZsTWI/AAAAAAAABiA/7xQ8VDyb18M/s1600-h/image%25255B6%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh5.ggpht.com/-7j_alMnCl1k/T-IjXaj1OmI/AAAAAAAABiI/h3HrGajpp0M/image_thumb%25255B2%25255D.png?imgmax=800" width="262" height="210" /></a></p> <p>Click on the FTP link on the log and when you are asked for credentials enter fully qualified UserName i.e. <em>SiteName\UserName</em></p> <p>After doing that navigate to LogFiles/Git/trace/trace.xml</p> <p><a href="http://lh6.ggpht.com/-0vUnbyKqbMI/T-IjXiv5M7I/AAAAAAAABiQ/PHLi585Ck5U/s1600-h/image%25255B9%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh6.ggpht.com/-YYjpv0cWCUA/T-IjYBMD9WI/AAAAAAAABiY/5UYpDB9ykiE/image_thumb%25255B3%25255D.png?imgmax=800" width="661" height="212" /></a></p> <p>The trace.xml file contains tons of information regarding your git push azure master.  Even if you do not have any failures in your git push to Azure this is still a fascinating file to see as it gives you a ton of information of what is happening under the hood.</p> <p>//code awesomely</p> <p>-Vishal </p> Vishal R Joshihttp://www.blogger.com/profile/05217117734084631137noreply@blogger.com0tag:blogger.com,1999:blog-5704450.post-75970133283923056052012-06-08T03:21:00.001-07:002012-06-08T09:11:46.800-07:00Announcing WebMatrix 2 RC<p>Yesterday you met open, unified, powerful yet simplified <a href="http://www.windowsazure.com">Windows Azure</a>. You can read more about it on <a href="http://blogs.msdn.com/b/windowsazure/archive/2012/06/06/announcing-new-windows-azure-services-to-deliver-hybrid-cloud.aspx">Windows Azure Blog </a>or on <a href="http://weblogs.asp.net/scottgu/archive/2012/06/07/meet-the-new-windows-azure.aspx">ScottGu’s blog</a></p> <p>In the same spirit and as a great compliment to Windows Azure Web Sites, today I am super excited to announce the Release Candidate of our free web development tool WebMatrix. </p> <p><b><font color="#9bbb59" size="5">Background</font></b></p> <p>WebMatrix is designed to build modern standards based websites as effortlessly as possible. It aims to make your web development workflow easy i.e.</p> <p>· It lets you get started with Open Source web applications or with built in pretty templates like bakery, personal site, photo galleries, Chat application, Simple CMS etc.</p> <p>· It comes bundled with a web server so you do not have to configure anything on your machine.</p> <p>· It has top notch support for web & industry standards like HTML5 , CSS3, JavaScript & jQuery</p> <p>· It supports server side scripting of your choice - may it be ASP.NET, PHP or Node.js </p> <p>· It will have built in database management tools for SQL Server or MySQL</p> <p>· It also has SEO tool & performance optimization tools.</p> <p>· Finally, it has great publishing tools whether you are using FTP/FTPS or Web Deploy. And now it supports publishing to Windows Azure too!!</p> <p><b>Essentially right from getting started till publishing, WebMatrix will make your life easy and will do so for FREE.</b> What is nice is that even after all this it continues to be lightweight installs under 2 minutes (assuming you have .NET 4 which most machines do today).</p> <p><b><font color="#9bbb59" size="5">Installation</font></b></p> <p>Just click the button below and within couple of minutes you should be good to go!!</p> <p><a href="http://bit.ly/L77V6w"><img style="display: inline" title="image" alt="image" src="http://lh5.ggpht.com/-lm1GuUL20p8/T9HReoCZk7I/AAAAAAAABU4/uO7oVvNCGPQ/image%25255B4%25255D.png?imgmax=800" width="170" height="45" /></a></p> <p><font color="#cccccc" size="1">By downloading and using the Web Platform Installer (WebPI), you agree to the </font><a href="http://www.microsoft.com/info/cpyright.mspx"><font color="#cccccc" size="1">license terms</font></a><font color="#cccccc" size="1"> and </font><a href="http://privacy.microsoft.com"><font color="#cccccc" size="1">privacy statement</font></a><font color="#cccccc" size="1"> for WebPI. This installer will contact Microsoft over the Internet to retrieve product information</font></p> <p><b><font color="#9bbb59" size="5">WebMatrix 2 – Web With Benefits</font></b></p> <p>There are already many cool features introduced in <a href="http://vishaljoshi.blogspot.com/2012/02/what-is-worth-noting-in-webmatrix-2so.html">WebMatrix 2 Beta</a> (which was released in Sept 2011 at the <a href="http://channel9.msdn.com/events/BUILD/BUILD2011/TOOL-825T">//build conference</a>). WebMatrix 2 RC release builds on top of Beta and collectively has so many cool new features that it is going to be tough for me to contain myself, although I will try J</p> <p><b><font color="#4bacc6" size="4">HTML5</font> </b><b>– </b>WebMatrix now supports code completion for HTML5.</p> <p><a href="http://lh5.ggpht.com/-A5BQWsyeYg0/T9HRfF1XdMI/AAAAAAAABVA/UEnm8MLq7Ck/s1600-h/image%25255B10%25255D.png"><img style="display: inline" title="image" alt="HTML5" src="http://lh5.ggpht.com/-Y683bgEWi-g/T9HRfnr9VoI/AAAAAAAABVI/sofITbiiS4U/image_thumb%25255B5%25255D.png?imgmax=800" width="497" height="200" /></a></p> <p><b><font color="#4bacc6" size="4">CSS3 </font></b><b>–</b> Needless to say also CSS3 code completion </p> <p><a href="http://lh4.ggpht.com/-D7DeQPYO8DU/T9HRgbglEfI/AAAAAAAABVQ/MmXo_12DHvg/s1600-h/image%25255B13%25255D.png"><img style="margin: 0px; display: inline" title="image" alt="image" src="http://lh3.ggpht.com/-0e-sKdr1hNU/T9HRg6p275I/AAAAAAAABVY/H1PyYN7K7P8/image_thumb%25255B6%25255D.png?imgmax=800" width="624" height="176" /></a></p> <p><b></b><b></b></p> <p><b><font color="#4bacc6" size="4">JavaScript </font></b><b>– </b>And JavaScript & jQuery code completion as well</p> <p><a href="http://lh5.ggpht.com/-iK5rViy7-Ew/T9HRhHW3iFI/AAAAAAAABVg/ubGbFC_p-qE/s1600-h/image%25255B16%25255D.png"><img style="margin: 0px; display: inline" title="image" alt="image" src="http://lh5.ggpht.com/--S_Sk7tIKV4/T9HRiAYrguI/AAAAAAAABVo/7e29lgxiY3U/image_thumb%25255B7%25255D.png?imgmax=800" width="624" height="193" /></a></p> <p><b></b><b></b></p> <p><b><font color="#4bacc6" size="4">ASP.NET</font> - </b>WebMatrix 2 comes with ASP.NET Web Pages 2, which has several improvements over ASP.NET Web Pages 1. Some of my favorites are:</p> <p>· Dead simple integration with <b>Twitter, Facebook and other oAuth</b> authentication</p> <p>· Great helpers for <b>embedding maps in your web pages</b>. </p> <p>· Built in features for <b>User input validation</b>.</p> <p>You can read more about new ASP.NET WebPages features at – <a href="http://www.asp.net/web-pages/overview/whats-new/top-features-in-web-pages-2">Top Features in Web Pages 2</a></p> <p>In addition to runtime features there is a ton of tooling improvement within WebMatrix 2 for ASP.NET. WebMatrix 2 now uses Visual Studio code editors which will makes writing code a real pleasure. You will now have <b>full C#/VB# intellisense within WebMatrix 2 </b>e.g. check out HTML embedded C# intellisense on ASP.NET Web Pages helpers:</p> <p><a href="http://lh4.ggpht.com/-uIDdkssSAA0/T9HRiVqlU5I/AAAAAAAABVw/qFrchRRXBXc/s1600-h/image%25255B19%25255D.png"><img style="margin: 0px; display: inline" title="image" alt="image" src="http://lh4.ggpht.com/-nlpNzxc2BiQ/T9HRi-Z3wqI/AAAAAAAABV4/faReAlPtwc0/image_thumb%25255B8%25255D.png?imgmax=800" width="623" height="220" /></a></p> <p>In addition to great intellisense on C# & VB WebMatrix 2 now also supports <font color="#646b86" size="3"><strong>NuGet Gallery</strong></font></p> <p><a href="http://lh6.ggpht.com/-ptdvl9tftxE/T9HRjSVzKPI/AAAAAAAABWA/TZuS2xm2DWE/s1600-h/image%25255B22%25255D.png"><img style="margin: 0px; display: inline" title="image" alt="image" src="http://lh3.ggpht.com/-V06wQbM5z_8/T9HRjnQ7IlI/AAAAAAAABWE/98xX4HYuidw/image_thumb%25255B9%25255D.png?imgmax=800" width="624" height="452" /></a></p> <p><b><font color="#4bacc6" size="4">More Awesome Web Stuff</font> </b><b>–</b>In addition to above Webatrix 2 supports many other modern web goodies like: LESS, SaSS, Coffee Script. Just click Add new item and check out all of these and in fact many more file types supported, you just need to explore J Infact with a tiny bit of exploring you will also see that WebMatrix also provides code completion for LESS and compilation for both LESS & CoffeeScript. I am super jazzed about all this coz I really have wanted to use these features. </p> <p><a href="http://lh5.ggpht.com/-adWl-xYGqPc/T9HRkdbGHZI/AAAAAAAABWQ/BLd3MjbP0s4/s1600-h/image%25255B32%25255D.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.ggpht.com/-1aUtfj0rqpA/T9HRkvO3SbI/AAAAAAAABWY/lajKLhUs45I/image_thumb%25255B13%25255D.png?imgmax=800" width="118" height="134" /></a>   <a href="http://lh4.ggpht.com/-Inv96rHI1Yg/T9HRlHbWvaI/AAAAAAAABWg/WlPQ8kXyYjc/s1600-h/image%25255B33%25255D.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh6.ggpht.com/-NKIKLLatWXA/T9HRlRLPpzI/AAAAAAAABWk/iWXR1j0Qi6k/image_thumb%25255B14%25255D.png?imgmax=800" width="113" height="129" /></a>   <a href="http://lh5.ggpht.com/-t87nyJiI3Ps/T9HRltoZpAI/AAAAAAAABWw/6YSalFeljho/s1600-h/image%25255B34%25255D.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.ggpht.com/-KTIDoef95FQ/T9HRl9t-SkI/AAAAAAAABW4/LEzkvqXw4I8/image_thumb%25255B15%25255D.png?imgmax=800" width="110" height="128" /></a></p> <p><b><font color="#4bacc6" size="4">PHP </font>– </b>WebMatrix 1 always supported PHP but now the support goes even further by providing code completion for PHP functions. This has been one of the top asks on <a href="http://webmatrix.uservoice.com/forums/128313-webmatrix-suggestions/filters/top">WebMatrix User Voice</a> and so we are excited to finally have this in.</p> <p><a href="http://lh6.ggpht.com/-lwz_S8vO7uk/T9HRmC24UYI/AAAAAAAABXA/6jB-IYLcbsI/s1600-h/image%25255B37%25255D.png"><img style="margin: 0px; display: inline" title="image" alt="image" src="http://lh3.ggpht.com/-zIsDFmW4bdw/T9HRmZaM-nI/AAAAAAAABXI/7LyCUManR94/image_thumb%25255B16%25255D.png?imgmax=800" width="623" height="183" /></a></p> <p><b></b></p> <p><b><font color="#4bacc6" size="4">Node.js</font> – </b>One of the big areas of investment in WebMatrix 2 RC was Node.js. We have tons of features coming in for Node.js. Some of my favorite ones are:</p> <p><b><font color="#646b86" size="3">Awesome templates</font></b> - If you have never used Node.js before but have always wanted to WebMatrix 2 is your opportunity. Trust me here and give it a try. Just install WebMatrix 2 from above big green button, go to “Templates” and pick one of the templates below (preferably <b>Starter</b> template)</p> <p><a href="http://lh6.ggpht.com/-c7x0hDYAqdM/T9HRm-ZtP2I/AAAAAAAABXQ/9KZM-E-5ZWo/s1600-h/image%25255B40%25255D.png"><img style="display: inline" title="image" alt="image" src="http://lh3.ggpht.com/-Gz4ZEAwD3fk/T9HRnOiRwnI/AAAAAAAABXU/H_BTjGPHmbY/image_thumb%25255B17%25255D.png?imgmax=800" width="624" height="450" /></a></p> <p><b></b></p> <p>Just by installing a Node.js template, WebMatrix 2 will install Node.js, NPM, IIS Node, NPM Packages for you and within seconds your machine will feel like a Node developer heaven. The Starter template comes with best practices on writing Node.js application and even gives you taste of some quick “Chat Room” functionality using very popular NPM package Socket.IO.</p> <p><b><font color="#646b86">Node.js Code Completion</font></b> – WebMatrix supports code completion for core Node modules and functions:</p> <p><a href="http://lh4.ggpht.com/-jZ70RsfgwxY/T9HRnfAB4fI/AAAAAAAABXg/TAQ8RWcSIZw/s1600-h/image%25255B43%25255D.png"><img style="display: inline" title="image" alt="image" src="http://lh5.ggpht.com/-divqJT07paA/T9HRnx48h4I/AAAAAAAABXo/E6Lz2zsCvd0/image_thumb%25255B18%25255D.png?imgmax=800" width="400" height="243" /></a></p> <p><b><font color="#646b86">3<sup>rd</sup> Party Module Code Completion</font> - </b>Our team has been working with the community to come up with a common format to be able to be able provide you with 3<sup>rd</sup> party module code completion and I am super happy to share that we now do have code completion for all 3<sup>rd</sup> party modules who have jsdoc support e.g. check out the code completion on Recaptha below:</p> <p><a href="http://lh4.ggpht.com/-zuGYvyuV7xA/T9HRoCxOvrI/AAAAAAAABXw/WacqmR01qiE/s1600-h/image%25255B46%25255D.png"><img style="margin: 0px; display: inline" title="image" alt="image" src="http://lh5.ggpht.com/-X3U2Ik1U-bw/T9HRot8hR8I/AAAAAAAABX0/MZW36ZHtRD4/image_thumb%25255B19%25255D.png?imgmax=800" width="624" height="155" /></a></p> <p><b><font color="#646b86">Jade/EJS Colorization</font></b> – WebMatrix also supports colorization for Jade files making it friendly for people who love to use Express MVC framework with Node.js. Infact WebMatrix will also support <b>EJS </b>if you prefer that as your view engine.</p> <p><a href="http://lh3.ggpht.com/-re6lSbufjv8/T9HRozv-3aI/AAAAAAAABX8/5D4XW9j1pys/s1600-h/image%25255B49%25255D.png"><img style="margin: 0px; display: inline" title="image" alt="image" src="http://lh4.ggpht.com/-gH1SjcAGmps/T9HRpHoKkdI/AAAAAAAABYE/KsDL3gQm8jc/image_thumb%25255B20%25255D.png?imgmax=800" width="624" height="208" /></a></p> <p>We have lot more goodies for Node Developers check out post written by Justin on our team: <a href="http://jbeckwith.com/2012/06/07/node-js-meet-webmatrix/">Node.js meets WebMatrix</a></p> <p><b><font color="#4bacc6" size="4">OSS App Development</font> – </b>OSS Apps have always been one of the top focuses for WebMatrix. In this release we have made even more progress on working with popular OSS apps. Some of my favorite improvements in this space are:</p> <p><b><font color="#646b86" size="3">App Install Workflow</font></b> – We aspired to ask almost zero questions when you install an open source app like WordPress or Joomla. We make the default choices for you and yeah we know that some of you want full control so we enabled full customized install as well.</p> <p><a href="http://lh5.ggpht.com/-55wtFWqOTms/T9HRpZZW-lI/AAAAAAAABYM/7-ttbsmy4Lw/s1600-h/image%25255B55%25255D.png"><img style="margin: 0px; display: inline" title="image" alt="image" src="http://lh6.ggpht.com/-5vWxyU8qFjg/T9HRp7nR4FI/AAAAAAAABYU/KCYhm6f5JlU/image_thumb%25255B22%25255D.png?imgmax=800" width="726" height="522" /></a></p> <p><b><font color="#646b86" size="3">App Specific Dashboard</font></b> – With WebMatrix 2 OSS Apps can customize the dashboard content that is shown to us developers. If you want to try out a new app and want to be connected with its community then this serves as a great resource. Check out how Umbraco customizes the WebMatrix dashboard with super useful links (and pretty icons J). Similarly there are several other communities who do the same.</p> <p><a href="http://lh5.ggpht.com/-aBbjlyDGdxI/T9HRqSjeg2I/AAAAAAAABYg/fHrOJXECASU/s1600-h/image%25255B52%25255D.png"><img style="margin: 0px; display: inline" title="image" alt="image" src="http://lh4.ggpht.com/-EkT39BX8gBM/T9HRqlUwJSI/AAAAAAAABYo/56qAOOy6tGw/image_thumb%25255B21%25255D.png?imgmax=800" width="624" height="520" /></a></p> <p><b><font color="#646b86" size="3">App Specific Code Completion</font></b> - WebMatrix now goes one step ahead and provides code completion for App Specific function. Check out the WordPress example below. Similarly other OSS apps provide code completion for their functions too.</p> <p><a href="http://lh5.ggpht.com/-XHPjjHOvm-w/T9HRrZ5WrPI/AAAAAAAABYs/Lyy4PZmnUzk/s1600-h/image%25255B58%25255D.png"><img style="margin: 0px; display: inline" title="image" alt="image" src="http://lh5.ggpht.com/-dMMiWyT6ktU/T9HRrsVlU6I/AAAAAAAABY0/pz2kWcJpt_I/image_thumb%25255B23%25255D.png?imgmax=800" width="565" height="206" /></a></p> <p>Needless to mention all ASP.NET apps get code completion just by the virtue of using the same editing surface as Visual Studio!</p> <p><b><font color="#646b86" size="3">App Specific File locking</font> </b>– Most apps recommend not to modify their core files which ship with the app coz these files change from one app version to another. It is always a pain point for web developers to know which files are allowed to be modified and which are not. WebMatrix makes this easy by providing the App Specific File Locking feature. When you attempt to modify one of the core files WebMatrix warns you like below:</p> <p><a href="http://lh6.ggpht.com/-sYJUJl_wPTI/T9HRsNMAsEI/AAAAAAAABY8/tGt7cfd5vOU/s1600-h/image%25255B62%25255D.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh6.ggpht.com/-ZCI_KuKXLNM/T9HRsRCjS0I/AAAAAAAABZI/PBABWk03ZYk/image_thumb%25255B25%25255D.png?imgmax=800" width="380" height="260" /></a></p> <p><b><font color="#4bacc6" size="4">Mobile Web</font> – </b>We all know Mobile web is huge and we know it is only going to get bigger. With WebMatrix 2 we want you to be able to make your websites mobile enabled easily. To support that below are few top features:</p> <p><b><font color="#646b86" size="3">ASP.NET Web Pages</font> </b>– In ASP.NET Web Pages we now have ability to render mobile specific views. The System.Web.WebPages namespace contains classes that let you work with display modes easily. </p> <p><b><font color="#646b86" size="3">Node.js</font> –</b> In our Node.js templates we wrote sample code for you to take a look at how you could redirect calls to right views based on user agent of the browser. </p> <p><b><font color="#646b86" size="3">Templates</font></b> – We made all of our templates - ASP.NET, Node.js as well as PHP templates look nice on mobile devices so that you can have samples on how to use meta tags, mobile specific CSS or even different layout and scripts.</p> <p> <table border="0" cellspacing="0" cellpadding="0"><tbody> <tr> <td valign="top" width="213"><a href="http://lh4.ggpht.com/-S7frbfqWmCw/T9HRs74Pv7I/AAAAAAAABZQ/4xRQh1NtyW0/s1600-h/image%25255B66%25255D.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh4.ggpht.com/-nGQB-NPsckk/T9HRtPI6KqI/AAAAAAAABZY/MO62Bl28MO8/image_thumb%25255B27%25255D.png?imgmax=800" width="217" height="277" /></a></td> <td valign="top" width="213"><a href="http://lh4.ggpht.com/-TxS7PWCzG1A/T9HRtmFAHyI/AAAAAAAABZg/a451jfpAmPE/s1600-h/image%25255B74%25255D.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh4.ggpht.com/-b4lbjlsumGY/T9HRuDjKVxI/AAAAAAAABZs/iVJMM-4Fr2Q/image_thumb%25255B31%25255D.png?imgmax=800" width="203" height="276" /></a></td> <td valign="top" width="213"><a href="http://lh5.ggpht.com/-jrJPDi-zURI/T9HRu9asKzI/AAAAAAAABZ0/nNfWVEnUXyA/s1600-h/image%25255B73%25255D.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.ggpht.com/-P21ZsKXRe7U/T9HRvWL8HuI/AAAAAAAABZ8/frzcmQIk2Zg/image_thumb%25255B30%25255D.png?imgmax=800" width="202" height="275" /></a></td> </tr> <tr> <td valign="top" width="213"> <p align="center">ASP.NET Starter Template</p> </td> <td valign="top" width="213"> <p align="center">Node.js Starter Template</p> </td> <td valign="top" width="213"> <p align="center">PHP Starter Template</p> </td> </tr> </tbody></table> </p> <p><b><font color="#646b86" size="3">Windows Phone Emulator</font></b> – We hooked up Windows Phone emulator with WebMatrix so that you can take a look how your site will look like in Windows Phone</p> <p><a href="http://lh6.ggpht.com/-YBwp2p1NicY/T9HRv1CVeOI/AAAAAAAABaE/zcVXA5ycp40/s1600-h/image%25255B78%25255D.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh6.ggpht.com/-p2iK_jWMBhs/T9HRwsoSS7I/AAAAAAAABaM/J2fcxJg4kCc/image_thumb%25255B33%25255D.png?imgmax=800" width="379" height="709" /></a></p> <p><b><font color="#646b86" size="3">iPhone Simulators</font></b> – Our partners in <a href="http://www.electricplum.com/?page_id=2">Electric Plum</a> helped create iPhone Simulator which will allow you to validate your site for iPhone.</p> <p><a href="http://lh3.ggpht.com/-F6ebzuES4uk/T9HRw_f2lUI/AAAAAAAABaU/bAfOUOfQ2rs/s1600-h/image%25255B81%25255D.png"><img style="background-image: none; border-right-width: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh4.ggpht.com/-N2gHt4V49ao/T9HRxR6dW9I/AAAAAAAABac/byKQ82OCW2Y/image_thumb%25255B34%25255D.png?imgmax=800" width="370" height="713" /></a></p> <p>And <a href="http://www.electricplum.com/?page_id=2">Electric Plum</a> actually did not stop there, they went ahead and even provided iPad Simulator for you as well.</p> <p><a href="http://lh4.ggpht.com/-nvk-MBm-Jug/T9HRx1_vy8I/AAAAAAAABak/nID6Rlpg81g/s1600-h/image%25255B84%25255D.png"><img style="background-image: none; border-right-width: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.ggpht.com/--zxHswL-Ee8/T9HRyV8MvTI/AAAAAAAABaw/OPqYWHSD6r4/image_thumb%25255B35%25255D.png?imgmax=800" width="623" height="476" /></a></p> <p><b><font color="#646b86" size="3">jQuery Mobile</font></b> – You might already know that we have been huge fans of jQuery project. This time around we used jQuery mobile to make many of our templates mobile enabled. Infact for you to be able to do this with your websites, we now ship jQuery mobile along with our templates and even beyond that we also support code completion for jQuery mobile.</p> <p><a href="http://lh6.ggpht.com/-t3bzCnL3FQI/T9HRy8ndt9I/AAAAAAAABa4/ST1sA5DrNX8/s1600-h/image%25255B88%25255D.png"><img style="display: inline" title="image" alt="image" src="http://lh5.ggpht.com/-wr7kzAZskz8/T9HRzbqO1TI/AAAAAAAABbA/MwB0pdoxvyE/image_thumb%25255B37%25255D.png?imgmax=800" width="623" height="181" /></a></p> <p>So overall I think when it comes to mobile web you hopefully will not have to look further than WebMatrix 2</p> <p><b><font color="#4bacc6" size="4">Database Management</font> –</b> In WebMatrix 1 we provided support for SQL CE which is a light weight, in memory DB engine which can actually ship with your site (i.e. with SQL CE you will not have to separately buy DBs from your hosting provider, it will just run inside your site process). In addition to that WebMatrix 1 already support for MySQL, MS SQL Server and even migration from SQL CE to SQL Server. In WebMatrix 2 we added more polished features around Data Management, Schema Management as well as Relationships & Keys management. Check out the screenshot below to get an idea around the possibilities.</p> <p><a href="http://lh5.ggpht.com/-nlefHJAfcNg/T9HRz8coOmI/AAAAAAAABbM/xJ9tn5dDkiA/s1600-h/image%25255B92%25255D.png"><img style="display: inline" title="image" alt="image" src="http://lh5.ggpht.com/-mnLcPI2N-sk/T9HR1inhJTI/AAAAAAAABbU/sJVChaTmP4M/image_thumb%25255B39%25255D.png?imgmax=800" width="624" height="292" /></a></p> <p>In WebMatrix 2 we also added hugely requested feature for adding new MySQL and SQL Server DBs to your site, which can then be easily deployed remotely to your hosting provider.</p> <p><a href="http://lh3.ggpht.com/-3isNmWKrzyE/T9HR10DGhqI/AAAAAAAABbc/LiJp9jHBmJg/s1600-h/image%25255B96%25255D.png"><img style="display: inline" title="image" alt="image" src="http://lh5.ggpht.com/-bBbuKk8gc_8/T9HR2NZnG3I/AAAAAAAABbk/rJraAd6vXPY/image_thumb%25255B41%25255D.png?imgmax=800" width="273" height="147" /></a></p> <p><a href="http://lh3.ggpht.com/-rQk2Jjv17XM/T9HR2SME4qI/AAAAAAAABbs/pi311AMk4B8/s1600-h/image%25255B100%25255D.png"><img style="display: inline" title="image" alt="image" src="http://lh3.ggpht.com/-iUxVjbcpvWg/T9HR2iIvAYI/AAAAAAAABb0/S6jaXu708do/image_thumb%25255B43%25255D.png?imgmax=800" width="249" height="128" /></a></p> <p><b></b><b></b></p> <p><b></b><b></b></p> <p><b><font color="#4bacc6" size="4">Extensibility</font> – </b>Since WebMatrix is a free tool and even though we are inside Microsoft we are a small team. We thought that if we would make WebMatrix really extensible then hopefully many of the passionate users would help us out in taking the product to even greater heights. For this reason we made WebMatrix 2 extensible. We are already seeing awesome extensions come through like:</p> <p>The <b><font color="#000000">Color Theme Manager</font></b> which will allow you to change your editor themes by picking from several thousand community themes available on <a href="http://studiostyl.es">http://studiostyl.es</a></p> <p><a href="http://lh4.ggpht.com/-k4Eq6iRbkaA/T9HR27p3ZNI/AAAAAAAABb4/GZfJv6OwADg/s1600-h/image%25255B103%25255D.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh4.ggpht.com/-oBCtYDJwGaw/T9HR3UKpcZI/AAAAAAAABcE/UTw7kS9c_Yk/image_thumb%25255B44%25255D.png?imgmax=800" width="624" height="448" /></a></p> <p>The <strong>iPhone, iPad</strong> and <strong>Windows Phone</strong> simulators/emulators you saw above are WebMatrix extensions too.</p> <p>There are several other awesome extensions like <strong>OrangeBits Compiler</strong>(compiles CoffeeScript, LESS, minifies JS, CSS etc), <strong>Super Snippets</strong> (allows you to create snippets of code to use later), <strong>Node Power Tools</strong> (Includes integration with Node Inspector, Console window and more fun stuff), <strong>Image Viewer</strong> (allows you to open images inside WebMatrix) and many more. If I took screenshot of each of those I would probably never finish my post so will leave them to you to explore. WebMatrix has an extension gallery which you can access via the ribbon, do take time and check it out.</p> <p><a href="http://lh3.ggpht.com/-IBKFajJdOwk/T9HR3nrHu3I/AAAAAAAABcM/5mrl-6zw2XU/s1600-h/image%25255B106%25255D.png"><img style="background-image: none; border-right-width: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh4.ggpht.com/-y4S_EAJUf_k/T9HR4RoltOI/AAAAAAAABcU/99VVLImJU5I/image_thumb%25255B45%25255D.png?imgmax=800" width="624" height="445" /></a></p> <p><font color="#4bacc6" size="4">WebMatrix Extension Gallery</font></p> <p><b></b></p> <p>Most importantly we want you to try out creating a new extension as well so we have great documentation, videos and online site at <a href="http://extensions.webmatrix.com">http://extensions.webmatrix.com</a></p> <p><a href="http://lh6.ggpht.com/-t0Jzs8wOTSk/T9HR4685b2I/AAAAAAAABcc/ww2waGKE-VA/s1600-h/image%25255B110%25255D.png"><img style="display: inline" title="image" alt="image" src="http://lh5.ggpht.com/-eaFg7UxD6z8/T9HR5UVW7XI/AAAAAAAABck/XqoUIozJj30/image_thumb%25255B47%25255D.png?imgmax=800" width="624" height="349" /></a></p> <p>If you are interested in creating an extension please do check out <a href="http://extensions.webmatrix.com/documentation_2">How to Create WebMatrix Extensions</a></p> <p><b><font color="#4bacc6" size="4">Cloud Integration</font> </b>Whether you are starting to build your site, working on it now or ready to deploy, it is worth checking out the great Cloud integration features that WebMatrix has.</p> <p><b><font color="#646b86" size="3">Cloud Enabled Apps</font> - </b>WebMatrix highlights OSS apps in the gallery which are ready to go to cloud (notice the blue border Azure icon around some of them). This will allow you to easily pick Windows Azure ready apps. I took this screenshot early on so there might be many other apps which might be Azure ready now they seem to be pouring in on almost daily basis:</p> <p><a href="http://lh4.ggpht.com/-FUdJwoFz_do/T9HR5qBg8vI/AAAAAAAABcs/9ZeUBG923oQ/s1600-h/image%25255B113%25255D.png"><img style="background-image: none; border-right-width: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh5.ggpht.com/-TKeRtPmoM8E/T9HR6IV7ZSI/AAAAAAAABc0/dbLNjGhgfJ0/image_thumb%25255B48%25255D.png?imgmax=800" width="624" height="452" /></a></p> <p><b><font color="#646b86" size="3">Remote Editing</font> – </b>WebMatrix allows you to edit your site directly on Windows Azure or for that matter any other hosting provider who supports Web Deploy technology. To connect and edit your files remotely on WebMatrix dashboard simply click Open à Remote Site</p> <p><a href="http://lh6.ggpht.com/-mM8SMkCLadE/T9HR6fiPq2I/AAAAAAAABc8/mqBykv4K6O8/s1600-h/image%25255B117%25255D.png"><img style="display: inline" title="image" alt="image" src="http://lh6.ggpht.com/-PC7c2CbsGaI/T9HR6weNyWI/AAAAAAAABdE/6YA6B_Uwb70/image_thumb%25255B50%25255D.png?imgmax=800" width="524" height="399" /></a></p> <p><b><font color="#646b86" size="3">Seamless Publishing</font> – </b>Even in WebMatrix 1 we supported seamless publish of both your <b>files and databases</b>. WebMatrix 2 takes that experience to Azure and now you can seamlessly deploy your sites to Windows Azure. Check out the screenshot below which is deploying PHP + My SQL site to Windows Azure.</p> <p><a href="http://lh6.ggpht.com/-tH9CR-pbgbs/T9HR7H0cASI/AAAAAAAABdQ/HEW3exjfbOY/s1600-h/image%25255B120%25255D.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh6.ggpht.com/-4SAIPx_a9rc/T9HR77NFidI/AAAAAAAABdU/-DW4_erysYU/image_thumb%25255B51%25255D.png?imgmax=800" width="620" height="361" /></a></p> <p><b><font color="#646b86" size="3">Download from Windows Azure</font> – </b>In this wave of Windows Azure we release Windows Azure Web Sites. As I mentioned earlier WebMatrix is very tightly integrated with Windows Azure Web Sites and when you create a new Website in Windows Azure you will notice the below command bar: </p> <p><a href="http://lh4.ggpht.com/-bWzAG8Fpluk/T9HR8dOpCKI/AAAAAAAABdo/d7ZgUtBvvRg/s1600-h/image%25255B124%25255D.png"><img style="background-image: none; border-right-width: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh4.ggpht.com/-M5CYH8QzqjQ/T9HR95znhEI/AAAAAAAABd0/as4uuYWj0eg/image_thumb%25255B53%25255D.png?imgmax=800" width="819" height="54" /></a></p> <p>The “WebMatrix” button on the command bar will allow you to install WebMatrix 2 RC if you don’t already have it, it will also upgrade your WebMatrix 1 to WebMatrix 2. Additionally if your Azure site is empty it will allow you to choose from WebMatrix templates or OSS app gallery. If you already have a site in Azure then WebMatrix will detect the type of site it is (e.g. WordPress in screenshot below) and will allow you to make a local copy of it by pulling down the files as well as databases. Even beyond pulling files and databases, WebMatrix will also fix up your app locally so that it can work without need any internet connection and whenever you are ready with your changes and back online again, it will allow you to seamlessly publish back to Azure again.</p> <p><a href="http://lh5.ggpht.com/-KLLp0HxwbBE/T9HR-due25I/AAAAAAAABeA/uC6ifEM7oPA/s1600-h/image%25255B127%25255D.png"><img style="background-image: none; border-right-width: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh4.ggpht.com/-uUHE-vqGXhM/T9HR-lHgHmI/AAAAAAAABeI/pZ6z2qf6-_0/image_thumb%25255B54%25255D.png?imgmax=800" width="620" height="263" /></a></p> <p><b></b></p> <p>If lot of this feels unreal I suggest you give it a try by signing up for a FREE Windows Azure account today at <a href="http://windowsazure.com">http://windowsazure.com</a> (Go to Manage – Create a new WebSite). You can also take a look at the video titled “<b>Windows Azure Web Sites – OSS Apps & WebMatrix</b>” demonstrating the experience <a href="http://www.meetwindowsazure.com/DigitalChalkTalks">here</a></p> <p><b><font color="#9bbb59" size="5"><a href="http://bit.ly/KgEXEB">WebMatrix.com</a></font></b></p> <p>What I mentioned here is only a fraction of new feature information about WebMatrix 2. There is a ton more information available on <a href="http://bit.ly/KgEXEB">http://webmatrix.com/next</a> . Do take time to look at our “How To” documents and videos, I am hopeful that you will find them interesting.</p> <p><b><font color="#9bbb59" size="5">Free Web Hosting</font></b></p> <p>Lot of the above features not only work great in Windows Azure but work really REALLY WELL on FREE HOSTING OFFERS which our partners have put together for you. All these great companies worldwide are bringing you <b>free web hosting</b> so that you can create beautiful websites and easily share them with your friends and family.</p> <p>These hosting offers are free only for limited set of developers so do not miss out on the opportunity to try them out by clicking them:</p> <p><a href="http://go.microsoft.com/?linkid=9811408"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh5.ggpht.com/-SZoETjaUgOE/T9IjWrYcz9I/AAAAAAAABgo/eZTwYFyNa5Q/image153%25255B1%25255D.png?imgmax=800" width="95" height="60" /></a><a href="http://go.microsoft.com/?linkid=9811403" target="_blank"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh5.ggpht.com/-N7G1DGm2bb8/T9HSCAdj0hI/AAAAAAAABgw/1ZxDEfZ3Qfg/image131%25255B3%25255D.png?imgmax=800" width="86" height="52" /></a><a href="http://go.microsoft.com/?linkid=9811405"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh4.ggpht.com/-bEcXjP9ZcUo/T9HSC3Fz_GI/AAAAAAAABg0/RcRbHno2Qcs/image137%25255B1%25255D.png?imgmax=800" width="111" height="56" /></a><a href="http://go.microsoft.com/?linkid=9811407"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh5.ggpht.com/-c891pgtaWcg/T9HSDcsGaVI/AAAAAAAABg4/lycojZ5902I/image140%25255B1%25255D.png?imgmax=800" width="159" height="48" /></a><a href="http://go.microsoft.com/?linkid=9811406"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh4.ggpht.com/-wvG-YW5NAvs/T9HSEJ6OS5I/AAAAAAAABg8/tBoBmEo2qPA/image143%25255B1%25255D.png?imgmax=800" width="114" height="55" /></a><a href="http://go.microsoft.com/?linkid=9811409"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: left; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" align="left" src="http://lh5.ggpht.com/-D10S20u94Yw/T9HSEwrc6QI/AAAAAAAABhA/KIFQssuKCNs/image146%25255B1%25255D.png?imgmax=800" width="119" height="54" /></a><a href="http://go.microsoft.com/?linkid=9811404"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: left; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" align="left" src="http://lh3.ggpht.com/-ZCO65XhZjuM/T9HSGLXt_dI/AAAAAAAABhE/-KWxqAueaAc/image157%25255B1%25255D.png?imgmax=800" width="123" height="65" /></a></p> <p><b></b></p> <p><b><font color="#9bbb59" size="5"></font></b></p> <p><b><font color="#9bbb59" size="5"></font></b></p> <br /> <p><a href="http://lh3.ggpht.com/-bltvLFKvjXI/T9IkQYubLmI/AAAAAAAABhY/W4o9CGKn2Qw/s1600-h/image%25255B9%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh6.ggpht.com/-bQFLjLCBdtE/T9IkQpppm6I/AAAAAAAABhg/-dROZCqDeSA/image_thumb%25255B4%25255D.png?imgmax=800" width="293" height="45" /></a></p> <p><b><font color="#9bbb59" size="5">User Voice</font></b></p> <p>Just around last September we opened up our User Voice forum and since then we have been getting user asks on several features. I am glad to let you know that just yesterday we marked <b>67 Feature Requests on User Voice</b> as completed. That does not mean we are not hungry for more, in fact we would love to hear your feedback, if you have feature request please to go to our <a href="http://webmatrix.uservoice.com/forums/128313-webmatrix-suggestions/filters/top">User Voice</a> and leave a vote/suggestion </p> <p><b><font color="#9bbb59" size="5">Have fun</font></b></p> <p>We made this web development tool for you and we really hope you will love using WebMatrix 2 as much as we loved building it. </p> <p>/*code awesomely */</p> <p>Vishal</p> <p>PS: We now have few WebMatrix team twitter handles which you might want to consider following <a href="https://twitter.com/#!/vishalrjoshi">@vishalrjoshi</a> <a href="https://twitter.com/#!/JustinBeckwith">@justinbeckwith</a> & <a href="https://twitter.com/#!/webmatrix">@webmatrix</a></p> Vishal R Joshihttp://www.blogger.com/profile/05217117734084631137noreply@blogger.com21tag:blogger.com,1999:blog-5704450.post-90323116120571798662012-02-10T17:24:00.001-08:002012-02-10T17:26:44.226-08:00What is worth noting in WebMatrix 2<p>If I have to summarize in what is worth noting in <a href="http://webmatrix.com/next">WebMatrix 2</a> so far, here is how I would like to put it:</p> <p><font size="4"><strong><font color="#c0504d">Inspiring Environment</font> – </strong></font><font size="2">Web development is an inspiring task and I believe having an inspiring environment for it is important.  In WebMatrix we have always aspired to give web developers a polished and fresh environment to achieve mundane tasks.   Some interesting things worth noting in WebMatrix 2 from this standpoint are:</font></p> <ul> <li><strong>App Install Workflow</strong> – We aspired to ask almost zero questions when you install an open source app like WordPress or Joomla.  We make the default choices for you and yeah we know that some of you want full control so we will enable that as well.</li> </ul> <p><a href="http://lh5.ggpht.com/-w0qwQRQ43oE/TzXDOTy21wI/AAAAAAAABP4/dUsV6CHiWNs/s1600-h/image%25255B95%25255D.png"><img style="display: block; float: none; margin-left: auto; margin-right: auto" title="image" alt="image" src="http://lh4.ggpht.com/-fNYlaQ5K-lg/TzXDOjEEXCI/AAAAAAAABQA/2VveYXG4cds/image_thumb%25255B71%25255D.png?imgmax=800" width="500" height="362" /></a></p> <ul> <li><strong>Color Picker</strong> – Yeah you would think that what is the big deal about a CSS color picker but we rejected the traditional design you see every other place, we wanted it to be more natural to use and what we have now is something which has tons of tiny details like showing colors which your site already uses, switching from hex to RGBA, color picking from any other window open on your machine and doing all this without using a mouse.  I am really proud of what we have built you should for sure check it out.</li> </ul> <p><a href="http://lh3.ggpht.com/-u91aqNsofeA/TzXDOxaqv4I/AAAAAAAABQI/t7HZ-8VY7a0/s1600-h/image%25255B93%25255D.png"><img style="display: block; float: none; margin-left: auto; margin-right: auto" title="image" alt="image" src="http://lh6.ggpht.com/-6hgeEBicrIk/TzXDPMqkYHI/AAAAAAAABQQ/9rtFS0fOiFs/image_thumb%25255B69%25255D.png?imgmax=800" width="350" height="228" /></a></p> <ul> <li><strong> DB Manager</strong> – We made it beautiful, yet super functional, WebMatrix 1 design was cool but this one is like artic cool <img style="border-bottom-style: none; border-left-style: none; border-top-style: none; border-right-style: none" class="wlEmoticon wlEmoticon-smile" alt="Smile" src="http://lh5.ggpht.com/-RX5PXzGPGCY/TzXDPal2buI/AAAAAAAABQY/g383BHCeUGw/wlEmoticon-smile%25255B2%25255D.png?imgmax=800" /> <br /><a href="http://lh3.ggpht.com/-InAecT3zk0I/TzXDPZ08PyI/AAAAAAAABQg/5RcncfzioTA/s1600-h/image%25255B91%25255D.png"><img style="display: block; float: none; margin-left: auto; margin-right: auto" title="image" alt="image" src="http://lh4.ggpht.com/-wuAQlpezqXU/TzXDP0cnH4I/AAAAAAAABQo/MokBrZ8DxUE/image_thumb%25255B67%25255D.png?imgmax=800" width="500" height="274" /></a></li> <li> <strong>Remote View of Local site </strong>– In WebMatrix 2 we allow you to flip your views between local and remote to seamlessly troubleshoot server issues. Note the ribbon tabs “Home” == Local, “Remote” == Remote <img style="border-bottom-style: none; border-left-style: none; border-top-style: none; border-right-style: none" class="wlEmoticon wlEmoticon-smile" alt="Smile" src="http://lh5.ggpht.com/-RX5PXzGPGCY/TzXDPal2buI/AAAAAAAABQY/g383BHCeUGw/wlEmoticon-smile%25255B2%25255D.png?imgmax=800" /></li> </ul> <p><a href="http://lh5.ggpht.com/-Qf7ACtCOyB4/TzXDP4NYjgI/AAAAAAAABQw/ZCjdGjDhw6A/s1600-h/image%25255B89%25255D.png"><img style="display: block; float: none; margin-left: auto; margin-right: auto" title="image" alt="image" src="http://lh5.ggpht.com/-QkeYbqTA4j4/TzXDQNx7jjI/AAAAAAAABQ4/22HSFaHqujc/image_thumb%25255B65%25255D.png?imgmax=800" width="402" height="221" /></a></p> <ul> <li> <strong>Work Remotely </strong>– What if you you are in a hotel and don’t have your dev box? You know WebMatrix installs blazing fast, so now it does not matter where you are and which machine you are using you can simply download & setup WebMatrix in just 2 minutes and open your site remotely.  You will still get the colorization that you are use to and without making any local copies of your site you can get quick fixes done. </li> </ul> <a href="http://lh6.ggpht.com/-SzXdr-cqJLE/TzXDQcLjCII/AAAAAAAABRA/F5mDD2Q0_Pw/s1600-h/image%25255B87%25255D.png"><img style="display: block; float: none; margin-left: auto; margin-right: auto" title="image" alt="image" src="http://lh4.ggpht.com/-0cbPSuZxLnU/TzXDQq0cH7I/AAAAAAAABRI/WZbCKNyRuHw/image_thumb%25255B63%25255D.png?imgmax=800" width="232" height="203" /></a> <p><strong><font color="#c0504d" size="4">Community Comfort</font></strong> – As web developers we know how many times we depend upon the community to find solutions to everyday issues.  In WebMatrix 2 we took the time and energy to open a window into the web community right from within WebMatrix 2.  So now you will see:</p> <ul> <li><strong>Deep engagement with web apps Community –</strong> We work even more closely with many OSS apps founders like WordPress, Joomla, Orchard, Drupal, DNN, Umbraco, Kentico and many others.  We have gathered their feedback and incorporated a lot of it into WebMatrix, as a result WebMatrix now looks like it is build for that particular app.</li> <li><strong>Site Dashborad -</strong>  If you open many apps in WebMatrix 2, you will immediately find getting started, tutorial, forums etc. links for each app right on the site dashboard.  If you are starting your development in Joomla or Umbraco, you will be almost on a self guided learning tour!</li> </ul> <p><a href="http://lh5.ggpht.com/-3SvXBkmuAy8/TzXDQ0awKuI/AAAAAAAABRQ/uHhRb2U6xkA/s1600-h/image%25255B49%25255D.png"><img style="display: block; float: none; margin-left: auto; margin-right: auto" title="image" alt="image" src="http://lh5.ggpht.com/-JuMc6cOwYAw/TzXDRMkL7dI/AAAAAAAABRY/IyZnnYNWbcM/image_thumb%25255B35%25255D.png?imgmax=800" width="609" height="379" /></a></p> <ul> <li><strong>App Specific Code Completion – </strong>We have worked specifically to give you code completion for specific apps when you are developing within it.  E.g. you can now see WordPress functions when you are editing WordPress content files.</li> </ul> <p><a href="http://lh6.ggpht.com/-EaK2QNNO1Rk/TzXDRTGrK_I/AAAAAAAABRg/S4pXKMHwsmc/s1600-h/image%25255B85%25255D.png"><img style="display: block; float: none; margin-left: auto; margin-right: auto" title="image" alt="image" src="http://lh3.ggpht.com/-fARHtRfyC38/TzXDR7hSAYI/AAAAAAAABRo/aE-t2bEtkj0/image_thumb%25255B61%25255D.png?imgmax=800" width="800" height="188" /></a></p> <ul> <li><strong>NuGet – </strong><a href="http://lh4.ggpht.com/-1drT2FNl-wA/TzXDSJu2-TI/AAAAAAAABRw/2JAZBaH2Aes/s1600-h/image%25255B83%25255D.png"><img style="display: inline; float: left" title="image" alt="image" align="left" src="http://lh6.ggpht.com/-1tusYk0Sr5s/TzXDScirTeI/AAAAAAAABR4/MFKs4amQr9w/image_thumb%25255B59%25255D.png?imgmax=800" width="318" height="400" /></a>You might be aware that <a href="http://nuget.org">NuGet</a> is a way to pick up reusable pieces of code packaged into a format called NuGet package.  WebMatrix exposes a NuGet gallery which now allows you to directly consume this community content.  Just for context there are 4555 unique packages as of today on NuGet gallery with an average (my guessitmate) of 150 packages getting added daily.</li> <li></li> <li><strong>Extension Gallery – </strong>We also wanted community to come in an add functionality to WebMatrix itself so that the tool can organically grow to suite needs of you all.  We know that investing in the extensibility will allow us to create more impact than we can create ourselves.  Now we are also working on Extension gallery where all the extension that community will create can be hosted.</li> <li><strong>Learning Community</strong> – We all have grown to love sites like Pluralsight, Learnable, AppendTo.  We worked with them and got that context sensitive learning content inside the product.  Now you can simply hit F1 wherever you are and it is likely that you will and up getting a bunch of tutorial for the things you are looking for.</li> </ul> <p><a href="http://lh3.ggpht.com/-NHUzdsGQuC4/TzXDSkGfyGI/AAAAAAAABSA/xSG62fV3Oc4/s1600-h/image%25255B97%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh6.ggpht.com/-QcaXsEOi4ME/TzXDS4vlJYI/AAAAAAAABSI/GUeot0nB7Jo/image_thumb%25255B73%25255D.png?imgmax=800" width="499" height="77" /></a></p> <ul> <li><strong>Hosting Community</strong> – We have always been super hosting friendly and even this time around we are working with the hosting community members like  Applied Innovation, DiscountASP.NET, Awesome.NET, CBeyond & Citanium to give you free hosting offers to try out your site in live environment</li> </ul> <p><a href="http://lh6.ggpht.com/-OeeNDSEhV_M/TzXDTEygXNI/AAAAAAAABSQ/wLvVdazr0c4/s1600-h/image%25255B99%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh5.ggpht.com/-F-vz3fZeqCk/TzXDTKYPFBI/AAAAAAAABSY/jXmMAVmznjU/image_thumb%25255B75%25255D.png?imgmax=800" width="700" height="67" /></a></p> <p><font color="#c0504d" size="4"><strong>Effortlessly Modern</strong></font> – Keeping up with fast moving modern web is not as easy as it should be, so we spent time to make sure you get all the support to easily keep up with the latest standards.  To that effect we have bunch of new features like:</p> <ul> <li><strong>Awesome templates</strong> – We have built in templates which are filled with best practices, you can feel free to steal from them or start from them as you choose.</li> </ul> <p><a href="http://lh4.ggpht.com/-qMMezJM7fmA/TzXDTVENL8I/AAAAAAAABSg/6wgV0yTKCGk/s1600-h/image%25255B111%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.ggpht.com/-HCRMiFtTths/TzXDTm27PnI/AAAAAAAABSo/LirN6P1g7dI/image_thumb%25255B81%25255D.png?imgmax=800" width="459" height="137" /></a></p> <ul> <li><strong>Intellisense everywhere – </strong>We have intellisense (aka code completion) everywhere in the product.  It does not matter whether you want to use HTML5,  CSS3, jQuery, jQuery mobile, PHP, ASP.NET/C#/VB or JavaScript, we will have you covered.</li> </ul> <p><img style="background-image: none; border-bottom: 0px; border-left: 0px; margin: 0px 0px 0px 100px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" border="0" src="http://www.microsoft.com/web/locale/en-us/media/webmatrix/beta/beta-features/Image5.png" /><a href="http://lh5.ggpht.com/-g51_fz5gpAI/TzXDT9pkWVI/AAAAAAAABSw/_PbwbaVgv_Y/s1600-h/clip_image001%25255B7%25255D.jpg"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="clip_image001" border="0" alt="clip_image001" src="http://lh4.ggpht.com/-XoVgMRttvac/TzXDT7bnevI/AAAAAAAABS4/I-ippdkSABM/clip_image001_thumb%25255B4%25255D.jpg?imgmax=800" width="61" height="68" /></a><img style="background-image: none; border-bottom: 0px; border-left: 0px; margin: 0px 8px 0px 37px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" border="0" src="http://www.microsoft.com/web/locale/en-us/media/webmatrix/beta/beta-features/Image6.png" /><img style="background-image: none; border-bottom: 0px; border-left: 0px; margin: 0px 8px 0px 100px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" border="0" src="http://www.microsoft.com/web/locale/en-us/media/webmatrix/beta/beta-features/Image8.png" /><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" border="0" src="https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcQ2ugDOaVWL-HV14o3hyiIwwNzYVylyS7_j1CryWSrvw6DzBGIG" width="122" height="66" /></p> <ul> <li><strong>Facebook | Twitter | oAuth</strong> – We understand that not everyone wants their users to go through elaborate sign up process so now for ASP.NET Razor we have Facebook/Twitter auth built in.  Just un-comment some code, give you app Id, consumer secret and you are all set.</li> </ul> <p><img style="background-image: none; border-bottom: 0px; border-left: 0px; margin: 0px 8px 0px 100px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px" border="0" src="https://encrypted-tbn0.google.com/images?q=tbn:ANd9GcTzH_uLpxyQhEXJjT2QG56gLqZ64XXm38k4Z_VHtNIGzjNud_r1" width="64" height="64" /><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px" border="0" src="http://www.indianapolismotorspeedway.com/var/assets_content/Facebook_Transparent.png" width="64" height="65" /><a href="http://lh6.ggpht.com/-uER-LsBkx40/TzXDUKyUERI/AAAAAAAABTA/qx4Dd27m3BQ/s1600-h/image%25255B81%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh6.ggpht.com/-1HKn25QVrUc/TzXDUbzTtnI/AAAAAAAABTI/LzG4yW3d8rM/image_thumb%25255B57%25255D.png?imgmax=800" width="72" height="74" /></a></p> <p>I could type more but for now let you explore the product yourself.  You can download it from <a href="http://webmatrix.com/next">http://webmatrix.com/next</a>.  Also recently I had an opportunity to get on WebCamps TV and talk a little bit about WebMatrix 2 and some of the above improvements in action..</p> <p>Here is the quick 14 mins video, hope you enjoy it.</p> <p><iframe style="width: 512px; height: 288px" src="http://channel9.msdn.com/Shows/Web+Camps+TV/Web-Camps-TV-12-Vishal-Joshi-talks-about-WebMatrix-v2/player?w=512&h=288" frameborder="0" scrolling="no"></iframe></p> <p>Btw, this product is created for you, the modern web developer and we actively want to hear from you.  That is the reason why in every site dashboard within WebMatrix there is a way to provide feedback about your experience.  If you have thoughts/comments/feedback do not hesitate to write here or on our <a href="http://webmatrix.uservoice.com">UserVoice</a>.</p> <p>Thanks for reading.</p> <p>– Vishal</p> Vishal R Joshihttp://www.blogger.com/profile/05217117734084631137noreply@blogger.com5tag:blogger.com,1999:blog-5704450.post-68138712221105974372011-11-03T21:51:00.001-07:002011-11-03T21:51:00.047-07:00WebMatrix 2 Beta<p>Soon after starting work on <a href="http:// http://webmatrix.com/next">WebMatrix</a> engineering, I got an opportunity to launch WebMatrix 2 Beta at <a href="http://buildwindows.com">//build</a>.  For those who are not familiar with WebMatrix it is all in one web development tool which is inspirational as well as functional at the same time.  It is lightweight enough that you get a web development tool, framework, db, web server and more under 50MB and based on our testing it installs in around 2 mins on a 2GB RAM, Windows 7 machine with .NET Framework pre-installed.  Typically such tools cost $50-100 but WebMatrix is yours for free <img style="border-bottom-style: none; border-left-style: none; border-top-style: none; border-right-style: none" class="wlEmoticon wlEmoticon-smile" alt="Smile" src="http://lh5.ggpht.com/-BZMOGAierh4/TrNvMTuABsI/AAAAAAAABPI/W6EtQe2JNE0/wlEmoticon-smile%25255B2%25255D.png?imgmax=800" /></p> <p>I was involved with <a href="http://www.microsoft.com/web/webmatrix/">WebMatrix 1</a> project which we launched on Jan 13th 2011 and it has only been few months since release of WebMatrix 1 that we have WebMatrix 2 Beta out.</p> <p>If you have not installed WebMatrix 2, you should install it now:</p> <p><a href="http://www.microsoft.com/web/gallery/install.aspx?appid=webmatrix&prerelease=true"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh5.ggpht.com/-VH4blE3C-Ow/TrNvMl2z9kI/AAAAAAAABPQ/nADoPsVgtfk/image%25255B19%25255D.png?imgmax=800" width="171" height="54" /></a></p> <p><a href="http://lh5.ggpht.com/-DXvfWOt3_yg/TrNvMkBTKTI/AAAAAAAABPY/5tpbw01c7gw/s1600-h/image%25255B5%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: right; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" align="right" src="http://lh3.ggpht.com/-84Loi6AKi_g/TrNvM8k8QgI/AAAAAAAABPg/4s-D9CpY6so/image_thumb%25255B3%25255D.png?imgmax=800" width="293" height="293" /></a>There are bunch of NEW features in WebMatrix 2 Beta on top of <a href="http://www.microsoft.com/web/webmatrix/">WebMatrix 1</a>, but I wanted to just call out few top items:</p> <ul> <li>Even more seamless and awesome integration with <a href="http://www.microsoft.com/web/gallery/categories.aspx">Application Gallery</a> where now you will not have to fill in the standard application installation parameters</li> <li>OSS Application specific code completion which means users of popular apps like WordPress can get help customized to their applications</li> <li>Custom look and feel for each Web Application which means if you are editing Umbraco you will feel like WebMatrix is designed for Umbraco with specific contextual actions called out by application authors.</li> <li>Intlellisense for HTML, CSS, JS, C#, VB, ASP.NET Razor as well as PHP.</li> <li>Support for HTML5, CSS3 as well as jQuery constructs.</li> <li>New awesome tools like color picker.</li> <li>Completely revamped Database workspace where you can now execute multiple queries.</li> <li>Extensibility support by which you can write your own extension for WebMatrix.  And trust me it is so easy that you can whip out a ribbon button to do something cool just within minutes.</li> <li>NuGet integration to allow you to build your app with community by your side.</li> <li>Remote tools which will allow you to see the server files and even edit them within seconds.</li> <li>Integrated learning experience with learnable, pluralsight and appendto</li> <li>And more and more…</li> </ul> <p>You can read all about it at <a href="http://webmatrix.com/next">http://webmatrix.com/next</a></p> <p><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: left; border-top: 0px; border-right: 0px; padding-top: 0px" border="0" alt="BUILD" align="left" src="http://www.buildwindows.com/themes/buildtheme/content/build_logo.png" /></p> <p>  As I mentioned earlier I gave the WebMatrix 2 launch talk at //build/ in September 2011.  This talk was recorded and is now available for you to view below.  Hope you will enjoy it.</p> <p> </p> <p><iframe style="width: 942px; height: 540px" src="http://channel9.msdn.com/Events/BUILD/BUILD2011/TOOL-825T/player?w=960&h=544" frameborder="0" scrolling="no"></iframe></p> <p>-Vishal</p> Vishal R Joshihttp://www.blogger.com/profile/05217117734084631137noreply@blogger.com5tag:blogger.com,1999:blog-5704450.post-71375670147004291982011-11-03T20:59:00.001-07:002011-11-03T20:59:07.514-07:00More web stuff at Microsoft<p>It has been pretty busy lately and I never really got an opportunity to come out and post a fresh update on the blog but better late then never.</p> <p>I wanted to share that after working on <a href="http://www.microsoft.com/visualstudio/en-us">Visual Studio</a>, <a href="http://www.microsoft.com/visualstudio/en-us/products/2010-editions/visual-web-developer-express">Visual Web Developer</a>,  and <a href="http://www.asp.net/">ASP.NET</a> for couple of  major releases like VS 2010, VS 11, ASP.NET 4.0, ASP.NET 4.5,  MVC etc, I am now starting to work on <a href="http://www.microsoft.com/windowsazure/">Windows Azure</a>, <a href="http://www.microsoft.com/web/webmatrix/next/">WebMatrix</a>,  <a href="http://www.microsoft.com/web/downloads/platform.aspx">Web Platform Installer</a>, <a href="http://www.microsoft.com/web/">Microsoft.com/web</a>, <a href="http://www.microsoft.com/web/hosting/home">Web Hosting Gallery</a>, <a href="http://www.microsoft.com/web/gallery/categories.aspx">Web Application Gallery</a> and several related projects.  It is all big happy family so it is going to be fun as everything is web after all.  As you can imagine it is a blast working on this team and I have ever thankful for having such a great and talented team around me.</p> <p>Some time I can share how it feels like working on all these different projects but for now I at least wanted to come here, say hello and let you all know I am alive and kicking.  Thanks!!</p> <p>-Vishal</p> Vishal R Joshihttp://www.blogger.com/profile/05217117734084631137noreply@blogger.com0tag:blogger.com,1999:blog-5704450.post-59497788660550079902011-07-13T00:54:00.001-07:002012-05-22T16:10:47.089-07:00Documenting Key End-to-End Deployment Scenarios<h3> </h3> <p>The <a href="http://technet.microsoft.com/en-us/library/dd568996(WS.10).aspx">IIS Web Deployment Tool (Web Deploy)</a> and the <a href="http://msdn.microsoft.com/en-us/library/dd394698.aspx">deployment features introduced in Visual Studio 2010</a> enable you to automate many deployment tasks, but we have heard you all that many common scenarios not yet documented fully. We are addressing this need by creating step-by-step walkthroughs that will guide you from beginning to end through scenarios that address common real-world needs. </p> <p><strong>UPDATE:  We just published the Enterprise Deployment Series which can be found at:</strong></p> <ul> <li><a href="http://asp.net/web-forms/tutorials/deployment/deploying-web-applications-in-enterprise-scenarios/deploying-web-applications-in-enterprise-scenarios">Enterprise Deployment Series Introduction: Deploying Web Applications in Enterprise Scenarios (3 Tutorials)</a></li> <li><a href="http://asp.net/web-forms/tutorials/deployment/web-deployment-in-the-enterprise/web-deployment-in-the-enterprise">Enterprise Deployment Series 1: Web Deployment in the Enterprise (11 Tutorials)</a></li> <li><a href="http://asp.net/web-forms/tutorials/deployment/configuring-server-environments-for-web-deployment/configuring-server-environments-for-web-deployment">Enterprise Deployment Series 2: Configuring Server Environments for Web Deployment (11 Tutorials)</a></li> <li><a href="http://asp.net/web-forms/tutorials/deployment/configuring-team-foundation-server-for-web-deployment/configuring-team-foundation-server-for-web-deployment">Enterprise Deployment Series 3: Configuring Team Foundation Server for Web Deployment (7 Tutorials)</a></li> <li><a href="http://asp.net/web-forms/tutorials/deployment/advanced-enterprise-web-deployment/advanced-enterprise-web-deployment">Enterprise Deployment Series 4: Advanced Enterprise Web Deployment (9 Tutorials)</a></li> </ul> <h4><font style="font-weight: normal">Interestingly, remaining of this blog post is not the documentation of the solution but actual articulation of problem statements. This post presents the first set of scenarios that we have identified and solicit your feedback to help us determine they are representative enough or not. If you have any feedback as usual you can post them here as comments or feel free to send me an email at </font><a href="mailto:Vishal.Joshi@Microsoft.com"><font style="font-weight: normal">Vishal.Joshi@Microsoft.com</font></a><font style="font-weight: normal">. </font></h4> <h4>Scenario 1: Enterprise Deployment with Continuous Integration</h4> <p>In this scenario, a solution that includes multiple web application projects is deployed to test, staging, and production environments, using a continuous integration process for staging and production.</p> <h5>Target Environments</h5> <p>The <strong>TESTING </strong>environment consists of a server that runs IIS 7.5 and a server that runs SQL Server 2008 R2. The developer machine has a network connection to the test servers, and the developer uses one-click publish to deploy to testing environment.</p> <p><strong>STAGING</strong> consists of a web farm (2 servers running IIS 7.5) and a database server that runs SQL Server 2008 R2. The developer machine has network access to a TFS server that acts as a source code repository, and the TFS server has network access to the staging servers. (The developer machine does not have direct access to the staging environment, and the developer does not have administrative rights on the staging servers.) Team Build builds the Visual Studio solution, runs unit tests, and publishes to staging. Each time that Team Build performs build and deployment, it simultaneously creates a deployment package (web deploy .zip file) for use in deploying to production.</p> <p>The <strong>PRODUCTION </strong>environment mirrors staging except that a firewall (or perhaps even different domains) prevents direct access for publishing from the TFS server to production. When a build is approved for production, the IT department uses the package created when TFS publishes to staging to deploy to the production servers.</p> <p>The diagram below illustrates this scenario:</p> <p><a href="http://lh4.ggpht.com/-MTTBsd-5Qd4/Th1PSxwraqI/AAAAAAAABOM/qa1lxe6JEHs/s1600-h/Enterprise_Scenario_Diagram%25255B12%25255D.png"><img style="display: inline" title="Enterprise_Scenario_Diagram" alt="Enterprise_Scenario_Diagram" src="http://lh4.ggpht.com/-ZXbSs7A1lxA/Th1PTuyUHMI/AAAAAAAABOQ/BG9S15YmMgE/Enterprise_Scenario_Diagram_thumb%25255B10%25255D.png?imgmax=800" width="636" height="652" /></a></p> <p>Enterprise scenarios may have a QA environment set up in a manner similar to staging; however, for the purposes of demonstrating how to set up deployment it's not necessary to include that here, because the process would be similar to the process for setting up staging.</p> <h5>Visual Studio Solution</h5> <p>The Visual Studio solution to be deployed consists of multiple web application projects, a class library project, and a unit test project. Deployment must take into account the following considerations:</p> <ul> <li>One of the projects uses ASP.NET membership functionality, and the membership database must be deployed. Account information can be deployed to test but not to staging or production. </li> <li>One of the projects uses a SQL Server database that is accessed using the Entity Framework (Database First, using an .edmx file). On initial deployment to any environment, only the structure (schema) should be deployed. For any database deployment after the initial deployment, data already entered online in that environment must be preserved. </li> <li>The class library project creates an assembly for a custom control that is used in one of the projects. This assembly needs to be installed in the GAC as part of the deployment process. </li> <li>The custom control gets a default value from the registry. The registry value needs to be different in each environment and needs to be updated when the solution is deployed. (This particular use of registry settings is not common, but updating the registry is a common need, and this provides a simple way of integrating a registry update into the scenario.) </li> <li>The Web.config file contains settings that must be different for debug vs. release builds, and settings that must be different for different target environments. </li> <li>One of the web projects includes a folder for log files. The deployment process must not copy files in this folder from source to destination and must not delete files from the folder on the target server. </li> <li>IIS settings for error handling and authentication must be set up on the target server during deployment. For the test environment these can be the same as the settings on the developer machine, but for staging and production the settings are different. </li> </ul> <p>Some additional deployment considerations apply only to the automated deployment from TFS for staging and production:</p> <ul> <li>Deployment should occur only if the unit tests are successful. </li> <li>The web projects need to be precompiled before deployment. </li> <li>The IIS settings for staging and production are taken from IIS on the TFS server. (This is a limitation of the current release of Visual Studio and Web Deploy; when the walkthroughs are updated for the next release of the software, hopefully IIS will not be required on the TFS server (keeping fingers crossed <img style="border-bottom-style: none; border-left-style: none; border-top-style: none; border-right-style: none" class="wlEmoticon wlEmoticon-smile" alt="Smile" src="http://lh3.ggpht.com/-LcsAU8E59RM/Th1PTxVevxI/AAAAAAAABOU/zUoGjKX-9Hs/wlEmoticon-smile%25255B2%25255D.png?imgmax=800" />) </li> <li>App_offline.htm must be set up at the start of deployment and removed at the end. </li> <li>Deployment activities should be logged. When deployment completes or fails, email notifications should be sent to designated recipients. </li> <li>If deployment fails, the previous deployment's package should be redeployed, or the current deployment should be retried. </li> </ul> <h5>Tasks Illustrated</h5> <p>The walkthroughs for this scenario would guide you through the following tasks"</p> <ul> <li>Downloading the Visual Studio solution to be deployed. </li> <li>Setting up the test server. </li> <li>Using one-click publish to deploy to testing servers: <ul> <li>Initial deployment. </li> <li>Redeployment without a database change (for example, an update to code in a web page). </li> <li>Redeployment after making a database schema change. </li> </ul> </li> <li>Setting up staging and production servers. </li> <li>Setting up the build server. </li> <li>Three deployments to staging (initial, web page change, database change). </li> <li>Three deployments to production (initial, web page change, database change). </li> </ul> <p>For the Visual Studio 2010 version of the walkthrough, database updates will involve running custom SQL scripts as part of the deployment. The scripts will be created manually; tools such as TSData and Red Gate can be used to generate such scripts, but those tools will not be covered in these walkthroughs. Eventually we will look at smoothing this flow as well.</p> <h4>Scenario 2: Enterprise Deployment for MVC and Entity Framework Code First</h4> <p>This is a variant of the first scenario that differs from it in the following ways:</p> <ul> <li>The web projects are MVC instead of Web Forms. </li> <li>Entity Framework Code First is used instead of Database First (no .edmx file). </li> <li>TeamCity is used instead of TFS. </li> </ul> <h4>Scenario 3: Enterprise Deployment for Web Site Projects</h4> <p>This is another variant of the first scenario that differs from it in the following ways:</p> <ul> <li>The web projects are web site projects instead of web application projects or MVC. </li> <li>Web Deployment Projects (WDP 2010) are used. </li> <li>One-click publish is not available for web site projects, so a web deployment package is used for deploying to test. </li> </ul> <p>For those of you who work in enterprise environments, do these scenarios adequately represent the kinds of challenges you face in deploying ASP.NET web applications? Are any key pieces missing? We cannot answer every question in these walkthroughs, but if there are other issues commonly faced by your team, we can add solutions for them to the walkthroughs as well.</p> <p>Your thoughts and feedback are welcome.  Also I want to thank Tom Dykstra, Bilal Aslam & Sayed Hashimi on our team who will be helping on putting together a lot of this content for you.</p> <p>FEB 2012 UPDATE:  The work on these scenario documentation has started happening.  The tutorials are still being written but the sample app with an initial draft of the first part of the tutorials is available on MSDN:</p> <p><a href="http://code.msdn.microsoft.com/ASPNET-Enterprise-Web-6b2ad7cf">http://code.msdn.microsoft.com/ASPNET-Enterprise-Web-6b2ad7cf</a></p> <p>(The tutorials are in Word docs in a folder in the sample project.)</p> <p>They’ll be published on the ASP.NET site most likely in the next couple of months.</p> <p>Thanks for reading!!</p> <p>-Vishal</p> Vishal R Joshihttp://www.blogger.com/profile/05217117734084631137noreply@blogger.com22tag:blogger.com,1999:blog-5704450.post-62911540678948405212011-06-15T17:09:00.001-07:002011-06-16T18:30:03.218-07:00Announcing HTML5 & CSS3 support for Visual Studio 2010 SP1<table border="0" cellspacing="0" cellpadding="0"><tbody> <tr> <td valign="top" width="882"> <p><a href="http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; margin-left: 0px; border-left-width: 0px; margin-right: 0px" title="image" border="0" alt="image" align="right" src="http://lh3.ggpht.com/-USMzyH7-uk0/TflJtMKRxyI/AAAAAAAABNk/cGLXoaUuQpc/image%25255B6%25255D.png?imgmax=800" width="200" height="169" /></a> </p> <p>Since the last few months it feels like web standards are moving at pace that we would really like them to move. Every browser is pushing the envelope ahead including our very own IE9. For the first time it feels like web is getting the extra freedom of expression that it deserves and we want to contribute to that.</p> <p>ASP.NET developers have been asking for HTML5 & CSS3 support all the time and today we are super excited to announce the public availability of <b>Visual Studio Web Standards Update</b> which brings a ton of <b>HTML5 & CSS3 support to Visual Studio 2010 SP1</b>. VS Web Standards Update is a free extension available for anyone who is using Visual Studio 2010 SP1 and it provides HTML5 & CSS3 support based on current W3C specifications.</p> <p><a href="http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image001" border="0" alt="clip_image001" src="http://lh5.ggpht.com/-7BGmwZPzfz8/TflJtoRxg9I/AAAAAAAABNg/D7qRqH227cA/clip_image001%25255B7%25255D.png?imgmax=800" width="274" height="62" /></a></p> </td> <td width="288"> <p></p> </td> </tr> <tr> <td valign="top" width="1170"> <p><b>HTML5</b></p> <p><b><a href="http://lh3.ggpht.com/-jLxNGvoJm3w/TflJt5cexjI/AAAAAAAABNQ/d6OSuR-Hznk/s1600-h/clip_image004%25255B4%25255D.png"><img style="display: inline" title="clip_image004" alt="clip_image004" src="http://lh5.ggpht.com/-Sw9fTFAswZA/TflJuPMvUQI/AAAAAAAABNU/DKa4ASQCTrA/clip_image004_thumb%25255B1%25255D.png?imgmax=800" width="324" height="35" /></a></b></p> <p>VS Web Standards Update provides you intellisense and validation for most common HTML 5 features like: <table border="0" cellspacing="0" cellpadding="0"><tbody> <tr> <td valign="top" width="358"> <p>· <a href="http://www.w3.org/TR/html5/video.html#video">Video & related tags</a></p> <p>· <a href="http://www.w3.org/TR/html5/video.html#audio">Audio & related tag</a></p> <p>· <a href="http://www.w3schools.com/html5/tag_input.asp">New input types like email, url, date etc</a></p> </td> <td valign="top" width="402"> <p>· <a href="http://dev.w3.org/html5/spec/dnd.html">Drag & Drop support</a></p> <p>· <a href="http://www.w3.org/WAI/intro/aria">Accessibility standard WAI-ARIA</a></p> </td> <td valign="top" width="378"> <p>· <a href="http://www.w3.org/TR/microdata/">Microdata</a></p> <p>· <a href="http://schema.org/docs/gs.html">Schema.org & more SEO friendly goodness</a></p> <p>·</p> </td> </tr> </tbody></table> </p> <p><b></b></p> <p><b>Browser APIs</b></p> <p>· <u><a href="http://dev.w3.org/geo/api/spec-source.html">Geo-Location</a></u> - Having location aware websites is growing trend and now you will have full intellisense and validation within Visual Studio for creating websites which are location aware. For sample view the source for the <a href="http://ie.microsoft.com/testdrive/HTML5/Geolocation/Default.html">IE9 test drive demo</a>.</p> <p>· <u><a href="http://www.w3.org/TR/webstorage/">Local Storage</a> </u>– IE has been supporting <a href="http://msdn.microsoft.com/en-us/library/cc197062%28VS.85%29.aspx">local storage from IE8 onwards</a>, now Visual Studio will provide you with full fidelity intellisense to create sites which can save state within browser. For sample of try view source on <a href="http://html5demos.com/storage">HTML5 Demo Site</a></p> <p><b></b></p> <p><b>CSS3 </b></p> <p><a href="http://lh5.ggpht.com/-AWW_RjGDR6k/TflJvaGyEmI/AAAAAAAABNY/rCiU99evUzg/s1600-h/clip_image005%25255B4%25255D.png"><img style="display: inline" title="clip_image005" alt="clip_image005" src="http://lh6.ggpht.com/-0-aOcod2-Gs/TflJvqSG6iI/AAAAAAAABNc/An4p8uVphtY/clip_image005_thumb%25255B1%25255D.png?imgmax=800" width="307" height="35" /></a><b></b></p> <p>This update supports intellisense and validation for most of the CSS3 modules including: <table border="0" cellspacing="0" cellpadding="0"><tbody> <tr> <td valign="top" width="358"> <p>· <a href="http://www.w3.org/TR/css3-2d-transforms/">2D Transforms</a></p> <p>· <a href="http://www.w3.org/TR/css3-3d-transforms/">3D Transforms</a></p> <p>· <a href="http://www.w3.org/TR/css3-animations/">Animations</a></p> <p>· <a href="http://www.w3.org/TR/css3-background/">Background & Borders</a></p> <p>· <a href="http://www.w3.org/TR/css3-box/">Basic Box Model</a></p> <p>· <a href="http://www.w3.org/TR/css3-ui/">Basic UI</a></p> <p>· <a href="http://www.w3.org/Talks/2004/0519-CSS-WWW2004/all.htm">Behavior</a></p> <p>· <a href="http://www.w3.org/TR/css3-color/">Color</a></p> <p>· <a href="http://www.w3.org/TR/css3-flexbox/">Flexible Box Layout</a></p> </td> <td valign="top" width="402"> <p>· <a href="http://www.w3.org/TR/css3-fonts/">Fonts</a></p> <p>· <a href="http://www.w3.org/TR/css3-gcpm/">Generated Content for Paged Media</a></p> <p>· <a href="http://www.w3.org/TR/css3-hyperlinks/">Hyperlink Presentation</a></p> <p>· <a href="http://www.w3.org/TR/css3-linebox/">Line</a></p> <p>· <a href="http://www.w3.org/TR/css3-lists/">Lists</a></p> <p>· <a href="http://www.w3.org/TR/css3-marquee/">Marquee</a></p> <p>· <a href="http://www.w3.org/TR/css3-mediaqueries/">Media Queries</a></p> <p>· <a href="http://www.w3.org/TR/css3-multicol/">Multi Column</a></p> <p>· <a href="http://www.w3.org/TR/css3-namespace/">Namespaces</a></p> </td> <td valign="top" width="378"> <p>· <a href="http://www.w3.org/TR/css3-page/">Paged Media</a></p> <p>· <a href="http://www.w3.org/TR/css3-preslev/">Presentations Levels</a></p> <p>· <a href="http://www.w3.org/TR/css3-ruby/">Ruby</a></p> <p>· <a href="http://www.w3.org/TR/css3-selectors/">Selectors</a></p> <p>· <a href="http://www.w3.org/TR/css3-speech/">Speech</a></p> <p>· <a href="http://www.w3.org/TR/css3-syntax/">Syntax</a></p> <p>· <a href="http://www.w3.org/TR/css3-layout/">Template Layout</a></p> <p>· <a href="http://www.w3.org/TR/css3-text/">Text</a></p> <p>· <a href="http://www.w3.org/TR/css3-transitions/">Transitions</a></p> </td> </tr> </tbody></table> </p> <p>Additionally, if you are trying to make websites which work on a variety of platforms and browsers you will love the fact that Web Standards Update not only supports IE specific prefixes like <b>–ms</b>; but also other vendor prefixes like <b>–webkit</b> and <b>–moz.</b></p> <p>With all of the above goodness we hope you all will enjoy this update as much as we did creating it and hope you will share the good news with our larger developer community.</p> <p><b>Sharable Links</b></p> <p>· Download URL - <a href="http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83">http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83</a></p> <p>· VWD Team Announcement post by Mads - <a title="http://blogs.msdn.com/b/webdevtools/archive/2011/06/15/web-standards-update-for-visual-studio-2010-sp1.aspx" href="http://blogs.msdn.com/b/webdevtools/archive/2011/06/15/web-standards-update-for-visual-studio-2010-sp1.aspx">http://blogs.msdn.com/b/webdevtools/archive/2011/06/15/web-standards-update-for-visual-studio-2010-sp1.aspx</a></p> <p>· Walkthrough post by Hanselman - <a title="http://www.hanselman.com/blog/AnnouncingTheWebStandardsUpdateHTML5SupportForTheVisualStudio2010Editor.aspx" href="http://www.hanselman.com/blog/AnnouncingTheWebStandardsUpdateHTML5SupportForTheVisualStudio2010Editor.aspx">http://www.hanselman.com/blog/AnnouncingTheWebStandardsUpdateHTML5SupportForTheVisualStudio2010Editor.aspx</a></p> <p>Finally, I want to call out that this update is made feasible due to heroic efforts by a lot our team members working on their personal spare time, so please give a huge shout out to our team including <b>Mads Kristensen, Peter Spada, Van Kichline, Aliaksei Baturytski, Damian Edwards, Barry Tang, Bala Chirtsabesan, Alex Gavrilov, Xinyang Qiu, Jon Jung, Scott Hanselman, Teri Schroeppel & Yong Lee.</b></p> <p>Thanks again!!</p> <p><a name="_MailAutoSig">Vishal R. Joshi | </a><a href="http://vishalrjoshi.com">http://vishalrjoshi.com</a> | <a href="http://twitter.com/vishalrjoshi">@vishalrjoshi</a></p> <p><b></b></p> <p><b>PS: </b>The Web Standards Update works on both VS 2010 SP1 and VWD Express 2010 SP1. Being a VS Extension, it does not support certain CSS3 selector syntax & Browser API intellisense which would require servicing the shipping bits. </p> </td> </tr> </tbody></table> Vishal R Joshihttp://www.blogger.com/profile/05217117734084631137noreply@blogger.com12tag:blogger.com,1999:blog-5704450.post-36739906305481555532011-03-07T00:38:00.001-08:002011-03-07T00:38:42.956-08:00ASP.NET Team Sessions at TechEd Dubai<p>The TechEd, Middle East web site does not have deep-linking for the sessions so I thought I would quickly blog it out so that it can be shared easily.  Here are the sessions Scott & I are doing at TechEd Dubai (sorted by date & time)if you are around please stop by:</p> <p><strong>-----------------------------------------------------------------------------------------------</strong></p> <p><strong>09 March 2011 10:30 AM - 11:30 AM</strong> </p> <p><strong>Deep Dive into Razor </strong></p> <p>Track: Web Platforms (WEB303) </p> <p>Speakers: Scott Hunter </p> <p>Razor is the new syntax for building web applications in both ASP.NET Web Pages and ASP.NET MVC. It has a very concise syntax that blurs the transition between code and markup. We will start with a deep dive showing how to program the web using Razor which will include building reusable components called helpers that can share both markup and code in a very natural way. Next we will demonstrate how Razor’s extensibility can be used to use it outside of typical web scenario’s by writing some code using the Razor syntax to send rich emails that contain both text, markup and code. You should walk away knowing how to program that web with Razor and how Razor can be used outside the web to increase your productivity as a rich templating engine. </p> <p><strong>-----------------------------------------------------------------------------------------------</strong></p> <p><strong>The New Cool Kid on the Block: ASP.NET MVC 3</strong></p> <p><strong>09 March 2011 11:45 AM - 12:45 PM</strong></p> <p>Track: Web Platforms (WEB304)  </p> <p>Speaker: Vishal Joshi</p> <p>ASP.NET MVC 3 with its friends Razor and NuGet are here to make your web development much easier and jazzier. If you are a web developer intending to build standards based, maintainable and extensible apps in a productive fashion, you are not allowed to leave Tech·Ed without learning about ASP.NET MVC 3. It doesn’t matter even if you haven’t played with ASP.NET MVC before, come join us and we will introduce you to it. If you have been working with ASP.NET MVC already, join us and you can hear about all the new toys you now have.</p> <p><strong>-----------------------------------------------------------------------------------------------</strong></p> <p><strong>10 March 2011 09:00 AM - 10:00 AM</strong> </p> <p><strong>What’s New in ASP.NET & Visual Studio for Web Developers </strong></p> <p>Track: Web Platforms (<a href="">WEB305</a>) </p> <p>Speaker: Scott Hunter </p> <p>ASP.NET 4 gives you more control than ever over markup as well as adding exciting new features making both client and server side data based applications easier and faster to develop than ever before. With Visual Studio 2010 adding improved support for JavaScript, HTML markup and CSS editing and powerful new web application deployment technology, together, ASP.NET 4 and Visual Studio 2010 make it easier and quicker than ever to develop standards based, CSS styled web applications. We will also cover some of the latest improvements in Visual Studio such as support for Razor Syntax, NuGet and IIS Express.</p> <p><strong>-----------------------------------------------------------------------------------------------</strong></p> <p><strong>10 March 2011 10:30 AM - 11:30 AM</strong></p> <p><strong>Introduction to Microsoft ASP.NET MVC</strong></p> <p>Track: Web Platforms (WEB05L)  </p> <p>Speakers: Scott Hunter, Vishal Joshi</p> <p>This lab introduces you to developing Web applications with ASP.NET MVC, and teaches you the basic conventions and features contained within it. It also shows you how to unit test your custom controllers and your application's route definitions.</p> <p><strong>-----------------------------------------------------------------------------------------------</strong></p> <p><strong>10 March 2011 01:45 PM - 02:45 PM</strong> </p> <p><strong>Meet the Visual Studio Team</strong> </p> <p>Track: Developer Tools, Languages, and Frameworks (IAT209) </p> <p>Speakers: Lisa Feigenbaum, Shy Cohen, Brian Keller, Vishal Joshi, Scott Hunter </p> <p>Session Type: Interactive Discussion </p> <p>Audience: Developer </p> <p>This is an opportunity to interact with key members of the Visual Studio team. They discuss their areas of expertise and answer any questions you might have.</p> <p><strong>-----------------------------------------------------------------------------------------------</strong></p> <p><strong>10 March 2011 03:00 PM - 04:00 PM</strong> </p> <p><strong>Web Deployment That Can Impress your Boss</strong> </p> <p>Track: Web Platforms (WEB306) </p> <p>Speaker: Vishal Joshi </p> <p>If you typically deploy your web applications using Windows Explorer or have a deployment document longer than your resume, please stop. Come see a practical session on how the new deployment goodness in Visual Studio 2010 can help. We dig into Web Deploy (a.k.a. MSDeploy) and deployment from within Visual Studio 2010. Learn how to package up web apps in .zip files, deploy them using UI, or command file, move their settings and databases easily and much more. We start with the basics and ramp it up quickly, exploring team build deployment and advanced techniques. </p> <p>-Vishal</p> Vishal R Joshihttp://www.blogger.com/profile/05217117734084631137noreply@blogger.com2tag:blogger.com,1999:blog-5704450.post-43158670687503332602011-01-16T15:30:00.001-08:002011-01-19T14:46:00.446-08:00Web Developers can feel like Kids in a Candy Store<p>On Jan 13<sup>th</sup> 2011, our team released a bunch of goodness for web developers. So much so that I as a web developer feel like a kid in Web Development Candy Store. As a web developer using Microsoft web stack, you might be wondering what technologies are applicable to you and when. This post is intended to give you a view of the Web Development Candy Store in a Q&A format, so let’s begin.</p> <p><b>Q1. I just heard that there were tons of new goodies released, what is all the noise about?</b></p> <p>A. Microsoft’s web team released a bunch of related technologies for web developers as a new year present. The key releases included ASP.NET MVC 3, IIS Express 7.5, SQL Compact 4, Web Deploy v2, Web Farm Framework, Orchard, Web PI 3 and WebMatrix. Depending on what your focus is many or all of these might be applicable to you.</p> <p><b>Q2. I use ASP.NET Web Forms what is in for me?</b></p> <p>A. We love WebForms and there are many things which are directly applicable to you. As an ASP.NET Web Forms developers <b>IIS Express 7.5</b>, SQL Compact 4, Web Deploy v2, Web PI 3 as well as Web Farm Framework might be very relevant.</p> <p><b>Q3. What is IIS Express 7.5?</b></p> <p>A. IIS Express 7.5 is a lightweight standalone web server built from the same code base of full IIS 7.5 (ships in Windows Server 2008 R2) but specifically tailored for local development purposes.</p> <p><b>Q4. Did we not have Visual Studio Development Server (aka “Cassini”)? Yes. Then, why IIS Express 7.5?</b></p> <p>A. We always use to get feature requests to support things like SSL, URL Rewrite, new mime types, IIS server configuration and other IIS 7 modules. Cassini’s code base is completely different and it cannot realistically mimic web server IIS. Web developers needed something which is more similar to real IIS during local web development within VS. Lot of the differences between development and production web server causes grief during actual deployments, hence IIS Express 7.5.</p> <p><b>Q5. But wait, why could web devs not simply use full IIS instead of asking all these features for Cassini?</b></p> <p>A. On flip side, we use to get request to have full IIS Web Sites run without admin privileges, people having different versions of IIS due to their local dev operating systems being different than web server operating system etc. IIS on web server needs to run as Admin, any IT guy will ascertain that and other hand some firms are against allowing full IIS on developer machines (which I hope changes over a period of time as the security issues which led people to take these steps in pre IIS 6 time frame are long gone). Anyways, IIS Express helps solves all these things plus works on all OS starting Windows XP and above. It is free and will have full integration with Visual Studio 2010 SP1. I anticipate it becoming best practice way of doing local web development pretty soon.</p> <p><b>Q6. OK cool, is IIS Express 7.5 just for Web Forms?</b></p> <p>A. No, we always try to invest in things which help Web Forms as well as MVC. This is one such investment which will help all Web projects within Visual Studio 2010 SP1 and above.</p> <p><b>Q7. Why do you need Visual Studio 2010 “SP1” to support IIS Express 7.5?</b></p> <p>A. Although IIS Express 7.5 is a standalone download, there was a lot of code written to integrate it within Visual Studio 2010 so that you can use it as seamlessly as you use “Cassini” today. As this work was done after Visual Studio 2010 was already released we had to put it as part of “Visual Studio 2010 SP1”.</p> <p><b>Q8. I am using VS 2010 today; tell me how do I get IIS Express 7.5 working on my box.</b></p> <p>A. Visual Studio 2010 SP1 is available as BETA release on <a href="http://www.microsoft.com/downloads/en/details.aspx?FamilyID=11ea69cb-cf12-4842-a3d7-b32a1e5642e2&displaylang=en">MS Download Center</a>. It is a relatively long install (will take around 30-40 mins) but once you have it IIS Express 7.5 integration bits will be installed with it. After you have VS 2010 SP1 then you can download standalone IIS Express 7.5 available in <a href="http://www.microsoft.com/web/downloads/platform.aspx">Web PI 3</a> (Web PI now supports a Search box so just search for IIS 7.5 Express) and you should be all set.</p> <p><b>Q9. IIS Express 7.5 indeed sounds interesting, where do I learn more about it?</b></p> <p>A. There is overwhelming amount of content on IIS Express 7.5 on web already but I can certainly simplify your search.</p> <p>· <a href="http://weblogs.asp.net/scottgu/archive/2011/01/03/vs-2010-sp1-beta-and-iis-developer-express.aspx">IIS Express Article by ScottGu</a></p> <p>· <a href="http://blogs.msdn.com/b/webdevtools/archive/2010/12/11/visual-studio-2010-sp1-beta-iis-express-integration.aspx">IIS Express Article by Sayed</a></p> <p>· <a href="http://learn.iis.net/page.aspx/901/iis-express-faq/">IIS Express FAQ</a></p> <p><b>Q10. Is there a good comparison between full IIS and IIS Express?</b></p> <p>A. Sure, you can find it on <a href="http://learn.iis.net/page.aspx/901/iis-express-faq/">IIS.NET site</a>.</p> <p><b>Q11. What if I want the direct IIS Express MSI/EXE to auto install on all of web developer’s boxes across the organization?</b></p> <p>A. Ideally you should use <b>Web PI 3</b> pointing to the local feed but if you are automating the process then here is the link directly to <a href="http://www.microsoft.com/downloads/en/details.aspx?FamilyID=abc59783-89de-4adc-b770-0a720bb21deb">MS Download Center</a>.</p> <p><b>Q12. I do not know much about Web PI 3 that you are referring to, what is it?</b></p> <p>A. Web Platform Installer (Web PI) is a simple unified way to install everything you need related to Microsoft’s Web Platform. As a web developer this is a simple 2-3MB small tool which looks like below:</p> <p><a href="http://lh5.ggpht.com/_E8t3edIzcC8/TTN_izym-0I/AAAAAAAABKk/INu0N2X4YjM/s1600-h/clip_image001%5B3%5D.png"><img style="margin: 0px; display: inline" title="clip_image001" alt="clip_image001" src="http://lh3.ggpht.com/_E8t3edIzcC8/TTN_jQiOXtI/AAAAAAAABKo/MwrJ2CnFZHE/clip_image001_thumb.png?imgmax=800" width="780" height="540" /></a></p> <p>This can help you install framework, tools, servers, DBs, web applications etc etc without running around everywhere searching for links to download stuff. Trust me it is goodness.</p> <p><b>Q13. Won’t it be a good idea to just have Web PI available within VS so that I don’t need to hunt around for it!</b></p> <p>A. We thought so too, with VS 2010 SP1 you will have Web PI toolbar within VS. It is enabled when you are within any Web project or you can enable it by going to Views à Toolbars à Web Platfomr Installer. When enabled it looks like <a href="http://lh4.ggpht.com/_E8t3edIzcC8/TTN_jqwGB7I/AAAAAAAABKs/fzvY403DXBs/s1600-h/clip_image002%5B3%5D.png"><img style="margin: 0px; display: inline" title="clip_image002" alt="clip_image002" src="http://lh4.ggpht.com/_E8t3edIzcC8/TTN_j8CpF2I/AAAAAAAABKw/8_K-bWRB1N8/clip_image002_thumb.png?imgmax=800" width="229" height="31" /></a>. You can use Web PI toolbar to get other goodness that just released, like <b>SQL Compact 4</b>, Web Deploy v2, Orchard, MVC 3 etc.</p> <p><b>Q14. Tell me more about SQL Compact 4?</b></p> <p>A. SQL Compact or SQL CE is a embedded, free and light weight DB from Microsoft. It always use to ship but was never designed to work with Web. SQL Compact 4 is the first release where this DB was engineered to work with Web as well (along with other embedded scenarios).</p> <p><b>Q15. What does it mean it was engineered to work with Web, what’s so different about Web?</b></p> <p>A. Well, as you know in case of Web multiple requests can hit the server, there are multi-threaded environments and many shared web servers run in partial trust on hosted environments etc. This is quite different from early SQL Compact scenarios which had much more contrainst environment.</p> <p><b>Q16. Did we not have SQL Express, why do I need SQL Compact?</b></p> <p>A. If you are using SQL Express perhaps you do not need SQL Compact. For that matter if you are using SQL Server Developer edition or any other full edition you may not need SQL Compact 4 either. Both of SQL Express as well as SQL Server Developer edition and above have *almost* superset functionality of SQL Compact. SQL Compact is more meant for light weight usage, even lighter than SQL Express.</p> <p><b>Q17. Can you elaborate what light weight scenarios SQL Compact 4 helps me with?</b></p> <p>A. SQL Compact 4 requires no database installation, literally you do not need to install SQL Compact on your web servers, in case of SQL Express or full SQL Server you do. SQL Compact’s entire <b>DB engine</b> can simply go inside your web site’s <b>“/bin”</b> folder and the <b>Database</b> itself is a .SDF file which can go inside your <b>“App_Data”</b> folder. At runtime the SQL Compact will run in memory with your ASP.NET Application instead of a separate service which SQL Express & full SQL Server do. This means that you do not need to even purchase a database plan on your web hosting provider if you do not want to J</p> <p><b>Q18. You said, I can deploy both SQL Compact 4 DB engine & DB with my web site. How exactly do I do this?</b></p> <p>A. Deploying DB with your site is easy. Your App_Data folder can contain the .SDF file. Your web.config file contains the connectionString to that SDF file and when you copy your web site to the server your SDF file simply goes with it. The interesting part is the SQL Compact 4 DB Engine which has to go to your Bin Folder. VS 2010 <b>SP1</b> has a feature which makes deploying DB engine with your site only a click away. Simply right click on your project and click “Add Deployable Dependencies”. This will bring up the below dialog:</p> <p><a href="http://lh5.ggpht.com/_E8t3edIzcC8/TTN_kFQ5aXI/AAAAAAAABK0/SozxDD5RRCA/s1600-h/clip_image003%5B3%5D.png"><img style="margin: 0px; display: inline" title="clip_image003" alt="clip_image003" src="http://lh6.ggpht.com/_E8t3edIzcC8/TTN_kWU1urI/AAAAAAAABK4/lX80dVxOAt8/clip_image003_thumb.png?imgmax=800" width="571" height="278" /></a></p> <p>Click “OK” and the right binaries, managed as well as native (x86 & x64) will go in your /bin folder. If you know whether your web server is going to be x86 or x64 then you can delete the redundant folder from your /bin saving you probably 1-2MB J</p> <p><b>Q19. Do I need to learn new APIs to talk to SQL Compact 4?</b></p> <p>A. No. SQL Compact 4 is “SQL Server” afterall, it uses the same ADO.Net and you can also use same ORMs like Entity Framework, EF Code First, NHiberate etc with SQL Compact 4. Just the connectionString in your web.config file changes and you are all set to use SQL Compact 4.</p> <p><b>Q20. Free DB on client as well as server, easy to deploy, super light weight, same APIs as full SQL Server etc etc is all too good to be true, what is the catch with SQL Compact 4?</b></p> <p>A. There are no catches as such, or maybe I want to rather call it as “a ceiling” up to which SQL Compact can stretch. For most small sites all of the advantages are good enough so they can use SQL Compact easily. Infact for few of my projects I have already started using SQL Compact 4 but I do not use SQL Compact for sites which actively cause DB size to increase. SQL Compact 4 does not support Stored procedures and the file limit for SQL Compact is 4GB. I personally use ORMs so the stored procedures don’t bother me much but the size limit to 4GB is what I use to choose between full SQL Server vs SQL Compact.</p> <p><b>Q21. Once I deploy my DB on the server as SDF file, then ofcourse my app will modify it then how do I update it for my app’s V2?</b></p> <p>A. Currently you have to update the Database manually, i.e. download it from the server and then edit it using Visual Studio 2010 Database tools or SQL Server Management Studio then re-deploy it to the server. This will mean that you will need to have some downtime on the server when you are making this update. Unfortunately, I do not have a better answer for you now L<b></b></p> <p><b>Q22. Do all of the Visual Studio Database tools work with SQL Compact 4?</b></p> <p>A. In Visual Studio 2010 SP1 we did all the work to enable Visual Studio tools like creating new SQL Compact SDF files, editing DBs, creating tables, editing table data, keys/index management, Entity Framework designer, Server/Database Explorer etc for all of Web Projects and Visual Studio SKUs (i.e. <a href="http://asp.net/vwd">VWD Express</a> also contains support for SQL Compact 4). This means you will need Visual Studio 2010 SP1 to take advantage of this all.</p> <p><b>Q23. How do I get SQL Compact 4 working on my machine if I have VS 2010?</b></p> <p>A. First get VS 2010 SP1 BETA from <a href="http://www.microsoft.com/downloads/en/details.aspx?FamilyID=11ea69cb-cf12-4842-a3d7-b32a1e5642e2&displaylang=en">MS Download Center</a>. As I mentioned earlier, it is a long install (will take around 30-40 mins) but once you have it SQL Compact integration bits with Web Projects be installed with it. After you have VS 2010 SP1 then you can download Microsoft Visual Studio Tools for SQL Server Compact 4 from <a href="http://www.microsoft.com/web/downloads/platform.aspx">Web PI 3</a> (click on Databases on the left).</p> <p><a href="http://lh4.ggpht.com/_E8t3edIzcC8/TTdpoKksFDI/AAAAAAAABLc/i2fTvs_fC1E/s1600-h/image%5B8%5D.png"><img style="border-bottom: ; border-left: ; display: inline; border-top: ; border-right: " title="image" alt="image" src="http://lh5.ggpht.com/_E8t3edIzcC8/TTdponHvKHI/AAAAAAAABLg/OSGOWLLB88c/image_thumb%5B4%5D.png?imgmax=800" width="788" height="547" /></a> </p> <p><b>Q24. Is it possible for me to start with SQL Compact and then decide to go to full SQL Server if I hit the ceiling?</b></p> <p>A. Yes very much so. As the programming model is the same you can use SQL Compact 4 to begin with, and when your site grows in traffic/DB Size then you can move to full SQL Server. In fact that is the very feature which Visual Studio 2010 SP1 and <b>Web Deploy v2</b> have. They help you to migrate from SQL Compact to SQL Express/full SQL Server.</p> <p><b>Q25. Where do I learn more about SQL Compact 4?</b></p> <p>A. There are several places to learn about SQL Compact 4. Start with: </p> <p>· <a href="http://blogs.msdn.com/b/sqlservercompact/archive/2010/07/07/introducing-sql-server-compact-4-0-the-next-gen-embedded-database-from-microsoft.aspx">SQL Compact Team Blog</a></p> <p>· <a href="http://robtiffany.com/sql-server-compact/here-comes-sql-server-compact-4-0">Rob Tiffany’s post on SQL Compact 4</a></p> <p>· <a href="http://weblogs.asp.net/scottgu/archive/2011/01/11/vs-2010-sp1-and-sql-ce.aspx">ScottGu’s walkthrough on how to use SQL Compact 4 with ASP.NET Web Forms & MVC</a></p> <p><b>Q26. What is Web Deploy? </b></p> <p>A. Web Deploy is Microsoft’s web deployment backbone. If you are looking for Web Deployment solutions for your ASP.NET Webs and not thinking about Web Deploy then you are missing out the action. You can learn a lot more about Web Deployment with Web deploy at:</p> <p>· <a href="http://vishaljoshi.blogspot.com/2009/09/overview-post-for-web-deployment-in-vs.html">Overview Post of Web Deployment</a></p> <p>· <a href="http://www.iis.net/download/WebDeploy">IIS.NET</a></p> <p>· <a href="http://blogs.msdn.com/b/webdevtools/archive/tags/web+deployment/">Visual Studio Web Team blog</a></p> <p><b>Q27. What’s new in Web Deploy v2 as opposed to v1? </b></p> <p>A. From a existing VS user standpoint the big things that v2 of Web Deploy contains is:</p> <p>· The ability to move SQL Compact 4 databases to full SQL Server. </p> <p>· Tons of bug fixes around reliability and stability.</p> <p>· Integration with IIS Express making it possible to deploy (package, publish etc) IIS Express based web sites seamlessly.</p> <p>· Side by Side setup with Web Deploy v1.</p> <p>· Backward compatibility of Web Deploy v2 to deploy to web servers which still are running on Web Deploy v1.</p> <p>· Updated gacAssemly provider which allows deploying an assembly to GAC even if it is not in GAC on the source</p> <p>Apart from this, there are bunch of enhancements which makes seamless deployments with hosting partners even easier. It also contains capabilities to deploy a SQL Lite Database. v2 also contains new features which will allow you to not only publish sites to remote locations but also bring them back to local box from hosting environments. In the process of bringing back the site from remote hosting location Web Deploy has to make sure that connectionStrings are modified, physical paths are modified and then when you publish again then they all that is restored on the server. We refer to this as Continuous Publishing and first visible use of the new APIs is in WebMatrix. Web Deploy v2 has bunch of other <b>WebMatrix</b> related integration work too. Bilal, PM for Web Deploy on our team is working on putting up formal documentation around all of the above plus more over next week or so.</p> <p><b>Q28. You mentioned WebMatrix, what is it? Do I need it?</b></p> <p>A. WebMatrix is a free web development tool which is elegantly designed and very inspiring to create website rapidly. It enables you to start with existing popular web sites like <a href="http://www.iis.net/download/WebFarmFramework">DotNetNuke</a>, <a href="http://gallery.menalto.com/">Gallery</a>, <a href="http://umbraco.org/">Umbraco</a>, <b><a href="http://www.orchardproject.net/">Orchard</a></b> in addition to PHP based sites like <a href="http://wordpress.org/">Wordpress</a>, <a href="http://drupal.org/">Drupal</a>, <a href="http://www.joomla.org/">Joomla</a> and others. It is based on website development workflow of acquiring ready made apps (as mentioned above) to tweaking them, modifying their databases, search engine optimizing them and then seamlessly deploying them to a <b>hosting provider</b>.</p> <p>If you are already a Visual Studio user then you perhaps don’t need WebMatrix. If you have not tried Web Development before then WebMatrix is really a great way to start web development. You can try out WebMatrix and learn a tons about it at <a href="http://microsoft.com/web">http://microsoft.com/web</a></p> <p><b>Q29. How do I find great web hosting providers?</b></p> <p>A. I worked on a web site over past few months which recently released for this very purpose, it is called Web Hosting Gallery. On this site we display all of our hosting partners and the best hosting offers available on Microsoft Web platform. If you are looking for shared, virual or dedicated hosting offers then for sure check out <a href="http://microsoft.com/web/hosting">Microsoft Web Hosting Gallery</a>.</p> <p><b>Q30. I deploy my Web Applications to my local web servers and have web farms of servers. Is there anything for me?</b></p> <p>A. Yes, with this release we also released Web Farm Framework. Web Farm Framework also uses Web Deploy behind the scenes. Learn more about it at:</p> <p>· <a href="http://weblogs.asp.net/scottgu/archive/2010/09/08/introducing-the-microsoft-web-farm-framework.aspx">Web Farm Framework post by ScottGu</a></p> <p>· <a href="http://www.iis.net/download/WebFarmFramework">IIS.NET site</a></p> <p><b>Q31. You also mentioned Orchard earlier. What is Orchard?</b></p> <p>A. Orchard is a free open source CMS web site which also released as v1 on Jan 13<sup>th</sup> 2011. You can use it as a starting point to create your web site. It essentially has a ton of prewritten code for many standard things that you might want on your web site. You can learn more about Orchard at the <a href="http://www.orchardproject.net/">Orchard Project website</a>. There are great walkthroughs on using it in the <a href="http://orchardproject.net/docs">documentation section</a> too. </p> <p>What is cool about Orchard is that it’s development happens completely in open on codeplex and you easily influence where you want it to go. You can start using Orchard or even contributing to it at <a href="http://orchard.codeplex.com/">http://orchard.codeplex.com/</a>. Orchard has a gallery of community contributed extensions that you can add to your Orchard site to further enhance it for your personal needs. Check out the <a href="http://orchardproject.net/gallery/Packages/Modules">Orchard Gallery</a>.</p> <p>Finally Orchard is also written using <b>ASP.NET MVC 3</b> which was also released along with all of the above we talked about.</p> <p><b>Q32. What is new about ASP.NET MVC 3?</b></p> <p>A. As you might be aware ASP.NET MVC is a programming model which focuses on clear seperation of concerns, helping you write web sites with full control over your HTML markup and using industry leading pattern of Model View Controller. You can learn about ASP.NET MVC at <a href="http://asp.net/mvc">http://asp.net/mvc</a>.</p> <p>ASP.NET MVC 3 builds on top of the earlier two releases and is purely additive, which means that everything that you might have learnt about previous releases of ASP.NET MVC still applies and you can now take advantages of several new features of MVC 3. The top features of ASP.NET MVC 3 are:</p> <ul> <li><b><a href="http://www.asp.net/mvc/mvc3#BM_TheRazorViewEngine">The Razor View Engine</a> </b></li> <li><a href="http://www.asp.net/mvc/mvc3#BM_Support_for_Multiple_View_Engines">Support for Multiple View Engines</a> </li> <li><a href="http://www.asp.net/mvc/mvc3#BM_Controller_Improvements">Controller Improvements</a> </li> <li><a href="http://www.asp.net/mvc/mvc3#BM_JavaScript_and_Ajax_Improvements">JavaScript and Ajax</a> </li> <li><a href="http://www.asp.net/mvc/mvc3#BM_Model_Validation_Improvements">Model Validation Improvements</a> </li> <li><a href="http://www.asp.net/mvc/mvc3#BM_Dependency_Injection_Improvements">Dependency Injection Improvements</a> </li> <li><a href="http://www.asp.net/mvc/mvc3#BM_Other_New_Features">Other New Features</a> </li> </ul> <p>The complete MSDN content map for ASP.NET MVC 3 is available at <a href="http://msdn.microsoft.com/en-us/library/gg416514(VS.98).aspx">MVC Content map</a>.</p> <p><b>Q33. What is the best way to get started with ASP.NET MVC 3?</b></p> <p>A. I would say the best place would be:</p> <p>· <a href="http://www.asp.net/mvc/tutorials/getting-started-with-mvc3-part1-cs">Getting Started with ASP.NET MVC3 section on ASP.NET site</a></p> <p>· <a href="http://www.asp.net/mvc/tutorials/mvc-music-store-part-1">ASP.NET Music Store Site Tutorial by Jon Galloway</a></p> <p><b>Q34. What is important to know about Razor View Engine?</b></p> <p>A. Razor View Engine is focused around the new Razor syntax whose goal is to make it very natural for programmers to write server side code within HTML markup. Razor pages come with extension .CSHTML (C#) or .VBHTML (VB). The design aspiration for Razor syntax was to minimize the number of keystrokes required to express yourself and I feel it stands very true to that aspiration. It is difficult to explain this in a small Q&A format but here is a sample with traditional ASP.NET nuggets:</p> <p><a href="http://lh4.ggpht.com/_E8t3edIzcC8/TTN_lckLAVI/AAAAAAAABLE/gqdTIYVVeao/s1600-h/clip_image005%5B3%5D.png"><img style="margin: 0px; display: inline" title="clip_image005" alt="clip_image005" src="http://lh5.ggpht.com/_E8t3edIzcC8/TTN_l6sa2BI/AAAAAAAABLI/BR_saCTPqTM/clip_image005_thumb.png?imgmax=800" width="438" height="118" /></a></p> <p>When you write the same in razor it becomes:</p> <p><a href="http://lh6.ggpht.com/_E8t3edIzcC8/TTdppnSw3tI/AAAAAAAABLo/pOXwb4d2suw/s1600-h/image%5B3%5D.png"><img style="border-bottom: ; border-left: ; display: inline; border-top: ; border-right: " title="image" alt="image" src="http://lh3.ggpht.com/_E8t3edIzcC8/TTdpp6AoAGI/AAAAAAAABLs/_UbqpfuBIk4/image_thumb%5B1%5D.png?imgmax=800" width="438" height="135" /></a> </p> <p>For lot of cases Razor syntax accomplishes this by automatically detecting the transition between markup and code for most part and for explicit transitioning all you have to do is simply start your C#/VB code with “@” character.</p> <p>You should most certainly try to learn about Razor syntax at:</p> <ul> <li><a href="http://download.microsoft.com/download/C/E/A/CEA20EA5-5AEA-494D-B9D1-B082366FCA38/ASPNETWebPagesWithRazorSyntax-Book.pdf">Book of Razor</a> </li> </ul> <p>OR read ScottGu’s blog series at:</p> <ul> <li><a href="http://weblogs.asp.net/scottgu/archive/2010/07/02/introducing-razor.aspx">Introducing Razor</a> </li> <li><a href="http://weblogs.asp.net/scottgu/archive/2010/10/19/asp-net-mvc-3-new-model-directive-support-in-razor.aspx">New @model keyword in Razor</a> </li> <li><a href="http://weblogs.asp.net/scottgu/archive/2010/10/22/asp-net-mvc-3-layouts.aspx">Layouts with Razor</a> </li> <li><a href="http://weblogs.asp.net/scottgu/archive/2010/11/12/asp-net-mvc-3-server-side-comments-with-razor.aspx">Server-Side Comments with Razor</a> </li> <li><a href="http://weblogs.asp.net/scottgu/archive/2010/12/15/asp-net-mvc-3-razor-s-and-lt-text-gt-syntax.aspx">Razor’s @: and <text> syntax</a> </li> <li><a href="http://weblogs.asp.net/scottgu/archive/2010/12/16/asp-net-mvc-3-implicit-and-explicit-code-nuggets-with-razor.aspx">Implicit and Explicit code nuggets with Razor</a> </li> <li><a href="http://weblogs.asp.net/scottgu/archive/2010/12/30/asp-net-mvc-3-layouts-and-sections-with-razor.aspx">Layouts and Sections with Razor</a> </li> </ul> <p>Finally, Razor comes with a reasonable number of helpers to automate common web tasks like image manipulation, videos, email etc etc. Community is creating a bunch of helpers to. Checkout some of the out of the box <a href="http://msdn.microsoft.com/en-us/library/system.web.helpers(v=VS.99).aspx">Web Helpers here</a>.</p> <p><b>Q34. Is Razor syntax supported in Visual Studio 2010?</b></p> <p>A. Yes you should get full colorization, formatting and intellisense on Razor syntax on Visual Studio 2010. All the required bits to make this happen are included as part of ASP.NET MVC 3 installer.</p> <p><b>Q35. Can I use Resharper with Razor syntax?</b></p> <p>A. Yes you can. Many thanks to Resharper team for releasing Resharper 5.1.2 to make sure that you can continue to use Resharper goodness without letting go of colorization, formatting and intellisense within Razor pages.</p> <p>If you have Resharper versions prior to 5.1.2 then you might have to choose between inbuilt Razor editor features or Resharper which obviously is not ideal, so please upgrade to Resharper 5.1.2 at <a href="http://www.jetbrains.com/resharper/download/">JetBrians Download Center</a>.</p> <p>Resharper team is currently working on version 6 which will provide enhanced Resharper intellisense features for Razor syntax as well. If you want to try out early builds of Resharper v6 then check out JetBrian’s <a href="http://confluence.jetbrains.net/display/ReSharper/ReSharper+6.0+Nightly+Builds">Early Access Program</a>.</p> <p><b>Q35. Can I use Razor syntax outside of ASP.NET MVC 3?</b></p> <p>A. Yes, you can directly create ASP.NET Web Pages with Razor syntax without having to using the MVC 3. Simply create a Web Site and Add CSHTML or VBHTML files to it and it should work. There should also be able to create a new Web Site which is based on Razor syntax as shown below:</p> <p><a href="http://lh3.ggpht.com/_E8t3edIzcC8/TTN_mvddCHI/AAAAAAAABLU/aM3exEupDzM/s1600-h/clip_image008%5B3%5D.jpg"><img style="display: inline" title="clip_image008" alt="clip_image008" src="http://lh4.ggpht.com/_E8t3edIzcC8/TTN_m-TBNqI/AAAAAAAABLY/Czv1xF3-IZk/clip_image008_thumb.jpg?imgmax=800" width="780" height="439" /></a></p> <p><b>Q36. Tell me how to get ASP.NET MVC 3 with Razor Syntax?</b></p> <p>A. As anthing else mentioned above Web PI 3 is an easy way to do so. But alternatively you can get ASP.NET MVC 3 from <a href="http://www.microsoft.com/downloads/en/details.aspx?FamilyID=d2928bc1-f48c-4e95-a064-2a455a22c8f6&displaylang=en">here</a>. If you would like to get ASP.NET Web Pages with Razor Sytax they can be downloaded from <a href="http://www.microsoft.com/downloads/en/details.aspx?FamilyID=300314da-dedd-4540-a236-a0de0a5a534d">here</a>. Btw the second link also contains a book of Razor sytax which I highly recommend.</p> <p><b>Q37. Where can I continue learning about ASP.NET MVC?</b></p> <p>A. Good places to keep checking out in the future are:</p> <p>· <a href="http://asp.net/mvc">ASP.NET MVC Site</a></p> <p>· <a href="http://weblogs.asp.net/scottgu/archive/2011/01/13/announcing-release-of-asp-net-mvc-3-iis-express-sql-ce-4-web-farm-framework-orchard-webmatrix.aspx">ScottGu’s Blog</a></p> <p>· <a href="http://hanselman.com">Scott Hanselman’s Blog</a></p> <p>· <a href="http://haacked.com">Phil Haack’s Blog</a></p> <p><b>Q38. I also heard about NuGet, what is it?</b></p> <p>A. NuGet, awared as #5 OSS project of 2010 by Black Duck Software, is a Visual Studio Package Manager solution to easily get free open source extensions for your projects. It not only works in VS Web projects but actually work in most of the projects within VS. The idea is that if you are creating something which is reusable then why not share it with the broader community. There are many open source libraries which have created NuGet packages which can be installed and used in your projects today. These NuGet packages do a bunch of things for you e.g. add files to your /bin folder, add project references, add web pages to your project, add to your web.config, etc; in-nutshell they make a new feature e.g. error logging with Elmah completely set up within your project by running a single command.</p> <p>NuGet v1 also released with the rest of the things mentioned here and already has several hundreds of reusable packages in its gallery. Check out NuGet at <a href="http://nuget.org/">http://nuget.org/</a>, which NuGet install links as well as the package gallery. If you want to contribute to NugGet then check out Phil’s post on <a href="http://haacked.com/archive/2011/01/12/uploading-packages-to-the-nuget-gallery.aspx">how to Upload to the NuGet gallery</a>. If you want to check out NuGet source then go to it’s <a href="http://nuget.codeplex.com/">Codeplex page</a>.</p> <p><b>Q39. Is there anything for JavaScript developers?</b></p> <p>A. Yes. We recently released JavaScript Editor extensions for VS 2010.  These are few highly demanded features by developers and we couldn’t wait for long to have them out there.  The Key features that these extensions contain are:</p> <ul> <li><strong>Brace Matching – </strong>Matches {}, (), [] in your code to easily navigate through files</li> <li><strong>Outlining/Code-Folding </strong>- Adds support for automatically creating outlining regions for JavaScript blocks.</li> <li><strong>Current Word Highlighting</strong> – Like C#/VB editors now JavaScript Editor now will also highlights usage of the current word (based on cursor position) throughout the document for improved readability</li> <li><strong>IntelliSense Doc-Comment <para> support </strong>– In earlier versions you might have seen  tremendously long never breaking lines of comments pop up as tool tips when you typed.  This was because we did not have any way to determine line breaks for xml comments.  With support of <para> elements in XML doc comments this becomes immensely more usable. </li> </ul> <p>You can get all these extensions <a href="http://visualstudiogallery.msdn.microsoft.com/en-us/872d27ee-38c7-4a97-98dc-0d8a431cc2ed" target="_blank">from VS Extensions Gallery</a></p> <p>After you have installed the extensions you can also get the updated vsdoc files for jQuery with <para> tags which are available at jQuery <a href="http://files.damianedwards.com/jquery/jquery-1.4.3-vsdoc.js">1.4.3</a> and <a href="http://files.damianedwards.com/jquery/jquery-1.4.4-vsdoc.js">1.4.4</a></p> <p><b>Q40. Is there a place where I can just go to learn about everything here at greater depth?</b></p> <p>A. Yes. Our man Scott Hanselman has put together the best collection of all the official documentation for all of Microsoft Web Platform & Tools releases. Check out his <a href="http://www.hanselman.com/blog/LinkRollupNewDocumentationAndTutorialsFromWebPlatformAndTools.aspx">Rollup Documentation</a>.</p> <p><b>Q401 I still have more questions about this release, where do I ask?</b></p> <p>A. You can leave comments here, send me an email at <a href="mailto:Vishal.Joshi@Microsoft.com">Vishal.Joshi@Microsoft.com</a> but if you would like to have tons of people look and chime in on your questions then <a href="http://forums.asp.net/">ASP.NET Forums</a> is a great place, so is <a href="http://stackoverflow.com/questions/tagged/asp.net">Stackoverflow</a>.</p> <p>-Vishal</p> Vishal R Joshihttp://www.blogger.com/profile/05217117734084631137noreply@blogger.com26tag:blogger.com,1999:blog-5704450.post-65654445354129085762010-12-02T00:21:00.001-08:002010-12-02T00:22:05.919-08:00Web Server Startup Vs. Starting a project for debugging<p>We recently had an interesting thread within our Web Platform & Tools team on a blog comment which I thought I would share verbatim so that it would resolve similar confusion that might exist in the community… :</p> <p>To gain more context please read the following tiny blog post otherwise it is quite likely that you will not follow anything discussed on the email thread here J</p> <p><a href="http://vishaljoshi.blogspot.com/2007/12/tips-tricks-start-up-options-and.html">Tips & Tricks: Startup Options & Instances of ASP.NET Development Server  in a Multi-project solution.</a></p> <p>The below email thread is to shed light on behind the scene activities that happen within MSFT on many comments that are posted on many blogs. It is demonstrate that many of the responses on my blog are only feasible due to team effort across the board… J.</p> <p>The thread is displayed in FIFO model (unlike standard outlook view) to help easy blog readability…</p> <p><b>From:</b> Anonymous [mailto:noreply-comment@blogger.com] <br /><b>Sent:</b> Monday, October 25, 2010 2:54 PM <br /><b>To:</b> Vishal Joshi <br /><b>Subject:</b> [Vishal Joshi's Tangent] New comment on Tips & Tricks: Start-Up Options and Instances of A.... </p> <p>Anonymous has left a new comment on your post "<a href="http://vishaljoshi.blogspot.com/2007/12/tips-tricks-start-up-options-and.html">Tips & Tricks: Start-Up Options and Instances of A...</a>": <br />I really wish this default were "false". I have never had a case where I want all 10 web projects in our solution to start at once ... and every time I have to do a new checkout I have to go turn all of these settings off. Sadly, VS2010 did not fix this ... we are still saddled with this unfortunate behavior. </p> <p><b>From:</b> Vishal Joshi <br /><b>Sent:</b> Monday, October 25, 2010 2:55 PM <br /><b>To:</b> ASP.NET Web Projects Team</p> <p><b>Subject:</b> FW: [Vishal Joshi's Tangent] New comment on Tips & Tricks: Start-Up Options and Instances of A.... </p> <p>Fyi… </p> <p>Vishal R. Joshi | <a href="http://vishalrjoshi.com">http://vishalrjoshi.com</a> | <a href="http://twitter.com/vishalrjoshi">@vishalrjoshi</a></p> <p><b>From:</b> MSFT Web Guy 1</p> <p><b>Sent:</b> Monday, October 25, 2010 3:14 PM <br /><b>To:</b> Vishal Joshi; ASP.NET Web Projects Team <br /><b>Subject:</b> RE: [Vishal Joshi's Tangent] New comment on Tips & Tricks: Start-Up Options and Instances of A.... </p> <p>I don’t think that we are using those settings. For instance I just created a solution with 2 WAP, when I F5 both startup, which I think is good because many times people have a services that are consumed by other projects, and that UI is little known. </p> <p>The issue that I’m seeing here is that if I explicitly go in and configure the startup projects in the UI the settings are not used. I would say this is a bug. </p> <p>Thanks, </p> <p><b>From:</b> MSFT Web Guy 2 <br /><b>Sent:</b> Monday, October 25, 2010 3:51 PM <br /><b>To:</b> MSFT Web Guy 1; Vishal Joshi; ASP.NET Web Projects Team <br /><b>Subject:</b> RE: [Vishal Joshi's Tangent] New comment on Tips & Tricks: Start-Up Options and Instances of A.... </p> <p>Huh? </p> <p><b>From:</b> MSFT Web Guy 1 <br /><b>Sent:</b> Monday, October 25, 2010 4:46 PM <br /><b>To:</b> MSFT Web Guy 2; Vishal Joshi; ASP.NET Web Projects Team <br /><b>Subject:</b> RE: [Vishal Joshi's Tangent] New comment on Tips & Tricks: Start-Up Options and Instances of A.... </p> <p>The settings in this dialog are not respected, both WAPs are started. </p> <p><a href="http://lh6.ggpht.com/_E8t3edIzcC8/TPdW4NYeZkI/AAAAAAAABJ8/Q_TUCLouwUk/s1600-h/clip_image008%5B3%5D.gif"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="clip_image001" border="0" alt="clip_image001" src="http://lh6.ggpht.com/_E8t3edIzcC8/TPdW4hq8HwI/AAAAAAAABKA/wB4_vDngJms/clip_image001%5B3%5D.gif?imgmax=800" width="782" height="491" /></a></p> <p><b>From:</b> MSFT Web Guy 2 <br /><b>Sent:</b> Wednesday, October 27, 2010 8:27 AM <br /><b>To:</b> Vishal Joshi; ASP.NET Web Projects Team <br /><b>Subject:</b> RE: [Vishal Joshi's Tangent] New comment on Tips & Tricks: Start-Up Options and Instances of A.... </p> <p>No. This is by design. This dialog indicates which projects are going to be debugged. The web property in WAP governs whether to start the web server on F5 for projects which are NOT being debugged, is independent of the settings on this dialog. So with this configuration, WebApplication5 will attach a debugger to cassini, WebApplication6 will start its cassini but a debugger will not be attached to it. </p> <p>The customer is complaining that the web property should be initialized to false so that only the startup project will launch its web server. </p> <p><b>From:</b> MSFT Web Guy 1 <br /><b>Sent:</b> Wednesday, October 27, 2010 9:22 AM <br /><b>To:</b> MSFT Web Guy 2; Vishal Joshi; ASP.NET Web Projects Team <br /><b>Subject:</b> RE: [Vishal Joshi's Tangent] New comment on Tips & Tricks: Start-Up Options and Instances of A.... </p> <p>So can you explain the meanings of the three settings for action: </p> <p>· None </p> <p>· Start </p> <p>· Start without debugging </p> <p><a href="http://lh6.ggpht.com/_E8t3edIzcC8/TPdW5IqikwI/AAAAAAAABKE/7LdQX7UQGpA/s1600-h/clip_image006%5B3%5D.jpg"><img style="border-bottom: ; border-left: ; display: inline; border-top: ; border-right: " title="clip_image002[4]" alt="clip_image002[4]" src="http://lh6.ggpht.com/_E8t3edIzcC8/TPdW5w8jnMI/AAAAAAAABKI/1Z7FW0zUV7Y/clip_image002%5B4%5D%5B2%5D.jpg?imgmax=800" width="765" height="445" /></a></p> <p><b>From:</b> MSFT Web Guy 2 <br /><b>Sent:</b> Wednesday, October 27, 2010 9:29 AM <br /><b>To:</b> MSFT Web Guy 1; Vishal Joshi; ASP.NET Web Projects Team <br /><b>Subject:</b> RE: [Vishal Joshi's Tangent] New comment on Tips & Tricks: Start-Up Options and Instances of A.... </p> <p>When user presses F5 do: </p> <p>None  - don’t start this project </p> <p>Start – debug this project </p> <p>Start w/o debugging – do the equivalent of Ctrl-F5 for this project </p> <p>Note that start w/o debugging is NOT equivalent to the web project flag of starting the web server. Do a ctrl-F5 and you will see why… </p> <p><b>From:</b> Vishal Joshi <br /><b>Sent:</b> Wednesday, October 27, 2010 10:24 AM <br /><b>To:</b> MSFT Web Guy 2; MSFT Web Guy 1; ASP.NET Web Projects Team <br /><b>Subject:</b> RE: [Vishal Joshi's Tangent] New comment on Tips & Tricks: Start-Up Options and Instances of A.... </p> <p>I see thanks for the clarification…  Based on the discussion it seems the customer is expecting the below property </p> <p><a href="http://lh6.ggpht.com/_E8t3edIzcC8/TPdW6ZBVodI/AAAAAAAABKM/GgA1ZFCHlfo/s1600-h/clip_image004%5B3%5D.jpg"><img style="border-bottom: ; border-left: ; display: inline; border-top: ; border-right: " title="clip_image003" alt="clip_image003" src="http://lh6.ggpht.com/_E8t3edIzcC8/TPdW6juk3SI/AAAAAAAABKQ/qe9pwYl7kj8/clip_image003%5B3%5D.jpg?imgmax=800" width="299" height="192" /></a></p> <p>to be false for all projects but Startup project… Would you agree? </p> <p>Vishal R. Joshi | <a href="http://vishalrjoshi.com">http://vishalrjoshi.com</a> | <a href="http://twitter.com/vishalrjoshi">@vishalrjoshi</a></p> <p><b>From:</b> MSFT Web Guy 2 <br /><b>Sent:</b> Wednesday, October 27, 2010 10:30 AM <br /><b>To:</b> Vishal Joshi; MSFT Web Guy 1; ASP.NET Web Projects Team <br /><b>Subject:</b> RE: [Vishal Joshi's Tangent] New comment on Tips & Tricks: Start-Up Options and Instances of A.... </p> <p>That is what he is asking for, but I don’t necessarily agree. Assuming a typical solution only has a couple of webs in it, it probably makes sense that all the web servers are started on Debug\Ctrl-F5. Sounds like your blog post is misleading. </p> <p><b>From:</b> MSFT Web Guy 2 <br /><b>Sent:</b> Wednesday, October 27, 2010 10:46 AM <br /><b>To:</b> Vishal Joshi; MSFT Web Guy 1; ASP.NET Web Projects Team <br /><b>Subject:</b> RE: [Vishal Joshi's Tangent] New comment on Tips & Tricks: Start-Up Options and Instances of A.... </p> <p>As a side note, you can multi-select all the waps (or web sites) in the solution, and change the property for all them in one go: </p> <p><a href="http://lh3.ggpht.com/_E8t3edIzcC8/TPdW7EGTraI/AAAAAAAABKU/5ppj82Kc9A4/s1600-h/clip_image002%5B3%5D.jpg"><img style="border-bottom: ; border-left: ; display: inline; border-top: ; border-right: " title="clip_image004[4]" alt="clip_image004[4]" src="http://lh3.ggpht.com/_E8t3edIzcC8/TPdW7ih1WmI/AAAAAAAABKY/DQlb9IyUzYs/clip_image004%5B4%5D%5B2%5D.jpg?imgmax=800" width="226" height="421" /></a></p> <p>---------------------------</p> <p> </p> <p>END OF THREAD…:-)</p> <p>Hope this was useful</p> <p>-Vishal</p> Vishal R Joshihttp://www.blogger.com/profile/05217117734084631137noreply@blogger.com5tag:blogger.com,1999:blog-5704450.post-44809851853847511402010-11-05T00:00:00.001-07:002011-01-19T15:45:25.891-08:00Team Build + Web Deployment + Web Deploy + VS 2010 = Goodness<p>I have to confess this is one of the most requested blog post in Web Deployment via either <a href="mailto:Vishal.Joshi@Microsoft.com?subject=Team%20Build%20Blog%20Post">direct emails</a>, comments on the <a href="http://www.vishalrjoshi.com/">blogs</a>, <a href="http://www.twitter.com/vishalrjoshi">twitter</a>, in conferences etc and it has been completely my bad to have prolonged this as long as I have. As it is said - better late than never, so without any delay let us get started.</p> <p>In this blog post I am hoping to cover the topics of setting up your web deployment using Web Deploy (MsDeploy) and Team Build. When we talk about automated web deployment with Web Deploy (I love our naming J) there are multiple aspects that come into mind, let us clear few of the concepts before we proceed with the walkthrough:</p> <p>· <b>Web Packaging </b>– Web Packaging is the process of creating a .zip file which can contain your web content (pages, images, CSS, JavaScript files etc), databases, IIS Settings, Application creation, ACLs etc. From your Team Build you can easily create Web Packages which you can ask your server admin or Test team to pick up and install on you web servers for testing. With Web Packages (.zip files) you will also get a .cmd file created by VS 2010 which can be run to install the package. There is not a direct automation to run this command file from team build but you can easily hook up post build step to execute the .cmd file if you would like to automate the installation of the package as well.</p> <p>· <b>Web Publishing </b>– Web Publishing is the process of directly taking the source application (in Team Build case the sources are hopefully in your TFS source repository) and directly pushing it to the destination web server. In this case a .zip file is not created but if you would like that for archival then that is possible as well. If you want your web servers to have your latest web application installed in Continuous Integration (CI) fashion then Web Publishing is the direction I would recommend.</p> <p><b>Note - </b>Web Publishing can only work when you have your Web Servers configured to accept Web Deploy request. There is an earlier blog post about <a href="http://blogs.msdn.com/b/webdevtools/archive/2009/06/05/basic-microsoft-web-deployment-tool-setup-for-visual-studio-2010.aspx">Setting up your Web Servers for Web Deploy</a>, without having your Web Servers setup the below walkthrough (Publish Section) will not succeed so please make sure that you have your Web Servers configured correctly before proceeding.</p> <p><b>Step 1: Get your TFS Build Server and Source Code Control Set up</b></p> <p>I am going to assume that you have a license for VS 2010 TFS environment setup. Below are the simple steps to have TFS setup using basic configuration (i.e. everything installed as shown belowJ)</p> <p><a href="http://lh5.ggpht.com/_E8t3edIzcC8/TNOrND9RiMI/AAAAAAAABHU/-9r8ajP8_X8/s1600-h/clip_image002%5B3%5D.png"><img style="display: inline" title="clip_image002" alt="clip_image002" src="http://lh5.ggpht.com/_E8t3edIzcC8/TNOrNvWXoHI/AAAAAAAABHY/jv2Zm4u_4Mg/clip_image002_thumb.png?imgmax=800" width="273" height="206" /></a></p> <p>Once the product has installed and you get a successful “Setup is complete” dialog, finish the installation and you will see a TFS configuration wizard. First let us configure Team Foundation Application Server and then configure the Team Build service as shown below:</p> <p><a href="http://lh6.ggpht.com/_E8t3edIzcC8/TNOrN7mLkQI/AAAAAAAABHc/ZCyOIeENtOg/s1600-h/clip_image004%5B3%5D.png"><img style="display: inline" title="clip_image004" alt="clip_image004" src="http://lh4.ggpht.com/_E8t3edIzcC8/TNOrOEEEZpI/AAAAAAAABHg/MOQCbLxvprE/clip_image004_thumb.png?imgmax=800" width="316" height="272" /></a></p> <p>The TFS Basic install is sufficient as it is the simplest setup option and honestly it does most of the stuff that I need. Honestly in my opinion it is so many times better than TFS 2008 which was much more complicated to set up. For nearly all of the screens just simply keep clicking next and eventually the set up wizard will finish and hopefully you will agree with me that this setup is indeed a breeze.</p> <p>Once the server configuration is complete, start the wizard for to Configure Team Foundation Build Service and it will come up with a Welcome Screen below:</p> <p><a href="http://lh3.ggpht.com/_E8t3edIzcC8/TNOrOoW16dI/AAAAAAAABHk/2aZKELPa7KY/s1600-h/clip_image006%5B3%5D.png"><img style="display: inline" title="clip_image006" alt="clip_image006" src="http://lh4.ggpht.com/_E8t3edIzcC8/TNOrPO1ACxI/AAAAAAAABHo/4w56U3Ahf_k/clip_image006_thumb.png?imgmax=800" width="572" height="225" /></a></p> <p>Again, click Next for each page and accept the defaults, before even you know you will have a functional TFS server ready to go. I know that the above explanation will sound like a joke but really TFS 2010 setup is as simple as that and it is difficult to complicate it unless you really require all the bells and whistles. I did have a loaded Microsoft software box but if you don’t then there might be some minor pre-requisites required but I am sure the setup wizard will let you know that J</p> <p><b><u>Glitch: </u></b>Now there is one glitch in this entire set up still which I need to call out for you. When you build your web projects, you need the Team Build service to have all the .targets files your projects needs. The TFS installation I showed above does not include all the targets files that comes with Visual Studio 2010. To get the necessary files on your machines, install Visual Studio on the same machine as your TFS server so your projects can build successfully. Now that certainly does not sound very nice so the alternate back door option is to go to %Program Files (x86)%\MSBuild\Microsoft\VisualStudio\v10.0 on your Visual Studio IDE box and copy the target files on your Team Build Server at the similar path. For Web deployment you will most likely only need “Web” and “WebApplications” folder but there is nothing wrong with having all the tasks and targets there just in case you need them later.</p> <p><b>Step 2: Connecting to your TFS server from Visual Studio and getting your project into source control</b></p> <p>On the home screen of VS 2010 you now have an option to Connect to Team Foundation Server or alternatively you can do so from the “Team” menu within VS too as shown below:</p> <p><a href="http://lh3.ggpht.com/_E8t3edIzcC8/TNOrPR7eAGI/AAAAAAAABHs/1QA_XeuD09I/s1600-h/clip_image008%5B3%5D.png"><img style="display: inline" title="clip_image008" alt="clip_image008" src="http://lh6.ggpht.com/_E8t3edIzcC8/TNOrP7SLdZI/AAAAAAAABHw/gW4yxwmC_Yo/clip_image008_thumb.png?imgmax=800" width="273" height="144" /></a></p> <p><a href="http://lh4.ggpht.com/_E8t3edIzcC8/TNOrQPK4zQI/AAAAAAAABH0/eNBlOjhXfqs/s1600-h/clip_image010%5B3%5D.png"><img style="display: inline" title="clip_image010" alt="clip_image010" src="http://lh5.ggpht.com/_E8t3edIzcC8/TNOrQvjDtsI/AAAAAAAABH4/ff_gl3TEefc/clip_image010_thumb.png?imgmax=800" width="304" height="73" /></a></p> <p>You will then see the “Connect to Team Project” dialog where you point to your TFS Server. If your server isn’t already populated in the server list drop down, you can add it clicking the “Servers…” button:</p> <p><a href="http://lh4.ggpht.com/_E8t3edIzcC8/TNOrRI-MuVI/AAAAAAAABH8/M9wLTm6jVzg/s1600-h/clip_image012%5B3%5D.jpg"><img style="display: inline" title="clip_image012" alt="clip_image012" src="http://lh4.ggpht.com/_E8t3edIzcC8/TNOrRZ_7FPI/AAAAAAAABIA/GIVOZuv2jCw/clip_image012_thumb.jpg?imgmax=800" width="624" height="471" /></a></p> <p>Once you are connected, you need to create a new Team Project from the File menu:</p> <p><a href="http://lh4.ggpht.com/_E8t3edIzcC8/TNOrRttKM3I/AAAAAAAABIE/BGdJSnDO1kk/s1600-h/clip_image014%5B3%5D.png"><img style="display: inline" title="clip_image014" alt="clip_image014" src="http://lh6.ggpht.com/_E8t3edIzcC8/TNOrSMwmccI/AAAAAAAABII/XoZvug7vZec/clip_image014_thumb.png?imgmax=800" width="301" height="130" /></a></p> <p>Give your team project a name and click through the wizard to create your Team Project and finish the wizard. Once your team project is created, you are ready to get your app into the source code control.</p> <p>If you need further help in setting up your source code control and build server then check out the links below:</p> <p>· <a href="http://www.microsoft.com/downloads/en/details.aspx?displaylang=en&FamilyID=2d531219-2c39-4c69-88ef-f5ae6ac18c9f">TFS 2010 Installation Guide</a></p> <p>· <a href="http://msdn.microsoft.com/library/ms181368.aspx">Using Version Control with TFS 2010</a></p> <p>· <a href="http://msdn.microsoft.com/en-us/library/ms181709.aspx">Understanding basic Build with TFS 2010</a></p> <p><b>Step 3: Get your app running and checked into TFS Source Code Control</b></p> <p>Well you know how to get your app up and running so I will not dive into that J but just for reference of this walkthrough below the is app I am using. I created this Web App for TechEd US 2010 in New Orleans using <a href="http://mvcmusicstore.codeplex.com/">MVC Music store sample on CodePlex</a>. (<a href="http://www.vimeo.com/16526557">You can watch the TechEd US 2010 video here</a>) As you can see in the sample below it is working on my localhost.</p> <p><a href="http://lh3.ggpht.com/_E8t3edIzcC8/TNOrSdmuMfI/AAAAAAAABIM/v6N_ExSDFjM/s1600-h/clip_image016%5B3%5D.jpg"><img style="display: inline" title="clip_image016" alt="clip_image016" src="http://lh6.ggpht.com/_E8t3edIzcC8/TNOrSlMUShI/AAAAAAAABIQ/AJNv62KP_oc/clip_image016_thumb.jpg?imgmax=800" width="427" height="307" /></a></p> <p>The site is also checked into my TFS source code control as shown below:</p> <p><a href="http://lh3.ggpht.com/_E8t3edIzcC8/TNOrTEbThLI/AAAAAAAABIU/YbQPbyEapD4/s1600-h/clip_image018%5B3%5D.jpg"><img style="display: inline" title="clip_image018" alt="clip_image018" src="http://lh5.ggpht.com/_E8t3edIzcC8/TNOrTRf8RXI/AAAAAAAABIY/Mg7_DEVQqR4/clip_image018_thumb.jpg?imgmax=800" width="316" height="368" /></a></p> <p>To check your application to Source Code Control you simply need to right click it and the menu options will guide you from there.</p> <p><b>Step 4: Connect to TFS using Team Explorer</b></p> <p>On VS 2010 Team Explorer you will find a button on the top right which will allow you to connect to a team project. When you click the button and select your Team project your Team should similar to what I have below:</p> <p><a href="http://lh6.ggpht.com/_E8t3edIzcC8/TNOrU8PfhJI/AAAAAAAABIc/7eL6rQkeAvs/s1600-h/clip_image019%5B3%5D.png"><img style="display: inline" title="clip_image019" alt="clip_image019" src="http://lh4.ggpht.com/_E8t3edIzcC8/TNOrVNqsulI/AAAAAAAABIg/FusPB-rGKV4/clip_image019_thumb.png?imgmax=800" width="364" height="222" /></a></p> <p><b>Step 5: Create a new Build Definition</b></p> <p>A build definition instructs TFS on how to trigger the build. In this case we want deployment to accompany the Build too so we will create a new Build Definition and configure it accordingly. For that right click on the “Builds” node of the Team Project and click “New Build Definition”</p> <p>At this point you will see the below dialog where you can name your build definition appropriately.</p> <p><a href="http://lh3.ggpht.com/_E8t3edIzcC8/TNOrVcSaFFI/AAAAAAAABIk/r7fKdJbv3AM/s1600-h/clip_image020%5B3%5D.png"><img style="display: inline" title="clip_image020" alt="clip_image020" src="http://lh3.ggpht.com/_E8t3edIzcC8/TNOrV-m0QxI/AAAAAAAABIo/zjfcbAb_jMo/clip_image020_thumb.png?imgmax=800" width="630" height="270" /></a></p> <p><b>Step 6: Configure your Trigger in TFS 2010 Build Definition</b></p> <p>Trigger configuration informs Team Build on when to fire a build there are several options as shown below and I will explain them at high level for you to be able to make the right call</p> <p><a href="http://lh4.ggpht.com/_E8t3edIzcC8/TNOrWAjQLlI/AAAAAAAABIs/gjkAtufYhTI/s1600-h/clip_image022%5B3%5D.jpg"><img style="display: inline" title="clip_image022" alt="clip_image022" src="http://lh6.ggpht.com/_E8t3edIzcC8/TNOrWSYFn_I/AAAAAAAABIw/xl0QAmHYrfE/clip_image022_thumb.jpg?imgmax=800" width="783" height="321" /></a></p> <p>· <b>Manual</b> – As the name suggests this mode allows the Build to be triggered manually as you desire, for demo purposes I am going to use this but ideally you want to explore other options also to determine what works best for you.<b></b></p> <p>· <b>Continuous Integration – </b>This is classic celebrated CI model where every check in into the source code control will cause a build and hence resultant deployment that we would configure. <b></b></p> <p>· <b>Rolling Builds - </b>Sometimes when working in massive teams CI can be disruptive as there are several check ins happening every other hour. In that case you can inform your dev team that there will be a build happening every X minutes and they should plan for that. During end game period of the project this configuration may help to have routine quick builds coming out.<b></b></p> <p>· <b>Gated Check-Ins - </b>This was one of the highly requested features for teams who did not want any broken builds due to bad check-ins. This will ensure that only check-ins which merge & build successfully.<b></b></p> <p>· <b>Scheduled Builds – </b>As name suggests you can also have builds coming out during regular times every day. This is the model which is used by larger VS and .NET teams in general, we too get our builds created on a nightly basis. The funny part is that I do not think that VS & .NET build configuration is as easy as TFS 2010 makes it for everyone else J<b></b></p> <p><b>Step 7: Configure your Workspace which needs to be built</b></p> <p>This is where you specify what you want to build. As shown below I have configured my Project folder as the build target.</p> <p><a href="http://lh4.ggpht.com/_E8t3edIzcC8/TNOrWzrxJYI/AAAAAAAABI0/EwsrXV6kD0M/s1600-h/clip_image024%5B3%5D.jpg"><img style="display: inline" title="clip_image024" alt="clip_image024" src="http://lh5.ggpht.com/_E8t3edIzcC8/TNOrXcUMvjI/AAAAAAAABI4/acshDJhun_8/clip_image024_thumb.jpg?imgmax=800" width="624" height="478" /></a></p> <p><b>Step 8: Provide Drop Location where you want your builds to be dropped</b></p> <p>This is relatively a simple step for creating a UNC folder with correct folder permissions so that your TFS build (which typically runs under NETWORK SERVICE) has correct permissions to write to build output path. My setting looks as below:</p> <p><a href="http://lh4.ggpht.com/_E8t3edIzcC8/TNOrXlE-H-I/AAAAAAAABI8/wyz1UxdgrUc/s1600-h/clip_image025%5B3%5D.png"><img style="display: inline" title="clip_image025" alt="clip_image025" src="http://lh4.ggpht.com/_E8t3edIzcC8/TNOrX3CNL6I/AAAAAAAABJA/_W737SMSDtI/clip_image025_thumb.png?imgmax=800" width="649" height="309" /></a></p> <p><b>Step 9: Setup the Retention Policy</b></p> <p>Retention Policy simply informs how to save the builds in the drop folder mentioned above. I did not modify mine so it looks as below, although you might want to change these settings based on the disk space that you available:</p> <p><a href="http://lh6.ggpht.com/_E8t3edIzcC8/TNOrY2FHjBI/AAAAAAAABJE/q7Fc20JejUw/s1600-h/clip_image027%5B3%5D.jpg"><img style="display: inline" title="clip_image027" alt="clip_image027" src="http://lh3.ggpht.com/_E8t3edIzcC8/TNOrZOxHmaI/AAAAAAAABJI/uuRCy6r6dow/clip_image027_thumb.jpg?imgmax=800" width="624" height="264" /></a></p> <p><b>Step 10: Configuring the Deployment Process</b></p> <p>For this you have to go to the “Process” tab which looks as below:</p> <p><a href="http://lh3.ggpht.com/_E8t3edIzcC8/TNOrZhm5JiI/AAAAAAAABJM/QTyUsQMky1w/s1600-h/clip_image029%5B3%5D.jpg"><img style="display: inline" title="clip_image029" alt="clip_image029" src="http://lh4.ggpht.com/_E8t3edIzcC8/TNOrZ0FlA1I/AAAAAAAABJQ/l8EASw2LuJo/clip_image029_thumb.jpg?imgmax=800" width="836" height="309" /></a></p> <p>Most of the items in these are self explanatory but I want to spend some time explaining a few which matter in our case:</p> <p>· <b>Automated Tests – </b>TFS allows you to run the tests in Tests.dll automatically during each build so if you would like to have some unit tests run during build and deployment then this is a great place to mention that. There is also a flag to stop running the tests in the grid which you can set if you do not want to disturb your configuration of this property.<b></b></p> <p>· <b>MSBuild Arguments - </b>This is the location where you need to specific the hooks to mention that you want to trigger deployment as part of the build. <b></b></p> <p>o <b>Web Packaging – </b>For Web Packaging the argument you want to specify is simply:<b></b></p> <p>/p:DeployOnBuild=True; </p> <p>The above property is going to tell the Web Publishing Pipeline (WPP) to engage after the build is successful. At the default target which executes is Packaging you should not need to provide any other properties.</p> <p>o <b>Web Publishing – </b>For Web Publishing the arguments you want to specify are:</p> <p>/p:DeployOnBuild=True /p:DeployTarget=MsDeployPublish /p:CreatePackageOnPublish=True /p:MSDeployPublishMethod=InProc /p:MSDeployServiceUrl=localhost /p:DeployIisAppPath="Default Web Site/NewOrleansJazz" /p:UserName=domain\user /p:Password=myPassword</p> <p>In this case because we want publishing with Web Deploy to happen we provide /p:DeployTarget value to be MsDeployPublish.</p> <p>/p:CreatePackageOnPublish allows you to create a package before publishing, it will help you keep an archive of what you published on your local drops folder. Although do note that It will certainly slow down the deployment and eat your disk space so choose it as you see fit.</p> <p>/p:MsDeployServiceUrl tells the WPP where the project needs to be published to. In the beginning of this post I had mentioned that you need to <a href="http://blogs.msdn.com/b/webdevtools/archive/2009/06/05/basic-microsoft-web-deployment-tool-setup-for-visual-studio-2010.aspx">set up the remote Web Server for Publish</a>, this is the place where it finally gets used. The URL format is typically <a href="https://ServerName:8172/MsDeploy.axd">https://ServerName:8172/MsDeploy.axd</a>. As I am using localhost as my build as well as test server I do not need to provide the full URL (i.e. VS 2010 will complete it as needed) but since your test server is going to be different than build server in real world you will have to provide full URL. </p> <p><u>[UPDATE: It was brought to my attention that I had missed a detail in this post which is certainly worth clarifying.  If you are using the Service URL by setting up the server as explained above then you will have to change MSDeployPublishMethod from InProc to WMSVC so the property should become /p:MSDeployPublishMethod=InProc  to /p:MSDeployPublishMethod=WMSVC  Note that if you are publishing to localhost VS can use Web Deploy APIs directly within the same process of VS hence I was using InProc as my option.  If you are publishing to a different server then InProc will not work and give you errors so please make the above change.  Apologies for missing this detail earlier.]</u></p> <p>/p:DeployIisAppPath tells the publishing system the <b>IIS Site Name/App Name</b> that you want to publish to. E.g. Default Web Site/MVCMusicStore</p> <p>/p:UserName=domain\user is the actual User Name which has access to the remote Web Server on which you set up the Web Deploy Publishing</p> <p>/p:Password=myPassword is the actual Password for the User Name above</p> <p><b>NOTE:</b> Do note that the sample here can only publish to IIS 7 (Win2k8 and above), if you are running IIS6 or lower (i.e. Win2k3/ Win2k) then you need to follow slightly different process. Please drop a comment here and I will write a follow up post on that.</p> <p>o <b>File Copying – </b>This will allow you to simply to a xCopy deployment without needing to setup any remote service<b></b></p> <p>/p:DeployOnBuild=true /p:DeployTarget=PipelinePreDeployCopyAllFilesToOneFolder /p:_PackageTempRootDir=<a href="file:///\\BuildServer\BuildDrops\MVCMusicStore">\\BuildServer\BuildDrops\MVCMusicStore</a> /p:AutoParameterizationWebConfigConnectionStrings=false</p> <p>/p:_PackageTempRootDir allows you to specify the remote server location on which you want xCopy to happen. Again the remote location will need permission to be writable by Team Build Agent which is running the deployment</p> <p>/p:AutoParameterizationWebConfigConnectionStrings=false essentially tells WPP to not parameterize the Web.Config file since doing so will introduce replicable tokens within Web.Config which are used during Packaging & Publishing.</p> <p><b><u>NOTE:</u></b> File Copying was honestly never designed out of the box to be used from Team Build in such fashion but some people have been interested in using <a href="http://vishaljoshi.blogspot.com/2009/03/web-deployment-webconfig-transformation_23.html">Web.Config Transformation</a> during xCopy and hence I thought it was worthwhile mentioning this in the blog.</p> <p><b><u>PS:</u></b><b> </b>Using properties which begin with underscore “_” is not typically recommended as they are considered private MSBuild variables by convention but in this case it is relatively easy way to accomplish the xCopy solution. Even in future versions of VS if this property changes I am hopeful there will be alternate/easier way to do this. In general if you can set up the Publishing on your web server using Web Deploy I think it will yield you longer term advantages and I think it is a worthwhile endeavor to take.</p> <p>· <b>Projects To Build - </b>When you have only one web application and class libraries then it is easier to just have the Project (CSProj or VBProj) to build as shown in my example above, but if you have bunch of projects which all need to built then you might have to go with Solution Build option (.SLN).<b></b></p> <p>Deployment for Web Apps is feasible at both Solution as well as Project build level although when it comes to Solution Build then you might want to make sure that the properties you are passing at Solution level will apply to all the projects in the solution which might not always the outcome you desire. In that situation all these properties can be set within the .csproj or .vbproj files too. You can do that by unloading your project file and in the top <PropertyGroup> section just add above properties as you like:</p> <p>For e.g /p:DeployOnBuild=True can be added as <DeployOnBuild>True</DeployOnBuild></p> <p><b>Step 11: Trigger your Build Definition </b></p> <p>Now that you have everything configured you can right click on the Build Definition and hit “Queue New Build”.. That will show you a dialog which you can simply hit OK on and you should soon get your Build ready and the site deployed as shown in my case below:</p> <p><a href="http://lh3.ggpht.com/_E8t3edIzcC8/TNOraaCS7xI/AAAAAAAABJU/IBJ4efNkG94/s1600-h/clip_image031%5B3%5D.jpg"><img style="display: inline" title="clip_image031" alt="clip_image031" src="http://lh6.ggpht.com/_E8t3edIzcC8/TNOravHEhHI/AAAAAAAABJY/oDcfS4yETIE/clip_image031_thumb.jpg?imgmax=800" width="624" height="191" /></a></p> <p>After a while when you check into the Completed section of the build you should see your new build lined up.</p> <p><a href="http://lh5.ggpht.com/_E8t3edIzcC8/TNOrbFkt5aI/AAAAAAAABJc/bIRHrZnQicM/s1600-h/clip_image033%5B3%5D.jpg"><img style="display: inline" title="clip_image033" alt="clip_image033" src="http://lh4.ggpht.com/_E8t3edIzcC8/TNOrbVhf8yI/AAAAAAAABJg/xQPe4PF7I4A/clip_image033_thumb.jpg?imgmax=800" width="624" height="177" /></a></p> <p>On inspecting the IIS and SQL Server you can see my sites & DBs are also deployed.</p> <p><a href="http://lh5.ggpht.com/_E8t3edIzcC8/TNOrbtRrwEI/AAAAAAAABJk/rMjrIN8dFTY/s1600-h/clip_image034%5B3%5D.png"><img style="display: inline" title="clip_image034" alt="clip_image034" src="http://lh6.ggpht.com/_E8t3edIzcC8/TNOrcEl2BuI/AAAAAAAABJo/_O9xLSdPVrA/clip_image034_thumb.png?imgmax=800" width="195" height="116" /></a> <a href="http://lh3.ggpht.com/_E8t3edIzcC8/TNOrcaRyoTI/AAAAAAAABJs/x6odxySzDWk/s1600-h/clip_image035%5B3%5D.png"><img style="display: inline" title="clip_image035" alt="clip_image035" src="http://lh5.ggpht.com/_E8t3edIzcC8/TNOrc0NePuI/AAAAAAAABJw/mQYsItLuRF0/clip_image035_thumb.png?imgmax=800" width="200" height="155" /></a></p> <p>Finally on running the application it runs great too:</p> <p><a href="http://lh6.ggpht.com/_E8t3edIzcC8/TNOrdPpWH3I/AAAAAAAABJ0/MBT95YMi7gQ/s1600-h/clip_image037%5B3%5D.jpg"><img style="display: inline" title="clip_image037" alt="clip_image037" src="http://lh4.ggpht.com/_E8t3edIzcC8/TNOrdU_zWcI/AAAAAAAABJ4/VkOK96SvaUw/clip_image037_thumb.jpg?imgmax=800" width="530" height="434" /></a></p> <p>This was actually a combination of setting up my DB deployment settings too, to learn more about configuring your deployment in the right way check out <a href="http://vishaljoshi.blogspot.com/2009/09/overview-post-for-web-deployment-in-vs.html">TOC on Web deployment</a>.</p> <p>PS: If you get an error on TFS like below:</p> <p>TF215097: An error occurred while initializing a build for build definition \TechEd-US-2010\MvcMusicStore: There was no endpoint listening at http://MyServer:9191/Build/v3.0/Services/Controller/1 that could accept the message. This is often caused by an incorrect address or SOAP action. See InnerException, if present, for more details.</p> <p>Then most likely you do not have your Build Service running, you can enable it by going to Start à All Programs à Team Foundation Administration Console à Build Configuration.</p> <p><b>Conclusion</b></p> <p>Hopefully this will get you going with your automated web deployments. Please write back if you feel anything is missing or if you have any other questions. If you have questions like how would you configure what gets deployed, how to set up DB deployment, how to change web.config etc etc we have tons of articles on how to customize your deployment. You can look at a whole list of them at <a href="http://vishaljoshi.blogspot.com/2009/09/overview-post-for-web-deployment-in-vs.html">Overview of Web Deployment</a></p> <p>Hope this helps</p> <p>Vishal</p> Vishal R Joshihttp://www.blogger.com/profile/05217117734084631137noreply@blogger.com111tag:blogger.com,1999:blog-5704450.post-83639323860547749012010-10-26T01:54:00.001-07:002010-10-26T02:09:17.798-07:00Setting up my new Web Development Machine<p>For more immediate and tiny updates on web development and photography follow me on Twitter <a href="http://twitter.com/vishalrjoshi">@VishalRJoshi</a></p> <p>I just recently got a new laptop, it looks awesome, is blazing fast and from now on I will spend at least few hours every evening with it.  I have always wanted to upgrade but Microsoft keeps getting me powerful work laptops I hardly ever came out of the spell.  But recently stars aligned and that provoked me to get a personal laptop:</p> <p>1. I hate the looks of Lenovo W500 which is what I have at work</p> <p>2. I have software licenses for photography and other software which feel weird to register from work machine</p> <p>3. The screen resolution on Lenovo’s is not as good as I would like</p> <p>4. Work laptop makes me work more and play less, I really do need a clean separation J</p> <p>Well anyways I got my laptop this weekend. As I would primarily use this for Web Development and Photography I thought I would write down a post which would be a nice walk down the memory lane for me in the future and perhaps help someone now.</p> <p><u>Hardware</u></p> <p>Intel Core i5 ~ 2.5GHz, 4GB RAM, 500GB with 7200 RPM HD and 1680 x 1050 high quality screen.</p> <p>I was hoping to get i7 processor but most reviews and friends said that it heats up on a laptop and does not provide as much value. I was also going to go with 8GB RAM but a friend of mine got his 8GB RAM cheaper online than with the laptop. Finally I was going to buy SSD Hard Disk but could not justify the cost to myself in the mirror.</p> <p><u>OS & Office</u></p> <p><a href="http://www.microsoft.com/windows/windows-7/compare/default.aspx">Windows 7 Ultimate</a> x64 <i>(Paid)</i></p> <p>I think Win 7 Professional would do just fine as I am not intending to use bit locker or 35 languages which seems to be the only difference between Professional and Ultimate. Anyways, I think I am spoilt, it just feels good when Windows starts and the screen says Ultimate J</p> <p><a href="http://office.microsoft.com/en-us/buy/office-2010-which-suite-is-right-for-you-FX101825640.aspx">Office Professional 2010</a> <i>(Paid)</i></p> <p>Again Office Home & Business would do just fine but I had got a copy of Office Pro 2010 which was waiting for my new laptop to arrive J</p> <p><i>Outlook</i></p> <p>I configured Outlook with my Live.com, Gmail.com and Hotmal.com email ids. The Hotmail connector for Outlook actually comes down automatically during the configuration and the thing sets up like a charm.</p> <p><u>Web Development </u><i>(Free)</i><u></u></p> <p>As any other developer I am inclined to download a bunch of stuff just in case I need it but this time I have decided to keep the list of installed software to bare essentials and going with the minimalistic attitude. Also in support of high productivity I got Web PI from <a href="http://www.microsoft.com/web/downloads/platform.aspx">Microsoft.com/Web</a> and customized as following:</p> <p>Tools <i>(Free)</i></p> <p><a href="http://lh5.ggpht.com/_E8t3edIzcC8/TMaXPWoFeEI/AAAAAAAABGs/ycg4o5HwkTs/s1600-h/clip_image002%5B18%5D%5B2%5D.jpg"><img style="margin: 0px; display: inline" title="clip_image002[18]" alt="clip_image002[18]" src="http://lh3.ggpht.com/_E8t3edIzcC8/TMaXPpyavoI/AAAAAAAABGw/2jSLpvS6T2U/clip_image002%5B18%5D_thumb.jpg?imgmax=800" width="624" height="464" /></a></p> <p>Framework <i>(Free)</i></p> <p><a href="http://lh6.ggpht.com/_E8t3edIzcC8/TMaXPxpgRxI/AAAAAAAABG0/IcZhtm2o7ow/s1600-h/clip_image004%5B4%5D%5B2%5D.jpg"><img style="margin: 0px; display: inline" title="clip_image004[4]" alt="clip_image004[4]" src="http://lh5.ggpht.com/_E8t3edIzcC8/TMaXQpOYI_I/AAAAAAAABG4/mLXaG2aeGRw/clip_image004%5B4%5D_thumb.jpg?imgmax=800" width="624" height="464" /></a></p> <p>Database <i>(Free)</i></p> <p><a href="http://lh4.ggpht.com/_E8t3edIzcC8/TMaXQ5BOQDI/AAAAAAAABG8/qiNbhRSY0KI/s1600-h/clip_image006%5B4%5D%5B2%5D.jpg"><img style="margin: 0px; display: inline" title="clip_image006[4]" alt="clip_image006[4]" src="http://lh6.ggpht.com/_E8t3edIzcC8/TMaXRIJ3yEI/AAAAAAAABHA/ihvSqlZzAKM/clip_image006%5B4%5D_thumb.jpg?imgmax=800" width="624" height="461" /></a></p> <p>Server <i>(Free)</i></p> <p><a href="http://lh3.ggpht.com/_E8t3edIzcC8/TMaXRrSyQQI/AAAAAAAABHE/ZtY6gQ9keNw/s1600-h/clip_image008%5B4%5D%5B2%5D.jpg"><img style="margin: 0px; display: inline" title="clip_image008[4]" alt="clip_image008[4]" src="http://lh5.ggpht.com/_E8t3edIzcC8/TMaXR4Cr2mI/AAAAAAAABHI/hx45j_tHfFo/clip_image008%5B4%5D_thumb.jpg?imgmax=800" width="624" height="466" /></a></p> <p>Apart from the above listed I also took IIS6 Metabase compatibility for Visual Studio à IIS interactions (yeah I know we need to remove the dependency on it J), some basic logging features, IIS Management Console, Remote Management for my hosted sites, Windows & Basic Authentication.</p> <p>I was inclined to enable a bunch of modules but I thought I will enable them when I need them and try to stay as bare minimum as possible.</p> <p>Honestly, after I kicked off Web PI, there was one restart for .NET 4 framework install and everything went super smooth. Unfortunately my SQL Server Express installation failed and I had to go and install it manually from <a href="https://www.microsoft.com/betaexperience/pd/SQLEXPPRE/enus/">MSDN</a>.</p> <p>In anycase, I do not mind installing SQL Server 2008 R2 Express manually as it allows me to configure mixed mode authentication and provide sa password, which I sometimes like to use with my connectionStrings.</p> <p>I do not exactly remember but I do think that the SQL Server 2008 Management studio also required a restart of the machine but other than that it did go pretty smooth.</p> <p>Honestly, getting a fully functional Web Development box was never that easy before Web PI so I am really happy that our team was able to pull together this highly impactful product and the more I see it in use on day to day basis within Microsoft, it makes me feel even better about the impact it can have. Most certainly there are pros and cons but overall I think it is a good thing J</p> <p><u>Visual Studio Themes </u><i>(Free)</i><u></u></p> <p>First thing is to get VS customized to get a darker and a nicer theme. I like <a href="http://studiostyl.es/schemes/selenitic">Selenitic by Tim Thomas</a> but you can find several others at <a href="http://studiostyl.es/">http://studiostyl.es/</a> to suit your needs.</p> <p>If you are using VWD Express 2010 which I use on my machine then to set the Theme you have to go to following location on Tools à Options (make sure you set the settings file by using the “Use team settings file” check box.</p> <p><a href="http://lh5.ggpht.com/_E8t3edIzcC8/TMaXSI4WZQI/AAAAAAAABHM/EttsAeKAW7Q/s1600-h/clip_image010%5B4%5D%5B2%5D.jpg"><img style="display: inline" title="clip_image010[4]" alt="clip_image010[4]" src="http://lh4.ggpht.com/_E8t3edIzcC8/TMaXSrDj3zI/AAAAAAAABHQ/s0FuP37tHn0/clip_image010%5B4%5D_thumb.jpg?imgmax=800" width="624" height="387" /></a></p> <p>Typically I would go to the “Extensions Manager” in “Tools” menu and get few power tools but since VWD Express does not have all extensibility hooks not many of the power tools are really available.</p> <p><u>NuPack </u><i>(Free)</i><u></u></p> <p>Next I was super inclined to get <a href="http://nupack.codeplex.com/">NuPack from Codeplex</a> as I know the packages in there are growing like crazy but I prevented myself from going there just yet as there were bunch of other things to get in place and again, using the policy of getting something only if I need it.</p> <p><u>7Zip </u><i>(Free)</i><u></u></p> <p>Several times during conversation at work 7Zip comes up as the possible direction we want to take to save download times across many of Microsoft technologies. In general I think it is an innovative community project which is worth your attention. It also has easy file extensions associations in Tools à Options within 7 Zip File Manager and you can download it from <a href="http://www.7-zip.org/">http://www.7-zip.org/</a></p> <p><u>Reflector </u><i>(Free)</i></p> <p>They say it for a reason that every .NET developer should have reflector, you can get that for free at <a href="http://reflector.red-gate.com/download.aspx">http://reflector.red-gate.com/download.aspx</a>. Unfortunately, if you are using any Express versions of Visual Studio like VWD Express 2010 then you won’t be able to use the Reflector Add In for debugging but even without that Reflector is pretty useful in itself.</p> <p><u>Resharper <i>(Free)</i></u></p> <p>Again there is a reason why they make banners “Can’t Code without Resharper” but oh well I am using VWD Express and the Add-Ins are not allowed with it so unfortunately no Resharper for me. Btw you can download it from <a href="http://www.jetbrains.com/resharper/download/">http://www.jetbrains.com/resharper/download/</a> for Free if you are working on an OSS project or for $199 if you are getting it for personal use. </p> <p><a href="http://www.mozilla.com/en-US/firefox/ie.html">FireFox</a> & <a href="http://getfirebug.com/community">Firebug</a><i> (Free)</i></p> <p>I am eagerly looking forward to use these and I am sure most people do as well.</p> <p><u>Windows Live Writer <i>(Free)</i></u></p> <p>Well this blog would not have happened as easily as it has without Live Writer. If you plan to write you have to try this software for sure. Download it from <a href="http://explore.live.com/windows-live-writer?os=other">Windows Live Essentials download center</a>.</p> <p><u>TweetDeck <i>(Free)</i></u></p> <p>Next was to get into the Social community and <a href="http://www.tweetdeck.com/desktop/">install TweetDeck</a> and connect all of my Linked In, Facebook, Four Square as well Twitter accounts on it. This will provide some reasonable entertainment for me.</p> <p><u>EverNote <em>(Free)</em></u></p> <p>I use Evernote all the time to sync up all types of my work items, To Dos from home, shopping list etc etc and it keeps it all synced up.  This is one of the best tools ever if you have not used it yet.  Get it from <a title="http://www.evernote.com/" href="http://www.evernote.com/">http://www.evernote.com/</a></p> <p><u>LightRoom <i>(Paid)</i></u></p> <p>Finally, it comes down to having a great machine and a great photo management tool. My cousin just got me a copy of Light room and I got it all installed and ready on the machine. You can get Lightroom 3 for 30 day trial for Free if you have never used it from <a href="https://www.adobe.com/cfusion/tdrc/index.cfm?product=photoshop_lightroom&promoid&promoid=DTEML">Adobe site</a>.</p> <p>With all that said even with keeping stuff simple and minimal I landed up installing quite a bit of software on my machine. Interesting piece is that other than the Hardware, OS, Office & Lightroom everything else on my machine is Free software. I intend not to add a lot more to my machine but if I do I will most likely update this post too. In the meantime I hope you find this at least minimally useful/interesting.</p> <p>-Vishal</p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:2563e873-4a31-4b40-b53e-2526aef4896a" class="wlWriterEditableSmartContent">Technorati Tags: <a href="http://technorati.com/tags/Web+Development" rel="tag">Web Development</a>,<a href="http://technorati.com/tags/Machine" rel="tag">Machine</a>,<a href="http://technorati.com/tags/PhotoGraphy" rel="tag">PhotoGraphy</a></div> Vishal R Joshihttp://www.blogger.com/profile/05217117734084631137noreply@blogger.com18