New Pluralsight Course - Improve Your Application User Experience with Humanizer

My new Pluralsight course Making .NET Data Types More Human With Humanizer was recently released.

With Humanizer our application user experience can be improved. For example we’ve all seen (and probably written) applications that just add “(s)” to a list of things: “1 order(s)” rather that adding the “s” only when there is more than 1 order.

Another use case is the Humanization of DateTimes. For example in a logging application we’d probably want the log entry date and time right down to the millisecond. In a Twitter app for example, that level of detail is not essential to the user experience; in this instance Humanizer can give us a string such as “2 hours ago” which is a lot easier on the eye.

Check out the GitHub site, give a shout out to the creator Mehdi Khalili on Twitter, or watch the Pluralsight course here.

Debugging Share To and Background Agents in Windows Store Apps

When your main app is running via Visual Studio, when there is a problem you’ll get an exception and Visual Studio will break into the debugger to help you figure out the problem.

There’s a couple of scenarios that are a little more difficult to debug but are easy enough to do once you know how to access it in Visual Studio.

The two things that can be problematic are debugging background agents and debug share to functionality if your app is a share target. If you share to your app if it’s not already running you may not have things like dependency injection registered or other setup code. This is because a differnt code path executes when you launch the app normally to when you launch via share charm. The other thing is debugging background agents, if you are (for example) using a timed agent that executes every hour you don’t want to wait around for an hour before you can test.

Debugging Apps Launched from Share Charm

This technique also applies if you want to start debugging when you start your app from the desktop, even if you didn’t start it from Visual Studio.

Make sure your app is built and deployed: if you just want to deploy but not launch go to the Build menu and choose Deploy Solution.

At this point your app is freshly installed but is not running.

More...

Create More Maintainable CSS in Less Time with Sass and Visual Studio

My new Pluralsight course was recently released that shows how to use Sass when developing ASP.Net web applications.

Sass (CSS with superpowers) allows the creation of regular CSS, but produce it with loads of cool features that regular programmers know such as variables and functions.

Sass is a superset of CSS and has a .scss file extension. A CSS file is a valid Sass (.scss) file.

A tool “compiles” the Sass .scss file to regular CSS. One way to do this in Visual Studio is to install the free Web Workbench extension. Once installed, whenever you save the .scss file, Web Workbench will create the accompanying .css file as shown in the following screenshot:

CSS files generated from Sass

(Notice here the minified version is being created by Web Workbench because the full version is installed.)

Sass Variables

Sass variables can be defined and then used wherever regular CSS property values are used. For example, the following shows 3 variables declared and used in the .scss file:

$main-brand-color: pink;
$secondary-brand-color: #111;
$base-font-size: 50px;

body {
    background-color: $main-brand-color;
    color: $secondary-brand-color;
    font-size: $base-font-size;
}

This produced the following .css:

body {
  background-color: pink;
  color: #111111;
  font-size: 50px; }

Mixins

Mixins decrease the amount of boilerplate CSS we need to write. For example using vendor prefixes throughout the stylesheet. Rather than writing all the prefixes by hand we can declare and invoke a mixin:

