Month: July 2012

Applying Special CSS Rules for IE6-IE8 and IE9 Without Affecting Other Browsers

It’s been a while since I blogged about this \9 CSS hack for all versions of Internet Explorer. Personally I always try to avoid hacks, but recently I had to tweak some style sheet to use special styles for IE6-IE8 and for IE9, so I remembered of this hack. Here’s how I did it:

/* first apply the \9 hack for any version of internet explorer, for example */
body
{
    background: #f00\9;
}

/* ... then override the above rule by using the CSS3 :root selector which is supported by IE9, but still use the \9 hack to filter out only IE9 */
:root body
{
    background: #ccc\9;
}

By using the above CSS you can have special styles, which are the same for Internet Explorer 6-8 and other rules for Internet Explorer 9 without affecting other browsers.

IMDB Fetcher – Experimental IMDB JavaScript and PHP API

Recently I came up with the idea to create my personal movie library that runs over the local intranet, and I was sure that IMDB provides some service that I can use to fetch movie data from their servers. I was really disappointed that such popular and huge website is well behind the current trends by not providing an external API of any kind. Eventually I checked for alternatives on the Internet, and actually I found a couple of cool solutions, but finally I decided to create one of my own, and the result is IMDBFetcher.

IMDBFetcher makes possible 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. There is a really thin PHP layer which is solely responsible to make the crossdomain request of getting the HTML page locally, strip some white space and send it g-zipped to the client. The actual conversion from HTML to JSON is done on the client via regular expressions. The final result looks like this:

{
    "title": "Scarface",
    "starring": [
        "Al Pacino", "Michelle Pfeiffer", "Steven Bauer"
    ],
    "directors": ["Brian De Palma"],
    "year": "1983",
    "rating": "8.2",
    "poster": "http://ia.media-imdb.com/images/M/MV5BMTQ5NzI3OTQ3NF5BMl5BanBnXkFtZTcwODczMjMzMQ@@._V1._SY317_CR4,0,214,317_.jpg",
    "description": "In 1980 Miami, a determined Cuban immigrant takes over a drug cartel while succumbing to greed.",
    "genres": ["Crime", "Drama", "Thriller"],
    "mpaaRating": "R",
    "releaseDate": "9 December 1983 (USA)",
    "runningTime": "170 min",
    "result": "success"
}

… And is stored on the client in the form of key/value paired data objects, which can then be (re)used locally. IMDB restricts hotlinking of images from their servers, so I also had to write a small PHP function that returns a local copy of the movie poster which can be used when rendering the movie JSON object to HTML on the page. Please, refer to the “Using the Image Proxy” chapter on the documentation page for IMDBFetcher to learn how to use it.

Key Features

  • Provides simple to use movie data API from IMDB and returns a native JSON object ready for rendering on the client.
  • Gzips and strips white space and other crap from the original page, and returns a simple native JSON object.
  • Fully ajax-driven, no page reloads.
  • Features convenient API methods for retrieving local or remote data, and for deleting local movie data.
  • A bonus script for getting posters from IMDB locally (due to the restricted hotlinking policy of IMDB) is included.
  • Very fast, responsive and extremely easy to use.

Downside of IMDBFetcher

The major downside is that IMDBFetcher is fully dependent on the DOM provided by IMDB. If IMDB changes the markup of their pages, then IMDBFetcher will stop working, but anyway it can be fixed pretty fast on my side, and I will release an updated version.

Supported Browsers

Mozilla Firefox, Google Chrome, Apple Safari, Opera, Internet Explorer 9/10. IMDBFetcher does not initialize on older versions of Internet Explorer (6-8).

Now… What?

If you like the idea, you can give it a try – just check the demo, download it if you like it and learn how to use it by visiting the IMDBFetcher’s documentation page. If you are looking for other cool solutions or web UI components, you can check Acid.JS Web.UI and get the entire suite from this link.

Related Posts

XML to JSON JavaScript Objectifier

AcidJs.XmlToJson() JavaScript class is a simple XML to JSON converter and 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.

Requirements

  • Modern browser with native JSON support. To enable in older browsers, use Douglas Crockford’s JSON2 or one of the various solutions on the Internet.
  • Web Server.
  • PHP.

Usage and API

Copy the entire AcidJs.XmlToJson/ directory from the distribution file, which can be downloaded at this page in the root of your project, then register the run-time script before the closing </body> tag of the page:

<script src="AcidJs.XmlToJson/Scripts/AcidJs.XmlToJson.js"></script>
(function() {
    window.xmltojson = new AcidJs.XmlToJson();
})();

If you wish to keep the AcidJs.XmlToJson/ directory on another location, you can use the optional rootFolder property in the object initializer, and then make sure you also change the path in the SRC attribute of the script tag you used to register the XmlToJson runtime:

<script src="Scripts/AcidJs.XmlToJson/Scripts/AcidJs.XmlToJson.js"></script>
(function() {
    window.xmltojson = new AcidJs.XmlToJson({
        rootFolder: "Scripts/" // do not forget the trailing slash
    });
})();

Once you initialize XmlToJson you will have access to the following methods:

getRemoteData(config)
Request XML, convert it to JSON on the server, then set and optionally return the JSON object. In the config you can defin the following properties: name, url, params (optional) and success callback (optional):

window.xmltojson.getRemoteData({
    name: "slayer", // unique name that will be used to request the converted XML to JSON object locally
    url: "http://ws.audioscrobbler.com/2.0/", // remote / RESTFul service URL
    params: [{
            method: "album.getinfo"
        },{
            api_key: "XXXXXX" // your Last.FM API key
        },{
            artist: "Slayer"
        },{
            album: "Seasons in the Abyss"
        }
    ],
    success: function(data) {
        // the success call back returns the newly created data object that contains the converted JSON object and the config of the getRemoteData method
        console.log("data object: ", data); // return the entire data object
        console.log("JSON object: ", data.json); // return the converted XML to JSON object only
        console.log("data object name: ", data.name); // return the name of the data object
        console.log("request url: ", data.url); // return the request url
        console.log("request parameters as objects: ", data.params); // return the remote request parameters as objects
        console.log("removte request with the params as get data: " + data.remoteUrl); // return the removte request with the params as get data
    }
});

getLocalData(name)
Returns the local instance of an existing JSON data object by it’s name (set in the name property of the config of the getRemoteData method)

window.xmltojson.getLocalData("slayer");

deleteData(data)
Deletes an array of stored data object(s) by specified name and makes them unavailable.

window.xmltojson.deleteData(["slayer", "rss", "feedburner"]);

Examples

Get Artist and Album Data from Last.FM (http://last.fm):

window.xmltojson.getRemoteData({
    name: "slayer", // unique name that will be used to request the converted XML to JSON object locally
    url: "http://ws.audioscrobbler.com/2.0/", // remote / RESTFul service URL
    params: [{
            method: "album.getinfo"
        },{
            api_key: "XXXXXX" // your Last.FM API key
        },{
            artist: "Slayer"
        },{
            album: "Reign in Blood"
        }
    ],
    success: function(data) {
        console.log(data.json);
    }
});

Get RSS feed from Feedburner (http://feedburner.com)

window.xmltojson.getRemoteData({
    name: "feedburner",
    url: "http://feeds.feedburner.com/acidmartin",
    success: function(data) {
        console.log(data.json);
    }
});

Parse Sitemap File

window.xmltojson.getRemoteData({
    name: "feedburner",
    url: "http://acidjs.wemakesites.net/sitemap.xml.php",
    success: function(data) {
        console.log(data.json);
    }
});

Using XmlToJson

Related Posts

Free RESTFul Services Builder, Debugger and Tester

RESTBuilder is a free web-based JavaScript client for building, debugging and testing RESTFul services. It can be inserted to any web-site during it’s development process and make the REST requests testing fun and easier, providing nice interface, a lot of customization options, error handling and support both for same- and cross-domain requests to custom and public APIs like Twitter and Facebook.

It is a must-have tool that can be used along with our CSS Builder and JavaScript merger and obfuscator tools.

Key Features

  • Can be injected to a local web-site for testing it’s REST services.
  • Support for cross-domain requests and public APIs (Twitter, Facebook, etc).
  • Sleek, customizable, user-friendly and intuitive interface.
  • Optional syntax highlighting for the response data object.
  • Error handling for cross-origin request.

If these sound good and useful to you, you can go to the info page, check the demo or download RESTBuilder. Make sure you visit component’s help and API page to learn how to include and use the tool in your own projects.

To stay updated about Acid.JS Web.UI, please, subscribe or follow WeMakeSites.NET on Twitter.