API

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 for Embedding YouTube Videos

Continuing the experiments with HTML5 Web Components I started a few weeks ago, I am happy to present my latest endeavor – HTML5 Web Component, which can be used to embed YouTube videos as a custom tags:

<acidjs-youtube videoid="wvHsX2lSW64"></acidjs-youtube>

youtube-video-html5-web-component

The component utilizes YouTube’s embedding API, and all of the parameters are supported as HTML attributes. Only videoid is required, the rest in the list are optional:

  • videoid – ID of the video (required), as in the url: https://www.youtube.com/watch?v=wvHsX2lSW64
  • width – Player width (optional). Default: 640
  • height – Player height (optional). Default: 390
  • theme – Player theme (optional) “dark” or “light”. Default: “dark”
  • showinfo – Display author and uploader info (optional) – 0 or 1. Default: 1
  • loop – Continuously play the video (optional) – 0 or 1. Default: 0
  • end – The time, measured in seconds from the start of the video, when the player should stop playing the video (optional). Default: 0
  • autoplay – Video auto play (optional) – 0 or 1. Default: 0
  • autohide – Indicates whether the video controls will automatically hide after a video begins playing (optional) 0 or 1 or 2. Default: 2
  • rel – Show related videos when playback of the initial video ends (optional) – 0 or 1. Default: 0.
  • enablejsapi – Make the JavaScript API available (optional) – 0 or 1. Default: 1

Here’s a link to the demo and to the code in case you want to play with it. If you are interested in the relatively new technology of HTML5 Web Components you may want to check my other posts related to this topic.

Enjoy and thanks for stopping by!

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.

 

New HTML5 Web Component – AcidJs-X-AJAX

Continuing my explorations in the amazing field of HTML5 Web Components, which I started last week, I am happy to present my new endeavor:

x-ajax-html5-web-component

AcidJs-X-AJAX is a lightweight custom tag, capable of making asynchronous server calls with (almost) no coding client-side. Again, it is built on top of Mozilla’s X-Tags library, and looks like that:

<acidjs-xajax
    url="data/person.php"
    action="get"
    params='{"firstName": "Martin", "lastName": "Ivanov", "id": 1234567890}'
    datatype="json"
    id="ajax-panel-01"
    auto="true">
</acidjs-xajax>

Unlike AcidJs.XCheckbox, AcidJsXAjax is not a visual component, but it’s applications are numerous for example – in MV* applications or just pure old AJAX rendering.

Apart from the standard HTML attributes like id, class, data-* etc, here are a few, which are specific to the tag itself:

  • url – the request URL (optional)
  • action – the HTTP method (optional, default is GET)
  • params – query parameters in the form of a JSON object
  • datatype – response type (default is text/plain)
  • id – the ID of the panel
  • auto – if set to “true”, the AJAX call will be executed right after the tag is added to the page.

These properties are also standard getters and setters, so you could do:

document.querySelector("#ajax-panel-01").url;
document.querySelector("#ajax-panel-01").url = "path/to/resource/";

AcidJsXAjax comes also with an easily extensible API and custom events:

  • load()
  • getResponseData()
  • success
  • error

The demo of the component and also it’s code and download link are available on this page.

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

AcidJs.Ribbon 3.0 is Out

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

The new and shiny version 3.0 of AcidJs.Ribbon (formerly known as Ribbonbar.UI) is out!

acidjs-ribbon-dropdown

AcidJs.Ribbon is arguably among the best recreations of the desktop ribbon bar with JavaScript, CSS3 and HTML5. It is skinnable, fully AJAX driven component that is ready to use on any website, WYSIWYG editors or JavaScript-heavy apps. What you can you do with a MS Office like ribbon bar in web environment? Whether use it for navigation, associate it with your WYSIWYG editor, use in an email application, display links to your favorite social websites or simply build your entire webpage around it – this depends only on you.

acidjs-ribbon-file-tab

AcidJs.Ribbon has everything you would expect from a ribbon bar – cool looks, comprehensive and easy API, amazing command handling, different sets of inbuilt tools, cool looks. And at last, but not least – deploying and configuring it is a matter of minutes.

acidjs-ribbon-file-tab-green

Key Features

  • New user-friendly API with poweful methods, callbacks and events, allowing full control of the ribbon behavior.
  • Support for multiple ribbon instances on a single page.
  • New modern and fully CSS3 skin with fallback for older browsers.
  • Width of groups can be “auto”, percentage or pixels.
  • Server platform independent.
  • New event state-of-the-art tool event handling.
  • Support for tool buttons with text.
  • If dropdown tool name is "font-face", its items items are automatically styled with the font itself and sorted alphabetically.
  • If dropdown tool name is "font-size", its items are styled with the font-size itself.
  • New configuration error and warning handling.
  • Support for optional and fully customizable “file” tab menu with support for different button color.
  • Ribbon expand/collapse functionality.
  • Support for optional and fully configurable “quick access” toolbar.
  • Optional onUnsupported callback.
  • Optional cssClasses array that can be applied to the rendering node.

acidjs-ribbon-file-tab-purple

acidjs-ribbon
Sounds good? You can check the info on this page, or go directly to the demo from this link! Download links are provided on each page!
Related Posts and Links

New Version of IMDB Fetcher JSON API

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

I’ve just released a new version of the IMDB API, which fixes a bug that appeared a few days ago when IMDB made changes to their website. Please, download it from this link, or check this page for more info about the script. The API itself was not changed, but you can still take a look at the documentation.

imdb-fetcher

About IMDBFetcher

IMDBFetcher is an experimental, JavaScript and PHP API for fetching data from IMDB and returning it as a JSON object ready for parsing and rendering on the for the client. The current version of IMDBFetcher supports title, poster, release date, director(s), actor(s), IMDB and MPAA rating, description, genre(s) and running time.

Continue reading here

Related Posts