One of my nerdiest hobbies is tweaking the software on my HTPC, a custom Windows 7 box I built with a very good friend of mine after its predecessor fell short of my expectations.

My current remote-friendly front-end of choice is XBMC (version 11, “Eden”). I thought I’d share how I got it to launch the Netflix portion of Windows Media Center and Hulu Desktop from the home screen using AutoHotkey and a couple of add-ons.

Prerequisites

Before we begin, make sure everything here is installed and ready to go:

• Windows 7 Home Premium (or greater)
• Remote (such as a Logitech Harmony One) and receiver (I use this one)
• XBMC version 10 or higher (I’m using 11)
• AutoHotkey (I’m using the 64-bit version, but I’m not sure it matters)
• Windows Media Center with Netflix
• Hulu Desktop

We’ll also need these XBMC add-ons, both available in the XBMC.org Add-ons repo in the Program Add-ons group. Refer to this how-to if you need help.

• MCERemote
• Either Advanced Launcher or Executor (I used Executor)

Getting the remote to play nice

Most Media Center remotes send these low-level commands that are interpreted by something called an “eHome” driver. This makes the customization of these commands pretty frustrating, and the software that’s available to help you through it is either over-reaching or completely unintuitive. Thankfully, the MCERemote add-on helps us deal with that pesky issue by remapping those commands to more agreeable keystrokes.

Navigate to the MCERemote add-on and follow the instructions therein to apply (and optionally customize) the changes. If you change your mind later, you can reverse these changes from this same add-on.

Launching XBMC from the start button

Sometimes referred to as the “Media Center,” “MCE” or “green” button, the start button is prominent on just about every HTPC remote and in the configuration options for the Harmony One. Normally this will launch Windows Media Center, but we want it to launch XBMC. Thankfully, the MCERemote add-on remaps this command to Control + Shift + Win, which we can listen for using an AutoHotkey script.

Create a new file called launch-xbmc.ahk (or something similar) with these contents:

^+W::
IfWinExist, Windows Media Center
{
    WinClose, Windows Media Center
}
IfWinExist, Hulu Desktop
{
    WinClose, Hulu Desktop
}
IfWinNotExist, XBMC
{
    Run, "C:\Program Files (x86)\XBMC\XBMC.exe" "C:\Program Files (x86)\XBMC"
}
WinActivate, XBMC
return

After you’ve saved the file, double-click it. You should see a little AutoHotkey icon in your taskbar indicating that a script is running. While running, the start button will tell your PC to do this:

1. Close Windows Media Center if it’s open.
2. Close Hulu Desktop if it’s open.
3. Open XBMC if it isn’t open.
4. Bring the XBMC window to the foreground.

To ensure this script is always running, I recommend placing a shortcut to it in your programs’ “startup” directory.

Launching Netflix and Hulu Desktop

Next, we need to create two more scripts that we can launch from within XBMC. Both scripts do essentially the same thing:

1. Run the app.
2. Make sure the app has focus.
3. When the app closes, give XBMC the focus again.

Here are the contents of our launch-hulu.ahk file:

Run, %LOCALAPPDATA%\HuluDesktop\HuluDesktop.exe
WinWait, Hulu Desktop
WinActivate, Hulu Desktop
Process, WaitClose, HuluDesktop.exe
WinActivate, XBMC
ExitApp

And of our launch-netflix.ahk file:

Run, windowsmediacenterapp:{e6f46126-f8a9-4a97-9159-b70b07890112}\{982ea9d3-915c-4713-a3c8-99a4688b7c59}?EntryPointParameters=
WinWait, Windows Media Center
WinActivate, Windows Media Center
WinWaitClose, Windows Media Center
WinActivate, XBMC
ExitApp

Make note of where you saved both files, and open XBMC again. Navigate to your add-ons and select either Advanced Launcher or Executor (depending on what you installed earlier).

Follow the in-app prompts to create launchers for both Netflix and Hulu Desktop. I recommend watching this walkthrough for assistance doing so using Advanced Launcher.

Adding the launchers to your home screen

