SOS

Shane O'Sullivan's technical blog… really ties the room together

Archive for the ‘Ajax’ Category

HP Enyo talk from the London Ajax conference

Posted by Shane O'Sullivan on July 3, 2011

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.

Posted in Ajax, enyo, Palm | 3 Comments »

Come hear about HP Enyo at the London Ajax event

Posted by Shane O'Sullivan on June 30, 2011

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.

 

Posted in Ajax, enyo | Leave a Comment »

Using Flickr Mundo to make your webOS app better

Posted by Shane O'Sullivan on November 14, 2010

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

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.

Posted in Ajax, apps, Flickr, Flickr Mundo, Javascript, Palm, WebOS | 3 Comments »

Flickr Mundo for Palm webOS

Posted by Shane O'Sullivan on September 5, 2010

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

Posted in Ajax, Flickr, Flickr Addict, Flickr Mundo, Javascript, json, mobile, Palm, Technical, wallpaper, WebOS | 62 Comments »

Dojo gets a speed boost on IE6 and IE7

Posted by Shane O'Sullivan on August 28, 2010

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.

Posted in Ajax, dijit, Dojo, Javascript, open source, performance, Technical | 9 Comments »

Use YQL to cache your queries

Posted by Shane O'Sullivan on August 5, 2010

Quick tip: For faster access to remote data, you can’t beat using Yahoo’s YQL to cache your data.  See HERE to read more on this.

When accessing data from remote services, e.g. Flickr, often the data won’t change too frequently.  Some data can also be very expensive to generate, and services forbid you from polling it on a regular basis.  For example, a device is not allowed to retrieve the latest activity on a users Flickr account more than once per hour.

You could roll your own solution to this problem, store the data locally and check its timestamp.  However, this is a lot of work for something that can be so much simpler.

Simply access the XML or JSON data using the Yahoo Query Language, and set the _maxage parameter to the length of time you want to cache the data for.  And you’re done.  Yahoo will cache the data for you, refresh it when the specified time elapses, and serve it to you faster than the original query since it doesn’t have to calculate anything.

Also, the service provider will be happier as you’re not hitting their server so often for duplicate data.

Posted in Ajax, Flickr, Javascript, json, mobile, Technical | Leave a Comment »

Dojo’s mobile widgets coming along nicely

Posted by Shane O'Sullivan on June 22, 2010

I’ve been working a lot on Dojo’s new mobile framework (see HERE for my intro post on dojox.mobile.app) and the Image widgets are coming along very nicely.  I just checked in a new Thumbnail viewer, and enhanced the ImageView widget.  Check them both out at http://bit.ly/cU3akI.

Click the “Browse Flickr” selection to see both images integrated with Flickr, as well as a dynamic group search view using the TextInput and List widgets.  Given that these widgets use cool fancy HTML5 effects, you’re best off viewing them in a WebKit browser, so Safari, Chrome, webOS, iPhoneOS (iOS now I guess) will give you the best experience.

The ImageThumbView uses CSS3 transforms to position the thumbnail images, and animates the opacity with CSS3 to fade in/out images. 

Posted in Ajax, Dojo, dojox, Javascript, mobile, open source, Palm, Technical, WebOS | 4 Comments »

Dojo’s new Mobile App Project

Posted by Shane O'Sullivan on June 13, 2010

Dojo v1.5, which should be released in the coming weeks, will contain an early beta of a new infrastructure for building Mobile Apps.  Currently it is called dojox.mobile.app, but that is expected to change.  Check out the test apps (the bottom section) at http://www.skynet.ie/~sos/misc/dojoxMobile/tests/dojox/mobile/tests , which work best in WebKit, so use Safari or Chrome for best results.

Jared Jurkiewicz and Yoshiroh Kamiyama recently added the dojox.mobile project.  It provides some very nice widgets for use on mobile phones, such as views that can transition between each other, rounded lists, tab containers etc.

However, the focus of dojox.mobile is to be very small, so as to suit websites formatted for mobile devices.  When writing cross device apps that are hosted on a phone, the size of the JavaScript is less of a concern, so a much more powerful experience can be created.

Hence, dojox.mobile.app is born.

It is built on top of dojox.mobile, but adds many new features, with more on the way.

  • Templated views that can be pushed and popped off the stack of views, all of which are lazily loaded.
  • Templated lists
  • Input widgets
  • Image Gallery
  • Dialog Boxes
  • Popup Menus

