As of today I am no longer in full time employment! After a number of years of working for others I’ve decided its time to take a risk and go it alone. Well almost alone, I’ll be joining forces with a good friend Steve Cross (aka @artfulbadger) in the form of Rareloop, our recently incorporated company.

As a company, Rareloop will be primary focused on mobile and web development. We’ve a wealth of experience in this area including website development, HTML5 web apps, cross platform PhoneGap development etc. If you have a project you’d like to work with us on please don’t hesitate to get in contact!

We’ve also been working on a number of products in our spare time & intend to further develop these now that we’re able to give them our focus. Most notably we’ve been building an incredibly powerful surveying app for tablet devices thats able to handle everything from simple customer feedback forms up to vastly complex research initiatives (some case studies are available on the website).

I’m also hoping that the change will free up some time so that I can play with even more open source projects/experiments & work on my existing bits such as Flux & Morf.

2012 is going to be an exciting year!

In v1.3 of Flux Slider I added support for Modernizr, prior to this Flux just used some simple test I’d written to detect features. I wanted to make use of the advanced feature detection when the library was available but to also not require others to use Modernizr in order to use Flux.

To implement non-dependant support I modified my feature test code to first check for Modernizr, use it where possible but fallback to my own tests where not.

The coding required is pretty trivial but I think its a useful design pattern to adopt.

Example

myApp.browser = {
    supportsTransitions: false,
    supports3d: false
};

// Detect required browser features
(function() {
    // Check for CSS Transition support
    if(window.Modernizr && Modernizr.csstransitions !== undefined) {
        myApp.browser.supportsTransitions = Modernizr.csstransitions;
    }
    else {
        // Custom detect code
    }

    // Check for 3D CSS support
    if(window.Modernizr && Modernizr.csstransforms3d !== undefined) {
        myApp.browser.supports3d = Modernizr.csstransforms3d;
    }
    else {
        // Custom detect code
    }
});

If you want to see how Flux implements this take a look at flux.browser.js on GitHub.

Whats the benefit?

Modernizr is an established open source library, trusted by some of the nets largest sites. Its sole purpose is to accurately detect features across a range of browsers and to keep up with new versions (and possible new quirks!) as they are released.

Whilst I’m happy to write some simple tests to check for the features that Flux requires, I’m never going to be able to replicate the time and research that has gone into Modernizr.

Essentially, feature detection for Flux will be adequate without Modernizr but will be even more accurate and cover more edge cases with it! A case in point is the recent release of Firefox10 which added support for 3D transforms. My detection code failed to recognise this but anyone using Flux with Modernizr would have had access to its 3D effects on release day without having to wait for me to update my code.

I’m pleased to announce that I’ve now moved the sales of the Flux Slider WordPress plugin to a brand new custom built system. All existing customers have been migrated and will start to reap the benefits of the new system as an when new updates to the plugin become available. The new system most importantly enables me to better manage delivery of updates to all existing and new customers, but also gives me more control over the whole user experience.

Quixly served me well when the plugin was first released but in recent months the service has been unreliable in terms of uploading updates and sending notifications to customers.

I’m also planning to add support for referrals to the system over the next couple of months, so if you’d be interested in joining the programme keep an eye on the blog or drop me a line on Twitter.

Here’s a small script that might be useful for anyone doing PhoneGap development on Android. I previously wrote about a terminal command that could be used to view just the PhoneGap output from a devices console log. DroidLog is simpler to execute & also formats the output so its easier to read.

Download from GitHub

I hope this is useful for others! I’ve made it available under the MIT license so feel free to use it as you need. If you find any bugs and make fixes or you make some improvements then do please send a pull requests.

There are some definite differences between the Firefox & WebKit implementation of 3D transforms, I’m not familiar enough with the details of the spec to know which is “correct” but I’ve outlined what I’ve found.

Perspective doesn’t propagate

In a WebKit browser, when perspective is applied to an element the effect propagates to all child elements irrespective of depth. In Firefox it appears that the effect is only applied to the elements direct child elements.

JSFiddle Example

Update: You can work around this issue in Firefox by adding -moz-transform-style: preserve-3d at each depth, JSFiddle Example. Thanks to Gustaff Weldon & Bartek Szopka for the fix.

Perspective origin doesn’t work the same

The perspective-origin CSS property determines the position the viewer is looking at. It is used as the vanishing point (abscissa) by the perspective property. (MDN)

I use this property in the bars3D transition in Flux and the desired effect is that all the “slices” created, and subsequently rotated, have a common vanishing point.

In WebKit if you apply perspective and perspective-origin on an element then all child elements calculate the vanishing point based on the vanishing point for that element.

