I’m barely sneaking this in before the end of the year, but here it is! My favorite albums from 2012. These are roughly in order. I listen to a lot of music (if you’re at your computer all day, you probably do to) and this list is the game I play all year. It’s kind of a gimmick so that I keep thinking about music. It’s tough to say what puts an album onto the list so, normally, I try to post some commentary too, but I’m afraid I won’t post anything if I wait for that this year. So, here you go…the top 25!

We (at Pixel Lab) have mixed feelings today as we wish our friend and colleague Derek Lakin the best of luck in his new role at Microsoft. We’re a really small group and losing someone as talented as Derek is hard. He makes an amazing contribution to the team. Mostly, however, he’s become a great friend and it won’t be the same around here without him.

On a brighter note, Derek will be on the Skype team at Microsoft in Stockholm and I’ve volunteered to be a frequent source of testing. Hopefully that means we stay in touch! Still, the best part of running a company is that you get to choose who you work with and Derek was a great choice.

Good luck, Derek!

Manifesto is kind of an old fashioned word. I started flirting with it because of Paper (the app). I’ve been a little obsessed with Paper, both the product and the process that made it.

If you haven’t seen it, Paper is an iPad app for sketching. It’s probably only 20% different than a dozen other apps but it’s 1000% better. Just about everyone agrees. They’ve sold 1.5 Million copies in 2 weeks, The Verge started reviewing styluses and Amazon ran out of them (for a few days at least). We’re all buying styluses now, mostly because of one app.

What makes it so much better? There’s been endless opinion about this. The convergence seems to be on their painstaking attention to detail and focus on doing a single thing well. Sounds familiar. In fact, that seems to be the magic one-two for creating a great version of anything: focus and then a relentless committment to doing that thing well.

That’s why you need a manifesto. It’s a powerful instrument that helps you do both of those. I started thinking about that word when I saw it here:

That’s from a sample Paper sketchbook called “Making Paper” that ostensibly contains notes about the process of building the app and the brand. This page is to be their site map and the real page does, indeed, contain a manifesto. Their’s reads:

We noticed that somehow, along the way, software designed to help us be creative actually made us less creative. That’s because we believe our best ideas emerge when we use pencils and paper. So we set out to build tools that work the way we do.

I don’t have a dictionary definition of manifesto at hand. I’ve avoided looking it up because I’m willing to hijack it (take that word meanings!). I think of it this way: a manifesto is a declaration of why the thing you do makes the world better.

Sounds simple, and maybe it is. Maybe you’re already working under some assumptions that roughly add up to one. The power of the manifesto, though, only comes when you write it down. Keep it short and understandable. You should have a single sentence version and a single paragraph version and then be ready and excited to lay those on anyone that asks. To be clear, it’s not the sentence or the paragraph that matters. It’s the process and the fight for clarity that makes the difference.

Until you write it down, your manifesto is not a manifesto. It’s just those rough assumptions, equivocal ideas and inconclsusive connections. That amorphic thing has no power, no ability to make you focus and no capacity to strenghen your comittment. I think you have to write it down and then share it. I’m writing mine.

Paper had a manifesto and they knew it. They labeled it. I think some people might have the clarity of mind to create these naturally, without trying. For the rest of us, it takes some work but I suspect it can become a habit.

I started looking for examples and their are dozens, probably hundreds. Find a hero (a business you love, a thinker you want to emulate, a creation that touched you, a leader you want to follow) and you won’t have to dig deep to find a manifesto. They might not call it that (probably won’t), but the evidence will emerge in the form of an alluring ability to simply state their reason for being, coupled with an infectious commitment to what they create. And that’s the magic.

When I worked at Microsoft on the WPF team, my job was to manage (“project manage” that is) the controls team. We (at least thought we) were an important team. Controls are big deal, a huge part of what UI framework does. The other half of the WPF team was the Documents Team and for those guys, controls were kind of an after thought. You don’t really need controls in document platforms.

Until a few years ago, we all thought the web was more like the Documents team than the UI team but things are changing quickly and today we think of HTML as an app platform as much as a document platform. Windows 8 has bet on that. So has just about everyone.

Oddly, though, we still don’t have a great components framework for HTML. Personally, this drives me nuts. There’s not a standard way to encapsulate reusable bits of UI on the web. Don’t get me wrong, we hack our way through it pretty successfully (I’m looking at you jQuery plugins / jQuery UI) but everyone has a different approach. Some are better than others. Few are easily extensible. Most have inconsistent support for styling, subclassing, etc.  It’s kind of a mess and it’s lacking the rigor of a UI-first framework.

Incidentally, the Windows folks have done a stand up job at addressing this in Windows 8 using data- properties to flag a div as a control (e.g. <div data-win-control=”WinJS.UI.ListView” />). There’s been some criticism of that approach, but I personally like it. It’s a tough problem because the HTML spec simply doesn’t provide a solution today.

Well, all is not lost! In trying to figure out how we organize our component library for HTML, I’ve found two promising solutions:

Quick UI

First, is QuickUI. It hasn’t gotten the attention it deserves, but it’s awesome. It’s immediately intuitive (especially if you’re coming from a component driven framework like WPF or Silverlight), extensible, flexible, stylable, etc. It’s also declaritive (like XAML). There’s a good walkthrough on the site that will bring you up to speed in 30 min. and there’s big library of free controls (ready for styling). For me, though, the exciting bit is the extensibility. There’s a clear path for creating your own reusable QuickUI components.

If it feels a little like WPF, don’t be surprised. It’s the brainchild of Jan Miksovsky. He’s also a former Microsoft guy (an early UI guru there that invented all kinds of things that today we take for granted). He was also super influential in helping us define early requirements for WPF. He’s a components guy. He’s one of those UI-first people that also has a solid engineering background, and the sort of person that does things right or doesn’t do them. QuickUI is pretty amazing and done very thoughtfully.

Web Components

