Harish Sivaramakrishnan

I have been and am a huge fan of Adobe Flex as a technology to build great experiences for the web. The FlexStore app was a great example of how we can change the experience around a common use case like an online shopping website. This app was built sometime around 2005 (if I remember right) to showcase the capabilities of Flex 2.0 framework. 7 years down, with web standards making quantum leaps in providing great experiences, we could now build a similar experience without flash or flex.

I just started out writing my own port of this app using web standards and here’s an early prototype of what I could do. I spent about a couple of days to get this far, which is super encouraging. I am using a combination of JavaScript and CSS animations to get the transitions working and some jQuery to get the drag and drop going. I have also tried to replicate most of the UI elements the same way as the Flex application with some exceptions.Mind you,  this is a very early prototype and is very much in work in progress mode. I have made the source code available in my github – if you feel you can add some features / fix some of the issues, please feel free to fork the branch.

I will be spending time in adding features and fixes to this as well, but not at a very quick rate.  You can experience the demo here. Here is a small summary of what works. Read the bullets below or watch the video

The stuff that works

1. Move the slider to filter the items.
2. Click the “triband” check box to filter on triband
3. Drag and drop items to compare bin
4. Drag and drop items to shopping cart
5. Use the select box and choose “2000″ as the series to filter
6. Click the “search” or the “cart”  icons to see the sliding animation

The stuff that doesn’t work (yet)

1. Dragging the slider violently with the intent of breaking the demo.
2. Combination of filtering is buggy.
3. Price calculation based on items in shopping cart.
4. Any other combination  that is untested.

Update: The code is now available on github - https://github.com/hsivaramx/zeitgeistexpt

My escapades with the google zeitgeist application continues. This time around, I wanted to implement the visualization that they have in the “top 10 Lists” section. This one has this nice pseudo 3D feel, with some really nice animated transitions. The earlier example that I implemented was Canvas based – hence, I wanted to try building this entirely using the HTML dom.

The approach

Step 1 – Plot the column chart in the 2D space to fake a 3D like appearance. As you’d see in the demo, a lot of the 3D perception comes from the fact that the base of the chart is a graphic with a 3D perception. So is the chart column items. Once the coordinate mapping is done on the 2D plane, simply drawing <DIV> elements into their appropriate positions will get right appearance.

Step 2 – The column chart graphic is actually a texture (Observe carefully and you can see that.) That would be a near blocker if you are choosing a Canvas based approach as Canvas treats anything drawn to it as a bitmap and the scaling would just not work. Since I chose to use a DOM based approach, I created a css class with the image as its background and set the background-repeat property to repeat-y. Once that’s done, if you increase the height of the individual <DIV> the background will grow appropriately.

