Productivity Power Tools 2012

 

The Visual Studio Engineering Team has released the productivity power tools for Visual Studio 2012.

http://blogs.msdn.com/b/visualstudio/archive/2012/11/07/productivity-power-tools-2012.aspx

Here are the details from their site:

By popular request, the new version of the Productivity Power Tools has arrived for Visual Studio 2012! These tools are the fruit of a few passionate engineers on the Visual Studio team that love sharing the power of Visual Studio with customers.

The Productivity Power Tools are one of the top gallery extensions for Visual Studio 2010. With your feedback, some of the features made it into Visual Studio 2012 including Quick Find, Solution Explorer (nee Navigator), Quick Launch, and the new Add Reference dialog.

The new edition enables the rest of the tools for Visual Studio 2012 and adds some new ones. In this post, we’d like to tell you about what is included in this power-packed release, a refresher for those of you that used the 2010 version and an introduction to those of you that haven’t! We’d love to hear what you think about these tools, please send us your feedback on the pack’s Gallery Page.

Previously Available Tools

Many of the tools included in the 2010 version of the Productivity Power Tools are available in this version as well. Here is a summary:

• Enhanced Scrollbar provides a source map of your file in the scroll bar that allow you to easily see interesting artifacts such as edits, breakpoints, bookmarks, errors and warnings and make it easy to navigate between them.
• Fix Mixed Tabs will warn you when you open or save a file that has a mixture of tabs & spaces and offers to fix it for you.
• Automatic Brace Completion will automatically insert the closing code construct when the opening construct is typed for VB & C#.
• Move Line Up/Down Commands easily moves the current line of code (or selected multiple lines) up or down using the Alt+Up Arrow & Alt+Down Arrow keys.
• Organize VB Imports, that can be found in the context menu, allows you to sort the imports logically and remove the ones that aren’t being used.
• Colorized Parameter Help adds syntax highlighting to the contents of the Parameter Help window for C# & VB.
• Column Guides allows you to draw a vertical line in the code editor from the context menu.
• Align Assignments makes your code more readable by aligning assignment statements when you type Ctrl+Alt+].
• Middle Click Scrolling Press down on your mouse scroll wheel and move the mouse to quickly scroll through your document.
• Ctrl + Click Go To Definition makes symbols in your code look like hyperlinks when you hold down the Ctrl key, and will navigate to their definition when you click the hyperlink.
• HTML Copy means copy/cut in the editor is saved in HTML format in your clipboard for rich pasting.
• Control via Tools Options means you are in control of which of these extensions you want on/off.

We received positive feedback on the extended capabilities of the Document Tab Well in the last Power Tools release. Some of the capabilities – such as floating document wells and pinned tabs – made it into Visual Studio 2012 and the rest are available in this new version. We rewrote most of this extension as the area underwent significant changes in Visual Studio 2012. The 2012 pack offers favorites like custom colorized tabs, custom tab locations and a moveable close document button:

You can control and customize which capabilities you want to use through the Tab Well’s tools/options page.

New in this Release

We have three additions to the Productivity Power Tools family. Color Printing from the editor and Power Commands for Visual Studio both shipped as separate extensions for Visual Studio 2010 and were very popular, so we added them to the pack. The Power Commands extension includes many useful commands, such as Clear All Output Panes, Email a Snippet of Code and Edit Project Files. For the full list, please visit our Gallery Page.

We created a brand new extension, Quick Tasks, that uses Quick Launch to instantly perform common tasks. We identified a number of popular tasks in Visual Studio, such as collapsing and expanding regions, toggling line numbers and changing font size and made them available in the Quick Launch window when typing “@tasks“ as a prefix. The drop down list will show all the available tasks, and typing any letters in the task name will further filter the list for quicker location of the desired task. Here’s a quick screenshot:

SignalR: Awesome Real-Time with .NET – Part 2

Welcome to part two of the series SignalR: Awesome Real-Time with .NET.