For each of the launchers you create, highlight them in the add-on menu and hit C on your keyboard. This will bring up a context menu. Choose to add the launcher to your favorites.

Now, go to your XBMC system settings and find the “Skin” section. Every skin is different, but if yours supports custom home screen entries, there should be some sort of “home customization” section. Look for a way to add a custom “favorites” item.

I’m using the Aeon Nox skin. When customizing the homescreen, I set “FAV1″ and “FAV2″ to my Netflix and Hulu launchers. Aeon Nox also lets me set custom backdrops, which I created especially for Netflix and Hulu.

Enjoy (with caveats)

Hooray! Now you should be able to enjoy XBMC, Netflix and Hulu in harmony from the comfort of your living room. That said, there are some drawbacks to this solution…

• Sometimes, Netflix will refuse to keep focus and the taskbar will be overlayed. This is a bug with Windows Media Center in general. It doesn’t happen often, and hitting the “start” button and launching Netflix again will fix the problem.

• I ran into issues closing XBMC entirely and re-opening it on app exit, so in this case XBMC will remain open while Netflix and Hulu play in the foreground. This works fine for my setup which has a reasonably robust processor, but may be a non-starter for slower systems.

• This is really for HTPC geeks only. If you want internet TV to “just work,” I recommend investing in an Apple TV, Xbox 360, PlayStation 3 or Roku.

If you have any suggestions on how I can improve my setup, please let me know!

Fun fact: This was the first time I had actually used a QR code. The second was when I was trying to fix the Hexahedron.

When Nintendo added the original Super Mario Bros. to their 3DS eShop, I swiftly and predictably purchased it. A few minutes in, I experienced something I don’t typically associate with a Mario game.

Buyer’s remorse.

Don’t get me wrong, I love Super Mario! Having never played Pitfall!, this is really where my favorite video game genre (the platformer) began. It’s as much a treasured work of art as it is a significant artifact of popular culture. Five clams for all that is a pretty great deal.

Yet my apathy persists. I’ve owned three prior versions of Super Mario Bros., the first being an NES cartridge that also included Duck Hunt. The second was the 1999 deluxe edition for the Game Boy Color, which added extra challenges, game saves and a world map. The third was included in the 2010 rerelease of the Super Mario All Stars compilation, which I’d played repeatedly at my cousins’ house in 1993 and ’94.

The All Stars version is my favorite.

Even as a kid, it just seemed far improved. Mario had an outline and enough detail to consistently set him apart from his environment. The personalities of the items and enemies I’d grown to love had been amplified; goombas seemed meaner, bloopers squishier, koopa troopas more brainless. Mario himself got shorter and pudgier, even less likely a hero than before. All of these little touches (along with the ability to save my progress) appeal to me as much today as they did almost 20 years ago.

In some ways, Super Mario Bros. is a victim of its own inventiveness. Its visuals are iconic for their economy, quirkiness and familiarity but, by the standards of 1988′s Super Mario Bros. 3, the persistent lack of contrast and depth is less charming than it is disruptive.

What I’d love to see, and what I think this series deserves, is a new All Stars compilation with 8- and 16-bit versions available. There’d be no better way to allow gamers young and old to experience the foundations of Mario firsthand, with or without all the baggage of 1985.

Can we at least ditch the lazy “virtual console” version in favor of a “3D Classics” release? I just can’t accept that Urban Champion is more deserving of that attention.

Tim Sears and I (otherwise known as Backabit) went out and saw the Portland screening of Indie Game: The Movie last evening.

I’m totally biased since I was a Kickstarter backer of the film (it was fun seeing my name in the credits) and because I qualify as an indie game designer… but I think it was the most creatively inspiring documentary I’ve ever seen. I even teared up during a few scenes, especially during Edmund’s reaction to the prospect that Super Meat Boy might be inspiring kids to draw and make games the same way Mario had inspired him. That feeling has some special significance to me.

Toward the beginning of the Q&A session, filmmakers James Swirsky and Lisanne Pajot told us that, during our screening, Phil Fish had announced a release date for Fez. Having just witnessed Phil’s passion and heartache laid bare on the silver screen, our audience couldn’t help but applaud.

