I had a really random idea the other day for a simple coding project using the LastFM API: When was the last time you listened to Taylor Swift? This is obviously an extremely important statistic to know for the Taylor Swift obsessed. I already made a tool to lookup the first time you listened to an artist using your LastFM profile, so this was a relatively straightforward adaptation. I also wanted to take this opportunity to leverage the power of jQuery to asynchronously load the information rather than simply waiting for a static page. Check out The Last Swifting page (Deprecated July 2022) or continue reading for more information.
I use jQuery.ajax() to asynchronously GET information from a server-side PHP script using the input LastFM username. As with the existing user + artist lookup page, the user.getArtistTracks was our desired API method. This returns a list of tracks by a given artist scrobbled by the user in reverse chronological order. Since we only care about the most recent Taylor Swift listen, we can use the &limit=1 parameter to reduce the number of results returned. Some simple XML DOM traversal gives us all the information we need: track name, timestamp (UTC), and album artwork url. This data is parsed by the client-side Javascript and presented as seen above. Since Javascript is handling the conversion of Unix timestamp to human readable format, the client timezone is properly displayed.
During development of the webpage, I wanted to make the username input more interesting than just a plain textbox. I had the idea of making the field expand automatically as more text was entered, which seemed trivial since I was already using jQuery. This turned out to be more difficult than anticipated since simply reading the size of the text and adjusting the input size would often result in extra trailing space. The animation also appeared extremely choppy and was often unreliable. I eventually stumbled upon this StackOverflow post that offered a beautiful solution. It does a better job of calculating the width of the current text and smooths animations using the CSS transition parameter. This allowed me to directly integrate the username into the results text without worrying about glaring extra space.
Check It Out: The Last Swifting (Deprecated July 2022)