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.

I’ve been meaning to write something about this for a long time! Over the summer we created Agent 008 Ball, a spy-themed HTML5 pool game. Creating it was a blast! We put a little video together to talk about the design process. You can check it out below. Also, here’s the case study for the project.

I’ve also been meaning to share a little bit about what we learned along the way. In addition to being a fun design challenge, 008 Ball brought plenty of technical challenges. It also forced us to do some thinking about HTML5 and the future of UI technologies.

What’s so HTML5 About This?

First of all, HTML5 is quickly becoming an overloaded / catch-all term. In fact, let’s just cut to the chase and call it it Web3.0.com. The truth is that a lot of 008 ball is really just modern browser awesomeness: jQuery and a cool javascript physics engine. Having said that, actual HTML5 features were required to make it happen, specifically:

• All of the ball rendering happens in a Canvas. Without canvas, we would have had to resort to some serious hackery in order to rotate the balls and manipulate the pool cue.
• We also made massive use of the Audio element for sound effects. In fact, we found out early on that browsers have a ceiling on the number of audio elements you can create (probably related to the number of simultaneous sounds you can play on your soundcard). 32 seems to be a magic number.
• Finally, all of our typography is done with @font-face font embedding (using the ever so awesome .WOFF format). Incidentally, @font-face embedding could not be easier, especially with great tools like typekit and the font-squirrel generator. This isn’t technically an HTML5 feature (I think it’s CSS2) but it kind of feels like one.

HTML5 for Apps and Games

We’ve worked with a lot of UI platforms (WPF, Silverlight, Flash and iOS) and always felt like HTML does a stunning job with its core competency: document layout. But what about HTML for apps? Admittedly apps (and games) feel a little shoehorned in. The stunning success of HTML as an app platform (which, at least by volume, is undeniable) seems to be a little bit in spite of itself (and due to the ingenuity and hacking skillz of a lot of smart developers). It’s sort of amazing that a document layout engine has become a reasonable platform for building games or sophisticated applications.

Well, even in version 5, HTML is still not a complete UI package but I can‘t help but feel like it represents an important and fundamental step in that direction. We’re closer than ever to an HTML that feels like it was intended for apps! While you can make a good case that many important UI constructs are still very rudimentary or missing (e.g. an extensible component model—checkout Quick UI in the meantime, UI-focused layout, data-binding, etc.), HTML5 gives us important building blocks we’ve never had before.

If you think about a modern UI stack, the most fundamental layer in the cake is the rendering and media layer. And that’s where everyone tends to start: Flash started there and so did Silverlight. The first versions of both of those platforms offered little more than rendering and media. If you think about it, even Windows (and likely other OSs) followed that trajectory.

HTML5 gives us our rendering and media stack! We’re still early, but this represents a true shift from “designed for documents” to “designed for applications and games.” Canvas is a surprisingly effective (and fast!) rendering surface (check out this realtime video processing). We also get media integration with the Audio/Media elements and we even get some (less widely implemented) basic 3D constructs with WebGL.

No doubt HTML6 will expand on HTML’s existing (and rudimentary) higher level UI constructs (controls, layout, etc.) and result in something that is even better suited for apps. That will be great. In the meantime, we now have the fundamentals! That’s a great place to build.  And it also turns out that a game is a good match to that excitingly new bottom layer!

What’s Next for 008 Ball?

You’ll be happy to know that Agent 008 Ball is alive and well and growing. Our stats are up and we just (quietly) rolled out a new version with some significant bug fixes. We’re also in the process of cleaning up a bunch of the code so we can share it. We’ve already shared a cleaned up version of the Box2D physics library that we used. The next one coming will be our HTML5 sound effects library.

Maybe after that, we’ll add more than one level to the game!