Where QuickUI is my solution for today, the longer term solution might be Web Components. This is new. It’s a spec from some folks at Google and it defines a way to build this kind of extensibility right into HTML. I think it’s incredibly promising and may be a key to HTML becoming a real UI framework.

Incidentally, I came across the spec on Jan’s blog (the QuickUI guy). He sees convergence with QuickUI and Web Components in the future. So there you have it! Invest in QuickUI today and migrate to a better solution later and for free. At least you begin to apply some of that CS rigor that makes the S part of CS true. It’s also the right time to start building out your own library of components. The age of HTML apps is upon us, we just need to wait for HTML to catch up!

Here’s a fun tip about the HTML5 version of Cut the Rope. If you launch the game with this web address:

…then you’ll get a page background that changes depending on the box your playing. In the first box (the cardboard box) nothing changes. In the fabric and toy (IE) boxes, you’ll see updated background images (the background for the whole page). It doesn’t directly effect the game, but it’s pretty fun.

More importantly, no one knew about this until now so you can impress your firends with your insider knowledge!

Here’s how it happened: I was tasked with designing the “box edges” that surround open boxes (like currugated edge on the cardboard box). I was having a hard time making the box border for fabric (green) box feel right. It kind of clashed with the cardboard background, so I tested it with a special fabric background. It looked cool!

Eventually I worked out a design that didn’t need the custom backgrounds so I disabled them by default, but left them in the game with a querystring parameter (boxbackgrounds=true) so that we could get an opinion from the guys at ZeptoLab (our client, the guys who created the original game). We decided not to use it, but we never turned the feature off. It still works!

So, try it out. Dazzle your kids. Impress your mom. Who doesn’t love a custom background, right?? (Answer: nobody doesn’t love a custom background).

Here’s the URL again: http://www.cuttherope.ie/?boxbackgrounds=true

Update: A build that fixes the Flash-related loading problems (see below) in Firefox has gone live. That build also fixed the loading issues with the game on iOS devices and added some (very) basic support for touch events (both iOS and IE10 / Windows 8). Play it at www.cuttherope.ie.

Monday was a big day Pixel Lab. We had the incredible opportunity of developing the HTML5 version of Cut the Rope for ZeptoLab (the brainiac creators of the game) and Monday was the launch. Overall, the feedback has been incredibly positive. It’s been cool to see people get excited about what you can do with standards-based code in a modern browser.

A handful of people (CNET, here)  have noticed that the game appears to require Flash. That’s partially true. The more accurate statement would be: the game will fallback to Flash for audio in some browsers. We’re a little more aggressive about this than we meant to be (more below). More importantly, the Flash decision came about because we were trying to make the game more fun for as many people as possible. Here’s the “behind the scenes” on how we ended up with Flash in an HTML5 game (and a little about HTML5 audio along the way).

HTML5 Audio

First a little bit about sound in HTML5. Right now, there is only one way standards-based way of getting sound into the browser: the <audio> tag. It’s the sound-only equivalent of the video tag. It is, of course, a great addition to the spec, and for most audio—like podcasts and music—it works great in just about every browser.

Sound effects, on the other hand, are a little different. As you can imagine, short, repetitive, time-critical sounds like you find in a game can tax your soundcard in a different way and, frankly, not every browser does a good job in that situation. In fact, the requirements are different enough that there are new standards being proposed to handle this more complex kind of audio. Those standards are still emerging. So, while the future is promising, the present leaves us with a single option: we’re stuck with the <audio> tag for any kind of HTML5 audio be it podcasts or sound effects.

HTML5 Standards in Cut the Rope

Our development goal for the Cut the Rope was to be 100% HTML5 and everyone (us, Microsoft, ZeptoLab) was really committed to this from day one. So, naturally, we built an sound library for the game based on the single HTML5 solution we had available to us: that audio tag.

Unfortunately, the sound was quirky from the beginning. We had great luck in IE (that’s true, not a plug), but as we cycled through different implementation strategies we found quirks in just about every other browser. We tried: recycling audio elements, instantiating audio elements on each play, using audio “sprites” (where we combine sounds into fewer audio files and use offsets to play the sound effects) and using different encoding strategies but nothing reliably fixed the issues.

I don’t think this is news. If you look around, you’ll find numerous discussions about HTML5 games and audio issues (here’s one, here’s another). We’ve had similar issues with other HTML5 apps and my impression is that a lot of people are looking to these forthcoming APIs for a long term solution.

The Conflict

Here’s where the story gets interesting. As we got closer to launch, we realized that the overall experience was really impaired by the unreliable audio. The common solution would be to rely on something else (Flash, Silverlight, etc.) as an audio fallback. Just about every sound library on the web does this, but that conflicted with our goal for a purely standards-based game.

To make matters worse, our fallback criteria were complex. We were up against browser quirks and bugs, not just feature support. In other words, even if a browser supported HTML5 audio we weren’t guaranteed that it would reliably handle the complex sound requirements of the game.

The easy thing would have been to do nothing. The most common side effect would be that audio stops working right around the beginning of the second level. Frankly, Internet Explorer (only coincidentally the sponsor for the project) was the only reliable browser so doing nothing could have been seen as a win for them. To their credit, they didn’t want to do that.

Everyone agreed that we wanted the game to be great in every browser. Microsoft and ZeptoLab were resolute on this point. We were too. Here’s where I think we made the right decision: after days of attempting to get our library working in all browsers, we decided to enable Flash audio for browsers where we had seen audio issues. The only browser where we had seen consistent and low-latency audio in every case was IE. That meant making Flash a fallback option for every other browser.

This may seem a little aggressive, but it had three desirable implications: First, it meant everybody would get audio (the thing that mattered most). Second, it let us stay 100% HTML5 in IE which was, understandably, an important goal for Microsoft. Third, it drastically reduced our testing surface for audio (which we knew to be flaky and quirky and so require a lot of testing).

