Announcing EspressoReader (alpha): A desktop client for Google Reader

I am excited to finally announce the alpha release of EspressoReader. EspressoReader, in its current incarnation, is a desktop app for Google Reader. However the goal is to create an application for managing all the information streams you read on a daily basis, and providing user interfaces that help sifting through all of that. For example, this release includes a PhotoView that lays out all the images in different feeds one below the other, which works out really well if you are subscribed to image heavy feeds like web comics.

Espresso Text View

Espresso Reader Image View

You can download the application from here.
Update: I am removing the link to the installer as more and more people keep having a broken experience with version 1. Please get on the alpha list for version 2 at EspressoReader.com. The new system should be a lot more stable since it uses a different authentication system that seems to be working much better.

Features:
Multiple view support like Text, Images and Browser (more coming soon)
FullScreen support
Share with Twitter
Related entries from your other subscriptions

Features coming soon (almost done but couldn’t finish for this release):
Offline support / Prefetch support (allowing you to load all subscriptions for a category when reading an entry for more useful Related Feeds functionality)
Improved Related Feeds Algorithm

Other list of proposed features can be found here. Feel free to add to that list.

Also the application is completely charityware. Please consider donating to Unicef if you find this application useful.

EspressoReader was built completely with OpenPyro.

Update:
EspressoReader v2 is now available on Adobe AIR marketplace as a free download. Check it out

Should the developer community fork the Flex project ?

Its kind of ironic that I am posting this on the same week as Adobe Flex wins the Sys Con Ajaxworld award for the Best Open Source RIA Solution, but I think a conference with almost no showing from the open source community thats actually contributing to the Javascript AJAX Framworks is of questionable merit anyway, so lets continue.

I have mentioned before my feelings on Flex but here is a quick recap: I was a big fan of Flex when Flex 2 first came out, but off late I have been disappointed with it enough that I have started working on my own open source UI framework called OpenPyro. And the questionable decisions being made around the Flex 4 api are not helping my feelings towards it. And I am relieved that I am not the only one who feels this.

I just finished reading Simeon Bateman’s post on how just making the source code available does not make a successful open source project, and how Adobe is pretty much failing with Flex as a genuine open source project because all decisions and priorities are being made behind closed doors, and I couldnt agree more (I am so glad he started this one and not me, at least the we’ll share the wrath of Flex devs who dont agree ๐Ÿ˜‰ ). He also recently posted a tweet wondering if creating a branch off the Flex framework trunk with patches to not require the Fx prefix to the Flex4 components would be a good idea. I think it will be, but I think we can and should go beyond.

I have no idea how many bugfixes and patches Adobe has got so far on the framework and I seriously doubt there are as many. Part of the problem is Flex is a behemoth of a framework and there aren’t that many people who understand the project at its core. I personally think the framework needs some serious refactoring to improve performance, filesize and more importantly to reduce the complexity and the deep inter-coupling of the framework. However, there is almost no immediate way this would let Adobe make more money through a new toolset so its (understandably) not Adobe’s priority.

Whats also interesting is that Flex has kind of crippled growth in the Actionscript based application frameworks domain. Having options is (almost) always a good thing and multiple projects keep forcing each other to evolve. But there isnt really another framework that competes with Flex that has gained any serious traction. There are a few frameworks that some companies have released but none that have gained any number of external contributors or that have become familiar names in the developer community. There are a few MVC frameworks like PureMVC, Mate, etc and such which have survived mostly since they dont compete with Flex (Flex is a pure UI framework and Adobe’s MVC framework Caringorm is just bad). The sad fact is I have met so many Flash/Flex developers who are ridiculously smart and if they came together, would give the Flex framework a real run for their money.

Flex builder is partly to blame. Flex builder is by far the best development environment out there for Flash projects, and is geared towards Flex only, giving you the option to develop in Actionscript but not really allowing any kind of system to integrate third party libraries. In fact it took me a fair amount of googling to figure out how to use Flex builder to create an Air application without using Flex. Do you know how to do that ? Also the preview build for Flex Builder 4 (Gumbo) includes support for unit testing for Flex projects but not AS3 projects. WTF. Shouldn’t AS3 projects be the first priority and Flex just being an extension of that ?

