Barack Obama Headlines in Deep Zoom This is not only a fun and great use of Deep Zoom, but it’s also a remarkable way to step back and take in the massive impact of the image of a black president.  Regardless of politics, I haven’t met anyone who isn’t touched by that.  Great idea Vertigo.

Site update and stunning video from IdentityMine IdentityMine just updated their site and with it, a really beautiful video that highlights some of the company’s many strengths (and makes Chad look very serious).  I’ll admit it: the video made me miss working there.  Nicely done IM.

Silveright.FX This is a very nicely designed framework for creating attached behaviors in Silverlight.  As far as I know, attached behavior are more of a side effect of attached properties than a goal, but it’s the thing to watch in our XAML UI world for the next few months.  At first glance, you can miss how handy this can be, but think of it in terms of workflow and code reuse.  Great job Nikhil.

I’m headed to Brazil tomorrow. I can’t wait. It’s no secret that Brazil is my favorite place on the earth, a superlative I’m not afraid of backing up.  So, if you’re in Rio next week, let me know. I’d love to grab a suco with you somewhere and conversar um pouquinho sobre o estado das coisas tecnologicas. Deixe me saber!

In the meantime, I’ll leave with you some Caetano Veloso, which is about as close as you can get to the awesomeness of Brazil without actually being there. These songs are both from his album Tropicalia, a pioneering record and one of the first to define the Tropicalia genre of Brazilian music (which, admittedly, has its hits and misses but know this: David Byrne approves and apparently so does Kurt Cobain). Incidentally, the title of the second song, Superbacana, means "Super Awesome" so there you go.

Caetano Veloso: Eles

[see post for audio]

Caetano Veloso: Superbacana

[see post for audio]

So here are the first fruits of that, a few “to share” Panels (for WPF and Silverlight) that I’ve been meaning to blog about for a while.  They’re pretty simple, but have proven to be a really handy part of my arsenal.

ColumnWrapPanel (WPF or Silverlight)

Download it here. This is the one I’m most excited about.  It’s a smarter version of a WrapPanel that tries to enforce a little more order on how it arranges its items.  It does this by maintaining a sense of columns and row height as it places the items and then snaps the items to those columns and rows.  Its also smart enough to place items into “empty” spaces that get created by extra tall or extra short items in the panel.  Think of it as WrapPanel without the jaggies.

Here’s some XAML:

<c:ColumnWrapPanel MinColumnWidth="200" RowHeightIncrement="50">
  <Rectangle c:ColumnWrapPanel.ColumnSpan="3" Height="100" Fill="YellowGreen" />
  <Rectangle c:ColumnWrapPanel.ColumnSpan="2" Height="250" Fill="Orange" />
  <Rectangle c:ColumnWrapPanel.ColumnSpan="1" Height="50" Fill="LightBlue" />
  <Rectangle c:ColumnWrapPanel.ColumnSpan="1" Height="50" Fill="Tomato" />
</c:ColumnWrapPanel>

This solves a problem that I’ve run into over and over and which never had a good solution,  especially when laying out a data entry form or something else where you have a set of items that have dissimilar sizing requirements but which need to fill an area efficiently.  In the case of a traditional form, you could think of each color square as being a StackPanel or Grid that contains grouped elements in the form (e.g. use green for a name, orange for a set of address fields and blue and red for notes or a single checkbox).

By the way, there are some obvious efficiencies to be gained in this code (mostly with how I maintain the cell table) so if anyone finds the time to clean it up, I’d love your updated and better code!

SmartGrid (WPF Only)

Download it here. This is a super simple panel that derives from Grid.  It allows you to specify names for your rows and columns and then assign items by name (rather than by index).  I really like this for two reasons: first, it gives you self documenting XAML and second because it allows you to add and remove columns and rows without need to reindex all the content in your panel.  Here’s what the XAML looks like.

<c:SmartGrid>
    <c:SmartGrid.RowDefinitions>
        <c:SmartRowDefinition RowName="Header" Height="65" />
        <c:SmartRowDefinition RowName="Body" Height="*" />
    </c:SmartGrid.RowDefinitions>

    <Rectangle Fill="YellowGreen" c:SmartGrid.RowName="Header" />
    <Rectangle Fill="Orange" c:SmartGrid.RowName="Body" />

</c:SmartGrid>

