Tag Archives: JavaScript

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!

 

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.

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!

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!

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!