On the second day of RC, we did a pairing workshop. The task was to implement Conway’s Game of Life. In half an hour, we didn’t get close (but that wasn’t the point of the exercise anyway).
I’d like to get good at creating cohesive, polished user interfaces. In the spirit of working at the edge of my abilities, I will tackle some bigger projects than this, but I am happy with the result of spending today implementing life in TypeScript and fiddling with SVG transforms and animation in Svelte. Today I learned about SVG’s transform-origin property, which in combination with Svelte’s built in scale transition effect, made getting the growing and shrinking cell animations I wanted easy. This, after several hours of trying to do it the hard way.
That’s life.
transform-origin property. Finally, to get the animation, I'm using svelte transitions and appending and removing lots of rects on each tick. This strikes me as being kind of fundamentally un-performant. I'm curious about implemting the same thing with a bunch of divs, CSS Grid, and clip-path animations.