Data Dumps from IMDb are now Available Through the IMDb Fetcher API

IMDb Fetcher is an experimental IMDb movie and actors/directors/cast/etc details and search retrieval service I launched in early 2014. In case you don’t want to use the REST API to retrieve IMDb movie and actor data, you can now get data dumps in JSON format, containing several thousand entries.

Here’s a single data dump for a movie and for a name:

Wild at Heart

{
  "status": "success",
  "code": 0,
  "data": {
    "imdbEndPoint": "http://www.imdb.com",
    "imdbId": "tt0100935",
    "title": "Wild at Heart",
    "year": "1990",
    "rating": "7.3",
    "description": "Young lovers Sailor and Lula run from the variety of weirdos that Lula's mom has hired to kill Sailor.",
    "cast": [
      "Nicolas Cage",
      "Laura Dern",
      "Willem Dafoe",
      "J.E. Freeman",
      "Crispin Glover",
      "Diane Ladd",
      "Calvin Lockhart",
      "Isabella Rossellini",
      "Harry Dean Stanton",
      "Grace Zabriskie",
      "Sherilyn Fenn",
      "Marvin Kaplan",
      "William Morgan Sheppard",
      "David Patrick Kelly",
      "Freddie Jones"
    ],
    "imdbUrl": "/title/tt0100935/?ref_=fn_tt_tt_1",
    "country": "USA",
    "releaseDate": "1990-08-17",
    "directors": [
      "David Lynch"
    ],
    "writers": [
      "Barry Gifford",
      "David Lynch"
    ],
    "genres": [
      "Comedy",
      "Crime",
      "Romance"
    ],
    "poster": "[POSTER_URL]",
    "runningTime": "125 min"
  }
}

Clint Eastwood

{
  "status": "success",
  "code": 0,
  "data": {
    "imdbEndPoint": "http:\/\/www.imdb.com",
    "name": "Clint Eastwood",
    "birthDate": "1930-5-31",
    "imdbUrl": "http:\/\/www.imdb.com\/name\/nm0000142\/?ref_=fn_nm_nm_1",
    "bio": "Perhaps the icon of macho movie stars Clint Eastwood has become a standard in international cinema. Born in 1930 in San Francisco the son of a steelworker Eastwood briefly attended Los Angeles City College but dropped out to pursue acting...",
    "knownFor": [
      {
        "title": "Gran Torino (2008)",
        "url": "\/title\/tt1205489\/?ref_=nm_knf_t1"
      },
      {
        "title": "Million Dollar Baby (2004)",
        "url": "\/title\/tt0405159\/?ref_=nm_knf_t2"
      },
      {
        "title": "Erbarmungslos (1992)",
        "url": "\/title\/tt0105695\/?ref_=nm_knf_t3"
      },
      {
        "title": "Cowboys (1959)",
        "url": "\/title\/tt0052504\/?ref_=nm_knf_t4"
      }
    ],
    "photo": "[PHOTO_URL]"
  }
}

Interested? Check this page for details.

Have a great week!

Tic-Tac-Toe Game Recreated as a HTML5 Web Component

Last night I finished my latest experiment in recreating the classic Tic-Tac-Toe game as a HTML5 Web Component. Here’s the result and a few details:

  • Two players take turns on the same computer. The next version will support one player vs. the computer.
  • Game lobby for selecting player names.
  • No images or JavaScript animations, CSS3 stuff only.
  • Small API.
  • Custom events, allowing the game to exchange data on the network or notify/interact by/with other components/controls on the page.
  • Localizable via inline JSON (check the code listing below).
  • Support for 3 board sizes.
  • Allowing multiple instances.

tic.tac.toe

The Markup

<acidjs-xticatactoe x="Martin" o="James"></acidjs-xticatactoe>
<acidjs-xticatactoe debug="true" size="large"></acidjs-xticatactoe>
<acidjs-xticatactoe size="small"></acidjs-xticatactoe>
<acidjs-xticatactoe debug="true">
    <code hidden>
    {
        "yourTurn": "du bist dran!",
        "startNewGame": "Neues Spiel starten",
        "start": "Start!",
        "playerXName": "Spieler X Name",
        "playerOName": "Spieler O Name",
        "choosePlayerXName": "Wählen Sie Name für Spieler X",
        "choosePlayerOName": "Wählen Sie Name für Spieler O",
        "youWin": "Sie gewinnen!",
        "draw": "Unentschieden :("
    }
    </code>
