Guitar Chord Diagrams as… HTML5 Web Components. This Rocks!

Being kind of a pest about HTML5 Web Components these days here, and I’m sorry about that. But this new one rocks, and I am really happy with the result of the fun I had the other day, trying to build a guitar chord diagram with pure CSS

Here it is – AcidJs.XChord – a HTML5 Web Component for plotting purely CSS3-driven, image-less, scalable and printer-friendly guitar chord diagrams, supporting any number of strings, wrapped as a fun and easy to use custom tag:

<acidjs-xchord label="A" startat="1" label="E" description="The A-major chord">
    <acidjs-xchord-string key="e" state="muted" fret="0"></acidjs-xchord-string>
    <acidjs-xchord-string key="a" state="empty" fret="0"></acidjs-xchord-string>
    <acidjs-xchord-string key="d" state="pressed" fret="2"></acidjs-xchord-string>
    <acidjs-xchord-string key="g" state="pressed" fret="2"></acidjs-xchord-string>
    <acidjs-xchord-string key="b" state="pressed" fret="2"></acidjs-xchord-string>
    <acidjs-xchord-string key="e" state="empty" fret="0"></acidjs-xchord-string>

Using the tag above you get:

6-String Guitar Diagrams:


7-, 8-, 9- (yes, I love Djent) Axe Diagrams:


Bass Diagrams:


… Virtually any-string-number guitar chord diagram.

HTML Attributes of the <acidjs-xchord></acidjs-xchord> Tag

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

  • frets – Optional number of the frets that should render. Default: "4".
  • size – Optional size (number) of the diagram. Default: 1. "1.5" or "2" will render a bigger diagram.
  • startat – From which fret should the diagram start from. Default: "1".
  • description – Optional decription of the chord, for example "This is A-minor".
  • label – Optional label of the chord, for example "Am".

HTML Attributes of the <acidjs-xchord-string></acidjs-xchord-string> Tag

  • key – The key of the string, for example "E".
  • state – The state of the played note. Possible values: "empty", "pressed" or "muted".
  • fret – The fret which is the state applied to.

JavaScript Methods of the Tag