I tried to port this one from WPF to Silverlight but I couldn’t find the right hooks.  Unfortunately Silverlight Grid has sealed up Measure and Arrange and the other sizing events were too late to set the indexes properly on the items.  There may have been something else too, but you may succeed here where I failed.  Let me know if your port it.

IndexingStackPanel (WPF Only)

Download it here. This one is old school.  I created it for Kaxaml originally, but continue to get a lot of mileage from it.  It’s a derived StackPanel that sets attached properties on its children to indicate where they show up in the panel.  I use it a lot with an ItemsControl.  It tells you whether it’s odd/even (slightly less useful now that we have alternating row colors built into the framework), first/last/middle and where it is relative to the selected item in a Selector.

My favorite use case for this is dealing with rounded corners on a menu or in a list.  The problem shows up if the thing that contains your list has rounded corners on the top and bottom.  In that case, you want all items to be square except the top and bottom.  With IndexingStackPanel you can just trigger of the attached property to find if you’re top or bottom or middle and adjust the corner radius of the item as appropriate.

By the way, if you use this with an ItemsControl, you need to create the triggers in the ItemContainerStyle (not the ItemTemplate).

My top pick for pure aesthetics has got to be the news tracker at everymomentnow.com.  It’s instantly understandable, clean and useful.  Each bar represents a day and the width of the bar represents the number of article references in that day for the candidate, providing information about media trends between the two candidates.

Another, and perhaps the ambitious, is the New York Times’ Visualization Lab.  The Times teamed up with IBM’s Many Eyes (and Wordle) to allow you to visualize all kinds of sources (including articles in the Times itself).  Construct your own visualization of Sarah Palin’s speech at the RNC or check out a Wordle of Obama’s acceptance speech.

For a general purpose and up-to-the minute perspective on the online coverage of the election, check out Perspctv.  This one also meets a high bar for aesthetics which makes the data feel highly accessible.  Yahoo has also put together a really nice dashboard, which includes a cool bit of interaction where you can play out your own electoral scenarios.

Of course with all this data being thrown at us, we’re becoming more savvy about how we interpret it.  Takeaway.org has picked up on that, I guess, and gives us a poll of the polls.  A visualization of how the different pollsters predictions stack up (literally) against one another. 

This idea (and others) has been incorporated into the “new” approach to polling that we see at fivethirtyeight.com.  I first heard about those guys in an interview on the Colbert Report.  I guess they started off by predicting sports scores and were able to do so with a significantly better track record than others.  We’ll see if their prowess holds out for the election, but right now they’re giving McCain a 3.3% chance of winning.  Sorry Red States.

Last of all, Saturday Night Live has done a very nice job of putting this all in perspective.  The skit it is brilliant.  The technology is pretty great too.

I’ll be speaking about Silverlight this afternoon at the <head> conference. It’s a really new kind of conference, organized by the venerable Aral Balkan.  He’s arranged for an impressive speaker list (including Tim O’Reilly and Lynda Weinman).  The “new” bit is that it’s online only (with hubs in select cities).  It brings folks together digitally rather than physically. 

I’ve been surprised by how well this works so far!  There have been a handful of technical snafus (as you might expect for the first round of something like this), but the community feeling is intense.  Arguably as good, albeit different, as a real conference.

It’s late notice, but I have a handful of tickets (3?) that I can give away (to the conference, not just my talk!).  If you’re interested in attending, let me know.  Happy to share, just drop me an email at robby@nerdplusart.com.

Alright, well wish me luck at my first ever online-only conference!

Incidentally, converting my frame-based animations from the DispatcherTimer approach I was using to CompositionTarget.Rendering makes a bigger difference than I expected.  Nice one team!  Things are noticeably smoother (but I had a bit of scare before I disabled the UseLayoutRounding property, which was causing the animations to snap at pixel boundaries and get pretty jerky).

By the way, if there is any interest in the code for the homepage, I’m happy to share it.  I’ve been meaning to do a walkthrough of how I created the blurring effect for a while and I was going to give out the code with that.  Happy to share soon with anyone wants it, though.

Between my wife and I, we own something like four iPods and two iPhones (including a first generation iPod which, amazingly, looks like an antique now) and so I have a long-term relationship with iTunes.  I don’t dislike iTunes but it’s old.  In fact, it hasn’t changed much since I plugged my antique 1G iPod into it 7 years ago.  There’s a lot of value, I guess, in iteration but I was hoping that iTunes 8 was going to be release that got me hooked again.  So far, I’m still kind of luke warm.