I love HTML5 and I also love Silveright. I’m actually not too broken up about the emphasis on HTML5 at the PDC this year. HTML5 a nascent technology, it’s true. There are issues: We built agent8ball.com in about 4 weeks. It likely would taken about half of that in Silverlight. Also, we dealt with all kinds of browser compat issues. Kevin finally just checked in support for sound effects in Firefox last week! In fact, compat been a fight the whole way. Oh, and documentation is still emerging ( == bad) and I truly love/hate Javascript in the extreme. But in spite of all of that, it’s been one of my favorite projects this year!

On the other hand, I really love Silverlight and I spent three sleepless nights this week thinking about how I can build more WP7 apps.

So here’s the thing: HTML5 is an undeniable part of the future and it would be foolish for Microsoft to ignore it. It’s the 5 bazillion pound Elephant in the room (note: my spell checker didn’t complain about bazillion. cool!). HTML has always been the lingua franca for browser apps and it’s just gotten much much better. You can’t look the other way when that happens. Microsoft can’t and developers shouldn’t, especially if you want to build browser-based experiences and apps.

I think Microsoft may have gotten some of the subtleties of their messaging wrong at the PDC this year. Everyone is up in arms because they feel like the investment they’ve made into Silverlight for past 3-4 years has been in vain. They feel that way because Ballmer led with HTML5 hoohaw (not in the spellchecker) and because much of the press coverage has been about the lack of Silverlight announcements.

The Silverlight Casualty Count is Low

But here’s my take: there is a Silverlight casualty but it turns out to be a small one. MS is saying that you should use HTML5 for some of the browser stuff that you may have been considering Silverlight for. That’s not a big deal. I don’t want to trivialize it, but I’m not too broken up to think that some web experiences that might have belonged to Silverlight are going go to HTML5. Let’s call the Silverlight/Flash war over and declare HTML5 as the winner.

I don’t mind that. In fact, I think it’s a great place to be! HTML5 is fun. The tools and frameworks are still emerging, but the next 2 years are going to a parade of of plugins, frameworks and tools that make authoring HTML5 even faster and better. The compat thing is an issue today, but if you look at the speed of innovation in browsers and the trend toward hiding/abstracting that stuff via frameworks and tools (think jQuery), I suspect it’s a problem with a short half-life.

I’m Awesome at XAML…Now What?

Now, let’s look at what’s left on the table for Silverlight. First, Microsoft has been crystal clear that Silverlight is the bet they’re making for devices (phones, tablets, set-tops, etc.). We might be justified in feeling marginalized if devices meant “robots and refrigerators” but we can all see that mobile computing and consumer-facing devices are a great bet. As a UI dev, these are big opportunities.

Second, Silverlight and WPF are still great contenders for desktop apps. At least in the short term desktop apps still really matter (I’m using one right now!) and Silverlight and WPF are still your best bets. Microsoft just build Visual Studio in WPF. Incidentally, I don’t feel like WPF 4 has gotten the love it deserves from the community. With the changes to text rendering and LayoutRounding, you can literally create pixel perfect apps in WPF. And Silveright lets you do that across OS’s.

It will be interesting to see what happens in Windows 8. Microsoft will undoubtedly build out an app store for desktop apps and (presumably) that will include support for Silverlight based apps. Finger crossed!

A Thought

Something to think about: you and Microsoft are in a similar situation. You both invested a lot in Silverlight. Microsoft has spent the last 4 years of its career telling everyone how awesome it is too. Change is inevitable, but neither of you are anxious to throw away a big investment like that. Software matters more today than yesterday and less today than tomorrow. As Microsoft changes, they’ll bring you along. They need you more than you need them.

If You Only Read Summaries

Okay, so here’s the summary:

1. You should care about HTML5. As a UI technology, it’s pretty dang cool. And it means you get to use a lot of jQuery which is also pretty dang cool (I think I told someone I have a mancrush on jQuery last week).

2. You should keep caring about Silverlight. It absolutely matters for the next several years. The “devices” market where MS is focusing their Silverlight efforts (phone, set-top, etc.) is your future.

3. Microsoft may have gotten the messaging wrong but that’s partially our fault—we need to listen to what they’re saying and not to what they’re not saying.