guitarragrams (process)Sep 23, 2018
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.
With this project, I just needed to figure out two things, and all the hard stuff was finished in one afternoon:
- Data format for the chord diagrams. I laid it out in a few JSON files here.
- Vue component scheme. I settled for four components here:
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