A React component to build SVG fretboard diagrams
For the user: strings are numbered starting at 1 and from the lowest pitched to the highest pitched.
Implementation: strings are in an array 0-index.
Frets are numbered starting at 0 and from the head of the neck towards the bridge.
Fret number 0 is the nut, or the "zero fret" installed close the the nut on certain guitars.
Intervals can be displayed in two forms:
- full interval: 11
- simplified interval: 4
"P" and "M" are omitted.
Display stacked intervals
- colors for intervals
- Flow or TypeScript. Go with Flow if possible.
Make sure react-router is not build into the component because it is only used by the sample-app.
Allow overriding of the display options per Shape. For example, on the same diagram, one shape could be displayed with notes and another shape could be displayed with intervals.
- PT Sans Narrow
- Varela Round
Optimize Later - Premature optimization is the root of all evil. The most important function of computer code is to communicate the programmer's intent to a human reader. Any coding practice that makes your code harder to understand in the name of performance is a premature optimization.
Apply the Robustness principle - Be liberal in what you accept, and conservative in what you send