Web Development Goodies in Visual Studio 2012

Visual Studio 2012 and it’s extensions ecosystem brings excited enhancements for web developers. I am glad to see that web platform team is giving attention to open source, adapting industry trend faster than ever and making developer life easy and standard-complaint.
In this post I am going to share some of web development goodies that ships with Visual Studio 2012 (including Visual Studio Update 1 along with ASP.NET and Web Tools 2012.2 RC update) as well as some popular and must have extensions.

 

HTML5/CSS3/JavaScript Editor Enhancement Support:

 

The Visual Studio 2012 IDE includes great tooling update for supporting HTML5/CSS3/JavaScript intellisense. This includes new HTML5 tags and CSS3 properties. This helps in writing code relatively faster.


 
And who said to work on color hex codes? CSS color picker is now supported directly in CSS editor in Visual Studio. Makes it super easy to select and customize colors.
Further, JavaScript editor has improved significantly supporting better intellisense including for jQuery library.

An important point for JavaScript intellisense is to add reference path to js files. If you have noticed in ASP.NET MVC 4 project templates there is a js file “_references.js”

This file add references of common scripts referred in project to support their intellisense. However the reference to “_references.js” is added as global references in Visual Studio -> Options -> Text Editor -> JavaScript -> Intellisense -> References

It’s not the case that you cannot develop HTML5/CSS3 application without it. It’s just a editor support. Part of the features were also made available for Visual Studio 2010 SP1.

Page Inspector:

Page Inspector is a new feature in Visual Studio 2012. If you have developed web layout using HTML/CSS, you must have came across situation to give hit and try web layout for example, setting the right position, padding, selecting the color and see what best suited. I previously used to do this using FireBug, a Firefox browser extension. Page Inspector one feature is to answer this scenario. Scott Hanselman has produced a great animation to show what page inspector does. So I have copied it below.

Paste JSON as Classes 

A new feature to convert JSON into classes. A copied JSON can be pasted using Edit -> Paste Special -> Paste JSON As Classes

{"menu": {
"id": "file",
"value": "File",
"popup": {
"menuitem": [
{"value": "New", "onclick": "CreateNewDoc()"},
{"value": "Open", "onclick": "OpenDoc()"},
{"value": "Close", "onclick": "CloseDoc()"}
]
}
}}

is pasted as

 

NuGet

NuGet is a popular extension of Visual Studio that makes it easy to manage third party libraries and dependencies in Visual Studio. In fact it’s so good that it now ships with Visual Studio 2012.
You can open up NuGet Package Manager using user interface or Package Manager console window available in View -> Other Windows -> Package Manager Console.

The way it works is that if you develop third party libraries and want to share with other developers then you create a package in NuGet. Other developers can retrieve package from NuGet repository and download the library along with required configuration, such as entry in web.config. See an example blog post, where I demonstrated configuring ELMAH using NuGet.

Web Essentials

If you are currently working on web application front-end in VS and you don’t have web essential extension installed then you are simply missing something essential. Web Essential is an visual studio extension created by Mads Kristensen and its like playground for the web tools team. It has a bunch of great features which provide help in development, I am just going to highlight few of them. Complete feature set is explained at http://vswebessentials.com/
LESS Editor/Preview: LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. If you write CSS and don’t know about LESS, you are missing something really handy. Web essential extension supports .less extensions file in a way that it previews the output CSS and some refactoring as well.


Vendor Specifics Generation: Many of the CSS3 properties required vendor specifics properties to work across web browsers. These include -moz, -webkit, -ms and -o. Consider following example below:

would result in:
 
There are many other goodies for web developers, TypeScript, CoffeeScript, advance intellisense in HTML, JS and CSS editors, ZenCoding etc. Go get it. This extension is also available for Visual Studio 2010 as well.

Productivity Power Tools

Productivity Power Tools is another must have extension of Visual Studio developed by some engineers at Microsoft Visual Studio team but they are not yet part of the Visual Studio official shipment. Some of the feature has graduated to official shipment over the time yet there are many good to have feature in productivity power tools. Some of the features I like are:
  • Ctrl + Click for Go To Definition
  • Remove unused Using from code editor context menu
  • Power Commands
  • Quick Tasks. Quick Tasks is nothing revolutionary rather it brings out most commonly used settings in Visual Studio to your finger tips. (see snapshot below)

For details, check out the Productivity Power Tools page on Visual Studio Gallery. This extension is also available for Visual Studio 2010 having relatively different feature set.

Open Source Web Platform

Over the last two years, I am glad to see the interest and shift of Microsoft Web and Azure team towards open source. Since then they have started publishing some of their source code on codeplex and github. This really helps developer community in contributing towards frameworks and understanding code which is good to have in case you faced any issue and wanted to know internals.
That is all for now. I have tried to highlighted some of good stuff available in Visual Studio ecosystem, which are helpful for web developers. I recommend you to check out details of each item.
Happy Coding!
 

Beginning Web Development using ASP.NET MVC

Yesterday I had an opportunity to talk on web development using ASP.NET MVC for students at AIOU.
I wanted to make sure that students have good concept of “Web” and the HTTP transactions. Plus in the start, it takes a little time for beginners to understand the Model-View-Controller (MVC) pattern and the convention over configuration style in ASP.NET MVC. So I started the session with web fundamentals and moving to demonstrating ASP.NET MVC project.
For those asking for presentation slides, which I think are not very important here but may be helpful, are shared on slideshare.

