The 48 hour mobile web app: Drunken Stumble

Last weekend I participated in the Boston Hack Day Challenge, a 48 hour (so I’m not sure why they called it a hack day) competition sponsored by the Boston Globe and held in the MassChallenge workspace. The goal of the event was to develop tools that would improve the lives of Bostonians. My team won “Best Mobile App” as well as the “Crowd Favorite” award for the pub crawl app we built: Drunken Stumble.

Update: You can also read about the process from some of my teammates: @nikibrown on the design, @unruthless on frontend and whip-cracking, and @mikemiles86 on the backend and interface.

(And if you’re wondering how a pub crawl app would improve the lives of Bostonians, you must not be from Boston.)

About the Project

Our team formed Friday night. On the frontend we had @nikibrown (designer) and @unruthless (frontend developer)—who knew each other prior to the event. On the backend we had @mikemiles86 (application developer) and myself (API and interface developer)—who happened to be standing near the cheese table.

Together—and with the muse of the open bar—we came up with the idea of creating an application that would help people perform a pub crawl. While other teams proposed concept demos and APIs, we set our goal to be the delivery of a complete product by the end of the weekend. Defining a minimum viable product meant keeping a lot of great ideas in the parking lot (like drink lists and multi-user crawls) but helped us focus on delivering a tight, attractive and functional pub-crawl application that lets you:

  • use your smartphone to find nearby pubs

  • get walking directions to that pub

  • invite your friends to the pub via social media (Twitter and Facebook)

  • find the next pub for your crawl and get directions to there from your current pub

  • track your nightly progress (or revisit it the next morning)

  • call a cab home at the end of the night

About the App

We built Drunken Stumble as an HTML5 mobile web application—testing it on both iPhone and Android. As an HTML5 mobile web app, we can access smartphone features (like GPS and Portrait/Landscape modes) as well as quickly write, test and deploy. Both @mikemiles86 and myself are Drupal/PHP developers so (with some reservations) we decided to use Drupal as a framework—using its paths, forms, database and template systems and nothing else.

Planning documents

I focused most of my development on interfacing with external APIs. Originally we planned on using Yelp to provide business data for locating pubs, but their API is extremely limited with only 100 lookups per day. Fortunately, we found an awesome service called SimpleGeo that currently offers unlimited lookups for businesses based upon location. Using SimpleGeo we were able to quickly write a rich, location-aware application that works anywhere in the United States, not just in Boston.

Once we knew we had a source for business data, the next step was telling the application where you are. HTML5 offers native geolocation which means we can (politely) request exact location data based on your smartphone’s GPS. If your smartphone doesn’t have GPS (or it’s turned off) you can type in an address and we use Google Maps to geocode it into a latitude/longitude. If you do use your GPS, we also do a reverse geocode (again using Google Maps) to show you your street-level address to confirm that’s actually where you are (“ 42.331528,-70.94425” could be in the middle of Boston Harbor for all I know).

Google Directions is the special sauce that ties it all together. We provide your starting location and the location of your next pub and Google Directions provides walking instructions and waypoints along the way. We display the walking directions and overlay the waypoints on top of a (static) Google Map. Unfortunately, Google Direction’s API also has a rather low limit of lookups (2,500/day), so should we go over our limit (as we did about 2am Sunday morning), we alternatively display a link that will launch your smartphone’s native maps app (or push you to Google Maps directly) to get directions there.

There was one last benefit of using SimpleGeo’s well-populated business database: our app’s design isn’t limited to just pubs. For example, we decided rather late in the process to offer a list of local taxicab phone numbers at the end of the pub crawl. Because we had already tapped into the SimpleGeo API, we just needed to filter nearby businesses for “taxis”, rather than “bars & pubs”. Which is an important thing to keep in mind: with a few minor changes, our app can facilitate routing for any type of business or geographically based event—like a taco crawl or artists’ open studios.

About the process

The process was awesome. We got down to business about 8:00pm on Friday night and went live at 1:45pm on Sunday. Sure, we missed deadlines, our final feature list shrunk (and the parking lot grew), the architecture is far from “robust”, and the final design didn’t match our initial sketches (it was better!), but we met our goal of delivering a complete and functional product.

