Moving Hopscotch to v3.0

“…to market and promote,
and you better hope
(For what?)
that the product is dope.” – A Tribe Called Quest

What’s happening in Hopscotch 3.0

There comes a time in every product’s lifetime that it needs a major reworking. has been live for over a year now and I’m happy with where it’s gotten to.  After not working on it much since early 2013, I decided it’s time to give it some love.  I brainstormed what I want to change.  Here are the notes:

Brainstorming notes

Brainstorming notes

The main points I want to focus on in HS 3.0 are:

  • Decouple the music listening from the browsing.  Right now reading about a show auto-plays songs from that show.
  • Use a front end MVC framework.  Leaning strongly towards AngularJS.
  • Responsive UI – the site doesn’t look amazing on a mobile browser.  Good timing as Bootstrap 3 purports to be a mobile first framework now.  Nice.

The layout concept

Looking at the sketch in my notes above, here is the layout I am going to work with.  This screenshot was done using Bootstrap 3.

Overall layout

Overall layout

The layout in code

This is the Jade template using Bootstrap 3:


			h3 Header toolbar
			h3 Social
			h3 City
			h3 Radio player
			h3 (unused space)
			h3 Artist Detail
			h3 Upcoming shows

This is the CSS in addition to Bootstrap’s:

div {
	box-shadow: 2px 5px 5px #888888;

.fullheight {
	height: 100%;

html,body { 

What’s next

I still want to focus on layout and building the framework to start using AngularJS.  As more concrete objectives, these would be:

  • set up AngularJS.  Create Controller etc and have it load today’s list of shows automatically on page load.  Once this is working, it should be smooth(er) sailing to get fancy.
  • mobile responsive css.  Buzzwords.  Want to get the site looking GREAT on mobile browsers.  Eventually I’d like to get it playing as a continuous radio station on mobile, which I believe can be done with SoundCloud.