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 for Country Flags

Recently I discovered the huge free data sets on geonames.org, and I am actually planning a series of HTML5 Web Components which utilize this data. The first one is X-Flag – a custom HTML5 tag, able to display country flags out of a specified country code in three different sizes:

<acidjs-xflag code="bg"></acidjs-xflag>
<acidjs-xflag code="cz" size="small"></acidjs-xflag>
<acidjs-xflag code="de" size="medium"></acidjs-xflag>
<acidjs-xflag code="mt" size="large"></acidjs-xflag>

thumb

HTML Attributes of the <acidjs-xflag></acidjs-xflag> Tag

Any native HTML attribute (id, class, data-*, style, etc.) is supported, plus the component-specific:

  • code – Required valid country code, for example "bg".
  • size – Optional size of the flag, a choice between "small", "medium" and "large". Default: "medium".

JavaScript Methods of the <acidjs-xflag></acidjs-xflag> Tag

Any native JavaScript method (document.getElementById, document.querySelector, element.setAttribute, element.removeAttribute etc.

Check the demo on this page. On it you will also find a download link. 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.

X-Ellipsis – Native Multiline Ellipsis, Truncation and Text Capping as a HTML5 Web Component

X-Ellipsis is a custom HTML5 Web Component, enabling easy text truncation, capping and ellipsis, which can be used as a simple HTML tag, without any additional JavaScript:

<acidjs-xellipsis cap="256" labelexpand="read more" labelcollapse="collapse">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo?
</acidjs-xellipsis>

While playing with the demo and downloading the code, you may want to take a look at it’s simple, but powerful API.

HTML Attributes of the Tag:

Any native HTML attribute (id, class, data-*, style, etc.) is supported, plus the component-specific:

  • cap – Optional number, specifying the length at which capping should occur. Default: "128".
  • labelexpand – Optional expand label. Default: "»".
  • labelcollapse – Optional collapse label. Default: "«".
  • expand – If set to "off", expanding will be disabled. Default: "on".

JavaScript Methods of the Tag:

Any native JavaScript method (document.getElementById, document.querySelector, element.setAttribute, element.removeAttribute etc. as well as their jQuery or other libraries aliases), plus the component-specific:

  • cap(string) – Manually set new capping value to the queried element.
    • JavaScript:
      document.querySelector("#text-01").cap(256);
    • jQuery:
      $("#text-01").get(0).cap(256);
  • content(string) – Set new capping value to the current content of the queried element.
    • JavaScript:
      document.querySelector("#text-01").content("Lorem ipsum dolor, blah, blah, blah.");
    • jQuery:
      $("#text-01").get(0).content("Lorem ipsum dolor, blah, blah, blah.");

     

Happy text capping and make sure you check my other HTML5 Web Components experiments and demos!

x-ellipsis

Custom HTML5 Tag to Show Your Favorite Music Albums on Your Website or Blog

Sometime ago I used Last.Fm’s REST API to show some of my favorite albums on my website. The current implementation is using JavaScript, CSS3, HTML5, PHP and client-side rendering and I’m pretty happy with it. However, I’ve always fancied a simple reusable HTML tag, which would be able to render my favorite music albums’ cover art, track listing, genres and info without the hassle of additional coding. So, here it is – my most recent experiment with HTML5 Web Components: X-CD-Info.

What it can do for you is to save you the nag of writing custom JavaScript, querying Last.Fm’s API then rendering the JSON and styling the result. All you need is:

<acidjs-xcdinfo
    artist="Joe Satriani"
    album="Unstoppable Momentum">
</acidjs-xcdinfo>

… And you will get this:

x-cd-info-full

Or if you prefer a more compact rending, like:

<acidjs-xcdinfo
    mode="compact"
    artist="Sepultura"
    album="Arise">
</acidjs-xcdinfo>

x-cd-info-compact

Or… why not go really minimalist, and show the cover art only (of course, everyone knows that album):

<acidjs-xcdinfo
    mode="minimal"
    artist="Sodom"
    album="Tapping the Vein">
</acidjs-xcdinfo>

x-cd-info-minimal

I love it, I really do, and I had real fun developing it. Moreover, apart from the tag itself, you have a couple of handy native JavaScript methods and HTML attributes:

HTML Attributes of the Tag

Any native HTML attribute (id, class, data-*, style, etc.) is supported, plus the component-specific:

  • artist – Required artist name to search on Last.Fm.
  • album – Required album name to search on Last.Fm.
  • mode – Optional display mode of the component. The default mode is "full". "compact" and "minimal" are the other two options.

JavaScript Methods

Any native JavaScript method (document.getElementById, document.querySelector, element.setAttribute, element.removeAttribute etc.
as well as their jQuery or other libraries aliases), plus the component-specific:

  • render(artist, album, mode) – Render album info in the queried acidjs-xcdinfo element. The mode parameter is optional and if not set to
    any of the "full", "compact" or "minimal", the "full" mode will be used. Example:

    • JavaScript:
      document.querySelector("#album-02").render("Steve Vai", "Passion and Warfare", "full");
      document.getElementById("#album-02").render("Steve Vai", "Passion and Warfare", "full");
    • jQuery:
      $("#album-02").get(0).render("Steve Vai", "Passion and Warfare", "full");
  • getData() – Get the stored current DTO, received from Last.Fm. Example:
    • JavaScript:
      document.querySelector("#album-02").getData();
      document.getElementById("#album-02").getData();
    • jQuery:
      $("#album-02").get(0).getData();

In order to use X-CD-Info you will need to get an API key from Last.Fm. If you don’t have one already, get it here. It’s free, and Last.Fm rocks.

Sounds good? Check it and get it here. Find @wemakesitesnet on Twitter and let me know what you think.

Sharing the same interest towards HTML5 Web Components? Check my other experiments, related to that exciting technology. If you are interested in similar 3rd-party widgets or APIs make sure you check my IMDB Fetcher project.

Rock and Roll!

thumb

Native AJAX Loading Overlays as HTML5 Web Components

I’ve just deployed my latest experiment related to the exploration of HTML5 Web Components I started lately. X-Overlay is a custom tag, with a bunch of handy methods, attributes, getters and setters that can be used to display loading overlays on any element during AJAX calls. Using it is easy as:

<acidjs-xoverlay
    id="overlay-01"
    spinner="AcidJs.XOverlay/styles/images/loading-02.gif"
    parent=".ajax-updating-box-01"
    hidden>
</acidjs-xoverlay>

<acidjs-xoverlay
   id="overlay-02">
</acidjs-xoverlay>

<acidjs-xoverlay></acidjs-xoverlay>

x-overlay

The <acidjs-xoverlay> Tag Attributes:

Any known HTML attribute (id, class, data-*, style) is supported, plus the component-specific:

  • parent: the element (CSS selector, for instance body, #my-div, .my-class-name, etc.), which will be blocked when X-Overlay’s show() method is used. If no parent attribute is set, body will be used by default.
  • spinner: Optional spinner image URL (default dimensions are 32 x 32 pixels and are set in the AcidJs.XOverlay/styles/XOverlay.css). The default URL is "AcidJs.XOverlay/styles/images/loading-02.gif"
  • hidden: if attribute is set, the component will not be visible on the page and could be set to visible either by removeAttribute("hidden") or by using component’s show().

The <acidjs-xoverlay> Tag Methods, Getters and Setters:

Any native JavaScript method (document.getElementById, document.querySelector, element.setAttribute, element.removeAttribute etc. as well as their jQuery or other libraries aliases), plus the component-specific:

  • show(): to show the overlay, for example:
    jQuery:
    $("#overlay-1").get(0).show();
    JavaScript:
    document.getElementById("overlay-1").show()
    document.querySelector("#overlay-02").show()
  • hide(): to hide the overlay, for example:
    jQuery:
    $("#overlay-1").get(0).hide();
    JavaScript:
    document.getElementById("overlay-1").hide()
    document.querySelector("#overlay-02").hide()
  • destroy(): to fully remove the overlay from the DOM, for example:
    jQuery:
    $("#overlay-1").get(0).destroy()
    JavaScript:
    document.getElementById("overlay-1").destroy()
    document.querySelector("#overlay-02").destroy()

Make sure you don’t miss the demo or some of my other HTML5 Web Components, CSS3 or JavaScript experiments!

X-Meme: A Modern HTML5 Approach to Memes. You don’t say?

Memes have been circulating the Internet for many years and are among the few phenomena whose creation approach never changed (and never will). Dare to imagine a meme without the sloppy white font, black stroke and huge text shadow?  The charm of memes is not only in the witty phrases, but also in that particular design belonging to the Mid ’90s, Paint, PSP and other even more obscure image editors.

In the era of HTML5, memes keep going strong and refuse to die, so here is a fun experiment – a custom HTML5 Web Component, making possible the creation of memes via a simple HTML tag, built on top of Mozilla’s X-tags. Meet X-Meme:

<acidjs-xmeme
    src="images/image-01.jpg"
    caption-top="I don't always play the guitar"
    caption-bottom="But when I do, I do it when my hoomans are sleeping">
</acidjs-xmeme>

The code above will render:

x-meme

Attributes of the <acidjs-xmeme></acidjs-xmeme> Tag:

  • src – path to the meme image (required).
  • caption-top – optional top caption.
  • caption-bottom – optional bottom caption.

The current version is using HTML and CSS for rendering, but for the next I’m planning optional canvas rendering. Until then, you may check the demo and eventually download and use it. These days I am particularly interested in HTML5 Web Components, so if you share the same interest you may want to check my other experiments.

Slides Viewer: HTML5 Web Component

One of my experiments with atypical uses of radio buttons I blogged about sometime ago was the CSS3 Driven Slides Viewer Without any JavaScript, and soon after it was published, became one of my most popular posts, but busy with other stuff I never took the time to extend or improve it. Until yesterday, when I decided to rework it as a HTML5 Web Component as part of my recent amusement with this new and exciting aspect of HTML5.

The result is that now users could easily create a full-blown slides viewer just by utilizing this simple markup:

<acidjs-xslides>
    <acidjs-xslides-slide>Slide content - simple text or complex HTML</acidjs-xslides-slide>
    <acidjs-xslides-slide>Another slide content - simple text or complex HTML</acidjs-xslides-slide>
    <acidjs-xslides-slide>Yet another - simple text or complex HTML</acidjs-xslides-slide>
</acidjs-xslides>

You can check the demo and download X-Slides on my Experiments and Insight website, and if you are interested in HTML5 Web Components, X-Tags or Google Polymer, you will probably find inspiration in my other endeavours with this technology.

X-NotificationsBar: HTML5 Web Component

Just finished my new endeavour in the amazing world of HTML5 Web Components, called X-NotificationsBar and based on an earlier CSS3-only driven solution. Here’s how to use it, after you check the demo and eventually download it:

<acidjs-x-notifications-bar bgcolor="#016fba" expanded="true" message="random" loop="5000">
    <acidjs-x-notifications-bar-message>
        HTML5 Web Components enable truly encapsulated and reusable components for the web. 
    </acidjs-x-notifications-bar-message>
    <acidjs-x-notifications-bar-message>
        You can browse the other examples of HTML5 Web Components on <a href="http://experiments.wemakesites.net/html5-web-components.html" target="_blank">this page</a>.
    </acidjs-x-notifications-bar-message>
    <acidjs-x-notifications-bar-message>
        More info regarding this exciting new technology: 
        <a href="http://webcomponents.org/" target="_blank">WebComponents.org</a>,
        <a href="http://polymer-project.org/" target="_blank">Google Polymer</a>,
        <a href="http://x-tags.org/" target="_blank">Mozilla X-Tag</a>.
    </acidjs-x-notifications-bar-message>
    <acidjs-x-notifications-bar-message>
        <p>If you like this solution, you can also check my 
        <a href="http://wemakesites.net/" target="_blank">personal wesbite</a>, 
        <a href="http://semtex.wemakesites.net/" target="_blank">Semtex UI Framework</a>, 
        <a href="http://acidjs.wemakesites.net/" target="_blank">Acid.JS Web.UI</a>, 
        <a href="https://acidmartin.wordpress.com/" target="_blank">my blog</a>,
         follow me on <a href="https://twitter.com/wemakesitesnet" target="_blank">Twitter</a> 
         or consider a <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=QFUHPWJB2JDBS" target="_blank">donation</a>.</p>
    </acidjs-x-notifications-bar-message>
    <acidjs-x-notifications-bar-message>
        If you prefer a pure CSS3 solution of this example, you will 
        <a href="http://experiments.wemakesites.net/css3-hello-bar.html" target="_blank">find it here</a>.
    </acidjs-x-notifications-bar-message>
</acidjs-x-notifications-bar>

x-notifications-bar-html5-web-component

The <acidjs-x-notifications-bar></acidjs-x-notifications-bar> Tag Attributes:

  • bgcolor – Optional background color. Default value: “#e34c26″.
  • expanded – Boolean, optional. Default: “true”.
  • message – Zero-based index or “random”. “0” means that the content of the first <acidjs-x-notifications-bar-message> will be set. If “random” is set, a random message will be displayed. Default: “0”
  • loop – Optional timeout in milliseconds for looping messages. Default null.

The <acidjs-x-notifications-bar-message></acidjs-x-notifications-bar-message> Tag:

It should be used to set messages to the notifications bar, one message at a time. The tag does not support any attributes and accepts any HTML.

Have fun and enjoy the weekend!

X-Chessboard: HTML5 Web Component

A few months ago I blogged about a fun experiment, explaining the creation of animated 3D chessboard and pieces with CSS3 and UTF characters only. Following my recent excitement and play with HTML5 Web Components I reused the CSS from the example and extended it to a custom tag, which when used as a simple HTML and without any JavaScript:

<acidjs-xchessboard id="xchessboard-01" boxsize="64">
    <acidjs-xchessboard-piece data-bind='{"type":"rook", "color":"white", "position": "a1"}'></acidjs-xchessboard-piece>
    <acidjs-xchessboard-piece data-bind='{"type":"knight", "color":"white", "position": "c3"}'></acidjs-xchessboard-piece>
    <acidjs-xchessboard-piece data-bind='{"type":"bishop", "color":"white", "position": "c1"}'></acidjs-xchessboard-piece>
    [...]
    <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"black", "position": "f7"}'></acidjs-xchessboard-piece>
    <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"black", "position": "g7"}'></acidjs-xchessboard-piece>
    <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"black", "position": "h5"}'></acidjs-xchessboard-piece>
