So long Engineering, hello User Experience

Today was my last day as Lead Software Engineer at Comcast Interactive Media (CIM), and tomorrow I start my new role as a User Experience Technologist / Principal Application Developer for CIM. Its been an awesome 5 years in engineering but its time to move to newer domains.

The decision to move to UX was definitely not something I just woke up to. I have always considered myself an engineer, and have a Masters in Computer Engineering to back that up. Heck, this blog is a testament to my love for programming. I love learning new technology, and am fascinated by programming concepts and domains. However for me programming is the means to an end. My end goal has always been to get ideas down to working apps and getting them out there in front of the huge user base Comcast has. That was the most gratifying part of working on different projects like the Fan, the Comcast.net portal and more recently microchannels within Comcast.net and Fancast.com.

A while back I wrote a post on the need for creative technologists, and that feeling is something that has steadily grown over the last couple of years. The new technologies are enabling a much richer experience for an end user but there is a lack of experience designers who investigate the new platforms. And these platforms are more than just pure technology, they include things Facebook, OpenSocial, Yahoo Homepage, etc. It is something I hope I can bring to the table in my new role. And just for effect, I will re-insert Grant Skinner’s Venn diagram on where UX fits in the engineering/design world:

UX

Thankfully it feels like the perfect time to be at this position. Off the shelf technology and instant on solutions like Google App Engine promise to reduce the temporal gap between ideation and functional prototypes. And with a strong initiative within CIM to encourage grassroots innovation, it seems like the perfect storm of awesomeness :). Personally this position also will help me grow in areas I have traditionally not dabbled in, be it more middleware/backend programming or business and finance. I am very thankful to CIM for enabling me to explore this direction.

I am a little emotional about no longer being called an Engineer, but hopefully I wont be an outcast from the engineering team, even if I do wear a beret and occasionally talk about shades of teal ;). This blog will still be called Code Zen, and I will continue to release open source libraries (the 0.6 release of OpenPyro is coming up btw), but I think now I can be a little less bashful about commenting about user experiences and methodologies. I will be learning a lot in the next few months and as always, will share it all here.

Color me excited 😉 !

My FlashCampPhilly presentation: Some interesting libraries to consider for your next app

Last Saturday, Philadelphia was host to its first ever FlashCamp event. The event brought together some of the biggest names in Flash and Flex in the neighborhood and beyond (special kudos to Rob Hall for organizing the event from vision to a lot of very hard work). I did have one session at the event as well, as I walked through some of the libraries I have started using in a lot of my projects, including the soon to be alpha-ed Espresso Reader. These libraries included:

Embracing my inner hacker

The word hacker has always held a negative connotation for me and I am sure for quite a few other people. Phrases like “its a hack” are generally used to describe a poor but functional implementation and usually the number of hacks in the codebase are used as a metric for its lack of quality. So naturally I would never dream of calling myself a hacker. For the last 5 years at Comcast I have grown quite a bit as a programmer and for quite a while, was responsible for maintaining some of the core applications’ code bases (I am migrating to new lands now but thats a different topic that I’ll discuss in a later post). I have always had the highest respect for code architecture and am pretty proud of the architecture of the code and frameworks (like OpenPyro) I have written.

However the last few days have been instructional in a couple of different ways. I participated in Yahoo’s Open Hack NYC event, (which was a lot of fun) with Gabo (yes of GaboCorp fame, stop asking me). This was the closest I have ever worked with him and he has a very different coding style then I did. Gabo evolved with Flash and still uses the IDE to amazing potential. Having come from a more traditional programming school (Rutgers, NJ) with a Masters in Computer Engineering, I use Flash as I used to use Java, very strict OOP, design patterns, the works. I havent opened the Flash IDE in the longest time without the reason being to create a quick graphic that I could use from Flex Builder.

But watching Gabo work was fascinating. Most of the UI in our application was done by arranging MovieClips on stage and then gluing in the logic in FlexBuilder (or FDT in Gabo’s case). Surprisingly I found that we got a lot more done than my tradional way of trying to describe the UI in a series of “draw” commands. And tweaking the gradients and shapes was so much easier.

Last week I read this awesome essay by Paul Graham titled Hackers and Painters, which apparently is pretty old. But there were certain parts I agreed with so passionately that I had to write about it. Some excerpts are below:

I’ve never liked the term “computer science.” The main reason I don’t like it is that there’s no such thing. Computer science is a grab bag of tenuously related areas thrown together by an accident of history, like Yugoslavia. At one end you have people who are really mathematicians, but call what they’re doing computer science so they can get DARPA grants. In the middle you have people working on something like the natural history of computers—studying the behavior of algorithms for routing data through networks, for example. And then at the other extreme you have the hackers, who are trying to write interesting software, and for whom computers are just a medium of expression, as concrete is for architects or paint for painters. It’s as if mathematicians,
physicists, and architects all had to be in the same department.

The mathematicians … happily set to work proving theorems like the other mathematicians over in the math department, and probably soon stop noticing that the building they work in says “computer science” on the outside. But for the hackers this label is a problem. If what they’re doing is called science, it makes them feel they ought to be acting scientific. So instead of doing what they really want to do, which is to design beautiful software, hackers in universities and research labs feel they ought to
be writing research papers.

This struck me very close to home. I had fallen in love with Flash when I was in grad school and working with Java Swing for an application’s UI. Suddenly I was confronted with this technology that I could just draw my controls in and didnt have to worry about the GridBagLayout f-ing things up or need 5 lines of code to get a JButton to be blue in color. But I was desperately seeking a topic for my thesis and it was really hard to justify using Flash in a grad school full of Java developers. My final thesis was on Flash Java integration (and this was Flash 6), where I explored a middle layer that maintained application state across a desktop application done with Flash and Java. However I am sure my advisor would have been happier with a crappier looking application that I had gotten to work by beating Java Swing to some level of submission.

Paul literally says this later:

Unfortunately, beautiful things don’t always make the best subjects for papers. Number one, research must be original—and as anyone who has written a PhD dissertation knows, the way to be sure you’re exploring virgin territory is to to stake out a piece of ground that no one wants. Number two, research must be substantial—and awkward systems yield meatier papers, because you can write
about the obstacles you have to overcome in order to get things done. Nothing yields meaty problems like starting with the wrong assumptions.

The way to create something beautiful is often to make subtle tweaks to something that already exists, or to combine existing ideas in a slightly new way. This kind of work is hard to convey in a research paper

I wont quote him anymore since almost every line on that essay is worth quoting. But reading it, I suddenly feel that its okay for me to be more concerned with the visual than the architecture. Fortunately the two goals are not in opposition. Good architecture enables more aesthetically pleasing and interesting interfaces (Look at Flex 4 compared to Flex 3 the Spark architecture in Flex 4 compared to the old Halo architecture. Spark enables creation of so much more interactive and interesting controls). But after reading this I suddenly feel less guilty about not caring for the purest Singleton implementation in AS3 or not being able to launch a headless version of Flash.

I code the pretty!

First impressions on Google Wave

So after a tormenting 24 hours without a wave account I finally got my invite last evening (Thanks @blamborn and Mat). So I figured I’d chronicle my first day’s adventures and add to the wave conversation on the intertubes, especially since just the day before I had blogged about what I thought Wave was about. I have a few friends on Wave already so it wasnt a complete case of the empty room syndrome, but my impressions might change once my contact list there reaches any critical mass.

First off: the interface. Quite a few people have talked about Wave looks pretty, (it even has drop shadows and rounded corners), but quite frankly, they are a waste of space here and actually hurt the UI. The gap between the modules is way too much (separator bars should be much thinner), and rounded corners dont really allow modules to butt up against each other too close. I have no idea whats going on with the smart scrollbar on the right hand side of the message window and why it only scroll to a fraction of the size of the main document. Besides that is okay, definitely not as minimalistic as Google has a reputation for.

My first couple of Waves were to myself, I added a couple of robots from the Robots gallery, but most of them didnt work for me. The idea of such extensions is interesting though this is pretty much the same as Yahoo Mail Apps or Zimbra mail or Yahoo Messenger plugins. Not really a new idea or that revolutionary.

