#dev 2025-11-06

2025-11-06 UTC
rgbivvv, oodani, girlonthemoon, Guest6, DanQ, grufwub and [Al_Abut] joined the channel; tpa0ps left the channel
#
[tantek] ^ strange [snarfed]. I’d trust the “top level” TPAC grid. Are there two back to back there?
#
[tantek] [Al_Abut] re: scripts for keyboard nav, that was one of the behavioral enhancements I tried to get added to CSS but it’s been a struggle with i18n (different keyboards worldwide) and a11y (directional nav arrows need make it clear some form of higher level directional indicators are needed for screen readers)
#
[tantek] So we are stuck with minimal scripts even just for next/prev keyboard nav
#
[tantek] Another approach would be to lobby browser to support use opt-in left/right arrow keystrokes activating link rel=prev or rel=next
#
[tantek] browsers*
#
[tantek] Curious what your thoughts on that are as both a user and web developer [Al_Abut]
#
[Al_Abut] Omfg, I believe you on the difficulty of doing it on that scale. I don’t envy the idea of trying to unpack all of that.
#
[Al_Abut] BUT: holy cow is it fun when you actually have it. And holy HOLY cow is css so much more performant than even the most minimal javascript equivalents.
#
[Al_Abut] Those two ideas have definitely got to come together. It was mind blowing what I was able to do in like (no kidding) 5 minutes with <picture> and srcset, compared to the hair-pulling of trying to do even half of the equivalent with javascript for more days than I care to admit
#
[Al_Abut] Browser native + hardware accelerated + simple terse language to enable = massive freaking win
#
[Al_Abut] Honestly the javascript experience was so bad that it made me miss Flash, haha
#
[Al_Abut] I miss being able to stagger downloads *exactly* how I like it for both perceived and actual speed. At least css comes pretty close with being able to target mobile vs desktop.
#
[Al_Abut] I will say that the one surprising letdown of srcset is that in theory it’s supposed to take connection speed into account but in practice it’s so heavily weighted to screen size and pixel density that it’s useless for that.
#
[Al_Abut] So I can’t specifically target two use cases that I care about - fast mobile and slow desktop - so I fell back to making an aggressively optimized approach for slow mobile and fast desktop at the extremes. Not ideal because it doesn’t cover exactly every use case but should cover most of them.
#
[Al_Abut] Oh, and for anyone that wakes up in the morning and is missing the context from the #indieweb-cafe channel, I’ve silently put up a prototype of a photos section to my website with a few albums: https://alabut.com/photos/
#
[Al_Abut] The first two are CSS-only galleries with a touch of javascript for keyboard navigation of the modals, but they’ve been tested to work fine without it.
#
[Al_Abut] I need to make minor design tweaks and also majorly refactor the Pixelfed one to be more performant, then I’m going to add several more albums for all the other photos on my blog
#
[Al_Abut] One of the other big lessons learned that blew me away is that not only can css make good modal lightboxes, which I kind of knew even hadn’t made before, but I had no idea it could support permalinks to those modals. So now I can send a picture without having to make a dedicated page for it, like this one: https://alabut.com/photos/shelterisland/#photo-4
#
[Murray] Ah nice, and yeah super performant for me!
#
[Murray] Though on Firefox, I think somethings up with text colour:
#
[Murray] https://chat-uploads.indieweb.org/files/2025/11/dev-20251106-115610-image.png
#
[Al_Abut] Thank you! Huge shoutout to [jeremycherfas] for turning me on to the issue in the first place. Hopefully he’ll be on a train again soon so he can test for reals 😂
#
[Murray] looks fine on hover
#
[Al_Abut] Oh no! I didn’t test on Firefox. Thank you for that!
#
[schmarty] alabut++ great explorations!!
#
Loqi alabut has 1 karma in this channel over the last year (3 in all channels)
#
[Al_Abut] Thank you [schmarty]! Great photos on your post too, it shows the power of images to really evoke the feeling of a place and time.
#
[Al_Abut] Uh oh, sorry [Murray], I couldn’t recreate the issue on Firefox?
#
[Murray] hmm weird, let me see what's up
#
[schmarty] Haha, thanks! I am really feeling the pinch of haphazard image options on my site. Limited presentation options and tough to author. I'm thinking about what an updated version should look like.
#
[Al_Abut] I feel you
#
[Al_Abut] When I’ve been feeling lazy, I just do two versions - avif and jpg
#
[Al_Abut] Avif encoding is amazing. It goes like 80% of the way towards making things performant, sometimes by stunning amounts. The rest of the 20% is just me feeding my year-long addiction I’ve been on about photo formats
#
[Murray] So the CSS that's loading for me has the whole card with a background colour of basically transparent (0.25% black) and then `.photo-info` is set to white text, which is what I'm seeing. To be clear, I'm on OS and Firefox light modes
#
[Al_Abut] Oh, I’m in dark mode. Duh, I ported the test projects over to my site design at night and forgot there’s daylight coming in about 2-3 hours… hahahahha
#
[Murray] tbc this is on e.g. this page https://alabut.com/photos/shelterisland/
#
Loqi awesome
#
[tantek] [Al_Abut] more on CSS nav: if you’re curious you can web search the proposed properties CSS nav-index, nav-up, nav-down, nav-left, nav-right. E.g. this is the latest iteration of at least the directional nav properties that I proposed 20y+ ago in CSS UI: https://drafts.csswg.org/css-ui-4/#nav-dir
#
[Al_Abut] Oh god. My eyes, my eyes!!! This is blinding white.
#
[Al_Abut] [Murray]++ for the debugging
#
Loqi [Murray] has 5 karma in this channel over the last year (12 in all channels)
#
[Murray] 😄
#
[Al_Abut] [tantek] is there anything that a layperson like me can do to make those proposed properties be real?
#
[Al_Abut] Like maybe demonstrate it with a blog post or something?!?
#
[tantek] Lol you are not a layperson [Al_Abut]
#
[Murray] would the focus order stuff in CSS not help with this? It's also still at spec stage, but I feel like that would be _simpler_ to use than having to specify on every item where to go next? (Though I do like the idea of this using keyboard arrow keys)
#
[tantek] This is worth a coffee chat IRL at IWC
#
[tantek] Very long and involved chat with lots of context that would be too onerous to do in chat
#
[Al_Abut] Yeah, cool, I’m down!
#
[Al_Abut] Photo Hackathon v2 in a month, I love it
[Trevor_Morris] joined the channel
#
[Trevor_Morris] [Al_Abut] nice. I created a personal version of the Pixelfed-style for my photos. Wondering how I can make it more performant… https://photos.trovster.com
#
[Al_Abut] Oh this is gorgeous
#
[Al_Abut] Both the images themselves (the overhead shot of the boats is a stunner) and the gallery itself. Great little touches with the zoom icon on hover.
#
[Al_Abut] I’ll dig under the hood and check it out for performance ideas in the morning, if that’s cool?
#
[tantek] I need to fix up the CSS on my photos page to “finish” my IWC “medium hard” project
#
[Al_Abut] Also please come to our photo popup on Dec 7th. I haven’t scheduled it yet, that’s on me, but it’ll be 10am pacific to make it doable for UK time too
#
[Al_Abut] That reminds me [tantek], I was going to ask you during create day and forgot. How are you adding new photos to your site? Or more like when, rather than how, i.e. is it every time you build a new version?
#
[Al_Abut] Or do you have a way to take a pic, upload it to Flickr, and then boom it’s on your site without a rebuild.
#
[tantek] My photo posting “work mode” is very much still in-progress and changes slightly each time
#
[tantek] I have some out of date notes on /Falcon about this and need to update them
#
[tantek] The Flickr embed is my intended path forward
#
[Al_Abut] Woo hoo, light mode is fixed in the gallery now. Thank you [Murray] !
#
[Trevor_Morris] What is a photo popup?
#
Loqi It looks like we don't have a page for "photo popup" yet. Would you like to create it? (Or just say "photo popup is ____", a sentence describing the term)
#
[Al_Abut] Oh it’s just an one off event for topics like writing, instead of a recurring series like the homebrew website club on Wednesdays
#
[Al_Abut] [tantek] yeah, my photo strategy is still evolving too. E.g. I’m not entirely happy with how segregated the Pixelfed photos are from the rest of my blog, e.g. they don’t have corresponding posts I can link to or show up in the RSS feed. I’m not even sure how to go about fixing that without having to rebuild my static site every time there’s a new Pixelfed image. Or how to automatically trigger a site build via either Netlify or gith
#
[Al_Abut] to notify me that it did so I can pull down a sync to my local git.
#
[Al_Abut] That’s the dream though. That my blog can have a single feed that’s a blend of curated photos in articles and galleries, as well as quickly captured on-the-go images, all with their own permalinks and automatically built.
#
[tantek] Yeah a singular composite post stream is an absolute requirement for me that I refuse to compromise on personally
#
[tantek] Every post type I have added I made myself take the extra time to make sure that worked and was sustainable
#
[Al_Abut] Totally
#
[Al_Abut] That’s why I’m glad the gallery/post/article structure is at least dialed in for the ones I manually add to my site, and in a performant way. Pixelfed is squirreled away in a corner as an experiment for now.
#
[Al_Abut] That’s why this week has been so exciting and I couldn’t stop coding. It feels like the culmination of months of on/off rumination on how to best present photos online and is in a really good place for everything other than the use case of capturing stuff quickly on the go.
#
[Al_Abut] And I have you to blame [tantek] for putting that use case on my radar this weekend, hahaha
#
[tantek] lol which use-case in particular
silent1 joined the channel
#
[Al_Abut] The first three here - capture, editing, and upload.
#
[Al_Abut] https://indieweb.org/photo
#
[Al_Abut] I was so focused on storage and everything later in the list that I didn’t even think about those
#
[Al_Abut] That’s when I realized that my early tinkering with Pixelfed could finally have a useful purpose.
#
[Al_Abut] Also, I just realized that if I can crack this nut about how to better integrate Pixelfed more natively into the rest of my site, the same logic should hold for using Loops with vertical video. Loops is the open source activitypub-enabled clone of TikTok by the same developer that created Pixelfed as an open source activitypub-enabled Instagram.
#
[Al_Abut] https://loops.video
#
[schmarty] shakes fist at making it different server software
[jeremycherfas] joined the channel
#
[jeremycherfas] [Al_Abut]++ for some great work that I look forward to exploring in more depth.
#
Loqi [Al_Abut] has 9 karma in this channel over the last year (16 in all channels)
Dryusdan, thegreekgeek and Daijo joined the channel
#
[Al_Abut] Thank you [jeremycherfas]. The first two galleries on my new /photos page are guaranteed to be performant and I’m very proud of how they load on mobile, not just how they lay out.
#
[Al_Abut] The pixelfed gallery on the other hand is an unmitigated disaster on slow connections and I’ve totally thrown in the towel on making it better with this javascript-heavy approach. I’m going to focus on adding more of the performant css-only ones before I circle back to making pixelfed better with a different approach, one that’s beyond my skills at the moment.
tulips joined the channel
#
[snarfed] [tantek] https://www.w3.org/2025/11/TPAC/schedule.html ? yeah they're both on there, one Thurs, one Fri
to2ds joined the channel
#
[tantek] It’s possible it was a WG meeting and a CG meeting and got turned into two CG slots wince the WG charter is stuck in progress
ttybitnik, rrix, gRegor, barnaby, opencircuit, [morganm], bterry1 and DanQ joined the channel