With that decision, we also took a dependency on the very capable SoundManager2 for our sound effects, relying on their more thoroughly tested Flash implementation. (Not sure if they know that…thanks guys!!)

Loading Issues

We wanted the logic to work like this: if you’re in IE use HTML5 audio, otherwise use Flash… unless Flash isn’t available and then go back to HTML5. This seemed like it would give the most people the best experience. We almost got that right, but after launching we realized that SoundManager2 has a convenient feature that will aggressively force it to use Flash in browsers that don’t have <audio> support for .mp3. It’s a cool feature and perfect for podcasters or musicians who rely on .mp3 (and probably aren’t aware that it’s not always supported). It’s not great for us where want to fallback to HTML5 if Flash isn’t available. We didn’t intend to use that feature, but it’s enabled by default. We accidentally left it on.

The result: if a user comes to the site in an HTML5 browser that doesn’t support .mp3 (mostly Firefox which only supports .ogg) then the library will force Flash audio. So, in Firefox we inadvertently ended up with a hard dependency on Flash. This, understandably, was frustrating to Firefox users. The good news is that we’ve fixed that check and will deploy a build with the fix in (hopefully) the next 48 hours.

Try it Yourself

If you’re curious about the audio bugs, you can force the game to use HTML5 audio (no flash) with this link: http://www.cuttherope.ie/?html5audio=true

The bugs are quirky and not everyone will experience them. In fact, at multiple points during development we thought we had solved the audio bugs only to be greeted by another failure hours or days later. You might need to play a couple of levels before the issues show up… or they may not show up at all.

To the credit of SoundManager2, some of the audio issues seemed to get better after we moved to their library (even in HTML5), but we had a beta team of 200-300 people testing the game and the failures were common enough that we still felt it was important to use the fallback. In fact, we would have had to explicitly disable Flash in SoundManager2 and we thought that seemed purely ideological or could even appear nefarious. The truth is that the Flash decision just the opposite: we wanted the game to be great for as many people as possible, regardless of which browser they were using.

Of the many sincere and touching tributes to Steve Jobs yesterday, I found Bill Gates’ to be the best and most poignant:

I’m truly saddened to learn of Steve Jobs’ death. Melinda and I extend our sincere condolences to his family and friends, and to everyone Steve has touched through his work.

Steve and I first met nearly 30 years ago, and have been colleagues, competitors and friends over the course of more than half our lives.

The world rarely sees someone who has had the profound impact Steve has had, the effects of which will be felt for many generations to come.

For those of us lucky enough to get to work with him, it’s been an insanely great honor. I will miss Steve immensely.

Bill may understand Steve Jobs in a way that no one else on this planet could. His tribute is perfect. First, he addresses the most important thing: his family, his friends, his colleagues.

Then it’s personal. He and Steve lived through some big stuff together. They pioneered the personal computer and changed the world. He sandwiches the word “competitor” between colleague and friend making that undeniable part of their relationship seem more like play than anything close to a real rivalry.

Then he is generous. He gives Steve the full substance of his legacy, describing his impact as “profound” and lasting. Bill takes nothing for himself in that sentence.

The best part, though, is in the last line. That he will “miss Steve immensely” is personal and unbelievably touching, but that’s not it. Nope, the best part of this tribute is the phrase “insanely great,” the tag line for the original mac, a phrase that let’s us know that Bill Gates was and is a true Steve Jobs fanboy: a fitting tribute from  a “colleague, competitor and friend.”

(UPDATE: I added a more careful version of how I feel about the future of Silverlight to the bottom of that section.)

I spent last week at BUILD (all caps?). What a good week for Microsoft! Now that I’ve had a day or two to consider the big announcements and shake off the reality distortion field of Steve Ballmer (err, wait… wrong Steve) , I thought I’d share some thoughts and impressions. Forgive me if these are a little disjointed. It’s been a lot of information to synthesize, but I wanted to share early.

Overall feeling: sincerity

First a note about the mood last week: there was a lot of excitement. For the most part, the conversation shifted from concerns over an opportunity lost (bemoaning the fate of Silverlight) to one of opportunity gained (450 million potential metro app customers). The “XAML is not dead” message became credible and in spite of some concerns around Silverlight proper and it’s place on the web, it’s clear that .NET developers still have a big seat at the new table, even if it’s only kind -of-sort-of .NET.

That said, if the excitement is a little palpable, it’s also a little different. It feels buttoned up and restrained. I’ve heard many attendees comment on the sincerity of what they heard. That might sound like a strange way to characterize a keynote or conference, but this is a crowd that’s recently grown a little skeptical and sincere may have been precisely the sentiment du jour. In that regard, this conference was perfect. The “ra ra” antics of Ballmer PDCs were displaced by a much more controlled, prescriptive and even autocratic message: do this and these will be the results and, by the way, we can sell 400 million copies of Windows 8 with our eyes closed.

The numbers are magic

Because they don’t lie. We all know, of course, that they do…but we also know that Microsoft (and it’s umpteen thousand partners) really can sell 400 million copies of Windows 8 without trying too hard and that realization, more than anything else, might as well be alchemy for the developers I talked to. While everyone spent the last 12 months wondering if they managed to miss opportunities with iOS (and then again with Android), we just woke up to the news that the Microsoft ecosystem is, indeed, gigantic just like we thought (but managed to forget).

Can Microsoft deliver on that promise? I think so. I won’t pretend to know how that really works, but the PC market will grow 4.6% this year (a bad year) and then spike next. In my simplified view of the world that means Best Buy, Walmart, Dell and Costco need something to sell and those will be Windows 8 PCs. So, I think we can take it as a given that Microsoft will move 100+ million copies of Windows 8 in the first year and that’s probably a conservative number.

Metro-style apps and Windows’ split-personality

