The Mysterious 17 Pixels Shift

One of the most curious bugs I ever came across was found deep inside a third-party JavaScript grid component. This grid component had a fixed height and width. It calculated column widths by taking the total grid width and distributing it to the different columns, each of which got a certain, predefined percentage.

On Mac OS X, everything looked nice. But on Windows, the column headers were oddly shifted and did not match the content columns. While investigating the bug, we found out that the columns were shifted by exactly 17 pixels to the left. But why 17 pixels? And not 5, 10, 15 or anything power of 2?

Continue reading The Mysterious 17 Pixels Shift

Looking Back: AngularJS, Cordova and the Windows Phone Back Button

Recently we brought a Cordova-based web app which already runs successfully on iOS and Android to Windows Phone 8.1. One of the issues you will definitely come across when porting your app to this platform is the handling of the back button, an essential part of Windows Phone’s user experience.

By default, pressing the back button on Windows Phone closes your Cordova-based app, regardless of the current state. Instead, the back button should bring you back to the previous view; except on the main page, where pressing it must suspend the current app (according to the Windows Store Policies, 10.4.4):

Where applicable, pressing the back button should take the user to a previous page/dialog. If the user presses the back button on the first page of the app, then the app terminates (unless it is allowed to run in the background).

Not respecting those policies may not only lead to a rejection of your app, but also to bad ratings in the Store.

Continue reading Looking Back: AngularJS, Cordova and the Windows Phone Back Button

Enabling Cross-Platform Touch Interactions: Pointer vs. Touch Events

Detail of Michelangelo’s Creation of Adam

Your customers love mobile devices and apps. And they love the way of interacting with them, using touch.

Touch is a very natural input method and multi-touch allows intuitive gestures such as pinch-to-zoom. As mobile or web developers, we also love apps and touch interaction. But, face it, we are also quite lazy. We want to run code written once to execute on several browsers and platforms resulting in one and the same behavior. Unfortunately, there are two competing methods that allow interacting with websites using touch input:

Continue reading Enabling Cross-Platform Touch Interactions: Pointer vs. Touch Events