Portland was the almost-halfway point for the film’s screening tour. I encourage you to see it if it’s coming your way.

This assumes that you’re using conditional comments on the html tag to define classes for certain versions of IE. This technique was originally proposed by Paul Irish and refined in the HTML5 Boilerplate to something like this:

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

You can omit the “no-js” class if you aren’t using Modernizr, and feel free to remove or tweak the conditional comments to suit the versions of IE that actually require fixes (I recommend referring to this Quirksmode post for examples).

With this markup is in place, you can conveniently target styles to specific versions of IE. For example, let’s say I’m running into a box model bug in IE7 that’s resulting in a div not having the correct amount of top margin. Thanks to the classes I’ve applied using conditional comments, I can apply extra margin only for that browser version and below.

.example { margin-top: 24px; }
.lt-ie8 .example { margin-top: 48px; }

Voila! .example will have extra margin to account for the bug in IE7 and below without impacting any other browsers.

Vanilla CSS works well for a simple, top-level item like that, but it can get a bit hairy when you try to apply similar fixes with particularly deep inheritance. An example:

.l-container.example.s-active .button {
    background-color: #00ccff;
    display: block;
    line-height: 42px;
}
.lt-ie8 .l-container.example.s-active .button {
    height: 42px;
}

Yeesh… that’s pretty verbose! Here’s where the beauty of LESS comes in handy, particularly its support for scoped variables, nested rules and the ampersand combinator:

.l-container.example.s-active .button {
    @height: 42px;
    background-color: #00ccff;
    display: block;
    line-height: @height;
    .lt-ie8 & {
        height: @height;
    }
}

Occurrences of @height will be replaced with 42px in the compiled CSS. The ampersand in the nested selector will be replaced by the parent selector. This will compile to exactly the same as the previous example, but with a lot less redundant typing.

That’s all well and good for one-off bug fixes, but what about recurring fixes that need to be applied on a case-by-case basis? That’s where the power of parametric mixins comes in handy.

Here’s an example of a mixin we can use to support transparency in old IE syntax and standard syntax. Note that because IE’s filter property does not use standard CSS syntax, it can throw off the LESS parser, so we use a leading tilde (essentially the LESS equivalent of eval) and string interpolation to render the rule:

.opacity(@amount) {
    opacity: @amount;
    .lt-ie9 & {
        @ieop: @amount * 100;
        filter: ~"alpha(opacity=@{ieop})";
    }
}

.example { .opacity(0.5); }

Which will compile to:

.example { opacity: 0.5; }
.lt-ie9 .example { filter: alpha(opacity=50); }

Here’s another example for supporting inline-block in IE7 and below:

.inline-block() {
    display: inline-block;
    .lt-ie8 & {
        display: inline;
        zoom: 1;
    }
}

.example { .inline-block(); }

Compiled:

.example { display: inline-block; }
.lt-ie8 .example {
    display: inline;
    zoom: 1;
}

Like The Force, nested rules can be used for good or for evil. When working with this sort of shorthand it can get a little too easy to overuse mixins or forget to combine selectors to insure your compiled CSS is still fairly lean. Refer to this entry for more on that very topic.

Teachers used to scold me for littering the margins of my schoolwork with compulsive doodles.

Not all of my teachers did this. Most ignored it, some contributed commentary, others would look for creative ways to apply that energy to the coursework.

I’m not sure why it was important for some of them to discourage me (aside from the cultural precedent for doing so). I wonder what they’d think today if they saw how beneficial this habit became to my work.

Doodling is a great way to bond with other creative people. There’s an unspoken exchange of mutual experience regardless of how radically different your styles may be.

Sasquatch! Music Festival’s tenth anniversary may have come and gone, but somehow we managed to squeeze one more award out of last year’s adaptive website redesign. You’ll find a trifecta of sassy screenshots featured in this month’s HOW Magazine amidst oodles of other international and interactive design award winners. Far out!

In case you missed it, here’s a video of David Carroll, Erik Jung and I talking about the design approach early last year: