coding, graphics, mobile, ui, Uncategorized, web design, web development

Winning Hackcess to Justice (NC)

It was a pleasure to meet Raleigh attorney Caroline DiMaio this weekend and to advance her vision of an app to help inform migrant workers of their legal rights.

Our creation placed first out of five entries at the Raleigh edition of Hackcess to Justice, a hackathon presented by the ABA Journal and the N.C. Bar Association.  The competition was held at Campbell Law School and sponsored by Citrix ShareFile, Lawyers Mutual, and Poyner Spruill, LLP.

(It’s kind of a small world: I learned of this hackathon from Matthew Wilcut, a legal-aid attorney (and developer!) I met at a Startup Weekend competition in Greensboro a few years ago.)

Press Coverage

“App to aid migrant workers wins 3rd Hackcess to Justice hackathon” (ABA Journal)

“Code of law: ‘Hackathon’ gives birth to ideas for bridging the justice gap” (N.C. Lawyers’ Weekly) (Subscription Required)

Official Contest Site

Learn more about the competition, including the esteemed panel of judges, the judging criteria, and other entries at the official site:

Hackess to Justice (NC) on Devpost

(As a developer with a long history in and around the legal profession, I was impressed by each of the other entries – I could see any of them in production!)

Interactive Prototype

This was developed using rapid prototyping techniques and the Bootstrap JavaScript/CSS framework.  It will take you through one “happy path” of a user learning about workplace-safety rights and engaging contact with legal aid:


The Berlin Wall

Berlin Wall at RTP


Have you ever stumbled upon something that took your breath away?

I was at the Research Triangle Park to help a start-up with some UX/UI consulting yesterday, and I saw this in the lobby of their incubator — a piece of THE Berlin Wall….

…it took me back to memories of Reagan and Gorbachev … And imaginings of what it could have been like for the brave East Germans who tried to scale that wall. Risking (& sometimes losing) their lives for FREEDOM!

I take my freedom so for granted! I am so blessed and lucky to be able to do interesting work in a free and fun place like the Raleigh-Durham area.



PC vs. Mac vs. Linux for Android Development

For some reason the following instructions on how to set up a computer for Android development crack me up — they pretty much illustrate the difference between Windows, Mac and Linux for many things you’d do with a computer:

  • If you’re developing on Windows, you need to install a USB driver for adb. For an installation guide and links to OEM drivers, see the OEM USB Drivers document.  [This will all go very smoothly the first time, we promise.]
  • If you’re developing on Mac OS X, it just works. Skip this step.  [Is this why I keep seeing so many Macs at dev conferences?]
  • If you’re developing on Ubuntu Linux, you need to add a udev rules file that contains a USB configuration for each type of device you want to use for development. In the rules file, each device manufacturer is identified by a unique vendor ID, as specified by the ATTR{idVendor} property. For a list of vendor IDs, see USB Vendor IDs, below. To set up device detection on Ubuntu Linux:
    1. Log in as root and create this file: /etc/udev/rules.d/51-android.rules.  [Umm, since when do Ubuntu users memorize commands? Do we need to sudo this thang?]Use this format to add each vendor to the file:
      SUBSYSTEM=="usb", ATTR{idVendor}=="0bb4", MODE="0666", GROUP="plugdev"In this example, the vendor ID is for HTC. The MODE assignment specifies read/write permissions, and GROUPdefines which Unix group owns the device node.  [But what if I don’t have an HTC device… oh wait, here’s help…]Note: The rule syntax may vary slightly depending on your environment. Consult the udev documentation for your system as needed. For an overview of rule syntax, see this guide to writing udev rules.
    2. Now execute:
      chmod a+r /etc/udev/rules.d/51-android.rules

[That’s for each device, people!]



graphics, process, ui, Uncategorized, web design

On Mockups & Prototypes

It is generally a good idea to show your client what an app or site will look like before you actually build the thing.

And one typically does that through the use of mockups or prototypes.

Mockups vs. Prototypes

I think of mockups as the simplest possible sketches, while prototypes fill in many of the details (colors, logos, fonts, etc.).

Both represent a balancing act — They need to be polished enough to convey your ideas to clients, but you don’t want to spend a lot of time making them.

There are tons of ways to make them — pencil & paper, Balsamiq, etc.

How I Do It

I have a habit of skimming over the mockup stage and just making prototypes — For anything more polished than a line-drawn sketch, it’s usually faster for me to code the HTML/CSS, render it in a browser, and then save a screen shot than to monkey with PhotoShop, etc. Plus, a lot of that code can be reused as the project goes forward.

But this skipping-the-early-mockup-stage approach usually assumes that I have a good idea of a way forward — what if I want to present several different ideas for a project?

Rapid Prototyping

My Stanford – Coursera MOOC course on Human-Computer Interaction has me thinking more about rapid prototyping. In this course, our professor Scott Klemmer makes a strong, research-backed case that it is better to develop multiple ideas in parallel. There are many reasons for this — the designer/developer doesn’t get “married” to any one design (“separating ego from artifact”), and having multiple ideas allows for better group dynamics as these projects go forward. (The real mind-blowing stuff from Professor Klemmer is that the mockups don’t matter nearly as much as the FEEDBACK that you get from your users.)

Get Your Free Browser Line Drawing Here!

So in order to produce more ideas more quickly, I’m back to sketching…. I need some structure for this, so I produced my own little line-drawn template of a browser window:

Browser Template for Mockups


(Note that the file is in .zip format b/c WP doesn’t like .SVG for security reasons.)

(And, yes. Yes, I am a fan of Firefox. Why do you ask?)

Now I can print out a handful of these and sketch designs very quickly.

The next stage of my experiment will be to edit this SVG template into an actual prototype (I hesitate to do this, because I still think it would be quicker to do via HTML/CSS.)


mobile, Uncategorized, web development

All I Got Was This Lousy T-Shirt!

This weekend I participated in the official Mobile Developer Week.

All I got was this lousy T-shirt:

Official Salesforce Mobile Developer Week T-shirt Official Salesforce Mobile Developer Week T-shirt

OK I did get some good learning as Salesforce developers from Raleigh to Charlotte were introduced to Salesforce’s new mobile tools. We also hacked out a simple mobile-cloud app.

OK, so the shirt’s not that lousy — the shirt is American Apparel 100% cotton, with some spiffy multi-color screen-printed graphics — And I didn’t find a single louse on it. Plus, they gave us some pretty good chow from O. Henry Hotel‘s catering department.

But the key take-aways for me were meeting some very talented developers and learning more useful stuff about cloud & mobile… I’m grateful to SFDC and the organizers for putting on a very useful workshop.