Christian AlderMar 22

Some progress on this weekends web dev project, I'm making a little advent calendar generator ☺️

So far:

- Manged to randomize values into the cells, learning about the Fisher-Yates shuffle algorithm in the process

- Ended up hand coding the SVG to get it setup right

- Good groundwork for things to come, I think

#CSS #HTML #JS #SVG

Show threadChristian AlderMar 22

Some issues:

- Turns out scaling text & line-wrapping within an SVG is a _whole_ issue. Either I'll have to do some funky stuff in JS or find another way here. Looking into <foreignObject>

- Still not decided how to tackle freeform placement. HTML canvas might help? then turn that into SVG 🤔

Show threadTyler StickaMar 22
@hejchristian FWIW, I once used foreignObject to handle this in a complex animated SVG for a client project. Seemed to work well, even if having a little bit of plain HTML hanging out in my SVG felt funny
Show threadChristian AlderMar 22

@tylersticka Ah thanks!

I forgot to update here but I ended up trying it it and it's working great... Except in Safari 🙃

display: flex/grid; are a no go, and some other seemingly random properties don't work lol,

So I declare this project not suitable for Safari 😅 I will try to address it at a later point, maybe if I switch out to HTML Canvas? but right now it's a blocker to other stuff I want to add.

Show threadTyler Sticka
@hejchristian Oh, bummer! I’m sure ours was working in Safari, but it was years ago and I don’t remember what layout method we used therein
Mar 22 at 3:24pmWeb