Here is a short list of Microsoft Virtual Academy courses that I am hoping to find the time to watch this January. If you have some down time over the holidays, you might also want to take a look at some of these.

What’s New in Visual Studio 2013 – There is more here than you would expect, especially considering 2013 shipped only a little over a year following the last major release of Visual Studio

Mission Critical Performance with SQL Server 2014 – This course gives is a preview of the In-Memory OLTP that is coming in SQL Server 2014. With promises of 10-30x performance improvements, this seems like something worth learning about.

Windows Azure Websites Deep Dive – While Azure Websites seem like they are pretty simple, I suspect that there is a lot more to them once you get into the details.  I am thinking this course will help broaden my understanding of the topic.

_Note: This is a cross-post of an _article posted on the MSDN Canadian Developer Connection

As mentioned in my previous blog post, Browser Link is a new feature in Visual Studio 2013 that allows for two-way communication between Visual Studio and any number of browsers. Browser Link enables some great new features that streamline the development process for web developers using the Microsoft stack.

In this post, we will explore the Track Unused CSS feature that is enabled by the Browser Link Extensions in Web Essentials.

What does it do?

Large web projects can accumulate a huge amount of CSS over time. Track Unused CSS is a feature that helps developers identify any CSS that might no longer be used and that could potentially be deleted. I see this as a valuable feature that can help clean up legacy web projects. I always say that I enjoy deleting code even more than I enjoy writing code.

How to use it

First, Install the Web Essentials extension for Visual Studio 2013.

Run your project in your target browser or browsers. Next, there are two options for how to start tracking unused CSS in your project.

Option 1 – In the Browser

In your browser, press the CTRL key and click the Unused CSS link in the Web Essentials toolbar. You can also use the CTRL + ALT + R keyboard shortcut.

Option 2 – In Visual Studio

View the Browser Link Dashboard in Visual Studio. You can open the Dashboard from the Browser Link dropdown (next to the Run button in the toolbar).

In the Browser Link Dashboard, you will see an entry under Connections for each browser that Visual Studio is connected to. Click the Browser you want to track and select Start Recording.

Reviewing Unused CSS

Once you have starting recording unused CSS, start browsing the pages of your site and Web Essentials will keep track of every piece of CSS that is used. When you are done, view the CSS files for your site and you will notice that any unused sections of CSS will be underlined with a green wavy line. When you hover over these items, you will see a tooltip indicating that no usages of the CSS selector were found during your tracking session.

Note that, just because a selector is marked as unused, it does not mean that it is never used by your application. It only means that it was not used while you were tracking unused CSS using Web Essentials.

Update: What about LESS?

This feature also works if you are using LESS for your CSS files. As you can see here, the unused CSS is highlighted in the original .less file instead of the .css file that is generated from the .less file.

What about SASS?

Unfortunately, Web Essentials does not support SASS yet. However, based on this update on the Web Essentials User Voice site, I think we can expect to see SASS support soon.

Summary

Download Web Essentials for Visual Studio 2013 to try out this feature. Remember that while I demonstrated this feature using Internet Explorer, Browser Link features actually work with ALL browsers including Chrome and Firefox.

_This is a cross-post of a blog that was written for the _MSDN Canadian Developer Connection_._

At a conference a few months ago, I was demonstrating the F12 developer tools in Internet Explorer when someone asked me:

Do you think Microsoft will ever make it so we can edit CSS in the browser’s developer tools and have those changes save back to the original CSS files?

 

That would certainly be a nice feature as it would streamline the design process for a lot of web developers. I spend a lot of time tweaking CSS and HTML in the browser, making sure everything looks just right. It is always a clumsy and manual process to push those changes back into the source files.

Fast forward to the launch of Visual Studio 2013 and this feature is now available. What you might find surprising is that the feature is not limited to Internet Explorer. It actually works with ALL browsers (IE, Chrome, Firefox, etc.)

Meet Browser Link

This magical feature is enabled by Browser Link. Browser Link is a feature in Visual Studio 2013 that allows for 2-way communication between Visual Studio and any number of web browsers. You will notice a Browser Link icon next to the Run button on the toolbar.  You can read more about Browser Link here.

The features that allows you to save changes from F12 developer tools is enabled by a Browser Link extension in Web Essentials. Once you have Web Essentials installed, ensure that the Enable Browser Link and Enable Saving F12 Changes options are both checked.

To see Browser Link in action, run your application. Once the main page is loaded, press the Ctrl and you will notice a faint Web Essentials toolbar on the bottom of your browser window.

Next, open the browser’s developer tools by pressing F12 and make a change to the CSS.

In this example, I will edit the CSS for a class called important-header. Initially, this class adds a red border around the element.

Now, I want to make this header look even more important. Using the Internet Explorer F12 developer tools, I change the background color to Salmon and increasing the border width.

 

To save these changes back to the CSS files, click the Save F12 Changes button on the Web Essentials toolbar.

The changes I made are instantly saved back to the originating CSS file. You will notice that if even collapsed the border-width attribute into a single border attribute.

If you choose to turn on F12 auto-sync, the changes will save back instantly and you won’t even need to remember to click the Save F12 changes button.

When using this feature, you might notice that some changes do not get saved back to CSS. One example is if you make changes to a class that is defined in bootstrap.css. Web Essentials appears to recognize that bootstrap.css is part of a 3rd party library that my application references and it avoids saving changes to that file. If you want to override bootstrap styles, you will first need to manually override them in your application’s CSS files.

Other Great Features

Web Essentials adds a number of other great Browser Link extensions that are available through the Web Essentials toolbar.