@mixin border-radius($radius){
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

.border {
    @include border-radius(10px);
}

This produces the following CSS:

.border {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px; }

Inheritance

Repetition can be reduced with Sass inheritance. In the following example, happy and sad inherit from greeting:

.greeting {
  border: 1px solid #000;
  padding: 10px;
}

.happy {
  @extend .greeting;
  border-color: yellow;
}

.sad {
  @extend .greeting;
  border-color: grey;
}

This produces:

.greeting, .happy, .sad {
  border: 1px solid #000;
  padding: 10px; }

.happy {
  border-color: yellow; }

.sad {
  border-color: grey; }

Now in the HTML, when the happy or sad class is used, the element will also get the greeting styles without having to apply both classes explicitly.

These examples just scratch the surface of the feature set of Sass. To learn more check out the official site or my Simplifying CSS in Visual Studio With Sass Pluralsight course.

An Overview of Structured Logging with Serilog

Traditional logging techniques (such as writing lines of text to files) results in the loss of structure and semantics.

Structured logging enables richer, more semantic, structured log data to be created. But more importantly queried.

Serilog is an open source logging library that facilitates this structured logging.

Serilog can be used in the traditional way, for example writing to files, but it is designed to allow capture of structured data.

There are multiple provided “sinks” that route log data to a store; from unstructured data stores such as text files (single and rolling) to structured stores such as RavenDB. Multiple sinks can be configured so the same log event is written to both stores.

Writing to multiple sinks with Serilog

To create structured data, the logging code looks slightly different from traditional (unstructured) logging code. Once the logger is configured, to log an information level event we could write something like the following:

Log.Information("Log in succeeded for {UserId}. Authentication service took {LogInMilliseconds}.", userId, responseTime);

Here, a log event is being written that contains two pieces of structured, sematic data: UserId and LogInMilliseconds. If this message is written to an unstructured source (such as text file) then a simple string will be written. If a structured sink is used then the individual data items will be stored as well.

This means that this structured information can be richly queried, for example queries such as: “show me all the logins for user 42 where the login time exceeded 200ms” or “show me all the logins that took more than 1000ms”.

Check out the Serilog site for more info or my Modern Structured Logging With Serilog and Seq Pluralsight course.

Reducing MVVM Light Viewmodel Code with Fody Property Dependencies and Custom Property Changed Methods

In other previous articles I’ve written about Fody and this article we’ll see how we can use the PropertyChanged.Fody addin with MVVM Light viewmodels.

Windows Store app screenshot

The preceding screenshot shows the app in action: a name TextBox is twoway data-bound to the viewmodel, when a different name is typed, the TextBlock shows the uppercase version.

The user can also type a color into the color box and a bit of reflection happens to convert this string to a color from the Colors class.

Windows Store app screenshot with different bg color

The following code shows the (non Fody-fied) viewmodel:

More...

Using the Xbox Music API in Universal Windows Apps

The Xbox Music API can be used by third party developers (i.e. you and me) to search for artists, songs, albums, etc and also get access to actually play songs.

There are two flavours at present: “unauthenticated” and “authenticated”.

Authenticated access allow playing of full songs and working with user playlists. Playlist changes will automatically roam to user’s other devices. The full access to play full songs requires that the user has an Xbox Music Pass.

Unauthenticated access doesn’t allow access to user playlists, and streaming of music is restrict to 30 second previews.

At present anyone can get unauthenticated access via the Xbox Music RESTful API on Azure Marketplace. Authenticated access is currently limited, you need to apply for the pilot program. I’ve applied for this, hopefully I’ll be accepted so I can understand this part better.

Getting Started with Unauthenticated Access

We need an access key to allow our apps to able to use the (unauthenticated) API. To do this follow these instructions to register and create an application in Azure Marketplace. Don’t worry about the code samples at the bottom of the post, there’s a client API we can use instead.

So now you should have an application registered (you might have to enter some web address in the redirect URI – I’m not sure what this is for at this point).

More...

Consuming Server-Side SignalR Events in Universal Windows App Clients

In a previous article I wrote about creating server side SignalR timer events.

As part of my learning of SignalR I wanted to see how easy it would be to create a Universal Windows app consuming these server side events.

So first off I created a new blank Universal app:

creating universal app in Visual Studio screenshot

 

Next installed the SignalR NuGet package into both app projects: install-package Microsoft.AspNet.SignalR.Client

In the Windows 8.1 Store app project XAML I added a simple bound TextBlock that will display the server messages:

<Page
    x:Class="UpTimeUni.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UpTimeUni"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Viewbox>
            <TextBlock Text="{Binding Uptime}">please wait...</TextBlock>
        </Viewbox>
    </Grid>
</Page>

I also added similar XAML in the Windows Phone 8.1 main page.

More...

Using Server Side Timers and SignalR in ASP.NET MVC Applications

I thought it would be fun to create an “Internet uptime” page that you can see live here on Azure Websites. It shows how long the Internet (since ARPANET) has been around for.

image

Creating a Class that can be Managed by ASP.NET

The HostingEnvironment.RegisterObject method can be used to register an instance of an object that has its lifetime managed by the hosting environment.

To register an object it must implement the IRegisteredObject interface.

This interface defines a Stop method which gets called when ASP.NET needs to shutdown the app domain.

So, in the application start we can create an instance of our class and register it:

protected void Application_Start()
{
    AreaRegistration.RegisterAllAreas();
    RouteConfig.RegisterRoutes(RouteTable.Routes);

    HostingEnvironment.RegisterObject(new BackgroundUptimeServerTimer());
}

Creating a SignalR Hub to Send Messages from the Server to Client

Next we create a SignalR hub and the HTML.

So the hub class is called UptimeHub:

public class UptimeHub : Hub
{
}

We can get the server to call a client JavaScript method called “internetUpTime” in the HTML page and have this client code display the what’s been sent from the server timer.

The following shows the complete HTML for the page. Notice the “hub.client.internetUpTime = function (time) …” this function will get executed every time our server timer event fires.

More...

Vertically Center Div in Browser Window using Viewport-Relative Lengths

I found out about these units this week so I wanted to have a play with them.

The CSS units: vw, vh, vmin, and vmax allow sizes to be specified relative the the browser window size (or the “initial containing block”).

So 1 vw is equal to 1% of the viewport width and 1 vh is equal to 1% of the viewport height.

vmin and vmax return the smaller and larger respectively of vw or vh.

There is good support  for vw and vh in modern browsers with some partial support for vmax, overall about 55% of browsers offer full support, 20% partial support.

So for example to center a div vertically in the browser we could set its height to “50vh”  (50% of the viewport height) and set its top margin to be “25vh” (or a quarter of the viewport height), thus leaving a quarter below the div.

So here’s a screenshot of this in action in a tiny browser window (the white is the div):

image

And after resizing the browser:

More...