I started a wave with Mat and another friend Nick and started working on a cheatsheet for Freemarker, a templating language for Java that we use at Comcast Interactive Media. Here it got kinda interesting, but the formatting options were a far cry from google docs (but thats okay considering the early beta stage here). What was really crazy was that people were adding to the content by “replying” to the original message. What I really thought we should have been doing was adding to the main document which is editable at any time. What this made me realize that there is indeed a difference between a conversation around a document and the document itself. Wave blurs the difference which makes you think a lot more on what should go where.

Nick later discovered the with:public search on wave that just showed all public waves, some with a lot of live editing going on. Cool! … or wait, isnt this what Yahoo chat was (I used to be a fair addict to Y!Chat in my teens). Heck, even the waves sounded like chat rooms: “Utah Wave Users”, “JQuery Users Wave”, etc.So I tried going into a couple of *rooms* and they were pretty chaotic. A few of the wave starters were trying to maintain some order in there (“please dont append to this part”, “please start new waves for smaller topics”, etc). Yeah I left pretty quick.

So here are my thoughts:

  • The idea of a blended medium is interesting but communication is indeed of differnt types: conversations, collaboration on a document, announcements do need different visual cues even if not different applications. For example, could a wave be *marked* as a conversation (chat or email) and then it could force a temporally sorted exchange or marking it as a document could force all conversations/comments on a sidebar.
  • The idea of robots appending content to a messages is powerful. I can imagine quite a few uses for it (you know, like bots do on IRC)
  • Gadgets on Google Wave could be awesome
  • Google Wave will definitely have an app store in the near future
  • Wave definitely needs an SMTP gateway asap that translates email to a “dumb-wave” or a conversation wave as I mentioned in the first point here.
  • I think a good use case for it is for a personal notebook. I use Evernote right now to jot down thoughts etc, but Wave could be a pretty awesome note taker that I could occasionally share a note from

So what do you think. Do you like it? Think it’ll be the future of email? (my opinion, not the current version but something it morphs to)

So what really is Google Wave

As of right now, I do not have a Google Wave invite, but the blog buzz is kinda interesting to see. The one thats prompting me to write this post is the one by Ryan Stewart titled “Google Wave pisses me off”. I commented on his post but it was such a long comment that it seemed to warrant a post.

I think Wave as a technology is different from Wave the product. Technically everything Wave does could be done with some XMPP servers powering a real time wiki or something like that. I think to Google’s credit, they applied the tech to an interesting problem. I am no Google fanboy and find most of their applications functional but not exciting (though I use Maps, GMail and GReader like crazy), but Wave excites me for a number of reasons.

It was a good observation by Google that a lot of communication we do on the web is fairly similar but fragmented. We have conventionally considered things like blog posts, twitter feeds, IMs, emails, collaborative document sharing to be different things, but are they really? Arent we all manipulating a basic content document. Can one interface serve all the needs?

Consider that you run a group (I manage a couple on OpenPyro and CIM Logbook and help out with Philadelphia Flex Dev Group and RefreshPhilly). If you want to announce the new event, do u post to the google group there and wait for replies, or post a message on the group blog and wait for comments, or tweet it and wait for @replies? Usually I do all of them and it seems really silly (more so since I saw the GWave demo). Its kind of interesting to see a tool that *could* change that.

Whether Google will really succeed remains to be seen. John Gruber phrased GWave as not only technically complex but also conceptually complex. Could I get my mom to use it, no way. But maybe it’ll take our generation before it becomes a new standard for web communication. In the meanwhile I anxiously wait for an invite :).

Other links:
Why Google Wave is Conceptually Simple
What works: The web way vs. the wave way

[update] I have no more invites left, so please dont ask me for one 😦

Thoughts on Commercial Ecosystem for the Flash Platform