Aptana's choice screen
IDEs like Aptana let you choose from various open source frameworks out there.

Given all this, as a developer community we need to come together. Flash and Actionscript need to go beyond Adobe. A community controlled branch would really help but I am not sure how the MPL license (under which Flex has been released) permits that kind of forking. Also, refactoring the Flex framework is a HUGE task. (anecdote: I had a conversation with the manager of the Philadelphia Flex User Group Derek Wischusen the other night who told me he had another WTF moment with Flex when he tried to use the Base64Decoder class in an AS3 project and ended up pulling the entire Flex framework since the class references ResourceManager that of course was tightly coupled with a huge part of Flex. Things like this should not be acceptable. ). If you are a Flex developer, evaluate other projects out there. If you see one that may have potential, get into it a little more, blog about it at least and contribute to it if possible. If you have an open source framework thats interesting, pimp it as much as you can and get feedback and encourage participation any way you can (and also leave a comment here, I am trying to take stock of actionscript frameworks out there).

What do you think ?

OpenPyro wiki updates, and plans going forward

I have been talking a bit around OpenPyro quite a bit in my recent blog posts but I wasn’t sure if the project was gaining traction until MAX SF this year where I actually had more than a few conversations around OpenPyro. Oh wow, that was awesome! But I realize we haven’t been doing a great job communicating progress or direction around this project, or gathering feedback. So I spent a few hours today writing up the Intro and the Development Themes pages on the OpenPyro wiki. Both are also linked off the main project page here.

Please take a few moments to read the pages. If you are interested in this project in any capacity (influence direction, mark bugs, request features or contribute code), please join the OpenPyro google group. To make it even simpler, I am including an inline subscription box here:

Google Groups
Subscribe to AS3 Pyro User Group
Email:

Visit this group

On our side we are going to be busy being even more transparent, by doing things like public code reviews (we use ReviewBoard within CIM and are going to have a public version of it soon).

OpenPyro is definitely a community project and if you have code that would benefit OpenPyro, we would love to include it in our code base.

Thanks and happy coding.

When terrorism hits home

Last night Mumbai suffered what some news reporters called the worst act of terrorism India has ever seen. Mumbai unfortunately, is no stranger to acts of terrorism but these attacks were of a completely different kind, the attackers definitely suicidal who just wanted to kill as many people as they could before they themselves were killed. Even after 24 hours, the drama still is not over with the security forces still trying to rescue people who have either been taken hostage or have been stranded locked up in their rooms.

I was glued to the NDTV live steam for most of the night and since I have woken up this morning, and on tracking the story on search.twitter.com as well as occasionally jumping to BBC news or CNN. My first emotion was anger. Mumbai was my home for a while and its still my favorite city in the world. And to see it virtually being held hostage by these loathsome assholes enraged me. My sentiments towards the government and the security forces were those of sympathy almost, they are trying their best arent they?

But I talked to my brother over chat then and another friend who also often visits Mumbai, and they were less so. The attacks in Mumbai weren’t unexpected, after the recent attacks in other big cities where Mumbai was conspicuously out of the list. Its the job of the government to keep its citizens safe, and it failed miserably this time. While the on site journalists kept insisting that the city will bounce back and take it in its stride, I really hope this wakes us up as a country and makes us ask some serious questions of ourselves and of the people we put into power to make sure things like this don’t happen. Its time we stopped being reactive and “politically correct” and just root the sources of such terror out. Lets stop taking the safe and conventional responses. Give the security agencies more rope and let them go after the core of the threats irrespective of political sensitivities. We need more supercops like KPS Gill

The drama still goes on in Mumbai but I hope this is a wake up call to us all.

Notes from Max 08