I think the only question worth asking is whether anyone will care about those new apps we all want to build. The new shell is pretty fantastic. And Microsoft is clearly committed to its adoption. Windows has turned over their single most valuable asset to the new shell: the start button. That’s the kind of commitment we’ll see from Microsoft and there’s no doubt that the store will be a front and center part of that. Every Windows 8 user will spend a little time in the new store… Only question is whether and how well it will stick.

To that end, I hope we don’t have the whole story yet. While the new shell is on track to be a really great slate experience, it’s a little lack-luster as a with a mouse. I’d hope to see at least three big investments from Microsoft:

• First, desktop Windows needs some cleanup. Aero feels antiquated and glass feels like a parlor trick. We need the rest of Windows to be just as “authentically digital” as the new shell. Until this gets fixed, the experiences will feel bifurcated and that diminishes the value of the desktop which, frankly, is the still the value of Windows. Instead of driving people to use the new shell (a reasonable goal), my hunch is that sort of schizophrenia will drive people to ignore it (or use a mac).
• Second, mouse interaction in the new shell needs to get much, much better. The mouse feels like a second-class citizen and in spite of what Jensen says, I don’t expect (or want) to swipe my monitor every time I want to launch Photoshop. If you’re inclined to tell me to get over it, stop. I’m still modal and I use a mouse and keyboard at my desk because they are precise and efficient and (relatively) ergonomic. If I become slower or have back problems from Windows 8, it failed.
• Metro is a little cold. As a design language, the window for customization is still little narrow. That makes me worry that it’s going to get tired quickly. I’d love to see Microsoft push the boundaries a little themselves—and hopefully, in doing so, provide us with some examples of a friendlier and more personable metro. We need to get their for this UI to have staying power.

The most innovative thing I saw last week

I don’t really like the word innovation because it buries the real attribute that we should be after: vision. It’s easy to make something new. It’s hard to make the right new thing, to make the right bets.

Microsoft has been a little short on vision for a while, maybe ever since realizing the “pc on every desktop” battle cry of the 1990s. You might characterize the post-BUILD era of Microsoft as a “pc in every pocket” because surely that’s where this is all going. I think that’s a strong, bold vision and, hopefully, an accurate one. Maybe it’s a borrowed view of the world, but MS is making big bets on that future instead of shoring up against it and we saw a Microsoft this week that appears to be executing toward a single goal in a way that I haven’t seen since my first day there 10 years ago.

Joking at the conference, I said Steve is the new Steve. I’m not quite as serious about that as this guy, but I gained a new respect for his ability to focus an organization on a singular goal. More than that, his risky bets are paying off. It was his call to refocus Windows around HTML5—a decision he made at least two years ago, well before the writing was on the wall. He’s also responsible for big bets on cloud services, ARM and WinRT—all moves that seem obvious in hindsight but carried massive risk at the time of inception.

The other exciting things I saw last week

First, I love contracts:  I know, I’m a UI guy and I should be gushing about metro. I have been and will… but contracts have the potential to tie the web together in a way that finally makes sense to non-technical users and that’s a big deal.

On the UI side, I think that docking is  game changer for slates. Plus, it has the potential to make metro-style apps relevant to information workers and other folks who continue to spend most of their time in the desktop.

Along those lines, I liked the design attitude from Microsoft. We’ve moved beyond the “hero” UIs that got us excited in 2007 and replaced them with content-driven, prescriptive UIs that make sense for the way consume the world today. On the other hand, metro is easy to make good but hard to make amazing. There seem to be some good helpers for that, though. I’m excited about the “personality” animations library in WinJS.

Finally, Blend for HTML5 in Win8 is really incredible. You need watch Christian’s amazing talk to understand the depth of that tool. Poking around won’t reveal the extent of the possibilities there.

Yeah, Silverlight is pretty much dead. So what?

I think the Windows 8 platform story is really exciting. One nitpick about messaging: maybe I just don’t have the data, but I can’t figure out why C++ is getting so much airtime. XAML and C++ is a clever move, and good for a lot ISVs but I was surprised that it got the sort of love it did at BUILD. On the other hand, I was actually pleasantly surprised at the love that C# + XAML got. With all the FUD about the end of XAML, I was pleasantly surprised by a really great story (even if HTML5 is clearly the wearing the pants in that family).

And, yeah, Silverlight proper (the web browser plugin) will, as they say, likely be phased out over the next few years. I don’t understand why everyone is so upset about this? Your investment in XAML and C# and MVVM and Blend and that whole ecosystem transfers directly to metro and that’s big business—much bigger than Silverlight for the web ever was. If you want to build Silverlight apps for desktop (non-metro-style apps), stick with WPF. But think about it this way, Microsoft isn’t killing Silverlight, the web is. We really just don’t need plugins in browsers to create rich web experiences anymore. In the meantime, XAML and C# remain very important for every other UI situation where Microsoft has influence: metro, desktop and phone. That’s a pretty great story.

UPDATE: Here’s a no-hype version of how I feel about Silverlight. I can’t see how Silverlight makes Windows better and Microsoft is laser focused on Windows right now. Because of that, I would expect investment from Microsoft to taper off over the next several years. In that sense, “dead” was too strong. You’ll be able to download the runtime for a decade. So if you’re building projects in Silverlight, you’re still in great shape and, in most cases, I would stay the course. We (Pixel Lab) have at least two active Silverlight projects right now and no plans to jump ship on either. In both cases, Silverlight was and is a good decision. At the same time, now is a great time to ramp up your HTML5 and Javascript skills. I think there is a disconnect, a feeling that HTML5 isn’t “ready for primetime” and that simply isn’t true. Also, WPF got lost in the Silverlight shuffle. If I needed to build a Desktop app for Windows today, I wouldn’t hesitate at all to use WPF and let’s not forget that desktop is and will continue to be the reason that people buy Windows.

Is Microsoft on track? Are you just a fanboy?

