SOS

Dynamically change deviceDpi on iOS

Shane O'Sullivan — Tue, 13 Dec 2011 17:26:26 +0000

When Apple released the iPhone 4 with a retina display, they quadrupled the pixel density. This caused problems for websites, as all their assets would now look tiny. To solve this, Apple made it so that websites would keep the old low density rather than the retina display, and would allow sites to opt in to using the hi-res display.

This is done by adding a tag to the header, like

Note the 0.5 for the scale values. This resizes the screen to take advantage of the full retina display. Pretty. To use the low-res version, the scale parameters are 1.

However, if you’re writing a static HTML based web app, with no backend, you can’t go sniffing the user agent to figure out whether to set the scale to 0.5 or 1 before generating the page, so you’ll have to do it in JavaScript.

Code!!

Here’s a simple script to do that, from my colleagues on the JSGameBench project at Facebook. To use this, first put the meta tag above into the of your document, with scale values of 1.

if (window == window.top) {
        var meta_viewport = document.querySelector &&
          document.querySelector(“meta[name=viewport]“);
        if (meta_viewport && window.devicePixelRatio >= 2 ) {
          meta_viewport.setAttribute(‘content’, ‘user-scalable=no, width=device-width, height=device-height, initial-scale=0.5, maximum-scale=0.5′);
        }
}

The script looks for the meta tag, checks if you have a hi-res Apple display, and switches the device screen scale to use all the pixels, not just one in four.

One more thing…..

If your web app uses CSS like

html, body {
width: 100%;
height: 100%;
}

to fit the app to the screen dimensions, and inside perhaps you have some JS based scroller, then you’ll need two further lines. The script then becomes

if (window == window.top) {
var meta_viewport = document.querySelector && 
    document.querySelector(“meta[name=viewport]“);
if (meta_viewport && window.devicePixelRatio >= 2 ) {
    meta_viewport.setAttribute(‘content’, ‘user-scalable=no, width=device-width, height=device-height, initial-scale=0.5, maximum-scale=0.5′);
    document.body.style.width = ’200%’;
    document.body.style.height = ’200%’;
}
}:

Without these extra lines, the page will only occupy one quarter of the screen, rather than all of it.

Now you have an app that looks right on older iOS devices, but still uses the hi-res screen of the iPhone4 for really sharp fonts and more.

Finally

Make sure that when designing your borders and other screen elements to use multiples of two. E.g. have your borders be 2px, not 3px, so that when the phone divides them by two it’ll look right.

Tracking memory usage on WebOS with GnuPlot

Shane O'Sullivan — Sun, 16 Oct 2011 01:47:48 +0000

I’ve been fighting against a serious memory leak in a WebOS app I’m developing, and unfortunately the tools available for WebOS are no help whatsoever for these kinds of problems. There is a program available for WebOS called JsTop, but the data that it tracks doesn’t show that my app is using lots of memory, while at the same time the Touchpad is crashing with the infamous “Too Many Cards” error, with just one card on the screen.

So, I decided to see what I can do about it. A little fiddling with novaterm, grep, awk and GnuPlot has helped me a lot, and hopefully it can help you too.

The image above shows the percentage memory (red) and CPU (green) usage over time of the WebAppMgr process in WebOS, which is essentially where all the apps are executed. To get a graph like this, download the following two scripts (Mac/Linux/Cygwin only):

plotWebOS.sh

driveGnuPlotStreams.pl [Source]

You’ll probably have to make them executable, so do:
chmod +x plotWebOS.sh chmod +x driveGnuPlotStreams.pl

Then plug in your WebOS phone or TouchPad via USB, and run
./plotWebOS.sh
and you should see a graph like the one above. If you don’t see it, it’s likely that you don’t have GnuPlot installed, so Google how to do that for your system, it should be trivial.

For what it’s worth, I get a “Too Many Cards” error just before the process hits 60%, meaning that the other running processes are taking up the remaining ~40% of memory.

If you feel like playing around with this script and doing something else cool, let me know!

How to easily check a WebOS app version

Shane O'Sullivan — Fri, 07 Oct 2011 15:19:09 +0000

