lukencode

Automatically remove unused css from Bootstrap or other frameworks

2018-07-29T00:00:00+00:00

I love bootstrap (and other css frameworks). For a developer like me who often works on web projects without any design input it is a real lifesaver. The problem is since bootstrap is a kitchen sink type framework (although you can pick and choose via sass) the css file size can get out of hand quickly. Bootstrap.min.css weighs in at 138 KB. If you add a theme and custom css it can easily bump you over 200 kb.

PurgeCSS is a node.js package that can detect and remove unused css selectors. It will analyze your view pages - be they HTML or a templating engine and build a list of the css selectors in use. PurgeCSS will then take your stylesheets and remove any selectors that are not present in your views.

I setup PurgeCSS using the webpack plugin which works in conjunction with the extract-text-webpack-plugin. My webpack config is based off the Simple webpack config I have written about previously.

The webpack config was already setup to process sass and combine css into a single file. I added the PurgecssPlugin which will run at after the initial css processing.

npm i -D purgecss-webpack-plugin

npm i -D extract-text-webpack-plugin

const path = require('path')
const glob = require('glob')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const PurgecssPlugin = require('purgecss-webpack-plugin')

const outputDir = './wwwroot/dist'
const entry = './wwwroot/js/app.js'
const cssOutput = 'site.css'

module.exports = (env) => {    
    return [{
        entry: entry,
        output: {
            path: path.join(__dirname, outputDir),
            filename: '[name].js',
            publicPath: '/dist/'
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    use: 'babel-loader'
                },
                {
                    test: /\.css$/,
                    use: ExtractTextPlugin.extract({
                        use: ['css-loader'],
                        fallback: 'style-loader'
                    })
                },
                {
                    test: /\.scss$/,
                    use: ExtractTextPlugin.extract({
                        use: ['css-loader', 'sass-loader' ],
                        fallback: 'style-loader'
                    })
                }
            ]
        },
        plugins: [
            new ExtractTextPlugin(cssOutput),
            new PurgecssPlugin({
                paths: glob.sync('./Views/**/*.cshtml', { nodir: true }),
                whitelistPatterns: [ /selectize-.*/ ]
            })
        ]
    }]
}

The plugin accepts an array of paths to view files to search for css selectors in use. The glob package accepts a search pattern and generates a list of files. I am looking for .cshtml view files in my .net web app.

paths: glob.sync('./Views/**/*.cshtml', { nodir: true })

The whitelistPatterns parameter allows you to exclude selectors from the purge that may not have been present in the paths. I found that the selectize plugin I am using has css classes that are added dynamically and were being removed so I added a pattern to match the prefix of its css classes. I could alternatively include the .js file for this plugin with the paths parameter.

whitelistPatterns: [ /selectize-.*/ ]

Running PurgeCSS on one of my (admittedly heavy) bootstrap based web sites reduced the css file size from 159KB to 60KB with essentially no effort on my end!

Sending email in .NET Core with FluentEmail

2018-07-01T00:00:00+00:00

It has been a long time since I posted about or contributed to FluentEmail, the open source .net email package I created way back in 2010. During that time (largely thanks to the awesome work by Ben Cull) fluent email has been updated to support .net core.

I recently got my hands dirty coding again to improve the .net core support - specifically around dependency injection. Here is a walkthrough for using FluentEmail in an ASP.NET core web application.

Required Packages

PM> Install-Package FluentEmail.Core
The core FluentEmail classes and interfaces

PM> Install-Package FluentEmail.Razor
A Razor implementation of ITemplateRenderer this uses RazorLight to render Razor templates as the email body.

PM> Install-Package FluentEmail.Smtp
An Smtp implementation of ISender which uses System.Net.Mail under the hood.

There are a couple of other packages available to use in place of smtp or razor:

Dependency Injection

In previous versions of FluentEmail emails were composed using a static helper method. This is not now recommended due to the difficulty in testing and maintainability. The FluentEmail libraries now come with extensions methods for Microsoft Dependency Injection. The code below should be added to the ConfigureServices method in Startup.cs.

public void ConfigureServices(IServiceCollection services)
{
    services
        .AddFluentEmail("defaultsender@test.test")
        .AddRazorRenderer()
        .AddSmtpSender("localhost", 25);
}

The AddFluentEmail("defaultsender@test.test") extension method accepts a default sender address and has extension methods to set the IRenderer, in this case the RazorLight renderer using .AddRazorRenderer() and the SMTP sender using .AddSmtpSender("localhost", 25). The MailGun and SendGrid packages also have extension method helpers.

These methods will make two interfaces available in your application for sending email IFluentEmail for a single email and IFluentEmailFactory for multiple emails.

Sending an email

Below is the most basic example of sending an email. This code will take the IFluentEmail configured above and send using the SmtpSender. The email will be sent from “defaultsender@test.test” as configured on startup (this can be overridden with the email.SetFrom() method)

public async Task<IActionResult> SendEmail([FromServices]IFluentEmail email)
{
    await email
        .To("test@test.test")
        .Subject("test email subject")
        .Body("This is the email body")
        .SendAsync();

    return View();
}

There are a bunch of other useful methods on IFluentEmail to do things like add CC or BCC recipients, add attachments, set priority or set the reply to address.

Render email using a Razor template

Sending basic plain text emails is fine - but most of the time you are going to want to mix in some rich data. FluentEmail allows you to set the body of the email as a template rather than a plain string by using .UsingTemplate<T>(string template, T model) instead of .Body(). This will be taken combined with an object as a model and be passed to the IRenderer that has been set - in our case FluentEmail.Razor to process. Here is a simple example:

public async Task<IActionResult> SendEmail([FromServices]IFluentEmail email)
{
    var model = new
    {
        Name = "test name"
    };

    var template = "hi @Model.Name this is a razor template @(5 + 5)!";

    await email
        .To("test@test.test")
        .Subject("test email subject")
        .UsingTemplate(template, model)
        .SendAsync();

    return View();
}

The body of this email will render as “Hi test name this is a razor template 10!”. The Razor renderer will allow you to write just about any valid Razor code. The model passed to the renderer can be any object type - I often find it convenient to use an anonymous object as in the example above.

FluentEmail has a couple of helper methods to make using templates a bit cleaner. I personally like the embedded resource option because it makes it easy to share templates across projects.

Render template from file:

.UsingTemplateFromFile($"{Directory.GetCurrentDirectory()}/Mytemplate.cshtml", model)

Render template from embedded resource:

.UsingTemplateFromEmbedded("Example.Project.Namespace.template-name.cshtml", 
	model, 
	TypeFromYourEmbeddedAssembly.GetType().GetTypeInfo().Assembly)

Note for .NET Core 2 users: You will need to add the following line to the project containing any embedded razor views.

<MvcRazorExcludeRefAssembliesFromPublish>false</MvcRazorExcludeRefAssembliesFromPublish>

Send multiple emails in the same scope

If you need to send multiple emails from the same class or action you will want to use IFluentEmailFactory rather than reusing an instance of IEmail. IFluentEmailFactory has a single Create() method which will give you a new instance of IFluentEmail to use.

public async Task<IActionResult> SendMultiple([FromServices] IFluentEmailFactory emailFactory)
{
    await emailFactory.Create()
        .To("test1@test.test")
        .Subject("test email subject")
        .UsingTemplate("hi @Model.Name this is the first email @(5 + 5)!", new { Name = "test name" })
        .SendAsync();

    await emailFactory.Create()
        .To("test1@test.test")
        .Subject("test email subject")
        .UsingTemplate("hi @Model.Name this is the second email @(5 + 5)!", new { Name = "test name 2" })
        .SendAsync();

    return View();
}

Extending

As I have mentioned a couple of times FluentEmail can be easily extended by implementing ISender or ITemplateRenderer. ISender dictates how the email will actually sent. ITemplate renderer accepts a template string and a model and returns the rendered result.

For more information check out the FluentEmail Github repository.

Caching in ASP.NET Core with LazyCache

2018-04-18T00:00:00+00:00

Caching is a great way to get improve the performance of your application - either enabling high load scenarios or papering over some bad code to make life bearable. I have always favoured a simple “GetOrCreate” style caching API so when I found the open source LazyCache by Alistair Crabtree I was keen to check it out.

LazyCache describes itself as “An easy to use thread safe generics based in memory caching service with a simple developer friendly API for C#” which I would pretty much have to agree with.

The ASP.NET Core version is currently in beta (though seems to be pretty solid) and can be installed via nuget:

Install-Package LazyCache.AspNetCore -Version 2.0.0-beta03

Once installed it can be easily made available when configuring services in startup:

services.AddLazyCache();

This will inject IAppCache throughout your application.

Here is a simplified example of using LazyCache from the homepage my Australian tech job board - Austechjobs:

IAppCache is the Lazy Cache service being injected into my class. It provides a GetOrAddAsync method that accepts:

A cache key which in my example is the string “HomeModel”.
A factory to retrieve the data to be cached in the form of a function Func<ICacheEntry, Task> addItemFactory. The code in my example returns a model after making a database call (the bit I wanted to cache).
Options for cache length. I am using a simple sliding timespan of 12 hours.

I find the simplicity of this caching setup very pleasing. It’s implementation uses Lazy<T> to ensure the factory method is only executed once. Under the hood by default LazyCache will use IMemoryCache in Microsoft.Extensions.Caching.Memory. This is implementation will only cache data on the machine it is running on. If I was running a more intensive service I would want to extend LazyCache and implement something like redis for distributed caching. The good news is because I am using IAppCache throughout my application I can change the underlying caching provider with relative ease.

Simple webpack config to build javascript, sass and css using NPM and ASP.NET Core

2018-04-14T00:00:00+00:00

I have been working on a ASP.NET Core project that requires me to build and publish sass stylesheets, css and javascript. I wanted to streamline the process so I put together this simple webpack setup to automate what had been a couple of manual steps.

Webpack and its various plugins require Node.js to run and NPM to install. The package.json file tracks the node dependencies for the project. The packages I am using for Webpack are installed as devDependencies and can be added using the npm install command with the -D flag eg:

npm install webpack -D

This is my package.json file:

I will explain a couple of the packages I am including here when we look at my actual webpack config. You can install all packages using “npm install” in the directory of package.json. I am also using npm to run the webpack scripts. I found this a much simpler option than including extra grunt/gulp scripts. The scripts are pretty straight forward build and build:dev run webpack with flags to tell it the environment and whether it should minimize the output. Th watch script is useful during development as it will automatically rebuild assets when it detects a file has changed.

This is the webpack config script that is being run by npm. It reads a single “entry” javascript file and builds any javascript, css or sass included to the specified output path.

The work is done by the loaders configured in the modules section. Babel is a popular javascript compiler which allows you to use ES2015 and other things easily on the web.

The css and sass rules are using the ‘extract-text-webpack-plugin’ to pull out the resulting css into a separate file (‘site.css’). Webpack allows for some pretty fancy setups where css is rendered inline or bundled with javascript components like react and vuejs but for my purposes I am going with a single seperate css file.

The entry file will include javascript import or require statements for dependencies in addition to any javascript for the application. This includes the sass or css dependencies although this webpack script is configured to export those to a separate file. Example import statements in app.js:

import '../css/theme.scss'
import '../vendor/tagsinput'

The scripts so far are completely independent to the ASP.NET Core application and work well being run as npm scripts from the console:

npm run build
npm run watch

We can integrate the into the .net build and publish workflow by adding some steps the the build process in the projects .csproj file. These scripts come from good post on codeburst.io on webpack.

  <Target Name="DebugRunWebpack" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('wwwroot\dist') ">
    <!-- Ensure Node.js is installed -->
    <Exec Command="node --version" ContinueOnError="true">
      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
    <!-- In development, the dist files won't exist on the first run or when cloning to a different machine, so rebuild them if not already present. -->
    <Message Importance="high" Text="Performing first-run Webpack build..." />
    <Exec Command="npm run build:dev" />
  </Target>
  
  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <Exec Command="npm install" />
    <Exec Command="npm run build" />    
    <ItemGroup>
      <DistFiles Include="wwwroot\dist\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

The “DebugRunWebpack” target will build the assets in dev mode if they dont already exist. “PublishRunWebpack” will build and include the files when running dotnet publish. This is useful for automated build pipelines such as visual studio online.

