Hopscotch.fm, now with Artist Radio

I finally made some time to work on hopscotch.fm this past week.  I was able to make a couple of major improvements to the site, mostly based on what I found to be annoying/missing when I was using it.

Soundcloud! – First was Youtube, gone.  Terrible success rate in finding videos for artists.  Next was Tomahk, also gone.  Better success rate but kludgy ux.  Now, Soundcloud!   All the songs are now streamed from Soundcloud.  The success rate is great, and I can have much more control over the player.

Artist Radio – now when you like the song you’re listening to, you can turn on Artist Radio and listen to more songs by that artist.

Performance – the unsexy beast in the room.  It was taking up to a minute to build a radio station, making changing stations a task for only the very determined.  Now all the stations are pre-built so they load up almost instantly.

I am finding I listen to hopscotch daily now as it is a great background stream of music while I work.  And last week I went to two shows that were featured on hopscotch radio, Rodriguez at the Warfield (awesome show) and White Ring at Elbo Room (good but not nearly as awesome).


No more Posole, please!

I reached a major milestone for me last month in fully automating the data retrieval for hopscotch.fm.  I now query multiple music api services at differing intervals throughout the day.  And adding a new city is quite simple to do.  Welcome Chicago!

But the ui was making me nauseous every time i saw it. Cool font that lost its cool the 100th time you’ve seen it. The off white background that just begs to be more interesting.

And the 1 out of 4 incorrect videos needs to be vastly improved and is one thing that would impact when I announce hopscotch.  Today we had Posole performing in San Francisco, and the video that you saw on hopscotch was educational yet ultimately not what should have been there

Here is a correct one:

When I completed the last revision, I generally liked the ui, but now I see it is kinda lacking. There isn’t much a user can do with it. I want to incorporate more social and use that to crowdsource the video library collection.

I am considering having a designer help with the ux. First I would want to get the functionality working with the major components like the crowdsourcing piece. I haven’t thought about revenue much because i wouldn’t pay for this site as it is now.

So, no more eating Posole. It’s time to listen to it!

Getting to wireframing

I have always believed wireframing tools were too rigid to let you be creative.  And so I’ve always been a pen and paper sketcher and I like the drawing part of it.  It’s fun and it can be very creative.

But where it doesn’t help is in when you’re trying to design to a higher level of precision.  I have started using Balsamiq and I was impressed with how limitless and simple it is.  Everything works as you’d expect it to, and in an hour I had a much clearer idea of what the ui I had sketched out could look like.  Things like portions and relative size to other objects on the page are much easier to see.

My sketches.  Chris Isaak is in my test group.

My sketches. Chris Isaak is in my test group.

Getting hopscotch.fm to version 1.0

This week I launched hopscotch.fm.  It is still a very early stage site and there are many things I’d like to add on and improve, but I decided I needed to draw a line in the sand and just ship something.  Anything.

In this blog post I want to give a general sense of how I went from idea to v1.0 going live.

Step 1: Proof of Concept

In this phase I wanted to rule out any potential major unknowns.  The two biggest ones were:

  • could I use Songkick’s API for my show listings
  • could I build a radio player around Youtube videos

The first one was answered fairly quickly.  The Songkick API features loads of shows and venues and while it’s not the cleanest data (dates are not always proper), it is a great start.

The second was a bit more involved.  I want to make hopscotch.fm a radio player so that when a song completes, it automatically moves on to the next song without the user doing anything.  I found a great library tubeplayer.js that did this.

Step 2: Get an ugly site up and running

It doesn’t have to be ugly, but I wasted no time in making anything look good.  I had buttons all over the page, images showing up over controls and other oddness.  But I got the functionality implemented.  The user hits play and:

  • The Youtube video starts playing
  • An artist image is downloaded via Youtube’s API
  • Venue info is retrieved from Songkick
  • Artist info is retrieved from Wikipedia.  I since removed this as it was the wrong half the time.

Step 3: Decide what constitutes v1.0 and do it

It’s probably no surprise that this step took the most time as now I needed to start caring about error handling and CSS and data validation and everything else that makes a real site, real.  I added Bootstrap, built a little admin page for syncing hopscotch data with Songkick.  Made a best guess effort at what a clean, simple user experience could be and from feedback I’ve gotten, I think it’s a decent start.

Step 4: Hosting and stuff

I originally put it on heroku as they have a free starter level.  But the 20 second startup time just to get the page to load is ridiculous so I’ve now switched to nodejitsu.  Data is on mongolab.  It’s all in the cloud.  It’s all happy.

Step 5: Go see a show!

That’s what hopscotch.fm is for so why not?

Node.js flash info messages

I was looking for a way to build a simple flash framework to easily display error and info messages throughout my webapp’s pages.  This is a pretty standard web development practice and sure enough there is a simple way to do this with node.js.  Technically this is using Express so if you’re using that then check out this write up: http://dailyjs.com/2011/01/03/node-tutorial-8/

Client Error: Next object larger than space left in message

I was scratching my head over this error message.  When Googling didn’t return many answers I figured it was something I was doing wrong.  So if you’re running node.js with Mongo and you see the message:

Error is: Client Error: Next object larger than space left in message

The problem is that I wasn’t creating a proper object.  I was simply trying to save a string, whereas instead it should have been an object that had a string field with a value.

Wrong way:

var token = "123";
mongo.save(token); //pseudo-code

