Top Visual Studio Extensions Jan 18, 2012 MICROSOFT   UTIS   VISUAL STUDIO

Visual Studio Extensions

Visual Studio comes up with loads of stuff making everyday life of a developer easy. But there are few extensions which Microsoft and other developers have created and are available for free to the community members. I have compiled a list of free and powerful extensions which will take your programming experience few more steps ahead with Visual Studio.

NuGet Package Manager

You should have a very good reason if you are not using this or if you are not aware what NuGet is. NuGet is a free, open source developer focused package management system for the .NET platform intent on simplifying the process of incorporating third party libraries into a .NET application during development.

Visual Studio Achievement Extension

Get noticed, earn achievements while you write code. An awesome extension from Microsoft for programmers to get them in light while they right code. Bring on the game to the code!!

Productivity Power Tools

A powerfull extension from Microsoft with tons of features to make your work a lot easier. A MUST HAVE for every developer.

VSCommands 2010

VSCommands provides code navigation and generation improvements which will make your everyday coding tasks blazing fast and, together with tens of essential IDE enhancements, it will take your productivity to another level.

PowerCommands For Visual Studio 2010

PowerCommands 10.0 is a set of useful extensions for the Visual Studio 2010 adding additional functionality to various areas of the IDE.

Web Essentials

You must have witnessed most of the features provided by this extension in VS 2011 Developer Preview. For Visual Studio 2010, you can make use of these features with this extensions.

JSEnhancements

This extension provides outlining and matching braces highlighting features for Visual Studio JavaScript and CSS editor. Works both in JS/CSS files and HTML script/style blocks. Outlining is like in C# editor. It outlines {}s, []s and #region tags.

DevColor

Microsoft has now introduced feature in Visual Studio 2011 Developer Preview, it is a color picker stuff in the CSS window for the ease of the developers so they don’t have to remember the color codes. But for Visual Studio 2010 developers this is an excellent extension that gives you a similar flexibilty.

CSSCop - FxCop for Stylesheets

We use FxCop to follow beat coding practices, but we neglect when we work with CSS. CSSCop makes it easy to adhere to best practices for writing stylesheets. It catches common errors that affect browser compatibility and much more. You can think of it as FxCop for stylesheets.

FxCop Integrator

If you are analysing your code using FxCop, then get the FxCop extension for Visual Studio. FxCop is also available if you are using VS 11 Developer Preview.

Image Optimizer

Adds a right-click menu to any folder and image in Solution Explorer that let’s you automatically optimize all PNG, GIF and JPEG files in that folder. The optimization doesn’t affect the quality of the images, but optimizes them using industry proven algorithms for removing EXIF and other metadata.

Code Compare

Code Compare is a powerful file and folder comparison tool that demonstrates new level of code comparison.

Spell Checker

The next time you comment on your code or someone else code, be sure that you are using the correct spellings. Plain text files, source code comments and strings and thing that are not HTML/ASP tags are spell checked.

GhostDOC

A great extension which will automatically generates XML documentation comments for methods and properties based on their type, parameters, name and other contectual information.

Numbered Bookmarks

Creating bookmarks in Visual Studio and then remembering them is a tough task when you have thousands lines of code. Numbered Bookmarks allows users to create and recall bookmarks by using numbers. User can create 10 bookmarks (starting from 0 to 9). User can add or navigate to the particular bookmark by using the same shortcut key.

Snippet Designer

The Snippet Designer is an open source plugin which enhances the Visual Studio IDE to allow a richer and more productive code snippet experience.

For the moment, this is it, but I will update the list once I get to know more excellent extensions. Are you aware of any other extensions you think is really cool and excellent, then please do share with me/us.

HTML 5: Show Your Support / Tell The World Dec 3, 2011 WEB

HTML5 Logo

If you really love working with HTML5 the this is then time to show some support for HTML5. Use the HTML5 badge builder to create a badge and use it on your blog/website to show your support. The badge builder allows you to customize the badge with tech you use with HTML5. You can see the badge I customized with the tech under badge section on the right.

HTML5 love

The w3.org site for HTML5 has to offer more than just a badge. You can download HTML5 Logos, stickers, T-shirts, jacket, grey hoodie and beanie to show your love or I must say more precisely show off your HTML5 love. The HTML5 T-shirts are awesome and worth buying if you want to show off. Take a look at HTML5 Logo T-Shirts and buy one if you really like HTML5 and yes if you want to show off and make other jealous.

Get Song Lyrics From LYRDB With ASP.NET MVC And JQuery Nov 26, 2011 API   ASP.NET MVC

Most of the times I have seen people looking for song lyrics on online MP3 or lyrics database sites. Few of them provide API to fetch lyrics which is good for developers. Last.fm has a powerful API but they don’t provide any API call to fetch lyrics. The two most popular APIs on the web that I am aware of is WikiLyrics, LyricsDB (popularly known as LyrDB), there is another API from ChartLyrics but I don’t find it as useful as the other two APIs. The WikiLyrics API works beautifully, but it has one drawback the lyrics fetched from the service is incomplete. I wrote a complete desktop application to fetch lyrics, album art, artist image, album name and album release date but never made it available to download for public. I am planning to release it to general users. But till then you can take a look at this simple little app which I created in my spare time to fetch lyrics from LyrDB. This little simple application is in ASP.NET MVC. I am not a designer so I will take advantage of the default design. In the home controller I have a simple method named GetLyrics which accepts two parameters Artist Name and Song Name. The method returns results in JSON as it will be good for me to parse the results in JQuery. Take a look at the code:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult GetLyrics(string ArtistName, string SongName)
{
          string response = string.Empty;
          string LyrURL = string.Empty;
          string url = "http://webservices.lyrdb.com/lookup.php?q=" + ArtistName + "|" + SongName + "&for=match";
          WebResponse wResp = (WebRequest.Create(url) as HttpWebRequest).GetResponse();
          using (StreamReader sReader = new StreamReader(wResp.GetResponseStream()))
          {
              response = sReader.ReadToEnd();
          }
          if (response == "")
          {
              response = "No Lyrics found on LyrDB for " + SongName + " by " + ArtistName;
              goto Output;
          }
 
          string[] lyrID = response.Split('\\');
 
          response = "";
 
          LyrURL = "http://webservices.lyrdb.com/getlyr.php?q=" + lyrID[0]+"&callback=?";
 
          Output:
 
          return Json(new
          {
              success = true,
              Lyrics = LyrURL
          });
}

The above code does not return the lyrics but the URL to get the lyrics. I am a big Jquery fan and as usual I will be using it here to make an AJAX call and load an IFRAME with the lyrics URL.

$(document).ready(function () {
        $("#btnSearch").click(function () {
            $("#btnSearch").attr('disabled', true);
            $("#lyrics").addClass("loading");
            $("#LyrFrame").attr('src', '');
            var Artist = $("#txtArtistName").val();
            var Song = $("#txtSongName").val();
            var url = "/Home/GetLyrics?ArtistName=" + Artist + "&SongName=" + Song;
            $.ajax({
                url: url,
                type: "POST",
                dataType: "json",
                data: "{'ArtistName': " + Artist + ",'SongName': " + Song + "}",
                success: function (data) {
                    $("#lyrics").html("");
                    $("#btnSearch").attr('disabled', false);
                    $("#lyrics").removeClass("loading");
                }
            });
 
        });
});

The URL in the above script calls GetLyrics method which is inside Home Controller takes artist and song name as query string. On the success of the call the IFRAME gets loaded with the lyrics URL. The output will look something like this:

LyrDB app in action

You can download the application source code from the below link, but I want to tell you that it will not fetch each and every song lyrics for you. It’s a database and it can provide us only information it has. But the desktop application I am will release in future will check around 2 lyrics API at least and I believe that my application guarantees 100% result. So follow my upcoming posts.

Download: LyrDBApp.zip (886.46 kb)

Related Links:

Upload and Show Image Without Post Back With Jquery Sep 11, 2011 ASP.NET   ASP.NET MVC   JQUERY   WEB

Previously in a lot of hurry I wrote a post on how to upload files in MVC3 with the help of Uploadify, a famous jQuery plugin to upload files. If you have not heard about it yet, then it is time for you to check and find out what this plugin can do for you. Appending my last post about this plugin (which was not very well written) I tried one more thing with it today. This time I am trying to upload an image and then show it inside a DIV without a post back. If you have the source code from the previous post, then it will be good as you need not to start from the scratch.

I assume that you are a good designer as I am not. I am saying this because I really got a blank head in designing. Therefore it is up to you how you are going to show off the images on the page, I am just telling you a way to do that. I am using MVC3 for this example but it will work for both web forms and MVC. The only difference in MVC and web forms is in the server side code which is responsible to upload the file. If you are using MVC3 then your method to upload the file in the controller will be something like this:

public string Upload(HttpPostedFileBase fileData)
{
        var fileName = this.Server.MapPath("~/uploads/" + System.IO.Path.GetFileName(fileData.FileName));
        fileData.SaveAs(fileName);
        return "OK";
}

As we are using Uploadify, we now have to make changes in some of the parameters of the plugin. The Upload method is inside home controller, so the script parameter of the plugin will be /Home/Upload. For my convenience I have changed the multi and auto parameter to false and true respectively. By now this is the jQuery code I have:


In the end I append one more parameter onComplete which gets fired when the plugin finish uploading the file. To get the uploaded path of the image I am using fileObj.filePath and response to check if the file has been uploaded successfully or not. If the response I received after the uploading of the file is completed is ok then I will set the html to show the image in another DIV. Below is the complete configuration of the plugin.


ASP.NET app to upload the image

Just to demonstrate I have placed an alert message box with the response which got fired on the onComplete event after the image has been uploaded successfully. After this I have created a html string which is actually a html img tag with src and alt tags. I have then set the same html string to another DIV which acts as a holder of the image being uploaded. Here is an output after the image is uploaded. Just to remind you, it is all done without post back.

Image displayed without postback

This is it, try it yourself and I recommend you to check out the documentation of the plugin I used. Check out the other links below and one more thing that I would like you to do is to set the multi property of the plugin to true and the try uploading multiple images. If you end up making something awesome then do share with me/us.

Related Links:

Integrate DISQUS For Comment Management In MVC Sep 3, 2011 API   ASP.NET MVC

I have been working on a MVC project which I will be using to save and manage all my code snippets. I get this plan in my head when my 160GB of HDD got crashed which holds most of my work and code. I started writing the web application in web forms and almost got it completed, but eventually changed my mind and started writing the application from scratch in MVC 3 with Razor view engine.

As I will be making this application online, I am sure to receive some comments when I share my code with others. To know what people thing about the code I published, I must have a commenting system for my application to know what people think. Instead of writing my own comment mechanism I would rather want to go with DISQUS commenting system. For my blog I am not using DISQUS, but for this application I will use DISQUS as it will save my time and is also a reliable way to manage comments.

Working with MVC is fun and even more when you are working with helper classes. Read my blog post on Working with Microsoft Web Helpers in ASP.NET to know more about helper classes and their features and how they can save your time in developing applications. I am going to show you how you can integrate DISQUS commenting system in your MVC application with ease. To get started, register a DISQUS account.

Create a new MVC project in Visual Studio and without any delay go to NuGet console and type in the below command to add the DISQUS helper class.

DISQUS Nuget package command

The DISQUS helper class has 2 methods which we will be going to use.

  • Initialize: This method will help us to initialize the commenting system. It accepts your short forum name as a parameter which you have created at the time of creating your account at DISQUS.
  • ShowComments: This method accepts the name of the page.

To initialize DISQUS, we need to set the Initialize method in _ViewStart.cshtml file. You can find this file under Views folder. Make sure that this is a first line in the file as we have to initialize before the layout of the page gets rendered.

@{
    Disqus.Initialize("shortforumname");
 }

Now as we have initialized, we can show the comments on the page. To show the comments on the page we will use the ShowComments method and pass the page name in the parameter. Just to be more precise about this parameter, I would like to point out that on a forum, blog or on a website every page has a unique name or forum post id or blog post and the parameter that we are going to pass to this method should also be the same unique post id or page name.

@Disqus.ShowComments(pageIdentifier: "post123")

This will render the DISQUS comments as shown below:

DISQUS comments widget render

Someone will now make a comment here and move to another page and then make another comment. The only way DISQUS has to identify the comments on the basis of the PageIdentifier parameter in the ShowComments method. When some other user requests the same page again from a different geographical location, the DISQUS will check the PageIdentifier and then load the related comments.

I hope this post gives you an overview on how you can integrate DISQUS commenting system on you site in MVC.