I got back from San Francisco this morning taking a couple of extra days at San Francisco to do some tourism. So I figured I’d put down what I had learned this year before the workweek clouded all that to a distant blur.
As usual, MAX was f-ing awesome. I have tried to make it to MAX every year since I graduated and joined the corporate workforce and Comcast has been pretty awesome about making sure I could do that on their dime. This year was no exception and most of the Flash team from CIM was there at MAX as Adobe showed of the cool stuff they have been working on.
My strategy for MAX this year was a little different than earlier. Traditionally I have tried to get deeper into technologies that I work with everyday. This year, with so many new ideas being shown at MAX, I decided to take sessions on the things that I did not work with between 9-5 and would be really easy for me to miss. I have to say it worked out pretty well.
Let me start off by saying: HOLY S**T, the Flash Platform is AWESOME and the pace at which its evolving is just incredible. Below are some of the best sessions I attended this year:

Using C++ Libraries in Flash Player and Adobe AIR
This was definitely one of the best sessions I attended at MAX this year. The session introduced Adobe’s Alchemy project that compiles C++ code to Actionscript bytecode that can be run on the Flash Player just as any bytecode compiled from AS3 code would. The project isn’t mature yet but some of the examples that were shown like ports of C++ OggVorbis codec, motion detection libraries, cryptographic libraries, etc were definitely impressive. I guess its time for me to brush up my C++ ;).

Hands On: Creating Effects with Pixel Bender
I think I got most excited during this lab. Pixel Bender, as a lot of you may know, is a technology that allows developers to write Shaders in a language called Hydra. Hydra is has a C-esque syntax but is really easy since you dont do really complicated logic in it, but rather simple pixel manipulation. These Shaders can then be applied at runtime to Flash DisplayObjects and also be used within Photoshop / AfterEffects as custom Shaders. I had read a bit about this before but the syntax and the prospect of having to learn another language was keeping me away from writing a custom Shader. However, it was really surprising how ridiculously easy this was. Hopefully I’ll write a couple of filters soon and release them on this blog.

Extending Flex Builder
Another awesome session, almost perfect for me. This session introduced the object model that the Flex/Actionscript plugin uses for all the language intelligence within the IDE. The session was really useful since I had a couple of ideas to extend Flex Builder but while I was able to learn about Eclipse itself, I had no knowledge of the details of Flex Builder plugin itself.

Hands On: Getting Started with AfterEffects CS4
Programmatic Animations in AfterEffects with Expressions and Scripting
On day 1, I attended part of the AfterEffects workshop in the morning. I have never worked with AE but have seen some designers I work with come up with some incredible stuff with it. The session was perfect since it taught me enough to now let me go play on my own. Unfortunately I had to get out of that session half way since I had to get to a meeting (yeah I was also working there) but the pace of the session was perfect.
On day 2, I attended another session on programmatic animation in AE. Since most of the animation I do in Flash in programmatic, this really made me map that knowledge to the AE domain. Between these two sessions, I think I really got a lot clearer understanding of AE than before.

Adobe XD: Designing Design
Adobe XD: Building a Next Generation News Reader
I loved the XD sessions. Seeing how they go around developing apps and how they make decisions around user interfaces is always interesting. The session where Jeremy Clark explained the process of developing the New York Times news reader application was particularly informative, where they even showed the process of prototyping interaction design, something I really feel all companies should do more of.

But more than the sessions, it was meeting other attendees that was just plain amazing. I had some amazing conversations around the future of LogBook and OpenPyro with quite a few people I have talked to on twitter and email but seeing them in person was very exciting. These were almost as educational as some of the sessions.

Max 08 was just amazing, and am definitely looking forward to Max 09 in LA.

Simple OpenPyro example with source: Image Viewer

Work on OpenPyro goes well, and I keep getting people asking me for examples of the framework in use. After receiving another request today on an OpenPyro example, I figured I’d write a quick widget and release it with the source. So check out this very simple Photo Browser app. The source can be found here. The application is simple on purpose but shows some parts I want to highlight. The widget is a List module on one side and an Image container inside another container on the other side. As you click on a list item, the source of the Image component changes. Here are some key parts of the code:

Measurement:
This of course is the main thing I worked on in OpenPyro. In the main class, the shell lays out a header and a PhotoModule component and a Spacer vertically using a VLayout object. The PhotoModule is sized by setting its percentWidth and percentHeight to 100, and the layout does the rest. Pretty sweet.
The List component within the PhotoModule class is sized similarly with a width of 200 and the ScrollPane is sized at 100% of the unused space.

List with custom renderer:
The List module implementation here is also an interesting example that shows how a List module can work with custom renderers. The code looks like:

[AS]
var list:List = new List();
var itemRendererFactory:ClassFactory = new ClassFactory(DefaultListRenderer)
itemRendererFactory.properties = { percentWidth:100,
height:30,
rollOutBackgroundPainter:new FillPainter(0x444444),
labelFormat:new TextFormat(“Arial”, 12, 0xffffff)}
list.itemRenderer = itemRendererFactory;
list.dataProvider = picData;
list.layout = new VLayout()
list.skin = new AuroraContainerSkin()
list.width = 250;

var listPainter:GradientFillPainter = new GradientFillPainter([0x222222, 0x111111])
listPainter.rotation = Math.PI/2

list.backgroundPainter = listPainter
list.percentHeight = 100;

addChild(list);

[/AS]

Automatic scrollbar creation on containers
The module on the right that shows the photo is basically just an Image control within a UIContainer. If you click on the Asterix photo, the photo is bigger than the container and the container automatically puts the scrollbars in. Its also important to realize that the only reason the photo became bigger than the containing UIContainer was because the image did not have a width,height assigned to it. In that case, all UIControls default into a child based measurement strategy and their sizes are determined by the children they contain.

Using BackgroundPainters
I love the backgroundPainter api on the basic control (UIControl). In one or two lines, you can set the entire look of a component. The code looks something like:

[AS]
var bgPainter:GradientFillPainter = new GradientFillPainter([0,0×333333]);
bgPainter.cornerRadius = 10;
bgPainter.rotation = Math.PI/2
shell.backgroundPainter = bgPainter;

[/AS]
If the shell in the above case resizes, the painter is re-triggered and repaints correctly.

FileSize
Once again the killer part of the framework is the file size. This example is about 21 K.

There is a lot of stuff here I am pretty proud of, but again, it still needs a lot of work. If you are interested in the project and are coming to MAX San Francisco this year, I would love to meet you. My twitter id is @arpit.

me

See you at Max

BarCampPhilly 2008: What a blast !

BarCamp Philly

This weekend Philadelphia was host to its first BarCamp event. For the uninitiated, BarCamp is an international network of user generated conferences รขโ‚ฌโ€ open, participatory workshop-events, whose content is provided by participants (wikipedia link here). Barcamp is described as an “unconference”, with the sessions being a lot more casual and more like conversations than presentations. Having been to a bunch of conferences before, I definitely found the organic nature of BarCamp rather refreshing. When I walked in at 8:15-ish in the morning, I had no plans of presenting anything but swept by the energy in the group, I ended up giving not one but two sessions (more on that later).

Working for Comcast, and pretty familiar with how it is most often a subject of blame than praise, the biggest surprise for me was how positively the attendees spoke of Comcast. For example, a session on ROI on social media was dominated by a discussion on the @comcastcares twitter account run by Frank Eliason from Comcast support. Always available a tweet away, Frank has been answering twitter users when they have Comcast related troubles. The conversation around how Comcast “gets it” was definitely new (kudos @comcastcares ๐Ÿ™‚ ). Comcast definitely had a strong showing at Barcamp this year, with a bunch of us attending as well as volunteering for the event. Aaron Held, the director of engineering at Comcast Interactive Media (the division I work for) gave a talk on building Comcast.net, a site that boasts being one of the top 10 portals on the web, to a packed room. Aaron and I also had a round table discussion about innovating within a corportation, and I personally got a lot out of that (I’ll post a blog post on that sometime later this week).

CIM @ BarCampPhilly2008: Innovation within