If you’re a WebOS developer and would like to be able to notify your users when a new version of your app is available, a very efficient way to do that is to use the Yahoo Query Language.

Take a look at this page:

It shows a YQL query to select the version of the app com.chofter.palmdevutils, giving the following result

{
 "query": {
  "count": 1,
  "created": "2011-10-07T14:58:53Z",
  "lang": "en-US",
  "results": {
   "p": "Version: 1.3.0"
  }
 }
}

Fetching this JSON object requires far less data that reading the entire HTML page and parsing it yourself. To see the final link that you would use, copy the link from the bottom of the Yahoo page, like this one http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22https%3A%2F%2Fdeveloper.palm.com%2Fappredirect%2F%3Fpackageid%3Dcom.chofter.palmdevutils%22%20and%0A%20%20%20%20%20%20xpath%3D’%2F%2Fdiv%5B%40id%3D%22app-price-system-version%22%5D%2Fp%5B3%5D’&format=json&callback=

JavaScript performance tips

Shane O'Sullivan — Wed, 28 Sep 2011 02:10:07 +0000

Every now and again a question comes up at work as to which of two or more approaches to the same problem in JavaScript performs better. I’ve started using the fantastic site jsperf.com to document these, so I’ll append to this post whenever I add a new test. I hope you find these useful, as they are answering questions that pertain to practical JavaScript usage.

Creating a regex inside and outside a loop

Declaring variables in a loop or outside it

Using hasOwnProperty or testing with undefined and void 0

Using indexOf or substring to test the end of a string

Tip: Declare regular expressions once and reuse for performance win

Shane O'Sullivan — Thu, 22 Sep 2011 21:54:51 +0000

A pattern I see quite often in JavaScript is of people using a regular expression in a loop, e.g.

for (var i = 0; i < array.length; i++) { array[i].match(/something/); }

The naive assumption is that a regex is some special native thing, like a boolean. However regular expressions have a cost to construct, which you can see in this performance test – http://jsperf.com/creating-a-regex-in-and-outside-a-loop

So, if you’re using a regular expression in JavaScript more than once, declare it first and reuse it to see a dramatic performance gain

CSS Box Sizing makes me happy

Shane O'Sullivan — Tue, 13 Sep 2011 15:18:29 +0000

Quick note: For anyone fighting for years against the CSS box model, where the visible size of an element depends on the sum of it’s width, height AND padding, check out the box-sizing: border-box;. It does exactly what we need, where if you say

.myclass { width: 100%; padding: 10px; }

then myclass will still take up 100% width of its container, instead of overflowing.

https://developer.mozilla.org/en/CSS/box-sizing

This is what a successful platform launch looks like

Shane O'Sullivan — Fri, 02 Sep 2011 18:15:12 +0000

… 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

Shane O'Sullivan — Sun, 28 Aug 2011 02:40:41 +0000

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

Shane O'Sullivan — Sun, 03 Jul 2011 17:17:51 +0000

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

Shane O'Sullivan — Thu, 30 Jun 2011 16:38:19 +0000

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

Shane O'Sullivan — Tue, 22 Mar 2011 18:51:35 +0000

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

Shane O'Sullivan — Mon, 07 Mar 2011 05:14:45 +0000

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

Shane O'Sullivan — Fri, 28 Jan 2011 16:36:28 +0000

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

Shane O'Sullivan — Sun, 14 Nov 2010 19:09:59 +0000

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

Shane O'Sullivan — Sun, 05 Sep 2010 08:41:03 +0000

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

Shane O'Sullivan — Sat, 28 Aug 2010 10:32:08 +0000

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 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.

Use YQL to cache your queries

Shane O'Sullivan — Thu, 05 Aug 2010 11:57:52 +0000

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.

Dojo’s mobile widgets coming along nicely

Shane O'Sullivan — Tue, 22 Jun 2010 14:11:54 +0000

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.

Dojo’s new Mobile App Project

Shane O'Sullivan — Sun, 13 Jun 2010 14:06:41 +0000

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

Using Yahoo Query Language (YQL) to count XML elements

Shane O'Sullivan — Mon, 19 Apr 2010 11:00:11 +0000

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” 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” 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?