The setup here is very basic and a good starting point - especially if you are not using a framework such as react. Functionality that could be added depending on the project is separating the vendor assets into a different file/process as well as adding linting, source maps and more to the webpack config.

Introducing Austechjobs an Australian technology job board

2018-04-09T00:00:00+00:00

It has been a couple of years (kids will do that) in the wilderness but I am back working on my blog and on an exciting new project.

Austechjobs is a job board focusing on technology jobs in Australia. This includes developers, designers, support, sys admin and management.

In my role as Development Manager at QIMR Berghofer I am often involved in recruiting developers for my team. I have always been disappointed with the recruiter spam and mountains of unqualified applications that posting to the big job sites brings. My hope is Austechjobs will be a place to find the best IT jobs at the best companies in Australia and in turn for employers to reach the best IT professionals in Australia.

Austechjobs will provide incentives for employers to list positions with enough detail for job seekers to see what they are in for. Initially at least this means positions recruitment agencies will not be accepted. Posting a job on the site is free during the launch but this will change as more jobs and functionality are available. If you have any questions or feedback contact me on luke@austechjobs.com.au for more information visit austechjobs.com.au/about.

The site itself is a custom asp.net core application and since this is a technical blog I hope to post some snippets of code I have been working on soon.

An embeddable JSONP javascript widget template

2013-01-24T00:00:00+00:00

Recently I’ve been hacking together a little online poll creator - pollfu. For the app I needed to have the option to embed the poll on an external website. One of the best examples of this is the checkout widget by stripe. The cool thing about the stripe widget is it loads everything it needs through that one script.

This is the core of what I came up with:

This is what it can do:

Check for the existence of jquery (and version) on the page, if it isn’t there load it in. Just set the jquery script location and version variables at the top. It uses noconflict and sets jquery to the var jQuery variable. After jquery is ready the main() function is called, from there you can listen for document ready.
Load in any other script and call back a function when it has loaded using the loadScript(src, onLoad) function.
Load in a css file and add it to the document head using the loadCss(src) function.
Has a reference to the script tag itself (var scriptTag). This means you can place the script on the page where you want to inject your html ala stripe checkout.

After you have jquery and your scripts loaded in you can use it grab data from your server using jsonp (there is a super simple example commented out in the source).

Another cool thing to try is setting widget variables on the script tag using data attirbutes (eg data-id=”1”). Once you have a reference to the script tag these are super easy to read in eg:

<script src="http://pollfu.com/public/js/embed.v1.js" data-id="9"></script>

This is an example of the end result embedded poll for pollfu:

Billminder for Windows 8

2012-11-15T08:33:01+00:00

Billminder, my first windows 8 app has finally hit the store. This is how I describe it in my wanky store description:

Billminder is a minimalist and elegant solution for controlling your expenses. With innovative infographic style display you can see at a glance how much you have to pay. Billminder features a live tile showing the next 30 days of bills so you will never miss a payment.

Features

Elegant minimalist interface
Infographic overview of where your money goes
Live tile that automatically updates with upcoming bills
Add one off and re-occurring bills
Keep organised with custom categories

From a developers point of view Billminder is a html/js app. Coming from a mainly C# (but with plenty of web experience) background I actually javascript really refreshing. The time it takes to get something on the screen feels much reduced compared to the strict MVVM structure I have used in the past. I used a number of really great libraries including db.js for data storage, d3.js for cool visualisations and moment.js for working with dates. I should have some posts on specifics up in the nearish future so if you see something in the app you want and you want to know how it works let me know.

If you like the app obviously you should buy it and rate it 5 stars but you could also vote for it on apptivate.ms - an awesome competition for Windows 8 developers.

Http Web Services in Javascript Windows 8 Metro Apps

2012-07-09T00:00:00+00:00

I have been doing some Windows 8 development recently and decided to work with html, css and javascript rather than c# and xaml. I am mainly a .net guy and was a little worried about how javascript would work for a few things including consuming rest web services. I’ve written a few posts on web services for .net, android and windows phone and as it turns out Windows 8 javascript is easier than all of them.

###A Basic Web Request

The best way to call your web services is using the WinJS.xhr function. This function is basically a wrapper for the lower level XMLHttpRequest object. The function takes an options object with a number of optional properties. A basic xhr get request looks like this:

WinJS.xhr({
           type: "get",
           url: "www.example.com"
        });

You can make a post request by changing the type to “post”.

###Using Promises

WinJS.xhr wraps the request in something called a promise. Promises in WinJS is an abstraction to help out with asynchronous requests. In short a promise is like a schedule or work to be done on a value that has yet to be computed, in the case of web services we are waiting on the response from the server. Using promises you can chain calls to the then and done methods. These methods will fire after the promise has been completed. You can chain multiple then methods together or just use done to wait until the end.

WinJS.xhr({
            type: "post",
            url: "www.example.com",
        }).done(function (result) {
            console.log(result.responseText)
        });

In the previous example the done function has a parameter “result”. This is the data returned from the webservice, you can also access a number of other properties such as result.status. You can also provide an error function as the second parameter to the done and then functions.

###Setting Request Parameters

Most web services will require you to provide paramters. These might be query string params for get requests, form values for post or setting specific headers. To set query string or form parameters you can set the data property on the xhr options objects. To get the parameters in the right format I use a little helper function called formatParams. This function takes a javascript object and converts each property into a key/value parameter.

var p = {
            key: "1234"
        };

//get request
WinJS.xhr({
            type: "get",
            url: "www.example.com",
            data: formatParams(p)
        });
            
//post request
WinJS.xhr({
            type: "post",
            url: "www.example.com",
            data: formatParams(p),
            headers: { "Content-type": "application/x-www-form-urlencoded" }
        });
            
function formatParams(p) {
    var queryStr = "";

    for (var propertyName in p) {
        var val = p[propertyName];
        queryStr += propertyName + "=" + encodeURI(val) + "&";
    }

    return queryStr.slice(0, -1);
}

For the post request I set the content type header to x-www-form-urlencoded. You can set any other headers you need using this same format.

###Consuming JSON

Assuming your web service returns json the biggest advantage javascript has it it handles it natively. There is no need for building a matching class or messing about with dictionaries it just works. All you need to do is call JSON.parse on your response text.

WinJS.xhr({
            type: "post",
            url: url,
        }).done(function (result) {
        	var json = JSON.parse(result.responseText);
        });

Fluent Email now supporting custom template renderers

2012-06-10T00:00:00+00:00

See an updated (2018) example of sending in .NET core email using FluentEmail.

Fluent Email is a simple wrapper for System.Net.Mail that provides a fluent interface for constructing and sending emails in .Net. It also provides a Razor based template rendering engine. After getting a couple of requests for different renderers I decided to provide an interface in Fluent Email for templating that anyone can implement.

The updated version of fluent email is available as always on nuget and you can find the source on github.

The interface itself is really basic and has just one method:

public interface ITemplateRenderer
{
	string Parse<T>(string template, T model);
}

The default renderer uses the awesome RazorEngine to implement the interface:

public class RazorRenderer : ITemplateRenderer
{
	public string Parse<T>(string template, T model)
	{
		return Razor.Parse<T>(template, model);
	}
}

If you want to use your own renderer all you need to do is implement the ITemplateRenderer interface and call the UsingTemplateEngine method when constructing an email:

var email = Email
		.FromDefault()
		.To("test@test.test")
		.Subject("awesome new fluent email features")
		.UsingTemplateEngine(new CustomTemplateRenderer())
		.UsingTemplate(template, new { Name = "LUKE" })
		.Send();

Here are a couple of the different engines I have seen people using for fluent email (not yet implementing the new interface but hopefully soon). If you have your own implementation leave a comment with a link and I will add it too the list.

Markdown support - Nguyen Ly has some markdown support sitting in his fluent email fork on github
Mustache - Frank Radocaj is uses Mustache (using Nustache) for his templates hopefully he can post some code up soon.

Quick and Dirty Currency Formatting in C#

2012-05-28T00:00:00+00:00

A project I have been working on recently stores amounts of money along with the currency they are in. I was getting sick of the old amount + currency_code style of display and decided to see if I could hack together something that looks a bit nicer. Turns out you can use the built in .NET culture info and string.Format to format decimals into any currency.

The code queries the cultures using linq to find a culture matching the given currency code it then uses passes the culture into string.Format and asks it to format as currency (“C”). I wrapped it all up in an extension method and added a default return if the culture is not found. The code seems to work fine but I can’t really vouch for its performance or coverage of currencies other than to say “it works on my machine”.

public static string FormatCurrency(this decimal amount, string currencyCode)
{
	var culture = (from c in CultureInfo.GetCultures(CultureTypes.SpecificCultures)
			let r = new RegionInfo(c.LCID)
			where r != null
			&& r.ISOCurrencySymbol.ToUpper() == currencyCode.ToUpper()
			select c).FirstOrDefault();

	if (culture == null)
		return amount.ToString("0.00");

	return string.Format(culture, "{0:C}", amount);
}

Here are the results of calling FormatCurrency for a few different currency codes:

decimal amount = 100;

amount.FormatCurrency("AUD");  //$100.00
amount.FormatCurrency("GBP");  //£100.00
amount.FormatCurrency("EUR");  //100,00 €
amount.FormatCurrency("VND");  //100,00 ₫
amount.FormatCurrency("IRN");  //₹ 100.00

Using Pretzel / Jekyll to host your blog on Github

2012-02-13T00:00:00+00:00

A couple of weeks ago after shamelessly promoting on of my blog post on a social network I received a troubling report that my pride and joy had contracted some type of virus.

This scary red screen (well a similar one) along with some performance issues and me getting bored with wordpress meant I was on the hunt for a new blog platform. I was after was something fast and simple where I have control over the html and css generated.

Jekyll is a “blog-aware, static site generator in Ruby”. It takes markdown and liquid (a templating language) text files and mashes them into a static html site. The “blog-aware” bit means Jekyll will take posts written in mark down and generate a url structure similar to what is seen on most blogs eg [year]/[month]/[day]/[title]. Static html sites have a couple of obvious advantages and disadvantages - they are easy to host, fast and difficult to hack (take that virus man!) but there is no admin interface for update posts.

This is what liquid templating looks like:


    ---
    layout : layout
    title : SiteName
    ---
    
    
		{% for post in site.posts %}
    		
    			{{ post.title }}
    			{{ post.date | date: '%d %B, %Y' }}
    		
		{% endfor %}

The text inbetween the — up the top is a YAML header - any files with a yaml header will be processed as special files. The variables being set are for things like the layout to be used, permalink or page title.

A simple post written in markdown might looks something like this:

    --- 
    layout: post
    title: "My First Post"
    author: "Author"
    comments: true
    ---
    
    ## Hello world...
    
    This is my first post on the site!

This Jekyll business was sounding wonderful but being the sheltered windows loving, 9-5 enterprise coding, unhireable .NET developer that I am I threw it into the “too hard basket” and went back to whinging about wordpress. Lucky for me there is a gang of open source programmers (with .net flavour to them) that were setting out to build the windows equivalent of Jekyll code named - Pretzel.

Pretzel is a .NET console app built in just one week builds static sites in a similar manner to Jekyll, with the jekyll mode more or less emulating it exactly. There are some other cool features in the pipeline such as a razor engine, js and css minification and less support. Pretzel has a couple of commands - “create” builds the basic site structure, “bake” converts your site to static html and “taste” runs an embedded web server and watches for file changes to preview your site. I personally like to use “taste” like this while I am working on my site for instant updates:

pretzel taste -p=8080 -e=jekyll

With my mind set on a fancy static blog I had one more problem to solve - hosting. It turns out Github allows you to do some really cool stuff with github pages AND github pages supports Jekyll all for free! Hosting my blog as a github repo + gh pages has another advantage my blog is safely stored on github servers with a full history. Updating the site is as easy as pushing updates or new pages to the repo.

Here is what I did to get my blog up and running on github.

Set up a repo named username.github.com. This will tell github to publish any files on the master branch to http://yourusername.github.com.
Add a text file named CNAME to your repo with each url you want mapped to the site on separate lines.
Import my wordpress posts using pretzel. To do this you just need to download the xml export of your wordpress blog and run the import command. This will import your posts as markdown files in the post folder.

pretzel import -t=wordpress -f="path to xml"