This post is in response to Grant Skinners post on a thriving commercial ecosystem for the Flash Platform. For those who are just getting caught up with the conversation, it all began with Adobe labs releasing Squiggly, a spelling library for Flash apps which may compete directly with Grant’s own Spelling Plus Library which prompted quite a few people (including Grant himself) to talk about how Adobe may be competing with developers who build on their platform. This conversation isn’t new, quite a few people said the same thing when Adobe came out with Photoshop.com which competed with services like Picnik. As Adobe starts eying the services market with apps like Share, Buzzword, etc, developers may (justifiably) feel that it may be a matter of time before Adobe competes with them should their product seem lucrative. Considering they own the platform, ie the Flash Player, they may very well put features in that give them the advantage. For example, Adobe Connect already leverages the screen sharing capability that gets enabled on the Flash Player with the Connect plugin (yes a plugin for the browser plugin), something that non-adobe developers cannot access.

Can Adobe navigate these waters carefully enough to not alienate its developers remains to be seen, but this post is more regarding Grant’s follow up post on what Adobe can do to create a vibrant commercial ecosystem for the Flash Platform.

Actually there is a slight difference in the title of Grant’s post: “How Can Adobe Encourage a Commercial Ecosystem?” and what he writes about: “… lack the high-quality, well-supported, production-ready components that a commercial marketplace can provide.” While both are in similar vein, I feel a thriving commercial ecosystem on the Flash Platform doesnt have to be based around production ready components. There will be a few, like SPL that make a decent amount of money but those are going to be the exception and not the rule.

Adam Lehman, ColdFusion Product Manager made the point on one of the comments on that post which I most agree with: The Free Open Source marketplace which is pretty thriving on the Flash Platform does tend to kill the commercial component marketplace.

A Commercial Ecosystem on the Flash Platform is different from a commercial ecosystem on the Flash Platform based around commercial components. Grant’s own SPL is only viable till an open source version came out that may even be half as good as the SPL. The Flash developer community has become used to the Open Source way: find something out there that fills your need, if not and you find a fledgeling open source project that may have those ambitions, see if you can contribute, else build it yourself. My personal opinion is that the market for commercial components is pretty small no matter what Adobe does, and I dont think too many people miss it (except maybe a few folk coming from the Microsoft side of the world who are used to paying for components they use).

Flash Platform’s own commercial ecosystem would/should probably be around full products, embeddable widgets, AIR applications, Flash lite/mobile AIR apps etc. The best thing Adobe could do is keep powering the platform even more, add more capabilities to the runtimes, create distribution and monetization channels for the developers and make sure the developers dont feel threatened. And the developer services products on Adobe devnet seems to be a step in the right direction.

On Innovation in big companies

These notes are from BarcampPhilly ’08 that were lost in the depths of my computer’s hard disk and I only just found again. At the event, a few of us from CIM held a round table discussion on innovation, especially developer led innovation in big companies. Here are the points that people mentioned:

  • Innovation only comes from free cycles, even the best ideas need time to be thought through
  • Leverage something thats existing rather than a brand new idea
  • Agile development can actually hurt innovation with too much transparency. Its hard to justify something that you may feel has a long term win
  • Technical managers should whet the ideas of their team members
  • Innovation comes from bottom almost never from top
  • Innovation = Risk
  • True story: At AOL, the AOL IM service was declared a risk
  • Constraints actually push innovation
  • Innovation wont happen without proper incentives/rewards.
  • How about cross team innovation. How do designers/developers collaborate to innovate?

So this has only taken almost a year to put up, with BarcampPhilly ’09 coming up soon. Since then there has been a few opportunities within CIM to push bottom-up innovation, including a labweek for all of engineering.

Are you in/around Philadelphia and into Flash, Flex or AIR? You should be at FlashCamp!

I am pretty excited that Rob Hall has formally announced FlashCamp Philadelphia to be held on Nov 7th. The event promises be pretty fantastic with some of the biggest names in Flash and Flex circles coming in to participate. While the event promises to be technically very educational, I am personally excited to see how different companies within Philadelphia use Flash and Flex. The event will be held at Philadelphia University’s Kanbar Campus Center and is priced at $45 with early bird pricing of $35 (till Sept 30th or the first 75 tickets). Students tickets are priced at $22.

So if you are in the neighborhood and interested, check the event site and register here. You can also follow the event on Twitter at @flashcampphilly

See you there.

