Take me back!! I want my CSS!! Click me to get back :)

×

READY FOR A NEW CAREER?

But not sure where to start? Find out if a tech career is right for you.

TAKE THE 3-MINUTE QUIZ

Instinct

Learn how two developers built Instinct, an app that teaches you how to play the guitar!

Today we are debuting a new series we are calling Anatomy of an App. In this column, we plan to highlight sites that we love and  interview the makers, hackers, and designers of these sites about their process. The goal is to help people more easily make the connection between a site’s functionality and the technology that was used to create that functionality.

Got any apps you would love to learn more about? Send us an email at hello@skillcrush.com. Or drop us a note in the comments.

Ever had the urge to learn how to play the guitar? Want to be able to strum along while you’re belting out the lyrics to Bobby McGee around the campfire this summer? Then you need to check out the app Instinct.

So how does it work? First, you select an avatar (I chose one that looked like a slightly-less-kick-ass version of Lisbeth Sander). Each day, you’re given a set list, or, set of tasks to complete. These range from simple, like an intro to frets, to more complicated, like learning full songs.

Don’t have a guitar? No problem. The app allows you to use a real guitar and your computer’s built-in mic, or a virtual guitar that you manipulate with your mouse!

What we really love about Instinct is the obvious passion that Blake Jennelle and Brian Stoner have for their product. You can see this in the smallest of details on the site, as well as through the painstakingly rigorous approach that they’ve taken to developing the product.

So, grab a guitar and get Instinct!

 

What technology did you use to build Instinct and why?

The heart of Instinct is the frontend, with lots of animations and user interaction, so most of our code is JavaScript, CSS and HTML. A lot of people ask if we use HTML5, which has become a buzzword for a bunch of things that have either existed for a long time or weren’t part of the HTML5 spec. We don’t use things like SVG, Canvas or WebGL. Instead we use good old HTML <div> and <img> tags animated by JavaScript. It has proven to be a lot faster and easier to manage.

We do use many libraries on the frontend, including:

jQuery: For consistent access to the DOM across browsers
Underscore.js: For functional programming methods that work consistently across browsers
Backbone.js: For separating the business logic in our models from the user interaction logic in our views, as well as for client-side routing (a.k.a. changing the page/url without doing a refresh)
Modernizr.js: For feature detection across browsers
Sylvester.js: For the vector math that animates the guitarist’s arms
Mustache.js: For rendering HTML templates via JavaScript

We wanted to use JavaScript on the backend too so we used Node.js. Being able to write our frontend and backend in the same language has been awesome. We’re using the Express framework for Node.js, which helps with things like user sessions and URL routing. But most of our server is really just a REST API that is accessed by the JavaScript on the frontend.

Our database is CouchDB.  Unlike relational databases that have columns and rows, CouchDB just stores everything in a big JSON objects. In the early stages of building a new product, flexibility is important. CouchDB lets us change our data model quickly without needing to worry about the rigid table structures of a relational database, and that’s been valuable to us.

Lastly, our pitch detection is in Flash. The pitch detection is the piece that listens thru the microphone and detects notes. Unfortunately we need to use Flash to access the microphone consistently across all of the major browsers. Some browsers have started implementing JavaScript APIs for the microphone and we’re very excited for that to become standard.

 

What are the biggest technical challenges that you face in building the site?

Oh man, there have been a bunch. Pitch detection was our first big challenge. And it’s going to remain a challenge for a long time. Browser and microphone compatibility has been another challenge – headache really! Instinct might work great on most computers but then others will have major problems, and that’s not okay.

Some other hard stuff: The 3D hand that shows the user where to put their fingers. Audio playback. High speed animation. The guitar lesson editor. The data structures that store lessons, music, user scores, etc. And a bunch of others too.

Honestly it hasn’t been easy!

 

It looks like you’ve spent a lot of time considering the user experience, as well as the overall design of the site. How do you think that good design can contribute to your goals for the site?

Design is HUGELY important. Design determines what a user feels when they use your product. And what they feel is what brings them back again, inspires them to share it with their friends and hopefully, over time, fall in love with it. Design is where your soul as a creator comes through.

Tech is like a stage and the design/user experience is the show. Without the technology, you can’t perform. But without the design/user experience, the performance isn’t worth having.

It’s obviously possible to build a successful business on top of bad design, I’m sure you can think of examples. But it’s getting harder and harder. Users are starting to have more self-esteem in their relationship with technology and are less willing to put up with it.

Plus it’s such terrible karma to frustrate people and waste their time. The web gives you enormous scale. So every time you slack off on design, you can literally waste days, weeks, years of other people’s lives, when you add it all together and that’s not okay!!

We want to thank Blake and Brian for being our first guinea pigs in our new column, Anatomy of an App! You can check out Instinct at www.getinstinct.com and follow them on Twitter @getinstinct.

Your email address will not be published.

3 comments

  1. I really really like this anatomy of an app series. With so many languages to work in, I am interested to know why and how developers choose certain languages for the functions they need. Thanks Skillcrush team. I am officially a Skillcruch apprentice :-)

  2. This is a great new series and one that I think I’m going to learn a lot from. Looking forward to the next post. Thanks!

  3. michelleglauser Replied

    Cool! I’d like to hear about TalkTo.

Want more articles like this?

Sign up to get the most recent tech news, tips and career advice.