In Firefox however the perspective-origin property seems to be inherited by child elements and the value calculated for each element. For example if perspective-origin property is set to 50% 50% then instead of the vanishing point for each child being the parents centre, they become the centre of each element.

JSFiddle Example

Don’t mix z-index with 3D transforms

When Chrome added support for 3D transforms it was sometimes needed to add z-index values to help it correctly stack layers in 3D space. Firefox however appears to behave quite erratically when you mix 3D transforms with z-index.

The most repeatable example is that backface-visibilty appears to be ignored when z-index is applied.

JSFiddle Example

Detecting 3D transform support

The Media Query technique Modernizr uses to detect 3D transform support in WebKit doesn’t work in Firefox. Instead you can just check for the existance of the MozPerspective CSS property:

'MozPerspective' in document.body.style

Update: To prevent confusion, Modernizr correctly identifies 3D transform support for Firefox 10 by using a combination of the two techniques above (apologies if it sounded like I was suggesting otherwise). If like me you need to support a library that isn’t dependant on Modernizr then you’ll need to add the perspective check to your detection code. Here is the code Flux uses.

Still no matrix object

There is still no MozCSSMatrix object to replicate the functionality of the WebKitCSSMatrix object. This means that there are a still a lot of cool things you can do with JavaScript & transforms in WebKit that you can’t in Firefox (e.g. Morf.js);

Version 1.4.3 of the Flux Slider JavaScript library is now available. This release add’s support for FireFox 10′s new implementation of 3D transforms¹.

View Transition Gallery | Download @ GitHub

Change Log (v1.4.3)

• Fixed feature detect code for Firefox 10+.
• 3D transitions now mostly work with Firefox 10+.
• Reverted to setInterval for play loop better timing.
• Fixed a few syntax issues with JSLint.
• Fixed a bug with the jQuery Widget that prevented isPlaying from working.
• Added getImages function to the jQuery Widget.

1. There are a couple of peculiarities with the FireFox implementation which I’ve discussed in this post

PhoneGap is a great tool for creating cross platform mobile apps. Whilst the documentation for deploying to iOS and Android is really thorough, I’ve found the BlackBerry PlayBook guide, especially when using a Mac, to be quite sparse.

Here are the steps I took to setup a development environment for both the simulator and an actual device.#Prerequisites

Before you get started you need to download the following:

• BlackBerry WebWorks for Tablet OS (this also meant installing the Adobe AIR SDK for me too)
• Latest PhoneGap release

Note: When asked where to install the WebWorks SDK I chose /Developer/PlayBookSDK. You will need this path later so if you install somewhere different then make a note of it.

Build & run PhoneGap HelloWorld

Once the WebWorks SDK is installed and PhoneGap has been downloaded, you will need to:

Copy the sample application

Copy the folder lib/blackberry from the PhoneGap release to a new location

$ cp -ap ./lib/blackberry /Developer/Apps/PlayBook/helloworld

Then change your working directory to the sample folder

$ cd ./sample

Update the properties file

Various parameters need to be set within the project.properties file, to enable building and deployment of WebWorks apps. Firstly you need to provide the location of the BlackBerry WebWorks Packager (aka bbwp). Its important that you use the directory to which you installed the SDK, not the path to the bbwp directory itself (use the directory one level higher). For my setup the correct path was:

playbook.bbwp.dir=/Developer/PlayBookSDK

Install the PlayBook Simulator

The PlayBook simulator is bundled with the SDK download and can be run from within VMWare Fusion. Open Fusion and import the following file:

/Developer/PlaybookSDK/bbwp/blackberry-tablet-sdk/BlackBerryPlayBookSimulator-1.0.7/BlackBerryPlayBookSimulator.vmx

Once imported, run the simulator.

Setup the Simulator for Development

To setup the simulator for development work you will need to do the following:

1. Tap on the Settings icon top right of the screen
2. Select the ‘Security’ tab
3. Select ‘Development Mode’

4. Enable the ‘Use Development Mode’ toggle

   

5. Return to the homescreen and a new icon should have appeared in the menubar

6. Tap the new icon and make a note of the IP address

   

Now update you project.properties file with the simulators IP address:

playbook.sim.ip=172.16.91.139

You’re now ready to deploy the app to the simulator:

ant playbook load-simulator

Depending on the file permissions of your SDK folder you may need to run the ant command as sudo. Once the build has completed the Hello World app should launch in the simulator.

Setup a Device for Development

Follow steps 1-6 from the above simulator instructions on the device to enable Development Mode and obtain the devices IP address. Add the IP address to your project.properties.

playbook.device.ip=172.16.91.139

Signing certificates are required to test applications on real hardware. These can be applied for with the BlackBerry Code Signing Keys Order Form. I found the turn-around to be very quick, with the keys arriving within a couple of hours.

