Introducing SuperLoader: a better AS3 library for fetching images

This post is way overdue but in any case, I’d like to introduce (rather belatedly) SuperLoader, an image loading library for AS3. The library grew out of my work when I was building the magazine view for EspressoReader. The magazine view builds a visual grid from the images found in a collection of blogs you are browsing. Here is a screenshot of the experience:

While building the Magazine View, I was faced with a problem. Each “page” of the view read 10 blog entries and then needed to find the most relevant image to show in the interface for each entry. Posts tend to have multiple images and a lot of them are not usable. For example, the image may be a tracking 1×1 pixel image used for analytics or may be too small or large to be effective. Loading each image using a Loader was not feasable since the loader only gave dimension information once loading had been completed and I didnt really want to load a bunch of images completely only to discover they weren’t useful.

The SuperLoader library  takes care of this by actually parsing the binary data in the URLStream that it uses to load the images and can identify very early in the loading process the type and the size of the image being loaded (since that information is available in the first few bytes of the incoming data). Moreover it also includes an api for immediately canceling the load process so that you can jump to the next image in the list of images you are loading. The API looks something like this:

 

var loader:SuperLoader = new SuperLoader();
loader.addEventListener(SuperLoaderEvent.IMAGE_TYPE_IDENTIFIED, 
                                          onImageTypeIdentified)
loader.addEventListener(SuperLoaderEvent.IMAGE_SIZE_IDENTIFIED,
                                               onImageSizeIdentified);
loader.addEventListener(SuperLoaderEvent.LOAD_COMPLETE, onLoadComplete);

private function onImageTypeIdentified(event:SuperLoaderEvent):void{
  trace(loader.imageType)
}

private function onImageSizeIdentified(event:SuperLoaderEvent):void{
  if(loader.imageWidth < 20 || loader.imageHeight < 20){
   loader.abort();
  }
}

private function onLoadComplete(event:SuperLoaderEvent):void{
  var image:Loader = new Loader();
  addChild(image)
  image.loadBytes(loader.data)
}

The library also includes a SuperLoaderQueue object to manage the load process of multiple images.

The library is released under the MIT open source license and is available on Github.

 

Its comments like these …

…that keep me working on EspressoReader

I know this video was posted a year back. Could not stop myself from praising about your marvelous work. Really made my Google Reader mess an enjoyable read.
Thanks and congrats for the awesome piece of software 🙂

On the first “sneak peek” video of EspressoReader posted July of last year. Wow cant believe its been that long already. Since then it has had about 5 releases with feature updates and yet that pipeline never seems to get emptier 😉

The grand 2010 recap post

Wow, cant believe its that time already.

2010 was a pretty great year for me. In Nov 2009 I moved to the User Experience team hoping to be the voice of technology as new projects were conceived and features enhanced. So the year began with me learning the workings of the UX team which was fascinating. The creative process is, not surprisingly, very different from the engineering one, and sitting in those sessions was ridiculously educational. CIM has some pretty fantastic Design and IA folks and I got to learn quite a bit on concepts such as Mental Models, Task oriented design, User Persona’s etc. I also ended up reading a few books on my new role (of which About Face might be the best one, and I recommend it strongly to anyone in the UX/UI domain) which I never would have done if I hadn’t moved to this team.

Suffice to say, if the year needed to be summarized in a word, it would be “educational” 🙂

Around Feb, I also got involved in a prototype for the project that is now the Xfinity iPad app. As a UX prototyper, I was on the 3 people big prototype team that built the demo that was shown at the NCTA event. After that I ended up working with the brand new Advanced Engineering Team as we rushed to get the final product out of the door. My role in the team was not UX really, but implementation. After the initial learning curve of Objective C, I got pretty comfortable with it and actually realized that user interface frameworks and technologies are pretty similar even with syntactical differences. I wrote about the whole Xfinity App development experience here. In the last few months, I have returned to prototyping but these days they have all been functional additions to the iPad app itself.

While I didn’t write as much code for it as the iPad, I have also become extremely passionate about the Android platform. While less polished than its i-Cousin, the deeper I look into the architecture the more awesome it seems. I built a couple of apps for internal demos that ran on Android (in Java) and that was fun. I feel less proficient in the Android UI framework than in UIKit, just by virtue of time spent developing on it, but its something I hope to get better at next year. The Android world definitely lacks the sexy factor that is going on with the iDevices, and I am really hoping that changes both with upcoming OS updates and developer community maturity. I also played around with AIR for Android a little and it seems pretty decent. I am working on a project using that now. The biggest thing that has going for it is not just the familiarity of ActionScript but also the tooling of the Flash IDE. As much flak as it gets, the Flash IDE is rather fantastic for dropping visual assets for an app. I really wish AIR for Android played nicer with the core Android framework, though there are ways of doing that as mentioned in this post by Elad Erom.

EspressoReader, my AIR app for consuming news (currently as a Google Reader client) continues to evolve. Just building something like that has made me learn so much about the way we consume information. It has also gotten me hooked on books on collective intelligence and text analysis. I will release a new version in the coming weeks that I am really excited about. So if you haven’t tried the app out yet, give it a try by installing it from this link to the Adobe AIR Marketplace.

I ended up travelling for work quite a bit this year, attending some pretty fantastic conferences like the NCTA Cable Show, the Web 2.0 Summit and TechCrunch Disrupt. This is a change for me, as these were more about the business and strategy than my usual fare of tech conferences. From my schedule in Jan, looks like this will continue. Btw, I am heading over to CES so if you are heading there as well, send me a holler 🙂

