Category Archives: Fun

IMDb REST API Version 3

I spent the last couple of days to fully reconsider and rewrite my IMDb REST API (formerly known as IMDb Fetcher) and I am happy to announce version 3 and the new website.

What’s New:

  • Improved speed.
  • Ease of use.
  • The request by title or name has been removed and now all requests are done by IMDb ID:
    // http://imdb.wemakesites.net/api/tt0120782 (http://www.imdb.com/title/tt0120782/)
    {
    	"status": "success",
    	"code": 200,
    	"message": "ok",
    	"data": {
    		"id": "tt0120782",
    		"type": "title",
    		"title": "Palmetto",
    		"year": "1998",
    		"description": "A recently released ex-con gets involved in a fake kidnapping scheme that turns very real.",
    		"certificate": "",
    		"duration": "114 min",
    		"released": "1998-02-20",
    		"cast": [
    			"Woody Harrelson",
    			"Elisabeth Shue",
    			"Gina Gershon",
    			"Rolf Hoppe",
    			"Michael Rapaport",
    			"Chloë Sevigny",
    			"Tom Wright",
    			"Marc Macaulay",
    			"Joe Hickey",
    			"Ralph Wilcox",
    			"Peter Paul DeLeo",
    			"Hal Jones",
    			"Salvador Levy",
    			"Richard Booker",
    			"Mikki Scanlon"
    		],
    		"genres": [
    			"crime",
    			"drama",
    			"mystery",
    			"romance",
    			"thriller"
    		],
    		"directors": [
    			"Volker Schlöndorff"
    		],
    		"writers": [
    			"James Hadley Chase",
    			"E. Max Frye"
    		],
    		"image": "http://ia.media-imdb.com/images/M/MV5BNTk2MjE2NDY2NV5BMl5BanBnXkFtZTcwMTcxMTQyMQ@@._V1_SY317_CR3,0,214,317_AL_.jpg",
    		"review": {
    			"text": "I think this is one of those modern-day film noirs (neo noir) that went under the radar. It is excellent, and few people know about it. It's a very underrated film.It had an interesting and unpredictable story with some very neat twists which a good noir might have. I'm not really sure I liked the very ending, but I sure enjoyed the rest of it. That entertainment included ogling a couple of sexy female leads, played by Elisabeth Shue and Chloe Sevigny and I loved the wonderful colors in this movie. Not only was the cinematography great, so was the soundtrack with some solid blues tracks. The guitar playing reminded me of the Ry Cooder's work in "Midnight Run."The movie was labeled by some national critics as a "poor man's 'Body Heat.'" Well, that's fine with me because I liked "Body Heat" a lot, too. If you liked that, you should like this movie, too.Yes, there are a few holes in the story but nothing that damaged the storyline to any degree. Woody Harrelson was good in the lead and Gina Gershon and Michael Rapaport provided solid performance in supporting roles.",
    			"rating": "9/10"
    		}
    	}
    }
  • New search by keywords, within any IMDb category – title, name, keywords, characters, companies, etc. The result is an array, containing all of the data found from the query, for example:
    // http://imdb.wemakesites.net/api/search?q=Danny+Trejo (http://www.imdb.com/find?ref_=nv_sr_fn&q=danny+trejo&s=all)
    {
    	"status": "success",
    	"code": 200,
    	"message": "ok",
    	"term": "jQuery21404515186028318603_1450864617567&q",
    	"search_url": "http://www.imdb.com/find?q=Danny Trejo&s=all567a729f642f2",
    	"data": {
    		"results": {
    			"names": [
    				{
    					"title": "Dan Aykroyd",
    					"id": "nm0000101",
    					"url": "http://www.imdb.com/name/nm0000101/?ref_=fn_al_nm_1"
    				},
    				{
    					"title": "Daniella Alonso",
    					"id": "nm0022161",
    					"url": "http://www.imdb.com/name/nm0022161/?ref_=fn_al_nm_2"
    				},
    				{
    					"title": "Danny Dyer",
    					"id": "nm0245705",
    					"url": "http://www.imdb.com/name/nm0245705/?ref_=fn_al_nm_3"
    				},
    				{
    					"title": "Danny Kaye",
    					"id": "nm0001414",
    					"url": "http://www.imdb.com/name/nm0001414/?ref_=fn_al_nm_4"
    				},
    				{
    					"title": "Danny Trejo",
    					"id": "nm0001803",
    					"url": "http://www.imdb.com/name/nm0001803/?ref_=fn_al_nm_5"
    				},
    				{
    					"title": "Danny DeVito",
    					"id": "nm0000362",
    					"url": "http://www.imdb.com/name/nm0000362/?ref_=fn_al_nm_6"
    				},
    				{
    					"title": "Danny Masterson",
    					"id": "nm0005194",
    					"url": "http://www.imdb.com/name/nm0005194/?ref_=fn_al_nm_7"
    				},
    				{
    					"title": "Danny McBride",
    					"id": "nm1144419",
    					"url": "http://www.imdb.com/name/nm1144419/?ref_=fn_al_nm_8"
    				},
    				{
    					"title": "Danny Glover",
    					"id": "nm0000418",
    					"url": "http://www.imdb.com/name/nm0000418/?ref_=fn_al_nm_9"
    				},
    				{
    					"title": "Danny Elfman",
    					"id": "nm0000384",
    					"url": "http://www.imdb.com/name/nm0000384/?ref_=fn_al_nm_10"
    				}
    			],
    			"titles": [
    				{
    					"title": "So Dear to My Heart",
    					"id": "tt0041890",
    					"url": "http://www.imdb.com/title/tt0041890/?ref_=fn_al_tt_1"
    				},
    				{
    					"title": "Danny Collins",
    					"id": "tt1772288",
    					"url": "http://www.imdb.com/title/tt1772288/?ref_=fn_al_tt_2"
    				}
    			]
    		}
    	}
    }

