Installing Weinre on Mac OS X

If you haven’t checked out Weinre, you really ought to!

Weinre is a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it’s designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.

While not as good as a full remote web inspector (like the one found on the PlayBook), its a great tool to help debug with mobile development. Weinre is part of the PhoneGap project and there is a publicly hosted version run as a service that can be found at debug.phonegap.com. Unfortunately the hosted service appears to be having a few problems & I’ve struggled to get local clients to connect, the good news is that Weinre can be installed and run locally.

Read the rest of this entry »

When developing HTML5 web apps for mobiles and tablets, simulators and emulators can only take you so far. The sooner you can test on real devices the sooner you can catch real life usability issues and vendor implementation quirks.

This post outlines a technique for rapidly testing code changes with real devices.

Read the rest of this entry »

Flux Slider has placed third in Mozilla’s March Dev Derby, which was all about CSS 3D Transforms! The quality of the competition was incredibly high so its a real honour to place in the top three.

You can see my demo here, but its also really worth checking out some of the other submissions.

Flux is also a ‘Featured Demo‘ at the moment!

Thanks again to the incredible Nick La for letting me use his awesome illustrations.

Sandbox is a subscription only music industry marketing magazine by Music Ally. They’ve just started a regular feature called ‘Rockstar Developers’ and they kindly ask to interview me for the latest edition (issue 58).

So if you have a subscription and fancy hearing my thoughts on mobile development trends for 2012 head on over to the Music Ally website.

Thanks for Sarah Lewin for asking me to take part.

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.

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!

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 »

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 »

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!

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 »