Latest Posts - Kamranicus

This... this is UX

Wed, 22 Feb 2012 14:18:10 +0000

Playing with Node: Writing a Reddit CLI

Thu, 02 Feb 2012 15:21:04 +0000

This is not a complete post about how to write a fully featured CLI application for Reddit, like Cortex. However, I think it demonstrates the ease and simplicity in making such an application.

The idea

I love Reddit. Except for one thing: I don't have much time to browse or keep up with it due to life getting in the way. What I wanted was a simple app I could run that would simply show me the top stories at that moment so I could glance at them and visit them.

I spent about 20 mins (mostly looking for CLI npm packages) and came up with this:

Pretty simple. It goes to the front page, grabs the JSON results, and formats it all into a nice list (shortening titles if they get too uppity), displaying the information I mostly care about: subreddit, score, # of comments, and the poster.

Now, I haven't yet implemented a way to actually visit the URL of any of these, mainly because I'm short on time. But maybe you can!

The code

The code is pretty straightforward. I'm using the colors, request, and cli npm packages.

I wanted to do something really quick. The cli package is way more than I need, in fact, I wrote this originally without using cli but for future improvement I added it in. The steps I wanted to perform from the get-go were:

Get the JSON for the homepage
Parse it and build a colorized "row" (two rows, in fact)
Trim titles so they didn't mess up the flow (my console window is 140 columns)

Here it is, all 43 lines of it:

var cli     = require('cli'),
    http    = require('http'),
    request = require('request'),
    colors  = require('colors');

cli.main(function (args, options) {
  console.log("***********".rainbow);
  console.log("Node Reddit".cyan);
  console.log("***********\n\n".rainbow);

  request('http://reddit.com/.json', function (err, res, body) {
    if (!err && res.statusCode === 200) {
      var reddit  = JSON.parse(body),
          stories = reddit.data.children.map(function (s) { 
                      return s.data; 
                    });

      // Descending score
      stories.sort(function (a, b) { return b.score - a.score; });

      stories.forEach(function (story) {
        var row = "",
          title = story.title.length > 100
                ? story.title.substr(0, 100) + "..." 
                : story.title;

        // Build row
        // [score] [title] [comments] [subreddit]
        // This sucks
        row += story.score.toString().green + "\t";
        row += title.bold
        row += " (" + story.domain + ")";
        row += (" /r/" + story.subreddit).cyan;
        row += "\n\t";
        row += story.author.grey;     
        row += " " + (story.num_comments + " comments").italic.yellow;
        row += "\n";

        console.log(row);
      });
    }
  });
});

As you can see, definitely pretty light. That's all there is to it. Now imagine adding in commands (via cli.parse) or even growl support (I forked it and added Growl for Windows support, hopefully I can get it working decently and commit it). Then letting it monitor your specific subreddits, perhaps once every 15 minutes or so. Then adding in support for viewing links (interactive CLI app).

That's all more than I have time for, but maybe some of you that want to learn more about the Power of Node have more time. If so, I welcome additions.

It's available on GitHub. Feel free to dissect it and improve it, fork it and b0rk it. Have fun!

Programming is difficult business. It should never be undertaken in ignorance.

Mon, 23 Jan 2012 15:44:30 +0000

"Programming is difficult business. It should never be undertaken in ignorance." - Javascript: The Good Parts, Douglas Crockford

What a great quote to program by.

I've been undertaking a pet project (a game, no less) that's forced me to brush up on my Javascriptings. I would highly recommend this book if you also want to get your hands dirty with Javascript.