Take these opinions for what they’re worth. I’m the first to admit that I’m an insider (though not really a fanboy—I mostly split my time between two macs) but two final thoughts: first, this is the most excited I’ve been about Microsoft in 5 years. The company vision seems cohesive and inclusive and long-term. It hasn’t felt that way in a long time. Second, yes, I’ll be building apps and I think you should too (unless you’re really talented—in that case, um, ignore this post and focus on Android please).

MIX is in the air (I’m referring specifically to the mix of fragrance and air that gets pumped through the lobby at Mandalay Bay). It’s a big one this year. We can all tell that there’s something big brewing inside the mothership and we’re hoping to get a glimpse. That makes things fun, but also a little tense. When I worked at Microsoft I always felt frustrated that we couldn’t keep a secret. Now I feel frustrated that Microsoft seems to be so good at it!

Well, if you need a distraction, that distraction should be typography. It’s the slow-down alternative to the MIX craziness. I’ll be speaking on Tuesday at 2:00. Be there or be square. How square? Here are 5 can’t ignore reasons to be there:

1. Typography matters more today than ever. Windows Phone relies heavily on good typography. So does the web.
2. This talk is a primer. No previous typography experience required. Think of it as Part IV of the Design for Developers workshop series I did a few years ago.
3. We’ll skip the boring stuff. No lessons on the anatomy of letters.
4. No controversial technology. Sick of the unavoidable HTML5 vs. Silverlight or Windows Phone vs. Android conversations? We’ll talk a little about ClearType, but that’s as controversial as it gets. Take a break. Learn something different. This is a design talk.
5. There might be prizes. I’m not saying there will and I’m not saying there won’t.

Having said that, there are a few good reasons not to come to my talk.

1. You’re tool cool to care about typography. Fine. We don’t want you there anyway.
2. You want to go to Laurent’s sure-to-be-excellent deep dive into MVVM which is at the same time.
3. Or maybe you want to see Scott’s equally awesome sounding talk about HTML5. It’s also at the same time. In fact, I may go to that one myself (in which case I leave my slides on auto-play so you’re still free to choose).
4. You already know a whole lot about digital typography and only planned on coming to heckle me.
5. You don’t like cool stuff. And you smell bad. And you can’t dance.

So there you go. Convinced? Well, have a great MIX and see you at the talk!

I’ve just finished a really great week at SXSW and I wanted to jot down some highlights before they get hazy. So, in no particular order:

Ze Frank and the IE9 Launch

First, we got lucky. Ze Frank did a soft launch of his new social giving/sharing platform star.me at the IE9 launch. We built an HTML5 game that lives inside of one of the stars that you give or receive. It’s gateway into the site if you don’t have an invite. The game is called Throwing Stars. Working on it with Ze was amazing. He’s got a crazy spidey sense about how to create fun. He stayed hands off for the most part and gave us a lot of control over creative, but the direction he gave proved to be spot for giving the game a real visceral feeling. It’s addictive.

ThinkJS

We had a “soft launch” of our own at SXSW. We’ve started to build patterns and a toolkit for creating canvas-based HTML5 games like Throwing Stars and Agent 008 Ball. We launched a boilerplate package that combines the tools and methodology that’s been working best for us. Right now it’s called “ThinkJS” and for the time being, it’s a very bash-oriented environment (great for mac, and just okay for windows). Do not fear. A Visual Studio version is coming soon. It includes our javascript port of Box2d (which is hopefully due for an update soon), EaselJS, our sound effects library and a number of environment utilities (including HTML5 Boilerplate, Google Closure, Coffee Script, a test environment and others). Kevin did a really fantastic job packaging this up. It’s a great way to jumpstart a game or any other canvas based HTML5 app.

RunKeeper Launch

One more soft launch: Pixel Lab’s newest entry into the Windows Phone 7 marketplace came in the form of RunKeeper, a port of the super popular (and crazy awesome) exercise tracker that you likely know from the iPhone. We wrote the WP7 version of the app. Technically this launched a couple of weeks ago, but SXSW was the first time I had a chance to show it off in person. Folks from RunKeeper were in the MS lounge to give demos and answer questions. It’s a great app. We’re seeing a couple of crash reports in the Marketplace so a small update is imminent. Other than that, the feedback has been incredibly positive. Much of the thanks for that goes to the RunKeeper team we worked with. They were great and they have a tremendous knowledge of how to serve their user base.

How UI Design is Influenced By Print

One of my favorite sessions at the conference was delivered by Mike Kruzeniski (@mkruzeniski), creative director on the Windows Phone team at Microsoft. He perfectly characterized a phenomena that I’ve been very interested over the last year or so: the way that UI design seems to be taking cues from print design.

This isn’t completely new, of course, but there is something in the air. Spend half an hour on dribbble and you’ll see what I mean. For years, UI design has been a close cousin and BFF to industrial design, paying attention to print and graphic design rarely and only when necessary. We see that in interfaces. UI is made to look like its physical counterpart (buttons that look like buttons, pages that look like pages, etc.).

The exception to this has been the web. Being primarily driven primarily by content and having a strong relationship to publishing, the web feels a lot more like print and graphic design.

The strange thing is that we’re all pretty used to this dichotomy. Even strange is how rarely they cross over. There are indeed “UI” (mostly video players) and “document” outside of the browser (mostly hyperlinks) but until recently these world have stayed pretty isolated.

Mike’s point is that they are and should be converging. It’s a nice love letter to the metro design language. That’s a convenient message, but I think it’s also true. The thing that everyone loves about first Zune and now WP7 is how lightweight the UI feels and how grounded it seems to be in classical design principles (grid, type hierarchy, etc.). This is the influence of print, baby!

Lightweight print-driven UI is a refreshing change from the relatively heavy UI concepts that seem to have driven the last 20 years of UI design. It’s left me thinking a little, though. While the kinds of physical UIs that we’re used to seem a little over the top sometimes, they do (when done well) have a certain warmth to them that seems hard to capture when you’re constrained to image and type. It’s hard to create that same bit of texture that you have when you’re emulating a physical object, even if it’s all illusion.