Any native JavaScript method (document.getElementById, document.querySelector, element.setAttribute, element.removeAttribute etc. No component-specific methods, getters or setters.

Fulfill my child dream of becoming a rock star – check the demo and get the component. 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.


My New Home Studio in Malta

I recently left Germany relocating to the island of Malta, and a couple of weeks later I was finally able to deploy my new home studio with a new addition – an amazing custom-made 2 x 12 guitar cabinet with Celestion V30 speakers, built for my by Paul Gough of Zilla Cabs (cheers, Paul – for all the hard work, patience and killer quality).

Here are a few photos of the studio. Hopefully I find more time for playing the guitar in the teeth of my main job as a front-end developer. In case you are interested, here’s a detailed rundown of my rig, and on this page you’ll find a lot more photos and specs of my guitars and gear.

IMG_0487 IMG_0488 IMG_0489 IMG_0491 IMG_0492 IMG_0495 IMG_0498 IMG_0500 IMG_0501 IMG_0507 IMG_0511 IMG_0513 IMG_0514 IMG_0516 IMG_0517

Finally – thanks for reading this and greetings from sunny Malta!

My Guitars, Rig, Effects and Amps Rundown

It’s very uncommon for me to write about music and music-making here, because the blog is reserved exclusively for HTML5, CSS3 and JavaScript. Recently, however, I made significant changes to my home studio and guitar rig, which I’d like to share.

Disclaimer: This is not a professional gear review, neither I am a professional musician, just a software developer, who, back in the days dreamed of becoming a rock star.

The Amps

I’ve experimented with various amplifiers, both tube and solid state. A few months ago, I decided to go for Carvin’s VL300, better known as Steve Vai‘s legendary Legacy 3, which I’m using with a 50-watt HT-112 Blackstar cabinet, but I’m planning to switch to a 4 x 12 Bugera, Marshall or Engl custom 2 x 12 Zilla cab in the next couple of months. Since the the AVID Eleven Rack’s output is stereo, for the second channel I am using an obscure active monitor, which I bought several years ago.


Effect Processors, Loopers and Stompboxes

AVID Eleven Rack with Behringer FCB1010 MIDI Foot Controller

After so many years of being a devout BOSS user, I switched to AVID Eleven Rack and PRO Tools. The reason – I was searching for a new sound, look and feel, and also for a professional solution with direct I/O to my PC and DAW. After a thorough research, I narrowed down my choices to BOSS GT-100, BOSS GT-001 and AVID Eleven Rack. Although revealed on Frankfurt Musikmesse 2014, as of April 2014, the new BOSS GT-001 is still not available on the market, and the online reviews are scarce and controlled, so I decided to give AVID a try, and I was not wrong. The Eleven Rack is the most amazing guitar effects processor I’ve ever stumbled upon ever since I started playing the guitar. Sadly, I said goodbye to my GT-10 (sorry, BOSS!).


Since the Eleven is rack mountable, my choice of a MIDI foot controller was either Voodo Lab’s Ground Control or Behringer’s FCB1010. Behringer is a well-known name in Europe, and they are famous with their high quality products at really reasonable prices. This, combined with the 2 expression pedals convinced me to go for the FCB1010. In order to save myself from the nag of programming the board, I changed Behringer’s original PROM with the EurekaPROM by EurekaSound. If you are using Roger Linn Design’s AdrenaLinn III, Kemper Profiling Amp, Behringer V-Amp series, Behringer Bass V-Amp Series, Avid Eleven Rack, TC Electronic G-Force, G-Major, G-Sharp, Nova, Fractal Audio Systems Axe-FX II, BOSS GT-PRO & Roland VG-99 & VB-99 or Line6 POD series and you still don’t know what EurekaPROM is, you should definitely check what David and the other guys from EurekaSound create!


DigiTech JamMan Stereo

Unfortunately I don’t have time to play in a band anymore and I practice alone, so I’ve tried a number of different loopers, like BOSS Loop Station, Line 6 JM4 and KORG SOS, but none of these was as versatile as the DigiTech JamMan Stereo. The truth is that I’ve never been a great fan of DigiTech, but the JamMan looper and it’s librarian software really rock, so I guess I’ll keep it for a couple of years.


The Guitars

Since 2012, my main guitar is this amazing 7-string B.C. Rich Stealth. Even now, after a couple of years of using it, I am still amazed by the sound, awesome looks and playability of this instrument. I am also using a heavily modified MH and SV’s by ESP, Schecter Omen 7, Jackson Dinky and custom Aurellia guitars.


The Drums

From time to time, I play a heavily modified Yamaha DTX400K electronic drum set, which I also use for recording drum tracks. The customized drum set has an additional bass drum, extra crash cymbal and 3-zone snare drum.


The Rest of the Gear

In case you are interested, you may want to can check the rest of my guitar fleet and more gear on this page.

My New Branded Guitar Picks

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

I’ve just ordered my new branded guitar picks from Grover Allman. Can’t wait to have them delivered from Australia!

If you have not heard of these guys before, make sure you check them out – great work, a lot of options in terms of materials and sizes and fast shipping at amazing price!


Roland GR-20 Guitar Synthesizer with Free Sonuus Guitar to MIDI Converter for Sale!

I decided to sell my Roland GR-20 guitar synthesizer, because recently I realized that I am barely using it. The cool thing is that its new owner will get a free Sonuus Guitar to MIDI converter worth of $129USD, so they won’t have to mount the clumsy GK MIDI pick-up to their guitars. The unit is in mint condition, comes with full set of cables and power supply. You can find more information about the synth on Roland’s official page, here’s the promo video, and on this page there are a few photos of my own GR-20. Hurry up, if you wish to get something really cool about your guitar. The price is $500USD (the street price for a new item is $595USD), you can purchase directly from the eBay listing. Do not forget that you will get a free Sonuus Guitar to MIDI converter!