Over on my CWGBM site, I have a section devoted to what I call "coding sketchbooks." I don't dive into them as often as I'd like or as deeply as I should, but they're nice to have around for scratching the occasional itch, clearing my head, and developing loose libraries of ideas and code for reference and use elsewhere.
Lately I've been dipping back into my SVG sketchbook because an article on Frontend Horse pointed me toward the SVG.js library, which I've decided to take for a spin. It definitely makes working with SVGs a bit easier, though certain weird learning curve moments still come along for the ride.
Under the hood, these sketchbooks are mostly all instances of Fractal. Though it's primarily intended for component or pattern library development, somewhere along the line I got the idea that, with a little massaging, Fractal would also make a great base for a kind of iterative code sketchbook. I like keeping track of ideas as they develop and having running records of stuff I'm working through, with easily accessible fall-back points that I can always branch off from as needed.
So like on the SVG site you'll see something like a Grid concept take on a series of forms (a la one through five), as I decide I've made something I actually like and I want to hang on to it, or I decide I just want to try something different without overwriting whatever progress I've made in the previous iteration.
What makes this fun and less painful to do is, I've put together a node script in the code repo, which lets me, from the command line, point at any directory in the sketchbook, clone it, and rename it—including updating a sort of "id" inside the directory, so that all my scripts and styles become "unique" to each individual iteration. That way I can change or destroy whatever I want in an iteration without worry that I'm burning the bridge I've built behind me getting to that point.
Mostly. If you root around these things you'll find I also play with developing utility libraries and the like that multiple iterations pick up and use...hopefully without iteration 1 of an idea breaking when I change something seemingly innocuous in the common code when I'm hacking away on iteration 10. It's a bit messy but I've made it work for me.
I'm sure this could all be done on Codepen or in some other way but I like owning my own stuff when I can, I really like Fractal a lot, and I like having all my stuff for a given library or technology or whatever all in one big (messy, yes!) codebase for later reference and reuse from directly within my code editor. This isn't the perfect set-up, but I'm fond of it.
In the SVG sketchbook I've been playing with generative grids full of shapes, always a good place to jump in and start tinkering. I find myself continuously turning toward a funky pastelly/acidic pink/green type of palette, which is maybe one of my favorite things in the world, for some reason? I have also been using the JS library as an excuse to finally start learning a bit about how to write my own SVG path code in a generative fashion, which is less scary than I expected. A couple sessions of this kind of thing does wonders in terms of refreshing my interest and pushing my knowledge and understanding, I believe.