Once your keys arrive (via email) then follow the instructions from the BlackBerry site on how to install them. Note that the “password” you choose will need to be written into a plain text file so don’t pick anything you use for anything else!

You then just need to update your project.properties file once again and add the passwords you created in the previous step:

playbook.sigtool.csk.password=PASSWORD
playbook.sigtool.p12.password=PASSWORD

You should now be able to deploy to the device using the deploy script:

ant playbook load-device

Enabling the Remote Inspector

At the time of writing the PlayBook is the only device to ship with remote WebKit debugging. This is one area that the PlayBook really excels and makes creating PhoneGap based apps much easier when compared to other platforms such as iOS & Android.

To enable this functionality in your PhoneGap/WebWorks app you need to do the following steps.

From either the simulator or device:

Ensure a password is set

• Tap on the Settings icon top right of the screen
• Select the ‘Security’ tab
• Select ‘Password’
• Enable the ‘Use Password’ toggle & provide a password

Add the password to your properties file:

Add the following to you project.properties file:

playbook.device.password=PASSWORD

or for simulator:

playbook.sim.password=PASSWORD

Update the build settings

Add a flag to the playbook.xml file. Find <!-- BBWP MACRO --> and add <arg value="-d" /> to the two <exec> nodes in following block:

<exec executable="${bbwp}">
    <arg file="${build.dir}/${cod.name}.zip" />
    <arg value="-gcsk" />
    <arg value="${properties.playbook.sigtool.csk.password}" />
    <arg value="-gp12" />
    <arg value="${properties.playbook.sigtool.p12.password}" />
    <arg value="-o" />
    <arg file="${build.dir}" />
    <arg value="-buildId" />
    <arg value="${build.number}" />
    <arg value="-d" />
</exec>

and

<exec executable="${bbwp}">
    <arg file="${build.dir}/${cod.name}.zip" />
    <arg value="-o" />
    <arg file="${build.dir}" />
    <arg value="-buildId" />
    <arg value="${build.number}" />
    <arg value="-d" />
</exec>

This will enable the Web Inspector for your WebWorks/PhoneGap app (be sure to remove this when it comes time to distribute).

Load a browser on your desktop/laptop

Visit the IP address of your device/simulator using port 1337, e.g.

http://172.16.91.139:1337

You should now be able to debug your application using the familiar WebKit inspector, including JavaScript breakpoints, console access and CSS manipulations.

I wrote this guide partly as a resource for myself after working on porting the Rareloop Mobile Data Collection framework to work on the Playbook. If you find any in-accuracies or improvements or would like to discuss our mobile data collection platform some more, just give me a shout in the comments or via the Rareloop website.

Here’s the the new business card design I did recently for Executive Gardens (Surrey, UK based landscape gardeners).

The January edition of .net mag is out now in both print and digital formats.

This month features a tutorial I wrote demonstrating how to create a page turn effect (like the one found in the Flux Slider) using just CSS3 and JavaScript.

Create a page turn effect with CSS3

In this tutorial you’ll learn how to create a stunning Page Turn effect using the latest in CSS3 transforms and transitions. This effect is a great way to enhance a portfolio image gallery.

There is also a full working example of the finished code which is pretty heavily commented to help you modify the effect for your own needs.

Get .net mag

The revamped Rareloop website is now live and we’ve spent a fair bit of time writing up a couple of recent projects as case studies of our work. Here’s a brief overview of what is currently on the site but do head on over and read the full articles.

MiHope – Using Android tablets to survey HIV suffers in sub saharan Africa

View Cases Study

Rareloop created an easy-to-use survey deployed on a number of ASUS Transformer tablet devices. The application is being used at a number of key points during the project lifecycle to monitor the progress, and hopefully improvement, in the quality of life and access to the much needed medial care of members of rural communities in the two African countries.

Catch Before a Fall – Using iPads to assess patient’s 10 year risk of osteoporotic fracture

View Case Study (with video)

Rareloop were approached to create an application that could help GP’s better identify patients who were at risk of suffering an osteoporotic bone fracture. The patients would answer a series of questions about various known risk factors (e.g. medical history, medication) and based on their answers a risk percentage would be given of suffering from a fracture in the next ten years. Other criteria such as the patients BMI would also need to be calculated to get a more accurate risk assessment.

About Rareloop

Rareloop have built applications, developed websites and hosted products for companies and individuals all over the UK. We have developed iOS and Android applications for national and international clients including the Health Service, NGOs, conferences and recruitment agencies.

Rareloop is a relative new company but we’re growing rapidly thanks to our wealth of knowledge in mobile technologies, web and app development & HTML5 and JavaScript. If you’d like to talk to us about a project, hire us for freelance work or discuss some training please don’t hesitate to get in contact.

http://www.rareloop.com