Also, continuing my agenda for a Flash-y world, I gave another talk on using Flash in an AJAX world, where I talked about where Flash had certain advantages over AJAX (besides the richer interfaces it enables). Kevin Fitzpatrick, another fellow Flash dev for CIM gave a talk on sharing your ideas early and leveraging the community to take an idea from concept to a product. Livia, another fellow Cimian (yes thats what we call ourselves now ๐Ÿ˜‰ ) from our IA group also gave a talk titled “Jedi Mind Tricks – mediating user, brand, technology & business goals through conversation” which unfortunately I missed as I forgot to check for new sessions on the schedule. Wonder if anyone took notes on that one.

After an intense day of a lot of fun sessions, the day ended at the always fantastic National Mechanics bar, which was made even more geek friendly with a hooked up Rock Band and (gasp!) an open bar! It was amazing.

Hats off to the BarCamp organizers Roz Duffy and JP Toto and the entire volunteer army. You guys did an amazing job. Here’s to a lot geekier Philadelphia :).

Oh and btw, one of the things I had to do was animate a wordle that the BarCamp peeps created. This ran on a couple of big screen displays at the conference. I am attaching it here for posterity and the source can be found here.

https://arpitonline.com/barcamp/wordle.swf

Aha, so I am not crazy! Choose Flash for portable apps. Yahoo says so.

For as long as I have been a Flash developer, I have been completely addicted to it. And its only getting better with age. But off late, a lot of people have been eager to prophesize the death of Flash (usually siting poor Flash implementations as reasons). However there are certain features (not counting the wow effect) in Flash that make it a good choice for certain implementations. For one thing Flash Player (esp greater than 9 which 98% of the users now have) is much faster in processing data than javascript, especially on older browsers. Another reason is that a self contained swf file is a lot more portable when moving from one environment to another. In today’s world of Facebook widgets, OpenSocial containers, etc etc, deploying a swf is a lot easier than packaging a suite of javascript files. Actually a lot of those containers won’t even let you deploy JS on their servers and force you either to use an html extension like FBML or use an IFrame (and again there are limitations set on where those can appear on the sites). So it was really heartening to see that officially be posted on the Yahoo Developer Networks blog by Jonathan LeBlanc, Senior Software Engineer / Technology Evangelist from Yahoo. So do give it a read and use that as ammo if you are in another one of the “Why Flash” conversations.

The post can be found here.

Also take a look at the Yahoo Open Strategy (Y!OS)’s Flash SDK here (Yahoo has only released a Flash and a PHP SDK).

Go Flash !

Mixing up OpenPyro and Facebook: FacebookTV

For the last couple of weeks, I have been working quite a bit more on OpenPyro. Writing a new UI framwork in a vaccum almost never works, so I needed an app to build using OpenPyro. I had some Facebook API code handy so I figured I’d try something with that. So here is a screencast of the app as it is right now. The application uses Facebook’s desktop api to get all the friends of a user and their favorite TV and Movies. Then I group the shows/movies together to see what the most popular of them are and sort them with the most popular ones at top. The data is rendered in an OpenPyro chart component. The TV and Movies are in two different Horizontal Chart components and sit inside an OpenPyro container called SlidePane. SlidePane extends the OpenPyro ViewStack (which is very similar to the Flex ViewStack) and automatically handles sliding between different views (each being an OpenPyro UIContainer). Clicking on an entity does a show/movie lookup from Fancast.com, and also lists who among your friends have added the show/movie as their favorite. The BarChart below is segments those friends by gender or by relationship status ( I have to say, the Facebook API is pretty rocking, and I can segment the data on a variety of axes. )

Here is the awesome-est image of it all:

FacebookTV filesize

Yup. The whole sucker is about 60K. And that includes Labels, Buttons, Lists, ComboBoxes, Layouts, Painters, Containers, etc etc.

So here is the show:

http://content.screencast.com/users/arpit_mathur/folders/Jing/media/4fdecbce-0ed3-44ea-9394-24f06dce5770/bootstrap.swf

OpenPyro is still not ready for a general release yet, but its coming along pretty sweetly.

Comments welcome.

The great AS3/AS2 debate: Is it slower to work with AS3 than AS2? My take: A bit