Step 3 – Getting the base and the top of the chart to align and animate as we interact with the chart was the next step – This was super easy. I simply added 2 images, the bottom and top and aligned them to bottom and top. since the blue top has to always sit over the bar chart, the top would be aligned at about -3px. (in case you cared about the detail.

Step 4 – Adding a slider to the chart, which we will use to interact with the visualization. I spent quite sometime figuring out ways to style a <input type=”range”> using CSS and that’s when I chanced upon JQuery tools. This one had a nice, customizable range component that I chose to use directly. This one also comes with a reference stylesheet which you can tweak to get the appearance that you’d like.

Step 5 – Adding a ribbon that highlights the current selected columns was the last step. Again, the ribbon is a graphic that already has a pseudo 3D perspective. All I needed to do was to position it and move it based on where the slider position was.

Demo – Take a look at the demo here. Note: It is tested only on webkit based browsers (Chrome & Safari). The slider uses mouse events, hence the slider wouldn’t work if you load up the demo on a mobile phone / tablet.

Next steps:  Adding touch events to the slider, so that this could work pretty well on a tablet device. Due to the very nature of the visualization, I am unsure as to how it would look and how usable it’d be on a phone form factor, even if it would load and work.

Please feel free to right-click and view source, until I get this on to my github page – hopefully by end of this week

Update: The code is now available on github - https://github.com/hsivaramx/zeitgeistexpt

Most of you would have seen the Google Zeitgeist 2011 app. if you haven’t, check it here. This one has some of the most gorgeous looking visualizations I have seen in recent times and its almost flash like, but built in HTML, CSS and JavaScript.

The Motivation

I was blown away by the fit and finish, performance and the interaction model on the charts and decided to take a stab at implementing one of these visualizations from scratch.I picked the volume chart visualization (find that under the section “The Data” in the zeistgeist app).

The Result

The Approach

I had the option of building it using simple <div> s or go with a Canvas based approach. I chose the latter, purely because I love programming for drawing surfaces, thanks to my several years of experience developing for flash. I decided to use Easel.js – a brilliant library for programming canvas based applications. I also sprinkled in some CSS based animations for the text and background animations.

The Impementation

The visualization uses a nice graphic to show the chart columns. Since this application has the chart items growing in size and animating, it was important to get the right graphic to get the effect right. I took the graphic and spliced it not three parts – the bottom, the top and the scaling bit. While drawing the chart based on the plot data, the scaling bit would grow to match the coordinates and the top would then position itself on top of this. (An alternate approach would have been to just use <div>s and set the background-repeat property to repeat-y) Since I was using a Canvas based approach, this seemed a workable solution. The line chart and the plot overlay is done in a similar way, and easel.js gives you a very easy abstraction to draw lines on a canvas.

The Demo

You can experience the demo here. It has been tested only for webkit browsers (Chrome and Safari on a Mac to be exact.) The demo uses randomly generated data to plot the charts. You can click the red arrows to move left / right – each creating a new random data set and populating the chart.

Next Steps

I am working on getting a mobile / tablet version with touch events. I should be up with it in a day or two and will post it here.

Phew, one more spectacular year as an evangelist at Adobe comes to a close. As always, it was fantastic in many, many ways and gave me an opportunity to do some really awesome stuff. Spoke at more than a dozen big conferences including our very own Adobe Flash Platform Summit, met some really amazing developers around Adobe technologies and worked on some really amazing applications for partners that are continuosly pushing the envelope with Adobe technologies. As always, that’s what I love the most about my job.

2011 is also the year that brought about significant changes to the technology landscape with some phenomenal inventions. Going by the spirit of it, I am extremely excited to be starting a new chapter to my life as an Adobe evangelist. I spent the last 4 years evangelizing Adobe Flash Platform, Adobe Flex and Adobe AIR. Off late, I also spent significant amount of time speaking about web standards, HTML5, CSS3, JavaScript and a lot more around open web. Starting 2012, I will be increasing my focus around web standards. I also have the pleasure and honor of working in a team filled with rockstars – Kevin Hoyt, Mihai Corlan, Ryan Stewart, Terry Ryan and Ray Camden. Would this mean I’d stop writing about Flash & Flex? – No. Adobe Flash Platform is a technology that I love and I will continue writing stuff around it.

Thanks once again for dropping by! Wish you all a very happy and fun filled holiday season!

I have been wanting to do this for quite sometime now. I started tech blogging somewhere back in 2007 with the nick flexgeek, inspired by Adobe Flex – a technology that I love truly, completely. I also had a personal blog mostly focusing on my music, life and other general off topic rants. I wanted to bring both these blogs under a single web address and hence this new blog, hsivaram.com. This will be my primary blog henceforth – I have migrated all the posts from my previous blog and I will be redirecting all visits to that blog to here.

I haven’t been super active in blogging for quite sometime, but all that is going to change now. I am back to active blogging with increased focus on all web technologies and not just Adobe Flex. Please take a moment to bookmark this web address and thanks again for dropping by.

I had written a small proof of concept of building a gantt (like) chart using Advanced DataGrid component that shipped with Flex 3. The blog post with the source code happens to be one of the most popular posts in my blog. Folks keep writing to me asking for more details on the component. I haven’t really been able to keep that project alive, purely for want of time as I got busy traveling. Just yesterday, I was doing some Flex 4 hacking for my talk at the upcoming Adobe Flash Platform Summit in Bangalore and thought if I could re-write this component in Flex 4. I spent about 6 hours writing this and I got my first version of the Flex 4 gantt chart working. Doing this in Flex 4 is insanely easy and the folks at Ilog have done a fabulous job re writing their gantt chart component in Flex 4. Click here or on the screen shot to see a small demo. Please note that the demo is view source enabled, you can download the source code as well [Just right click on the demo and view source] or, just click here to view source

This is just a prototype and doesn’t handle all the cases that a standard gantt chart should be handling. I would strongly recommend testing the code thoroughly before you start using it in production (if you are planning to, that is) I am unsure how much time I will be able to spend taking this project forward. I have opensourced this one under MPL, feel free to take the code and do more stuff as you guys deem appropriate. Please note that this is a resultant of a few hours of careless hacking , I am sure this has a lot of bugs too. I plan to set up a GitHub project for  the same, just thought I’d post it anyways.

It feels like yesterday, doesn’t it? It does, at least for me! I remember  sitting in the library of the Macromedia India office in Bangalore on the 2nd of June 2005 waiting for my interviews for a position in the Macromedia Flex SDK Quality Engineering team. I still remember waiting for that one call from Macromedia till it happened on the 6th of June, confirming my appointment at Macromedia! The dream job – in all respects! I have been working on Flash from the first year of my undergrad days (back in 1998) and Macromedia indeed was my ultimate destination. And here it was! I was now going to start working in the company that makes flash! I now have an opportunity to work for a new product that was going to change the landscape of rich internet applications – When I think about it, I still can feel all the emotions that I went through – a combination of excitement, happiness, nervousness – It was that kind of an unexplainable feeling! Yes, I am getting emotional, but that’s exactly how I feel!

And boy, what a great 5 years this has been! I had the great fortune of working on some really amazing features on the Flex 2.0, 2.0.1 & 3.0 releases! I also had an incredible time working in the Adobe Media Player team implementing the DRM features for the 1.0 release. The year 2008 was a significant turning point in my life – I was offered a position in the India Platform Evangelism team. This is the job where I get a chance to travel the breadth and depth of India spreading the love for Adobe Flash platform, I will be working with some of the best minds in Adobe Flash Platform in India in the community – Now, how many people get to do something as cool as this!

This post is incomplete without thanking  a few very important people – Arul Prasad for referring me to Macromedia, Lauren Park & Ram Krishnaiyer for hiring me in Macromedia, Ananth & Arijit for offering me a position in the Evangelism team, Raghu, my partner in crime in both the QE and Evangelism roles, Ramesh for his guidance & support and the whole of India Evangelism team, the best team in the world!

My job couldn’t be more exciting than it is today – With the release of Flash Builder 4, Flex 4, Flash Catalyst and with Flash Player and AIR running in all major devices – there can’t be a better job than evangelizing the Adobe Flash Platform! Here’s is looking forward to great times ahead working for the best company in the world!

Cheers!

Have been hearing a lot of discussions and arguments about how HTML5 is going to replace (kill!) flash in the near future. And no, this blog post is not about which technology is going to replace or kill which one! I have been a flash developer for quite a long time now and I love the stuff that I can do with Flash and ActionScript. As a developer who cares about technology, I like to experiment with new technologies and try to see how they interoperate.

This blog is the result of a small experiment that I did with the HTML5 datastore API. I wrote up a very simple ActionScript + JavaScript library that would enable developers to make their flex applications work offline in browsers that support HTML5 datastore APIs. The API will now let you use SQL statements (as of now, CREATE, SELECT, INSERT, DELETE & UPDATE) within your actionscript / flash / flex applications.

Check out a demo here . The demo creates a database “SampleDB”. You can perform basic operations using SQL statements that can be previewed live in this application. I have tested this application on Safari & Chrome. If you find issues, please do send me an email and I would take a look at it!

Tested browsers: Google Chrome 5.0.375.55 and Safari 3.2.3

You can download the source files of this experiment from here. If you want to see the demo in action from your own system, download the demo assets from here. Just unzip the contents and paste it in the webroot of your webserver and run.

Incase, you are wondering what SQL statements to try out, you could use the following to start with.

NOTE: The API supports prepared statements, but the demo doesn’t (blame it on my laziness). If you want to try out using prepared statements, download the source files and try out by making your own flex app.

The video of my talk on User Experience at TEDxPilani is now live on you tube.