I think it was our focus on “completeness” that helped us win more awards than any other team (2 awards). Other than a few all-hands decisions, our small and diverse team focused separately on our individual areas and integrated as necessary—@mikemiles86 and I used Git to sync progress on the backend, while I think the frontend mostly looked over each other’s shoulders. For me that meant moving from API wrangling at the start of the project to templating at the end. I also can’t overstate the value of @mikemiles86 pulling an all nighter on Saturday (the rest of us ejected at 3am for about 4 hours of sleep)

The Crowd Favorite award was not only a function of our easy-to-understand concept, but also the stellar work of our frontend team. @nikibrown quickly produced strong branding and interface mockups that were key to creating early buzz: as other teams walked around and mingled, we could easily show off our idea. @unruthless became our de facto project manager and spokeswomen, explaining the app to visitors and pushing progress updates to Twitter and the #bostonhack hashtag for the event. We also lived our values, bringing in a wide selection of beer to carry us through Saturday and Sunday (and sharing it didn’t hurt our chances of winning the Crowd-Favorite award either).

About the future

It’s only been a few days since the event but we’ve kept up a steady stream of chatter over Twitter and pushed a few minor updates to the server too. The intensive hack model worked really well for building a minimally viable product, but time will tell whether we can keep the momentum and updates coming—turning Drunken Stumble into a maximally functional application.

In the meantime though, happy stumbling, sober or otherwise.


How to decorate your office without really trying

Tonight I watched the movie musical How to Succeed in Business Without Really Trying. I was shocked, though not surprised, to discover that all of the office furniture from this 1967 film is the same furniture I have in my office at UMass Boston. The scene above is more representative—the desk and shelving are the same (and I used to have that typewriter stand)—but the orange chair in the scene below is mine.


Notes from the City of Boston’s Open311 / Citizens Connect API Developer Meeting

Today I attended a developer meeting at Boston City Hall for their Citizen Connect API, a to-be-launched Open311 implementation. The city currently has official iPhone and Android apps that allow community members to submit broken streetlights, potholes, graffiti and snow removal, but the intent of the “open” part is to allow unaffiliated developers to integrate the system into their own applications. The other developers attending were the 7-person Boston Code for America crew (who just arrived a few days before), SeeClickFix and a university researcher (the latter 2 via teleconference).

The City of Boston uses a Lagan CRM system to create and track tickets and cases. To feed that ticketing system the city offers constituent services in person, via telephone (the meeting was held next to the call center which had ~10 agents active at the time), via the web, and through the smartphone apps. The Lagan system tracks 150-170 types of tickets, but Boston currently exposes only 6 of them through Open311 API (streetlights, potholes, graffiti, 2 types of snow removal, and other); this decision was explained as being driven by the UI needs of the official smartphone apps. The Open311 system is only a data bridge into the Lagan CRM and thus won’t support any additional metadata or external decisioning (this dismissed a Code for America fellow’s suggestion of voting on tickets).

The API is not currently available. The city estimates 2 - 3 weeks until they have a test server up, and from there they will evaluate whether to give applications access to the live system. The test server will be a sandbox that is either refreshed every 24 hours, has new data streamed to it, or may simulate workflows (e.g. submit, review, comment, close)—it was still in discussion.

In addition to the Open311 API, the city also offers data dumps of its entire ticketing system, offset by 24 hours. Unfortunately, those data dumps don’t include the channel through which they were inputted, e.g. it’s not recorded whether the ticket came thru Open311, telephone, web or in person. This is allegedly through the city’s Data Hub / Data Dashboard, but I can’t find it.

The City of Boston is taking a more deliberate and restrictive approach than MassDOT/MBTA in opening up their data, though CRM tickets are clearly different than bus/train route and dispatch data. The university researcher’s (Ben Clark) use case for the data was spot-on: determining who is utilizing these smartphone tools, and importantly who isn’t. Time will tell how the influence of outside software developers will push the city’s implementation—and how will it effect less-technology focused solutions.

I was really excited to meet the Code for America crew as they are bringing a lot of excitement and energy to the gov data scene. I did get the impression that they were unprepared for managing institutional forces: there was a question about why the city couldn’t devote more IT resources to the project that were answered with some allusions to Dilbert (without acknowledging that the current capital budget was probably set 14 months ago). Open311 doesn’t seem like CfA’s primary focus in Boston, but if this was their first City of Boston meeting, I think they learned a lot.


Authenticity and such

I read several books on authenticity last autumn. Below is from Andrew Potter’s The Authenticity Hoax: How We Get Lost Finding Ourselves, which is representative of the book as a whole—thought provoking stuff with the occasional reactionary junk:

[Lionel] Trilling suggests that the way authenticity “has become part of the moral slang of our day points to the peculiar nature of our fallen condition, our anxiety over the credibility of existence and of individual existences.” What he is highlighting here is the biblical texture that permeates the whole discourse of authenticity: in the beginning, humans lived in a state of original authenticity, where all was harmony and unity. At some point there was a great discord, and we became separated from nature, from society, and even from ourselves. Ever since, we have been living in a fallen state, and our great spiritual project is to find our way back to that original and authentic unity.

What led to this apparent separation was nothing less than the birth of the world. Characterized by the rise of secularism, liberalism, and the market economy, is the reason we have lost touch with whatever it is about human existence that is meaningful. Once upon a time religion, especially monotheistic religion, served as the objective and eternal standard of all that is good and true and valuable, and we built our society (indeed, our entire civilization) around the idea that living a meaningful life involved living up to that standard.

The search for authenticity is about the search for meaning in a world where all the traditional sources — religion and successor ideals such as aristocracy, community, and nationalism — have been dissolved in the acid of science, technology, capitalism, and liberal democracy. We are looking to replace the God concept with something more acceptable in a world that is not just disenchanted, but also socially flattened, cosmopolitan, individualistic, and egalitarian. It is a complicated and difficult search, one that leads people down a multitude of paths that indude the worship of the creative and emotive powers of the self; the fetishization of our premodern past and its contemporary incarnation in exotic cultures; the search for increasingly obscure and rarifled forms of consumption and experience; a preference for local forms of community and economic organization; and, most obviously, an almost violent hostility to the perceived shallowness of Western forms of consumption and entertainment.

Richard Todd’s The Thing Itself - On the Search for Authenticity, other than being first-person non-fiction, stayed closer to treating authenticity as straight-forward provenance—with all the other stuff just being vigorous capitalism.


Adding class to Wordpress linked images

An enduring issue with linked images ( <a href=""><img src="" /></a> ), is targeting the anchor link for theming—especially for disabling borders and highlighting that look great on text links but odd for images. CSS doesn’t have a parent selector ( a > img:parent ), and javascript feels like overkill. The simple solution is to add a class to the parent anchor (<a href="" class="img">), but that can get repetitive, especially when Wordpress is supposed to automate those sorts of things.

Adding the following code to your Wordpress theme’s functions.php file will automatically add a class to the anchor link when you insert linked images through Wordpress’s Media Library interface. It won’t fix posts you’ve already written, but should make things better moving forward.

/**
 * Attach a class to linked images' parent anchors
 * e.g. a img => a.img img
 */
function give_linked_images_class($html, $id, $caption, $title, $align, $url, $size, $alt = '' ) {
  // Separate classes with spaces, e.g. 'img image-link'
  $classes = 'img';

  // check if there are already classes assigned to the anchor
  if ( preg_match('/<a.*? class=".*?">/', $html) ) {
    $html = preg_replace('/(<a.*? class=".*?)(".\?>)/', '$1 ' . $classes . '$2', $html);
  }
  else {
    $html = preg_replace('/(<a.*?)>/', '$1 class="' . $classes . '" >', $html);
  }

  return $html;
}

add_filter('image_send_to_editor', 'give_linked_images_class', 10, 8);

The if/else could probably be done with a single regular expression, but I’m not that smart.


The benefits of age

