April 4, 2012 1

BlackBerry PlayBook JavaScript Keyboard Events Bug

Key Event bug

Whilst working on a PlayBook port of Rareloop‘s form framework for tablets I came across an interesting quirk with how the PlayBook OS handles keyboard events in input fields.

On all desktop browsers that I’ve tested (as well as iOS and Android) events are fired for each keystroke. This is useful if you wish to perform a task as a user types input, for example autocompletion hinting. On the PlayBook however, the event is only fired when a space key is entered and a word is completed. This seems to be the case for keydown, keyup & keypress events on OS2, I can’t confirm whether this is new in OS2 or if its always been the case.

I’ve created a test case on JSFiddle to demonstrate the issue.

The problem has been reported to RIM, so hopefully this will be addressed in a future OS update.

Update: Thanks to Hin for pointing out in the comments that there is a work around for this bug when using input elements. If you add the autocomplete="off" attribute then the events fire as expected. Unfortunately this doesn’t work for textarea elements.

Here is an updated JSFiddle to show the fix.

March 21, 2012 3

MozHacks Dev Derby Demo: 3D Image Transitions

Mozilla Dev Derby

This months Mozilla Dev Derby is focussing on 3D Transforms, which was a great excuse to knock up a little demo using Flux Slider.

Checkout the demo here: 3D Image Transitions

This demo shows off the standard 3D transitions of the library but also contains a new transition called explode which will be available in the next release of Flux.

A massive thanks to Nick La for allowing me to use a couple of his desktop illustrations in the demo!

March 14, 2012 1

New issue with 3D Transforms in Firefox 11

Following on from my post about 3D transforms with Firefox 10, here is some further information to help make sure your code works well with the newly released Firefox 11.

Read the rest of this entry »

March 9, 2012 12

Compass/SASS Mixins for Simple Retina Images on Websites

Retina Display

The iPhone 4 and 4S have had high resolution retina screens for a while but now that the new iPad has been announced with an incredible 2047×1536 resolution retina images are going to be increasingly important for web sites and web apps.

I’ve created a small extension for Compass/SASS that makes using retina images much easier to manage. Read the rest of this entry »

February 24, 2012 2

Taking the plunge

Rareloop Logo

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!

February 22, 2012 1

A simple design pattern for feature detection with non-dependant Modernizr support

Modernizr is the gold standard for client side feature detection and is widely used but what if you’re writing a JavaScript library and want to minimise the dependencies? Here’s a simple design pattern for feature detection with non-dependant Modernizr support.

Read the rest of this entry »

February 16, 2012 0

New sales platform for Flux WordPress plugin


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.

February 14, 2012 1

DroidLog – A console/error log for Android PhoneGap apps

droidlog output

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.

February 13, 2012 5

3D transformations with Firefox 10+

Firefox 10 was released toward the end of January and added support for 3D transforms. Here are some lessons learned whilst ensuring Flux Slider worked with Firefox.

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.

Read the rest of this entry »

February 13, 2012 8

Flux Slider v1.4.3 Released

Flux Slider v1.4.3

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

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 []