Category Archives: Cordova

Updated: Parallax Effects in Hybrid/Web Apps

A while back I wrote about adding parallax effects to your HTML/JS experiences to make them feel a bit richer and closer to a native experience.  I’ve just added this subtle (key word *subtle*) effect to a new project and made a few changes I wanted to share here.

If you are wondering what I am talking about with “parallax effects” – Parallax movement is where objects in the background move at a different rate than objects in the foreground, thus causing the perception of depth.  Read more about it if you’re interested.

First, here’s a quick video of this latest app in action.  It’s a hybrid MobileFirst app, but this technique could be used in any Cordova/PhoneGap/MobileFirst/mobile web app experience.  The key is to keep it subtle and not too much “in your face”, and yes, it is very subtle in this video.  You have to watch closely.

The techniques that I wrote about in the previous post still apply – I’ve just added a bit more to cover more use cases.

First let’s look at the CSS.

body {
    background-image: url('../images/cloud_advisor_bkgd.png');
    background-attachment: fixed;
    background-position: center;
    background-size: auto 120%;

This sets the background image and default position.  The distinct change here is that I set the background size to “auto” width and 120% height.  In this case, you can have a huge image that shrinks down to just slightly larger than the window size, or a small image that scales up to a larger window size.  This way you don’t end up with seams in a repeated background or a background that is too big to highlight the parallax effect effectively.

Next let’s take a quick look at the JS involved.

var position = "center";
var lastPosition = "center";
var contentCSS = "";
var body = $("body");
var content = $(".content");
window.suspendAnimation = false;

var xMovement = 15;
var yMovement = 30;
var halfX = xMovement/2;
var halfY = yMovement/2;

window.ondeviceorientation = function(event) {
 var gamma = event.gamma/90;
 var beta = event.beta/180;

 var temp = 0;

 //fix for holding the device upside down
 if ( gamma >= 1 ) {
  gamma = 2- gamma;
 } else if ( gamma <= -1) {
  gamma = -2 - gamma;

 // shift values/motion based upon device orientation
 switch (window.orientation) {
  case 90:
   temp = gamma;
   gamma = beta;
   beta = temp;
  case -90:
   temp = -gamma;
   gamma = beta;
   beta = temp;


 // update positions to be used for CSS
 var yPosition = -yMovement - (beta * yMovement);
 var xPosition = -xMovement - (gamma * xMovement);
 var contentX = (-xMovement - xPosition)/2;
 var contentY = (-yMovement - yPosition)/2;

 // generate css styles
 position = xPosition.toFixed(1) + "px " + yPosition.toFixed(1) + "px";
 contentCSS = "translate3d( " + (contentX.toFixed(1)) + "px, " + (contentY.toFixed(1)) + "px, " + " 0px)";

function updateBackground() {

 if (!window.suspendAnimation) {
  if ( position.valueOf() != lastPosition.valueOf() ) {

   body.css( "background-position", position);
   content.css( "-webkit-transform", contentCSS);
   lastPosition = position;
 } else {
  lastPosition = "translate3d(0px, 0px, 0px)";;



The html where this would be used would be something like this:

  <div class="content">put your foreground stuff here.</div>

There are some subtle but important changes here:

  1. In the requestAnimationFrame loop, it only applies changes *if* there are changes to apply.  This prevents needless calls to apply CSS even if the CSS styles hadn’t changed.  In this, I also truncate the numeric CSS string so that it isn’t reapplying CSS if the position should shift by 0.01 pixels. Side note: If you aren’t using requestAnimationFrame for HTML animations, you should learn about it.
  2. If you used my old code and were holding the device upside down, it wouldn’t work.  Not even a little bit.  This has that fixed (see comments inline above).
  3. This moves the background in CSS, which doesn’t cause browser reflow operations, and moves the foreground content (inside of a div) using translate3d, which also doesn’t cause browser reflow operations.  This helps keep animations smooth and the UX performing optimally.
  4. I also added a global variable to turn parallax on and off very quickly, if you need it.

The result is a faster experience that is more efficient and less of a strain on CPU and battery.  Feel free to test this technique out on your own.

If you use the code above, you can modify the xMovement and yMovement variables to exaggerate the parallax effect.

IBM MobileFirst Platform Foundation v7.0 Now Available!


It’s here!  IBM MobileFirst Platform Foundation v7.0 is now available.  Get the FREE developer edition here, and the v7.0 docs here.

This release features:

  • Integrated single-node Cloudant (NoSQL) DB.
  • Detection for tampered/hacked apps
  • Code obfuscation in hybrid apps
  • Enhanced data adapter services
    • REST services with analytics for all data adapter procedures
    • MobileFirst platform security for all REST services
  • Direct integration with SAP resources
  • Latest mobile OS versions supported
  • Push notifications for Windows
  • Extended app authentication
  • Custom charts for operational analytics
  • Updated versions of the Apache Cordova container for hybrid apps

and more!

Download the developer edition today to get started.

Strategies for Managing App Versions & Updates With IBM MobileFirst Foundation (aka Worklight)

IBM MobileFirst Foundation provides two mechanisms to manage app versions and updates.  Neither requiring you to write any additional code!

The first is app versioning; MobileFirst Foundation tracks each version of an app that you deploy, and gives you the ability govern or restrict access to specific platforms and versions. App versioning applies to all apps, native or hybrid, on any platform that MobileFirst Foundation supports. The second is Direct Update, which allows you to push new HTML/CSS/JavaScript (web) resources to a MobileFirst hybrid app. Direct Update only applies to hybrid apps, but it works for any platform that MobileFirst supports.

App Version Management

When you deploy an app to the MobileFirst Foundation server, the server will automatically track versions based on the version number specified in you application-descriptor.xml file.

Set Application Version
Set Application Version

When you load the MobileFirst Foundation Server Console, you’ll be able to view all of the deployed app platforms and versions.

The screenshot below shows a hybrid app deployed for both Android and iOS platforms. You would also be able to see the exact same version and platform information for native apps that leverage IBM MobileFirst Foundation.

Managing Versions in the MobileFirst Console (click to enlarge)
Managing Versions in the MobileFirst Console (click to enlarge)

You’ll notice in the MobileFirst console that next to each platform/version you can set the status for that version. This makes it possible to set notification messages for users on specific platforms and versions, or even restrict access to specific platforms and versions.

For example, look at the screenshot above… Version 1.0 on Android is active. Version 1.2 on iOS is active. Version 1.1 on iOS is notifying, and Version 1.0 on iOS is disabled.

There are 3 statuses that can be set for each platform and version combination.: Active, Active Notifying, and Access Disabled.

Set Platform/Version Status
Set Platform/Version Status

When you set the status of a platform/version, this status is only for that specific platform/version pair. This enables you to selectively notify users of specific versions, or even block access to specific versions if they are outdated and no longer supported.

“Active” means that the application is active. Services to this version will operate normally, and no messages will be presented to the user.

“Active Notifying” means that the application is active, services will continue to work, but a message will be presented to the user when the app becomes active, or when a service request is made to the MF server.

Setting Active Notification Message
Setting Active Notification Message

This can be used to send any text-based message to the app users. This could be a deprecation notice, service maintenance notice, or any other general notice.

Within the app, the user will see a message when the app becomes active, or when a request is made to the server. This message can be dismissed, and the app functionality is not impacted in any way.

In-App Active Notification Experience
In-App Active Notification Experience

“Access Disabled” means that access to the application is disabled. In this state, a notification message will be presented to the user, and access from the app version will be disabled. The user will also be presented with an “Upgrade” button, which will redirect the user to any URL, which presumably will be for an updated version of the app.

Setting Disabled Status
Setting Disabled Status

In this state, the app will not be granted access to the MobileFirst/Worklight server. So, if your app requests data from a data adapter, all requests to the adapter from this platform/version will be blocked. If your app initialization code is inside of the Worklight client’s connect:onSuccess handler, then this can prevent your app from loading at all.

In-App Disabled Experience
In-App Disabled Experience

Again, When you set the status of a platform/version, this status is only for that specific platform/version pair.

You can learn more about managing applications through the MobileFirst/Worklight Console using the Administering Worklight applications with Worklight Console online documentation.

Direct Update

MobileFirst hybrid applications leverage Apache Cordova plus MF-specific APIs as a foundation to deliver hybrid apps. Apache Cordova enables developers to build natively-installed cross platform apps using web technologies.

Direct Update is a feature for MobileFirst hybrid apps, which enables you to push updated app content (HTML, CSS, & JavaScript) without the user having to deploy a new version of the app through the app store.

Direct Update is considered an additional security feature b/c it enforces users to use the latest version of the application code. However, when an app uses Direct Update, it *only* updates the web resources.  No native changes or version # changes will be applied. However, it should not be abused. In particular this will bypass the Apple’s app store approval process. You should not overhaul the entire UI and break Apple’s Human Interaction Guidelines, otherwise you could be kicked out of the app store.

Direct Update User Experience
Direct Update User Experience

By default, the update’s user experience is a modal overlay that shows download and installation progress. The updater’s UX can be configured to use silent updates that do not block the user’s experience, can be a completely custom user experience, or can be disabled altogether.  Updates can also be paused or resumed using the JavaScript API so that it does not block the user from performing a critical task, however this would require a custom UI – the default UI does not enable pause/resume.

Updates in the current version of Worklight (6.2) are complete updates containing the entire application (www) code, however MobileFirst Foundation 6.3 (coming this month) will have a Differential Direct Update feature that includes only the changed files. More detail will be posted once this is available.

Direct Update can also be disabled if you don’t want your hybrid apps to update automatically.

For more information on Direct Update, be sure to check out these additional resources:

Additional note:  If you’re wondering by I interchange MobileFirst and Worklight in this post, it’s because Worklight is now MobileFirst Platform Foundation

Embarking Upon A New Adventure

I’m excited to finally announce that I have embarked upon a new adventure!  Today marks my first day as a MobileFirst Developer Advocate for IBM!


So, what does that mean?

It is very similar to what I was doing back at Adobe focusing on developers.  I’m excited to engage with the development community around building mobile apps and leveraging cloud services to meet critical business needs.  I’ll be focused on IBM’s MobileFirst platform, including Worklight – a platform for building and delivering mobile applications leveraging Apache Cordova (PhoneGap), and Bluemix – IBM’s scalable cloud computing platform, which can be used for everything from hosted services, “big data”, security, back-ends for mobile apps, Java, node.js, ruby, and much, much more… Seriously, check out everything that Bluemix has to offer.

It is my mission to help you, the developer or business decision maker be successful, and now I have access to IBM’s tools, knowledge and services to back me up!

Will I still be building apps and services?

  • YES – stay tuned for more info

Will I still be helping you build apps, and writing about development tools, paradigms, and best practices?

  • YES – it’s my mission to help you make the right decisions and be successful

Will I see you at the next development conference, hackathon, or meetup?

  • YES, and I can’t wait to show you everything IBM has to offer.  

Will I still be flying drones?

  • Of course! However, I won’t be blogging about drones and creative tools quite so much. Follow me on Flickr to see images from my latest flights, and feel free to ask me questions.

I had a great run with Adobe, and am thankful for all of the opportunities while there.  I worked on many amazing projects, worked with a lot of great (and very, very smart) people, and was able to continually push the envelope on both the development and creative/media sides. For which I am grateful.

Now, let the next adventure commence!

Your business has tough questions? Let’s ask Watson.

DevNexus 2014 PhoneGap Presentations

I’ve just wrapped up my presentations for this year’s DevNexus event in Atlanta – it has been a great event, filled with tons of information on web, mobile, and back-end development. I had 3 sessions on PhoneGap – One intro, one advanced, and one a mobile frameworks panel.

Below are my presentations.  I didn’t record them this time, since they were being recorded by the conference organizers, so expect to see a video once they’re released.

Just press the space bar, or use the arrow keys to view the presentation in your browser.

Getting Started with PhoneGap and Cross Platform Mobile Development

View Presentation …


(Lesson learned, never make changes to you presentation/environment after midnight when you have the first session of the day – it will always bite you)

Designing & Architecting for PhoneGap & the Mobile Web

View presentation …


Enjoy, and feel free to reach out with any questions!