Web Services

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

HTML5, CSS3 and JavaScript Experiments and Insight Website

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

I am pleased to announce that I’ve just finished my latest endeavour – HTML5, CSS3 and JavaScript Experiments and Insight, and most of the code samples and demos from my blog have been moved there in and new and convenient code-listing and demo form. From now on, each new blog post will be accompanied by a dedicated page on that website on which my readers will be able to have a look at the code, run the example and eventually download it.

Enjoy HTML5, CSS3 and JavaScript Experiments and Insight and have a great rest of the week!

Builder.CSS – Online CSS Optimizer, Merger and Minifier

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

I am happy to announce that one of Acid.JS‘s most successful widgets, Builder.CSS has evolved to a free online service with tons of improvements, brand-new and amazing interface, drag and drop of local of styleshets from the desktop, predefined projects and much more. Builder.CSS is a free tool for merging and minifying style sheets into a single file. You can use it along with our Image2Base64 Encoder, Builder.JS and RESTBuilder tools.

Just give it a try on it’s new home page. Optionally, it is available for hosting on your own domain – if you are interested, please, check the Help & About tab of Builder.CSS.

builder-css

Features and Improvements

  • New and cool looks with easy and intuitive UI.
  • Brand-new optimization routine, crunching your CSS even more at the speed of light.
  • Support for predefined projects, which can contain the styles of all your websites (self-hosted version only).
  • Add files from desktop via drag and drop.
  • View, exclude and remove files from compilation.
  • Processing is done entirely in the browser.
  • Option to save the ouput to a file on the server (self-hosted version only).
  • … And much more, just try it here.

Screenshots

Related

Selecting only the first element occurrence out of siblings with the same class name with CSS3

Imagine you have the following markup…

<ul>
    <li>item 0</li>
    <li>item 1</li>
    <li class="marked">item 2</li>
    <li class="marked">item 3</li>
    <li class="marked">item 4</li>
</ul>

… And you need to apply special styles only to the first occurence of the .selected class. CSS3 has a lot of possibilities for selecting elements, but it does not provide solution for this case. So, when :nth-of-type(), :first-of-type, nth-child() and :first-child do not work, you can use this one:

/* select any .marked element */
.marked {
    color: #f00;
}

/* override all .marked elements but the first using the sibling selector */
.marked ~ .marked {
    color: #000;
}

Related Posts

Useful JavaScript Classes and Functions

  • Crossbrowser image reflections enabler JavaScript class.
  • JavaScript Mapper Class for RESTFul Methods – Recently I had to work with a bunch of RESTFul API methods, so instead of defining manually separate calls/methods for each API request, I decided to do it viceversa – to force JavaScript to create these methods automatically for me out of the RESTFul API by providing the URLS and other required data.
  • XML to JSON JavaScript Objectifier Class – Simple XML to JSON objectifier. It can be used with custom or public XML, REST APIs such as Last.FM, RSS and ATOM feeds, sitemaps, etc by converting the XML server responses to native JSON objects in the browser which are then instantly accessible by its simple to use JavaScript methods.
  • URI to JSON Serializer Class – Tiny JavaScript class, using the HTMLAnchorElement interface to convert URI string into a JSON object.  The object returned by the function contains hash, host, hostname, parameters key-value map, pathname, port and protocol. Works with all major browsers (Firefox, Chrome, Safari, Opera, IE6-10).
  • IMDB Fetcher – Experimental IMDB JavaScript and PHP API – Makes possible the execution of cross-domain AJAX queries to IMDB and returns a JSON data object for the requested movie. What is currently supported – movie title, poster, release date, description, actor(s), director(s), IMDB and MPAA rating, running time, etc.
  • Quick and Dirty Localization With JavaScript – A quick and dirty JavaScript localization routine that provides basic localization (no support for plurals, etc), operates on the DOM of the page and uses data-lang attribute for language keys storage. Lokalizr works with all major browsers, beginning with IE8.
  • JavaScript Instance Name Finder – Small JavaScript function that checks for instances of an object within a defined scope and returns an array of instances’ variable names that can be used for different purposes.
  • HTML5 Placeholder Enabler – The solution presented in this post checks for the availability of the placeholder attribute in textboxes, and if it is not available applies its content as value to the elements that contain it.
  • HTML 5 Details Element Enabler – According to WhatWG, the “<details /> element represents a disclosure widget from which the user can obtain additional information or controls“. In brief, you can use it to create panelbar elements without JavaScript, as the expand / collapse functionality is native to it. Currently (October, 2011), the only browser which supports <details /> is Google Chrome, so if you are eager to start using this element on your pages, you can do so with the help of a few lines of JavaScript to make sure it works on all browsers.
  • WebWorkers JavaScript class.
  • Classless JavaScript inheritance.
  • JavaScript class augmenter.
  • JavaScript API for TinyURL.
  • HTML Validation Bookmarklet.
  • JavaScript Template Engine.

