One way to find out is by looking at the job posts. I decided to analyze recent craigslist San Francisco Bay Area job ads. It is a good proxy for the local demand. Bay Area is often a trend setter, and technologies which become popular here frequently gain broader adoption. The findings can therefore also be viewed as a leading indicator for other geographies.

Here are the key insights:

• “Mobile” appears in 30% of all ads winning popularity (or hype?) contest.
• Java continues to lead the pack among the development languages followed by Ruby, Python and PHP.
• MySQL is by far the most commonly mentioned relational database.
• NoSQL is featured prominently. Hadoop is first on the list of NoSQL databases followed by Cassandra, Redis and MongoDB.
• Linux has little contest among the operating systems. Ubuntu is mentioned more frequently than CentOS.
• Android is mentioned slightly more often than iOS/iPhone.
• jQuery is the most commonly mentioned JavaScript framework.
• Spring continues to be the most commonly mentioned Java framework.
• git outranks subversion among the source code management systems.
• Selenium is the most frequently mentioned testing tool.
• Drupal is the most often mentioned CMS tool.

I run similar analysis a year ago. For the most part results were similar. There are a few notable differences:

• Demand for mobile skills is accelerating. “Mobile” and “social” had similar mention frequency last year. This year “mobile” mentions are far ahead of “social”.
• NoSQL skills requests increased significantly.
• PHP mentions went down, Ruby went  up.
• git overtook subversion.
• Flash/ActionScript mentions went down.

List of the top 50 skills most commonly featured in the job ads is shown below.

Fig 1. Top 50 Technical Skills in Demand

Methodology:

• I run a term frequency analysis on job posts which appeared on craigslist in the SF Bay Area Internet Engineering category between 1st and 31st of January 2012.
• Count reflects number of posts a term appears in. Multiple mentions of the same term in a single post count as one.

Announcing the 2012 OnMedia 100 Top Private Companies

And here is more information:

500friends, Inc. Selected by AlwaysOn as OnMedia Top 100 Winner

The release includes primarily a set of smaller enhancements and fixes. Major new features – faster development mode & routing, explain queries and tagged logger – will benefit in particular larger applications.

A number of tools such as CruiseControl, Integrity, Jenkins, Bamboo, BuildMaster, or Teamcity can help you in implementing a CI process.

We are a Ruby on Rails shop and recently we started using tddium, a hosted test and CI service.

Benefits of using a SaaS CI product include:

• simple and quick configuration – short time to get CI going
• low costs – pay for only what you need
• faster test execution – tests run in parallel on multiple instances

Configuration of tddium is very straightforward. There is no need to acquire, setup and maintain a CI server. Providing you have test suites available, a few simple commands described at https://www.tddium.com/support/ is all what is required.

The resultant workflow is outlined below:

1. Developer commits a code change to github source code repository
2. Test run is automatically triggered
3. Upon test completion a notification is sent to developers indicating how many tests have passed and how many failed (if any)
4. Notification includes a link to a dashboard where test failures can be examined in more details

Related Posts

Do you need a Software QA Team?

To Saas or not to Saas

Why Ruby on Rails is a good fit for a startup

A high level comparison of the two options is outlined below:

From my perspective, what it boils down to is this:

1. If functional and performance requirements of your app can be supported by HTML5, go with HTML5. Smaller development effort and a shorter learning curve will result in lower overall costs and a faster time to market.
2. If you are relying heavily on the hardware features, require performance beyond what HTML5 can offer, or are building a complex application where maturity of technology is a significant factor, go native.
3. It is likely that the boundary between the two options will gradually shift in favor of HTML5.

Other posts on this topic

• HTML5 vs Native Apps: A Winning Mobile App Strategy
• Will HTML5 replace native apps? It might: here’s how to figure out when
• HTML5 versus Native Apps: The truth you need to know
• HTML5 vs Native: The Mobile App Debate

Historical Footnote

Five years ago I wrote the What technology platform to choose for development of mobile applications? post. It talks about J2ME, BREW, Symbian. Android and iOS are not mentioned – they had not been released yet at that time. Any guesses on what will be a preferred mobile development platform five years from now?

Related Posts

jQuery Mobile Tutorial Part I – Static Pages

jQuery Mobile Tutorial Part II – Dynamic Pages

jQuery Mobile Tutorial Part III – Managing Data

The application allows you to maintain a list of your favorite website and share sites from the list with other mobile users through QR codes. While building the application you will cover framework features such as creation of pages, forms, lists, dialog boxes, style themes. You will also create dynamic pages and manage data using local storage.

The tutorial assumes knowledge of HTML and JavaScript. No backend coding is required.

The tutorial source code is available at https://github.com/rtekie/shareqr. To keep things simple you can test the code locally using a desktop Chrome or Safari browser. Testing using a mobile emulator is another option. You can also access working application at http://rtekie.heroku.com/shareqr.html and try it on your mobile phone.

Part I of the tutorial covers framework basics – creation of static pages. Part II introduces dynamic pages. In Part III you will add data management features – ability to add, store and delete records – and complete the application.

