Right, I’ll leave you with a cute bunny someone drew (naughty cute bunny artist did not rewind though, tsk, tsk). Back to working on Kitten and Domain tomorrow so your timelines will be blissfully empty of pixel sketches :)
’night ’night all – and thank you to all the folks who contributed pixels to our shared ether of Draw Together over the weekend for restoring my faith in humanity a bit :)
Folks, I see you experimenting with scripting—that’s cool, but please be considerate to the other folks playing with Draw Together.
To that end, I’ve just added two scripts you can use non-destructively to the readme. One to invert the canvas (which someone discovered literally minutes after I released the app) and the second that replaces the whole image with a pre-made design but then restores it after two seconds.
I’ve also updated the readme with instructions on how to run Draw Together yourself (you could have it up and running locally in under a minute by installing Kitten, cloning the repository, and running the kitten command) and links to where you can learn more about the Streaming HTML magic in Kitten that means that the whole app is ~60 lines of code :)
@DrVeronikaCH Thank you so much, Veronika :) Love the face!
:kitten:💕
PS. Have you had a chance to look at the code? That whole thing is in 60 lines of Kitten. Would love to see Kitten start to get used to teach web dev in the future and would love your thoughts on that too :)
I’m just about to record a video where I create the Draw Together Kitten¹ app from scratch in one take. If any of you want to be in the initial demo of the live version, feel free to head on over to https://draw-together.small-web.org and demonstrate your pixel drawing skills :)
I have for a long time wanted to turn a part of my website into a "fridge door with magnets", where visitors can (together) play with (the order of) a select number of words. Looking at this, that must be quite easily implementable as well?
@MishaVelthuis Yep, you’d just give each word an id for some sort (eg., index the words array) and then use the drag and drop api and fire events based on that (look up hx-trigger in the htmx docs) and pass the x and y coordinate (or offsets, depending on how you implement it) as data. It’s a bit more complicated than what I have (a grid of buttons) but should be doable :)
A big thank-you to @paillp for poking the Draw Together Kitten toy with a stick and thereby discovering a big-old hole in Kitten’s new experimental Streaming HTML code where I was assuming (remember, kids, never assume…) the data was valid JSON.
I’ve now fixed that and deployed a new version of Kitten that doesn’t suffer from that issue.
If you do discover that you can crash the app and/or Kitten by doing unspeakable things to it, please file an issue or ping me here.
(It’s back up and running with a bit of data validation and I realised that I’d over-engineered it – yes, even in 60 lines of code – by storing all the updates in the database when I didn’t need to, so I removed that. Although, in the future, it would be fun to save time-series data so the drawings can be played back in real time.) :)
@4censord Kitten’s database is very performant for writes since it’s an append-only log. So there’s really no need. But if you wanted to, you could set an interval manually using plain old JS. (Kitten’s database is JavaScript Database; JSDB)
Add comment