I’ve felt like the Metro suffers from this a little and can, at times, feel a little bit like it was designed by designers for designers. That’s also, possibly, an artifact of Metro having drawn on the swiss style designs of the 1950s and 1960s. That’s an era that produced incredible designs that are, at times, a little cold in their mathematic precision.

Learning and Becoming Willing To Really Stink at Something

Right before I came to the conference, I read this fantastic post from Nishant. That must have planted something in my brain because I’m seeing this idea everywhere here. Here’s the idea: a lot of us have forgotten what it’s like to learn something from scratch, to be truly bad at doing something and go through the expansive process of filling your brain with something new. Expertise is awesome and we need experts and it’s good for your paycheck. But it’s great for your brain and your happiness to do new stuff too.

Just a few examples of how this idea surfaced: Kevin told me about the madness of learning to type on a Dvorak keyboard (and how much he loved it), I heard an executive at IFC tell the story of how they learned to be a comedy channel; I watched Michael Cera play bass in his new band (takeaway: the band is okay, Michael is a decent bass player but it takes a lot of focus); I talked to a gig poster designer at FlatStock who went from pixel pushing as web designer to full time screen printing.

The Stakes are High (Too High)

This might be the only negative observation I have to bring back from the conference. I’ve felt for a while like there is something in the air in our industry. On the one hand, there’s an incredible buzz and energy as we’ve seen the pace of technology innovation move from mach 3 to mach bazillion. On the other, it feels a little more competitive and just a tad grumpier. Both sides of that coin were intensified at the conference. It was bigger than ever and the content seemed to have an edge to it, like everyone was trying just a little harder to be right or get noticed. I guess it makes sense. The stakes are, indeed, high: we all know that there are millionaires to be made out there and everyone is vying for a piece of that.

A lot of people at the conference were throwing the “b” word around (bubble). It does feel a little that way. There’s a lot of hype and not all of it seems justified. The buzzwords were in full bloom and, from what I could tell, there very few pure design or technical panels or sessions. It was all business and social media. I’m not sure what the next twitter or facebook will be, but the VCs are definitely betting that it will be built on top of either facebook or twitter.

As a respite from the tech craziness, I ended up spending a little time at the film part of the festival. I saw a few screenings and a couple of panels. I hate to say it, but I felt jealous of the mood there. The panels were incredibly collaborative and there was a genuine interest in the craft. Business was a supporting role in those conversations, but rarely the star.

Conan Documentary

That leads me what, oddly, might be the best thing I saw at SXSW this year: Conan O’Brien Can’t Stop. It’s a documentary about the comedy tour that Conan planned after he had left the Tonight Show and before he started his new gig on TBS. I walked out of the theatre in such a good mood. I loved it. To call what Conan went through a trial is, as he would tell you, an unfair exageration. We’d all love to have a problem like that. Never the less, he’d been treated unfairly and he had to deal with the very human feelings of being pushed around. The documentary shows a lot of insight into how he dealt with those feelings and its inspiring. Bigger than that, it was privilege to see the amount of intensity and energy that he puts into his craft. Amazing. Inspiring. I wish there could be a sequel. I ate it up. It’s also laugh until you cry hilarious.

Incidentally, Conan was on site for the premiere and I got close enough to give him a high five…and then wimped out. Ugh. A Conan high five is absolutely the newest entry on my bucket list. Must start planning soon. If you’re interested in collaborating, let me know. There’s got to be an app for that.

The IE9 launch party tomorrow will be awesome. Why? First IE9 is a really great browser and Microsoft deserves our hats off for that. It matters. There are more people using IE in the world than any other browser so changes matter. And IE9 is a big change. It’s a streamlined UI, has great standards support and it’s really fast. Regardless of whether you intend to switch, much of the rest of the web will so you should pay attention.

But here’s the real reason: awesome music!

So you’re at the conference but you don’t have a music pass. You’re probably jealous. And you should be. The music festival will be amazing and, man, you are so close…and yet so far away.

Well, the IE9 launch party is going to right that wrong. You might get (justifiably) excited about the headliner: Yeaysayer. Such an awesome band! Awesome!

Between you and me, I’ll be there for the opener: the Head and the Heart. I’m so excited to see these guys live. They have a really good album and an AMAZING live act. It’s going to be great. Check out this performance from the Doe Bay Festival last year (below). Wow! Enough said. You should be there. I will!

What’s the spring in my step this morning? Today kicks off the spring conference season for me. Hooray! Here’s the rundown:

First up is SXSW. In fact, I’m here right now! I registered for this long before Microsoft announced the RTM of IE9 at the conference, but it’s fortuitous because we’ve been able to help out a little with some fun stuff related to the launch (I’ll share more about that later) so it’s exciting to be here for that.

And of course I’m looking forward to some great sessions. Mike Kruzeniski’s talk this morning was fantastic. I’ll be heading to Khoi Vinh’s talk on working with grids. I’m going there instead of watching Rainn Wilson talk about his new movie Super. I guess nerd celebrities have more pull than actual celebrities for me.  I’m also very excited for this panel with Thomas Lewis and Rick Barraza, discussing some of the ideas brought up by the Web is Dead article in Wireds a few months agao.

Also, I splurged this year and I’m sticking around for the music part of the conference and I’m really excited to see Owen Pallett and a hundred other bands.

Next up is MIX. I just got the hotel confirmation so I’m official. I’ll be speaking again this year, too!. The MIX folks just announced a new session format made up of a series of small UX focused talks. There will be three sessions, each of which is made up of four 10-minute talks with preprogrammed slides. Think something like the Ignite format, but 10 minutes instead of five (room, I guess, to get a little deeper). My 10 minute contribution is called “Farming for Ideas: How to Be The Most Creative You.” It’s about they heavy lifting part of being creative, the part that takes actual time and work and real effort.