Import my blog comments to disqus and embed their javascript widget on my post pages. Disqus provides a wordpress plugin that will import existing posts - remember to do this before you shut down your wordpress blog.
Profit!

One thing to beware of is 404s. You need to add a plain 404.html page to your repo or 404s will be redirected to a github page (and not the one with the cool star wars one).

This blog now essentially a git repo you can take a look at the source for my blog at lukencode/lukencode.github.com. Without the cruft of a wordpress theme I have been able to drastically simplify the html and css and cut down the page size. I’ve also had a chance to experiment with responsive design - go on resize this window and let me know what you think. Next on the todo list is a redesigned home page, pages for my wp7 apps and some fancy javascript to load in my current github repos.

NetBash Updated – Formatting Helpers Added

2012-01-14T00:00:00+00:00

NetBash (drop in command line for asp.net web applications) was first released late last year with little to no response from the community. No big deal – I built it to scratch my own itch so it was at least going to be useful to me. Then, like clockwork I go on holidays for a week and a bit and it is featured on Asp.net and tweeted by close to 100 people. I have used the past few days to catch up with the bugs people have found (thanks heaps to those who forked and fixed bugs themselves) and get a new release out on NuGet.

Bug Fixes

NetBash is now compatible with older versions of JQuery (1.5 at least). This was causing some issues with people using a fresh file – new project mvc app to test it out.
Console now auto scrolls to bottom when opened.
Now more compatible with older versions of IE.

Formatting Extensions

A couple of classes have been included in the NetBash.Formatting namespace to help make the output of your commands a bit prettier. The most useful is the TableExtensions class contributed by Damian Karzon. This class includes a couple of extension methods on IEnumerable<T> that take a list of objects and using reflection output them into a nice consoley table. Here is an example:

public string Process(string[] args)
{
    var tempData = new List<GridData>
    {
        new GridData
        {
            RowId = 1,
            SomeName = "NUMBER1",
            Longtext = "12345678901234567890",
            SomeDate = DateTime.Today
        },
        new GridData
        {
            RowId = 2,
            SomeName = "sup bro",
            Longtext = "I AM THE GREATEST",
            SomeDate = DateTime.Now.AddDays(21)
        },
        new GridData
        {
            RowId = 5,
            SomeName = "GridCommand",
            Longtext = "longish",
            SomeDate = DateTime.Now.AddDays(-3)
        }
    };

    return tempData.ToConsoleTable();
}

Output:

Pretty neat I think. It works with most things I’ve thrown at it including anonymous classes but not dynamic.

The other class is called SparkExtensions. This class is a C# port of this cool little shell script. The Spark() methods are extension methods on various IEnumerable collections (int, decimal, string, etc) they take the list and turn it into a cool little spark line graph similar to this: ▁▂▃▅▂▇. Here is a basic example:

public string Process(string[] args)
{
    var list = new List<int>() { 5, 7, 3, 8, 9, 2, 12, 7, 6 };

    return list.Spark();
}

Hopefully these additions make building commands a little more painless. If you are using NetBash or better still have built some open source commands I'd love to hear from you. NetBash source can be found on Github and downloaded using NuGet.

NetBash – An Alternative to Endless Admin Pages in Asp.Net Web Applications

2011-12-11T11:14:54+00:00

One thing that always annoys me when working on a web app is having to write those inevitable pages full of admin functions some of which are just a single button. When hacking up one such page I had a thought - a plug in library providing a command line for your web app might save me a lot of time. NetBash is what I came up with.

As you can see from the screenshot NetBash is basically a miniature command line complete with that sweet lime green on black theme that lives in your web app. It can be expanded, minimised and hidden with keyboard shortcuts (keymaster ftw) and remembers recent command history using localStorage. NetBash works in a similar way to the MVC Mini Profiler meaning that it can be installed with minimal effort on your part (just a NuGet package) and follows you around your site. This is the setup:

protected void Application_Start()
{
    AreaRegistration.RegisterAllAreas();

    RegisterGlobalFilters(GlobalFilters.Filters);
    RegisterRoutes(RouteTable.Routes);

    NetBash.Init();

    //this is optional, allows you to decide who sees netbash
    NetBash.Settings.Authorize = (request) =>
        {
            return request.IsLocal;
        };
}

The call to Init inserts a couple of routes for the handler, css and js files. You also need to somewhere in your _Layout.cshtml / MasterPage add the RenderIncludes function to write the css and script tags to the page.

NetBash.RenderIncludes()

The way it works is by searching your application using reflection for classes implementing IWebCommand with a WebCommand attribute. The WebCommand attribute defines a name for the command which is used to invoke it as well as a description displayed on help. The IWebCommand interface has a method called Process which passes in a string array of arguments in the same manor that a .NET console application’s main method would. When a command is entered on the front end an ajax request is made to the NetBash handler. The handler grabs the first word of the request text and matches it to a WebCommand with the same name then invokes Process and returns the result. Here is a very simple example command that returns the length of the arguments passed in:

[WebCommand("length", "Returns number of characters in given arguments")]
public class LengthCommand : IWebCommand
{
    public bool ReturnHtml
    {
        get { return false; }
    }

    public string Process(string[] args)
    {
        return string.Join(" ", args).Length.ToString();
    }
}

Hopefully defining commands this way makes it both dead easy to implement while allowing flexibility to do something more complex (perhaps parsing the arguments with nDesk.Options).

It is pretty early days for the code so I probably wouldn’t recommend using it in a production situation at the moment. NetBash is available as a NuGet package and the source on GitHub at lukencode/netbash. I’d love to hear people opinions on the api (nothing is set in stone) as well as the UI which could use some work. I have some ideas for some useful commands (some mad stats with a .net version of spark) also Ben Cull promises me he will write an asp.net membership command pack.

Windows Phone (Mango) Contact Chooser Task

2011-12-01T00:00:00+00:00

When creating the amazing, incredible and life changing app for managing money you borrow and lend Metrowe I was pretty annoyed to discover that in the Mango SDK there are choosers for selecting emails: EmailAddressChooserTask and phone numbers: PhoneNumberChooserTask but not just plain selecting a contact. The problem with the other choosers is the email address will exclude contacts without an email and similarly the phone number chooser and phone numbers. After much complaining decided to develop my own contact chooser (quite closely based off this french one) matching the OS version as closely as possible. This is what it ended up looking like:

Seamless huh? I’ve managed to get the calling code for this down to something nice a simple which pretty much matches the built in choosers:

private void button1_Click(object sender, RoutedEventArgs e)
{
    var contactChooser = new ContactChooserTask();
    contactChooser.OnSelected += new EventHandler<ContactChooserEventArgs>(contactChooser_OnSelected);
    contactChooser.Show();
}

void contactChooser_OnSelected(object sender, ContactChooserEventArgs e)
{
    MessageBox.Show(e.Contact.DisplayName);
}

Under the covers it is a bit of a different story. The display relies on the Silverlight Toolkit’s LongListSelector (which is awesome) and uses code pretty similar to that described by my good friend Benjii in his post: How to Use the Long List Selector for Windows Phone Mango. The code to encapsulate the page is kind of a mish mash of code adapted(/stolen) from the source of the Coding4Fun toolkit (also awesome). That said it seems to work well in my app and in my very limited testing.

The code for the library lives on github at lukencode/ContactChooser and is free and open source fork it, try it out, tell me how I suck then submit a pull request fixing the aforementioned suck! A couple of things that would be cool to see added would be some nice transition animations in and out and some more control over how the chooser looks.

Behind the XAML of the Windows Phone Silverlight Game – Numbertap

2011-09-30T00:00:00+00:00

Numbertap is a Windows Phone game built by me and a few mates (@benjii22, @d1k_is and @fishkopter). It is alive and well in the marketplace right now in the games section. When people ask this is what we tell people Numbertap is:

"NumberTap pits you and your mad math skills against the rest of the world in a fast paced number tapping math frenzy!"

What that actually means is Numbertap is a maths based game where you answer maths questions online organised into 2 minute rounds. At any one time everyone playing the game is playing the same round, at the end scores are tallied and you are placed in your rightful place as king of the maths world on the online leader board. Its kinda like times tables meets guitar hero scoring meets global leader boards. Here is a shot of the game in action:

This post is a collection of the libraries and techniques we found useful in both the windows phone app and the asp.net mvc server side.

The App

Like all good Windows Phone apps we focused on a few key ideas – simply and beautiful design, fluid movement and animation and speedy performance. Listed in no particular order is the technology we used to (hopefully) achieve this.

Silverlight over XNA for a game?!

If I were to guess I would say the vast majority of windows phone games are XNA based (and with good reason!) but we had a couple of reasons to roll with Silverlight:

We know Silverlight. This one is the most obvious 3/4 developers had built reasonably successful apps using Silverlight while 0/4 of us had built anything at all in XNA.
We wanted a kick ass metro design. Building apps with expression blend in Silverlight almost feels like cheating in terms of design. All the styles, colours, buttons and fonts are right there ready to go all the [crap at design] developer has to do is follow Jeff Wilcox’s excellent metro design guideto metro UI heaven (just don't let Jeff catch you missing a 12px margin). Since the gameplay we had in mind was pretty simple and Silverlight animations are actually pretty powerful we didn’t give up too much on the XNA front.
There is no 3.

Awesome Open Source Control Libraries

This is one are where windows phone is really starting to shine, nearly any control you would want UI wise that isn’t in the base SDK exists in a well documented and supported open source library. The two we like best are the official Silverlight Toolkit and the Coding4Fun Toolkit both are available on NuGet.

Silverlight toolkit is more or less a must have in every windows phone app. The most useful thing it brings to the table is really nice and super simple to implement page transitions. Here is an example of some XAML form the Numbertap about page to do turnstile transitions in and out:

<toolkit:transitionservice.navigationintransition>
    <toolkit:navigationintransition>
        <toolkit:navigationintransition.backward>
            <toolkit:turnstiletransition mode="BackwardIn" />
        </toolkit:navigationintransition.backward>
        <toolkit:navigationintransition.forward>
            <toolkit:turnstiletransition mode="ForwardIn" />
        </toolkit:navigationintransition.forward>
    </toolkit:navigationintransition>
</toolkit:transitionservice.navigationintransition>
<toolkit:transitionservice.navigationouttransition>
    <toolkit:navigationouttransition>
        <toolkit:navigationouttransition.backward>
            <toolkit:turnstiletransition mode="BackwardOut" />
        </toolkit:navigationouttransition.backward>
        <toolkit:navigationouttransition.forward>
            <toolkit:turnstiletransition mode="ForwardOut" />
        </toolkit:navigationouttransition.forward>
    </toolkit:navigationouttransition>
</toolkit:transitionservice.navigationouttransition>

The other Silverlight Toolkit feature I really like is the tilt effect, it really helps bring an application to life when elements react to touch. You can automatically add a “tilt” to all eligible controls (buttons, list items, etc) on a page by just adding this to your PhoneApplicationPage xaml.

toolkit:TiltEffect.IsTiltEnabled="True"

Coding4Fun is the other toolkit we make heavy use of. It has a couple of good controls but the ones we really like are the prompts. The input prompt was clean way to prompt players on registration, as with all the Coding4Fun prompts the code is really simple.

var msg = new InputPrompt();
msg.Title = "Create Player";
msg.Message = "Please enter a player name";

msg.Show();

That code (plus a tiny bit extra to add the buttons) gives this result:

These are other prompts we use are the regular message prompt and the toast prompt (that one looks awesome, slides in and out). They use really similar and really simple code to display so I won’t show it again (but if you want to see let me know).

Web Services with RestSharp

I’ve already posted about how much I love RestSharp for communicating with web services in windows phone apps but screw it I will say it again: USE RESTSHARP its fast, simple and reliable.

Prompt Users to Review with AppEvents

With mobile apps getting a good review is pretty much gold. As a user I am very unlikely to try any app with a sub 3/5 star rating. We wanted to give Numbertap the best chance we could at a decent rating by asking users (nicely) to rate the app. We didn’t just want to annoy any user either, we wanted to hit them up when we KNOW they are enjoying the game and they are at a point where they can jump out and give us a good score.

To achieved this lofty goal we used a little library @d1k_is open sourced – AppEvents. The syntax is a little funky so you should probably check out dk’s blog post for a full intro but essentially what we are doing here is running the method AskToRate() when the “games-played” event has been fired 5 or more times and the “rated” event has not occurred.

//in app.xaml.cs set up the rule
AppEventsClient.New(Rule.When("rate-app",
                el => el.Any(e => e.Name == "games-played" && e.Occurrrences.Count >= 5) && !el.Any(e => e.Name == "rated"))
                .Do(r => DispatcherHelper.SafeDispatch(() => AskToRate()))
            );

//when a game has played fire the event
AppEventsClient.Current.Fire("games-played");

This little piece of code has helped us gain 170+ reviews with an average of about 4.5 / 5 so far (hopefully having a cool game helped).

The Icon

When you live in an app store (sorry marketplace… don’t sue me) you basically have two ways to attract any customers that may be passing by. One is to have a good review and the other is a slick icon. Given that no one ever has or (or ever will) describe my artistic skills as “slick” we jumped on the crowd sourcing bandwagon and cruised over to 99designs to get ourselves an icon on the cheap ($140ish). We think it turned out pretty good:

The Server

Like the App we wanted the server side of Numbertap to be fast and simple, this is what we used.

The Framework

We know ASP.NET MVC so just like the Silverlight decision we rolled with what we knew. Turns out combining RestSharp, mvc and a shared class library for the API models makes REST based API’s really easy. Because both our app and server shares a class library for RestSharp models it means that we can easily update our web service responses and have that data available in the app. We return json over xml because json rules – this is how you do it from an MVC controller, this action returns some info on player rank and the current number of players in game:

[HttpPost]
public ActionResult GameStats(LoginRequest loginRequest)
{
    var player = DB.Queries.Player.GetPlayer(loginRequest.ID, loginRequest.PlatformID, loginRequest.GameID, null);

    var response = new GameStatsResponse();

    response.PlayerStats = DB.Queries.Player.GetPlayerStats(loginRequest.GameID, player.PlayerID);
    response.PlayerStats.PlayerRank = DB.Queries.Player.WeeklyRank(player.PlayerID, loginRequest.GameID);

    return Json(response, JsonRequestBehavior.AllowGet);
}

The Platform

Being a multiplayer game Numbertap needed a server side component and where better to look for a server than the cloud? I bet you are thinking I’m going to talk about how awesome azure is right? WRONG! Bottom line is I looked at azure and I looked at the azure pricing table and quickly shut my browser and unplugged my computer before my head exploded. Azure is too hard for a simple developer like me, we wanted easy cloud and found it with App Harbour. App Harbour in their own words is “Azure done right”. Deployment is super simple – pushing to a git repo will build your project, run your tests and deploy. We went with the $10 a month shared Sql Server DB and have the option to add instances to scale at any time BALLIN’.

Hopefully from this rambling post you can pick up a tip or two you can use in your own app. If anyone (ha! like anyone reads my blog) would like some more information on something I have posted here hit my up in the comments and I might do a blog post on it or maybe just send you some code.

Phonealytics “Mango” Update Preview

2011-07-31T00:00:00+00:00

I have been talking up some substantial updates to the live tiles used in my Windows Phone Google Analytics app Phonealytics for some time now. Over the weekend I finally got round to getting started implementing them. The result is a button you can press on your site’s profile page (the first page you get to when you press a site) to pin a live tile of that site to your home screen.

You can pin as many tiles as you like (although I think the background process might struggle with 5+) with the tiles taking the settings for date range (day, week, month, year) of Phonealytics when pinned. The tiles themselves show a bit more data than the current ones with the front of the tile showing visits and % change, the tile will occasionally flip to reveal the bounce rate and time on site. Pressing a tile from the home screen will take you directly the the details of that site in Phonealytics.

These new live tiles are updated entirely from your phone so should be much more reliable than the current tile. The update will be submitted as soon as Microsoft allows mango app updates and hopefully should be ready to go as your phone is updated to mango. The new tiles will definitely be available on the paid version of Phonealytics and possibly will come to the free version eventually now that I don’t need to run a server for them. I am planning on making them a bit more interesting visually to stand out a tad from the sea of [“PhoneAccent”] on everybody’s home screen, any suggestions for the look of the tiles (or anything else) would be awesome.

For those of you who haven’t got the app you can pick it up from the zune marketplace or grab the free version.

Windows Phone 7 App Phonealytics – Sales and Download Numbers

2011-05-07T00:00:00+00:00

Phonealytics is my Windows Phone 7 Google Analytics client. Phonealytics is currently selling for $0.99 in the marketplace with a free trial. Its major features include a live tile updating with a single sites stats, good performance and simple to use “metro” interface. Here I will be giving a rough and rundown of how it has performed along with the changes I have made and am planning. Due to my poor records keeping and Microsoft’s limited app hub reporting the numbers might be off here and there but should be close enough.

Total Numbers

Here are the raw numbers as of 30-MAR-2011:

278
paid

514
trial

792
total

This gives me a conversion rate of about 35% which I am pretty pleased about. The app is sitting on around a 4 star rating (depending which country you are from) and has close to 30 reviews. I get a ton of feedback via email most of it encouraging with some excellent ideas for features. Seeing as though people generally enjoy using the app I am a little disappointed in the sales numbers so far.

Downloads Over Time

Since first launching in the marketplace Phonealytics has been update 5 times. Major changes included adding a trial version of the app on 13-DEC-2010. Due to some pretty solid competing apps I also dropped the price of Phonealytics from $2.99 to $0.99 on 30-JAN-2011. Here is the downloads (trial and paid) per day from the day the app went on sale 25-NOV-2010 to 30-MAR-2011.

In the cumulative graph that Phonealytics has been downloaded at a fairly steady rate since hitting the marketplace.

As you can see the downloads have remained fairly stable throughout the life of the app. I’d like to think that this means the app is pretty good and as new people are introduced to Windows Phone 7 the sales will continue to grow. Spikes in downloads generally coincided with me putting some effort into promoting updates. The free trial has been kept the downloads pretty steady and has a good conversion rate to the paid app. The price drop however hasn't had a great effect.

Estimated Moneys

119
at $2.99

159
at $0.99

0.7
Microsoft's Cut

$358.56
total

I probably shouldn't quit my day job any time soon.

Future Plans

As you may have noticed, the app hub reporting tools are very limited. First change I am making is implementing some decent analytics through Localytics to get a better idea of how many active users Phonealytics has and how they use the app.
I am going to try prompting repeat users to rate and review the app using a library like app events. My plan is to track users who have accessed the core functionality a certain number of times (and not experienced any crashes) and prompt them to review the app. Hopefully by targeting people with a positive experience I can get the average score up over 4.
Adding a separate ad supported free version. This one is a bit of a gamble, the free version will essentially be the same as the paid version minus the live tile functionality. I will track users on the trial version using a similar method to get reviews and ask them if they would like to try the free version instead.
Lowering the price of the app to $0.99 made little difference in terms of sales so I will be upping the price to $1.99 – less than the original price but still an increase.
Continued updating of the app’s functionality. Though Phonealytics hasn’t been a financial success I have really enjoyed making it. I am planning some cool features around the Mango update API – most significant being multiple live tiles with more information on them.

My Tips

Encourage feedback from your users, I use a real simple section on my settings page with a button that fires of an EmailComposeTask sent to me with Phonealytics as the subject.
People like the “metro” style. If you are not a designer (like myself) keep to its guidelines and you should end up with something decent looking. Don’t be afraid to add some colour though, you don’t want to look like a hello world sample. Basically follow everything Jeff Wilcox suggests in his Metro Design Guide.
If you have a paid app be sure to include a trial. Make the trial is of some use and remind users a paid version exists. One thing I found to work well is showing the user an example of the functionality they are missing from the full version with a button linking to the marketplace to purchase it.

Fluent Email Now Supporting Razor Syntax For Templates

2011-04-30T00:00:00+00:00

See an updated (2018) example of sending in .NET core email using FluentEmail.

A while back I wrote Fluent Email, a little .NET wrapper for sending emails with System.Net.Mail using a fluent interface. After relentless requests (there was at least 2) to publish the library on NuGet.org I eventually caved in. You can add Fluent Email to your project using Nuget’s built in library package manager or the following package console command.

The library is pretty simple buts makes the code for sending emails easy to use and read.

var email = Email
            .From("john@email.com")
            .To("bob@email.com", "bob")
            .Subject("hows it going bob")
            .Body("yo dawg, sup?");

            //send normally
            email.Send();
            
            //send asynchronously
            email.SendAsync((sender, e) =>
            {
                Console.WriteLine("Email Sent");
            });

There are a few other methods not shown here that work in a similar way for adding the usual email suspects such as CC, BCC and ReplyTo.

I had also been playing around with some form of templating when I came across RazorEngine. RazorEngine is an awesome library that brings the razor syntax (from MVC3) to other applications. In Fluent Email we use RazorEngine to make email templates as simple as this:

var template = "Dear @Model.Name, You are totally @Model.Compliment.";

var email = Email
            .From("bob@hotmail.com")
            .To("somedude@gmail.com")
            .Subject("woo nuget")
            .UsingTemplate(template, new { Name = "Luke", Compliment = "Awesome" });

This will set the body of the email to the rendered template “Dear Luke, You are totally Awesome." and can be sent the same way as the first example. The UsingTemplate method uses generics so you can pass in a specific type or just use an anonymous object like in the example. If you prefer to use a seperate file for your template there is a method called UsingTemplateFromFile to handle that. Since RazorEngine supports everything you would expect from the Razor view engine so does Fluent Email!

If you want to take a look at the code it is hosted on Github at lukencode/fluentemail otherwise just grab the NuGet package.

Windows Phone 7 Charts

2010-12-09T00:00:00+00:00

One of the big features of my Windows Phone 7 Google Analytics Client – Phonealytics is the nice (I think) looking graphs. After briefly considering porting an existing Silverlight solution to wp7 I stumbled upon Quick Charts by amCharts. Quick Charts is a lightweight and more importantly free chart control for Windows phone 7. It’s a bit light on options but very easy to get working and looks good.

The xaml for a line chart is pretty straightforward. You can see I am using the phone’s inbuilt styles partially because it looks awesome and partially because I am a terrible designer. The things to note here are setting the CategoryValueMemberPath to the name of the property in your model you want the graph to use as the label and in the LineGraph section setting the ValueMemberPath to the property you want to chart. The title property of the LineGraph renders on a small legend. One tip I have is setting IsEnabled to false when the graph is loading (or just in general) I got an exception tapping the graph before any data has been bound.

<amcharts_windows_quickcharts:serialchart isenabled="False" datasource="{Binding GraphData}" x:name="chtMain" 
categoryvaluememberpath="Label" verticalalignment="Top">
    
    <amcharts_windows_quickcharts:serialchart.foreground>
        <solidcolorbrush color="{StaticResource PhoneForegroundColor}" />
    </amcharts_windows_quickcharts:serialchart.foreground>
    
    <amcharts_windows_quickcharts:serialchart.borderbrush>
        <solidcolorbrush color="{StaticResource PhoneBorderColor}" />
    </amcharts_windows_quickcharts:serialchart.borderbrush>
    
    <amcharts_windows_quickcharts:serialchart.axisforeground>
        <solidcolorbrush color="{StaticResource PhoneForegroundColor}" />
    </amcharts_windows_quickcharts:serialchart.axisforeground>
    
    <amcharts_windows_quickcharts:serialchart.background>
        <solidcolorbrush color="{StaticResource PhoneBackgroundColor}" />
    </amcharts_windows_quickcharts:serialchart.background> 
    
    <amcharts_windows_quickcharts:serialchart.graphs>
        <amcharts_windows_quickcharts:linegraph title="Visits" valuememberpath="Value" strokethickness="5">
            <amcharts_windows_quickcharts:linegraph.brush>
                <solidcolorbrush color="{StaticResource PhoneAccentColor}" />                                        
            </amcharts_windows_quickcharts:linegraph.brush>
        </amcharts_windows_quickcharts:linegraph>
    </amcharts_windows_quickcharts:serialchart.graphs>    
    
</amcharts_windows_quickcharts:serialchart>

I use an ObservableCollection of the super simple ChartDataPoint class below, with just the top properties I set on the chart xaml above.

public class ChartDataPoint
{
    public string Label { get; set; }
    public double Value { get; set; }
}

Here is a screen of the resulting graph with a dark / blue theme.

Quick charts also allows for some pretty delicious pie charts. Here is one I prepared earlier:

<amcharts_windows_quickcharts:piechart margin="0" isenabled="False" titlememberpath="Label" 
valuememberpath="Value" datasource="{Binding PieData}">
    <amcharts_windows_quickcharts:piechart.brushes>
        <solidcolorbrush color="{StaticResource PhoneAccentColor}" />
        <solidcolorbrush color="{StaticResource PhoneAccentColor}" opacity="0.8" />
        <solidcolorbrush color="{StaticResource PhoneAccentColor}" opacity="0.6" />
        <solidcolorbrush color="{StaticResource PhoneAccentColor}" opacity="0.4" />
        <solidcolorbrush color="{StaticResource PhoneAccentColor}" opacity="0.2" />
        <solidcolorbrush color="{StaticResource PhoneAccentColor}" opacity="0.1" />
    </amcharts_windows_quickcharts:piechart.brushes>
    <amcharts_windows_quickcharts:piechart.foreground>
        <solidcolorbrush color="{StaticResource PhoneForegroundColor}" />
    </amcharts_windows_quickcharts:piechart.foreground>
</amcharts_windows_quickcharts:piechart>

Again I am using the default phone colours, this time I set a few brushes with different opacities. These will be used depending on the number of slices in your pie. Speaking of pie, here is what it looks like.

Phonealytics – Google Analytics App for Windows Phone 7

2010-11-28T00:00:00+00:00

Phonealytics, as you may have guessed, is a Google Analytics client for Windows Phone 7. Phonealytics focuses on speed, getting information at a glance and blending in with your phone’s OS and style. The app is priced at $2.99 USD and is available (almost) worldwide. Get the Phonealytics app from the Zune marketplace here.

The Official Line

Phonealytics is a Google Analytics Client. With Phonealytics you get all the important traffic stats for your website available in your pocket. Phonealytics focuses on providing information at a glance and in line with your phones theme key features include:

Pin favourite sites to the app homepage for quick stats and access
Configure an automatically updating live tile for your phones home screen
Phonealytics follows your phones theme settings, no matter how white and pink you make them
Fancy charts!

Future Features

These are the features I’ve got planned for future releases, I look forward to getting feedback and implementing some of the features you guys want from analytics on the go.

Keywords / Search engine reports
More in-depth sources and referrers report
Visitors report showing country, city, browser, etc

Writing AJAX web applications in Asp.Net MVC

2010-09-26T00:00:00+00:00

Asp.Net MVC and jQuery have made it much easier to build awesome Gmail like ajax powered applications. I am going to run through the technique I used to do the ajax web services, call them in javascript and display the html through a template.

What Do I Need?

An Asp.Net MVC web application
jQuery
jQax – a wrapper around jQuery ajax
jQote – a simple lightweight jQuery templating engine

What Do I Do?

Lets start at the web application because you probably already have something there. Pick a nice simple controller action you wish was ajaxy – say displaying some gig (also know as concert) info?

You probably have a view model you hand to your concert details page. Here is a simplified version of what I use:

public class GigViewModel
{
	public int GigID { get; set; }
	public string StartDate { get; set; }
	public string Name { get; set; }
}

I am using a string to represent the date to make the eventual javascript I have to write simpler.

//
// GET: /Gig/Details/5

public ActionResult Details(int id)
{
	var gigSession = new GigSession();
	var gig = gigSession.Single(g =>; g.GigID == id);

	if (Request.IsAjaxRequest())
	{
		return Json(new GigViewModel(gig), JsonRequestBehavior.AllowGet);
	}
	
	return View("GigDetails", new GigViewModel(gig));
}

I have here a pretty standard controller action it grabs some data from the database (the session stuff) dumps it into a view model and returns it to a view. What I’ve added is the Request.IsAjaxRequest() statement. This statement checks the headers of the incoming request for “XMLHttpRequest” meaning the request originated in javascript. If we have an ajax request I use the MVC method Json() to return a json representation of my view model instead of a view. The JsonRequestbehavior parameter allows this control to return json on a Get request.

Now that the backend is set up to give us our json we need to write some javascript to request it. I am using jQax to make this a bit simpler but you could go vanilla jQuery if that floats your boat.

var ajax = $.jQax();

ajax.Get("/gig/1"", null, function (data) {
	alert("woo a json gig - " + data)
});