2012 – A Year of CHANGE

What a remarkable year! I call it a year of change for me. Honestly for me 2012 was a testament of my change agility. So much happened this year in my personal and professional life that is why I consider it as a  year of new beginning, year of decisions, year of love, year of excitement, year of responsibility, and a year of learning. With the help of this post, I tell you how!

I would like to share some of the major highlights of this year with you (reader). Hope you had a splendid time in 2012 as well.

Change in Personal Life

Got Married

The year started with a fabulous adventure of getting married, well at least it’s fabulous in the beginning for everyone. It was the first big change of the year. Getting married is really a different yet good experience. Bachelor life is full of freedom in a sense that you are not bound to care for someone looking forward to you and you can hangout with pals till late without bothering for a second. Having said that married life comes with its own plus points which are definitely beyond the scope of this blog post 😀 So this was the first big change of this year.

Relocation

Next, I was offered Full Time Employment (FTE) at Telenor and the position required me to relocate to Islamabad. It’s is a beautiful city with lot of greenery. Relocation is challenging in a way that you leave your friends, family, home etc. but I guess in life one must be open for new opportunities, new places and new people. Though I think that I underestimated the impact of relocation and thought it would be easy but it took almost a quarter to know about the new city and adjust. Today after 6 months, I am fairly adjusted in new city and new workplace but I definitely miss my home town, friends, family and the hangout. This was the second big change of this year occurred in Q2-2012.

New family member

The third and perhaps the biggest change of the year, we were blessed with a baby girl. It’s a unique and indescribable feeling being a father and I love the time spent with my daughter especially when she is in good mood. Besides it’s difficult to overcome the situation when she cry for “difficult to discover” reasons. I honestly hope that I play a better husband and father role.

Change in Professional Life

Mobile Development

For the last 5 years, I have been working on Microsoft .NET platform both web and desktop. With new role at Telenor, there was an exciting change at workplace as well. We started developing mobile applications or rather building mobile apps eco-system in house. So I jumped in other platforms as well especially Android/Java. At the moment we are working on Web APIs, Android and iOS with my major time spent on writing code in Java. Though some percentage of my time is still spend on ASP.NET and C#. I still admire C# and VS environment.

Achievements

Fourth time awarded as Microsoft Most Valuable Professional

Really excited to get recognized by Microsoft fourth time in streak as Microsoft Most Valuable Professional.This award is given to technical community leaders who actively share their high quality, real world expertise with others. I would like to thank everyone who contributed in supporting me.

If you want to know about MVP Award and how become one, you can read one of my blog post on “How to become Microsoft Most Valuable Professional

Imagine Cup Evaluation

In April, I was honored to be invited as one of the regional judges to evaluate Imagine Cup entries. It was a great experience and I was glad to see the potential of our students. I have also published some tips for students willing to participate in global competitions such as Imagine Cup. [link]

Certification

A lot happens this year but in the end I was able to clear one recent certification published in 2012. Last Day of the year ends with earning credential of “Programming in HTML5 with JavaScript and CSS3 Specialist“. Read out why I think this area is important. [link]

My Aspirations for 2013

A Balanced Life

I truly aspire to live a balance life. Work, friends, family, learning, faith, and community all must be balanced and any aspiration in one of the area must be achieved in a balance way. By balance I mean giving right proportion of time and attention. But I am not saying that I got this and I need to work on this seriously. In past, I have spent a lot of time on technical stuff and I love it but I guess we have to consider other things along as well.

Open Source or Hobby Project

I am planning to take out some time for hobby project. There are no such concrete plans right now but with the recent hype of apps marketplace there are plenty of opportunity to come up with something of our own.

Excel in Software Engineering

In the past 5 years I have learned much in the industry but software engineering is a diversified yet evolving field with a lot of learning. Not only you have to keep up the pace to learn new technologies but also you have to learn best practices and patterns. I still believe there is a lot lot to learn and I still feel like newbie in the field. I really aspire to achieve excellence in the discipline.

That is all for now. Wish you a very best 2013.

Cheers,
Adil
P.S. What are your Aspirations?

Programming in HTML5 with JS and CSS3 Specialist

I am glad to share that yesterday, on last day of year 2012, I have passed the exam “70-480 Programming in HTML5 with JavaScript and CSS3” and therefore earned credential of Programming in HTML5 with JavaScript and CSS3 Specialist.
Why this certification?

I think over the time web platform has evolve remarkably plus HTML/JavaScript are no more limited to web browsers. HTML5 is now not only used to developed modern responsive web apps but they are also used to developed apps on other platform such as mobile apps or windows store apps, PhoneGap is one great example. Similarly, JavaScript is not only limited to client side scripting as developers are utilizing it as a server side scripting language as well,  Nodejs is one such example.
A decade back HTML/CSS was mostly a designer thing but now its inevitable for programmers to get into it. So I thought that it’s a good time to gear up on this area as well.
Further in context of bigger picture, this exam (along with another exam) would lead to upgrade of my previous credential as “Microsoft  Certified Professional Developer (MCPD) .NET Framework 4” to “Microsoft Certified Solution Developer (MCSD) on .NET 4.5”
Preparation tips

I highly recommend a great video series on channel 9, “Developing HTML5 Apps Jump Start” and doing some hands on jQuery and new HTML5 APIs by developing a sample project. Otherwise exam is not very difficult for people having background working on CSS and jQuery.
Hope this helps. Happy Learning!