I’m also hoping to do a more “in the trenches” kind of talk. More on that later when the official session schedule comes together.

Finally, I’ll be at Web Directions Unplugged in May, speaking about the HTML5 games that we’ve built recently.  I’m very excited to part of that conference. The focus is on building apps using open web technologies (HTML, javascript, etc.) for both the web and devices. HTML5 as a cross platform lingua franca for apps is a very exciting proposition to me and I think it’s great that there is a conference devoted to that.

So, if you’re attending any of these, make sure to say hi. If not, I’ll post notes from the road so stay tuned.

I’ve used all kinds of systems for tracking my time, but by far the most effective is a pen and paper. At the end of the week everything gets reviewed and inputted into the digital tool du jour (I really like Harvest), but for the day-to-day mechanics of keeping track of where I spend my time nothing (so far) has been better than writing it down.

So, I made a form. I print a stack of these and keep them on a clipboard. It’s a small thing, but I thought I’d share just in case anybody else was considering going analog for their time keeping as well.

Download

(Incidentally, it looks a lot better printed than it does in Acrobat.)

Last week we quietly rolled out an updated version of Kaxaml. It’s a “point” release which (wikipedia will tell you)means that it was more of a maintenance release than a feature release. Don’t let me undermine it’s significance, though. That bit of maintenance took us from targeting .NET 3.0/3.5 to targeting .NET 4.0. That’s a big deal because a lot of things get much better in the new .NET. The specific things I’m excited about are:

1. You get access to a lot of new properties, including two that matter a bunch for folks creating high fidelity visuals in XAML: UseLayoutRounding (like SnapsToDevicePixels but more reliable) and TextOptions.TextHintingMode which lets you specify whether or not to rendering your text with hinting (a small property with big impact).
2. We now support Silverlight 4 and that gives us a much (much, much) better parser. It’s way more stable. Kaxaml support in previous versions was essentially unusable due to constant crashes. In this version we’ve pushed the meter all the way to “usable.”

Unfortunately, a few big upgrades that I’m excited to see are still left undone. I’d really love for Kaxaml to be taking advantage of some really amazing XAML parser support in .NET 4 that would allow us to be smarter about intellsense and load external assemblies. I’d also like to clean up the plugin model. Right now it’s kind of a mess, and one that I’ve been making up as requirements emerged—not with a lot of vision. Finally, the UI could use a little sprucing up. For now, those improvements will need to wait.

This is really neat. It’s a very very early digital 3D rendered film (family lore is that it’s the first, ever). It looks old because it is. It was created in 1972 by Ed Catmull (the founder of Pixar) and Fred Parke with a little help from my dad. I also think that this is the only digital copy of it.

The best part of this film is not even the 3D rendering itself, but the outtakes and “making of” footage that has been interwoven throughout, including footage of a plaster replica of Ed’s hand onto which he is meticulously mapping the polygon vertices that make up the three dimensional model (around 1:30). That’s really remarkable. The math that we take for granted for rendering 3D was being invented, real time, to create this video. (Ed’s credited for having working out that math to handle things like texture mapping, 3D anti-aliasing and z-buffering.)

The film fell into my hands because Ed and my dad were good friends and office mates at the University of Utah in the 1970s where they were both pursuing upper graduate degrees in computer science. My dad was focused on digital audio and Ed (of course) on computer graphics. Either because of their friendship or possibly because they were renting time on the same computer, my dad ended up being responsible for the 3D morphing titles at the beginning and end of the film (his credit is at 6:15). I guess that entitled him to a copy of the 8mm reel (it was rendered to actual film; this, of course, predated any kind of real time digital playback by many years).

A couple of years ago, Ed was speaking at the University of Utah (giving, I believe, some version of this talk) and ran into my uncle. They talked about my dad and that resulted in Ed inviting a handful of us to take a tour of Pixar.

A few months later we took a plane to SFO for the tour. I sort of expected to shake Ed’s hand and then take a tour with an intern. It wasn’t like that at all. Ed spent an hour with us. It was amazing and incredibly personal. He shared stories about the early days, gave advice about managing creativity, told stories about Steve Jobs, shared thoughts about the transition to Disney and even told stories about my dad. It was moving. The creative energy at Pixar might be unbeatable and getting a tour from the man who made it happen was an unforgettable experience.

I mention that because at one point during the conversation, someone brought up the hand video. I said that we had an 8mm reel marked “hand” in the family archives and that I could digitize it and share and Ed gave his blessing! So here it is. Even if it’s not the first digital 3D rendered movie (it may be), it’s definitely one of the oldest, the first you can attribute to the genealogy of Pixar and the oldest 3D graphics you’ll find on the internet. It’s nearly 40 years old!

Update (Sep. 6, 2011)

I’m mostly trying to stay out of the comments and let this incredibly interesting conversation about the film, the people that made it and the technology of that era unfold on its own. I wanted to draw some attention to a couple of things though: first, there are some must-read comments below from Fred Parke himself and from the families of some of the other great pioneering men of that era (like Dave Evans and Ivan Sutherland). Make sure to find and read those stories. There are also a number of really interesting details that have emerged, one of my favorite is that apparently the facial animation ” took ~2.5/minutes to render each B&W frame… on hardware that was probably in the ballpark of $400,000 in 1972 dollars.” Amazing to consider how far we’ve come. Today we render 3D that is an order of magnitude more complex in realtime (upwards of 60 frames per second) on commodity hardware. It makes you excited about what the future must hold.

Second, I wanted to address the question of this video being a hoax. It isn’t. The comments below will clarify that, including detailed stories directly from those who were involved in the production of this and related films. You can also check out a portion of this film in a Pixar documentary here. I applaud some healthy skepticism on the internet, but this one is legit!