Part I – Static Pages

1.1 Your first page

jQuery Mobile provides a basic page template which can be used as a starting point. The template is very well documented so we will dive right into the source code:

<!DOCTYPE html>
<html>
<head>
  <title>Share QR</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>

<body>
  <div data-role="page" id="home">
    <div data-role="header">
      <h1>Share QR</h1>
    </div>
    <div data-role="content">
      <p>Hello world!</p>
    </div>
    <div data-role="footer">
      <h4>Footer</h4>
    </div>
  </div>
</body>
</html>

Things to note are:

1. jQuery Mobile relies on HTML5. Hence the HTML5 doctype declaration.
2. jQuery Mobile requires jQuery and you need to include not only mobile framework files (jquery.mobile-1.0.min.js and jquery.mobile-1.0.min.css) but also the regular jQuery framework (jquery-1.6.4.min.js).
3. Viewport meta tag is used to initialize page dimensions and zoom level.
4. jQuery Mobile uses extensively HTML5 data- attributes to control page elements’ look and behavior. The first attribute introduced by this tutorial is data-role which is used to identify pages and page structure elements – header, content area and footer.

1.2 Adding a style

jQuery Mobile includes five pre-defined style themes. If no style is specified, the default theme is used. Let’s change header and footer color to blue. It is as simple as adding a data-theme="b" attribute to the header and footer. Here is the updated code:

<!DOCTYPE html>
<html>
<head>
  <title>Share QR</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">		
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
	
<body>
  <div data-role="page" id="home">
    <div data-role="header" data-theme="b">
      <h1>Share QR</h1>
    </div>
    <div data-role="content">
      <p>Hello world!</p>
    </div>
    <div data-role="footer" data-theme="b">
      <h4>Footer</h4>
    </div>
  </div>
</body>
</html>

1.3 Adding a second page and page navigation

Web pages designed for desktop are typically displayed by loading their own, separate html files. In the mobile world, pages are typically small and connectivity slower and sometimes problematic. Hence there are advantages of packaging multiple pages into a single html file. A file is loaded once and all pages contained within the file can be displayed without any additional network requests.

Page packaging is one of the features of jQuery Mobile.

To add a second page, first insert the page code into the html file containing your first page. We will add About as the second page:

  <div data-role="page" id="about">
    <div data-role="header" data-theme="b" data-position="fixed">
      <a href="#home" data-icon="home" data-iconpos="notext">Home</a>
      <h1>About</h1>
      <a href="#home" data-icon="arrow-l" data-rel="back">Back</a> 
    </div>
    <div data-role="content">
      <p>Share your favorite URLs with other mobile phone users through QR codes.</p>
    </div>
    <div data-role="footer" class="ui-bar" data-theme="b" data-position="fixed" data-id="footer">
      <a href="#about" data-icon="info">About</a>
    </div>
  </div>

Next we will add page navigation. Links to pages rely on page id, which has to be unique for each page. Home page has id=”home” hence a link to the home page will use href=”#home”. Similarly the About page has id=”about” and a link to it will use href=”#about”.
Let’s add a link to the About page in the footer of both pages:

<a href="#about">About</a>
 

The link is automatically rendered as a button. It can be further improved by adding an icon. jQuery Mobile includes a number of icons you can choose from. We will use the info icon.

<a href="#about" data-icon="info">About</a>
 

By default footer does not have any padding around buttons. To include  padding we’ll add class="ui-bar"to the footer. We’ll also add data-position="fixed" and data-id="footer" to persist footer and keep it at fixed vertical position between page transitions. Here is the updated footer code:

<div data-role="footer" class="ui-bar" data-theme="b" data-position="fixed" data-id="footer">
 

You can find out more about jQuery Mobile footer features at the Footer configuration page.

Now let’s add a link to the Home page in the header of both pages:

<a href="#home" data-icon="home">Home</a>
 

This time we would like to see an icon only button, and to accomplish that we will add a data-iconpos attribute.

<a href="#home" data-icon="home" data-iconpos="notext">Home</a>
 

There is one more button to add – a Back button in the header of the About page:

<a href="#home" data-icon="arrow-l" data-rel="back">Back</a>
 

Here we are using data-rel="back" attribute to indicate that the button should mimic behavior of a browser Back button.

You can find out more about jQuery Mobile header features at the Header bars page.

The complete code for Part I of the tutorial is shown below:

<!DOCTYPE html>
<html>
<head>
  <title>Share QR</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>

<body>

  <div data-role="page" id="home">
    <div data-role="header" data-theme="b" data-position="fixed">
      <a href="#home" data-icon="home" data-iconpos="notext">Home</a>
      <h1>Share QR</h1>
    </div>
    <div data-role="content">
      <p>Hello world!</p>
    </div>
    <div data-role="footer" class="ui-bar" data-theme="b" data-position="fixed" data-id="footer">
      <a href="#about" data-icon="info">About</a>
    </div>
  </div>

  <div data-role="page" id="about">
    <div data-role="header" data-theme="b" data-position="fixed">
      <a href="#home" data-icon="home" data-iconpos="notext">Home</a>
      <h1>About</h1>
      <a href="#home" data-icon="arrow-l" data-rel="back">Back</a>
    </div>
    <div data-role="content">
      <p>Share your favorite URLs with other mobile phone users through QR codes.</p>
    </div>
    <div data-role="footer" class="ui-bar" data-theme="b" data-position="fixed" data-id="footer">
      <a href="#about" data-icon="info">About</a>
    </div>
  </div>

