jQuery

Extended File Upload Input, Wrapped as a HTML5 Web Component

Yesterday I finished my latest endeavor of the explorations of the amazing world of HTML5 Web Components. I must say that the deeper I get into the topic, the more I understand their importance, and I am pretty sure that very soon (even much sooner that I dared to speculate a couple of months ago) they will become really popular.

acidjs-xupload

The new component is called AcidJs.XUpload, and is an extended input element for uploading files, similar to <input type=”file” />, but with a lot of additional out-of-the-box features such as multiple/directory upload, icon support, editing of the file list, custom events and last but not least – fully skinnable via CSS. Using it is charming, stylish and so HTML5:

<acidjs-xupload></acidjs-xupload>
<acidjs-xupload width="140" height="44" name="file-02" label="Select files"></acidjs-xupload>
<acidjs-xupload id="file-02" name="file-02" label="Browse for files" multiple></acidjs-xupload>
<acidjs-xupload width="150" height="54" icon="AcidJs.XUpload/icons/icon-01.svg"></acidjs-xupload>
<acidjs-xupload directory label="Select a Folder to Upload"></acidjs-xupload>
<acidjs-xupload multiple accept=".gif" label="Select GIFs"></acidjs-xupload>
<acidjs-xupload multiple accept="image/*" label="Select Images"></acidjs-xupload>
<acidjs-xupload multiple accept="video/*" label="Select Videos"></acidjs-xupload>

HTML Attributes

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

  • width – Optional width of the component. Default is auto.
  • height – Optional height of the component. Default is 2em.
  • name – Optional name of the component which will be used as query parameter. No default name.
  • label – Optional label of the component. Default is Browse....
  • icon – Optional icon of the component. By default no icon is set.
  • disabled – If set, the component will be rendered disabled.
  • multiple – If set, multiple selection will be enabled, so users will be able to select multiple files via Ctrl/Shift + Click or Ctrl + A.
  • accept – Allows the setting of file filters (Check the examples for browser support).
  • directory – If set, users will be able to upload a whole directory and sub-directories (Check the examples for browser support).
  • nofiles – If set, users will be able to remove items from the drop down, containing the currently selected files.

* Due to security reasons, setters and getters are disabled.

JavaScript Methods

Any native JavaScript method (getElementById, querySelector, etc. plus the component-specific:

  • getPostData() – returning the current FileList, which can be used to upload the data to the server (check the information on this page for more info regarding FileList).

* Due to security reasons, setAttribute and removeAttribute will not take effect.

JavaScript Events

  • "acidjs-xupload-change" – Similar to the normal change event, but returning the FileList, which can be used to upload the data to the server (check the information on this page for more info regarding FileList):
    $("#file-02").bind("acidjs-xupload-change", function(e, data) {
        window.console.log(e.type, data);
    });
    

Check the demo on this page. You will also find a download link there. 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-IMG: HTML5 Web Component for Image Lazy Loading and More

thumb

AcidJs.XImg is a HTML5 Web Component, wrapped as a custom extended image tag supporting out-of-the-box lazy loading, native getters, setters and JavaScript methods. And what is is most important, using it is as simple as:

<acidjs-ximg
    width="310"
    height="233"
    src="images/image-01.jpg">
</acidjs-ximg>

<acidjs-ximg
    width="310"
    height="233"
    placeholder="path/to/custom/placeholder.png",
    src="images/image-01.jpg">
</acidjs-ximg>

 

HTML Attributes of the Tag

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

  • src – URI of the image that will be loaded when scrolled into view.
  • width – width of the image in pixels.
  • height – Height of the image in pixels.
  • title – Optional title of the image.
  • placeholder – Optional URI to the placeholder image. If not set, one of the system will be used (Check the PLACEHOLDERS object in the AcidJs.XImg/classes/XImg.file). You can create your own base-64-encode placeholder with this online tool and add them to the PLACEHOLDERS.

All attributes are also getters/setters.

JavaScript Events of the Tag

Any native JavaScript event (click, mouseover, etc.)

JavaScript Methods of the Tag

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

Check the demo on this page. You will also find a download link there. 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. You may also want check this blog post to learn how to implement lazy loading with images with JavaScript only.

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

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.

 

Powerful CSS3, HTML5, JavaScript and PHP Rating System

AcidJs.Rating is an elegant and lightweight, yet powerful CSS3, HTML5, JavaScript and PHP rating system with various customization options, different display styles and great API.

Although the widget utilizes simple flat JSON files for data storage, it’s server runtime can be easily modified to connect to a SQL database.

rating

Key Features:

  • Fast and elegant, with a very small footprint.
  • CSS3 animations.
  • No images.
  • No databases, just simple JSON files for data storage.
  • Small, but powerful API.
  • Custom events.
  • Votes Viewer.

Requirements:

  • Standards-compliant (HTML5 or XHTML) page.
  • JavaScript should be enabled in the browser.
  • Web-server with PHP 5.2.0 or higher.

Sounds good? Find more details here or go straight to the demo and download of AcidJs.Rating!

Related Posts and Links

My New Portfolio/Personal Website is Up and Running

During the Christmas holidays I finally found the time to spend a couple of days to tackle something I’ve been planning to do for quite some time – to fully redo (in terms of code and design) wemakesites.net, my portfolio/personal website. Honestly, I wasn’t sure if I should announce it here, but I am pretty happy with the result, so this is why I am doing it – version 7.0 is now up and running!

wemakesites

Here are a few facts:

  • Custom CMS. PHP backend with RESTFul services.
  • Semantic, elegant, valid and SEO-friendly HTML5 output.
  • Scores an average of 96-100 optimization points on Google PageSpeed (depending on visitors’ network connection speed and my hosting provider’s health).
  • Scores an average of 96-100 optimization points Y!Slow (depending on visitors’ network connection speed and my hosting provider’s health).
  • Optimized both for client- and server-side rendering.
  • Unified modular client- and server-side MVC/MVVM architecture.
  • Async history management.
  • The front-end, templating, session caching and URL routing are built on top of my Semtex UI HTML5, CSS3 and JavaScript framework.
  • Fully async with JavaScript turned on.
  • Asynchronously switchable themes (the icon to the left of the search box in the navigation bar).
  • Supported browsers: Firefox, Chrome, Chromium, Opera, Opera Webkit, Safari, Internet Explorer 9+.
  • Cool social sharing toolbar, achieved with AcidJs.Tiles.
  • Fully responsive CSS3.
  • Lazy loading of images, achieved with AcidJs.ImgLazyload.
  • Decent accessibility score on WAVE.
  • The average loading time of the home page is 1.70 seconds with cache turned off.
  • The average loading time of non-cached async pages is 0.253 seconds.
  • The average loading time of session-cached async pages is 0.019 seconds.
  • CSS and JavaScript build tools.
  • Fully g-zipped.
  • Google PageRank: 4.
  • Version 7.0 (Released January 2014).

Thanks for reading and enjoy the weekend! Please, do not hesitate to contact me if you are interested in more facts about the wemakesites.net!

Related Posts and Links

HTML5, CSS3 and JavaScript Windows 8 Metro Style Tiles

AcidJs.Tiles is a JavaScript, HTML5 and CSS3 layout widget, which resembles the Windows 8 Metro tiles in terms of look and feel, functionality and behaviors 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

Related Posts and Links