Oh, my game? Yah, I can't talk about it yet. I've never made a game before (but I've always wanted to) and I think I've finally come up with something I could possibly do (i.e. not 3D, not requiring 25 art designers, and not in a language I don't know). We'll see how it goes and I'll let you know.

I just transferred all my domains away from my GoDaddy reseller because of SOPA

Fri, 23 Dec 2011 19:12:45 +0000

Since I started hosting my own domains and doing web work, I've been using a website aptly named Cheap-DomainRegistration.com. I also read today that GoDaddy supports SOPA. This is a Bad Thing^TM. The proposed SOPA legislation is bad, just like drinking anti-freeze is bad for dogs.

"Hah!" I said to myself, grinning in self-assuredness, "I am not using GoDaddy. This does not pertain to me."

There was a linear relationship between the width of my grin and the amount of uneasiness about issuing my previous utterance. Hmmm. To be frank, I am not sure exactly who owns my current domain host. Now the wheels in my head began turning (Since I looked at that loony, old man). I visited the site... tried searching for who the company was registered under. I couldn't find anything. It felt... wrong.

It turns out with a little Internet detectivery, I discovered that my now-late host was, in fact, a GoDaddy reseller.

The reseller template CDR used was the first reseller template available from GD, namely, "Black, Yellow, and Red". You can see that by clicking "Quick Tour" on the GD Reseller page.
The addresses are the same for both WHOIS records. Coincidence?
The Legal Agreement for CDR also cites the same address.
CDR uses secureserver.net for DNS, which is owned by GoDaddy.

Despair kicked in. I glanced at the brand new JA Henckels chef knife my friend got me for Christmas--the sharp blade, laser edged to perfection... it would be so easy to--"No," I said. Keep hold of yourself, man!

Turns out, there's a great host called Namecheap.com that is against SOPA (as you should be). Needless to say, I've initiated a bulk transfer of all my domains over to Namecheap. I've done my part.

So now the question is, are you inadvertently using a GoDaddy reseller? I highly recommend you double-check because you might just be surprised at what you find.

The more you know...

Using Cassette for semi-complicated scenarios [Updated 1/9/12]

Thu, 22 Dec 2011 21:24:19 +0000

I love Cassette. You should too, because as of today, the project has gone MIT licensed which means you, my dear reader, can use it right now.

It's alright, I'll wait while you download it via Nuget. Done? Great.

Updates

1/9/12: Added print media example
1/9/12: Issue #121 that I opened was fixed in the latest Cassette update, 1.0.1. I've updated my samples accordingly.

More than a simple case

Cassette is optimized for programmer happiness. It's easy to use and there's a lot of small features that make it stand out from the crowd (SquishIt, Combres, etc.). If you want to get started using Cassette out of the box, you only need to do a couple things and those things are outlined well in the documentation.

What I love about Cassette is the flexibility you have when you need to go beyond the simplest use case. For example, let's consider the file structure I am working with on a project right now:

Web Project
 |_ Public
   |_ images
   |_ print
     |_ print.css
   |_ scripts
     |_ i8n
       |_ en-US
       |_ zh-CN
     |_ special
       |_ modernizer-2.0.6.js
     |_ vendor
       |_ jquery-1.7.1.js
       |_ other framework files...
     |_ pages
       |_ page1.js
       |_ page2.js
     |_ app.js
   |_ themes
     |_ jquery.ui.core.css
     |_ other jQuery UI files
   |_ base.css
   |_ layout.css
   |_ otherfiles...

For the most part, this is how the project was organized and I needed to adapt Cassette to work here. I'll walk through a few things I needed to do first.

File organization

Before implementing Cassette, Modernizr was also in the vendor folder. In addition, the localized JS files in i8n were not in sub-folders according to their culture, they were just in i8n.

In the vendor folder, we have both minified and non-minified JS files (mostly from Nuget). We don't want Cassette to minify an already minified file. I'll show you how I avoided that later on.

I point this out because Cassette works better when things are organized so that they are "bundlable." For that reason, I moved the files around so the structure looks like above. Since Modernizr has to be included in the page's <head> (it needs to load before the page loads to set up Respond media queries and HTML5 elements) and all other scripts can be included before the </body> tag, I separated it into the special folder.

As for the pages scripts, these need to be only included on a per-page basis. If areas of your site need multiple assets, I would definitely move them into sub-folders (I would go a step farther perhaps and even include them by convention, the same way MVC plays with Views and Controllers but that's for another blog post!).

Configuring the bundles

I'll walk you through my Cassette configuration file. If you pull down Cassette via Nuget, you will have a new CassetteConfiguration file and class. This is what Cassette picks up and uses to bundle your files. You can move it wherever you want, Cassette magically picks it up. It is important to realize that if you want full control over how Cassette bundles your assets, you'll need to do some configuration. Luckily, it's not bad!

Excluding directories, minified, and VSDoc files

Out-of-the-box, Cassette does not provide an easy mechanism to exclude directories when adding bundles per sub-directory. The reason I think this is important is because we want to set up a general "catch-all" method to deal with bundling, namely: treat each directory as a bundle. That way we can add folders/files and have them bundled automatically for us. This creates less work for the team.

I also wanted to ignore any pre-minified or -vsdoc files (Cassette by default ignores vsdoc files).

To solve this issue, I just derived a class from FileSearch and added my own requirements:

I could have also implemented my own IFileSearch, perhaps one that used a fluent interface to exclude directories or file suffixes, but for my limited needs, this would do well and I really only needed to build upon the out-of-the-box FileSearch class. Maybe I will implement a fluent search interface as a fun project.

The other thing I needed to add into the Regex was the ability to exclude any files ending in ".min" or "-min" (just in case). Cassette recommends you simply delete minified files. That's a good tip, except they'll just be back when you do a Nuget update, so why not just ignore them by default as well (ahem)?

Side note: It seems more efficient to me to allow Cassette to reference minified files but to bypass minification of them. Perhaps this will be implemented in the future?

Configuring stylesheets

For our project, we need to include Google Web Fonts in the page, in addition to the CSS files in the public directory. We keep the jQuery UI themes separate in case we update via Nuget so we can simply overwrite them.

private void ConfigureStylesheets(BundleCollection bundles)
{
    // Sub-folder bundled CSS
    bundles.AddPerSubDirectory<StylesheetBundle>("Public",
    new ExcludeDirectorySearch("*.css", new[] { "scripts" }));

    // Print media bundle
    bundles.Get<StylesheetBundle>("~/public/print").Media = "print";


    // Google Web fonts
    bundles.AddUrlWithAlias<StylesheetBundle>(
        Scheme + "://fonts.googleapis.com/css?family=Droid+Sans|Montserrat", "Fonts");
}

The first line tells Cassette to add a bundle per sub-directory, so the following bundles will be made:

public (our CSS)
public\themes (jQuery UI)
public\print (print media)

It also uses the class above and excludes the "scripts" directory from search, for good measure.

One of the caveats to the directory exclude is that it technically does not exclude directories; Cassette still creates empty bundles. Thus, if you tried to add a ~/public/print bundle, you'd get an exception saying that it already exists. So, we cannot exclude the print directory. Instead, you can reference it directly after it's been added and manually set the Media to print. Problem solved! Ideally, Cassette should not be creating empty bundles.

The second line includes the direct Google stylesheet reference aliased as Fonts (in references, ~/Fonts). In this project, our site is behind a load balancer so SSL is terminated at the balancer. This means you can't just use the built-in ASP.NET Request.IsSecureConnection because by the time the request even hits the web server, SSL is not there. ~~Therefore, I utilize one of the utilities we have to check if SSL is enabled via server headers that the balancer sets.~~ The scheme is not identifiable yet in our Application_Start, so we cannot use this method, but I will leave it here for posterity. We switched to always using SSL since our site is under SSL to the user. Note: You can simply include fonts normally using the Google Font Loader or by a direct <link> reference, however, why not use Cassette if you're already going that route?

// Also in CassetteConfiguration.cs
private string Scheme
{
    get { return Utilities.SharedUtils.IsSecureConnection() ? "https" : "http"; }
}

In our Layout.cshtml file, we now need to reference these two bundles and render them to the page.

@{
    Bundles.Reference("public"); // Our CSS
}

<!DOCTYPE html>
<html>
<head>
    @Bundles.RenderStylesheets()
</head>

So how does Cassette understand in what order to put these references? First, Cassette goes by the order in which you call @Bundles.Reference. To make things easier though, I edited our main layout.css file to add Cassette-compatible references.

/* For Cassette */
/* @reference ~/Fonts base.css skeleton.css themes */

When Cassette parses layout.css, it will detect these references. Since all files are included in our public bundle, everything goes great and the <link>'s are added in order:

<link href="http://fonts.googleapis.com/css?family=Droid+Sans|Montserrat" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Public/themes/jquery.ui.button.css?165be2c1b488debc298a8dbaa77347b326a0d2a2" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Public/themes/jquery.ui.core.css?e5bc0be5bec6729cd338579a99e89c39c844c181" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Public/themes/jquery.ui.datepicker.css?6243e68daf6d6b3c03ce47d66abef2feba488d94" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Public/themes/jquery.ui.dialog.css?45faa27d7c66d72df00c39c40506da46bed885e3" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Public/themes/jquery.ui.resizable.css?a1bf026ec6d01daa0f7853215774c9e3aeb8afa9" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Public/themes/jquery.ui.theme.css?83294a0e12785f8dac8d3f0de4bf65f481b55f13" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Public/base.css?6401a75dfde8196c81d8bb39c3e5fb25dab89ad1" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Public/skeleton.css?d7414571707853cafb3028441861d31291d60789" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Public/layout.css?0ac01597826664dcc3a6c031a61c11ffa17fdd3d" type="text/css" rel="stylesheet"/>

Configuring Javascript

The Javascript assets were a bit harder to configure; we needed to do a couple things:

Auto-bundle everything except a few special cases
Have a "special" folder for <head> references
Avoid editing vendor file references so a Nuget update won't blow the changes away

Here is my Javascript configuration:

private void ConfigureJavascript(BundleCollection bundles)
{
    // Localized JS - i8n/{culture}
    bundles.AddPerSubDirectory<ScriptBundle>("Public/scripts/i8n", true);

    // Per-page JS (eventually may want separate folders as well)
    bundles.AddPerIndividualFile<ScriptBundle>("Public/scripts/pages");

    // Bundle all scripts except special cases above
    bundles.AddPerSubDirectory<ScriptBundle>("Public/scripts",
    new ExcludeDirectorySearch("*.js", new[] { "i8n", "pages" }));
}

Our configuration code above does exactly what we need. We can double check by browsing to /_cassette and seeing what Cassette decided to turn into bundles:

~/Public/scripts
    app.js

~/Public/scripts/pages

~/Public/scripts/special
    modernizr-2.0.6.js

~/Public/scripts/vendor
    jquery-1.7.1.js
    jquery-ui-1.8.16.js
    jQuery.tmpl.js
    jquery.validate.js
    jquery.validate.unobtrusive.js

~/Public/scripts/i8n/zh-CN
    jquery.ui.datepicker-zh-CN.js
    jquery.validate-zh-CN.js

~/Public/scripts/i8n/es-MX
    jquery.ui.datepicker-es-MX.js
    jquery.validate-es-MX.js

~/Public/scripts/pages/page1.js
    ~/Public/scripts/pages/page1.js

~/Public/scripts/pages/page2.js
    ~/Public/scripts/pages/page2.js

You can see the exclusions worked, since the pages folder is blank (i.e. not bundled up) and each page script is made later on a per-file basis.

The reason I like this is because now I can just add folders to scripts without worrying about adding a manual Cassette bundle; it will just do it automatically and ignore the two folders I need to make a special case for.

Including the script assets

Remember I said Modernizr should be included in <head> but all the rest of the scripts should be before </body>? We can do that easily with Cassette.

@* _Layout.cshtml *@
@{
    // CSS
    Bundles.Reference("public");

    // Scripts (vendor first!)
    Bundles.Reference("public/scripts/special", "head");
    Bundles.Reference("public/scripts");
}

<!DOCTYPE html>
<html>
<head>
    @Bundles.RenderStylesheets()

    @* Modernizr needs to be first *@
    @Bundles.RenderScripts("head")
</head>
<body>

    @* All other scripts *@    
    @Bundles.RenderScripts()

    @* Localized scripts *@
    @RazorHelpers.LocalizedScripts()
</body>
</html>

Notice the reference for Modernizr. I am using the overloaded Reference that accepts a pageLocation argument. This is the same as how you can include Razor sections in MVC3. The location is just a string you use when you call @Bundles.RenderScripts({pageLocation}). Tip: You can also specify pageLocation when you create a bundle in your CassetteConfiguration class. I did not, since I only needed one script in the head tag, but if you have multiple folders or bundles that need to be in separate locations, you don't have to specify a page location in your view files.

As with our stylesheets, we need a way to tell Cassette how to order the vendor scripts since we typically have plugins that depend on each other (such as jQuery). You could edit each vendor file and manually add file references to them, but that's no fun is it? In order to reduce headaches and maintenance, create a Bundle Descriptor File instead. That way, you will only need to keep that file up-to-date as you add more vendor plugins.

In the vendors folder, I simply made a bundle.txt file:

jquery-1.7.1.js
jquery-ui-1.8.16.js
jQuery.tmpl.js
jquery.validate.js
jquery.validate.unobtrusive.js
*

The wildcard at the end tells Cassette, "Yo, do whatever you want for the rest of the scripts you find." How useful! Now there's even less maintenance (didn't I tell you this baby was optimized for happiness?).

For localization, I just created a Razor helper to include the right culture files for me (this shows you that you can use the Bundles object anywhere in your Razor views and Cassette will include the references):

//
// ~/App_Code/RazorHelpers.cshtml
//
@helper LocalizedScripts()
    {
    string cultureName = System.Threading.Thread.CurrentThread.CurrentCulture.Name;

    if (cultureName != Constants.DefaultCulture)
    {
        Bundles.Reference(String.Format("/public/scripts/i8n/{0}", cultureName));
    }
}

And on individual views, I can now included page-specific JS:

@* Views\Controller1\View1.cshtml *@
@{
    Bundles.Reference("~/public/scripts/pages/page1.js");
}

Cassette is smart and will include the JS automatically in the Layout.cshtml file and in the proper order (in my case, just at the end. If you had references inside, Cassette would know).

To debug or not to debug, that is the question!

In our environment, we don't necessarily want to turn off Cassette as soon as the web.config's debug flag turns to false. Instead, we have different environments where it might make sense to leave Cassette on. When the site goes out to QA, then it makes sense to turn on Cassette's Release mode, but while developing locally and in staging, we may need to debug a bit more.

public void Configure(BundleCollection bundles, CassetteSettings settings)
{
    // Debug locally and in staging
    settings.IsDebuggingEnabled = 
        Server.CurrentEnvironment == Server.ServerEnvironment.Developer ||
        Server.CurrentEnvironment == Server.ServerEnvironment.Development;

    ConfigureStylesheets(bundles);
    ConfigureJavascript(bundles);
}

And there's my full CassetteConfiguration class!

So what are you waiting for?

Cassette is awesome and I hope you learned a couple tips for doing things in a semi-complex environment. Let me know if you've found any more good tips & tricks, or if you notice I missed an optimization or hidden feature.

I would really like to do some performance testing with Cassette. It does add to your overhead on the site, but in my Firebug timings, I noticed much less time being spent on CSS files and more time being spent on JS files. If you are worried about performance on a massive scale, it will always be faster to minify and concatenate your files at compile or build time because then IIS is serving the files directly. Components like Cassette are meant to ease your burden by handling that for you, at the expense of some milliseconds. Remember that due to caching and aggressive expiration headers, the browser should not be requesting assets anyway after the first request.

Tips When Using Backbone.js in a .NET world

Thu, 15 Dec 2011 20:37:51 +0000

I am learning Backbone.js so I can re-write the main GUI for KTOMG. I am still learning and I've run into a couple gotchas that I hope I can clear up for anyone else that dares to tread in these woods. Still, I've been able to rewrite the listing of a user's library in one night using Backbone and all my existing back-end code (the farthest up I edited was my controller). Very impressive for a Backbone n00b!

Backbone IS your application

After watching the PeepCode screencasts (I, II, and III), I have realized something about Backbone.

Backbone will pretty much replace your MVC views and controller logic.

This didn't hit me until the last episode and at first, this felt threatening. I am working in ASP.NET MVC and it feels wrong to not utilize it. After thinking about it some more, however, there were a few important points to consider:

Backbone doesn't necessarily have to be your whole app. In fact, right now I am only using Backbone for the main "library" interface and I am keeping the rest of the site in plain-old MVC 3.
You still use your controllers and could even use your Razor views as HTML templates.

Considering those points, I felt a lot better about using Backbone. Not only will it be a great experience, it'll also make the most important part of my application very responsive and robust, without needing to worry a ton about the plumbing.

Who knows? Maybe KTOMG will be running on Node.js by the end of the month.

Tips When Using Backbone with ASP.NET MVC

There were a few gotchas I ran into when using Backbone in my typical .NET environment.

Use AttributeRouting, like, now

AttributeRouting is one of my new favorite packages. It axes the mostly-confusing, mostly-convoluted Global.asax way of handling routes in favor of a more-discoverable (I feel) way of doing routes by decorating actual controller methods:

using AttributeRouting;

[RoutePrefix("games")]
public class GamesController : Controller {

  //
  // GET: /games/

  [GET("")
  public ActionResult Index() {}

  //
  // POST: /games/

  [POST("")
  public ActionResult New(Model model) {}

}

Hopefully you will see why this is useful. Backbone is opinionated in that it assumes you're using a RESTful interface for your API. In normal vanilla MVC, this could turn your Global.asax into a routing nightmare. However, with AttributeRouting, it's easy! Here's an example of a Backbone-compatible REST controller:

using AttributeRouting;

[RoutePrefix("api/games")]
public class GamesApiController : Controller {

    //
    // GET: /api/games/

    [GET("")]
    public JsonResult Index() {}

    //
    // POST: /api/games/

    [POST("")]
    public JsonResult Create() {}

    //
    // GET: /api/games/{id}

    [GET("{id}")]
    public JsonResult Show(int id) {}

    //
    // PUT: /api/games/{id}

    [PUT("{id}")]
    public JsonResult Update(int id) {}

    //
    // DELETE: /api/games/{id}

    [DELETE("{id}")]
    public JsonResult Delete(int id) {}

}

Good fodder for a T4 template. If you have a larger site, consider using an Api MVC Area for cleaner separation.

Be careful when serializing your objects

I ran into two gotchas with serializing my objects.

First, if you have an Id property/field, Backbone will not be happy. ~~It needs to be lowercase id~~. You should utilize the idAttribute option on your Backbone model to override the property name. It took me forever to figure out why nothing was happening when I deleted a model.

class MyModel extends Backbone.Model
  idAttribute: "Id"

Second, if you are going to serialize EF entities when proxying or lazy-loading is enabled, you need to use a serialization framework like JSON.NET or you need to make flat DTO objects (or view models). I opted for the latter approach first because it was quick, but I am in the process of implementing JSON.NET to do serialization of my entities for me.

For EF serialization, you need to use a custom ContractResolver. I borrowed this one. Furthermore, I also needed to set the ReferenceLoopHandling to Ignore on a new JsonSerializerSettings object so it would avoid circular references.

Finally, this is optional but considering the first gotcha, I highly recommend you inherit the EF contract resolver above from CamelCasePropertyNamesContractResolver so your JSON is serialized with camelCase properties.

Consider leveraging Razor/ASPX partial views for your templates

I haven't actually tried this, but I don't see why it wouldn't work. In a Backbone project you'll typically have plenty of templates. Right now I have 3 but I expect it to grow quite a bit in the future. I was planning on moving all these templates to .cshtml files and then using @Html.Partial("_TemplateName") to include them in my main layout. I may even create a small extension method to wrap that in a <script> tag. I will update this post if I do.

If you happen to be working on an OSS project, you should be using Cassette because it can package up your HTML/Knockout templates and include them all in your page for you automagically. If I wasn't using AppHarbor and I was using a dedicated server, I would buy Cassette in a second. I wish they had per-site licenses.

Use those organization skills

ASP.NET MVC comes with a friendly and intuitive file layout out-of-the-box:

Project
 |_ Controllers
 |_ Models
 |_ Scripts
 |_ Styles
 |_ Views

I've shortened mine, plus I've made my scripts directory a bit more Backbone friendly:

Project
 |_ Controllers
 |_ Models
 |_ Public
   |_ Images
   |_ Scripts
     |_ App
       |_ Collections.coffee
       |_ Backbone CoffeeScript files
     |_ Framework (or Vendor)
   |_ scss files...
 |_ Views

It's up to you how you like to organize, and perhaps you'd even like to separate it further down into modules.

Learn CoffeeScript and SASS

This technically does not have anything to do with .NET or Backbone. However, your life will be easier if you learn CoffeeScript as that makes using Backbone that much more pleasant:

class GameView extends Backbone.View
  className: 'game'
  template: _.template($("#game-template").html())

  initialize: (options) -> 
    @model.bind 'change', @render, @

  render: -> 
    $(@el).html @template()
    @ # Never forget this line in render() or you'll regret it

(Disclaimer: This is not real and won't run; it's meant as an illustration of Backbone in CoffeeScript)

It's much nicer to write in Backbone without all those pesky parenthesis and manual bindAll or extend shenanigans. Again, I'd recommend PeepCode's CoffeeScript screencast, that's about all it takes to learn it properly.

If you do decide to take the plunge (it's worth it!), get yourself Mindscape Web Workbench and you'll be a much happier camper when working with Coffee, SASS, and LESS in Visual Studio.

VS Extension for JS Template Support

Wed, 14 Dec 2011 14:27:33 +0000

I am thinking of embarking on a journey that involves Backbone.js in my MVC 3 project. This would involve heavy use of templating. After thinking about it a bit and doing some Googling, I realized that there is no JS template extension for Visual Studio.

I realize that you could just name your template files ".html" and be done with it. However, I feel like that isn't "cool" enough.

Based on some preliminary research, it seems to me it would not be impossible to add support for common JS template syntax highlighting... and perhaps even Intellisense.

In fact, VS 11 will support jQuery Template syntax highlighting, but not only is jquery-tmpl obsolete, it is also not the only kind of templating system.

Why am I making this post? I am not sure. Part of me wants to attempt to make such an extension, probably starting out with a simple template syntax like Mustache (or Handlebars). I would be happy with an extension that was pretty much an HTML highlighter that also highlighted tokens (e.g. "{{", "}}", etc.) just like VS does for Razor. Bonus points awarded if it [somehow] does Intellisense. In my dream world, it would act very much like MVC Razor does right now, where you declare the "model" for the template and that is its context for Intellisense. To me, that seems reasonable for a no-logic template system like Mustache but may prove unwieldy once you allow for normal JS expressions like in jquery-tmpl. That kind of syntax may also not make sense in the first place considering you could pass in whatever you wanted into a template's context.

Skyrim Mod Request Compilation

Mon, 14 Nov 2011 16:41:56 +0000

A compilation of all the Skyrim mods I've thought of or want to see made based on other people's suggestions.

MVC Pro Tip: Don't use the "id" URL parameter in your routes

Wed, 02 Nov 2011 14:25:08 +0000

By default, MVC will use a route layout like this:

routes.MapRoute(
    "Default", // Route name
    "{controller}/{action}/{id}", // URL with parameters
    new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
);

Besides the fact that you shouldn't use the default route (use named routes!), there's another issue.

Do you have any domain models like this?

class Foo {
    public int Id { get; set; }
}

Now, let's say you wanted to add a new Edit method for this model:

public FooController {
    [HttpPost]
    public ActionResult Edit(int id, Foo foo) {

    }
}

There will be a problem here if you expect to be able to change this ID (rare but it happens). MVC will model bind the route's id parameter to your model's ID, possibly breaking your code. This is because MVC does not differentiate your two id and Id parameters, it sees them as one in the same (this has to do with the underlying Request collection).

Fix it!

It's simple to fix. Instead of using id as a URL parameter throughout your application, use something else! I typically use identifier:

routes.MapRoute(
    "Default", // Route name
    "{controller}/{action}/{identifier}", // URL with parameters
    new { controller = "Home", action = "Index", identifier = UrlParameter.Optional } // Parameter defaults
);

// Controller
public FooController {
    [HttpPost]
    public ActionResult Edit(int identifier, Foo foo) {

    }
}

Voila. No more model binding issues!

What's the most efficient way to read config settings in .NET?

Thu, 20 Oct 2011 20:33:09 +0000

In a project I'm contributing to, I saw some code like this (simplified but boiling down to):

public static string ConfigValue {
    get {
        return System.Configuration.ConfigurationManager.AppSettings["ConfigValue"];
    }
}

Is there anything wrong with this? It's a static read-only property. That seems pretty reasonable!

Storage matters

The issue that I saw was that there's no real reason to do this. You could do this just as easily:

public static readonly string ConfigValue = 
     System.Configuration.ConfigurationManager.AppSettings["ConfigValue"];

So, who cares? It looks the same to me! As far as I can tell, you should care, even a little bit. Check this out:

Notice anything? The static readonly field is far and away faster than any other approach (400 nanoseconds). The other three approaches are pretty similar, ranging from 95ms to 104ms. I'll do the math for you:

A static readonly field is upwards of 200x faster than the equivalent property implementation.

The reason is simple: get/set are translated into methods by the compiler. A field is simply a field. Any property will incur some penalty for wrapping methods, so a field will always be faster! I use properties all the time but sometimes it might make sense to forgo a property in favor of a field.

The test case

Will you ever notice differences this small? I doubt it (the test was 100000 iterations). I did this for a learning experiment and for future reference. However, reading a config file is I/O at its core. To me, that says you should care about minimizing possible calls to the disk. Under a substantial load test, perhaps this would incur a visible penalty to page load time depending on how many calls you had to your settings wrapper. (Update: One of my colleagues pointed out that app config is probably loaded on start-up, so there shouldn't any disk I/O happening.)

Performance matters but this is probably so picky that you really don't ever need to worry about it. As my co-worker said to me after reading this:

"A single call to a suboptimal EF/NHibernate/SQL query is far more damaging than 100,000 calls to these simple properties/fields. If a query took 1 second it would be roughly equivalent to 1,000,000 calls to the most inefficient property implementation. I would say spend your time where you get the biggest bang for your buck."

Couldn't have said it better myself! If you're doing perf testing, make changes where it matters. This is only a microscopic change compared to some that would make more of a difference (such as how you handle Regex).

Here's the test case. I am not entirely positive if there's unseen overhead but the other three examples are common things I've seen or even done in regards to this type of pattern:

Let me know if I made a mistake in the test case that's skewing results and I'll fix it.

Integrated Disqus comment system into Kamranicus

Fri, 07 Oct 2011 14:41:16 +0000

When I wrote Kamranicus, I wanted a simple blog where I could use Markdown and copy/paste images. I achieved that but I also built a simple comment system.

While fun and a good exercise in using OpenID, I should have thought to check if there is any universal comment system available. There is. It's called Disqus. Unfortunately, I discovered it after I made Kamranicus.

As you can see now, Disqus is now the comment backend for Kamranicus' posts. Now I can allow anyone to comment using whatever provider they want, moderate comments, have comment threads, trackbacks, and loads of other useful features.

It was easy to integrate. Check it out if you are in the same situation as me.

Some thoughts on the new Mileage Stats .NET sample application

Tue, 20 Sep 2011 18:35:42 +0000

I'm [still] reading through the docs on the new Mileage Stats application that was just released by Microsoft. It looks pretty cool! A little more real-world than typical sample applications.

But I have some questions...

No application design is perfect but as I read some of this documentation, I am wondering about a couple things. I haven't finished reading all of the docs yet, so these are just some random thoughts:

BackboneJS

It seems like for a sample MVC application that needs to support progressive enhancement and work in JS/non-JS environments, BackboneJS would be a suitable alternative to the jQuery UI widget + jQuery BBQ implementation they are using.

Update:

Hah, further down the same Readme page I was looking at, they mentioned BackboneJS or Knockout as alternative considerations:

A design the Project Silk team is interested in investigating in the future involves the use of jQuery UI Widgets that can be data bound within an MVVM implementation such as Knockout.js.

I wonder why they didn't want to do that for the sample itself? From the reading, it sounds like it was because they wanted to minimize external dependencies. Perhaps it could also be seen as an official endorsement of whatever library they could have chosen (even though they explicitly state for jqPlot that it shouldn't be taken as an "official" recommendation).

AmplifyJS

Client side data manager is a big emphasis in this application. It says in the Readme that:

"Data is cached in a JavaScript object, rather than using HTML5 local storage or similar APIs, in order to meet the cross-browser requirements of the application."

Hmm, well, won't AmplifyJs cover data management needs then? It supports all browsers and unifies the storage mechanism APIs. It does some pub/sub stuff for you as well. In old browsers, a non-standard way will be used to store data but on modern browsers, localStorage and sessionStorage will be used.

I wonder if the team took a look--and if they did, what they thought of it. From the surface, it looks like it would be better than rolling your own storage and pub/sub routines.

That's all for now

Like I said, I'm still reading/learning it. I'll update this as I read more.

Immersive UI in RPGs - Thoughts, Concerns, et al.

Thu, 15 Sep 2011 00:56:52 +0000

If you don't know, I'm a pretty avid fan of video games. Actually, "avid" is probably an understatement. Video games are a passion of mine, not only for pleasure but also in terms of software development. I've tried my hand at game programming, even some modeling. I don't think I'm cut out for it. That said, I think there are still things I can comment on from a user experience perspective. Games are just software. Virtual worlds, sure, but underneath they are still running on 1's and 0's and made with programming languages and frameworks. Therefore, it follows that as pieces of software, they still must rely on common usability and user experience practices, especially if they display UI (as most do).

RPGs and UI

I'm going to talk about an upcoming RPG, The Elder Scrolls V: Skyrim, since it represents RPGs pretty well in that they are some of the most UI-intensive of all games. I'm also going to talk about it because I'm insanely excited for it and I want to talk about immersion; Bethesda RPGs are mainly about immersive worlds. Dialog, questing, inventory management, spell management, looting, skill trees, equipment, maps, etc. Lots of UI for displaying information to the user. In an RPG, usually (every time?) you are on an epic quest. As a user (player), I don't want to think too much about managing all this information, I want to go on quests and use bigger swords and badder spells. Still, I'm going to have to use the UI no matter what. I have to talk to people. I have to store my big swords. I have to learn spells. I have to navigate the world.

As I look at screenshots and watch gameplay demos of Skyrim, it got me thinking about their UI decisions and RPG UIs in general. If your goal is to create an immersive world, how come you don't also create immersive UIs? Shouldn't you be trying your darndest to get rid of the dialog- and window-based UI of "regular" software? Or at the very least, to fit your UI into the story or context of the game? It's an interesting idea to think about--how do you decide what will be immersive and what will be a typical dialog/window-based UI?

Elder Scrolls vs. Fallout

When I look at Fallout 3, it strikes me as genius how well they were able to keep the immersion with the "menu" by using the Pipboy. Not only did it perfectly fit into the storyline but it also made total sense in the context of the game. Here you are, a quaint vault dweller, and the PipBoy is given to you at age 10 like every other resident. As an NPC chides, "It'll be your best friend." It fits perfectly and is a natural way to introduce a way to get at all the information you'd need in a futuristic, post-apocalyptic RPG. Not only that, but it was also usable. A couple clicks would bring you to the maps, one more, equipment, etc. It is the perfect example of an immersive, usable game UI.

I can't recall a fantasy RPG that was successfully able to use an immersive, believable, and usable menu system like Fallout 3. Fable III tried hard to break the bonds of windows and menus by letting you transport to a "safe house" of sorts. I guess that's close to what I'm talking about and it was serviceable; I was able to play the game to completion without pulling most of my hair out, but it was still cumbersome to be transported to a "virtual menu system" and go around to find and do things like check the map, equip weapons, etc. It fit the bill of being believable and not pulling you out of the game but I would argue it was not efficient in terms of getting things done quickly. It also got old hearing John Cleese say the same quip every time you needed to check your map.

So, this leaves me wondering: how can a fantasy RPG like Elder Scrolls achieve a similar immersive menu UI like Fallout 3 that is believeable, efficient, and immersive? Here are some of my thoughts.

Managing Skills

In an RPG, you typically play a lonesome hero or hero leader that has a set of skills and powers they can use. Some are passive (as in Elder Scrolls) and others can be used like items (Titan Quest, Diablo, MMOs, etc.).

In most games, viewing your skills usually involves opening a dialog with a large tree of skills where you can invest points in acquiring or leveling up skills. There are many variations on this core design.

In Fallout, when you level up you're presented with a dialog where you can pick your "perk" and invest skill points. Here, the game diverges from an immersive UI and falls back on a regular dialog box UI. As a player, this never bothered me and I think is a good example of where a choice was made to use a familiar UI that, while immersion-breaking, made it easy to use.

In Skyrim, I think they did a good job making this experience immersive and fitting it into the world story. Instead of opening a special menu, your character "looks to the heavens". There, you can view constellations that correspond to specific skill trees. When you view a constellation, you can see each star, which is associated with a skill. It's exactly what I'm getting at: believable, immersive, and usable.

As far as leveling up in Skyrim, I don't think we've seen what that looks like. I'd imagine something similar will happen where you can "look to the sky" and there you'll be presented with some choices of what to do.

Managing Inventory

In Harry Potter, the inventory question has already been solved. If you've read the books or seen the movies, you know Hermione carries around a bottomless purse which contains everything she needs, from textbooks to tents. It's believable in a magic world, so why shouldn't a game like Elder Scrolls implement something similar?

I would imagine an animation where your character pulls out a sack from his waist and peers down into it after which you're presented with some sort of UI. Here, you could present a regular table/list-based UI or even 3D visuals of your items.

Magic & Spells

What immediately jumps to mind is a spellbook your character carries around. You could base the UI off of an open spellbook interface. Many other games do this to good effect. This example is from King's Bounty (which I haven't played so I can't speak to its usability):

Quests

In The Elder Scrolls III: Morrowind, your quests and conversations were recorded in a Journal. While it was sometimes difficult to use, it is still a great idea and other games have played off a quest journal type interface.

In Skyrim, I do not think we've seen how quests are managed. Interestingly, I did notice that once your character reached a certain point in the cave in one of the recent demos, a message displayed saying, "Quest Started: xxx" telling me that either you overheard a new quest or an active quest can be triggered by going to some special area. You can also cast a spell called "Clairvoyant" to do a Fable-style glowing trail to your closest objective.

Map

In many RPGs with HUDs, a mini-map is displayed in the corner. In Bethesda RPGs, you've always had to enter a menu to pull up a map (world or local). In Skyrim they've focused on using as little screen real estate as possible for the HUD which is awesome and in Bethesda's games I haven't ever really felt the need for a minimap (personally) although I liked how in Morrowind you could choose to have one if you wanted.

In Skyrim, when you open the map, the camera quickly zooms out and gives you a bird's eye view of the landscape, in fully rendered 3D. It's quite a sight. The only thing that stops it from meeting all of our criteria is that it isn't believable (How can you see that far? Are you a bird? Did you cast a spell? Are you God?).

Since this a fantasy land and as an adventurer you'd probably carry around a map, we could merge the idea of a "crystal ball" with a paper/cloth map. Your character would pull out a small snowglobe-sized object and peer into it, revealing the 3D world map just as Skyrim has it implemented now. Any sort of animation involving a map or compass or globe would be a perfect combination to the new world map feature.

Favorites & Bookmarking

In action-oriented or item-oriented RPGs, typically you can assign items to hotkeys. In Fallout 3, you could assign guns and items to numbered slots on the keyboard.

In Skyrim, it appears it is more "bookmark"-based which I think is an interesting idea pulled from our daily lives: browsing the Internet. When you think about it, it makes total sense to implement a bookmark system in an RPG that can contain thousands of items.

The only issue is that this doesn't really fit into the story at all; it's there purely for organizational purposes. This is exactly the kind of place where a discussion of immersion vs. usability comes into play. You could provide the context of a "belt" and that in your belt you can take out an item in your inventory and place it there for easy access (hotkeys/shortcuts). Assuming your belt was a magical belt, it could "favorite" any number of items.

In Skyrim, there is a single favorites menu and you equip the item in your left/right hand depending on which trigger you pull, as far as I've seen. At least one preview noted that the favorites system was "slightly clunky".

You could also just argue that your character is "summoning" an item from his inventory; perhaps the cue for this needs only to be a simple sound effect or animation that plays when you hit a hotkey or choose an item. If I had the ability to use magic, it would make sense that I'd probably "tag" items in my bag to be available for summoning at will (or take the Harry Potter approach and say a simple spell, "Accio Sword of Monster Slaying").

I am not sure what the best approach here is; but what is important to remember is that this feature is crucial to keeping players immersed and outside of menus, so whether it is immersive or not, it should be easy to use.

Looting

Every open-world RPG I've played has resorted to a dialog system for one of its core systems: looting.

If you think about how a loot system works in terms of development, it makes sense. An object can hold either a set or random assortment of items, maybe placed on entering a dungeon or when the game starts. The easiest and most straight-forward way is to present a list of the items to the player in a popup dialog box.

As a player, I've always been mostly satisfied with looting UI except when a game takes away the single most important shortcut of all: Take All.

Sometimes, even as a player, you don't know you want a feature until another game implements it, which is why I'm fairly excited to see Kingdoms of Amalur implements a "junk" system where you can mark items as junk and sell them in one button press to merchants.

I always thought it would be neat to have an animation where you literally look inside the object you're looting (except maybe bodies). You open a chest, you look in, then a UI that looks like the inside of a chest shows up and you see 3D models of whatever is in it. Then you can "take all" or click/select the items you want. This would work great for chests, barrels, boxes, closets, etc. Not only would this not break the immersion but it would force much more realistic contents for containers. For bodies, something similar to LA Noire where you literally examine the body would be cool but also not very useful for looting quick (thus the immediate 'Take All' button). For a body, I'd even be happy with a view of the body with a list of the items found on the side. Then when you hover over each item, the camera could focus on where on the body it's located. It doesn't have to, if it doesn't make sense (people holding unusually large/small items?).

Here's a crappy wireframe of what I'm talking about:

It always struck me as odd how Elder Scrolls, where every item has a 3D world model, couldn't do this. If you already have a model for every item, why not be creative in how you do looting? Some top-down RPGs like Diablo will let loot fall out of corpses and containers onto the ground; these games had it right and used immersive loot systems. Why couldn't open-world sandbox RPGs do the same, especially when items are already strewn about the world free for immediate pick up. The only RPG with a robust loot system I can think of that used in-game objects for containers was Borderlands where loot would magically pop out of lockers, rock piles or corpses but then again, Borderlands didn't have the same item scope as Elder Scrolls. Still, it's a place to start, isn't it?

At any rate, I think there's more that can be done in RPGs to achieve a more immersive loot UI. I'm positive there's a lot of fun things game designers can do nowadays.

Buying/Selling

Buying and selling items in RPGs has always been a dialog-based system, as far as I'm aware. I understand why it's always been a de-facto standard that merchants carry every item they own (programming, code maintenance, item lists, etc.). The weird thing (for Bethesda games in particular) is why can't I buy things I see in a store? In Morrowind, a shop owner would have items strewn around the store that you could steal but never buy. It never made sense. I also don't think items disappeared when you bought them (they might have been tied to chests or the NPC themselves). Thus, there seemed to be a disconnect between what the merchant had on them and the items visible in the store. In Fallout, it made a little more sense that traveling traders carried their stock on their pack Brahmin (mules). I could see using a UI for that.

An interactive in-world store-front would be an awesome idea and it's not new. In Zelda games, you could go to a trader and see 3D models of items you could buy. In this context, that approach probably isn't good for RPGs that deal with dozens of items per merchant but the idea is what is important (seeing and picking items in a store).

For an open-world sandbox like Skyrim, you could simply just have the items in a store on shelves like a normal real-life store. It's not like it hasn't been possible in the past... Morrowind (above) and Oblivion both had items in the store, but like I said, you could never pick one and buy it, only steal it. Make sense? Not really. You could just extend that same design but make all items available in the store marked as "tradable" so you could exchange an item on the spot or buy a new item. Perhaps implement some customer service AI and have the storekeeper follow you or check on you, allowing faster access to talking to him and selling items. This would throw a wrench into stealthy stealing, though, so maybe don't do this (Oblivion shop owners who followed me around made me angry when I tried to break into their store/bedrooms, even though at first it was "kind of cool").

This immersive storefront experience would not replace the existing efficiency (or proposed efficiency) of current designs of talking to merchants and entering a trade UI. For people that need to just get in and get out, every store could post a piece of paper tacked onto the door or counter that lists everything they sell. This would be the typical buy/sell UI. For selling, you'd talk to the merchant, tell him you want to sell, and enter this familiar UI, but at least it would be explained in the world.

The most recent game I played that used a believable immersive trading UI is Deus Ex: Human Revolution:

Merchants would be standing next to a computer. You talk to the merchant and he directs you to the monitor where you use a faux-OS UI to buy and sell. It was immersive, believable (except you had no idea where the items were stored), and usable (there were some quirks like not being able to use the WASD keys to navigate). In a fantasy game, that computer is probably a (magical?) piece of paper. Maybe there's something even more magical/fantastical that would make better sense.

At the least, Bethesda, do what you're doing right now, just let me buy items in the world too instead of only allowing me to steal them. You're going to let me buy the item when I talk to a merchant, why make me go through that UI navigation process if I am literally staring at the item I want? Yes, there are people that buy things rather than steal them every time. Yes, there are people would swear they've never bought an honest item in their adventure. Cater to both audiences equally efficiently.

Note: Since Skyrim is yet to be released, I have not seen or heard how merchants work in the game. Perhaps they've already done this! I'm referencing Oblivion and Morrowind where the technology was there, just not implemented.

Talking to people

Dialog is always hard because you need to offer the player a list of responses or topics. I think what they are doing in Skyrim is pretty streamlined and concise, not forcing you to listen but showing topics on the side, out of the way. I can't think of a fully-immersive way of presenting textual choices, it seems like it'll break the immersion every time but at least Skyrim is less intrusive than Oblivion/Morrowind/Fallout.

As a player, conversation systems have never bothered me much and actually, Dragon Age: Origins and Mass Effect (i.e. Bioware RPGs) have always felt like the best systems I've used as they are cinematic, enjoyable, and felt like they belonged there.

In terms of usability, the best feature I've seen is in Bioware conversations: they will show (in text) the last thing someone said to you. This is so important I can't even properly express it. It reminds me of what David Sirlin talks about in his piece of about save systems in games:

"Games are not for game designers and their ivory-tower ideals--games are for players. Players have lives outside of our games and we should respect those lives and design our games accordingly, rather than expect our players to design their lives around us." - David Sirlin

I liked this quote because I keep it in mind even when I suggest outlandish ideas like a virtual storefront. In the end, players just want to easily get things done.

Other UX considerations

Timing and animations

I should clarify: when I talk about animations (for inventory or maps or whatever) I am talking about animations 1-3 seconds long. Anything longer and you're going to run into "OMG JUST LET ME DO THIS QUICK" territory and then your beautiful menu system is going to seem clunky and slow (coughFableIIIcough). The Fallout 3 Pipboy animation was perfect: it was fast, you could follow it, you knew what just happened, and it made sense. We live in a world where web pages need to come up in less than 100ms and we can't wait those extra 5 seconds for our download to finish. Keep it short, simple, and believable. You could also use animations to mask processing time; if it takes 100-300ms to load up a player's inventory, an animation would hide that CPU time. I've never programmed a game in my life but on the web, for AJAX requests showing the loading animation even for quick calls is crucial for immediate feedback.

Timing should be one of--if not the--highest priorities when designing a usable menu system. Ultimately, people want to get things done in your game. That's why you saw me say again and again for storefronts, let power users use the inventory list to buy/sell quickly. It doesn't have to be totally immersion-breaking. For those of us who sometimes enjoy strolling through a vendor's inventory visually, we can do that. Efficiency is the name of the game (that's why God invented the Take All command).

I don't think timing and immersive UI are mutually exclusive. Pipboy is my case in point. Borderlands looting is another case. Game designers are by their nature creative people. Use that creativity to prove that you can make an immersive UI without sacrificing efficiency.

Providing critical information at a glance

One thing I noticed about the menu system in Skyrim that I'm not super-enthused about is the lack of critical information without "hovering" or selecting an item (as seen here):

One thing I liked about Oblivion was that they showed some critical information in a table format... so I could sort by damage or weight or see at a glance what the armor rating was for items I held. In Morrowind, you had to do a similar hovering to see stats.

I could see the UI discussion both ways. When I want to equip an item, I don't care about all that other information. However, when I want to sell an item or see if the new item I picked up is any good, I do care about that information. The lack of information in the new UI is both a good thing (clean) and bad thing (lack of information at a glance). I don't know what to think of it yet as I haven't used it but it could turn out OK given some tools to effectively manage my inventory. I'd also like to believe that the console UI is simpler than the usually-more-heavy PC UI.

Providing quick comparisons

The other thing I didn't see (I think) was a quick compare type UI/popup. Bethesda RPGs have never done this. It boggles my mind. If I find an item in the world, I would immediately like to see if it's better than my current equipped weapons (preferably by simply hovering over it or inside of a loot UI, selecting it). If I am browsing my inventory, I'd like to see an immediate comparison to my equipped weapons. One of the best games that did this was Borderlands and is how I'd love to see it in an Elder Scrolls game; as soon as you found an item it was easily apparent what was better/worse about it:

Remote trading

I don't know if this is a good idea. But... stay with me. In Torchlight, while you are out adventuring, you can send your pet (who doubles as a pack mule) back to town to sell whatever he's carrying. No bartering, no nonsense, he comes back in a certain time depending on how much you sold. It's genius, I think. How many times have you been stuck in a dungeon, with a fricking sweet axe in front of you, put it in your inventory and... now you can't move (or in newer Bethesda games, move at 1in/hr). The very dedicated among us might endure the 5 mile long walk moving at the speed of a snail but why should we? In Torchlight you had a pet with a backpack. It totally makes sense to say to Rufus, "Hey boy, take my crap back so I can carry more. There's a good dog." In a lone-wolf type game like Elder Scrolls it might make more sense to magically send items to a merchant or... just open a portal. Hey, you could teleport in Morrowind, it's not a new idea. In Diablo/Torchlight you can open a town portal. That solves the issue, albeit you still have to walk to the merchant, enter the UI, trade, etc. Extend that a bit and you have the ability to remotely buy (or simply sell) items on the spot. Game balance, difficulty, etc. should all be considered in a feature like this but Oh God Wouldn't This Be Useful?

I could see some arguments saying that this would make inventory management too easy. Maybe... but isn't that what you want? You can't tell me you haven't cursed the weight system in Elder Scrolls. I hate to break it to you but now that we've got fast travel, what's a little town portal added to the mix? In Morrowind, one of the first things I do is enchant two amulets: one with Divine Intervention and one with Almsivi Intervention. I pay cash monies to do it straight away because it makes my life so much easier. I can teleport pretty close to town no matter where I am.

Anyway, I doubt you'd use this system to just sell your awesome items all the time... you probably want to hang them up in your modded Dracula castle display cases (like me). You probably don't need all those shiny treasures you're carrying, taking up precious space, that you're just going to sell for cash. You want to carry good stuff that you need for a quest or side project (crafting?). I think this would just make it easier to get rid of stuff you don't need fast and easy.

With new systems like fast travel, this is less of an issue until you're deep inside a dungeon and forgot to empty your rucksack before your curiosity got the better of you and you just had to enter that underwater cave...

Closing thoughts

I'm not saying Skyrim's UI is bad or is wrong. But as someone who continuously works on building better user experiences at work and at home, I always look at my projects and go, "Man, I could really do this and this and this to make it even easier." That's all I want to do with this--point out, as an outsider and future player--what concerns and thoughts I had regarding what I've seen so far.

I'm just wondering why designers/developers don't try harder to make their UIs more immersive and "make sense" within the context of their game. I know it's possible, I've seen it with my own two eyes. I keep referencing Fallout 3, but it's because I was amazed at how well it all just made sense. Pipboy? Sure why not! Sure, dialog/buying/selling went through typical dialog windows but at least they all matched. Even there you could do similar things to what I was saying, maybe with an interactive storefront. Borderlands is a great example of immersive looting, as well as many top-down RPGs.

I also want to be clear and say that while I think having an immersive UI is best, it's also important to let people just get things done. What I mean is, have the sweet & snazzy immersive visual storefront with items laying around to buy, but cater to the power users and keep the quick buy/trade UI. See Windows 8 Metro UI v. classic Windows 7 UI.

I also think you can go too far and just make things clunky and unintuitive. It's a line that's hard to see, I think, and since it's a game and a piece of software, it doesn't all have to be "realistic" and immersive. If it works and is easy to use, that's probably good enough. Going the extra mile to include visual detail is definitely a win in my book, though. What matters in the end is that the player is happy to use your menu system and doesn't curse it until the day they die.

I'm interested in hearing other people's suggestions; after all, we're the ones that play the games to death. I'm just really surprised Bethesda went with a sort of "contemporary" (Apple-like) UI rather than an immersive one like F3 or even a stylized one found in Blizzard games. It's also important to remember that what we've seen so far of Skyrim has been on 360 not on PC and Bethesda could have done UX optimizations for the mouse rather than the controller-oriented design we've seen so far.

I love GitHub so much, I'm a paying member now

Tue, 26 Jul 2011 14:41:02 +0000

As you might know, I released a new site, Keep Track of My Games a couple days ago.

I started out with a remote Git repository on AppHarbor, then switched to BitBucket because it supported free private repositories.

BitBucket is really nice but after trying to use the Issues list I really missed GitHub's clean issues & milestones management. Really, really missed it.

BitBucket's issues list is table-based and displays issue titles in a column. That column gets really small when you have a lot of issues, making it hard to read. I started out typing user stories as the titles but when I went to GH, I made them shorter, task-oriented titles and put the stories inside of them. I think this helps clean up the UI a bit:

Much easier to read and browse and filter issues, in my opinion. I have a system where items I work on are assigned to me, the rest are considered "future" items. I also have a couple milestones set up to track progress. I create labels for major components of the site and then can assign multiple ones to issues.

I will be updating my Roadmap to use GH's REST service and query the issues to display. The nice thing about labels is that I will be able to filter out issues that shouldn't be very public (i.e. security tasks?).

Beautiful.

So I bit the bullet and said what the hell? and signed up for a micro plan. I feel pretty good about it. I love GitHub, it's no secret (case in point, this site). It makes me feel good to support them and show them some well-deserved love. I hope my small contribution helps them keep a clean site and awesome user experience.

Announcing Keep Track of My Games

Sun, 24 Jul 2011 17:44:08 +0000

I am working on a new side project, Keep Track of My Games.

The Rundown

The goal is simple: Manage your collection of games and track games that haven't been released.

You can read the tour on my introduction blog post.

I've setup several social outlets:

I'm also providing a public look into my development cycle via the Roadmap page.

The Technology

I am using MVC 3 with EF 4.1 and SQL Server 2008 deployed via Mercurial, BitBucket, and AppHarbor. I am using the JSON API from GiantBomb to fetch search results than caching them locally to the database. I'm not super enthused with the performance but hopefully I can make it better in the coming weeks.

I use Twilio for SMS and for now, regular old SMTP for emails but I may upgrade depending on load. I use a "scheduled" job that runs through the database and figures out if games are coming out soon or are released or if their release dates have changed.

The Architecture

I have a pretty straightforward and simple architecture: everything goes through application services that do not have any web dependency.

My controllers are pretty stupid; they ask the services for information and process the results:

The key is my ActionConfirmation class which I borrowed from my co-worker. I thought it was awesome for Service => Controller communication. The reason being I can pass error messages / validation results cleanly.

For example, in this action, if an error occurred when saving tracking settings, I need to go and get the current tracking settings to add some view-specific logic (like, whether or not to show the email/phone checkboxes):

The currentTracking is of type ActionConfirmation<TrackingViewModel>. So, if a service call was successful, I can retrieve the result via currentTracking.Value. I also use a non-generic ActionConfirmation class that doesn't require any return value.

Here's an example of the service code returning ActionConfirmations:

I am not 100% OK with this because for complex business validation, the results are coming back one at a time. I will be refactoring later to avoid this.

The "Open" Source Agenda

I have been playing around with making this source code public. Only a few things prevent me from doing so:

I need a way to hide secret tokens for APIs and my passwords for some services.
If people know the code, they'll see all the security holes and it's possible someone could exploit them and steal my user's data (not cool).

Really item #2 is the big decider. I am using OpenID and DotNetOpenAuth but that doesn't mean the site is totally secure. The worst information that could be obtained is someone's email and phone number, both of which I plan to encrypt for extra safety (once I figure out how that works with EF).

I am thinking instead of totally making it open source, to allow select contributors I trust into the codebase for reviews and patches.

If you would be interested in doing that, I have a tester system setup so let me know and we'll talk.

Resolving HTTP 500 errors when deploying to AppHarbor

Thu, 21 Jul 2011 22:31:40 +0000

This is a quick post. I was getting HTTP 500 errors when deploying my new site to AppHarbor. Long story short, if you've brought down the DotNetAuth Nuget package, it adds this to your web.config:

<section name="uri" type="System.Configuration.UriSection, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" />

AppHarbor already has this defined and it is throwing a duplicate web.config section exception. Remove this line and you should be A-OK!

My Git workflow for .NET-based projects

Tue, 28 Jun 2011 17:38:24 +0000

When I was new to Git, it was very confusing for me to get up and running with how to deal with the command-line interface (if you're fancy and use a GUI, leave now). Once you do get the hang of it, it's super nice and fluid. I used to do terminal CVS at my last job so I'm not out of touch with using version control from a console.

Set up your .gitignore

Here's mine:

#OS junk files
[Tt]humbs.db
*.DS_Store

#Visual Studio files
*.[Oo]bj
*.exe
*.pdb
*.user
*.aps
*.pch
*.vspscc
*.vssscc
*_i.c
*_p.c
*.ncb
*.suo
*.tlb
*.tlh
*.bak
*.[Cc]ache
*.ilk
*.log
*.lib
*.sbr
*.sdf
*.docstates
ipch/
obj/
[Bb]in
[Dd]ebug*/
[Rr]elease*/
[Pp]ublish*/
Ankh.NoLoad

#Tooling
_ReSharper*/
*.resharper
[Tt]est[Rr]esult*

#Project files
[Bb]uild/

#Subversion files
.svn

# Office Temp Files
~$*

# Custom
*.private
readme.html

At the end, you can add whatever you want. For some projects, I store API keys in a .private file. You might want to as well.

Init your repo

The first command you'll need to execute is git init. This will make whatever folder you're in a new Git repository (repo).

Kamran@Kamranicus /c/Projects/Contrib/.JSON
$ git init

You should then add all your files and commit them for an initial "base" version.

git add .
git commit -am "Initial project commit"

Because of your .gitignore file, Git will ignore all the unnecessary files .NET solutions tend to generate.

Set up a remote

If you're doing stuff on AppHarbor or GitHub, you'll need to add a "remote." This is just a remote Git repository you can associate with your local repository. You can have lots of remotes. I tend to have one or two.

git remote add https://kamranayub@github.com/<some url>

This information is usually provided by your remote site (GitHub has it when you create a new repo on the site).

Status, Add, Commit, Push

I do a lot of my projects on AppHarbor now. It's just a real nice workflow and I'll explain why.

I make changes to my .NET solution and when I'm ready to commit (usually after a feature or bug fix) my console command history looks like this:

git status
git add .
git commit -am "My commit message"
git push appharbor master

git status

This command will display what things you currently have pending and what changes are untracked. Use this to determine if you should not track a certain change (using git checkout -- <file>).

git add .

This command will add whatever "untracked" and modified changes you have currently pending to ready your commit. Deletes, adds, etc. usually are untracked. Git tracks modifications and renames. The . adds all files (relative to your current folder). You can be as specific or as generic as you want.

git commit -am [message]

This command commits your changes. The -am switch is for all changes (a) with a message (m). You can type -? to get a list of switches you might want to use. If you don't use the -a switch, your untracked changes may not be committed. If someone wants to explain why this is the case, I'd love to know (or I guess I could look it up). Whatever the reason is, use -am unless you know otherwise.

git push [remote] [branch]

This command will send a git push command to your remote server. In my case, it's appharbor. GitHub will usually tell you to add their remote as origin but you can name them whatever you want. I tend to have appharbor and appharbor-d for staging.

Once you push, your latest changes will be on the remote server. It is usually a good idea to wait to push until you have a stable release ready for your branch. It could be after one commit or after 10 commits.

Git pushin'

So now you know what a typical workflow is for my .NET development. If you're interested in file structure, check out my .JSON project.

Pass in your variables to console.log as parameters to make them navigable

Mon, 27 Jun 2011 14:24:54 +0000

I was helping a co-worker debug a JSON issue when I saw he was trying to use console.log. I asked how he was passing it in and he was doing exactly what you'd think should work:

// result = some JSON object
console.log("Returned data: " + result);

He was seeing:

Returned data: [Object object]

He was wondering how he could stringify the result. You could do that, I said, but I have a useful tip!

Try doing this instead:

console.log("Returned data: ", result);

And voila, the console will not try to .toString() your object and it will be navigable:

Clicking the object link will let you view its properties.

I always thought this was a useful and not very well known feature of console.log so hopefully that might assist you in debugging!

Using SquishIt Without Writing to the File System

Wed, 22 Jun 2011 14:16:11 +0000

I'm a big fan of SquishIt, which is a library that compresses and minifies CSS and JS. It automatically keeps thing uncompressed locally and then on your web server, versions and compresses your files. The versioning is based on a checksum of your files so it automatically handles any changes you make, it's gold.

The thing that I don't like is that by default, it writes to your file system which is usually a no-no on shared hosts or even enterprise applications.

I asked if you could use SquishIt programmatically and you can! I wrote up a wiki article on their project page to show how it's done.

If you haven't used SquishIt, I'd highly recommend it!

Released NuGet package of .JSON

Thu, 16 Jun 2011 19:49:32 +0000

Yesterday I released my .JSON library as a NuGet package (about time). It is named DotJson.Source to follow current conventions. If you need me to, I can also release it as a compiled DLL.

You can get it via Visual Studio or the Nuget.org page.

To Use It

Add it as a library reference via Nuget. In your code file, you can add a using DotJson; and then start using the library. That's all you have to do.

See the documentation wiki for more information.

Fixing the POST value of the button element in IE 7 and below

Thu, 19 May 2011 18:07:48 +0000

Please see this write up for the exact issue. Basically, IE 7 and below do not properly submit the "value" of the <button> tag, opting instead to submit the innerText. We just hit this issue while testing with our users who used IE7 on a project I'm on.

Here is the fix I'm using which I prefer to all the other alternatives I saw in the comments of that post. It meets two of my objectives:

It's totally transparent
It's only for IE 7 and 6

Entity Framework, Polymorphism, and AutoMapper: Can't We All Be Friends?

Fri, 22 Apr 2011 04:41:05 +0000

At work we were running into an interesting issue. We are using EF Code First, AutoMapper, and the dynamic proxies generated by EF. We map our domain entities onto our view models.

The Problem

AutoMapper fails to map a derived type to a view model base class for use in a general-use scenario:

public IEnumerable<AbstractViewModel> GetPolymorphicClasses() {
    var list = db.AbstractClasses.ToList();

    // list is a list of dynamically proxied derived types
    // DerivedTypeA, DerivedTypeB, and so on
    // aka DynamicProxy_xxxxxxx
    return Mapper.Map<IEnumerable<AbstractClass>, IEnumerable<AbstractViewModel>>(list);
}

The "Solution"

This is not a solution, but it's the best I could do with limited knowledge of AutoMapper and a need to just get it working quickly. Thanks to this post on the same problem, I was able to retrofit the answerer's answer to a solution that worked for me (his generated a stack overflow because it seemed to get stuck converting in an infinite loop).

If Jimmy Bogard reads this, please tell me what I'm doing wrong and how to actually fix it:

MIX 11, Day 2 - Kinects, Celebrities, Kings, and Clubbing

Thu, 14 Apr 2011 21:45:12 +0000

Have you ever had a day where everything that happens just comes together to create the greatest day ever? Well, let me tell you about mine.

Kinects for Everyone

I posted about my thoughts on the keynote on Day 1. It was mediocre. It seems that Microsoft saved the best for last because the day 2 keynote was, in a word, amazing.

First, MS covered everything about the new Mango update for Windows Phone 7. I don't even own a WP7 and I wanted to toss my Droid into the trash by the end. Now that there are really awesome and useful APIs being introduced, I may start developing some WP7 applications.

Second, MS covered Silverlight 5 which actually does introduce some useful features like GPU acceleration, XNA integration, and 3D support. That is pretty cool. I haven't checked but I also hope they offer better clipboard integration.

Third, and of course, the best part of the keynote, was the announcement of Kinect for Windows SDK. We saw demos for helping navigation for blind folks, a robotic lounge chair, a game, and a galaxy simulator. As if that weren't good enough, every attendee got a Kinect.

The free Kinect was definitely a surprise and an awesome perk of going to MIX. Unfortunately, I already own one and company policy dictates I can't accept gifts over $100... so I had to forgo that.

My inner fanboy is satiated

Scott Hanselman and Phil Haack. I was also within 10 feet of Rob Conery so that counts, too. 'nuff said.

Watching presentations by Hanselman is like watching a comedy show, I can only aspire to make people laugh like that during my presentations.

Circle of Life

Me and Cassie went to The Lion King at Mandalay Bay later that night. It was fantastic, everything about it was amazing. The costumes were incredibly clever and creative, the actors were awesome, the stage sets were great, and the music was top notch. We sat in the 5th row or so and it was perfect.

VIP Life in Vegas

All MIX attendees were invited to The Marquee nightclub, which is a new club in Vegas. I got a guest pass for Cassie and we went and it was a lot more fun than I had expected. Usually, I am not one for dancing or clubbing, but I figured this was a unique experience I shouldn't pass up. I am glad I didn't! It was a ton of fun and the nerd level was off the charts. Half the people just sat or stood in place, silently sipping their drinks while everyone else was having fun. We sat and drank a bit but decided we needed to have some fun, so for the rest of the time we danced and partied in the "mosh pit." When you're dancing with a bunch of geeks and nerds, you really don't need to worry about how you dance.

So, in summary...

Best. Day. Ever.

MIX 11, Day 1.5

Tue, 12 Apr 2011 21:57:55 +0000

This is the first time I've ever been to Vegas. I think that one guy on Twitter had it right, "everything in Vegas is fake." That said, it's still pretty neat. We walked to the Bellagio last night and saw Celine Dion's water display. My heart did go on.

Open Source Fest

The open source fest went swimmingly. I had been afraid I wouldn't meet anyone or no one would like my library but that wasn't the case.

I met John Sheehan from RestSharp, Sam Saffron and other developers from Stackoverflow, Jonathan Marbutt from the Opus Silverlight framework, and Jeff Weber from the Farseer Physics Engine. I also met lots of lovely people who were kind enough to throw some chips my way.

From the SO team I also acquired a black StackOverflow tee, which I am geeked out about.

I got a lot of awesome feedback on my little library, including plenty of questions about whether it works in Silverlight. Looks like I may have some investigating to do.

Thoughts on the Keynote

I posted a picture of what the MIX stage looked like at the keynote. It looked like a stage for a rock concert, it was pretty awesome.

The content of the keynote seemed to generate mixed feelings. Several times the speaker had expected an eruption of applause but the audience wasn't forthcoming. Maybe they had all lost their money the night before?

The first half was all about IE and how it's so great and excellent and other browsers (Chrome) can't keep up. Personally, I like all the new improvements IE provided and hope to see other browsers play catch-up in terms of hardware acceleration. But the fact that only IE can perform hardware accelerated tasks sort of diminishes the value of the feature, since users not using IE9 (a significant portion of people) lose out. It's a value judgement you have to make (and in an ideal world, shouldn't have to make...). I don't know if that's any different than the decisions we've had to make previously as designers about how to tackle issues that other browsers sans IE support, though.

Notably missing was talk about Silverlight. Microsoft seems to be undecided in what to sell... on one hand they are focusing hard on HTML5 and rich web experiences but on the other they are selling Windows Phone 7 which builds on Silverlight. The rest of the non-MS world has shown it is entirely behind HTML5, so at least on the web, I feel like Silverlight is a losing battle... not that SL is bad by any means, just that more tooling may come out surrounding HTML5 than SL.

I thought the keynote was "interesting" and that's probably where I'll stick. I didn't expect half the time to be spent on IE but then I really didn't know what I should be expecting.

"All the code you write is wrong."

Fri, 08 Apr 2011 15:47:57 +0000

Every time I read about a "best practice" or the opinions of highly regarded (to many) developers, I always am amazed at the different opinions in response. This isn't bad. In fact, I think it's pretty cool we all share differing opinions and what works for one person may not work for someone else. I find it refreshing to see all sorts of opinions that propose different ways of doing the same thing.

Thus, my mantra from now on is:

"All the code you write is wrong."

That works for me considering I never met a developer who always thought what they wrote was perfect.

I strive to write "good" code but I'm always ready to hear it is terrible and could be done a better way. That's why there are smarter people than me alive.