Hoping to get some ideas/inspiration for this topic from this helpful community! The complexity of my little app is growing like crazy, so I’m not sure I’m doing a great job at keeping it all together So if explanations are incomplete or vague, please let me know, I’ll try to explain further!
So, I’m working on StitchEase: an app where crocheters can see instructions for crocheting step by step and keep track of their progress. To achieve that, I have a few tables set up:
- Patterns – this is the main page of the project one’s working on. It has a bunch of metadata (designer name, recommended material, etc. It’s also related to Pattern Instructions, which allows me to show a list of all the steps one needs to complete as an inline list
- Pattern Instructions – step-by-step instructions for each pattern. Each row in this table represents one step of the pattern they are working on. There’s more info in these rows, but I want to limit this discussion to only Instructions and # of stitches per step, as those are most relevant for this discussion.
-
Working row – a dynamic table that allows me to load contents of Pattern Instructions and navigate back and forth between rows while avoiding the weirdness of the “Back” button going through multiple steps. I can further detail this, but it’s also described here.
I only had to deal with a linear set of instructions until recently. However, many crochet patterns come in multiple sizes. The size that the user chooses to crochet affects both the number of stitches one must do for that step AND the number of steps they have to do. It’s important to say that sizing is not consistent for different patterns. Some of them will have three sizes available; some might have up to 9 (that I’ve seen, who knows, maybe even more).
So the desired flow would be to allow the user to select the size of the piece they are working on and only load instructions relevant to that size. My little blond brain gives up when I think about this, so need your help!
Here are a couple of options I’ve considered:
Option 1 – dumb, dirty, and expensive
So the obvious solution here would be to add a selector on the Patterns table to select the size, and then use that size to filter Pattern Instructions structured the following way:
Step | Size | Instructions | # of stitches |
---|---|---|---|
Step 1 | S | Written instructions | 10 |
Step 1 | M | Written instructions | 15 |
Step 1 | L | Written instructions | 20 |
This structure is pretty simple and should work perfectly. However, I’m hesitating because this approach means:
- Potentially duplicating instructions for each size, which means updating them will be a PIA.
- Each pattern will now take up X times more rows (where X is # of sizes offered). Not only does this seem wasteful, but it will also get expensive, fast
So I’m trying to figure out if there’s a better way.
Option 2 – more compact, but unclear how to make it all work
For example, I could structure my Pattern Instructions in this way:
Step | Instructions | S – # of stitches | M – # of stitches | L – # of stitches |
---|---|---|---|---|
Step 1 | Written instructions | 10 | 15 | 20 |
Step 2 | Written instructions | - | 15 | 20 |
Step 3 | Written instructions | - | - | 20 |
This structure is a lot more compact but has some problems:
- While I have an idea on how to use visibility conditions to make the structure above work for steps with all sizes present, I’m failing to figure out how to tell Glide to “skip” steps where instructions are missing.
- Because sizing is inconsistent across various patterns, I’m afraid that baking just five sizes, or 7, or 15, whatever, straight into this table is not the best way to handle this…
Questions / ask
- How should I structure my data to get the best of both worlds? Are there best practices I could read up on for data structuring?
- What other tools could I use to achieve the same result? Is there maybe a way to use arrays somehow? Thinking something like a table below + a table that creates a relation between a size defined in the pattern (S, M, L) with the “place” in the array (0, 1, 2)? However, I guess the question from Option 2 still stands – how do I “skip” steps that don’t have those instructions?
Step | Instructions | # of stitches per size – S, M, L (array) |
---|---|---|
Step 1 | Written instructions | 10, 15, 20 |
Step 2 | Written instructions | -, 15, 20 |
Step 3 | Written instructions | -, -, 20 |
Looking forward to your ideas! Thank you in advance =)