Maple Hill Cemetery Find a Grave App

Just last summer, I did a project for the Dorset Historical Society, where I had to query, display, and manipulate some data for them in the browser. They needed me to create an app where a user could:

1. Search for a grave
2. See information on the grave (lot number, location, date of death, date of birth, etc.)
3. Navigate to the grave (via Google maps or another application)

At the time, they had all of their information in a Microsoft Excel spreadsheet. Joe helped them upload their data to an easy to use relational database called Airtable. If you have never worked with a database and are interested in working in data visualization, Airtable may or may not be the right thing for you. In saying it is a “relational database” I take away some of the power of what it does. It is a really useful tool that provides good abstractions when dealing with related data (Ie. data where entries reference other tables), so keep in mind, Airtable takes some of nitty gritty details (ex: pivot tables) out of working with relational data. If you want to get into data visualization, I recommend getting comfortable with SQL (note that sql is not a database, but a language for interfacing with many different databases).

Once the backend was setup, I chose to use AngularJS and Bootstrap 3 (version 4 beta out now!).

The standard business logic of this project was fun and easy to write (the initial draft was composed in an afternoon listening to 1979 by The Smashing Pumpkins on a loop). I think the most interesting take away from the project was using the Web History api to create a fluid paginated experience on a single page app. Here is a snippet of some of that code:

ctrl.readURL = function(loc){
	if(loc.search.substring(1)){
		var data = angular.fromJson(decodeURI(loc.search.substring(1)));
		ctrl.lot = data.lot;
		ctrl.burial = data.burial;
		ctrl.view = 'search';
		if(ctrl.lot!==""&&ctrl.lot){
			ctrl.view = 'lot';
		} else if(ctrl.burial!==""&&ctrl.burial) {
			ctrl.view = 'burial';
			console.log('read to disp burial');
		}
		console.log('decoded: ',data);
	} else {
		ctrl.burial = "";
		ctrl.lot = "";
		ctrl.view = "search";
		ctrl.query = "";
	}
};

ctrl.writeURL = function(){
	var data = {
		lot: ctrl.lot,
		burial: ctrl.burial
	};
	window.history.pushState({},'',window.location.pathname+"?"+encodeURI(angular.toJson(data)));
};

// ... more business logic ... //

ctrl.init = function(){
    // ... more business logic ... //
	ctrl.readURL(window.location);
    // ... more business logic ... //
};

ctrl.queryCallback = function(data, echoOff){
	if(!echoOff)ctrl.writeURL();
	ctrl.dataset = data.records;
	$document[0].title = "Maple Hill Cemetery Database";
}

By pushing the state of the app onto window.history, users can use the forwards and backwards navigation in their browsers to interact with our app. I think that supporting default controls is something commonly lost when developers choose to create single page apps, and it’s a real shame. When you reinvent how users should interact with the web on every site you build, you leave a lot of people behind. There is no need to add a back button to your page when there is already one in the browser, especially when there is a good JS API supported by all modern browsers out there! On that note, I’ll end this post with a quick PSA for frontend web developers: Read the MDN docs! If you are solving a common problem there is probably an API, and more importantly documentation out there already! They will help you create better, more native experiences.

– Find a grave app: http://www.dorsetvthistory.org/cemetery/index.html
– MDN Docs https://developer.mozilla.org/en-US/docs/Web
– Github with full source code https://github.com/CharlieCodex/maple-hill-cemetery