In modern web development, it’s often the little things that catch you out.
Multi-user data visualisation that updates dynamically? Sure, no problem.
Responsive, accessible SVG layout? Fine.
Put the labels in boxes? Yeah, no worri… ah, crap.
The labels in question need boxes behind them, but the text can change, and is on an arc, and the boxes have rounded corners, and suddenly what looks easy in Figma turns into an afternoon of trigonometry and getting to grips with the supremely user-unfriendly SVG arc command (this involves typing gibberish like A rx ry x-axis-rotation large-arc-flag sweep-flag dx dy and weeping softly).
I hate that feeling.
The dawning realisation that you’ve opened a kettle of worms. The worry that you’re going to be over time, or over budget. A sudden yearning to pack in the shit-show that is front-end and become a zoo-keeper instead?
But there are options, not all of which involve changing career!
- Just do it: break it down into steps, do the work, and don’t make the same mistake next time. This can be frustrating, but it’s a lesson you’ll never forget. What can you take away from this as a developer, designer, project manager?
- Mitigate: is there an easier way to handle the problem? Have you over-engineered your solution? Have other people had the same issue in the past, and solved it? Are there libraries, blog posts, tweets that might offer insight?
- Discuss: there’s nothing wrong with going back to the client and talking it over. In this example, maybe the boxes could be done differently, or perhaps we could lose the rounded corners if they’re a huge time-sink. Changes are not always an option, but nice clients are usually open to conversation — especially if you can explain yourself clearly and offer alternatives.
In my case, the right combination of arcane search terms brought up a pre-made library. It was designed for drawing doughnut charts, but with some tweaking it would handle the bulk of the maths for me and save me a day’s work.
I didn’t even mind putting in the extra work in the end, because now me and the SVG arc command are best buds, and that’ll be useful in future. Now I can x-axis-rotation big-sweep little-sweep cardboard box with the best of them!