</body>
</html>

This completes Part I. You can access work in progress application on your mobile phone at http://rtekie.heroku.com/shareqr1.3.html. Screen shots are shown below:

So far  we covered basic framework features and built two simple, static pages. In Part II we will add dynamic content and in Part III data management capabilities.

In Part I we developed simple static pages which form a foundation of the application we are building. In this part, we will start adding dynamic functionality.

The application will allow you to maintain a list of your favorite websites and share sites from the list with other mobile users through QR codes.

2.1 Adding a list

Let’s continue by adding a list of sites to the Home page. jQuery Mobile has a very strong list view capability. In Part III we will add ability to maintain the site list. For now let’s use a static, hardcoded list. Let’s start by replacing content area of the Home page with this:

    <div data-role="content">
      <ul data-role="listview">
        <li><a href="#qrcode">ctoinsights.wordpress.com</a></li>		  
        <li><a href="#qrcode">www.book-current.com</a></li>	
      </ul>
    </div>

Feel free to use any websites you like instead of the two included above.

Next we will add a page which will display QR code of a site:

  <div data-role="page" id="qrcode">
    <div data-role="header" data-theme="b" data-position="fixed">
      <a href="#home" data-icon="home" data-iconpos="notext">Home</a>
      <h1>QR Code
      <a href="#home" data-icon="arrow-l" data-rel="back">Back</a>
    </div>
    <div data-role="content">
    </div>
    <div data-role="footer" class="ui-bar" data-theme="b" data-position="fixed" data-id="footer">
    <a href="#about" data-icon="info">About</a>
    </div>
  </div>

At this point navigation between the Home page and QR Code page should be working. We are ready to start adding dynamic functionality.

2.2 Your first dynamic page

We will pass a site to be displayed on the QR Code page as a url parmeter. Let’s make one more change to the content of the Home page:

    <div data-role="content">
      <ul data-role="listview">
        <li><a href="#qrcode?url=http%3A%2F%2Fctoinsights.wordpress.com">ctoinsights.wordpress.com</a></li>		  
        <li><a href="#qrcode?url=http%3A%2F%2Fwww.book-current.com">www.book-current.com</a></li>	
      </ul>
    </div>

Parameters are encoded. In Part III we will handle encoding in the application code. For now, since we are hardcoding the site list, we are manually encoding the url parameters.

jQuery Mobile by default ignores url parameters. To handle them we need to start writing JavaScript code.

jQuery Mobile offers a number of custom events. One of them is pagebeforechange event. It can be used to capture requests to display the QR Code page and dynamically inject page content before presenting it to the user. Documented JavaScript code is shown below:

// Listen for any attempts to call changePage().
$(document).bind("pagebeforechange", function(e, data) {
	// We only want to handle changePage() calls where the caller is asking to load a page by URL.
	if (typeof data.toPage === "string") {
		// We only want to handle #qrcode url.
		var u = $.mobile.path.parseUrl(data.toPage);
		var qrcode = /^#qrcode/;
		if (u.hash.search(qrcode) !== -1) {
			// Display QR code for the selected URL.
			showQRCode(u, data.options);
			e.preventDefault();
		}
	}
});

// Load the QR Code for a specific url passed in as a parameter.
// Generate markup for the page, and then make that page the current active page.
function showQRCode(urlObj, options) {
	// Get the url parameter
	var qrUrl = decodeURIComponent(urlObj.hash.replace(/.*url=/, ""));

	// The page we use to display QR code is already in the DOM.
	// The id of the page we are going to write the content into is specified in the hash before the '?'.
	var	pageSelector = urlObj.hash.replace(/\?.*$/, "");

	if (qrUrl) {
		// Get the page we are going to write content into.
		var $page = $(pageSelector);

		// Get the header for the page.
		var $header = $page.children(":jqmData(role=header)");

		// Find the h1 element in the header and inject the hostname from the url.
		$header.find("h1").html(getHostname(qrUrl));

		// Get the content area element for the page.
		var $content = $page.children(":jqmData(role=content)");

		// The markup we are going to inject into the content area of the page.
		var markup = "<img class='center' src=https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=" + qrUrl + " alt=" + qrUrl + " />";

		// Inject the QR code markup into the content element.
		$content.html(markup);

		// Make sure the url displayed in the the browser's location field includes parameters
		options.dataUrl = urlObj.href;

		// Now call changePage() and tell it to switch to the page we just modified.
		$.mobile.changePage($page, options);
	}
}