This bit of javascript uses jQax to make a get request to the url “/gig/1” to get the very first gig in my database. That null parameter is used to set query string parameters which I didn’t need in this case. jQax also has a few other pretty cool options that you can check out on benjii’s blog, for now we will keep it simple.

So now that we have our json gig what should we do with it? You coooouuuld manually set some html up and inject it into a container or you could do what the cool kids are doing and use a template engine. A template engine basically allows you to set up a sort of javascript view which renders the model (a json object) you pass to it. I am using jQote (what’s with the stupid names?) which under the covers uses John Resig’s micro templating code which in turn invokes black voodoo magic to do it’s bidding (its quite complicated).

Before I show you the template this little bit is important to us asp.net developers. By default jQote will want to use tags like: <%= %>. Asp,Net doesn’t like that so we change jQote’s tag character to be something else, I like #.

$.jqotetag"#");

It is easiest to do this once on document load before you attempt to do any templates.

jQote templates look pretty similar to MVC views using javascript rather than C#. They also work best when they live in a script tag like so:

<script type="text/x-jqote-template" id="GigDetailsTemplate">
	<div class="gigDetails">
		<h2><#= this.Name #></h2>
		<span class="date"><#= this.StartDate #></span>
	</div>
</script>

The “this” in the template refers to the json object you pass it. This example is pretty simple but jQote allows you do easily work with lists, conditions and pretty much any other javascript – the doco page has some pretty good examples.

Now all the pieces are in place it is just a matter of giving the gig json to the GigDetailsTemplate and putting the resulting html somewhere on the page. jQote has a few different methods depending if you want to replace, append, prepend or just get the raw html. This example alters the code used to get the gig json to use the jqotesub method which will replace whatever you had in the target dom element with the rendered template html:

var ajax = $.jQax();

ajax.Get("/gig/1", null, function (data) {
	$("#gigWrapper").jqotesub("#GigDetailsTemplate", data);
});

First we use jQuery to select the container we want the html in. Next we call jqotesub with the selector for the template we created above and the gig json data returned from the ajax call. BAM! The template is filled out with the values of the gig and displayed on the page.

Helpful Tips

I found to keep things organized creating templates as Partial Views in MVC and then rendering them on the pages they are required worked well.
In your view models try to avoid DateTime – its pretty annoying trying to display javascript dates how you like.

C# String Extension Methods

2010-08-18T00:00:00+00:00

Ah extension methods… where would we be without them? Writing slightly more code to perform common functions that’s where! I am fairly sure everyone has their own set of string extensions so I though I’d share what I currently have then you guys can shoot it down and direct me to / yell at me something more useful. Everybody wins!

I am also experimenting with using Github's Gist for my code samples (with help from a handy wordpress plugin). The idea is this makes it easier for me to update and you to clone, steal, comment, share etc. Let me know if it works.

Google and Yahoo Add to Calendar Html Helpers for Asp.net MVC

2010-08-09T00:00:00+00:00

I’ve been working on implementing some iCal functionality for the my gig guide website – Gigpig so users could easily add concert dates to their calendars. This works fine and dandy if you have some desktop program to handle iCal files. I have however been informed that the cool kids roll with Google Calendar (and some strange people with Yahoo?!). I dug around a bit and found you can easily prompt users to add events to these calendars using a link to the calendar with the event details in the query string.

If you want to play around with these parameters I recommend using google’s tools to create a button for google calendar and following the guide on this site for yahoo.

I’ve gone ahead and wrapped them up into some Html helpers for Asp.Net MVC. I didn’t go overboard with the options here so if you will probably want to tweak the code a bit. Calling the helpers is a little wieldy but gets the job done (yahoo is more of the same).

<%= Html.GoogleCalendar("add to google calendar", "a test event!", DateTime.Now, null, "its a test", "testington", "websitename", "www.website.com") %>

Here are some rendered links I prepared earlier:

Google Calendar Event

Yahoo Calendar Event

Rest Web Services In Windows Phone 7

2010-08-04T00:00:00+00:00

I’ve been messing around with some Window Phone 7 development lately and thought I would share how I have been calling web services with RestSharp (I’ve written a little about RestSharp previously using the google weather api).

For those who don’t know RestSharp is a REST client for .NET which has recently added silverlight and Windows Phone 7 support. RestSharp has some really great features to simplify calling web services including:

Automatic XML and JSON deserialization
Fuzzy name matching ('product_id' in XML/JSON will match property named 'ProductId')
Automatic detection of type of content returned
GET, POST, PUT, HEAD, OPTIONS, DELETE supported

Windows Phone 7 basically enforces (with good reason) async web requests – luckily RestSharp has our back on that front. I’m going to use some example code from the Google Reader app I’ve been playing around with – GREAD. Here is a simple example of asynchronously calling a web service using RestSharp to authenticate with with google accounts:

var client = new RestClient("https://www.google.com");

var request = new RestRequest("accounts/ClientLogin", Method.POST);
request.AddParameter("service", "reader", ParameterType.GetOrPost);
request.AddParameter("accountType", "GOOGLE", ParameterType.GetOrPost);
request.AddParameter("source", _source, ParameterType.GetOrPost);
request.AddParameter("Email", _username, ParameterType.GetOrPost);
request.AddParameter("Passwd", _password, ParameterType.GetOrPost);

client.ExecuteAsync(request, (response) =>
{
    var auth = ParseAuthToken(response.Content);
});

RestSharp will automatically build the request with the parameters it is given. These can be get/post, cookies or http headers. The ExecuteAsync method takes the request to make and an action to execute when finished.

I come from a web development background living the good life making synchronous requests. Developing in Silverlight requires a bit of an adjustment with a big focus on event driven asynchronous programming. The pattern I am using I’ve tried to avoid all the plumbing involved in hooking up and firing off event handlers. Here is the basic pattern I use for api calls, in this instance I am grabbing all the feed items for the given label:

public void GetLabelFeed(string label, Action<Model.Feed> success, Action<string> failure)
{
    string resource = "reader/api/0/stream/contents/user/-/label/" + label;

    var request = GetBaseRequest();
    request.Resource = resource;
    request.Method = Method.GET;
    request.AddParameter("n", 20); //number to return

    _client.ExecuteAsync<Model.Feed>(request, (response) =>
    {
        if (response.ResponseStatus == ResponseStatus.Error)
        {
            failure(response.ErrorMessage);
        }
        else
        {
            success(response.Data);
        }
    });
}

I pass two callbacks to the method, one for success and one for failure. In this example I am using RestSharp’s auto deserialzation into the class Model.Feed by calling ExecuteAsync<Model.Feed>(). Depending on the status of the request either failure or success action is called.

To use these methods in my wp7 application I use inline delegates to handle the events. One thing to be aware of is the code on these callbacks will run in the background thread and you wont see anything change on the UI. To fix this make sure the data binding code is executed in the UI thread using the dispatcher. I use a DispatcherHelper class borrowed from the MVVM Light Toolkit.

        
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
	api.GetLabelFeed(
    	feedId,
    	(items) => DispatcherHelper.SafeDispatch(() =>
    	{
        	this.DataContext = items;
        	progressBar.Visibility = System.Windows.Visibility.Collapsed;
    	}),
    	(error) => DispatcherHelper.SafeDispatch(() =>
    	{
        	MessageBox.Show(error);
        	progressBar.Visibility = System.Windows.Visibility.Collapsed;
    	}));

    	base.OnNavigatedTo(e);
}

I found this structure has kept my code reasonable clean and has handled all cases in the simple web requests I have made but since I’m new to Silverlight I’m sure it could be better.

Windows Phone 7 Google Reader App (GREAD) Work In Progress

2010-07-29T00:00:00+00:00

I’ve spent the last couple of days playing around with some Windows Phone 7 development. I decided to create a simple Google reader client as a practice app that later on down the track might at least be useful to me. Considering I have no background in Silverlight (mainly just web applications) I think I’ve managed to come quite a long way in a short amount of time.

View Full Album

The app current pulls in the given users unread counts and labels on the home screen with the labels located a swoosh to the right. From there you can jump straight to view a story or drill down into one of your labels.

Before I go too much further I would like to try get some feedback/ideas on what people want from a Google reader client (if anything).