</acidjs-xticatactoe>

HTML Attributes

Apart from the standard HTML attributes (style, class, id, etc.), the tag also supports the following component-specific attributes:

  • x – Optional name for the “x” player. Default: "Tic".
  • o – Optional name for the “o” player. Default: "Tac".
  • debug – Optional. If set to true, the component will output console messages. Default Default: "false".
  • size – Optional size of the board. Default: "medium". Other possible values are "small" and "large".

JavaScript API

All standard JavaScript methods are supported, plus the component-specific:

  • init() – Initialize the game.
  • restart() – Restart the game (an alias of the init() method).
  • destroy() – Destroy the game and remove the board.

Events

The component publishes the following custom events, returning event and game-specific data. The distribution, which could be downloaded from this link contains these event bindings, so you can use your browser’s console to see what data is returned upon firing those events.

  • ttt:ready – Fired when game is ready to play.
  • ttt:win – Fired when game is a win.
  • ttt:draw – Fired when game is a draw.
  • ttt:playing – Fired upon user action.

Enjoy the weekend! If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

Ebook Reader HTML5 Web Component

Inspired by this awesome solution, I just released a new HTML5 Web Component, recreating the layout and controls of e-book readers. Enter the X-Reader.

thumb

The Markup

<acidjs-xreader id="book-1" booktitle="A Clockwork Orange" author="Anthony Burgess" source="books/a-clockwork-orange.html"></acidjs-xreader>
<acidjs-xreader id="book-2" booktitle="Nineteen Eighty-Four" author="George Orwell" controls width="800" height="600" source="books/nineteen-eighty-four.html"></acidjs-xreader>
<acidjs-xreader id="book-3" width="320" height="240" defaultpage="1" source="books/lorem.html"></acidjs-xreader>

HTML Attributes

Apart from the standard HTML attributes (style, class, id, etc.), the tag also supports the following component-specific attributes:

  • source – Required. Book source.
  • booktitle – Optional. Book title.
  • author – Optional. Book author.
  • controls – Optional. If set, the paging controls will be displayed by default.
  • width – Optional width in pixels of the component. Default: 640.
  • height – Optional height in pixels of the component. Default: 480.
  • defaultpage – Optional default page. Default: 0.

JavaScript Methods, Getters, Setters and Custom Events

All standard JavaScript methods are supported, plus the component-specific:

  • getData() – Returns the data object, associated with the queried component.

If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

Ribbon JS 4.0.1 Minor Update

I’ve just released a new minor fix for Ribbon JS addressing a few issues from the previous major update. The fix is fully backwards compatible with the previous version of the control, so it is safe to upgrade. Here are the release notes:

  • Fix for multiple triggering of the “acidjs-ribbon-tool-clicked” event in certain cases.
  • CSS fix for the Quick Launch Toolbar.
  • CSS fix for the setting of font families in the font-family dropdown.
  • Renamed the getToolByName() method getToolsByName(), which now returns an array of matching DOM elements (for example multiple “paste” command in different ribbon tools).

To stay updated with Ribbon JS releases, follow the relevant posts on my blog or subscribe to the new RSS feed on ribbonjs.com.

ribbon.js.scr

Ribbon JS is arguably the best recreation of the MS Officetm ribbon bar, using JavaScript, CSS3, and HTML5. It is a lightweight control, which is ready to use on websites, web-based WYSIWYG editors, sophisticated back-end systems, mail applications, complex file managers, and JavaScript-heavy apps. It has everything you would expect from a ribbon bar – comprehensive and fully documented API, amazing command handling, huge set of inbuilt tools, capability to add custom tools via client-side templates, cool looks and is also available optionally wrapped as a full-blown HTML5 WebComponent. Last but not least, it only takes a few minutes to deploy, configure, and run.

Ribbon JS 4 is Now Also Available as a HTML5 Web Component

Following last week’s release of Ribbon JS 4 and its new website, I decided to provide one more option for ribbon initialization along with the JSON configuration. Instead of composing a relatively complex JSON object, developers using Ribbon JS are now able to create ribbons as HTML5 web components through a simple custom HTML tag. The functionality, complete toolset, appearance, methods and events are kept intact with this approach, so it is absolutely safe to give it a try.

You could play with the demo of Ribbon’s HTML5 Web Component here, browse the documentation and download it. The web component does not include AcidJs.Ribbon, so in order to run it you will need to download also the JavaScript runtime of the control.

ribbon.js.scr

If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.