Finally, looking ahead, 2011 seems to be at a great start. There are a lot of changes afoot which I’d love to share soon. So stay tuned 🙂

[Video] New Magazine View in EspressoReader: Your Google Reader feeds never looked so pretty

I am pretty proud of the new version of EspressoReader that was released yesterday. While the build included numerous bugfixes, the biggest change in the app is a much improved Magazine View that is centered around the images in a feed. Here is a screenshot +video of the new view:

Magazine View

The view is fully navigable via the keyboard via the directional keys which makes going through a bunch of feed items really easy.  By the way, I will be releasing the core library that does the image fetching under an Open Source license in my next post so stay tuned for that. In the meanwhile, if you are a Google Reader user, go download EspressoReader from the AIR marketplace and give it a shot.

Whats new in EspressoReader 0.8: Twitter profile “guesses”

I posted an update to EspressoReader on the Adobe AIR marketplace yesterday (if you are using an older version of the application, restart it to get the auto update message). While the application does have a number of features and bugfixes, the feature I am definitely most excited about is the Twitter profile guesses. Here is a screenshot of what that looks like when triggered:

Associated Twitter Profiles

The lookups work really well on feeds that talk about companies and products like Techcrunch, Mashable, etc. Besides guessing at the twitter names, the app also picks up twitter names if mentioned in the post. On some of the design blogs I follow its pretty amazing to find the profiles of designers mentioned in the posts.

Having it work brought interesting questions to mind. For example, if you find a Twitter profile, is their last status most important or the conversations they are having, or just searches based on the profile name (to see what people are saying about the product). And sometimes the guess is WAY off, for example Apple on Twitter is not the Apple Company we love to talk about ;).

The “guess” API call requires users to be signed in so you’ll need to sign in to Twitter when using the application to get it to work.

Besides that, a bunch of other features were added to the build:

  • Mark All Items as Read functionality
  • Moved to a certifed security certificate from a self signed one (thanks Adobe)
  • Font issue fixes for other languages (RTL languages are still an issue)
  • Fixes to the left hand side Subscriptions view
  • Feed Titles on story items
  • Bug fixes when calling more items in a Category view
  • Misc UI bug fixes

If you haven’t tried EspressoReader yet, give it a shot and let me know how it works. Most of the features on this release came from user feedback so feel free to send us more.

EspressoReader v0.7 now on Adobe AIR Marketplace

EspressoReader preview image

I am pretty excited to announce the first public release for EspressoReader is now on the Adobe AIR marketplace. Like I had mentioned in my last post, EspressoReader is a desktop client for Google Reader that I have been working with Alex for a while. While the application is pretty functional right now, there are a lot of cool features I have in my head that will make it truly a awesome experience.

There were a bunch of motivations that led me to work on this application:

  • I was pretty bored of the uninspiring (though functional) UI of Google Reader.
  • A lot of my feeds would contain duplicate content (say every time Facebook added a new feature, it would be reported by Mashable, Techcrunch, etc). So Espresso loads the feeds ahead of time in a local database and parses them to find duplicate content and shows them as related items in the related items sidebar (only if you are in the List view of the application though).
  • Navigating to the feed I wanted to read using the Tree control on GoogleReader was fairly tedious. Espresso also does a good job navigating a through your feeds using “quick jump”. At any point when you are using the application, you can hit the spacebar and bring up a textfield that’ll let you jump to any feed or folder you have in your subscriptions.
  • Sharing stories on Twitter was a chore in Google Reader. In Espresso, you can just hit the share on Twitter button and the twitter status field comes up immediately.

As with any “first look” release, this release is only about the core features and there are many things that still need to be added. For example:

  • The splash screen that you see when you launch the application needs a lot of work. Friends’ Feed doesnt currently show the person who shared the item and the links open in your default browser. Going forward this will be better integrated into the application itself.
  • Links right now open in your default browser. This will change and there will be an integrated web browser (with a setting to open links in your default web browser).
  • Photos in Magazine view
  • Offline access
  • Adding/Managing Feeds and Subscriptions (right now you cannot add new feeds or move them to different folders)

etc etc. If you have any other ideas/suggestions, please leave a comment on this post. I am really looking for feedback on this release.

Here is a quick video of the application in action (reposted from the previous post):

If you are on Twitter, you can follow me or espressoReader for details on updates etc. I have also started a wiki to list the features/todos/help which is pretty bare right now but will hopefully grow as time progresses.

[Update: version 0.8 released as well with Twitter Profile “Guesses”: More here]

Sneak peek: EspressoReader v2: A desktop client for Google Reader

I am a big Google Reader fan, even if I often find myself overwhelmed by the number of feeds I have to catch up on every time I fire up the the web app. For the last few months I have been working on an app that would help me manage my subscriptions. With the help of Alex, a friend and a fantastic designer, I have been working on V2 of EspressoReader: a desktop client for Google Reader.

I had released an earlier version a while back but back then I had limited knowledge of the (undocumented) Google Reader API. The new version has been written from ground up and includes a lot of interesting features like:

  • List view and Magazine view for feeds
  • Quick “jump to feed” shortcuts
  • Related feeds algorithm that scans your feeds for related content
  • Sharing options with Twitter and Google Reader

Here is a quick video of the application in action:

I will post the latest build of the application on my blog soon, but if you are interested in this build @ or dm me on Twitter.

Stay tuned for an update coming soon 🙂