Author: Martin Ivanov

I create modern web components, JavaScript widgets, development tools and web sites. I love experimenting with CSS3 and HTML5. If you like my work, you'd probably want to follow @wemakesitesnet or subscribe to my blog for cool dev stuff. Finally, if you are looking for a rock star developer, get in touch.

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

Atypical Uses of Radio Buttons and Checkboxes for Building Interactive UI Widgets

Radio buttons and checkboxes are traditionally associated with forms and data, however if you spend some time playing with these elements and CSS you will certainly find a lot more possible and not so boring uses. Here are a few, which will maybe give you ideas and will inspire you.

Star Rating Widget

Fully functional star rating widget, utilizing simple HTML form, hidden radio buttons, adjacent sibling selectors and right-to-left, with hover, selection, persisted state and disabling (a.k.a. already voted).

thumb

Animated CSS3 Vertical Accordion

The widget utilizes a simple form with radio buttons, CSS3 animations and adjacent sibling selectors.

animated-css3-only-horizontal-accordion

CSS3 Treeview

Fully functional, multi-level CSS3-only treeview with persisted state, utilizing hidden checkboxes and list elements.

css-3-treeview

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

Similar to the treeview from the previous example, but with updated look and feel and added support for nested nodes selection via an additional checkbox.

css3-treeview-with-multiple-node-selection

CSS3 Tabstrip

Feature-complete CSS3-only tabstrip widget, utilizing hidden radio buttons.

css3-tabstrip

Notifications Bar

JavaScript-less animated notifications bar, utilizing a couple of div elements and a single hidden checkbox.

css3-notification-bar

iPhone Toggle Buttons

Fully functional iPhone-like toggle buttons, made up of labels, radio buttons or checkboxes.

javascript-iphone-toggle-buttons

Animated CSS3-only Slides Viewer

Fully functional presentation slides viewer, utilizing radio buttons, CSS counters and animations with native keyboard arrow support.

slides-viewer

Custom Skinnable Radio Buttons and Checkboxes

My favorite approach for styling radio buttons and checkboxes with semantic and minimalistic markup.

css-pages-imageless-css3-custom-checkboxes-and-radio-buttons

Enjoy the weekend!

Related Posts and Links

HTML5, CSS3 and JavaScript Windows 8 Metro Tiles 2.0 is Out!

I am happy to announce that the new version of AcidJs.Tiles is out with improved and even more realistic looks and animations. It also includes a minor bug fix, related to the setting of the “title” property of the control.

AcidJs.Tiles is a JavaScript, HTML5 and CSS3 layout widget, which resembles the look and feel, functionality and behaviors of Windows 8 Metro tiles, and can be used on web sites or web apps. It is easy to configure via a small, but powerful API and events, and comes with stunning and realistic desktop-like 3D CSS3 animations.

acidjs-tiles-promo-01

The tiles can be used as placeholder of virtually anything – from simple text, to sophisticated markup and forms.

acidjs-tiles-promo-02

tiles

The new version is backwards compatible, so upgrading from version 1.0 is easy and out of the box and would not cause any trouble.

And last, but not least, click the image below to check a cool real-life demo of AcidJs.Tiles:

acidjs.tiles.blog.demo

Related Posts and Links

Animated 3D Chessboard With Pure CSS3. No Images. No JavaScript

I enjoyed coding this one last night. The word is about animated 3D chessboard, achieved with pure CSS, no images and no JavaScript, making use of nth-child selectors, 3d transforms, keyframe animations, generated content and the UTF symbols of the chess figures:

animated-css3-only-chessboard-blog

Supported Browsers:

  • Firefox
  • Chrome
  • Opera Webkit
  • Opera
  • Safari
  • Internet Explorer 9+ (with nice fallback for the 3D stuff)

Not really much of a practical value, I must admit, but showcasing the immense power of CSS3 which can be used today. Have fun and enjoy the weekend!

Related Posts and Links