Can’t Blog…Too busy building

So I’ve complained over and over again on Twitter that I start blog posts but can’t seem to finish one (I’m up to 19 drafts including this post!). I think I’ve figured out why. In the last 6 months outside of my normal 40 hour work week I’ve created the following sites. It might be a cheap excuse but I haven’t found the time to blog because I’m too busy building stuff!

VisualCL.com

Tools Used

  • Ruby/Rails
  • Responsive Design
  • Nokogiri
  • Coffeescript/JQuery
  • SASS
  • Twitter Bootstrap
  • Heroku
  • Infinite Scroll

What Is It?

Over Thanksgiving holiday I visited with a lot of family and several had the same gripe. They all loved buying stuff off of Craigslist but they hated the search interface. When they were looking for an item like a dresser or a car (really anything visually important which is almost anything) it was really tough because Craigslist only gives you a really small thumbnail. I saw a problem I could solve and help out some family members while being able to play around with rails.

It’s really a simple Twitter Bootstrap design but I took the time to try to get the iPad and iPhone versions working properly using some media queries. I used Nokogiri for the screenscraping and it worked really well. The main problem I had (and continue to have) is that Craigslist is very aggressive at banning people who screenscrape their app. If too many people hit my site at the same time it’ll start getting an unauthorized status code back.

Overall I think it turned out really well and I’m proud of it. My family and the friends I’ve showed it to tend to love it and prefer to use it to search instead of Craigslist site.

Paid Gig: Protecting Black Life

Tools Used:

  • Google Map API
  • Yeoman (for Coffeescript/SASS compiling)
  • Coffeescript
  • SASS
  • Twitter Bootstrap
  • Responsive Design
  • JQuery
  • ImageMagick

What Is It?

A part time paid gig, that’s what it is :). I got contacted by some friends who were having problems with a vendor they were working with who was trying to deliver this site in flash. They kept pulling it up in their iPhone/iPads and it wouldn’t work and when they asked the vendor to fix it they said they couldn’t/wouldn’t. So I got a call to see if I could turn around the site in my spare time within two weeks.

They had a pretty good idea how they wanted it to look/feel but they wanted something closer to Google Maps so that’s what I gave them. It’s an entirely client side Coffeescript/HTML/SASS solution (all data is in Coffeescript). They basically wanted to display information about Planned Parenthood facilities and the ethnic populations around them. I finished the project on time and the client was thrilled with the end result.

Butler County Sheriff Sale Tracker

Tools Used

  • Ruby/Rails
  • Nokogiri
  • Google Map API
  • Heroku
  • Postgres
  • Twitter Bootstrap
  • Javascript/JQuery

What Is It?

OK I built this primarily for my Mom. She loves looking at the sheriff sales on the sheriff’s site (http://www.butlersheriff.org/geninfo/gen_info_sheriff_sales_listing.htm) but the interface sucks. You’d expect a list that you could sort/filter but instead they create a page per auction date so you have to click a lot.

Nokogiri was again awesome for screen scraping the site. I scrape the site for the listings, call Google’s geocoding API for each and then put them in a postgres DB. Then I wrote a simple web app that allows filtering/sorting and viewing the results as a list OR a map.

End result was a happy mom. At least until the Butler County Sheriff’s office changed the listings from a web page to a pdf which broke my parsing logic. I haven’t put forth the effort to fix it so there are only old listings for now (Flip “Show Closed” to Yes) and it will remain broken until I can find the time to go back and work on it

Current WIP: Facebook Mutual Friend Graph

Tools Used:

  • d3.js
  • Facebook Graph API
  • Zero JQuery

What Is It?

Over Christmas break I read a book on D3 (http://amzn.to/XjPBL5). Most of the book was just regurgitation of online tutorials but a couple sections of the book really helped my understanding of D3 and made me realize how cool it was. One of those were the section on layouts and specifically the force layout. I wanted to play with D3 but needed something to apply it to and Facebook’s social graph seemed to be a good fit. So I created a force layout where all my Facebook friends were circles and I drew lines between my friends who were also friends with each other. The result is pretty cool (click the pic above). You can drag the nodes around and highlight them by mousing over.

It’s really funny seeing how groups of friends become huge enmeshed balls of mutual friends. The nodes really separate themselves into several distinct groups: church, Hubbard family, My wife’s family, my work friends, neighbors, and everyone else. My wife’s node (Sheryl Hubbard) tends to always center itself in the middle of the graph because she (obviously) has the most mutual friends with me and crosses over several of the groups so I can see cool stuff like ‘Honey you’re the center of my social world’ (++ several husband points right there).

If you take a look remember this is still a work in progress. Right now it only works with my friend data (static data for now) but I plan on getting it working via Facebook connect so everyone will be able to look at theirs at some point. You can drag the nodes around and mouseover the nodes to see who they represent. I also plan on adding a feature where you can cut someone out of the graph and see what impact it has on the overall graph (should be cool). Also I’d like to add groupings to the right side list where you could turn nodes within a group colors so they stand out in the graph more.

3 Comments

  1. Jesse Robison January 25, 2013 5:47 pm Reply

    Bruce,

    Your projects and attitude are inspiring and rare. I look forward to reading more not-a-cog posts.

    Thanks for being a fantastic human being,
    Jesse

    https://www.facebook.com/jesse.robison.7

  2. Johna395 August 8, 2014 12:32 am Reply

    Hello my family member! I want to say that this article is amazing, great written and come with almost all significant infos. Id like to peer extra posts like this . ebdfebefdcec

  3. responsive web design examples with source code May 1, 2015 3:50 pm Reply

    Currently with new CSS homes for layout landing in browsers, we may be planning to visit a bigger renaissance in layout design patterns.
    ‘s book

    http://www.blackplanet.com/your_page/blog/view_posting.html?pid=2847818&profile_id=65359354&profile_name=undesirablejug837&user_id=65359354&username=undesirablejug837

Leave a Reply to Johna395 Cancel reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>