About Me

Wednesday, June 6, 2012

Curing Depression at Random Hacks of Kindness Toronto

In his 2011 OSCON Data talk, Google's Steve Yegge argued that good hearted programmers will take interest in solving the harder, more impactful, world problems at the end of their careers.

"As you gain wealth, if you're not a total mercenary, you start getting interested in charity and helping people who are needy and you start getting interested in politics, and all these kind of hard problems. And a lot of them, interestingly, are data mining problems."

Yegge challenges programmers to start getting involved now rather than later in their career. He believes that if we spent less time trying to scale FarmVille and more working on the world's hardest problems, we might actually have a good chance of solving them. Yegge actually quits his job at Google at the end of the talk so that he can focus full time on solving these problems.

The other, more notable, instance of this turn to philanthropy is by Bill Gates in his late career. The Bill & Melinda Gates Foundation was established in 2000, followed by Gates stepping down as CEO to begin full time work at his charity. The foundation has since had a major influence on global health, global development, and education.

Random Hacks of Kindness (RHoK) challenges developers to use technology for social good and to work on hard problems that benefit mankind. RHoK organizes hackathons where volunteers sign up to work on a prototype solution to a specific problem.

"RHoK Global June 2012, the 6th Random Hacks of Kindness hackathon, came to a close this weekend, with technologists, designers, experts and activists coming together in 25 cities in 14 different countries to “hack for humanity.” Over 900 people participated worldwide, with the largest event in Nairobi, Kenya at 130 people. 

During an intense 36 hours, these 900 hackers for humanity came together in 132 different teams to address 124 unique problems and they built 138 solution."
RHoK Blog

This was my first time attending RHoK and it was a great experience. The Center for Social Innovation, in downtown Toronto, hosted 40+ volunteers working on 8 different problems ranging from using technology to prevent pregnancy related deaths in developing countries, to georeferencing and organizing imagery from the International Space Station.

My team worked on curing depression through better data collection and analysis. 1datapoint was founded by Jonathan Polak, a former sufferer of mental health issues, with the idea that one datapoint is not enough to make a proper diagnosis.
"300 million prescriptions for anti-depressants every year. Suicide is 2nd highest cause of death for under 25 age group. Most diagnoses made with just one visit to doctor."
After much discussion about the scope of the problem, the requirements, the possibilities, and the design, we got to work building an Android application for quick, easy and unobtrusive collection of mental health data points. We focused on getting the user in and out as fast as possible; making for a pleasant user experience. We succeeded in prototyping a beautiful, simple and intuitive application that could potentially provide doctors with the crucial background data they've been lacking in their analysis in the past.

Our graphic designers came up with this clean and pleasant design for the home page:

We developed a novel data collection user interface that allows the collection of two data points from a single touch. As the focus is on measuring the delta and not quantifying levels of mental states, we were able to make the graph minimal:

I also was inspired to come up with a minimal UI for time selection that allows setting the time in 2-3 touches:

We decided to have two self-explanatory buttons at the bottom of all data collection pages to reduce the cognitive burden of the user who may be unsure what the back or home button will do to their data. Each page has these that allow for a quick exit. This was one of the many hot topic discussions we had over the weekend on designing a user interface for an anxious person.

Overall, it was a valuable experience both from a philanthropic and from a professional development standpoint. The mix of people at the event was very broad: there were students, professional developers, designers, entrepreneurs, etc. A lot of great demos came out of the weekend and it was wonderful to be in such a dynamic, exciting and creative environment where people were working out the goodness of their hearts rather than for a paycheck. I plan to do more hacking for humanity in the future and will take up Yegge's challenge to start learning about the math, physics, bioinformatics, data mining, and all the other tools that will be essential for using the skills that we have been blessed with as developers to begin developing a better world.

Sunday, February 12, 2012

A Simple Facebook Cover Photo Hack

For those of you who haven't entirely abandoned Facebook for the uprising Google+, you'll likely have noticed that Facebook has once again made a significant change to the Profile page. The Facebook Timeline is the product of Facebook's new focus on UI design. Love it or hate it, it's here to stay.

One of the most beloved changes has been the addition of a large "cover" photo to the profile page. Facebook tells us to: "Fill this wide, open space with a unique image that represents you best. It's the first thing people see when they visit your timeline." Indeed, the cover photo and the profile picture provide a great opportunity for one to show off their creativity. See "Facebook Timeline Cover: 40 creative examples" for some interesting cover hacks.

A simple Facebook cover photo hack is to use the profile picture as a transparent window into the cover photo. LifeHacker recently posted an article describing how to do exactly this with Photoshop or Gimp. Inspired by this post, I decided to make a simple HTML page to preview this kind of cover photo. Below you will find the source code to this test page:

To test out your cover photo, you would modify the img tag (.background img) to point to your large cover photo. The cover photo is 850x315px, but you'll need a larger image than that to show through to the profile picture. Using the Chrome Dev Tools, Firebug, or a similar CSS/DOM debugger you can adjust the dimensions and position of the cover image to your desired position. 

Now you still would need to fire up your image editor to crop out your profile picture, which needs to be 180x180, and your cover photo which should be 850x315px. This will require keeping track of the offsets and the dimensions you've been testing with. It makes for a simple tool for seeing what kind of cool cover/profile combinations you can come up with. You can test out your profile picture by enabling the commented out profile img tag and seeing if it worked out the way you desired.

You could now, in theory, do some simple crops with your default system image editor and avoid using the heavyweight Gimp or Photoshop. However, I've found it to be tricky to get Facebook to do exactly what you'd expect with your uploaded photos. I had to do a few uploads of profile pictures before I got the satisfactory alignment which completed my Facebook cover photo hack.