Havard Business Review’s Dan Pallota quoted from Julia Moulden’s book, RIPE: Rich, Rewarding Work After 50: >

  • I can tell the difference between a customer who has a legitimate gripe with my company and one who is an alcoholic or has anger-management issues. At 25, I thought it was all and always about me.
  • My bullshit meter is highly attuned because I’ve heard a lot of bullshit. At 25 I was naive enough to believe most of what everyone was dishing out.
  • I have the confidence to know that if I don’t understand some new business idea you’re pitching to me it’s not because I’m stupid. It’s because you’re not communicating it well. At 25 I was more prone to point the finger inward.
  • I know that business construction projects cost about twice what you budgeted them to cost. At 25, I was continually shocked and unprepared when costly problems popped up or snags set projects back months.
  • I know that being nice to people and being a good leader are two different things. At 25 I was nice to everyone. And not the best leader.

I suggested in the comments this addition: > My peers and I outnumber everyone else. At 25, people over 50 were few and far between which let me do a lot without someone looking over my shoulder and judging my work. Which is really a defining difference between Boomers and Millennials: Millennials are coming of age with a lot more older people around then when Boomers came of age. But I’ve also disagreed with Dan Pallota before. The population pyramid image is from here, which looks like it may have been copied out of a newspaper.


Mediation Journal, Version 0

I earlier posted a picture from a project I was working on for journaling media usage. Below is the book I got back from POD (I used Lulu and am quite satisfied). I still have a few changes I want to make before I consider it “finalized”: increasing the gutter size (the gutter calculator is clearly configured for reading, not writing), optimizing the half-tones and gradients (I printed a test scale in the back of the book), and redoing the cover (I don’t think I had the DPI set properly for the only rasterized image I used in the entire project).

Also, after reading this piece by Kelli Anderson on documenting work, I’m trying to take better project and process photos. I took these photos on my porch, in 20° weather—but the natural sunlight made it worth it.


Assessment of needs-assessment needs

One of my AmeriCorps members asked for resources on technology needs-assessment surveys and I came across some varied approaches. Above is from the US Department of Education hosted An Educator’s Guide to Evaluating the Use of Technology in Schools and Classrooms. Below is from the National Center for Technology Planning’s “ Perceived Educational Technology Needs Survey” [PDF] (the Center appears to be more a guy then a center). Both appear rather aged, though I like the latter one better.

Note to the respondent: Please keep this questionnaire in your possession for the survey interval in your usual work location while performing your customary duties. Make entries to the items as appropriate responses occur to you. Your responses will help inform the technology planning process about the best application of technologies in your teaching situation.

  1. Do you ever, or often, think, “there must be an easier way to do this?” If so, please list and describe as many of the things or situations as you can to which this statement would apply:

1.

2.

3.

4.

5. [Note: All of the following questions repeat this format, but the phrase “If so, please list and describe as many of the things or situations as you can to which this statement would apply: #1-5” is omitted for brevity ]

  1. Do you ever, or often, think, “I could do this faster if only…”
  2. Do you ever, or often, think, “I wish I had a helper to help me do…”
  3. Do you ever, or often, think, “I wish I had a computer or other device so I could…”
  4. Do you ever, or often, think, “I wish I or my students could contact someone right now to tell them…”
  5. Do you ever, or often, think, “I wish I or my students could contact someone right now to find out…”
  6. Do you ever, or often, think, “I wish my students had improved computers or other technological resources available so they could…”
  7. Do you ever, or often, think, “I wish my students had more computers or other technological resources available so they could…”

Please use the space below to state in your own words any suggestions, recommendations, or concerns you have for the use of computers, networks, or other advanced technologies for your work or for your students, your school, or the school district. Thank you for providing this information.


Adding hyperlinks to print publications

I am very impressed with how Marcus du Sautoy’s The Number Mysteries integrates hyperlinks into the book using URL shorteners and QR codes (above). Contrast that with Dan Cederholm’s Handcrafted CSS _(which is still an excellent book). _The latter was published August 2009, the former August 2010.


De nada, Una Pequeña Casa

My former-roommate Alex (the guy in the middle) is spending his winter vacation in Mexico volunteering with One Small House. I donated to the project and they’ve been awesome in thanking me. > During the week of December 26-31, 2010, a group of volunteers from the United States will work with the community of Lazaro Cardenas to build them a new, free health clinic. Currently, this small community is receiving its health services from a trailer that is inadequate to handle their needs. With the support of donations, One Small House and its volunteers will help ensure that this community receives the quality health care it needs.