Enter Zune 3.0.  Wow!.  Can you call software sublime or is that weird?  Either way, I’ve got one doozy of a software crush on this music player.  Unfortunately for Microsoft, I haven’t broken out my Zune device for at least a year but I’m spending 10 hours a day in the software.

From the polish and attention to detail, it’s clear that this release went out with a some extra love.  Some favorite moments for me:

• The sound visualization has been integrated right into the background of the app (check it out above…that pink glow at the bottom moves in real time to the music…it looks cool!).
• It ships with multiple “themes” (which are really just backgrounds) but the default (and my favorite) is one called zero which is literally just a white background.  Nice.  Way to be bold by being subtle.
• If you leave the app alone it goes into one of two modes: one visualizes all of your album art in a giant grid.  It looks cool.  The other gives you band photos which it pulls from somewhere online and then overlays lyrics and song titles on top of it (that’s what’s going on in the image above).  This, by the way, is a great example of some blend mode awesomeness.
• The navigation is amazing intuitive in spite of being relatively complex and not feeling overly structured.
• MixView is the new music discovery service (also in the picture above).  As an example of paying attention to detail, the entrance animation for MixView eases in and then just slows but never stops.  That’s a bold thing to do, but it feels great.
• It doesn’t feel like an app, it feels like an “experience””—more like something a marketing team would create than app team.

So, well done Zune!  Now if only my Zune could make calls…

The Incredible Book Eating Boy is my new favorite bed time story (for reading to my two and four year old sons).  I looked up the illustrator (Oliver Jeffers) the other day to discover that he, like me, could appreciate a little nerd with his art as evidenced by his uninhibited use of math (that’s right, math) as a design element in his illustrations and paintings.  Sweet!  I really loved his portfolio for the content, but the site itself also stands on its own.  It’s simple, but really effective.  Shows how sometimes less == more (a little more math for you).

If it makes you feel better, I’m about 1200 items away from being caught up in Google reader.  You’re not the only one being neglected (oh, and hi honey if you’re reading this).  So, you’ll forgive me if I’m a little late responding to this awesome post about multi-input shaders on Greg Schechter’s blog.  Did someone say blend modes?

If blend modes weren’t the first thing that came into your mind when you ran across that post, don’t feel bad.  Caring about blend modes isn’t intuitive.  In fact, it’s kinda hard to do.  So here are some quick thoughts about why I think they are rock and roll…get ready to hop on the blend modes bandwagon.

Blend Modes Defined

I’m not an expert here and if you want to know more, then you may want to check out this or this.  My practical understanding, though, is that blend modes give you the ability define how a layer visually interacts with the objects below it.  We’re used to a really simple blend mode (although I’m not sure if it actually counts) when we set the opacity on something and can see the content below it.

When we do that, somewhere some math is done that combines the value of the pixels of the object where set the opacity with the pixels that were below it.  WPF and Silverlight support one version of that math, the “normal” one.  If you’re going to support one, that’s probably the right one.  Photoshop supports something like 25 different ways to do that math and Flash supports a bunch too.  These are blend modes and they have names (like Color Burn, Linear Burn, Overlay, Vivid Light, etc.).

Why Blend Modes Mattter

So what’s the big deal?  For a lot of scenarios, there isn’t one.  Regular transparency blending is often exactly what you’re looking for.  On the other hand, once you start thinking in blend modes they start to pop up every where, much like transparency or rounded corners.  You didn’t think you cared until you had them (or noticed that everyone else was using them).

I have a couple of favorites, but a top pick (at least in Photoshop) is a mode called Linear Burn and I think it has some good application to UI.  First, here’s a simple example of layering an orange square over a paper texture.

You can see how the best we can do with the standard transparency blending (the Opacity Overlay) has the effect of “evening” out the texture of the paper.  We lose a lot of the contrast information as everything fights to be a little bit orange and a little bit paper.

Check out the Linear Burn, on the other hand.  When we apply that guy, we keep that contrast but do so in an orange kind of way and the result is much more vibrant and a much better texture.

Why Blend Modes Mattter for UI

There are tons of applications to UI, but a semi-geeky one is that this “dimming” effect of regular blending makes it much more difficult to create generic designs that can be colored or manipulated at runtime.  Here’s a concrete example: you’ve probably created a template for a button in the past that uses a gradient to produce some depth on the buttons’ surface.  You might do that with a partially transparent white-to-black gradient on top of the button’s background to produce something like this:

Not bad, but look how dim our vibrant green became.  If the consumer of that button set the background to be a very bright green and ended up with this, he might be disappointed.  (By the way, you would probably work around that by not including any white in your gradient.  Now you would have more vibrant albeit relatively dark button, but at least you could keep the original color).

Much nicer, right?  Linear Burn is a good one for something like this but theoretically the sky is the limit.

Multi-input Shaders == Blend Modes Potential

And that’s where multi-input shaders come into play.  With more than one input into the shader, you could combine the gradient and green to produce this or any other smart combination that you could think of.  You just do some math to say how the pixels combine.  Forget 25 blend modes Photoshop or Flash, WPF just gave us infiniti (that was for you Scott Barnes).  That’s essentially what Greg did in his post.  Great job WPF team.

So here’s the thing.  The math for blend modes is pretty straightforward.  It’s probably just a weekend for someone to start building some of these for us.  So, any takers?   Oh, and Silverlight…we’re watching you.

Ed Catmull is a co-founder of Pixar.  He wrote this great article in the Harvard Business Review this month about how Pixar approaches the intensely collaborative and creative process of producing a film.  There are a lot of good parallels to the software process, especially as it relates to creative/technical workflow.  It’s an easy read and there’s a lot of great insight.  Don’t miss it.

I met Ed Catmull a few years ago and I actually got a personal tour of Pixar from him.  He and my dad were college pals and then office mates in graduate school so he set it up for me.  My dad, in fact my dad did the 3D lettering in one of Ed’s earliest movies.  We always called it the “hand movie” because it’s a 3D model of a hand, and I believe was among the first digital movies ever!

Well, the tour of Pixar left a tremendous impression on me.  At the time, they were working on Monster’s Inc. and the digs had been dressed accordingly. The team sat in a warehouse-like inner sanctum in the middle of the building that was filled with Styrofoam caves, monster sketches, giant storyboards, and crazy models.  More to the point, though, it was lit up with conversation and a bewitching kind of collaborative energy. 

So given that, I have an admitted bias when reading the article.  I can’t help but read it through the lens of that experience, trying to extract something about how they created such an intensely creative environment.  For me, the article doesn’t disappoint, although it gets there with some ideas that rub against grain a little.  Here are some of the tamer ones.

On the collaborative nature of creativity:

People tend to think of creativity as a mysterious solo act, and they typically reduce products to a single idea… However, in filmmaking and many other kinds of complex product development, creativity involves a large number of people from different disciplines working effectively together to solve a great many problems. The initial idea for the movie—what people in the movie business call “the high concept”—is merely one step in a long, arduous process…

On taking risks:

To act in this fashion, we as executives have to resist our natural tendency to avoid or minimize risks, which, of course, is much easier said than done… If you want to be original, you have to accept the uncertainty, even when it’s uncomfortable, and have the capability to recover when your organization takes a big risk and fails. What’s the key to being able to recover? Talented people!

On managing creative people:

Of course, most executives would at least pay lip service to the notion that they need to get good people and should set their standards high. But how many understand the importance of creating an environment that supports great people and encourages them to support one another so the whole is far greater than the sum of the parts? That’s what we are striving to do. Let me share what we’ve learned so far about what works.

Creative power in a film has to reside with the film’s creative leadership. As obvious as this might seem, it’s not true of many companies in the movie industry and, I suspect, a lot of others. We believe the creative vision propelling each movie comes from one or two people and not from either corporate executives or a development department. Our philosophy is: You get great creative people, you bet big on them, you give them enormous leeway and support, and you provide them with an environment in which they can get honest feedback from everyone.

On the magic of technology (nerd) + art:

Getting people in different disciplines to treat one another as peers is just as important as getting people within disciplines to do so. But it’s much harder. Barriers include the natural class structures that arise in organizations: There always seems to be one function that considers itself and is perceived by others to be the one the organization values the most. Then there’s the different languages spoken by different disciplines and even the physical distance between offices. In a creative business like ours, these barriers are impediments to producing great work, and therefore we must do everything we can to tear them down.

Walt Disney understood this. He believed that when continual change, or reinvention, is the norm in an organization and technology and art are together, magical things happen. A lot of people look back at Disney’s early days and say, “Look at the artists!” They don’t pay attention to his technological innovations. But he did the first sound in animation, the first color, the first compositing of animation with live action, and the first applications of xerography in animation production. He was always excited by science and technology.

Alright,  I’ll let you read the rest.  Don’t miss this one.