</acidjs-xchessboard>

Produces this beautiful chessboard:

x-chessboard

Using it, you may define as many pieces as you need, and you can also specify their type, color and position on the board, using the data-bind attribute of the <acidjs-xchessboard-piece></acidjs-xchessboard-piece> tag:

{
    "type":"pawn",
    "color":"black",
    "position": "h5"
}

As usual – here’s the link to the demo, the code and the download, and on my HTML5, CSS3 and JavaScript Experiments and Insight website there’s a lot of other stuff that you may find useful.

Cheers and until later! See you on Twitter!

X-Tabs – HTML5 Web Component Built with Mozilla X-Tags

Last night I introduced a new “html5 web components” category on my HTML5, CSS3 and JavaScript Experiments and Insight Website, so now all of the examples, which deal with this new and amazing technology are separated from the CSS and the JavaScript demos. Apart from that, I released a new component, based on Mozilla’s X-Tag and utilizing the JavaScript-less tabstrip solution I blogged about a sometime ago.

The component is called X-Tabs and allows declarative creation of fully functional tabs without any JavaScript:

<acidjs-xtabs width="100%" height="200" selectedtab="0" name="my-x-tab-01">
    <acidjs-xtabs-pane label="Home" hint="Go to our homepage">
        <h3>Home</h3>
        <p>Lorem ipsum.</p>
    </acidjs-xtabs-pane>
    <acidjs-xtabs-pane label="About Us" hint="More info about us">
        <h3>About Us</h3>
        <p>Sed ut perspiciatis?</p>
    </acidjs-xtabs-pane>
    <acidjs-xtabs-pane label="Downloads" hint="Visit our downloads section">
        <h3>Downloads</h3>
        <p>At vero eos et accusamus.</p>
    </acidjs-xtabs-pane>
    <acidjs-xtabs-pane label="Contact Us" hint="Give us a shout">
        <h3>Contact Us</h3>
        <p>Howdy?</p>
    </acidjs-xtabs-pane>
    <acidjs-xtabs-pane label="Disabled Tab" hint="Give us a shout" enabled="false">
        <h3>Disabled Tab</h3>
        <p>Just a disabled tab.</p>
    </acidjs-xtabs-pane>
    <acidjs-xtabs-pane label="Yet Another Tab" hint="And Yet Another Tab">
        <h3>Disabled Tab</h3>
        <p>Lorem ipsum dolor sit amet.</p>
    </acidjs-xtabs-pane>
</acidjs-xtabs>

x-tab

Have fun with the demo and feel free to modify and use the source code. If you like what I’m doing, follow me on Twitter or check my other posts about HTML5 Web Components, CSS3 or JavaScript.

X-Password: HTML5 Web Component Input on Steroids

Just finished my new experiment with HTML5 Web Components and Mozilla X-Tags, called X-Password. What you get is a JavaScript-less extended password input, allowing Windows 8-like password reveal behavior out of the box:

<acidjs-xpassword></acidjs-xpassword>

x-password

The input supports all JavaScript getters, setters, events and form submission is handled natively. X-Password does not have any required attributes, but to achieve different behaviors you may play with the following (and also any other HTML attribute).

  • width – Optional input width, default: 300
  • name – Optional input name
  • id – Optional input id
  • enabled – Boolean, optional. Default: true
  • editable – Boolean, optional. Default: true
  • placeholder – Placeholder text, optional.
  • value – Optional default value
  • buttonhint – Optional tooltip for the reveal button
  • visible – Optional, boolean. If set to true, the input will be rendered as text type

You can check the demo and download X-Password on this page, and if you are interested in the exciting world of HTML5 Web Components, you may check my other posts dealing with this technology.

Have a great weekend!