Right way:

var item = {};
item.token = "123";

Why the font-face?

Fonts.  Helvetica.  Sans-serif.  I know enough to know what serifs are and that they are harder on the eyes.  I set out to learn all about fonts and typeface and optimal fonts for the web and all that stuff.  In short what I learned is this: don’t try to get too fancy with fonts too soon.  If you’re designing a website, just use a standard font like Helvetica or Arial.   Those are more than fine.  When you’re ready for it, start to get into Typekit fonts and maybe even some crazy, fancy fonts for fun or when you want to make a really creative site.

So I’ve decided my go to CSS font styling is:

font-family: Helvetica, sans-serif;

It looks good and I can move on to other areas of the site design.

Still, I did find it extremely useful to learn about fonts and typefaces and all of that.  So here are some of the sites I found useful.

Font vs Typeface

Start here.  Good easy explanation of typeface vs font

Commonly used font families

Good overview of commonly used font families, with pros and cons for each.


Great explanation of font-face and why it was such a big achievement in CSS.

Free Fonts!

Remember what I said about waiting before using external fonts, ignore that. This site has completely free, open-source fonts with a great display of examples. http://www.fontsquirrel.com/

How I’m learning CSS

I’ve been hacking at CSS for a while now, copy and pasting and making minor tweaks here and there to get something to work. But I realized there’s only so far hacking can take me and I began feeling like I needed to learn the fundamentals.

So here I’m going to quickly share what I’ve found useful to start learning CSS.


I took the CSS Cross Country course at CodeSchool.com and found it to be a great way to get exposure to all of the main concepts of CSS.  But I still had trouble understanding positioning and floating and so that’s when I turned to:


Mozilla Developer Network.  Prefix all of your CSS Google searches with mdn.  The pages are elegantly laid out, easy to read and full of information and examples.  This is a reference that I’m sure I’ll be using for a while.  But to really understand positioning and floating, I can’t recommend highly enough:

CSS-Tricks Podcast

I found myself many times ending up on a css-tricks.com article about something CSS related.  Easy to understand articles that go in depth in explaining concepts.  Turns out they’ve got a video podcast on a wide range of topics.  And this is where I finally learned the mystery behind positioning and floating.  I really like learning by watching his split screen where he’s got html, css and the results in three different sections of the page.  It’s pretty informal and Chris seems like a pretty cool dude.

Applying It

That’s not a company or website.  That’s how I will be able to really learn all this stuff.  I’ve got a couple of side projects that I am starting to etch out with CSS.  Had a major breakthrough with floats after a couple of hours of wtf (who knew, fixed heights on uls set the height of the floating div).  Lots of good stuff ahead to learn and I’m pretty excited about it.

And speaking of floats here’s a great explanation of them.

And lastly, some free backgrounds to practice setting your primary div’s background.

We were setting up our own instance of BrowserCMS and it took a few steps to get it up and running. In this post I’m going to recap the steps needed to do this:

Install the basics first
First, get everything up to date first
apt-get update

Next, install rvm to manage the Ruby gems and the active environment

The output will tell you that you need to install a few things. You can copy and run the line that lists the packages required for Ruby.
apt-get install build-essential openssl libreadline6 libreadline6-dev curl git-core zlib1g zlib1g-dev libssl-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt-dev autoconf libc6-dev ncurses-dev automake libtool bison subversion

Install a few other things including git, patch, Ruby and Rails.

sudo apt-get install git
sudo apt-get install patch
rvm install 1.9.3
apt-get install rails

Install BrowserCMS
Installing the browsercms gems installs all the dependent gems as well
gem install browsercms

I got an error related to building the mysql2 gem. Don’t worry, you just need to install a couple other gems. More info on this here
sudo apt-get install libmysql-ruby
sudo apt-get install libmysqlclient-dev

At this point you’ve installed everything.  All that’s left is to create a new instance.

Create a new BrowserCMS instance

Before you do anything, make sure to set your environment’s RAILS_ENV property.  I set this in the ~/.bashrc but it may be different for you.  Check where you set your env properties in your home folder ls -a should reveal it.  Then be sure to reload the profile or exit and log back into the shell so the env setting takes place.

Here we set it to the development environment.

set RAILS_ENV=development

Next, we want to create the instance and tell it do install it on mysql.  Default would be sqlite.

bcms new apidocs -d mysql

To be sure you've installed everything, let's run bundle install in the newly created app.

cd apidocs

bundle install

Lastly, we want to seed the database with the tables and seed data.  This can be done in one command with rake db:install but I prefer to run each of the three commands that get called by rake db:install, separately.  That way if an error occurs I know exactly which one caused it.  And in this case, there was an error.  First the commands that you run:

rake db:create
rake db:migrate
rake db:seeds

When I ran rake db:seeds with my RAILS_ENV=production, I got an error of:
rake aborted!
private method `rand' called for #

This is because for the production env it is creating a random password and for some reason the rand function on Array is private. Whatever. An easy workaround is I just edited db/browsercms.seeds.rb and added production to the list of checks (line4).  This allows db:seeds to run and then you can update the cmsadmin password via the app later

You can re-run db:seeds to finish the db:install
rake db:seeds

Type in:

rake server

and you should see your server up and running on port 3000.  Put in /cms and you can get to the cms administration portion with your login of cmsadmin / cmsadmin.