The design is obviously a little dodgy at the moment my main plan here is to try utilized the wp7 concept of horizontal space. I am waiting for the official panorama/pivot controls and will look to implement those.

Features wise at the moment all the client does is query the Google reader api for feeds an stories. I am going to implement the core reader functionality – read and unread, starring and notes as well as some type of social sharing. I’d like to know how important offline reading / caching is to people so I can decide how much effort I need to put into that side of the application.

If you have any ideas let me know in the comments or on twitter - @lukencode.

Getting Started With MongoDB and NoRM

2010-07-09T00:00:00+00:00

I just realised - I hate writing SQL. I hate it, I hate it, I hate it. I have also recently noticed a growing trend in SQL alternatives or “nosql” with open source C# drivers. Today I put one and one together and decided to try out one of these – MongoDB using the C# driver NoRM. Why this idea didn't occur to me earlier I will never know.

What is MongoDB?

MongoDB is one of a growing number of nosql databases. In short these databases are non relational and schema free. I won’t attempt to give a full rundown of the pros and cons of nosql but the stated benefits are generally saleability, performance and simplicity.

MongoDB is a document orientated database storing data on disk as binary json. Some key features include indexing, rich queries, map reduce and horizontal scalability.

The Mongo website sums it all up much better than I do so you should probably just go there:

MongoDB bridges the gap between key-value stores (which are fast and highly scalable) and traditional RDBMS systems (which provide rich queries and deep functionality).

MongoDB (from "humongous") is a scalable, high-performance, open source, document-oriented database.

For installation instructions for Mongo I recommend taking a look at the Windows Quickstart guide.

What (or who) is NoRM?

NoRM is an open source .Net library for connecting to MongoDB. Its main drawcards for me are:

NoRM is strongly typed. It uses plain .net classes when querying and updating the database.
Uses linq for queries
Simple and convention based. NoRM makes it really simple to get persistence up and running as I will soon demonstrate.

To get NoRM head over to http://github.com/atheken/NoRM.

Using NoRM in C#

I’m going to be using NoRM with a pretty standard session pattern. My MongoSession will implement the following ISession interface which uses linq expressions for queries.

public interface ISession : IDisposable
{
    void CommitChanges();
    void Delete<T>(Expression<Func<T, bool>> expression) where T : class, new();
    void Delete<T>(T item) where T : class, new();
    void DeleteAll<T>() where T : class, new();
    T Single<T>(Expression<Func<T, bool>> expression) where T : class, new();
    System.Linq.IQueryable<T> All<T>() where T : class, new();
    void Add<T>(T item) where T : class, new();
    void Add<T>(IEnumerable<T> items) where T : class, new();
    void Update<T>(T item) where T : class, new();
}

The MongoSession class is based off the one found in the mvcstarter project and uses NoRM to implement ISession. The constructor for this class sets up the Mongo connection looking for a web.config connection string entry named “db”. An example connection string is given after the code.

public class MongoSession : ISession
{
    private Mongo _provider;
    public MongoDatabase DB { get { return this._provider.Database; } }

    public MongoSession()
    {
        //this looks for a connection string in your Web.config
        _provider = Mongo.Create("db");
    }

    public void CommitChanges()
    {
        //mongo isn't transactional in this way
    }

    public void Delete<T>(System.Linq.Expressions.Expression<Func<T, bool>> expression) where T : class, new()
    {
        var items = All<T>().Where(expression);
        foreach (T item in items)
        {
            Delete(item);
        }
    }

    public void Delete<T>(T item) where T : class, new()
    {
        DB.GetCollection<T>().Delete(item);
    }

    public void DeleteAll<T>() where T : class, new()
    {
        DB.DropCollection(typeof(T).Name);
    }

    public T Single<T>(System.Linq.Expressions.Expression<Func<T, bool>> expression) where T : class, new()
    {
        return All<T>().Where(expression).SingleOrDefault();
    }

    public IQueryable<T> All<T>() where T : class, new()
    {
        return _provider.GetCollection<T>().AsQueryable();
    }

    public void Add<T>(T item) where T : class, new()
    {
        DB.GetCollection<T>().Insert(item);
    }

    public void Add<T>(IEnumerable<T> items) where T : class, new()
    {
        foreach (T item in items)
        {
            Add(item);
        }
    }

    public void Update<T>(T item) where T : class, new()
    {
        DB.GetCollection<T>().UpdateOne(item, item);
    }

    //Helper for using map reduce in mongo
    public T MapReduce<T>(string map, string reduce)
    {
        T result = default(T);
        MapReduce mr = DB.CreateMapReduce();

        MapReduceResponse response =
            mr.Execute(new MapReduceOptions(typeof(T).Name)
            {
                Map = map,
                Reduce = reduce
            });
        IMongoCollection<MapReduceResult<T>> coll = response.GetCollection<MapReduceResult<T>>();
        MapReduceResult<T> r = coll.Find().FirstOrDefault();
        result = r.Value;

        return result;
    }

    public void Dispose()
    {
        _provider.Dispose();
    }
}

<connectionStrings>
  <add name="db" connectionString="mongodb://localhost/testdb?strict=true"/>
</connectionStrings>

One of the best things about Mongo and NoRM is that NoRM will store plain and simple .net objects. This means we can define our models completely in code. Because Mongo is schema less we can also add and remove properties without any problems.

I am going to store a simple Trip class for a scheduling application. There are a couple of things to note about this code, first is the [MongoIdentifier] Attribute. Mongo requires collections have a unique identifier. When using NoRM the options you can use are: Guid/UUID, int, or ObjectId. The property must also be named either _id or Id. NoRM will handle generating the identifier when it is required. To keep my example simple I am using an integer. For more complete guidelines check the BSON Serializer page.

public class Trip
{
    [MongoIdentifier]
    public int? Id { get; set; }
    public string Name { get; set; }

    public DateTime Start { get; set; }
    public int Duration { get; set; }

    public Trip()
    {
        Start = DateTime.Now;
    }
}

The code to store the Trip class is very simple. The session’s add method will automatically store the object in the database as well as assigning it an Id.

var trip = new Trip() 
{ 
    Name = "test trip",
    Duration = 5,
    Start = DateTime.Now
};

using (var session = new MongoSession())
{
    session.Add(trip);
}

BAM! Here is the object I just saved viewed in the mongo shell. It has been assigned an identifier and stored in a collection called Trip. There was no need to define the structure of the object or to create a collection to store it in, this all happens automatically and is part of what makes coding with Mongo so refreshing.

Finding the document with code is simple using the linq methods of MongoSession.

using (var session = new MongoSession())
{
    var trip = session.Single<Trip>(t => t.Name == "test trip");
}

This is obviously a very basic overview of programming with Mongo and NoRM and therefore I have skipped over some of the more advanced features. NoRM’s linq provider is pretty good but on complex queries you may run into some issues. NoRM also has some configuration code you can add to optimise the way your objects are stored. Overall I am finding working without the constraints of a schema and letting your code define your data storage is a great way to program.

IP to Geo Location in Asp.Net MVC

2010-05-19T00:00:00+00:00

I have been working on a couple of projects recently (like the new and improved version of Gigpig which is coming soon!) which could really benefit from some automagic geolocation lookups for visitors. In the case of Gigpig I wanted to filter what gigs users could see based on where they were in the world.

The database I am using is the binary version of the Max Mind GeoLite City free location database. The database essentially maps IP address ranges to cities and countries. The binary format, I am informed is the fastest version however there is a csv file you can download and import into your database of choice.

Max Mind provide some C# code for querying the binary database but it takes a little work to set up where as I never like doing work someone else has done for me. The library I use is the GoogleMaps.Subgurim.NET which as well as from google map functions provides code to access the GeoLite City database.

The code to call the Subgurim methods is super simple. Here I am returning the location class which is also included in the library – it has properties for longitude, latitude, country, city and a few other things. All that needs to be passed to it is the location of your database and the ip address you want to look up.

public static Location GetLocationFromIP(string ipAddress)
{
    string databasePath = HttpContext.Current.Server.MapPath("~/app_data/geocitylite.dat");
    LookupService service = new LookupService(databasePath);
    Location loc = service.getLocation(ipAddress);

    return loc;
}

One way I like to use this code in Asp.Net MVC is including some properties in a base controller class that my controllers all inherit so I can access the current location on any controller. One thing to be aware of is the lookup will return null for the ip address 127.0.0.1 so you might want to hard code it for testing.

public class ControllerBase : Controller
{
    public string CurrentUserIPAddress
    {
        get
        {
            return HttpContext.Request.UserHostAddress;
        }
    }

    public Location CurrentLocation
    {
        get
        {
            if (Request.Cookies["pref"] == null)
            {
                var loc = LocationHelper.GetLocationFromIP(CurrentUserIPAddress);

                if (loc != null)
                {
                    Response.Cookies["pref"]["city"] = loc.city;
                    Response.Cookies["pref"]["country"] = loc.countryCode;
                    Response.Cookies["pref"]["lat"] = loc.latitude.ToString();
                    Response.Cookies["pref"]["lng"] = loc.longitude.ToString();
                    Response.Cookies["pref"].Expires = DateTime.Now.AddDays(1);
                }

                return loc;
            }
            else
            {
                var loc = new Location
                {
                    city = Request.Cookies["pref"]["city"],
                    countryCode = Request.Cookies["pref"]["country"],
                    latitude = Convert.ToDouble(Request.Cookies["pref"]["lat"]),
                    longitude = Convert.ToDouble(Request.Cookies["pref"]["lng"]),
                };

                return loc;
            }
        }
    }
}

I also cache the user’s location in a cookie so I can avoid doing a database query for every request. There are a couple of ways you could implement IP address to geo location including some variations of this code – but if you just want something quick and easy this is a good starting point.

Timesaving CSS Tools for ASP.Net Developers

2010-05-04T13:35:21+00:00

Are you a developer?

Are you a lazy developer?

Do you hate doing web design?

If you answered yes to that last question you have come to the right blog post. I am going to show you three simple to use libraries to make working with CSS much less painful giving you time to get back to the good stuff – pointlessly refactoring your code!

1. Blueprint CSS

First cab off the rank is the Blueprint CSS Framework. Blueprint combines a solid reset file, good looking default typography and an easy to use grid system.

The purpose of the reset file is fairly straightforward – removing some browser inconsistencies.

The typography defaults are great as a sane starting point for padding, sizes, line height and all the other stuff designers write novels on but us developers have really no idea about. The values are also set in em so they should scale to the user’s font size appropriately.

Last but not least is Blueprint’s grid system. This I am not totally sold on but at the very least its useful for getting together a quick prototype. Essentially the system uses classes such as ‘container’, ‘span-10’ and ‘last’ to quickly and easily bust out complex layouts.

Here is a basic example with a header, content, footer and sidebars.

<div class="container">
    <div class="span-24 last">
        Header
    </div>
    <div class="span-4">
        Left sidebar
    </div>
    <div class="span-16">
        Main content
    </div>
    <div class="span-4 last">
        Right sidebar
    </div>
</div>

2. Bundler

When building a public facing website its usually a good idea to combine and minify your CSS(and javascript) files into a single file. This of course is a huge pain in the ass. It is possible to use something like the Yahoo YUI Compressor and an MSBuild task to automate this but then you run into problems for things like debugging your CSS.

Enter Bundler. Bundler essentially reduces combining and minifying of CSS and javascript into on tiny bit of code -

<%= Bundle.Css()
        .AddCss("~/css/reset.css")
        .AddCss("~/css/site.css")
        .RenderCss("~/css/combined.css") %>

Bundler combines and minifies reset.css and site.css into one file – combined.css. It also takes care of ensuring old files aren’t cached and will not combine your files if the website is running in debug mode. Using bundler you have the freedom to split your CSS up into manageable pieces without sacrificing load times.

3. LESS CSS (using Bundler)

Last on the list is LESS CSS.

In its own words - “LESS extends CSS with: variables, mixins, operations and nested rules”.

In my words LESS allows you to write CSS more like you would normally write code allowing you to keep your CSS files DRY (don’t repeat yourself… dammit I just repeated myself). It achieves this by using this variables, mixins which are kind of like functions and a few other nifty features.

For the two readers who have gotten this far and clicked through the link will notice LESS CSS is targeted at ruby and not at .Net. However our good friend from step 2 – Bundler (or dotlesscss) will automatically parse CSS files ending with .less using the LESS CSS language.

