Open API, HTML5 Widgets, Improved Search, Session Caching and Favorites Bar for ElevenRack.net

During the last couple of days I worked hard on some new features for elevenrack.net, which I hope will improve the user experience of the website and will drive more visitors and users. I am happy to share the latest additions today.

Improved Search

The search functionality now supports search by letter, artist and preset title. Search by author is also on my list.

search

The visibility of the search bar could be toggled by clicking the loupe icon in the navigation bar:

search-toggle-cursor

Embeddable HTML5 Widget

If you like elevenrack.net and want to support it (I’d really appreciate that) and a really cool way, you are now able to embed preset widgets on your website just by registering widget’s HTML5 Web Component runtime and adding a simple tag to your website.

widget-1

widget-2

Favorites Bar

Found a preset you love? Click the star icon next to the page title to store it in your very own favorites bar.

fav-2

To manage your favorites, click the star icon in the navigation bar.

fav-5

To remove a favorite – either click the “x” icon in the favorites popup or the yellow star icon to the right of the page title.

fav-3

fav-4

Session Caching

Visited pages are now cached client-side during the session and loading them from the cache is at lightning speed.

Presets API

The JSON(P) data for all presets currently on the website is accessible via the REST API.

Have a great week, and thanks for stopping by!

 

X-CHMOD: HTML5 Web Component

A new HTML5 Web Component has just joined my ever-growing collection of custom tags.

Meet AcidJs.XChmod – a HTML5 Web Component that can be used to set/display the CHMOD settings of a file. Since it emits a client-side event which returns what is currently set it can be easily connected to a server-side script. It was built using another HTML5 Web Component – AcidJs.XSwitch.

thumb

Markup

<acidjs-xchmod permissions="755" id="chmod-1"></acidjs-xchmod>
<acidjs-xchmod permissions="644" id="chmod-2"></acidjs-xchmod>
<acidjs-xchmod permissions="666" id="chmod-6">
    <acidjs-xchmod-lang>
    {
            "owner": "Eigentümer",
            "group": "Gruppe",
            "other": "Sonstige",
            "read": "Lesen",
            "write": "Schreiben",
            "execute": "Ausführen"
    }
    </acidjs-xchmod-lang>
</acidjs-xchmod>           
<acidjs-xchmod permissions="644" enabled="false" id="chmod-4"></acidjs-xchmod>

HTML Attributes

Apart from the standard HTML attributes (style, class, id, etc.), the tag also supports the following component-specific attributes:

  • permissions – Required attribute. The value should be three-digit, and each digit value should be between 0 and 7. If invalid value is set, the component will show an error message.
  • enabled – Optional boolean attribute, default value is true. If set to false, the component will be rendered as disabled.

JavaScript Methods, Getters, Setters and Events

Methods

All standard JavaScript methods are supported, plus the component-specific:

  • setChmod(chmod) – The chmod parameter value should be three-digit, and each digit value should be between 0 and 7. If invalid value is set, the component will show an error message. Usage:
    // JavaScript
    document.querySelector("#chmod-1").setChmod(666);
    // jQuery
    $("#chmod-1").get(0).setChmod(666);
    
  • getChmod() – Returns an object, containing the classes, octal, command values of the currently set CHMOD value:
    {
       "classes":{
          "owner":7,
          "group":5,
          "other":5
       },
       "octal":"755",
       "octalLeadingZero":"0755",
       "command":"-rwxr-xr-x"
    }
    

    Usage:

    // JavaScript
    document.querySelector("#chmod-1").getChmod();
    // jQuery
    $("#chmod-1").get(0).getChmod();
    
  • getData() – Returns the DTO of the component, containing the chmod object, returned by the getChmod() method plus the lang. Usage:
    // JavaScript
    document.querySelector("#chmod-1").getData();
    // jQuery
    $("#chmod-1").get(0).getData();
    
  • enable() – Enable the component. Usage:
    // JavaScript
    document.querySelector("#chmod-1").enable();
    // jQuery
    $("#chmod-1").get(0).enable();
    
  • disable() – Disable the component. Usage:
    // JavaScript
    document.querySelector("#chmod-1").disable();
    // jQuery
    $("#chmod-1").get(0).disable();

Getters and Setters