are all available now.  The structure of a dojox.mobile.app application is modeled very closely to a webOS app.  The templates and code are in a similar folder structure, and the lifecycle for creating and destroying (popping) scenes/views are very similar.

The goal of dojox.mobile.app is NOT to replace or duplicate the functionality in PhoneGap.  PhoneGap provides low level access to many phone features. dojox.mobile.app aims to provide an easy to use, flexible application structure, and many widgets that you will find useful, all themed to appear native to each platform.  In a real world app, it would make most sense to use both PhoneGap and dojox.mobile.app.

One of the cooler widgets currently available is the ImageView widget, check it out at http://www.skynet.ie/~sos/misc/dojoxMobile/tests/dojox/mobile/tests/imageControlsApp .  Some of its features include

  • Canvas based
  • Touch capable
  • Swipe across to change images
  • Tap to zoom in, and then swipe to move around an image
  • Progressive loading of images – first load a small version of an image, and later a larger version

dojox.mobile.app is currently tested mostly on the iPhone, but will soon support webOS and Android also.  The mobile world is an exciting place to be right now, and Dojo is jumping in feet first ;-)

Posted in Ajax, demo, dojox, Flickr, Image Gallery, Javascript, mobile, open source, Palm, Technical, templating, WebOS | 7 Comments »

Using Yahoo Query Language (YQL) to count XML elements

Posted by Shane O'Sullivan on April 19, 2010

A quick little YQL tip. I recently had the need to count the number of items in an RSS feed, but without downloading the feed itself as the application is bandwidth sensitive.  So I figured I’d use the Yahoo Query Language, which lets you define SQL queries for accessing all kinds of public data on the web, including of course RSS and Atom feeds.

However it’s implementation of the SQL count() function seems to be buggy, as you can’t simply do

select count(*) from xml where url=”http://path/To/Rss.xml&#8221; and and itemPath=”/rss/channel/item”

as it throws and error.  Putting “item” in the count() doesn’t work either.  However, if you try to select the text inside an element, it just returns a single text value, but you still get the count of rows returned, e.g.

select * from xml where url=”http://path/To/Rss.xml&#8221; and itemPath=”/rss/channel/item/title/text()”

returns JSON that looks like

cbfunc({
 "query": {
  "count": "233",
  "created": "2010-04-19T10:50:42Z",
  "lang": "en-US",
  "results": "5 stars by Anonymous on February 26, 2010"
 }
});

meaning you save a huge amount of bandwidth but still can get the count of the items in the RSS stream. Check out an example HERE, just press the Test button. Cool huh?

Posted in Ajax, Javascript, json, yql | 3 Comments »

My webOS Apps goes live, gets a big update

Posted by Shane O'Sullivan on March 14, 2010

My webOS Apps, the great tool I’ve written for webOS developers, is now available in the Palm App Catalog.  See my previous post about it here.

Using My webOS Apps a developer for webOS can

  • Keep track of their app download count.  That’s the real download count, not the inaccurate number shown in the Palm feeds which include updates.  You can also see how many apps were downloaded both today and this month, as well as your average download count and your best days download count for each app.
  • See each apps user ratings
  • Read the comments on each app
  • See your downloads for each app in graph form.  Three chart types are supported, line, column and area.  You can graph the downloads per day, by week or month.
  • View a timeline of events for one app or all apps.  This shows what happened to an app by date, from submission through to being accepted and published.
  • Tweet about your apps directly from the app.
  • Auto-Tweet when an app is published.  Set up a custom message to be tweeted automatically when an app is published.
  • Read your forum posts on developer.palm.com.
  • Read the latest forum posts on developer.palm.com.
  • See your financial reports per month, showing how much you’ve earned per month.
  • Backup and restore your data.  As many webOS developers wipe their phone on a regular basis to test different webOS releases, this makes sure you never lose any data.

See the video below for a run through of the app.  For a webOS developer, this is an invaluable tool.  Once you start using it, you’ll wonder how you ever did without it!

Posted in Ajax, chart, Dojo, dojo.charting, dojox.gfx, Javascript, json, Palm, WebOS | Leave a Comment »

 
Follow

Get every new post delivered to your Inbox.

Join 533 other followers

%d bloggers like this: