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.
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
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
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.
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.
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:
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!
Due to limited time I’ve not tackled the “extra credit” problem which was to programmatically work out the width of the slices.
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.
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.
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
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.