REST

Custom HTML5 Tag to Show Your Favorite Music Albums on Your Website or Blog

Sometime ago I used Last.Fm’s REST API to show some of my favorite albums on my website. The current implementation is using JavaScript, CSS3, HTML5, PHP and client-side rendering and I’m pretty happy with it. However, I’ve always fancied a simple reusable HTML tag, which would be able to render my favorite music albums’ cover art, track listing, genres and info without the hassle of additional coding. So, here it is – my most recent experiment with HTML5 Web Components: X-CD-Info.

What it can do for you is to save you the nag of writing custom JavaScript, querying Last.Fm’s API then rendering the JSON and styling the result. All you need is:

<acidjs-xcdinfo
    artist="Joe Satriani"
    album="Unstoppable Momentum">
</acidjs-xcdinfo>

… And you will get this:

x-cd-info-full

Or if you prefer a more compact rending, like:

<acidjs-xcdinfo
    mode="compact"
    artist="Sepultura"
    album="Arise">
</acidjs-xcdinfo>

x-cd-info-compact

Or… why not go really minimalist, and show the cover art only (of course, everyone knows that album):

<acidjs-xcdinfo
    mode="minimal"
    artist="Sodom"
    album="Tapping the Vein">
</acidjs-xcdinfo>

x-cd-info-minimal

I love it, I really do, and I had real fun developing it. Moreover, apart from the tag itself, you have a couple of handy native JavaScript methods and HTML attributes:

HTML Attributes of the Tag

Any native HTML attribute (id, class, data-*, style, etc.) is supported, plus the component-specific:

  • artist – Required artist name to search on Last.Fm.
  • album – Required album name to search on Last.Fm.
  • mode – Optional display mode of the component. The default mode is "full". "compact" and "minimal" are the other two options.

JavaScript Methods

Any native JavaScript method (document.getElementById, document.querySelector, element.setAttribute, element.removeAttribute etc.
as well as their jQuery or other libraries aliases), plus the component-specific:

  • render(artist, album, mode) – Render album info in the queried acidjs-xcdinfo element. The mode parameter is optional and if not set to
    any of the "full", "compact" or "minimal", the "full" mode will be used. Example:

    • JavaScript:
      document.querySelector("#album-02").render("Steve Vai", "Passion and Warfare", "full");
      document.getElementById("#album-02").render("Steve Vai", "Passion and Warfare", "full");
    • jQuery:
      $("#album-02").get(0).render("Steve Vai", "Passion and Warfare", "full");
  • getData() – Get the stored current DTO, received from Last.Fm. Example:
    • JavaScript:
      document.querySelector("#album-02").getData();
      document.getElementById("#album-02").getData();
    • jQuery:
      $("#album-02").get(0).getData();

In order to use X-CD-Info you will need to get an API key from Last.Fm. If you don’t have one already, get it here. It’s free, and Last.Fm rocks.

Sounds good? Check it and get it here. Find @wemakesitesnet on Twitter and let me know what you think.

Sharing the same interest towards HTML5 Web Components? Check my other experiments, related to that exciting technology. If you are interested in similar 3rd-party widgets or APIs make sure you check my IMDB Fetcher project.

Rock and Roll!

thumb

HTML5 Web Component Widgets for Displaying Movie Data from IMDb

A few months ago I designed and developed this RESTFul API for extracting movie data from IMDb with a couple of methods, and I am happy that a lot of people actually found it useful. In a number of occasions I was contacted regarding the availability of any easy to use on our websites widgets, which utilize the data from IMDb Fetcher, and this eventually lead to the creation of the first one.

I implemented it as a reusable HTML5 Web Component *, and it’s usage is simple as using HTML tags, like:

<acidjs-imdb-movie
    movie="WarGames"
    renderposter="true"
    mode="compact">
</acidjs-imdb-movie>

The service is hosted on imdb.wemakesites.net, and in order to use he acidjs-imdb-movie tag you need to register it’s run time on your page:

<script src="http://widgets.imdb.wemakesites.net/1.0/"></script>

As the widget requires jQuery, and you may already have it on your website you may register just the rest of the code required to run the tag like:

<script src="http://widgets.imdb.wemakesites.net/1.0/?jquery=false"></script>

The widget comes in three different sizes:

Full

acidjs-imdb-movie-full

Compact

acidjs-imdb-movie-compact

Minimal

acidjs-imdb-movie-minimal

In regards to the configuration of the tag, you  have the following attributes:

  • movie – required. Its value is the name of the movie, against which will be queried the API.
  • mode – optional. Here you can set the size of the widget. You have “full“, “compact” and “minimal“. If no value is set, the widget will render in full view.
  • renderposter – optional Boolean. Default is true. If set to false, the widget will be rendered without poster.

The acidjs-imdb-movie tag utilizes localStorage, so once movie data is loaded on the client, it is stored locally in the browser for later usage. For the next version I am planning to store the poster image as base-64 URI, but first I need to find a workaround for the security restriction of canvas and cross-domain scripting. To view the locally stored widget data, use your browser’s console like this:

window.localStorage.getItem("acidjs-movie-data");

To delete locally stored widget data, type the following in your browser’s console:

window.localStorage.removeItem("acidjs-movie-data");

Have a great weekend and thanks for reading! For more HTML5, CSS3 and JavaScript stuff, check my website or follow me on Twitter!

* Recently I dived into the amazing world of HTML5 Web Components, and maybe you will find interesting my other endeavors in this direction.

 

REST API for IMDB Movie Data

IMDB Fetcher is an experimental, free and easy to use REST API for getting movie, series and artist data from IMDB and returning it as serialized JSON objects ready to use on web applications or websites.

imdb-fetcher

REST API Methods:

  • get/title: The method retrieves data (release date, running time, embeddable poster, writers, directors, cast, synopsis, country) for the requested title.
  • get/search: Search IMDB for titles, actors, companies, writers, directors, etc.
  • get/name: The method returns info about the person, who has been searched for – name, date of birth, short bio, productions, photo, etc.
  • img/: Images on IMDB cannot be hot-linked. This method circumvents the limitation.

Go straight to the documentation and start using today!

Related Posts and Links