Twitter: raymondcamden


Address: Lafayette, LA, USA

Determining installed plugins at runtime for Cordova and PhoneGap applications

11-19-2014 1,415 views Mobile, JavaScript, HTML5 1 Comment

Earlier today on Twitter a user asked an interesting question: How can I tell - via JavaScript - if a particular plugin is installed in a Cordova/PhoneGap application. I responded by asking how you wouldn't know since it is your own app, but then he mentioned that his code base was stand alone and would be used within other projects. (So basically - just JavaScript code that other Cordova/PhoneGap applications would use.)

Using the autodivider feature in jQuery Mobile (take two)

11-18-2014 1,267 views Mobile, jQuery, JavaScript, HTML5 8 Comments

Almost a year ago I blogged about using the autodivider feature in jQuery Mobile. This is a simple feature that enhances list views with dividers. It makes content a bit easier to parse when working with a large list.

One of my readers, Fher (who has a cool name - I kind of imagine her/him as a fire-breathing wolf), asked if there was a way to add a bubble count to the dividers. You can see an example of this on the docs for listview, but this is what the feature looks like:

So, the short answer is no, you can't do this with autodividers. Why? While the feature allows you to build a function to create dynamic dividers, it only lets you specify the text for the divider, not random HTML. However, if you are willing to give up having the "pretty bubble" effect, you can simply use it as part of the label. To make that work, I modified my code a bit from the previous demo (and again, you can read that here, I'd suggest checking it out just so you can see the context). Here is the complete JavaScript code. (The HTML didn't change.)

$(document).ready(function() {

	var dates = [
		"12/16/2013 12:00:00",
		"12/16/2013 14:00:00",		
		"12/17/2013 12:00:00",
		"12/18/2013 12:00:00",
		"12/19/2013 12:00:00",
		"12/19/2013 16:00:00"
	];

	var dateList = $("#dates");
	for(var i=0, len=dates.length; i<len; i++) {
		dateList.append("<li>"+dates[i]+"</li>");	
	}

	/*
	Create a generic func to return the label
	*/
	var getLabel = function(d) {
		return (d.getMonth()+1)+ "/" + d.getDate() + "/" + d.getFullYear();
	}
			
	/*
	Now that we have a func, use it to generate a label to count hash
	*/
	var dateCount = {};
	for(var i=0, len=dates.length; i<len; i++) {
		var l = getLabel(new Date(dates[i]));
		if(dateCount.hasOwnProperty(l)) {
			dateCount[l]++;
		} else {
			dateCount[l] = 1;
		}
	}
			
	dateList.listview({
		autodividers:true,
		autodividersSelector: function ( li ) {
			var d = new Date(li.text());
			var label = getLabel(d);
			
			return label + " (" +dateCount[label] +")";
		}
	}).listview("refresh");

});

The first change was to abstract out the code used to generate the divider - basically turning the date value into a label. Once I have that, I iterate over my data to figure out how many unique date labels I have. This is done with a simple object and a counter. Finally, my autodividersSelector function is modified to make use of this count. Here is the result.

There you go. Not exactly rocket science, but hopefully helpful. It is possible to create dividers with list bubbles, just not quite as simply as this entry demonstrates. I'll show that tomorrow.

List auto-dividers in Ionic

11-06-2014 2,315 views Mobile, JavaScript, HTML5 3 Comments

This question came up on StackOverflow recently and I took a stab at answering it. The user had a list of data that included dates. They were looking to see if there was an easy way to add dividers to the list automatically. jQuery Mobile actually supports this out of the box - and supports it well. By default it will use the first letter of your list data as a separator (so "Andy" and "Al" will be prefixed with an "A" divider) but you can also use a function to specify your own logic.

My Modern Web Conference presentation is now available online

10-29-2014 2,569 views Development, JavaScript, HTML5 Comments

As the title says, my presentation from the Modern Web Conference is now available to watch online. I've embedded it below. You can find the complete list of videos here.

Thoughts on Integrating Ionic into an Existing Application

10-16-2014 2,843 views Development, JavaScript, HTML5 4 Comments

Earlier this week a user asked me a question about integrating Ionic into an existing application.

Delaying an Edge Animate asset until visible - Part 6

10-14-2014 2,621 views jQuery, JavaScript, HTML5 1 Comment

Welcome back to the thread that won't die. I've blogged (see related links below) about this topic six times now. It started off as something simple - making an Edge Animate animation wait to run until visible - but it has turned into a pretty complex set of entries discussing not only how to do it but alternatives and other modifications. Today's entry is rather simple though as it just covers updates for the October 2014 release of Edge Animate.

Ionic has a CDN (use with caution)

10-02-2014 2,253 views Mobile, Development, JavaScript, HTML5 Comments

I kinda stumbled upon this by accident, but Ionic has a CDN you can find here:

Cordova, Plugins, and Determining What Supports What

10-01-2014 2,993 views Mobile, HTML5 2 Comments

Earlier today a user on the Cordova development list asked if plugins are tested against only the current release of the SDK. This brought up an interesting discussion that I'm summarizing here.

IndexedDB on iOS 8 - Broken Bad

09-25-2014 13,406 views Mobile, JavaScript, HTML5 33 Comments
Let me begin by saying that credit for this find goes to @jonnyknowsbest on Twitter and his SO post here: Primary Key issue on iOS8 implementation of IndexedDb. I did my research into this issue early this morning and I hope that I, and jonny, are both wrong. I'd love to be wrong about this. Unfortunately, I don't think that is the case.

So, as you know, iOS 8 finally brought IndexedDB to Mobile Safari. I may be biased, but I find features like this far more useful than CSS updates. Not to say that I don't appreciate them, but to me, deep data storage on the client is something that is more practical and useful to more people. Of course, I work for a company that is all about designers and not developers, so what do I know? ;)

Tip: Using Ionic - without Ionic

09-23-2014 2,704 views Mobile, JavaScript, HTML5 2 Comments

Pardon the cryptic title. Earlier this morning I was working on a demo (the result of which is documented here) that I knew was going to be rather simple. Therefore I decided to skip using Ionic since AngularJS would have been overkill for what I was producing. I was ok with that, but what I really didn't like was losing live reload and logging in my terminal. Turns out there is a rather obvious way to get that.