Wednesday, February 25, 2015

Useful Visual Studio shortcuts, tips and tricks from the trenches

Visual Studio is a beast of an IDE with plenty of gems of functionality hidden away possibly never to be found in your day-to-day work. Below are some handy shortcuts which I use and tips / tricks I have picked up along the way to help get the most out of using Visual Studio.

Please note, not all of these will work in versions of Visual Studio prior to Visual Studio 2013.

Keyboard Shortcuts:
Ctrl + [ + S - Highlights the file you are viewing in the Solution Explorer. 
Alternatively type “track” into the Quick launch (Ctrl + Q) bar and you can enable a setting that will automatically track the file you are viewing in the Solution Explorer.

Ctrl + K + C – Comments the selected text.

Ctrl + K + U – Un-comments the selected text.

Alt + [UP] – Moves the highlighted text up a line (great for refactoring and moving code around).

Alt + [DOWN] – Moves the highlighted text down a line.

Alt + [LEFT] – Displays the Intellisense selector.

Shift + Delete – Deletes the current line (handy when clearing out unnecessary white space).

Ctrl + Alt + L – Moves the focus to the Solution Explorer (Allows you to navigate around the solution explorer without having to use the mouse).

Ctrl + G – Go to line number.

(Ctrl + R) + (Ctrl + R) or F2 – Rename (Very useful when renaming methods / variables).

Ctrl R, M – Extract Method.

(Cursor within Implemented Interface declaration) Ctrl + . – Displays the implement interface context menu.

(Cursor within out of scope item due to missing using statement) Ctrl + .  – Displays the using statement import / generate class context menu.

(Cursor is beside a brace { or }) Ctrl + ] – Toggles between opening and closing braces (Use in conjunction with the shift key to highlight everything within a particular braced scope.

(Cursor is in the middle of a line) Ctrl + Enter – New line above the current line.

(Cursor is in the middle of a line) Ctrl + Shift + Enter – New line below the current line.

Ctrl + , - Navigate to a file. Type the filename in and Visual Studio will locate file names which match what you are typing. Easy way to locate files in a project. You can use the pascal casing trick demonstrated in Intellisense – Pascal Casing below.

Alt + F12 – Peek. The equivalent of Go to Definition (F12) but within your current tab.
(Whilst in peek window) Ctrl Alt – and Ctrl Alt + - Cycle through peek tabs.

Display all thrown exceptions (handy for locating swallowed exceptions):
By default, Visual Studio will only prompt when an exception is “User-unhandled”. Sometimes it is necessary to be alerted whenever an exception is thrown regardless if it’s being handled or not (just in case it’s being swallowed or you are interested in the specific location that the exception is being thrown from).

The Exceptions (Debug > Exceptions… or Ctrl + D, E) dialog can help here.

Specify which exceptions you want to be notified of whenever an exception is thrown by checking the corresponding “Thrown” check box and you are ready to go.

Scroll bar – Map Mode:
If you have a wide screen monitor and want to maximize the use of that white space real estate usually located in the centre of the screen, try enabling map mode for the vertical scroll bar.
Right click on the vertical scroll bar and select “Scroll Bar Options…”. In the Behaviors section, select the “Use map mode for vertical scroll bar” radio button and configure if you would like a preview tool tip plus the width of source overview.

When configured you will have a nice source map with optional preview tool tip at your disposal.

Intellisense – Pascal Casing:
You do not need to type the full name for Intellisense to find the item you are after. For example, for Console.WriteLine, Console.WL is all you need.

Special thanks go out to Tarek Madkour for his Tech Ed talk on Visual Studio IDE Tips and Tricks as a number of these came from there.

Wednesday, February 18, 2015

Pluralsight - Building End-to-End Multi-Client Service Oriented Applications

It took me a long time to decide to watch Pluralsight's Building End-to-End Multi-Client Service Oriented Applications course by Miguel Castro. At 11 hours and 43 minutes in length, it was going to be no meager undertaking and compared to all the other courses I had taken from the Pluralsight library, this one was going to be by far the longest. Once I start something, it's very important to me to finish it so I wanted to be sure that this was not going to end up being a struggle just to reach the finish line. I had watched a couple of sessions that Miguel had given at various conferences and found the content to be both well thought out and well presented. I assumed that this would be the case for this course, which aided my decision. I was also looking for a way to further develop my understanding of SOA and given the depth of this course, it certainly looked like it would be able to help me achieve that.

The course starts with a demonstration of the application you will be creating, followed by an introduction to SOA and then an explanation of the application's architecture. I like how Miguel did not waste any time here and with less than an hour on the clock, he was diving into writing code. He starts with defining the entities (both for the client and server sides of the wire) and then moves on to using Entity Framework to craft the data access layer. Following this he tackles the business layer, where you learn about how he creates services and "business engines". The next two modules are focused on service hosting and client access, with the final part of the course spent creating both an ASP.NET MVC website and a WPF desktop application. I did not watch the modules on developing the WPF application as my primary focus for this course was related to web application development.

The exercise files were a highlight of the course and it is clear that a lot of time was spent on them. I really like how Miguel has created a "starter" and "complete" version for each of the modules. I would start with the starter version and code along with the course, only using the complete version as a reference. The most useful part for me was that once a module was complete, I could begin the next one with the next starter version. By using a "clean slate" that is in perfect condition at the start of each module, I didn't encounter any "what went wrong?" moments that you normally experience when you are using your own copy throughout a course. Another benefit of this was that it allowed Miguel to cram even more value into the course by only having to teach the pattern and not having to implement it over and over. Once he had demonstrated it, I had the opportunity to either complete the implementation with the starter version, refer to the complete version to check my understanding, or move onto the next module and use that module's starter version. The ability to be able to choose what and how much I wanted to code was really beneficial in helping me stay committed to the course.

Many important concepts are introduced throughout the course, but the one that resonated the most with me was how a well-designed application can re-use the same pattern in multiple places. Miguel’s example of this was his use of abstract factories serve to the data repositories in the data layer and the business engines in the business layer. Using the same pattern increases readability by adding a common structure to the application that anyone maintaining the code base can rely on. Once the pattern is understood, you will now have an understanding of what is happening wherever the pattern is used. This is one of the major benefits of using patterns.

Another highlight for me was the MVVM pattern with Knockout.js. Having already used Angular.js for multiple applications, I was familiar with the SPA concept, however, I had very little experience with the MVVM pattern and Knockout.js. By the end of the website modules, I was able to go back to a feature that had been written using only jQuery and re-write it to use Knockout.js with a completely segregated view model, view and model. It was very rewarding to see an immediate return from watching this course.

In total, I probably spent somewhere in the region of 25 hours watching and coding along with this course. I am already planning to watch the course again where I aim to build a bare bones version which I can use as a starter template for future applications. If you are looking to learn about how to build real world applications from the ground up using Service Oriented Architecture, then this Pluralsight course is a must watch and will be more than worth the investment of your time!

Oh and I’m looking forward to part two of this course! Although, I did notice that any mention of this has been removed in the Angular edition, unfortunately.

Wednesday, February 4, 2015

My First Open Source Contribution!

I have been wanting to get involved in an Open Source project for awhile now but have always felt it was no small undertaking and if I am honest, a little intimidating. Either you have to build a project from scratch, get involved in a project at its inception or get involved in a project that is already in development. Each of these options requires a lot of effort with the later probably being the most popular option.

Whilst working on a pet project where I was attempting to build dynamic reports / dashboards I was using the Jquery.Sparklines charting framework for my inline charting and I noticed that the bullet chart was not working as I was expecting it too. The line and bar charts allowed me to specify a min and max value at initialization to define the value range that the chart would be displaying. This would set the scale for the chart so it made visually comparing charts possible as they were all render using the same scale. Strangely, the min and max values for the bullet chart were being ignored with max value for each chart being determined by the max value from the values supplied to be displayed by the chart. This resulted in each bullet chart having a different scale and made visually comparing bullet charts impossible.

Inspecting the Jquery.Sparkline source code revealed that it was not checking if a min and max value had been specified. Instead, it was determining the min and max range for the chart from the values supplied to be displayed by the chart.

min = Math.min.apply(Math, values);           
max = Math.max.apply(Math, values);

Looking at how some of the other charts handled this, I saw the pattern in use was a ternary statement which checks if a min or max value has been specified, if so use this, otherwise determine these values from the data values supplied. My update using this pattern looks like this:

min = options.get('chartRangeMin') === undefined  
  ? Math.min.apply(Math, values) 
  : options.get('chartRangeMin');
max = options.get('chartRangeMax') === undefined 
  ? Math.max.apply(Math, values) 
  : options.get('chartRangeMax');

Now the bullet charts are rendered with the same scale as they all have the same max value specified and a visual comparison is possible.

In the context of my report, the bullet charts now give a much better visual report of how students are performing against one another.

Creating a Pull Request in GitHub was surprisingly easy, especially now that a forked branch of a project can be used in the pull request as you no longer require any privileges on the project that you want to contribute to. It's made the whole process pretty much ceremony and friction free. For details on how to make a Pull Request from a forked branch check out this tutorial.

You can find my pull request here.

It's a very small update and contribution but it's a start. There is additional logic being applied to the min value which would need further consideration and possibly lead to a modification to my pull request but it's the start of a conversation with the project owners at the very least.

I have learnt that it is important to find an Open Source project that you have an interest in when searching for projects to make a contribution to. It's even better if you have a vested interest because you are using the project or are looking to use the project. Previously when looking for projects to contribute to I was looking at shiny new projects instead of looking at projects which I was using.

Contributing to an Open Source project can also help you improve your coding skills as it gets you reading other people code. I picked up a number of patterns and coding techniques whilst perusing the Jquery.Sparklines project that are worth further consideration and study.

If you feel getting involved in an Open Source project is a little intimidating you are not alone there. Find a project that you are interested in (and preferably use) and start by making a small contribution (bug fix, test code, documentation). As they say, "from small beginnings come great things".