> patrick villanueva
/designer/developer
select sample website applications
iTunes HTML QDL Online BellyRacer Spiceworks UI Exercise Backbone/CodeIgniter Exercise

itunes html

My feature application project. iTunes HTML is half-baked at the moment, but good enough to launch right now. It was mostly a JavaScript exercise that evolved from an interesting challenge from Belly, and is about 50% done. My interpretation was all about adapting a desktop application for the web, and used a number of techniques to accomplish this. Using Backbone originally, I swapped it for AngularJS and continued to build with jQuery UI, jQuery/JavaScript and CSS practices. It all worked nicely with Rdio's web player to make things function as you'd expect. Or move it in that direction, anyway.

Please take note of the details, they were honestly a pain but worth the effort. Media controls are working, for the most part. They're all functional with the default playlist, including repeat and shuffle. Notice the progress bar, volume control, time elapsed and time remaining. Track listings aren't the only draggable elements, you can drag the entire window like you would with a desktop application; enabled by the typical top section. The clock works too, and updates itself within seconds.

Important note: The search functionality is currently not working, which was powered by Belly's Rdio service using OAuth 1.0. Just recently, Rdio deprecated OAuth 1.0 which pretty much broke all dependent apps. I've notified Belly to let them know, then realized I could attempt a fix (Looking through the code, I didn't quite understand that part. PM me if anyone is up for a pairing session.). It also occurred to me that the next iteration could solely use Rdio's API.

Update: Conversion to new API in progress. Search is working now, but not sure why enter isn't exactly responsive. You may need to press ENTER a few times to process the query. As it is, iTunes HTML uses a combination of things to make it function as it should.

Hopefully, you'll see the interface as it's meant to be seen – I only checked it out on my Mac with Chrome, Firefox and Safari. The playlist, as seen, is hard-coded for the example. This would normally be blank, and overwritten once queries are submitted. Aside from finishing out other functionality, I have many other ideas for this project.

Listening to full tracks requires that you are logged in to an Rdio account. Otherwise, you'll only hear a 30-second sample. If you don't have an account, I recommend signing up. It's free.

See iTunes HTML.

Github
github

Sample code, includes some recent JavaScript practice. A continuous work in progress.

LinkedIn
linkedin

Let’s network, get to know each other, and talk shop. Available for hire now.

Twitter
twitter

Current or real-time thoughts. Think I’m kidding about discussion? Start now, tweet me.

Tumblr
tumblr

Recent thought extension, which may or may not include code. Also using platform to recount things.

Mixcloud Facebook Google+ Instagram Vimeo YouTube