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.

X-Checkbox – Custom HTML5 Web Component

People who follow this blog (cheers, mates!) and my fellow co-workers know that I am interested in the form control styling, and especially that of check boxes and radio buttons. Over the years I have come up with a number of different solutions, but finally I found the time to start experimenting with the new and exciting world of the HTML5 Web Components. This is my first attempt to create a custom web component – a custom check box, built on top of Mozilla’s X-Tag library. The reason I did not use Google Polymer is just because I started playing with X-Tags, but certainly in the near future I will utilize Polymer.

So here it is – as easy as <acidjs-xcheckbox></acidjs-xcheckbox>, supporting native getters, setters and native properties (checked, disabled, class, etc.) as well as any other custom attributes, form submission without additional check box manipulation, keyboard events plus a couple of additional methods for toggling the enabled and checked states.

Since Shadow DOM is not consistent across browsers yet, the gory guts of the component will reveal a simple check box, wrapped in a label. The look and feel has been achieved with CSS3. Tested on Firefox and Chrome, but supposedly should work on other modern browsers plus IE11.

x-checkbox-custom-web-component

Have nice weekend and greetings from sunny Malta!

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, built for my 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!

CSS3 Treeview with Nested Nodes Selection. Almost JavaScript-less.

This is a follow-up to one of my most popular posts, which I have been planning for quite some time. So, here it is – the new CSS3-only driven treeview, with updated looks and support for selection of nested nodes. And 5 lines of optional JavaScript in case you would like to use the checkbox nested nodes selection.

css3-treeview-with-multiple-node-selection

On this page you will find a working example, as well as the HTML,  CSS3 and JavaScript source code listing.

The solution is CSS3-heavy, and has been tested on Firefox, Chrome, Opera and Internet Explorer 9+. In case you are interested in other atypical uses of checkboxes and radio buttons for building of interactive UI widgets, you may want to check this post.

Related Posts and Links

My Guitars, Rig, Effects and Amps Rundown

It’s very uncommon for me to write about music and music-making here, because the blog is reserved exclusively for HTML5, CSS3 and JavaScript. Recently, however, I made significant changes to my home studio and guitar rig, which I’d like to share.

Disclaimer: This is not a professional gear review, neither I am a professional musician, just a software developer, who, back in the days dreamed of becoming a rock star.

The Amps

I’ve experimented with various amplifiers, both tube and solid state. A few months ago, I decided to go for Carvin’s VL300, better known as Steve Vai‘s legendary Legacy 3, which I’m using with a 50-watt HT-112 Blackstar cabinet, but I’m planning to switch to a 4 x 12 Bugera, Marshall or Engl custom 2 x 12 Zilla cab in the next couple of months. Since the the AVID Eleven Rack’s output is stereo, for the second channel I am using an obscure active monitor, which I bought several years ago.

image-11

Effect Processors, Loopers and Stompboxes

AVID Eleven Rack with Behringer FCB1010 MIDI Foot Controller

After so many years of being a devout BOSS user, I switched to AVID Eleven Rack and PRO Tools. The reason – I was searching for a new sound, look and feel, and also for a professional solution with direct I/O to my PC and DAW. After a thorough research, I narrowed down my choices to BOSS GT-100, BOSS GT-001 and AVID Eleven Rack. Although revealed on Frankfurt Musikmesse 2014, as of April 2014, the new BOSS GT-001 is still not available on the market, and the online reviews are scarce and controlled, so I decided to give AVID a try, and I was not wrong. The Eleven Rack is the most amazing guitar effects processor I’ve ever stumbled upon ever since I started playing the guitar. Sadly, I said goodbye to my GT-10 (sorry, BOSS!).

image-01

Since the Eleven is rack mountable, my choice of a MIDI foot controller was either Voodo Lab’s Ground Control or Behringer’s FCB1010. Behringer is a well-known name in Europe, and they are famous with their high quality products at really reasonable prices. This, combined with the 2 expression pedals convinced me to go for the FCB1010. In order to save myself from the nag of programming the board, I changed Behringer’s original PROM with the EurekaPROM by EurekaSound. If you are using Roger Linn Design’s AdrenaLinn III, Kemper Profiling Amp, Behringer V-Amp series, Behringer Bass V-Amp Series, Avid Eleven Rack, TC Electronic G-Force, G-Major, G-Sharp, Nova, Fractal Audio Systems Axe-FX II, BOSS GT-PRO & Roland VG-99 & VB-99 or Line6 POD series and you still don’t know what EurekaPROM is, you should definitely check what David and the other guys from EurekaSound create!

image-04

DigiTech JamMan Stereo

Unfortunately I don’t have time to play in a band anymore and I practice alone, so I’ve tried a number of different loopers, like BOSS Loop Station, Line 6 JM4 and KORG SOS, but none of these was as versatile as the DigiTech JamMan Stereo. The truth is that I’ve never been a great fan of DigiTech, but the JamMan looper and it’s librarian software really rock, so I guess I’ll keep it for a couple of years.

image-01

The Guitars

Since 2012, my main guitar is this amazing 7-string B.C. Rich Stealth. Even now, after a couple of years of using it, I am still amazed by the sound, awesome looks and playability of this instrument. I am also using a heavily modified MH and SV’s by ESP, Schecter Omen 7, Jackson Dinky and custom Aurellia guitars.

image-03

The Drums

From time to time, I play a heavily modified Yamaha DTX400K electronic drum set, which I also use for recording drum tracks. The customized drum set has an additional bass drum, extra crash cymbal and 3-zone snare drum.

image-01

The Rest of the Gear

In case you are interested, you may want to can check the rest of my guitar fleet and more gear on this page.

HTML5, CSS3 and JavaScript Pie Charts

AcidJs.Pie is a lightweight pie chart plotting widget, utilizing CSS3 instead of HTML5 canvas or SVG with small, but powerful and easy to use API, custom events and numerous usage possibilities.

pie

You may download AcidJs.Pie or find more information on this page, and the demo and documentation are here.

More Screenshots

promo-pie-3

promo-pie-4

promo-pie-2

promo-pie-1

Key Features

  • Fast and elegant, with a very small footprint
  • Small, but powerful API
  • Custom events
  • Fully CSS3-driven – no Canvas, SVG or Flash

Requirements

  • Standards-compliant (HTML5 or XHTML) page
  • JavaScript should be enabled in the browser
  • Web-server

Related Posts and Links