JavaScript Mapper for RESTFul Methods

Recently I had to work with a bunch of RESTFul API methods, so instead of defining manually separate calls/methods for each API request, I decided to do it viceversa – to force JavaScript to create these methods automatically for me out of the RESTFul API by providing the URLS and other required data. In short – we provide a REST end-point and a key/value map of all API methods, which we plan to use, along with their data types, request type and callback functions, which is then processed by the RestMethodMapper class and converted on the fly to pure JavaScript methods to that class, so instead of calling:

"rest/user/get/my"

… We can execute:

window.mapper.userGetMy();

… And we can also pass as an argument the http parameters object:

window.mapper.userGetMy({
    firstName: "John",
    lastName: "Smith",
    id: 9999
});

… Which will result in an ajax request to:

rest/user/get/?firstName=John&lastName=Smith&id=9999&_=1348612389319

The API methods are defined in the constructor of the RestMethodMapper class like this – the first argument is the REST end-point, the second argument is a key/value object map of all RESTFul method and their properties (type, dataType, success and failure callbacks):

(function() {
    window.mapper = new AcidJs.RestMethodMapper(
        "rest/",
        {
            "user/get/": {
                type: "GET",
                cache: false,
                success: function(response) {
                    console.log("success:", response);
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log("error: ", jqXHR, textStatus, errorThrown);
                },
                dataType: "json"
            },
            "user/get/my/": {
                type: "get",
            },
            "msg/post/new/": {
                type: "post"
                success: function() { },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log("error: ", jqXHR, textStatus, errorThrown);
                },
                dataType: "json"
            }
        }
    );
})();

The above code can be tested like this:

window.mapper.userGet({
    firstName: "John",
    lastName: "Smith",
    id: 9999
}); // which will request rest/user/get/ with the parameters set as an argument object
window.mapper.userGetMy(); // which will request reset/user/get/my/
window.mapper.msgPostNew({
    id: 1234,
    body: "Lorem ipsum dolot sit amet"
}); // which will request rest/msg/post/new/ with the parameters set as an argument object

Below is the full source code of the RestMethodMapper class:

(function() {
    "use strict";

    /*
     * @namespace AcidJs
     **/
    if(undefined === window.AcidJs) {
        window.AcidJs = {};
    }

    /*
     * @class RestMethodMapper
     * @constructor
     * @param endpoint {String} [optional]
     * @param method {String} rest api method, for example "user/get/my"
     * @author Martin Ivanov http://acidjs.wemakesites.net
     **/
    function RestMethodMapper(endpoint, method) {
       endpoint = endpoint || "";
       method = method || {};

       var
           that = this;

       $.each(method, function(key, value) {
           (function() {
               var
                   name = that.restToMethod(key);

               if(!that[name]) {
                   var
                       ajaxConfig = {
                           url: endpoint + key
                       };

                   if(value) {
                       $.each(value, function(k, v) {
                           ajaxConfig[k] = v;
                       });
                   }

                   that[name] = function(data) {
                       if(data) {
                           ajaxConfig.data = data;
                       }
                       $.ajax(ajaxConfig);
                   };
                }
            })();
        });
    }

    RestMethodMapper.prototype = {
        /*
         * @method restToMethod convert RESTFul api method to a JavaScript method
         * @param url {String}
         * @return {String}
         **/
        restToMethod: function(url){
            if(!url) {
                return "";
            }

            var
                path = url.split("/"),
                methodName = "";

            for(var i = 0, len = path.length; i < len; i++) {
                methodName += (i === 0) ? path[i] : path[i].charAt(0).toUpperCase() + path[i].substr(1);
            }

            return methodName;
        }
    };

    window.AcidJs.RestMethodMapper = RestMethodMapper;
})();

The RestMethodMapper class uses jQuery, but obviously it can be easily implemented in pure JavaScript or with the help any other JavaScript library. I utilized jQuery, because the project required it, so I made use of that library’s $.ajax() method.

Related Posts