I’ve been (not so) quietly rolling out a new design for nerdplusart over the last couple of weeks and tonight it went live. Really, this project is over a month (2 months?) old now. It’s hard to make time for personal projects! Tonight, however, I bit the bullet. When I started writing 301 redirects I knew I was in for a long night that had to end in being done. You can’t redirect half of a site and still respect yourself.

More about the site later. For now, a few highlights:

• It’s HTML5-happy with semantic markup (in most cases) HTML5 based media players for videos and music where applicable.
• The structure of the site should be simpler and hopefully more maintainable. The old site had bunch of static content lying around and the resulted in a lot of broken links. I’ve tried to clean up links I could find but there are still holes. The good news is that I’m logging those now.
• The thing that was the most fun to build is the all new nerdplusart music player (click on radio in the header)! It plays tracks from my tumblr blog (found.nerdplusart). Creating that was a crazy hackfest over the holidays. Very fun. And it works!
• The site is designed to feel very typographic (like a book, maybe) and nearly monochromatic (with just a little orange for good measure). I think I need to face up to the fact that I’m a minimalist.
• There is a new portfolio section where I can showcase some design work. It’s sparse right now. Of the 24 items I had intended to post, I’ve posted 6. I’ll get the rest up soon.

More later. In the meantime, I’d love to hear what you think of the new site! Also, be sure to let me know if you can’t find something or if something feels broken. There was a lot of content shuffling!

Oh, last thing: the homepage says I’m an “awesomeness enthusiast.” I thought that was funny because, you know, it’s kind of redundant. Of course I’m enthusiastic about awesomeness because if I wasn’t I wouldn’t find it awesome. Right? I’ve been told that the joke is too subtle. Hmm. Maybe if you have to explain it, isn’t funny. Thoughts?

We did the Diet Coke + Mentos experiment for the kids over the weekend. Mentos made it awesome. Spiderman slippers made it awesomer!

Someone asked me the other day how I created the parallax effect on the nerdplusart.com homepage. It’s actually pretty straightforward math to create that kind of effect (which I’m sure I borrowed from somewhere) and wrapped it up into a handy panel called CameraPanel when I was creating the landing page.

It’s called CameraPanel because it emulates a really simple 3D environment in which you position a Camera and then position objects in X, Y and Z space and then panel does the work of applying transfors and z-order so that everything works.

To be honest, this panel kind of violates what a Panel should do if a purist. Arguably, a Panel shouldn’t be applying transforms or adjusting the z-order of its children. In this case, though, that’s precisely the behavior I wanted. But you should know that it’s going to clobber any existing transforms that you’ve set.

So here’s how you use it:

<c:CameraPanel CameraX="0" CameraY="40" CameraZ="20" FocalLength="100" >
  <Rectangle Fill="Orange" Width="100" Height="100" c:CameraPanel.X="20" c:CameraPanel.Y="100" c:CameraPanel.Z="20" />
</c:CameraPanel>

To emphasize the feeling of parallax you need to create some movement. The panel doesn’t do this on its own. Instead, you need to move the panel’s “camera” around at runtime. That will have the effect of updating the relative position of the items according to our parallax math world and it makes the objects feel really physical. In the sample below, that code is in the MainPage.xaml.cs.

It’s also worth nothing that the panel doesn’t handle the animation on its own, it just does the layout. Animation is provided by the accompanying AnimatingPanelBase which will turn any custom panel into an animated one (this was written well before the awesome FluidMoveBehavior that ships with Blend). If you don’t need animation you can get rid of AnimatingPanelBase and change CameraPanel to derive from regular old Panel.

One other big disclaimer: I wrote this for Silverlight 2 which kind of feels like eons ago and we didn’t have a lot of the niceties that Silverlight 3 and 4 gave us (like DependencyProperty metatadata with the default values) so some of this code is pretty stale. Also, it’s been modified and reused for a couple of projects and I have a feeling that there is some dead code in here. If anyone happens to do some cleanup, let me know.

Get the Code

Here’s a sample of the panel in action (which highlights album covers from this year’s upcoming top 25!).

Here’s a Photoshop Action (i.e. a script) that I made to pre-dither an image so that it renders nicely on a display with 16-bit color (like Windows Phone 7).

A quick warning before you download it: the first thing this script will do is flatten your image (e.g. merge all layers into one). So don’t do this on your source. It’s pretty destructive.

Download

How to Install and Use It

It’s super easy. There are 5 steps but these are pretty detailed. It will feel like it’s about three. So here’s the step by step:

1. Install the action by downloading the file and double clicking on it.
2. Open the Actions palette in Photoshop. Do that by pressing Alt-F9 (or choosing Window > Actions).
3. Expand the WP7 folder (I think it’s technically called a set) in the list of actions in the Action palette and choose the WP7 Dithering action. With that selected, run the action by clicking on the Play arrow at the bottom of the Actions palette. Again, don’t do this on a source file. It’s going to flatten your layers!
4. It should prompt you about flattening your image. You need to say yes (unless you’ve already flattened it).
5. At the end, you’ll get prompted about how to merge the RGB layers it created. I’ll explain more about this in a bit, but for now choose:
   • RGB Color in the Merge Channels prompt (this is not the default)
   • In the Merge RGB Channels match the file with _R to Red, _G to Green, etc.

That’s it! Now you can export the image as jpeg or png and it should render nicely on the phone.

Why You Need This

A lot of handheld devices are capable of showing fewer colors than regular computer displays. The result is that an image that looks nice on your computer might look weird on a device like your phone. This is especially true with gradients or other smooth color transitions. You end with a lot of “banding”—the gradient looks like it has bands of color instead of smooth transitions between colors.

This action “pre-dithers” images. It basically reduces the colors that are used in the image ahead of time and uses a noise pattern to “dither” to make it look like the colors change more gradually.

In fairness, I’ve only tried this on a few images but, so far, with good results. Please let me know if it works for you (or, more importantly, if it doesn’t). I’m super open to improvements too. I’m no Photoshop wiz kid so I might be doing something inefficiently or, you know, stupid.