Part 1 – SignalR: Awesome Real-Time with .NET
Part 2 – SignalR: Awesome Real-Time with .NET – Part 2

For this post, we will start where we left off from part one. If you don’t want to follow part one and create the solution, project, code, etc, you can get the source on GitHub.

Step 1 – Specifying the route for the Hub

Because Hubs are at a higher level than PersistentConnections, there is no need to manually set the route for the Hub. Some of the magic I talked about before does this for us automatically by creating the route /SignalR. To change the route for the Hub you need to register the route in the Global.asax file and update any client side references to the Hub.

Update Global.asax to change the route to /SignalR2

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Routing;
using SignalR;

namespace SignalRTutorial
{
    // Note: For instructions on enabling IIS6 or IIS7 classic mode, 
    // visit http://go.microsoft.com/?LinkId=9394801
    public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            RouteTable.Routes.MapHubs("~/SignalR2");

            AreaRegistration.RegisterAllAreas();

            WebApiConfig.Register(GlobalConfiguration.Configuration);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
        }
    }
}

Update your client side code in Index.cshtml to use the new route

<script src="/SignalR2/Hubs"></script>

Step 2 – Specifying the name of the Hub

Another thing that is done automatically is the name of the Hub itself. By default, the name we use client side to reference the Hub is the same as the Type of the Hub. In our code, this is TagHub which we reference with

$.connection.tagHub;

If we want to change it to something else, we only have to decorate our TagHub class with the HubName attribute.

Decorate the TagHub class in TagHub.cs with the HubName attribute using tagHub as our name.

[HubName("ourTagHub")]
public class TagHub : Hub

Because we changed the name of our Hub, we also need to update our reference to this Hub client side.

Update your client side code in Index.cshtml to reference the new Hub name

var tagHub = $.connection.ourTagHub;

Step 3 – Detecting connects and reconnects

It is pretty straightforward to detect connects and reconnects in your Hub. All you have to do is implement IConnected on your Hub. There are two functions that need to be implemented, Connect and Reconnect. Update your TagHub class by implementing IConnected.

using System.Collections.Generic;
using System.Threading.Tasks;
using SignalR.Hubs;

namespace SignalRTutorial.Hubs
{
    [HubName("ourTagHub")]
    public class TagHub : Hub, IConnected
    {
        static List _tags = new List();

        static TagHub()
        {
            _tags.Add("c#");
            _tags.Add(".NET");
            _tags.Add("SignalR");
        }

        public void getTags()
        {
            //Call the initTags method on the calling client
            Caller.initTags(_tags);
        }

        public void setTag(string tag)
        {
            //Add the new tag to the list of tags
            _tags.Add(tag);

            //Call the addTag method on all connected clients
            Clients.addTag(tag);
        }

        public Task Connect()
        {
            return Clients.joined(Context.ConnectionId);
        }

        public Task Reconnect(IEnumerable groups)
        {
            return Clients.rejoined(Context.ConnectionId);
        }
    }
}

As you can see, the Connect and Reconnect methods are making calls to all of our connected clients. Before we implement the client side code to support these calls, I want to point out Context.ConnectionId. Context.ConnectionId is the unique id assigned to the current connection and caller. The Caller property we used before to access the caller is the same thing as Clients[Context.ConnectionId]. The Context.ConnectionId is something that can be stored and used to access connections later.

Here is the client side code needed to support the two new calls being made by our Hub. First add the following markup as the first element inside the <body> tag.

<div style="float: right">
    <ul id="connections"></ul>
</div>

Next add these two methods just below the tagHub.addTag method.

tagHub.joined = function (connectionId) {
    $('#connections').append('<li>Connect: ' + connectionId + '</li>');
}

tagHub.rejoined = function (connectionId) {
    $('#connections').append('<li>Reconnect: ' + connectionId + '</li>');
}

Step 4 – Detecting disconnects

Detecting disconnects is very similar to how we detected connects. This time we need to implement IDisconnect on our Hub and the method Disconnect.

First implement IDisconnect on your TagHub class and then add the following method.

public class TagHub : Hub, IConnected, IDisconnect
{

    public Task Disconnect()
    {
        return Clients.leave(Context.ConnectionId);
    }

}

Next you will need to update the client side code and add the following method.

tagHub.leave = function (connectionId) {
    $('#connections').append('<li>Disconnect: ' + connectionId + '</li>');
}

Step 5 – State between client and server

It is very easy to  maintain state between the client and server. Any state sent by the client can be accessed by the server Hub via the Caller property. The server Hub can also set state that will be accessible by the client by setting any property on Caller. In our application you would do this by setting any property you want client side on the tagHub variable such as tagHub.name = ‘scott’;. You would then be able to access this server side in our Hub with Caller.name. You can also create a new property server side by using the  Caller property doing something like Caller.isCool = ‘true’;.

Step 6 – Broadcasting over a Hub outside of a Hub

There may be cases where you want to broadcast over a Hub from outside of the Hub itself. One example would be an action on a controller you want to be able to broadcast to all connected clients when it is called.

Update the HomeController with the following code.

using SignalR;
using SignalRTutorial.Hubs;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace SignalRTutorial.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }

        public void Notify()
        {
            var context = GlobalHost.ConnectionManager.GetHubContext<TagHub>();
            context.Clients.addTag("notify called");
        }
    }
}

The newly created Notify action on the Home controller gets the context to our TagHub. With this context we can now make calls to the clients via the Caller or Clients property.

Conclusion

That is it for now! Stayed tuned for part 3.

The final source code can be found GitHub.

Further reading

SignalR official documentation

ASP.NET MVC, SignalR and Knockout…

signalr tutorial with knockoutjs

Testing SignalR Connections with NUnit

Chocolatey NuGet

 

Chocolatey NuGet?!

From the site:

Let’s get Chocolatey!
Chocolatey NuGet is a Machine Package Manager, somewhat like apt-get, but built with Windows in mind.

Easy Install!
To install chocolatey now, open a command prompt and paste some text

To install simply paste the following into a command prompt:

@powershell -NoProfile -ExecutionPolicy unrestricted -Command “iex ((new-object net.webclient).DownloadString(‘http://bit.ly/psChocInstall&#8217;))” && SET PATH=%PATH%;%systemdrive%\chocolatey\bin

Don’t feel comfortable running commands you found on some random blog? I don’t blame you. Head over to their site to learn more about Chocolatey NuGet.

SignalR: Awesome Real-Time with .NET

 

Welcome to part one of the series SignalR: Awesome Real-Time with .NET

Part 1 – SignalR: Awesome Real-Time with .NET
Part 2 – SignalR: Awesome Real-Time with .NET – Part 2

What is SignalR?

SignalR is an async signaling library for .NET to help build real-time, multi-user interactive web applications

Or…

A real cool .NET framework hosted in ASP.NET and a JavaScript library (on the client side that helps build collaborative web apps quickly and painlessly. It is open source and freely available on GitHub.

And…

It doesn’t have to be hosted in ASP.NET. It can also be hosted using OWIN (Open Web Interface for .NET) or self host (console, windows service, azure, etc.).

A JavaScript library isn’t the only client side implementation as well. As of today, there are jQuery, Native .NET, WP7, iOS, Silverlight, WinRT, and Android (via Mono) implementations.

What does it solve?

Pushing data from the server to the client (not just browser clients) has always been a tough problem. SignalR makes it dead easy and handles all the heavy lifting for you.

SignalR abstracts the raw technique of keeping connections open between a client and a server. SignalR uses a fallback mechanism to connect the browser to the server. After an initial negotiation request the following transports are tried in order until a successful connection can be made: WebSockets, Server Sent Events (EventSource), Forever Frame, or Ajax long polling.

Implementations

There are two choices when developing with SignalR, PersistentConnections and Hubs.

PersistentConnections – A PersistentConnection is the base class that has an api for exposing a SignalR service over http.

Hubs – Hubs provide a higher level RPC framework over a PersistentConnection. If you have different types of messages that you want to send between server and client then hubs is recommended so you don’t have to do your own dispatching.

For this article and tutorial, we will be focusing on Hubs.

Time to Code

For this tutorial, we will be using Visual Studio 2012 with ASP.NET MVC 4.

Step 1 – Create an empty ASP.NET MVC 4 web application

File -> New Project -> Web -> ASP.NET MVC 4 Web Application. Call your project anything you like. I used SignalRTutorial .

Step 2 – Add the SignalR package via NuGet

Right click on the newly created project (in my case it is called SignalRTutorial) and click Manage NuGet Packages. Search online for SignalR and click install for the package named SignalR. It will automatically add all needed dependencies for you.

Step 3 – Create the Home Controller

Right click on the folder labeled Controllers and select Add -> Controller. Name it HomeController and make sure the “Empty MVC controller” template is selected.

Step 4 – Create the Index view for the Home Controller

In the newly created HomeController.cs class, right click the Index method and select “Add View”. Be sure to uncheck “Use a layout or master page” but leave everything else alone.

Step 5 – Make sure everything is working

Take a moment to make sure your project builds and run it using Ctrl-F5. You should see the web page open with nothing on the page. This is a good thing.

Step 6 – Create a simple SignalR Hub

Create a folder in your MVC 4 project called Hubs. This is just for organization and clarity. You are not required to have your hubs inside a folder called Hubs.

Create a class called TagHub inside the Hubs folder. Make sure to have your class inherit from SignalR.Hubs.Hub. This will allow SignalR to work its magic.

using System.Collections.Generic;
using SignalR.Hubs;

namespace SignalRTutorial.Hubs
{
    public class TagHub : Hub
    {
        static List _tags = new List();

        static TagHub()
        {
            _tags.Add("c#");
            _tags.Add(".NET");
            _tags.Add("SignalR");
        }

        public void getTags()
        {
            //Call the initTags method on the calling client
            Caller.initTags(_tags);
        }
    }
}

Step 7 – Update your Index view for the Home Controller

Open Index.cshtml that was created earlier and modify it to the following code.

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.6.4.js"></script>
    <script src="~/Scripts/jquery.signalR-0.5.3.js"></script>
    <script src="/SignalR/Hubs"></script>
</head>
<body>
    <ul id="tags"></ul>

    <script type="text/javascript">
        $(function () {
            var tagHub = $.connection.tagHub;

            tagHub.initTags = function (tags) {
                $.each(tags, function (index, value) {
                    $('#tags').append('<li>' + value + '</li>');
                });
            };

            $.connection.hub.start()
                .done(function () {
                    tagHub.getTags();
                })
                .fail(function () {
                    alert("Could not Connect!");
                });
        });
    </script>
</body>
</html>

Step 8 – Run the project and see what happens

So what exactly is going on here?

The Caller property in our Hub is provided by SignalR as part of the Hub class definition. This is a  dynamic object that you can use to invoke a client side method written in JavaScript on the connection making the call to getTags. SignalR does the plumbing using web sockets, long polling, or what ever, and we don’t care. SignalR also generates a client side proxy hub to invoke methods in our TagHub. For example, using the client side proxy hub our client invokes the getTags method in the above Hub during initialization, the client invoking the getTags method (Caller) will get a callback to it’s initTags JavaScript method, with all the existing tags.

So the order of events are:

1. Page loads
2. Client side
   1. var tagHub = $.connection.tagHub;
      1. Generates a client side proxy hub to our TagHub object
   2. $.connection.hub.start();
      1. Starts our connection to the hubs
   3. tagHub.getTags();
      1. Calls the getTags() method on the server side TabHub object
3. Server side
   1. Caller.initTags(_tags);
      1. Calls the initTags(tags) method on the client side

Step 9 – Supporting Clients on our Hub

We will now add support to our Tag web application to allow adding new tags. The one thing we want though is for all connected clients to have their list of tags updated when new ones are added.

Add the following method to your TagHub class:

public void setTag(string tag)
{
    //Add the new tag to the list of tags
    _tags.Add(tag);

    //Call the addTag method on all connected clients
    Clients.addTag(tag);
}

Add the following HTML just above the unordered list showing the list of tags:

<div>
    <input id="newTagText" type="text" placeholder="Enter a new tag" />
    <input id="newTagSubmit" type="submit" value="Add new tag" />
</div>

Finally add the following methods to your JavaScript:

tagHub.addTag = function (tag) {
    $('#tags').append('<li>' + tag + '</li>');
};

$('#newTagSubmit').click(function () {
    var tag = $('#newTagText').attr('value');
    tagHub.setTag(tag);
});

Step 10 – Run the project again, open the page in more than one window, and add tags

So what exactly is going on here?

The Clients property in our Hub is provided by SignalR as part of the Hub class definition. This is a  dynamic object that you can use to invoke a client side method written in JavaScript on all connected clients. Using the client side proxy hub our client invokes the setTags method in the TagHub, all connected clients will get a callback to it’s addTags JavaScript method, with the new tag.

So the order of events are:

1. Page loads
2. Client side
   1. var tagHub = $.connection.tagHub;
      1. Generates a client side proxy hub to our TagHub object
   2. $.connection.hub.start();
      1. Starts our connection to the hubs
   3. tagHub.setTag(tag);
      1. Calls the setTag() method on the server side TagHub object
3. Server side
   1. Clients.addTag(tag);
      1. Calls the addTags(tag) method on all connected clients (client side)

Conclusion

That is it for now! With very little code, effort, and complexity we were able to implement a collaborative web application.

The final source code can be found GitHub.

Further reading

SignalR official documentation

ASP.NET MVC, SignalR and Knockout…

signalr tutorial with knockoutjs

Testing SignalR Connections with NUnit

localtunnel

 

Ever wanted to share your localhost web server to the world? How about testing your localhost web server easily from mobile or other devices?

If so, then you should check out localtunnel.

Localtunnel allows you to easily share your localhost web server to the rest of the world.

IntroToRx.com

http://introtorx.com/

IntroToRx.com is the online resource for getting started with the Reactive Extensions to .Net. Originally starting life as a blog series, it has now flourished into an online book. You can read it online via the website, or get a copy of the Kindle edition for reading offline.

A Visual Git Reference

I just stumbled upon this helpful nugget of visualization. The page provides a visual reference of the most command git commands.

http://marklodato.github.com/visual-git-guide/index-en.html

Zen Coding

Never write HTML again!

Ok, so you might still need to write HTML, but Zen Coding provides an amazingly simplistic syntax for generating HTML. Take the following HTML for example:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <div id="container">
    <div id="nav">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
</body>
</html>

It is simple and straightforward but why type it out by hand if you don’t have to. With Zen Coding you don’t! The followng will generate the HTML shown above:

html:5>div#container>div#nav>ul>li*5

The Zen Coding concept is beautifully simple: You declare a series of nested HTML or XML elements using an intuitive and expressive inline syntax, and the plugin generates the markup for you.

There are addons to many IDEs, tools, and editors for Zen Coding including Visual Studio, Sublime Text 2, Coda, …

Learn more here: https://github.com/sergeche/zen-coding

Tinkerbin

Tinkerbin lets you play around with HTML, JavaScript and CSS without creating files or uploading to servers.

It also supports CoffeeScript, Sass (with Compass), Less, HAML, and more.

Try it here:

http://tinkerbin.com/

Try F#

The goal of the Try F# site and application is to make it simple, fast, and easy for people to try out the F# language.

Check it out here:

http://www.tryfsharp.org/Tutorials.aspx