Migrating to Java 1.6 on a Mac (Warning: Flash CS3/Flex Builder/Eclipse wont work with it)

[Update: Changed the title, added “on a Mac” because everything mentioned here is applicable to that platform alone]

After not looking at it for 4 years, today I started playing with Java again for a new open source project called RedCar, a programmers text editor that is now being ported to SWT and JRuby. Mat is getting pretty involved in it and he got me curious about the project. However to actually get it to work I had to get the Java 1.6 code to compile on my Mac which was a little tricky. Here are some notes from that.

The JDK 1.6 was part of one of the recent Mac Software updates but what I found out was that the update does not actually change the default JDK/JRE for the system. The first thing I did was to change the symlinks for java and javac as mentioned on this post. That seemed to work and calling java – version and javac -version seemed to return the correct versions, but running the build file still did not work. After a few other attempts, including trying the Java Preferences Application without any luck, I finally found this post that basically talked about the CurrentJDK symlink that apparently my build.xml was using (and was still pointed to JDK 1.5). That seems to have worked.

One last thing. Apparently Eclipse (and Flex Builder which is built on top of Eclipse) doesnt work with Java 1.6 on a Mac. As this post suggests, you may have to make a change to the Info.plist for the application to make it run with Java 1.5.

[Update] The Flash CS3 IDE doesnt work with 1.6 as well, so I am reverting back to 1.5 for the time being.

Is CSS the best metaphor for styling for a UIToolkit? Maybe not

Writing your own UI Toolkit is, if nothing else, educational. As the OpenPyro framework continues to evolve, every time a new feature is added, I look around at prior art in the domain and evaluate the choices made by different frameworks which has been fascinating. Of course, the first framework I look at (since I have had most experience with that) has always been Flex (both Flex 3 and 4 separatly since they are so different), but often I do compare that with choices made by the IPhone’s UIKit, HTML/CSS and (rarely) Swing or any of the Java toolkits.

One of the features that I know I will need to add in a future version will be a simpler way to style/skin the controls. OpenPyro controls are based around composition so creating new UI assets and passing them in as skin elements is simple enough but there is always a need to do something simpler. A blue scrollbar for example shouldn’t need blue assets, more the ability to tell the scrollbar to draw itself with a stroke/fill of blue color.

Flex’s choice in this domain has been CSS and thats not surprising. A lot of the way Flex was developed was to enable it to be a gateway drug to ActionScript for developers from other technology domains and who doesn’t know CSS? Flex 3’s CSS capabilities were very basic and I keep reading how Flex 4’s CSS engine is so much more complete. And considering how much easier it is to create a Flex 3 theme compared to a Look and Feel in Swing, that seems to have been a decent choice. Someone recently asked when OpenPyro would support that functionality which led to this post.

I have often found writing CSS for Flex a chore, for most of the reasons I find writing CSS rules boring: complete loss of any logic system. Deep in ActionScript land while developing an application, switching to CSS is irritating. Suddenly I am in a file where I cannot really code any logic or rules. One of the first libraries of ActionScript I wrote over 3 years back had explicitly defined style objects. For example, ScrollBars would have a corresponding ScrollBarStyle class that listed all style properties. Being a pure AS class, I could also code logic in that, so conditionally apply style properties because I could inspect the properties of the UI element the style was being applied to. Heck, I could even get code hinting of relevant styles for a particular component.

What spurred this post today was seeing how the engineering team I work with at Comcast Interactive Media adopting the Less CSS engine. I have personally not worked with this yet but I might in a coming sprint. By accounts so far, its awesome to work with and I completely don’t doubt that. Most of the logic here seems something that you can write pretty easily in pure AS3 classes and pass them around as something equivalent to Flex/Javascript’s CSSStyleDeclaration object (link to JS CSSStyleDeclaration object)

Anyway, the point of this post was, while CSS may be the most familiar styling metaphor, there may be better ones. I hope OpenPyro can probably adopt something more powerful like lessCSS rather than pure CSS.

Update: Another flavor of a *better CSS* system: SASS

Update 2: Smashing Magazine has a pretty good writeup on CSS ideas and debates. More food for thought as I spec out a styling language for OpenPyro.