Mike Chambers, Principal Product Manager for developer relations from Adobe, has been pinging the Flash community about whether AS2 based development is faster than AS3 for Flash projects. Having spent a long time in both languages, I thought I would post my 2 cents on this blog. So my answer is: Yes. Of course I’ll qualify my statement by saying that 1) There are a lot of capabilities in Flash 9+ that are amazing but I want to disconnect the language (pure syntax) from what it enables and 2) This post assumes you are as comfortable with AS3 as AS2. I am not factoring in the learning curve for a new language, which happens anytime there is a drastic change.

AS3 can use some help. Let me list out some reasons why I say that:

  1. Loading XML is a complete pain
  2. Calling an external URL is AS2 was simple (although having to use delegate because of the lack of proper closures was retarded). The code was something like this:
    [AS]
    var xml:XML = new XML()
    xml.ignoreWhite = true;
    xml.onLoad = function(success){
    if(success){}
    else{}
    }
    xml.load(‘doc.xml?foo=bar’)
    [/AS]

    Very readable, plus all errors were available in one check. Lets compare that to AS3:

    [AS]
    XML.ignoreWhite = true;
    var urlLoader:URLLoader = new URLLoader()
    var urlRequest = new URLRequest(‘doc.xml’)
    var urlVariables = new URLVariables()
    urlVariables.foo = bar
    urlRequest.data = urlVariables
    loader.addEventListener(IOErrorEvent.IOError, onError)
    loader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, onError);
    loader.addEventListener(Event.COMPLETE, onComplete)
    urlLoader.load(urlRequest)

    [/AS]

    How verbose is that? I am still trying to figure out why every request needs a URLRequest object, seems unnecessary. just calling urlLoader.load(“data.xml”) could automatically create a URLRequest object, if you ever want to examine a request post it being called. Another huge problem is most developers I know dont actually add the error event listeners, just cause adding it is so tiresome. So when an error occurs later, they are usually clueless to what happened (was it a code bug or did some http call out just did not work?).

    The URLRequest param for navigateToURL seems another one of those requirements that seem unnecessary.

  3. Whoops, forgot my addChild
  4. I think this is where I have lost countless hours, I would create a sprite, and set its properties, but forget to add it to the stage…and then spend too much time to figure out what did I do wrong. The only way to create a new UI element in AS2 was by referencing an already added MovieClip (remember my_mc.createEmptyMovieClip() ?). I would love to have a createAndAdd function in DisplayObjects that becomes the default way of creating new Sprites.

  5. Dynamic drawing: The graphics object
  6. Drawing in AS2 was simpler: MovieClip.lineTo(….). In AS3 it has to be on the graphics context of the DisplayObject (mySprite.graphics.lineTo() ), but why? There isnt any other context to draw on, and the graphics context isnt swappable, so why do I have to type that in?

  7. No numeric depths
  8. In AS2, you could set explicit depth numbers to elements and reorder elements under those depths. So for example, if you were writing a button control, you could set the label field up on depth 1000 and keep swapping out the children under it. In AS2, you have to track where in the display tree your element is.

  9. useHandCursor vs ButtonMode + useHandCursor
  10. I dont know what buttonMode does besides actually allow me to useHandCursor property, which I have to set anyway

  11. No onReleaseOutside
  12. This one also is weird. The way we now have to do an onReleaseOutside is via listening to a stage click event. But wait, you may not be on stage yet, so you need to check : if(stage), and also write an event listener to the addedToStage event. Verbose.

  13. addEventListener vs. onRelease
  14. onRelease (and similar “on…” functions) is not a bad default hook to have. Considering how often we write these functions, having a quick shortcut to the action was nice. Not that I am saying the event model is bad, but I end up writing a lot of addEventListeners and removeEventListener throughout the code.

I think overall, when I look at an AS3 file, it just seems longer than AS2 code used to. I think everything needs to be very explicitly set in AS3 with no smart defaults. Maybe that’ll change in AS4 now that we no longer care for the ECMA spec ;). There are a lot of improvements in AS3 as well though, like actually having private and protected namespaces, but I am only listing out my pet peeves here hoping Mike takes note :). Flash is an amazing platform, and I love what it enables me to do.