The API is free and does not require API keys, so you can start using it today!

Happy holidays!

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.

A Dev Epic

Remembering:

The glorious times of yore, when giant Java applets walked Devearth trampling down IE – the only browser known to Devkind.
The unforgettable past, when JavaScript believers were shunned, mocked and decried as non-developers.
The dark ages, when CSS sorcerers were called designers.

The romance of the hardest decision to take – to depend or not on the helping magical hand of the mysterious brothers Quirks Mode and Xml Prolog.

When listening to the call of the Async was considered heresy.
When XHTML was unthinkable…
When Web 2.0 was just an obscure idea (and remained such).

It’s gone now.

My New Home Studio in Malta

I recently left Germany relocating to the island of Malta, and a couple of weeks later I was finally able to deploy my new home studio with a new addition – an amazing custom-made 2 x 12 guitar cabinet with Celestion V30 speakers, custom built for me by Paul Gough of Zilla Cabs (cheers, Paul – for all the hard work, patience and killer quality).

Here are a few photos of the studio. Hopefully I find more time for playing the guitar in the teeth of my main job as a front-end developer. In case you are interested, here’s a detailed rundown of my rig, and on this page you’ll find a lot more photos and specs of my guitars and gear.

IMG_0487 IMG_0488 IMG_0489 IMG_0491 IMG_0492 IMG_0495 IMG_0498 IMG_0500 IMG_0501 IMG_0507 IMG_0511 IMG_0513 IMG_0514 IMG_0516 IMG_0517

Finally – thanks for reading this and greetings from sunny Malta!

Animated CSS3 Only Horizontal Accordion

This animated horizontal accordion was achieved without a single line of JavaScript, but only with CSS and minimalistic markup:

animated-css3-only-horizontal-accordion

The widget utilizes a form with a list of hidden radio buttons, CSS3 transitions, transforms and sibling selectors, and works with all modern browsers, including IE9 (excluding the slide animation).

Have fun and use for free, but do not forget to check the actual CSS and HTML, because they are pretty cool!

Related Posts and Links