Variables behave exactly as you would expect them to and are awesome for making sure you don’t keep repeating yourself with things like colours.

@brand_color: #4D926F;

#header {
  color: @brand_color;
}

h2 {
  color: @brand_color;
}

The other feature I really love is mixins. Mixins behave in a way like functions that take parameters as input and return a set of CSS properties based off those parameters. CSS 3 rounded corners are a good example of this.

.rounded_corners (@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded_corners;
}

LESS has a number of other cool features you can check out on the documentation.

Calling Web Services in Android using HttpClient

2010-04-27T11:02:21+00:00

I’ve decided recently to branch out from mainly web development into the mobile app space – starting with Google’s Android (because I own a Android phone). One of the first things I wanted to do was start calling webservices, specifically Google Analytics.

Now I am pretty new to Android and Java in general but I feel I’ve come up with a nice simple way to make requests to web services and APIs (and plain html pages if you want). The class uses the org.apache.http library which is included in Android.

This is the code for the class.

public class RestClient {

    private ArrayList <NameValuePair> params;
    private ArrayList <NameValuePair> headers;

    private String url;

    private int responseCode;
    private String message;

    private String response;

    public String getResponse() {
        return response;
    }

    public String getErrorMessage() {
        return message;
    }

    public int getResponseCode() {
        return responseCode;
    }

    public RestClient(String url)
    {
        this.url = url;
        params = new ArrayList<NameValuePair>();
        headers = new ArrayList<NameValuePair>();
    }

    public void AddParam(String name, String value)
    {
        params.add(new BasicNameValuePair(name, value));
    }

    public void AddHeader(String name, String value)
    {
        headers.add(new BasicNameValuePair(name, value));
    }

    public void Execute(RequestMethod method) throws Exception
    {
        switch(method) {
            case GET:
            {
                //add parameters
                String combinedParams = "";
                if(!params.isEmpty()){
                    combinedParams += "?";
                    for(NameValuePair p : params)
                    {
                        String paramString = p.getName() + "=" + URLEncoder.encode(p.getValue(),”UTF-8″);
                        if(combinedParams.length() > 1)
                        {
                            combinedParams  +=  "&" + paramString;
                        }
                        else
                        {
                            combinedParams += paramString;
                        }
                    }
                }

                HttpGet request = new HttpGet(url + combinedParams);

                //add headers
                for(NameValuePair h : headers)
                {
                    request.addHeader(h.getName(), h.getValue());
                }

                executeRequest(request, url);
                break;
            }
            case POST:
            {
                HttpPost request = new HttpPost(url);

                //add headers
                for(NameValuePair h : headers)
                {
                    request.addHeader(h.getName(), h.getValue());
                }

                if(!params.isEmpty()){
                    request.setEntity(new UrlEncodedFormEntity(params, HTTP.UTF_8));
                }

                executeRequest(request, url);
                break;
            }
        }
    }

    private void executeRequest(HttpUriRequest request, String url)
    {
        HttpClient client = new DefaultHttpClient();

        HttpResponse httpResponse;

        try {
            httpResponse = client.execute(request);
            responseCode = httpResponse.getStatusLine().getStatusCode();
            message = httpResponse.getStatusLine().getReasonPhrase();

            HttpEntity entity = httpResponse.getEntity();

            if (entity != null) {

                InputStream instream = entity.getContent();
                response = convertStreamToString(instream);

                // Closing the input stream will trigger connection release
                instream.close();
            }

        } catch (ClientProtocolException e)  {
            client.getConnectionManager().shutdown();
            e.printStackTrace();
        } catch (IOException e) {
            client.getConnectionManager().shutdown();
            e.printStackTrace();
        }
    }