Inspect Mode – Allows you to highlight an element in the browser and the corresponding code will be highlighted in Visual Studio.

Design Mode – Allows you to edit the content of an element in the browser and the corresponding code will be updated in Visual Studio. This even works if the HTML was generated by Razor code!

Track Unused CSS – Enters a CSS tracking mode that helps you find unused CSS.

Summary

Download Web Essentials to try out these great new features. The combination of Web Essentials and Visual Studio 2013 helps to streamline some of the more painful tasks faced by web developers today.

While I demonstrated these features using Internet Explorer, these features also work in other browsers including Chrome and Firefox.

The Developer Movement is back and it is better than ever! In addition to earning points by publishing Windows Store and Windows Phone apps, you can also get points for completing Microsoft Virtual Academy courses.

The prizes this time around are probably the best we have seen from the program. If you earn enough points, you could score a Surface 2, and XBox One or an Asus Zenbook.

Microsoft Virtual Academy

The Microsoft Virtual Academy (MVA) is a new addition to this latest iteration of the Developer Movement. If you haven’t heard of MVA, you should definitely check it out. It provides FREE training courses that are delivered by real world experts. The range of content is very broad, with training available on pretty much any Microsoft technology you can think of. The website also allows you to create a learning plan and helps you track your progress.

Give it a try! Where else can you get great prizes for doing FREE training?

You may have noticed that there are multiple different way to select a single entity in Entity Framework. In this post, we will take a look at 5 different methods of selecting a single entity based on a unique entity id.

Let’s say we have a context that stores cats:

public class Cat
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Breed { get; set; }
    public bool IsGrumpy { get; set; }
    public DateTime Birtdate { get; set; }
    public int Age { get; set; }
    public int Weight { get; set; }
}

public class CatContext : DbContext
{
public DbSet Cats { get; set; }
}

Given a unique Id for a cat, we can use any 1 of the following 5 methods to select that cat: Single, SingleOrDefault, First, FirstOrDefault, and Find.

Cat cat;
cat = context.Cats.Single(p => p.Id == catId);
cat = context.Cats.SingleOrDefault(p => p.Id == catId);
cat = context.Cats.First(p => p.Id == catId);
cat = context.Cats.FirstOrDefault(p => p.Id == catId);
cat = context.Cats.Find(catId);

 

What’s the difference?

Assuming the cat exists in the database, there really is no major difference between each of these. The differences come in when no cat matches that id. There is also a difference in the performance of these methods.

### Method	### Id Not Found	### Timing (ms / 1,000 selects)
Single	InvalidOperationException	703
SingleOrDefault	returns null	701
First	InvalidOperationException	730
FirstOrDefault	returns null	1,250
Find	returns null	9,625

 

Note, the timings were determined by individually selecting each of the 5,000 cats in the database using each method. This process was repeated 25 times and the average timing is reported above. Your mileage may vary.

The First methods are not really intended to be used when selecting based on a unique key. The intended use of First is when you are matching based on a predicate that might return multiple results and you are only interested in the first match. When selecting based on a unique key, prefer using the Single methods over the First methods as it makes your intention more clear.

In general, I prefer using the Find method as it reduces the need for a lambda expression. It is by far the simplest and clearest option. It is, however, a lot slower than Single / SingleOrDefault. If you are repeating the query in a loop, you may prefer to use Single for performance reasons.

It worth noting that Find will return a cat that have been added to a DbSet but not yet saved to the database, while the other methods will not find those new cats. This is likely part of the reason for the performance difference.

 

Some people try to get ‘fancy’ with doing their selects and craft complex LINQ queries like this:

Cat cat = (from c in context.Cats
            where c.Id == id
            select c).FirstOrDefault();

I would recommend strongly against doing something like this. Not only is this a needlessly complicated solution to a simple problem, but the overhead of parsing that query can actually affect performance. I remember seeing this done in a piece of code that was executed thousands of times in a loop. I cut out several minutes from the runtime of the application by simply changing the code to use the Single() method.

Does deploying your enterprise application involve any manual steps? Even just one? Maybe you need to manually copy and paste a few files, or manually edit a configuration file somewhere. Maybe you need to manually run a database script or manually change some database settings. If you are doing any of these things, you might be hurting your product more than you think.

Every manual step in a deployment process introduces a risk, and I find that this risk is often under estimated. Any single can be missed or done slightly incorrectly, causing the product to work incorrectly. Sometimes, the resulting ‘bugs’ do not manifest themselves for weeks or months after the deployment. When this happens, you can expect to lose hours or days troubleshooting to diagnose and solve the problem. Of course, any time spent troubleshooting problems takes away from time improving the product. When these types of problems occur, you and your product will look horribly unprofessional. In the worst case scenario, you may even lose customers (yes, I have seen this happen).

I forget the origin of this quote and the exact wording, but it goes something like this:

Deployment/release day should be the most boring day of any software project

Obviously, there should be some excitement felt when releasing a piece of software, but there should not be any surprises. By the time the product is released and deployed at client sites, the process should be so well automated that there are no problems to deal with. Run the installer, choose a few options, Next, Next, Finish…

I have worked on projects that have had 50 pages of manual steps in order to successfully complete a deployment. Guess how many of those deployments were completed successfully. While obviously an extreme example, I have also worked on projects with only 1 single manual step (other than running the installer). Those projects also suffered some serious problems as a result. In my experience, if you have any manual steps in your deployment process, you will have a very hard time growing beyond 5-6 clients.

Think about how easy it is for people to install an app on their phone or tablet.

That would be one tap. It should be almost that easy to install your enterprise application…seriously. I know it will be a little more involved, but make it your goal.