guitarragrams (process)

Around early 2018, I compiled guitar chord diagrams as I studied various chord patterns and inversions. That turned into a huge Visio document, which was irritating to update. I figured that putting it on the web would be a much better idea.

This was also a neat opportunity to learn some tech stuff, so I decided to jump on the Vue bandwagon for this one. I found that the Vue CLI tools didn't get in my way at all, and the Vue documentation made for an gentle learning curve for a React dev.

Process

With this project, I just needed to figure out two things, and all the hard stuff was finished in one afternoon:

  1. Data format for the chord diagrams. I laid it out in a few JSON files here.
  2. Vue component scheme. I settled for four components here:
  • ChordGroup
  • FretboardDiagram
  • FretboardMarker
  • PatternGroup

If you're already familiar with web dev frameworks and the Node stack, the view from Vue is majestic.

For more info, check out the project repository at github.com/rjsalvadorr/guitarragrams

Sketches / old versions

yep yep yep

yep yep yep

yep yep yep

yep yep yep