February 7, 2012 19

Getting started with PhoneGap on BlackBerry PlayBook

Playbook Screenshot

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. Read the rest of this entry »

January 3, 2012 0

Design: Executive Gardens (Business Cards)

Business Card Demo

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

December 6, 2011 2

.net Mag: Create a page turn effect with CSS3

Net mag

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.

Webcover 223

Get .net mag

December 5, 2011 0

Rareloop Website Launched

Rareloop Logo

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.


December 2, 2011 1

Mozilla Hacks: People of HTML5 Interview

Instagram shredder challenge image

Earlier this week I had a quick video chat with Chris Heilmann about my solution to the recent Instagram shredder challenge, that made use of new web technologies (HTML5/JavaScript/canvas).

To see the full video and/or read the text of the mini-interview head on over to Mozilla Hacks.

Also be sure to check out the online demo of my solution in action.

November 25, 2011 0

PHP5 json_decode() with unicode characters

Ever tried to use json_decode() to decode some JSON and found that it just returned NULL, even though the same string passed JSONLint etc? This happened to me on a recent project and I spent literally hours trying to figure out what was causing it.

Just as I’d given up and had started to hack the JSON string by hand (urgh!), I found this tweet:

@rbolgov: @sydlawrence You use non breaking space(charcode = 160) instead of usual space (charcode=32). For PHP it’s big deal.” <– thanks (source)

This was the same reason that my code was failing, here is a quick helper function I used in the project to work around this issue:

function _json_decode($str)
    $str = str_replace(chr(160), chr(32), $str);
    return json_decode($str);

Hope this saves others some time, big thanks to Syd Lawrence & Bolgov Roman for the tip!

November 21, 2011 3

Instagram Shredder Challenge solved with HTML5

Instagram recently posted a challenge to write an algorithm to piece together an image that had been cut into slices and re-arranged. I thought this was a perfect opportunity to take the HTML5 canvas for a spin!

You can see my working solution here

The algorithm is about 150 lines of JavaScript and seems to work pretty well. I’m sure there are more performant ways to solve the problem but that wasn’t the goal of the exercise. My solution does features an N² loop, although it doesn’t execute expensive comparison code on each iteration, even so it possibly doesn’t scale too well.

Due to limited time I’ve not tackled the “extra credit” problem which was to programmatically work out the width of the slices.

November 8, 2011 0

iOS5 Reminders Wish List

One of my favourite additions to iOS5 is Reminders. As a long time Things user I’m surprised that such a simple app can have almost over night replaced my long standing tool of choice. Whilst I think part of its appeal is its simplicity, it can’t hurt to think of some new ways in which the app could be improved.

Read the rest of this entry »

October 31, 2011 1

Flux Slider WordPress plugin v1.3.1 released

Swipe Transition

Version 1.3.1 of the Flux Slider WordPress plugin is now available for download. Existing customers will have been notified by email and will be provided with a new download link.

Download Flux Slider WordPress plugin v1.2

Please note the special introductory pricing will only last another month. If you’d like to get hold of the Flux Slider WordPress plugin at the discounted rate please order before December 1st.

Whats new

Added caption support

You can now show a caption for each image in the slideshow. For sliders created with uploaded images this can be added manually, when using Featured Images from blog posts the title of the article is automatically used.

Featured images now link to blog posts

When using Featured Images, each image now becomes a link to the original blog post so that you can create stunning ‘recent blog posts’ carousels.

Updates and bug fixes

  • Move delay option inline with the autoplay option to improve usability
  • Updated flux.js to v1.4.1 which fixes a couple of small issues with the latest release of Firefox
  • Offered a fallback for lack of jQuery.data() support when used with old versions of jQuery
October 14, 2011 13

A (partial) fix for iOS5 overflow scrolling (ScrollFix.js)

Update: Unfortunately this does not 100% solve the problem, the script falls down when handling touch interactions when a scrolling section is bouncing/rubber banding. I don’t think this issue can be worked around (but would love to be proved wrong!). As such, I don’t advise the use of overflow: scroll for web apps until Apple provide a fix, I’d recommend continuing to use iScroll or Scrollability in the meantime!

One of the things I was most looking forward to in iOS5 was the added support for overflow: scroll and the associated -webkit-overflow-scrolling: touch.

After a bit of use, there is at least one issue with the implementation that makes it difficult to use for full screen web apps. Fortunately there is a work around.

The newly supported overflow:scroll is a great addition to Mobile Safari’s arsenal and works well except under the following conditions:

  • The scroll area is at the top and the user tries to scroll up
  • The scroll area is at the bottom and the user tries to scroll down.

In a native app, you’d expect the content to rubber band but in Safari the whole page is scrolled instead.

Enter ScrollFix.js, a small script that works around this problem.

ScrollFix works around this by manually offsetting the scrollTop value to one away from the limit at either extreme, which causes the browser to use rubber banding rather than passing the event up the DOM tree.

To better demonstrate the problem (and solution) here are a couple of videos:

iOS5 overflow scrolling without ScrollFix.js

iOS5 overflow scrolling with ScrollFix.js

ScrollFix is a work in progress (there are still bugs!) and can be downloaded for free from GitHub. Please contribute code fixes or open tickets for discussion.