Sam Croft

A designer/developer on HTML, CSS, JavaScript and PhoneGap

Tutorial: Using PHP’s JSON encode and decode functions to handle data sent to and from your app

  • 1 comment

Filed in: api, apps, JSON, PhoneGap, php

JSON makes dealing with data in your app exceptionally easy and manageable. The best part about JSON is you can look at it and understand it. It’s not like the confusing spaghetti DOM that you get with XML, it’s a lean minimal representation of your data. If you’re dealing with chunks of data in your app, you want to be using JSON.

So while your app will happily eat up all the JSON you can throw at it, you still need to make it in the first place – and/or have a server side app that is capable of reading it. If, like me, you use PHP to handle things on a server then things are pretty straightforward. You can use PHP’s json_encode and json_decode functions. Encode will take your arrays, or objects, and create a JSON string of your data. While decode will take a JSON string, sent from your app, and turn it into an array or object.

(more…)

Quick tip: using HTML5 localstorage to store JSON objects on a device in your PhoneGap app

  • 26 comments

Filed in: android, Cordova, iOS, javascript, JSON, PhoneGap

I’ve written a couple of articles about loading remote data into PhoneGap apps (sans framework), but I haven’t mentioned a good little method of storing that data on the device so you don’t need to request it from a server again. This is a quick tip for how you can do that.

Of course, it depends on the type of data that you are loading from your server in the first place. You wouldn’t necessarily want to store data that would be out of date quickly – such as share prices or live sports scores. But there will certainly be times when you want to save the data you’ve just loaded for use at a later time, without having to load it again.

(more…)

Using JavaScript’s transitionend event to maintain event control when handling sequential CSS transitions in a PhoneGap app

  • 4 comments

Filed in: Cordova, javascript, jQuery, PhoneGap

It’s pretty simple to create animations with CSS3′s transition and animation properties. And the ability to hardware accelerate these effects gives you a lot of power to create a PhoneGap app UI with a native feel.

One issue I sometimes run into is firing an event after a transition has completed and/or chaining multiple transitions to occur one after another while keeping event control at the same time. I’m not talking about an overly complex series of animations, I just mean dealing with a couple of a transitions that occur one after another. There are two methods that I use in these situations.

(more…)

My article for Adobe’s Appliness magazine: Loading data into, and posting data from, a PhoneGap app

  • 27 comments

Filed in: android, apps, Cordova, iOS, jQuery, JSON, MySQL, PhoneGap, php, zepto

In September we tweeted a photo at RITH of a PhoneGap app we’d been working on. The photo showed the app running on quite a few iOS and Android phones and an iPad. One HTML5 app, running perfectly on many devices, all with different resolutions and pixel densities.

UniApp running on iPhone and Android phones and an iPad

Following a retweet by PhoneGap we were contacted by Adobe’s new magazine, Appliness, to see if we’d like to write an article for their October issue. I jumped at the chance.

(more…)

Responsive button feedback in PhoneGap apps: a better alternative to -webkit-tap-highlight-color

  • 10 comments

Filed in: android, apps, Cordova, css, iOS, PhoneGap, zepto

I don’t think I’m alone when I say that the most important thing with a PhoneGap app is that it feels responsive to a users touch. It goes without saying that the easiest argument that web/hybrid app neigh-sayers have is touch response lag. The first thing they’re going to point fingers at and tweet to their native compadres is how many milliseconds it takes for a button to light up when it is touched.

(more…)