cantstopthesignal
katherine🌳 new work
> Over the past couple of years, I’ve been marking the seasons by the inhale and exhale of this tree.
accessibility notes:
- IMPORTANT: it is unfortunately a heavy webpage, weighing in at about 45 MB due to all of the images. i was wondering if there was a way to optionally load the images only if the user is okay with loading more data, but i'm not sure if there's a way to do that right now.
- each image comes with a caption that serves as the alt text. (hopefully that functionally works?) wasn't sure if this was going to be helpful or overwhelming, but it turned out to be an interesting writing challenge and i kind of like it. there is an option to hide the alt text if it's visually distracting while browsing the images.
- should work on both larger and smaller screens
- should work with both mouse and keyboard (have not tested with a screen reader yet)
ooh, also
- functional without javascript (happily using the CSS scroll snap feature)
- functional without javascript (happily using the CSS scroll snap feature)
Fionnáin@kayserifserif I tried to do this with an image heavy web artwork before but it needed a chunk of javascript to build a loader. Even though the overall MB size with javascript was smaller, I wanted to keep it accessible for non-JS users so opted for a disclaimer that says the page needs a little time to load.
Also I love this wonderful work of yours.
@ephemeral thank you so much! :) yeah, i wonder if i could figure out a compromise solution that could check all the boxes… maybe next round
Zach Leatherman@kayserifserif this is amazing.
On your first point, I do have an experimental <is-land> demo of no-JS friendly image loading: https://is-land.11ty.dev/demo-image-loading
(and is-land has a `on:save-data` condition that ties into this: https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/saveData but you could use a button like the demo shows)
Eric Portis@zachleat @kayserifserif Because it's just scrolling, I wonder if just adding loading=lazy could be enough?
@eeeps @kayserifserif ack, yes! sorry! do that first!
@kayserifserif @eeeps I wonder if you could remove `loading` attributes via JS when they hit the play button
@zachleat @kayserifserif I had this same thought, and then I thought "wait am I just reinventing streaming video from first principles??"
@kayserifserif @zachleat which I love! Seriously if GIFs teach us anything it's that the liminal space between images and videos is a rich place for exploration on the web. More web zeotropes!!!
@kayserifserif @eeeps well that isn’t as fun 😅
Ollie Boermans@kayserifserif @eeeps @zachleat nah, I really like how the scroll enables multiple modes of exploration.
Lazy loading images call for a lazy loading play function. It could hold off the starting the setInterval until some measure of the images are loaded, or even checking if the just the next image is loaded before stepping.
Johannes Odland@zachleat @kayserifserif @eeeps
You could also do that progressively, «buffering» enough frames ahead as you autoscroll.
@eeeps @zachleat @kayserifserif I don’t think loading=lazy works so well in Safari, if it’s scrolling in a container and not in the viewport.
Safari doesn’t use IntersectionObserver with scrollMargin (yet) for lazyloading, and won’t see the image until it becomes visible in the container.
@johannes @zachleat @kayserifserif Oh dang! TIL. But does your comment here: https://bugs.webkit.org/show_bug.cgi?id=264864 mean you're actively working on this? (if so, THANK YOU)
@eeeps @zachleat @kayserifserif I’ve filed a PR for supporting scrollMargin, but it’s currently stuck in review.
https://github.com/WebKit/WebKit/pull/40687
Once scrollMargin is supported it should be easy to switch to using that for loading=lazy.
[intersection-observer] Implement support for scrollMargin by johannesodland · Pull Request #40687 · WebKit/WebKit
09ecb0b [intersection-observer] Implement support for scrollMargin https://bugs.webkit.org/show_bug.cgi?id=263370 Reviewed by NOBODY (OOPS!) This change adds support for scrollMargin to Intersect...
@eeeps @zachleat @kayserifserif I’m not a WebKit developer, so I’m not sure if they think my patch is the right way to go.
@johannes @zachleat @kayserifserif You're submitting PRs! Seems like you're a WebKit developer to me! (but also I know what you mean; good luck)
@johannes @zachleat @kayserifserif Fantastic! (and also sorry to the half-dozen people I've given bad* carousel advice to over the past few months, because I was too lazy to test if WebKit worked like Chrome!)
—
* or at least premature
if any plant enthusiasts knows what kind of tree this might be… i would love to know!!
henry ✷@kayserifserif needed this 🤍 your work is wonderful mate
@henry love to be able to share with you!! 🤍
spork (pathetic girlfailure)@kayserifserif this is really cool!
@flamingspork thank you!! ^_^
Ethan Marcotte@kayserifserif oh my gosh, katherine
this is such a gift. thank you 💜
@beep ethan!! thank YOU :)))
Christopher Kirk-Nielsen@kayserifserif This is fantastic!
@chriskirknielsen thanks so much! :)
Juhis@kayserifserif This is lovely!
@hamatti thanks so much! :)
dominika@kayserifserif i love this!!!
@nonnullish ahh thank you!! :)
a new hope 
@kayserifserif omg.......omg love it 💘 also that title styling is so good!
Stefan Bohacek@kayserifserif Love this!
@stefan thanks, stefan!
Blake Watson 
@kayserifserif @stefan Now I’m sad and happy at the same time.
Anthony Sorace@kayserifserif Well this is just *lovely*.
@a thanks anthony :)
Aurooba Ahmed@kayserifserif That was such a pleasure to watch.
mastodon quixote@kayserifserif i love this! i have one too but yours is much more beautiful. mine is more just documenting a practice that i decided to chuck up on the internet rather than an art project :)
https://ian.mccowan.space/outside/sit-spot.html
https://ian.mccowan.space/outside/sit-spot.html
@valrus lovely!! it's so cool seeing the tone change!
more ominous in the shadows? cool blue light? sunset peeking through? (the third last one was such a delight to come across!)
Keenan@kayserifserif this is a true joy.
@keenan thank you keenan :')
@kayserifserif Gonna be a corny asshole and say, "NO. Thank *you.*"
NO. Thank *you.*