This is what a successful platform launch looks like

… pity it had to happen as a result of a liquidation sale.

WebOS looks to be on it’s last legs, and HP has announced that it’ll never make new WebOS hardware. In the meantime, the fire sale of TouchPads has done fantastic things for us WebOS developers. The image below is a graph of the Flickr Mundo HD sales for 2011.

If only HP had anything resembling courage, rather than wimping out with the revelation that “Competition is hard? What? No one told me! Run away!!”, this sales trend might have actually continued for a long time.

Ah well, I’ll enjoy it while it lasts!

Unpacking webOS .ipk files on a Mac

Quick tip: For some reason, the archive files that webOS uses as application installers are very awkward to extract on a Mac. It’s simple on Windows.

After a little digging, I found a handy script at
http://forums.precentral.net/webos-development/235149-extract-build-ipkg-mac-osx.html
that does the trick.

HP Enyo talk from the London Ajax conference

I really enjoyed talking about HP Enyo at the London Ajax groups conference on July 2nd.  People were genuinely interested, and hopefully will take a closer look at the framework, which I find great to develop HTML5 apps with.

You can view the talk below [source]

The slides are embedded below.

Thanks to Dylan from SitePen for organising everything and RIM for sponsoring the event.

Come hear about HP Enyo at the London Ajax event

I’m very happy to have been invite to speak at the London Ajax event on July 2nd, 2011 –
http://londonajax.com
/ .  I’ll be giving a talk about the new HP Enyo framework, and how you can use it to develop HTML 5 apps.

 

Sweep line Voronoi algorithm in JavaScript

Years ago I translated Steven Fortune’s sweep line Voronoi algorithm to C++, and have been meaning to make a JavaScript version for some time, but never got around to it.

Now, someone has actually done it with the D3 charting library, and it’s fantastic.  Check it out at
http://mbostock.github.com/d3/ex/voronoi.html

Quick canvas effect prototyping

I’m doing some playing around with image processing on HTML5 Canvas elements, and so I’ve hacked together a simple page for prototyping different algorithms. Check it out
http://chofter.com/EffectPrototyping
.

The code abstracts away most of the complexities of working with Canvas elements, and just lets you get down to what you need: your pixel manipulation algorithms.  It provides a number of test images and examples to get you started, so have fun!

Oh and yes, it’s pretty ugly

Palm and the Mobile Expressionists

Palm/HP have a new advertising campaign aimed at getting app developers all excited, and I was very happy to be a part of it.  Here’s hoping it helps give webOS the kick it needs to show developers how simple and fun it is to develop for.

Using Flickr Mundo to make your webOS app better

If you are a webOS developer with an interest in Flickr, you can now greatly improve your users experience by integrating your app with Flickr Mundo. (thanks to @rparvez for the idea to integrate with @neato_webos)

I’ve added the ability for other webOS apps to launch Flickr Mundo with a Flickr URL.  This gives a far better experience to the user than simply loading Flickr in the browser – they’ve already purchased the app, it is built natively for webOS and can do many things that the web interface cannot.

For example, loading the link

• 
  http://flickr.com/photos/shaneosullivan
  will open the user ‘shaneosullivan’
• 
  http://flickr.com/groups/palmpre
  will open the ‘palmpre’ group
• 
  http://www.flickr.com/search/?q=tree
  will do a search for photos on Flickr

Many different patterns of Flickr URLs are supported.  However if you pass a URL that is not supported, Flickr Mundo will simply launch the browser at that URL.

To make this work just takes a few lines of code.  From within any Mojo scene assistant, simply use the followinf JavaScript code:

var url = "http://flickr.com/upload";
this.controller.serviceRequest("palm://com.palm.applicationManager", {
  method: 'open',
  parameters: {
    id: 'com.chofter.flickrmundo',
    params: {
      target: url
    }
  }
});


As you can see, you can even upload photos to Flickr using this method. So if you have some kind of photo app, would like to be able to upload to Flickr but don’t want to have to go to all the trouble of correctly authenticating a user, you can just use Flickr Mundo to do it for you.

The version of Flickr Mundo with this included, v1.4.0, was submitted for review today, Nov 14th 2010, and should hopefully be available for download in a couple of days. Many different URL patterns are supported, but if you find one that isn’t, please let me know and I’ll look into adding it.

A future version will also include the ability to specify the file to upload – v1.4.0 asks the user to pick the file, similar to the stock Photos app on webOS.

Flickr Mundo for Palm webOS

I am very happy to announce the release of Flickr Mundo, a fully featured Flickr app for Palm webOS devices.  It is packed full of pretty much everything that a Flickr addict could possibly want, including:

• Photo upload and download, with multiple simultaneous supported for both.
• Read & add comments to photos and photo sets
• Add/remove favourites
• Bulk editing, e.g. choose 6 photos and add tags to them all in one go, add/remove them from a set or group, add/remove person tags…. and much more.
• A great browsing experience, jump from one user to another,  open photo sets, groups and galleries.  Swipe from photo to photo.
• Auto rotated wallpapers.   All the functionality from my other app Flickr Addict is included in Flickr Mundo.  Automatically download images in the background based on many different criteria and change the phone wallpaper on a schedule chosen by you.  No more boring backgrounds!
• Context sensitive ‘Just Type’ search.  Wherever you are in the app, either hit the search icon or just start typing to search Flickr.  If you’re looking at a user, you can choose to just search that user. If looking at a photo group, you can search just that group.
• Group search, find a photo group.
• Location based search.  Find photos near you using GPS, or search for photos close to anywhere else you name.
• Fullscreen slideshows with an optional audio playlist for playing music while watching your photos.

and much, much more, all wrapped in a highly polished UI that maximises the space of a small screen to the best effect.

A special thank you goes out to Jake and all the guys on the Palm Pre group on Flickr who did huge amounts of user testing on the beta version of the app. They spotted many obscure bugs, and made many suggestions for features and tweaks, most of which have ended up in the app.  Without them Flickr Mundo wouldn’t be anywhere near as complete, functional and fun as it is.

Flickr Mundo will be submitted to the Palm App Catalog in the next 24 hours, and should be available to everyone as soon as Palm approves it!

Update: Flickr Mundo has now been submitted to the App Catalog

Dojo gets a speed boost on IE6 and IE7

My former employer, Cúram Software, was good enough to give me a couple of months to work on the performance issues that Dojo and it’s widget project Dijit have in horrible legacy browsers IE6 and IE7.  Some of the fruits of that labour have now been checked into the code base and will be included in Dojo 1.6, out in Q4 2010.

So what I/we learned from the exercise?

DynaTrace rocks!

To begin with, I can’t praise DynaTrace enough.  It’s a fantastic piece of profiling software that delves deep into Internet Explorer’s innards to find every little horrible Microsoft bug.  It can take a while to get used to, but that is just because it presents you with so much data, all of it useful, and anyone would have trouble finding a way to make it easily consumable.  Long story short, if you’re having performance issues with your site in IE, download DynaTrace.

Touching className makes IE cry

Pretty much every time you change the className property of a node, IE6 and IE7 reflow the page.  It doesn’t matter if the new value is the same as the old one, or whether or not the changed CSS class has any visual effect, IE will redraw the page, resulting in a lot of time being lost.

Dojo was changing className too often, for example in dojo.addClass, if the class being added was already present, it would still assign the changed value to className.  I put a fix for this into v1.5.  There were also many cases where Dojo would use a combination of dojo.removeClass and dojo.addClass to replace a class, which changed className twice instead of just once.  To fix this, I’ve added a new public api dojo.replaceClass, which only changes className once.

Dijit widgets often add CSS classes to the DOM nodes which they are creating after the nodes have been inserted into the document.  This is costly, and a large performance improvement can be gained by applying these classes earlier in the lifecycle, before inserting into the document.  Bill Keese (Dijit master) checked in the first of the fixes for this for the BorderContainer recently, and a strategy is being formulated for the many other widgets that can benefit from this.  This work should be completed for v1.6.

Risky but…..

A solution that we cannot use for Dojo, but which we found gave huge performance gains for my company’s application, was to figure out what CSS classes Dojo would apply to a node and write those classes out when generating the HTML.  For example, when creating a dijit.layout.BorderContainer, our HTML contains the CSS class dijitBorderContainer.  There is an inherent risk with this approach, as Dojo may change the CSS classes in a later release, but if you’re willing to accept the risk and the upgrade pain, you can get a nice performance boost this way.

Reading offsetLeft and offsetTop is costly

When your code reads the offsetLeft or offsetTop of a node, all pending changes to the DOM have to be performed first.  This can be very expensive – we saw a number of single operations taking over 500ms each!  Many Dijits were using the dojo.marginBox method to get the left, top, width and height properties of a node, when all they needed was the width and height.

To solve this, I introduced a new method, dojo._getMarginSize, a private method that just returns the width and height of a node.  This has resulted in huge gains in performance on IE6 & 7, especially when used with layout widgets like the BorderContainer.

Unexplained gaps in DynaTrace profiles

We hit a bit of a wall at one point when analysing the performance profiles, where there was a 1.5 second gap in the profile where it seemed like nothing was happening, but everything was paused with the CPU at 100%.

We eventually discovered that there is a horrible bug in IE7 where if you have a :hover style on something that is not an anchor tag, it causes the rendering engine to go crazy, get all confused, and push the CPU up to 100% for no reason at all.

The solution: don’t user :hover styles on anything other than <a> tags.  Ridiculous I know, but so is the IE7 rendering engine.

Give it a go!

So, the long and short of it is that Dojo/Dijit should now be a good bit snappier on IE6 and 7.  With our application we got the load time for a huge application down from 20 seconds to 5 seconds using these techniques, making IE7 far, far more usable.  Of course it just flies on any other browser, even IE8 which, all credit to MS for once, is far less buggy than the earlier incarnations.

So feel free to try out the Dojo nightlies, you should find them to be a good bit more responsive in IE6 and 7 than just a few days ago, and now that we have learned some important lessons, Dojo will be even faster for v1.6.