    private static String convertStreamToString(InputStream is) {

        BufferedReader reader = new BufferedReader(new InputStreamReader(is));
        StringBuilder sb = new StringBuilder();

        String line = null;
        try {
            while ((line = reader.readLine()) != null) {
                sb.append(line + "\n");
            }
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            try {
                is.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return sb.toString();
    }
}

Here is an example of how I use the class to call the Google Analytics API. I use the AddParam methods to add query string / post values and the AddHeader method to add headers to the request. RequestMethod is a simple enum with GET and POST values.

RestClient client = new RestClient(LOGIN_URL);
client.AddParam("accountType", "GOOGLE");
client.AddParam("source", "tboda-widgalytics-0.1");
client.AddParam("Email", _username);
client.AddParam("Passwd", _password);
client.AddParam("service", "analytics");
client.AddHeader("GData-Version", "2");

try {
    client.Execute(RequestMethod.POST);
} catch (Exception e) {
    e.printStackTrace();
}

String response = client.getResponse();

The class also exposes the Http response code and message which are important when using some Restful APIs. I know could definitely improve/extend on this code and would love to hear from those more experienced in Java and Android than myself.

Split String Into Array of Chunks

2010-04-21T00:00:00+00:00

Here is a little function I needed to use today for spliting a string into an array of strings of a given length rather than by a particular character. I ran into a situation where the database columns I wanted to insert some text into were split over a number of columns eg “DescriptionLine1”, “DescriptionLine2”, “DescriptionLine3”.

Through the magic of extension methods I can split the string into chunks using this code.

var splitItemDescription = item.Product.Description.SplitIntoChunks(40);

Here is the code for the extension method, written in C#.

 public static string[] SplitIntoChunks(this string toSplit, int chunkSize)
 {
      int stringLength = toSplit.Length;
 
      int chunksRequired = (int)Math.Ceiling((decimal)stringLength / (decimal)chunkSize);
      var stringArray = new string[chunksRequired];
 
      int lengthRemaining = stringLength;
 
      for (int i = 0; i < chunksRequired; i++)
      {
          int lengthToUse = Math.Min(lengthRemaining, chunkSize);
          int startIndex = chunkSize * i;
          stringArray[i] = toSplit.Substring(startIndex, lengthToUse);
             
          lengthRemaining = lengthRemaining - lengthToUse;
      }
             
      return stringArray;
 }

The method takes into account strings of which the length is not a factor of the chunk size being used by using what is remaing of the string for the last element of the array.

Google Weather API with RestSharp

2010-04-14T00:00:00+00:00

Guest post by DK!

The Google Weather API is a grand service for developers to get weather data for any location with ease. RestSharp is a open source .NET REST Client…

Been doing some work getting weather information from Google Weather and I thought I might take the time to explain how I used Restsharp with this API. I started with the xml from the API itself.

http://www.google.com/ig/api?weather=Brisbane+au

<xml_api_reply version="1">
    <weather>
        <forecast_information>
            <city data="Brisbane, QLD"/>
            <postal_code data="Brisbane au"/>
            <latitude_e6 data=""/>
            <longitude_e6 data=""/>
            <forecast_date data="2010-04-14"/>
            <current_date_time data="2010-04-14 14:00:00 +0000"/>
            <unit_system data="US"/>
        </forecast_information>
        <current_conditions>
            <condition data="Partly Cloudy"/>
            <temp_f data="72"/>
            <temp_c data="22"/>
            <humidity data="Humidity: 64%"/>
            <icon data="/ig/images/weather/partly_cloudy.gif"/>
            <wind_condition data="Wind: SW at 14 mph"/>
        </current_conditions>
        <forecast_conditions>
            <day_of_week data="Wed"/>
            <low data="64"/>
            <high data="78"/>
            <icon data="/ig/images/weather/chance_of_rain.gif"/>
            <condition data="Chance of Rain"/>
        </forecast_conditions>
	  ...
    </weather>
</xml_api_reply>

Notice the weather element contains multiple forecast_conditions elements without a single container element as well as the other forecast_information and current_conditions elements. At first this was a problem, I spoke to John Sheehan (the creator of RestSharp) about this and he told me it was currently unsupported with RestSharp. So I took a dive into the RestSharp source (mainly the XmlDeserialiser) to try and find a solution to this problem and I came across the support for Derived Lists, therein lies a solution…

public class xml_api_reply
{
    public string version { get; set; }
    public Weather weather { get; set; }
}
public class Weather : List<Forecast_Conditions>
{
    public Forecast_Information Forecast_Information { get; set; }
    public Current_Conditions Current_Conditions { get; set; }
}
public class DataElement
{
    public string Data { get; set; }
}
public class Forecast_Information
{
    public DataElement City { get; set; }
    public DataElement Postal_Code { get; set; }
    public DataElement Forecast_Date { get; set; }
    public DataElement Unit_System { get; set; }
}
public class Current_Conditions
{
    public DataElement Condition { get; set; }
    public DataElement Temp_c { get; set; }
    public DataElement Humidity { get; set; }
    public DataElement Icon { get; set; }
    public DataElement Wind_condition { get; set; }
}
public class Forecast_Conditions
{
    public DataElement Day_Of_Week { get; set; }
    public DataElement Condition { get; set; }
    public DataElement Low { get; set; }
    public DataElement High { get; set; }
    public DataElement Icon { get; set; }
}

These classes are then used by RestSharp to Deserialise the response. xml_api_reply is the root element and under it is weather. The weather class inherits from a List<forecast_conditions> because it can contain multiple elements as well as other properties. The DataElement class was created because of the way the xml has its data ie. <city data=”Brisbane, QLD”/> instead of <city>Brisbane, QLD</city>.

Now that we have setup the Response classes we can use get to the real code…

var client = new RestClient("http://www.google.com/ig/api");
var request = new RestRequest(Method.GET);
request.AddParameter("weather", "Brisbane");

var response = client.Execute<Models.xml_api_reply>(request);

Pretty easy, and the response is a RestResponse<T> where T is my xml_api_reply class, this object then gives us access to anything we could need from the response including the content itself (response.Content) and the deserialised class (response.Data).

And to find the current temperature:

response.Data.weather.Current_Conditions.Temp_c.Data

Now you know how to use RestSharp the world of Restful services is yours for the taking!

Update: Updated the reponse class to Pascal Case.

Fluent Email in .NET

2010-04-11T08:33:01+00:00

See an updated (2018) example of sending in .NET core email using FluentEmail.

I have been working with sending emails with System.Net.Mail and had a few people mention they would like fluent interface. It sounded like a pretty cool idea and I also needed an excuse to learn git/github thus was born FluentEmail for .NET.

Here is a quick example of intended usage, the Smtp details if not provided using the .UsingClient(SmptClient client) method will be taken from the mailSettings config section.

var email = Email
            .From("john@email.com")
            .To("bob@email.com", "bob")
            .Subject("hows it going bob")
            .Body("yo dawg, sup?");

//send normally
email.Send();

//send asynchronously
email.SendAsync(MailDeliveredCallback);

The fluent interface is achieved by using a builder pattern. The .From method is static and returns the underlying email object for the other methods to build upon.

public class Email : IHideObjectMembers
{
    private SmtpClient _client;
    public MailMessage Message { get; set; }

    private Email()
    {
        Message = new MailMessage() { IsBodyHtml = true };
        _client = new SmtpClient();
    }

    public static Email From(string emailAddress, string name = "")
    {
        var email = new Email();
        email.Message.From = new MailAddress(emailAddress, name);
        return email;
    }

    public Email To(string emailAddress, string name = "")
    {
        Message.To.Add(new MailAddress(emailAddress, name));
        return this;
    }

    //other methods left out for readability
}

Its early days at the moment but it does support multiple recipients, BCC and CC. Some of the things I would like to eventually include is support for bulk email sending (sending in batches) and easy support for different Smpt clients such as gmail.

You can grab/fork the code at http://github.com/lukencode/FluentEmail. Let me know if you have any comments or suggestions.

Simple C# Synchronous / Asynchronous Email Sender

2010-04-08T00:47:51+00:00

UPDATE: I am now using a Fluent Email Class that implements similar techniques.

I noticed quite a few search queries coming in for my post on User Control Email Templates so I thought I should post the code I am using to actually send the emails in that example. The class uses the SMTP configuration information in the web.config or app.config of the application. An example of the config is after the code.

The code is pretty quick and dirty but if you are only sending one off emails it works fine.

    

public static class EmailSender
{
	///
	/// Sends an Email.
	///
	public static bool Send(string sender, string senderName, string recipient, string recipientName, string subject, string body)
	{
		var message = new MailMessage()
		{
			From = new MailAddress(sender, senderName),
			Subject = subject,
			Body = body,
			IsBodyHtml = true
		};
		
		message.To.Add(new MailAddress(recipient, recipientName));

		try
		{
			var client = new SmtpClient();
			client.Send(message);
		}
		catch (Exception ex)
		{
			//handle exeption
			return false;
		}

		return true;
	}

	///
	/// Sends an Email asynchronously
	///
	public static void SendAsync(string sender, string senderName, string recipient, string recipientName, string subject, string body)
	{
		var message = new MailMessage()
			{
				From = new MailAddress(sender, senderName),
				Subject = subject,
				Body = body,
				IsBodyHtml = true
			};
		message.To.Add(new MailAddress(recipient, recipientName));

		var client = new SmtpClient();
		client.SendCompleted += MailDeliveryComplete;
		client.SendAsync(message, message);
	}

	private static void MailDeliveryComplete(object sender, AsyncCompletedEventArgs e)
	{
		if (e.Error != null)
		{
			//handle error
		}
		else if (e.Cancelled)
		{
			//handle cancelled
		}
		else
		{
			//handle sent email
			MailMessage message = (MailMessage)e.UserState;
		}
	}
}

Here is an example of the mailSettings config section.

    <system.net>
      <mailSettings>
        <smtp from="test@test.test">
          <network host="smtphost" port="25" username="user" password="password" defaultCredentials="true" />
        </smtp>
      </mailSettings>
    </system.net>

C# Micro Performance Testing Class

2010-03-28T00:00:00+00:00

I often find myself wondering which version of a method would run more efficiently so for my own amusement I built this little class so I could easily test various method’s performance. I understand this is no substitute for real profiling but it is handy to do some quick comparisons.

public class PerformanceTester
{
    public TimeSpan TotalTime { get; private set; }
    public TimeSpan AverageTime { get; private set; }
    public TimeSpan MinTime { get; private set; }
    public TimeSpan MaxTime { get; private set; }
    public Action Action { get; set; }

    public PerformanceTester(Action action)
    {
        Action = action;
        MaxTime = TimeSpan.MinValue;
        MinTime = TimeSpan.MaxValue;
    }

    /// <summary>
    /// Micro performance testing
    /// </summary>
    public void MeasureExecTime()
    {
        var sw = Stopwatch.StartNew();
        Action();
        sw.Stop();
        AverageTime = sw.Elapsed;
        TotalTime = sw.Elapsed;
    }

    /// <summary>
    /// Micro performance testing
    /// </summary>
    /// <param name="iterations">the number of times to perform action</param>
    /// <returns></returns>
    public void MeasureExecTime(int iterations)
    {
        Action(); // warm up
        var sw = Stopwatch.StartNew();
        for (int i = 0; i < iterations; i++)
        {
            Action();
        }
        sw.Stop();
        AverageTime = new TimeSpan(sw.Elapsed.Ticks/iterations);
        TotalTime = sw.Elapsed;
    }

    /// <summary>
    /// Micro performance testing, also measures
    /// max and min execution times
    /// </summary>
    /// <param name="iterations">the number of times to perform action</param>
    public void MeasureExecTimeWithMetrics(int iterations)
    {
        TimeSpan total = new TimeSpan(0);

        Action(); // warm up
        for (int i = 0; i < iterations; i++)
        {
            var sw = Stopwatch.StartNew();

            Action();

            sw.Stop();
            TimeSpan thisIteration = sw.Elapsed;
            total += thisIteration;

            if (thisIteration > MaxTime) MaxTime = thisIteration;
            if (thisIteration < MinTime) MinTime = thisIteration;
        }

        TotalTime = total;
        AverageTime = new TimeSpan(total.Ticks/iterations);
    }
}

Here is how you can use it.

//usage
var tester = new PerformanceTester(() => SomeMethod());
tester.MeasureExecTimeWithMetrics(1000);
Console.Writeline(string.Format("Executed in {0} milliseconds", tester.AverageTime.TotalMilliseconds));

6 Useful SQL Server Scripts

2010-03-26T09:10:49+00:00

This is a post we had on the short lived blog.tboda.com with input from DK and Benjii. People seemed to find it useful so I thought I’d give it second chance at life (plus one extra script).

Database Backup

This script is used to do regular backups of a given database when running as a scheduled sql job. It appends the date to each backup to prevent conflicts.

DECLARE @currentday varchar(10)
set @currentday = datepart(day,getdate())
IF LEN(@currentday) = 1
BEGIN
	SET @currentday = '0' + @currentday
END
DECLARE @currentmonth varchar(10)
SET @currentmonth = datepart(month,getdate())
IF LEN(@currentmonth) = 1
BEGIN
	SET @currentmonth = '0' + @currentmonth
END
DECLARE @currentyear varchar(10)
SET @currentyear = datepart(year,getdate())
DECLARE @fileName varchar(100)
SET @fileName = 'c:\Backups\Database\myDatabase_' + @currentyear
+ '_'	 + @currentmonth  + '_' + @currentday  + '.bak'
BACKUP DATABASE myDatabase TO DISK = @fileName WITH NOFORMAT, INIT,
NAME = N'myDatabase -Full Database Backup', SKIP, NOREWIND, NOUNLOAD,  STATS = 10
GO

Clear all Records

This script basically ‘resets’ your database by removing all records from every table whilst keeping constraints intact and resetting identities.

--Disable Constraints & Triggers
EXEC sp_MSforeachtable 'ALTER TABLE ? NOCHECK CONSTRAINT ALL'
EXEC sp_MSforeachtable 'ALTER TABLE ? DISABLE TRIGGER ALL'
--Perform delete operation on all table for cleanup
EXEC sp_MSforeachtable 'DELETE ?'
--Enable Constraints & Triggers again
EXEC sp_MSforeachtable 'ALTER TABLE ? CHECK CONSTRAINT ALL'
EXEC sp_MSforeachtable 'ALTER TABLE ? ENABLE TRIGGER ALL'
--Reset Identity on tables with identity column
EXEC sp_MSforeachtable 'IF OBJECTPROPERTY(OBJECT_ID(''?''), ''TableHasIdentity'') = 1
BEGIN DBCC CHECKIDENT (''?'',RESEED,0) END'

Distance between points

Taking 2 sets of longitude/latitude points this function will calculate the distance between them and return it as a real.


CREATE FUNCTION [dbo].[DistanceBetween] (@Lat1 as real,
@Long1 as real, @Lat2 as real, @Long2 as real)
RETURNS real
AS
BEGIN
DECLARE @dLat1InRad as float(53);
SET @dLat1InRad = @Lat1 * (PI()/180.0);
DECLARE @dLong1InRad as float(53);
SET @dLong1InRad = @Long1 * (PI()/180.0);
DECLARE @dLat2InRad as float(53);
SET @dLat2InRad = @Lat2 * (PI()/180.0);
DECLARE @dLong2InRad as float(53);
SET @dLong2InRad = @Long2 * (PI()/180.0);
DECLARE @dLongitude as float(53);
SET @dLongitude = @dLong2InRad - @dLong1InRad;
DECLARE @dLatitude as float(53);
SET @dLatitude = @dLat2InRad - @dLat1InRad;
-- Intermediate result a.
DECLARE @a as float(53);
SET @a = SQUARE (SIN (@dLatitude / 2.0)) + COS (@dLat1InRad)
* COS (@dLat2InRad)
* SQUARE(SIN (@dLongitude / 2.0));
-- Intermediate result c (great circle distance in Radians).
DECLARE @c as real;
SET @c = 2.0 * ATN2 (SQRT (@a), SQRT (1.0 - @a));
DECLARE @kEarthRadius as real;
-- SET kEarthRadius = 3956.0 miles
SET @kEarthRadius = 6376.5; -- kms
DECLARE @dDistance as real;
SET @dDistance = @kEarthRadius * @c;
RETURN (@dDistance);
END

Get Table Size

This is a SQL Server 2005 stored procedure that returns a table with details on the storage spaced used by all tables in the database.

CREATE PROCEDURE [dbo].[GetDBTableSize]
AS
BEGIN
SET NOCOUNT ON;
DECLARE @cmdstr varchar(100)
--Create Temporary Table
CREATE TABLE #TempTable
(
        [Table_Name] varchar(50),
	Row_Count int,
	Table_Size varchar(50),
	Data_Space_Used varchar(50),
	Index_Space_Used varchar(50),
	Unused_Space varchar(50)
)
--Create Stored Procedure String
SELECT @cmdstr = 'sp_msforeachtable ''sp_spaceused "?"'''
--Populate Tempoary Table
INSERT INTO #TempTable EXEC(@cmdstr)
--Determine sorting method
SELECT * FROM #TempTable ORDER BY Table_Name
--Delete Temporay Table
DROP TABLE #TempTable
END

Clear Transaction Logs

A small script to clear the transaction logs of a given database. During development these can get pretty excessive.

BACKUP log [myDatabase] with truncate_only
go
DBCC SHRINKDATABASE ([myDatabase], 10, TRUNCATEONLY)
go

This will stop the transaction logs from growing too large.

It is also a good idea to do regular backups of these logs (which shrinks them anyway)

BACKUP
LOG [myDatabase] TO DISK = N'C:\Backups\myDatabase_log.trn' WITH
NOFORMAT, NOINIT, NAME = N'myDatabase_log', SKIP, REWIND, NOUNLOAD,
STATS = 10

Number of Tables in Database

Working on a rather monolithic finance system the other day I wanted to check out just how many un necessary tables they had. Here is how via sqlservercurry.

USE YOURDBNAME
SELECT COUNT(*) from information_schema.tables
WHERE table_type = 'base table'

User Control Email Templates in asp.net

2010-03-23T00:00:00+00:00

Just about every project i work on needs to send customized emails and everytime I hate doing it. Inspired by some answers in this stackoverflow question I thought I’d give a simple .ascx based email template system a dig.

First thing I did was set up a base class for template controls to inherit from. This class inherits from UserControl and has the methods to render the control to a string. It also has methods and properties to set up “tags” to replace in the email body.

public class EmailTemplateBase : UserControl
{
    public EmailTemplateBase()
    {
        Tags = new Dictionary<string, string>();
    }

    public Dictionary<string, string> Tags { get; set; }

    protected string GetTagValue(string tagName)
    {
        return Tags[tagName].Value;
    }

    protected string GetTagValue(string tagName, string defaultValue)
    {
        string val = GetTagValue(tagName);
        return string.IsNullOrEmpty(val) ? defaultValue : val;
    }

    public string RenderTemplate()
    {
        StringBuilder sb = new StringBuilder();
        StringWriter sw = new StringWriter(sb);
        Html32TextWriter htw = new Html32TextWriter(sw);
        RenderControl(htw);

        // Get full body text
        return sb.ToString();
    }
}

Below is a simple example from the project I am working on it is used for sending feedback emails This template is really simple but because the rendering uses the same page cycle as a regular control you can style and render the template how ever you like.

<p>
   Feedback from System sent <%= GetTagValue("sent")%>
</p>

<p>
    <strong>Sender: </strong> <%= GetTagValue("sender")%><br />
    <strong>Subject: </strong> <%= GetTagValue("subject")%>
</p>

<p>
    <strong>Message: </strong> <br />
     <%= GetTagValue("message").Replace(Environment.NewLine, "<br />")%>
</p>

I created a class to easily load and use the email templates within my code by passing the location of the template on the server.


public class EmailTemplate
{
    private readonly EmailTemplateBase _template;

    public EmailTemplate(string templateLocation)
    {
        Page p = new Page();
        _template = (EmailTemplateBase) p.LoadControl(templateLocation);
    }

    public Dictionary<string, string> Tags
    {
        get { return _template.Tags; }
        set { _template.Tags = value; }
    }

    public string Render()
    {
        return _template.RenderTemplate();
    }
}

Below is how I use the templates in my code, sending using a basic email sender class I have (or better still fluent email).

var template = new Common.Email.EmailTemplate("~/Emails/Templates/Feedback.ascx");
template.Tags.Add("sender", sender);
template.Tags.Add("sent", sent);
template.Tags.Add("subject", subject);
template.Tags.Add("message", message);

string body = template.Render();

EmailSender.Send(from, fromName, to, toName, subject, body);

I could probably try encapsulate a bit more of the email sending inside my template (toName, toAddress etc) to clean this up a bit so feel free to tell me how come I suck.