Tag Archives: css3

Collaboration with Webucator

A couple of weeks ago I was contacted by Webucator asking me if I’d be interested in the creation of a video tutorial with my Parallax Page Scroll Effect with Pure CSS3. No JavaScript. No Hassle blog post and experiment. Of course, I was much excited by the idea, especially when I was told that it will be directed and narrated by Chris Minnick from WatzThis – a published author of several amazing books on web development.

The video is available on YouTube already. Enjoy, have a great weekend and make sure you pay a visit to my new friends at Webucator if you are looking for professional online and onsite instructor-led training classes in web- and software development.

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!

 

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!

Panel Bar – New HTML5 Web Component

The latest addition to my constantly growing collection of HTML5 Web Components has just been released. X-Panel is a HTML5 Web Component, built on top of Mozilla’s X-Tags which makes possible the creation of full-featured panel bars and drawers fun and without any JavaScript as custom tags.

thumb

The Markup

<acidjs-xpanel multiple>
    <acidjs-xpanel-drawer icon="icons/pdf.png" label="PDF Files" open>
        Drawer content...
    </acidjs-xpanel-drawer>
    <acidjs-xpanel-drawer icon="icons/doc.png" label="MS Word Documents">
        Drawer content...
    </acidjs-xpanel-drawer>
    <acidjs-xpanel-drawer icon="icons/xls.png" label="MS Excel Sheets">
        Drawer content...
    </acidjs-xpanel-drawer>
    <acidjs-xpanel-drawer icon="icons/txt.png" label="Text Files">
        Drawer content...
    </acidjs-xpanel-drawer>
</acidjs-xpanel>

HTML Attributes of the <acidjs-xpanel /> Tag

Apart from the standard HTML attributes, the tag also supports the following component-specific attributes:

  • multiple – If attribute is set, multiple open drawers will be enabled. By default, expanding a drawer collapses other expanded drawers.
  • width – Width of the drawer. The default width is "100%".
  • height – Height of the drawer. The default height is "auto".

HTML Attributes of the <acidjs-xpanel-drawer /> Tag

Apart from the standard HTML attributes, the tag also supports the following component-specific attributes:

  • icon – URL to an optional drawer icon.
  • label – Drawer label text.
  • height – Optional height of the drawer. If the content exceeds the height specified, scrollbars will appear.
  • hint – Optional hint text for the drawer header.
  • open – By default all drawers are closed. Setting the open attribute will render that drawer open by default.

Check the code of the demo page or the distribution to see how to use X-Panel and have a great weekend!

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.

Happy Birthday, CSS!

Last week CSS turned 20, and suddenly I realized that I’ve been in a special relationship with it ever since 2001. Moreover, I am happy and proud I was among the first who realized its instant maturity and potential, and after so many years I am still in love with it.

So, happy birthday CSS and thanks for being around. Front-end was boring and sucked before you were born!