// Extract hostname from a url.
function getHostname(url) {
	return decodeURIComponent(url).replace(/.*\/\//, "").replace(/\/.*$/, "");
}

We are using Google Chart API to display the QR code. Please also note the use of :jqmData selectors. Here is a paragraph from the jQuery Mobile Documentation explaining the selectors:

“When finding elements by their jQuery Mobile data attribute, please use the custom selector :jqmData(), as it automatically incorporates namespaced data attributes into the lookup when they are in use. For example, instead of calling $("div[data-role='page']"), you should use $("div:jqmData(role='page')"), which internally maps to $("div[data-"+ $.mobile.ns +"role='page']") without forcing you to concatenate a namespace into your selectors manually.”

To find out more about dynamically injected pages please click here.

Complete HTML code to be used in conjunction with the JavaScript code we have just covered is shown below:

<!DOCTYPE html>
<html>
<head>
  <title>Share QR</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">		
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
  <link rel="stylesheet" href="shareqr2.2.css" />
  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
  <script src="shareqr2.2.js"></script>
</head>
	
<body>

  <div data-role="page" id="home">
    <div data-role="header" data-theme="b" data-position="fixed">
      <a href="#home" data-icon="home" data-iconpos="notext">Home</a>
      <h1>Share QR</h1>
    </div>
    <div data-role="content">
      <ul data-role="listview">
        <li><a href="#qrcode?url=http%3A%2F%2Fctoinsights.wordpress.com">ctoinsights.wordpress.com</a></li>		  
        <li><a href="#qrcode?url=http%3A%2F%2Fwww.book-current.com">www.book-current.com</a></li>	
      </ul>
    </div>
    <div data-role="footer" class="ui-bar" data-theme="b" data-position="fixed" data-id="footer">
      <a href="#about" data-icon="info">About</a>
    </div>
  </div>

  <div data-role="page" id="qrcode">
    <div data-role="header" data-theme="b" data-position="fixed">
      <a href="#home" data-icon="home" data-iconpos="notext">Home</a>
      <h1>QR Code</h1>
      <a href="#home" data-icon="arrow-l" data-rel="back">Back</a>
    </div>
    <div data-role="content">
    </div>
    <div data-role="footer" class="ui-bar" data-theme="b" data-position="fixed" data-id="footer">
    <a href="#about" data-icon="info">About</a>
    </div>
  </div>

  <div data-role="page" id="about">
    <div data-role="header" data-theme="b" data-position="fixed">
      <a href="#home" data-icon="home" data-iconpos="notext">Home</a>
      <h1>About</h1>
      <a href="#home" data-icon="arrow-l" data-rel="back">Back</a> 
    </div>
    <div data-role="content">
      <p>Share your favorite URLs with other mobile phone users through QR codes.</p>
    </div>
    <div data-role="footer" class="ui-bar" data-theme="b" data-position="fixed" data-id="footer">
      <a href="#about" data-icon="info">About</a>
    </div>
  </div>

</body>
</html>

We also added a small css file to center display of the QR code.

img.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

This completes Part II of the Tutorial. You can access work in progress application on your mobile phone at http://rtekie.heroku.com/shareqr2.2.html. Screen shots are shown below:

In Part III we will add site list management capabilities and complete the application.

The Tutorial walks you through a process of building an application which will allow you to maintain a list of your favorite websites and share sites from the list with other mobile users through QR codes. In Part II we implemented functionality to display QR codes for sites from a static, hardcoded list. In this part we will add ability to maintain the list of sites.

3.1 List storage

Before we start adding and deleting list items we need to have a mechanism to store a list. We will use HTML5 local storage.

Let’s start by adding a function to retrieve a list from the local storage. It will also initialize the list using defaults if a list cannot be found in the local storage.

// Retrieve a list of URLs from the local storage.
// Use defaults if storage has not been initialized yet.
// URLs are serialized using JSON for storage.
function getMyUrls() {
	var myUrls;
	var storedUrls = localStorage.getItem("myUrls");
	if (storedUrls) {
		// Deserialize URLs
		myUrls = JSON.parse(storedUrls);
	}
	else {
		// Initialize defaults
		myUrls = [encodeURIComponent("http://ctoinsights.wordpress.com"), encodeURIComponent("http://www.book-current.com")];
		localStorage.setItem("myUrls", JSON.stringify(myUrls));
	}
	return myUrls;
}

You can of course use your preferred sites to initialize the list.

Now we can use the list to update cotent of the Home page:

// Display a list of urls you want to share.
function showUrlList(urlObj, options) {
	// Get list of urls
	var myUrls = getMyUrls();

	// Get the page we are going to write our content into.
	var $page = $("#home");
	// Get the content area element for the page.
	var $content = $page.children(":jqmData(role=content)");

	// Build the list of urls.
	var markup = "<ul data-role='listview'>";
  for (var i=0; i<myUrls.length; i++) {
		markup = markup + "<li><a href='#qrcode?url=" + myUrls[i] + "'>" + getHostname(myUrls[i]) + "</a></li>";
  }
	markup = markup + "</ul>";
	// Inject the list markup into the content element.
	$content.html(markup);

	// Pages are lazily enhanced. We call page() on the page
	// element to make sure it is always enhanced before we
	// attempt to enhance the listview markup we just injected.
	$page.page();

	// Enhance the listview we just injected.
	$content.find( ":jqmData(role=listview)" ).listview();

	// Now call changePage() and tell it to switch to the page we just modified.
	$.mobile.changePage($page, options);
}

Next we have to modify pagebeforechange event handler to catch requests to display the Home page in addition to the previously implemented code handling QR Code page display requests:

// Listen for any attempts to call changePage().
$(document).bind( "pagebeforechange", function(e, data) {
	// We only want to handle changePage() calls where the caller is asking us to load a page by URL.
	if (typeof data.toPage === "string") {
		// We only want to handle a subset of URLs.
		var u = $.mobile.path.parseUrl(data.toPage);
		var home = /^#home/;
		var qrcode = /^#qrcode/;
		if (u.hash.search(home) !== -1) {
			// Display a list of URLs.
			showUrlList(u, data.options);
			e.preventDefault();
		}
		else if (u.hash.search(qrcode) !== -1) {
			// Display QR code for the selected URL.
			showQRCode(u, data.options);
			e.preventDefault();
		}
	}
});

Finally we have to make sure that the Home page is properly populated when loaded for the first time.

// Refresh home page using dynamic url list.
$(document).ready(function() {
	$.mobile.changePage("#home");
});

This replicates functionality developed in Part II except that the site list is now pulled from the local storage instead of being hardcoded.

3.2 Adding sites

To be able to add a site, first we will create an additional page with a form to capture a site url.

  <div data-role="page" id="addurl">
    <div data-role="header" data-theme="b" data-position="fixed">
      <a href="#home" data-icon="home" data-iconpos="notext">Home</a>
      <h1>Add URL</h1>
      <a href="#home" data-icon="arrow-l" data-rel="back">Back</a>
    </div>
    <div data-role="content">
      <form action="#home" method="POST" name="addurl" id="addurl">
        <div data-role="fieldcontain">
          <label for="url">URL:</label>
          <input type="url" name="url" id="url" value="http://" />
          <button>Add</button>
        </div>
      </form>
    </div>
    <div data-role="footer" class="ui-bar" data-theme="b" data-position="fixed" data-id="footer">
      <a href="#about" data-icon="info">About</a>
    </div>
  </div>

Next we will add a a link to the Add URL page on the Home page header.

      <a href="#addurl" data-icon="plus">Add URL</a>

We will also have to capture the form submit event and save a newly entered url in the local storage.

// When a new url is added, save it in the local storage and display the home page.
$("#addurl").live("submit" , function(e, data) {
	var url = $("#url").val();
	addUrl(url);
	$.mobile.changePage("#home");
	return false;
});

// Add a URL to the list.
function addUrl(url) {
	var myUrls = getMyUrls();
	// Check for duplicates
	if (findUrl(url) === -1) {
		myUrls = myUrls.concat(encodeURIComponent(url));
		localStorage.setItem("myUrls", JSON.stringify(myUrls));
	}
}

// Find URL in the url list.
// Return index or -1 if not found.
function findUrl(url) {
	var index = -1;
	var myUrls = getMyUrls();
	for (var i=0; i < myUrls.length; i++) {
		if (myUrls[i] === encodeURIComponent(url)) {
			return i;
		}
	}
	return index;
}

3.3 Deleting sites

List management would not be complete without an ability to delete items from the list. We will start by adding Delete buttons to the list items on the Home page. Let’s modify the showUrlList function.

	// Build the list of urls.
	var markup = "<ul data-role='listview' data-split-icon='delete'>";
  for (var i=0; i<myUrls.length; i++) {
		markup = markup + "<li><a href='#qrcode?url=" + myUrls[i] + "'>" + getHostname(myUrls[i]) + "</a>" + "<a href='#delurl?url=" + myUrls[i] + "' data-rel='dialog'>Delete</a></li>";
  }
	markup = markup + "</ul>";

We are using a split button list. You can find out more about jQuery Mobile list capabilities here.

Clicking on a Delete button will open up a Delete URL dialog box. We need to add the dialog box to the html file.

  <div data-role="page" id="delurl">
    <div data-role="header" data-theme="b" data-position="fixed">
      <h1>Delete URL?</h1>
    </div>
    <div data-role="content">
      <p class="center" id="url_prompt">url</p>
      <form action="#home" method="POST" name="delurl" id="delurl">
        <div data-role="fieldcontain">
          <input type="hidden" name="url_value" id="url_value" value="url" />
          <div class="ui-grid-a">
            <div class="ui-block-a">
              <a href="#home" data-role="button" data-rel="back" data-direction="reverse">Cancel</a>
            </div>
            <div class="ui-block-b">
              <input type="submit" value="Delete" />
            </div>
          </div>
        </div>
      </form>
    </div>
    <div data-role="footer" class="ui-bar" data-theme="b" data-position="fixed" data-id="footer">
    </div>
  </div>

Dialog box buttons are positioned using a layout grid.

The dialog box has to be dynamically populated with a site url. We need to modify pagebeforechange event handler to capture requests to display the dialog box.  We also need to write a function to update content of the dialog box.

// Listen for any attempts to call changePage().
$(document).bind( "pagebeforechange", function(e, data) {
	// We only want to handle changePage() calls where the caller is
	// asking us to load a page by URL.
	if (typeof data.toPage === "string") {
		// We only want to handle a subset of URLs.
		var u = $.mobile.path.parseUrl(data.toPage);
		var home = /^#home/;
		var qrcode = /^#qrcode/;
		var delurl = /^#delurl/;
		if (u.hash.search(home) !== -1) {
			// Display a list of URLs.
			showUrlList(u, data.options);
			e.preventDefault();
		}
		else if (u.hash.search(qrcode) !== -1) {
			// Display QR code for the selected URL.
			showQRCode(u, data.options);
			e.preventDefault();
		}
		else if (u.hash.search(delurl) !== -1) {
			// Display URL delete confirmation dialog box.
			showDelUrl(u, data.options);
			e.preventDefault();
		}
	}
});

// Display Delete URL confirmation dialog for a specific url passed in as a parameter.
function showDelUrl(urlObj, options) {
	// Get the url parameter
	var url = decodeURIComponent(urlObj.hash.replace(/.*url=/, ""));

	// The pages we use to display our content are already in
	// the DOM. The id of the page we are going to write our
	// content into is specified in the hash before the '?'.
	var	pageSelector = urlObj.hash.replace(/\?.*$/, "");

	// Get the page we are going to write our content into.
	var $page = $(pageSelector);

	// Get the content area element for the page.
	var $content = $page.children(":jqmData(role=content)");

	// Set url elements of the page.
	$content.find("#url_value").val(url);
	$content.find("#url_prompt").html(getHostname(url));

	// Pages are lazily enhanced. We call page() on the page
	// element to make sure it is always enhanced.
	$page.page();

	// Now call changePage() and tell it to switch to the page we just modified.
	$.mobile.changePage($page, options);
}

Finally we need to capture the dialog box submit requests and remove a site from the local storage.

// When a url is deleted, remove it from the local storage and display the home page.
$("#delurl").live("submit" , function(e, data) {
	var url = $("#url_value").val();
	delUrl(url);
	$.mobile.changePage("#home");
	return false;
});

// Delete URL from the list.
function delUrl(url) {
	var myUrls = getMyUrls();
	var index = findUrl(url);
	if (index !== -1) {
		myUrls.splice(index, 1);
		localStorage.setItem("myUrls", JSON.stringify(myUrls));
	}
}

Complete source code is shown below:

<!DOCTYPE html>
<html>
<head>
  <title>Share QR</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
  <link rel="stylesheet" href="shareqr3.3.css" />
  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
  <script src="shareqr3.3.js"></script>
</head>

<body>

  <div data-role="page" id="home">
    <div data-role="header" data-theme="b" data-position="fixed">
      <a href="#home" data-icon="home" data-iconpos="notext">Home</a>
      <h1>Share QR</h1>
      <a href="#addurl" data-icon="plus">Add URL</a>
    </div>
    <div data-role="content">
    </div>
    <div data-role="footer" class="ui-bar" data-theme="b" data-position="fixed" data-id="footer">
      <a href="#about" data-icon="info">About</a>
    </div>
  </div>

  <div data-role="page" id="qrcode">
    <div data-role="header" data-theme="b" data-position="fixed">
      <a href="#home" data-icon="home" data-iconpos="notext">Home</a>
      <h1>QR Code</h1>
      <a href="#home" data-icon="arrow-l" data-rel="back">Back</a>
    </div>
    <div data-role="content">
    </div>
    <div data-role="footer" class="ui-bar" data-theme="b" data-position="fixed" data-id="footer">
    <a href="#about" data-icon="info">About</a>
    </div>
  </div>

  <div data-role="page" id="addurl">
    <div data-role="header" data-theme="b" data-position="fixed">
      <a href="#home" data-icon="home" data-iconpos="notext">Home</a>
      <h1>Add URL</h1>
      <a href="#home" data-icon="arrow-l" data-rel="back">Back</a>
    </div>
    <div data-role="content">
      <form action="#home" method="POST" name="addurl" id="addurl">
        <div data-role="fieldcontain">
          <label for="url">URL:</label>
          <input type="url" name="url" id="url" value="http://" />
          <button>Add</button>
        </div>
      </form>
    </div>
    <div data-role="footer" class="ui-bar" data-theme="b" data-position="fixed" data-id="footer">
      <a href="#about" data-icon="info">About</a>
    </div>
  </div>

  <div data-role="page" id="delurl">
    <div data-role="header" data-theme="b" data-position="fixed">
      <h1>Delete URL?</h1>
    </div>
    <div data-role="content">
      <p class="center" id="url_prompt">url</p>
      <form action="#home" method="POST" name="delurl" id="delurl">
        <div data-role="fieldcontain">
          <input type="hidden" name="url_value" id="url_value" value="url" />
          <div class="ui-grid-a">
            <div class="ui-block-a">
              <a href="#home" data-role="button" data-rel="back" data-direction="reverse">Cancel</a>
            </div>
            <div class="ui-block-b">
              <input type="submit" value="Delete" />
            </div>
          </div>
        </div>
      </form>
    </div>
    <div data-role="footer" class="ui-bar" data-theme="b" data-position="fixed" data-id="footer">
    </div>
  </div>

  <div data-role="page" id="about">
    <div data-role="header" data-theme="b" data-position="fixed">
      <a href="#home" data-icon="home" data-iconpos="notext">Home</a>
      <h1>About</h1>
      <a href="#home" data-icon="arrow-l" data-rel="back">Back</a>
    </div>
    <div data-role="content">
      <p>Share your favorite URLs with other mobile phone users through QR codes.</p>
    </div>
    <div data-role="footer" class="ui-bar" data-theme="b" data-position="fixed" data-id="footer">
      <a href="#about" data-icon="info">About</a>
    </div>
  </div>

</body>
</html>

// Refresh home page using dynamic url list.
$(document).ready(function() {
	$.mobile.changePage("#home");
});

// Listen for any attempts to call changePage().
$(document).bind( "pagebeforechange", function(e, data) {
	// We only want to handle changePage() calls where the caller is
	// asking us to load a page by URL.
	if (typeof data.toPage === "string") {
		// We only want to handle a subset of URLs.
		var u = $.mobile.path.parseUrl(data.toPage);
		var home = /^#home/;
		var qrcode = /^#qrcode/;
		var delurl = /^#delurl/;
		if (u.hash.search(home) !== -1) {
			// Display a list of URLs.
			showUrlList(u, data.options);
			e.preventDefault();
		}
		else if (u.hash.search(qrcode) !== -1) {
			// Display QR code for the selected URL.
			showQRCode(u, data.options);
			e.preventDefault();
		}
		else if (u.hash.search(delurl) !== -1) {
			// Display URL delete confirmation dialog box.
			showDelUrl(u, data.options);
			e.preventDefault();
		}
	}
});

// When a new url is added, save it in the local storage and display the home page.
$("#addurl").live("submit" , function(e, data) {
	var url = $("#url").val();
	addUrl(url);
	$.mobile.changePage("#home");
	return false;
});

// When a url is deleted, remove it from the local storage and display the home page.
$("#delurl").live("submit" , function(e, data) {
	var url = $("#url_value").val();
	delUrl(url);
	$.mobile.changePage("#home");
	return false;
});

// Display a list of urls you want to share.
function showUrlList(urlObj, options) {
	// Get list of urls
	var myUrls = getMyUrls();

	// Get the page we are going to write our content into.
	var $page = $("#home");
	// Get the content area element for the page.
	var $content = $page.children(":jqmData(role=content)");

	// Build the list of urls.
	var markup = "<ul data-role='listview' data-split-icon='delete'>";
  for (var i=0; i<myUrls.length; i++) {
		markup = markup + "<li><a href='#qrcode?url=" + myUrls[i] + "'>" + getHostname(myUrls[i]) + "</a>" + "<a href='#delurl?url=" + myUrls[i] + "' data-rel='dialog'>Delete</a></li>";
  }
	markup = markup + "</ul>";
	// Inject the list markup into the content element.
	$content.html(markup);

	// Pages are lazily enhanced. We call page() on the page
	// element to make sure it is always enhanced before we
	// attempt to enhance the listview markup we just injected.
	$page.page();

	// Enhance the listview we just injected.
	$content.find( ":jqmData(role=listview)" ).listview();

	// Now call changePage() and tell it to switch to the page we just modified.
	$.mobile.changePage($page, options);
}

// Load the QR Code for a specific url passed in as a parameter.
// Generate markup for the page, and then make that page the current active page.
function showQRCode(urlObj, options) {
	// Get the url parameter
	var qrUrl = decodeURIComponent(urlObj.hash.replace(/.*url=/, ""));

	// The page we use to display QR code is already in the DOM.
	// The id of the page we are going to write the content into is specified in the hash before the '?'.
	var	pageSelector = urlObj.hash.replace(/\?.*$/, "");

	if (qrUrl) {
		// Get the page we are going to write content into.
		var $page = $(pageSelector);

		// Get the header for the page.
		var $header = $page.children(":jqmData(role=header)");

		// Find the h1 element in the header and inject the hostname from the url.
		$header.find("h1").html(getHostname(qrUrl));

		// Get the content area element for the page.
		var $content = $page.children(":jqmData(role=content)");

		// The markup we are going to inject into the content area of the page.
		var markup = "<img class='center' src=https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=" + qrUrl + " alt=" + qrUrl + " />";

		// Inject the QR code markup into the content element.
		$content.html(markup);

		// Make sure the url displayed in the the browser's location field includes parameters
		options.dataUrl = urlObj.href;

		// Now call changePage() and tell it to switch to the page we just modified.
		$.mobile.changePage($page, options);
	}
}

// Display Delete URL confirmation dialog for a specific url passed in as a parameter.
function showDelUrl(urlObj, options) {
	// Get the url parameter
	var url = decodeURIComponent(urlObj.hash.replace(/.*url=/, ""));

	// The pages we use to display our content are already in
	// the DOM. The id of the page we are going to write our
	// content into is specified in the hash before the '?'.
	var	pageSelector = urlObj.hash.replace(/\?.*$/, "");

	// Get the page we are going to write our content into.
	var $page = $(pageSelector);

	// Get the content area element for the page.
	var $content = $page.children(":jqmData(role=content)");

	// Set url elements of the page.
	$content.find("#url_value").val(url);
	$content.find("#url_prompt").html(getHostname(url));

	// Pages are lazily enhanced. We call page() on the page
	// element to make sure it is always enhanced.
	$page.page();

	// Now call changePage() and tell it to switch to the page we just modified.
	$.mobile.changePage($page, options);
}

// Extract hostname from a url.
function getHostname(url) {
	return decodeURIComponent(url).replace(/.*\/\//, "").replace(/\/.*$/, "");
}

// Retrieve a list of URLs from the local storage.
// Use defaults if storage has not been initialized yet.
// URLs are serialized using JSON for storage.
function getMyUrls() {
	var myUrls;
	var storedUrls = localStorage.getItem("myUrls");
	if (storedUrls) {
		// Deserialize URLs
		myUrls = JSON.parse(storedUrls);
	}
	else {
		// Initialize defaults
		myUrls = [encodeURIComponent("http://ctoinsights.wordpress.com"), encodeURIComponent("http://www.book-current.com")];
		localStorage.setItem("myUrls", JSON.stringify(myUrls));
	}
	return myUrls;
}

// Find URL in the url list.
// Return index or -1 if not found.
function findUrl(url) {
	var index = -1;
	var myUrls = getMyUrls();
	for (var i=0; i < myUrls.length; i++) {
		if (myUrls[i] === encodeURIComponent(url)) {
			return i;
		}
	}
	return index;
}

// Add a URL to the list.
function addUrl(url) {
	var myUrls = getMyUrls();
	// Check for duplicates
	if (findUrl(url) === -1) {
		myUrls = myUrls.concat(encodeURIComponent(url));
		localStorage.setItem("myUrls", JSON.stringify(myUrls));
	}
}

// Delete URL from the list.
function delUrl(url) {
	var myUrls = getMyUrls();
	var index = findUrl(url);
	if (index !== -1) {
		myUrls.splice(index, 1);
		localStorage.setItem("myUrls", JSON.stringify(myUrls));
	}
}

We also made a small addition to the css file to center display of a url in the Delete URL dialog box.

p.center {
	text-align: center;
}
img.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

This completes the Tutorial. We built a simple but fully functional web application utilizing many features of jQuery Mobile framework. You can access the application on your mobile phone at http://rtekie.heroku.com/shareqr3.3.html. Sample screen shots are shown below:

You can find more tutorials and other resources at http://jquerymobile.com/resources/.

Technical Skills in Demand was number two. I will be publishing a 2012 iteration of the post this quarter.

Trac uses SQLite database and exporting data was not an issue. Lighthouse does not have a bulk import capability but it does have a comprehensive API. To migrate data all we had to do is write a simple script.

# Migrate records from a Trac database to LighthouseApp
require 'rubygems'
require 'sqlite3'
require 'lib/lighthouse.rb' # download from https://github.com/Caged/lighthouse-api

# Connect to Lighthouse API
Lighthouse.account = 'YOUR LIGHTHOUSE ACCOUNT'
Lighthouse.token = 'YOUR LIGHTHOUSE API TOKEN'
project = Lighthouse::Project.find(:all).first
puts "MIGRATING TICKETS TO PROJECT: #{project.name}"

# Connect to database
db = SQLite3::Database.new("trac.db")

# Retrieve open trac ticket records
columns, *rows = db.execute2("select * from ticket t where t.status in ('new', 'assigned') order by t.id")

puts "TICKET TABLE COLUMNS"
  (0..columns.length-1).each do |i|
  puts "#{i}:#{columns[i]}"
end

# Process ticket records
rows.each do |row|
  puts row[0] # trac ticket ID
  # Create a new Lighthouse ticket
  ticket = Lighthouse::Ticket.new(:project_id => project.id)
  ticket.title = row[14] # summary column
  ticket.body = row[15] # description column
  # Additional data mapings go here

  # Get trac ticket changes and append to the Lighthouse ticket
  col, *updates = db.execute2("select newvalue from ticket_change where ticket=? and field = 'comment'", row[0])
  updates.each do |update|
    upd = update[0]
    ticket.body << "\n" + upd if !upd.empty?
  end

  # Display progress
  puts ticket.title
  puts ticket.body
  ticket.save
end