webcomponents

The HTML5, CSS3 and JavaScript Experiments Website Has Just Received a Facelift

It’s been more than a year since launched HTML5, CSS3 and JavaScript Experiments to share my insight in front-end development and I never thought that it would become that popular in a relatively short period of time. As of September 2014 the website showcases than 60 demos also available for download and because of that constantly growing number and devout visitors (Thanks, fellows, you are the ones that keep this up and running!) I realized that the old layout became less usable and demands something new. The time for a facelift had come and this is what I did during the past few days.

Due to my recent excitement and digging into the amazing world of HTML5 Web Components, I decided to take the risk of losing page-views due to browser incompatibility and implemented the front-end using custom-built web components, some of which such as AcidJs.XImg (used for optimizing the loading of images) and AcidJs.XTabs (used for the code listing at the bottom of each page) are already featured on the website. Apart from these two, I developed AcidJs.XDrawer, which is used for the left hand navigation, and it will be soon available as a standalone demo and download.  The utilization of reusable HTML5 Web Components allowed me to remove a lot of custom JavaScript and CSS, which optimized the overall performance and loading time. The currently supported browsers are all evergreen browsers and IE10+.

As a bottom line – I am really happy with the result, and I hope that the website will continue being a useful and inspirational source for front-end developers, sharing the same passion towards HTML5, CSS3 and JavaScript.

Thanks and enjoy!

Advertisements

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!