All standard JavaScript setters/getters are supported, plus the component-specific:

  • chmod – Sets/gets the CHMOD of the component. The setter returns an object, similar to the object, returned by the getChmod() method. Usage:
    // getter JavaScript
    document.querySelector("#chmod-1").chmod;
    // setter JavaScript
    document.querySelector("#chmod-1").chmod = 666;
    
    // getter jQuery
    $("#chmod-1").get(0).chmod;
    // setter jQuery
    $("#chmod-1").get(0).chmod = 666;
    
    
  • enabled – Sets/gets the enabled state of the component. The setter returns a Boolean. Usage:
    // getter JavaScript
    document.querySelector("#chmod-1").enabled;
    // setter JavaScript
    document.querySelector("#chmod-1").enabled = false;
    document.querySelector("#chmod-1").enabled = true;
    
    // getter jQuery
    $("#chmod-1").get(0).enabled;
    // setter JavaScript
    $("#chmod-1").get(0).enabled = false;
    $("#chmod-1").get(0).enabled = true;

Custom Events

  • "acidjs-xchmod-set" – Returns the currently set CHMOD in several different formats. The event is triggered any time the CHMOD has been changed. Binding to the event:
    $("#chmod-1").on("acidjs-xchmod-set", function(e, data) {
        window.console.log(e.type, data);
    });
    

    Return object:

    {
        classes: {
                owner: 3,
                group: 5,
                other: 5
        },
        command: "--wxr-xr-x",
        octal: "355",
        octalLeadingZero: "0355"
    }

Have a great day, and don’t forget to check the demo on this page.

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 JavaScriptExperiments and Insight website.

A Dev Epic

Remembering:

The glorious times of yore, when giant Java applets walked Devearth trampling down IE – the only browser known to Devkind.
The unforgettable past, when JavaScript believers were shunned, mocked and decried as non-developers.
The dark ages, when CSS sorcerers were called designers.

The romance of the hardest decision to take – to depend or not on the helping magical hand of the mysterious brothers Quirks Mode and Xml Prolog.

When listening to the call of the Async was considered heresy.
When XHTML was unthinkable…
When Web 2.0 was just an obscure idea (and remained such).

It’s gone now.

X-Weather: Weather Widget HTML5 Web Component

X-Weather is a HTML5 Web Component, utilizing the weather API of openweathermap.org.

thumb

HTML Attributes of the Tag

Apart from the standard HTML attributes (style, class, id, etc.), the tag also supports the following component-specific attributes:

  • city – The city, which weather will be displayed, for example: country="London". Required attribute.
  • countrycode – 2-letter country code, for example: countrycode="uk". Required attribute.
  • width – Width of the component in pixels. Optional. Default width: 256.
  • height – Height of the component in pixels. Optional. Default width: 64.
  • bgcolor – Optional background color of the component. Default color: #666.

Have a great day, and don’t forget to check the demo on this page.

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 JavaScriptExperiments and Insight website.

Avid Eleven Rack Presets and Rigs Sharing Platform

Happy New Year everyone! I wish to you and your families all the best during the new 2015 and thanks for reading my blog!

For me, 2015 started with a new website. I just released my new Avid Eleven Rack Presets and Rigs sharing and community platform – a project that I worked on during the past couple of weeks. Avid is a renown name in the music production world and their Eleven Rack unit is praised by the guitar community worldwide. To the ones, who don’t understand what’s the word about – check this detailed review from Musician’s Friend and also processor’s home page for extensive info.

From my side, I’d say that after years of experimenting with guitar effects, stompboxes, DAWs and different effect processors (BOSS, Line 6, Behringer, DigiTech, Zoom, etc), the Eleven Rack is so far the best, competing with and comparable only to Fractal Audio’s AXE FX and Kemper Profiler.

elevenrack

To be honest, one of the reasons that I started this project was because I wanted to experiment with some HTML5 features (HTML5 Web Components, History API, Object.observe() etc). Creating a website, dedicated to sharing presets and rigs for my favorite guitar effects processor was the perfect reason and playground. So this is how it happened.

Here are a few features of Avid Eleven Rack Presets and Rigs platform:

  • Fully asynchronous, using the HTML5’s History API.
  • Intuitive UI and easy navigation.
  • Preset categoriesmetal, blues, rock, jazz, country, bass, vocal, acoustic, etc.
  • Search by keywords, preset title, artist, author and artist.
  • Sharing tools.
  • Upload tools.
  • Communication with the server via REST API.
  • Custom-built HTML5 Web Components.
  • Client-side templates.
  • PHP backend.
  • SEO-friendly and working with JavaScript turned off (most features).

As a bottom line – I am really happy with the project, and I had a lot of fun developing it. Hopefully 2015 is a good start, and the website will kick in. Got a cool Avid Eleven Preset? Submit it and become famous!