#dev 2026-07-03
2026-07-03 UTC
cotsuka, barnaby and [snarfed] joined the channel
cotsuka, grufwub, [Trevor_Morris] and [snarfed] joined the channel
# 
doesnm App: https://yuniko.chroma.cafe/ <- at first look sounds like reinventation of ankie
# 
[capjamesg] I have never heard that expression before but I like it!
GWG, solonovamax, [capjamesg], [social], [tantek] and GuestZero joined the channel
# 
WinnerWind doesnm: oh cool, flash cards. anki has been doing that for basically forever and anki is still imo way better performing and usable than this ^_^`` also the guide doesn't work?
# WinnerWind sorry that was a bit mean ^_^`
# WinnerWind i was being mean, apologies
# WinnerWind still, i dont think its okay to be mean to other peoples' projects. my bad
# WinnerWind anyway i really like the colour scheme but i think the orange background is wayyyyyyy too brigh
# WinnerWind though that isn't relevant for -dev
GuestZero, cotsuka, barnaby, ZodiacalComet, rMdes, thatoddshade, Escribir_Se, ax562, rossabaker, blacklight and d1s1nf3ct joined the channel
# WinnerWind that face when your HTML mysteriously breaks and you have made 0 changes: https://x0.at/1J7Q.png
Pixi`, Pixi and cotsuka joined the channel
# WinnerWind UX question: should inline images in blogs take up 100% of the readable width? right now they are and im not sure if this looks bad or good. https://x0.at/GH6J.png
# WinnerWind (feel free to comment on other UX)
# WinnerWind oh that's a good idea. images are instructed to take as much area as they feel like, atm
# WinnerWind this isn't a hero image, its an image which is in-line to the rest of the text
# 
thamara_k Agreed with gRegor (also not a designer)
# WinnerWind what about the size itself? should inline images in blogs be forced to be a bit smaller? (rn it takes up as much area as it feels like within limits)
# WinnerWind the issue is that i dont want to lose too much detail because the image is too small or whatever, but at the same time making it this big is really distracting
# WinnerWind well the current version of the blog is a WIP but this page exists in my public blog already https://winnerwind.in/blogs/unsorted/edge-as-tutorial
# WinnerWind here it takes up 100% of the width but that's because the gutter is absolutely massive on this page
# WinnerWind i wonder if there's a way to make an image clickable so that the user can just click it to open in a new tab or something
# WinnerWind oh i could just wrap it in an <a> right?
# WinnerWind that would be a bit problematic because my markdown parser isn't configured to do that..... i wonder if there's a property on img itself to handle this, brb
# WinnerWind thats the old design, and not my code
# WinnerWind the new design is just a vanilla <img> tag
# WinnerWind oh wait, i wrote the image parser so i could write a hook into it to inject classes/html
# WinnerWind if the image handling was done by the markdown library then i guess this would've been impossibleotherwise
# WinnerWind im personally not a fan of js anymore, hence the new blog site
# WinnerWind anyway thanks for the advice! im gonna look into shrinking them a litle bit (Adding more side padding for images specfiically?) and then work on the clicking thing
# WinnerWind oh for sure, but personally im 100% anti JS unless it's a web app that im working with (i use noscript basically everywhere)
# 
thatoddshade hi, sorry to interrupt—there are also CSS-only solutions like Loren’s https://ribo.zone/free/snippets/#photopile
# 
gRegor Speaking of JS, TIL https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget I haven't done a lot with event listeners and ran into an issue where event.target was actually a child element, depending where you clicked. currentTarget should always return the element the listener is bound to. Neat.
# thatoddshade gRegor: > You could write some JS to handle something on click of an img element, but the `a href` will be the most accessible. Personally I'd only suggest JS as a progressive enhancement, like that lightbox
# thatoddshade I think it’s fine to implement a feature like that exclusively in JavaScript, as that fits into the purpose of JS—behaviour, interaction…—and JS-less browsers can still allow the user to access the image.
# thatoddshade oh ok
# thatoddshade but wouldn’t the link mess with semantics?
# thatoddshade I meant like
# thatoddshade wouldn’t it sound weird when read out loud by narrators?
# thatoddshade Ideally the link should be completely silent I think
# chr0m4 WinnerWind: I personally don't like full width images in blog, it hurts the makes the reader scroll unnecessarily and also, if you go full-width the lines of text become too wide and makes your text hard to read also
# chr0m4 https://chroma.cafe/posts/the-chill-guy/ 800px is pretty standard (my 2 cents)
d1s1nf3ct, thatoddshade and ZodiacalComet joined the channel; thatoddshade left the channel
# 
ZodiacalComet sweats in thinking of wrapping <img> in <button> and using <dialog> to display the full image
# tdrayson Bit late to this, but I usually go for 70ch (600px ~) max width on text content, then push images slightly wider to standard for best readability
# IWDiscord <tdrayson>
thatoddshade and dabeglavins5 joined the channel
# 
Loqi Typography is the art/science of making text attractive and readable https://indieweb.org/typography
barnaby and cotsuka joined the channel
# [capjamesg] My seasonal emoji script now supports emojis for specific days in a year (i.e. 2026-01-01) instead of a specific day in every year (i.e. every January 1st).
# [capjamesg] I wonder how many one-off emojis I’ll end up with.
# thatoddshade How does it work? do you have a big list of emojis for everyday of the year with the one-off emojis overwriting them?
# [capjamesg] Exactly!
# thatoddshade oh nice. could you share details on the implementation? I’m actually interested
# [capjamesg] You can see the script at https://jamesg.blog/assets/js/seasonal.js
# [capjamesg] I have had variants of this running for a few years.
# [capjamesg] Every so often I have had a need to add a one-off event, and it finally came time to add that feature.
# thatoddshade link returns a 404 :/
# [capjamesg] Can you copy-paste the link you are opening?
# [capjamesg] Maybe our Slack bridge broke it somehow.
# [capjamesg] That link returns a 404? Weird. It works for me, even in incognito and a different browser…
# [capjamesg] Here’s an alternate link: https://gist.github.com/capjamesg/dcda765cef7abf127faddc5fe3eea424
# thatoddshade the emoji I get (which I never realised changed each day until know, even though I already knew your site) is the sparkle emoji ✨
# thatoddshade I just looked at your homepage’s source and the same URI is referenced
# thatoddshade > the same URI
# [capjamesg] I have an issue with my service worker caching that has been causing problems for a bit.
# [capjamesg] To be honest it might be time to de-register the service worker until I figure it out.
# thatoddshade okay I assume I am getting the scriptless fallback ✨
# [capjamesg] One second.
# [capjamesg] Let’s see if I can remove the service worker.
# 
[Murray] Coming in late, but [Gregor] and @thatoddshade you're right that a link wrapping an image will be "link, alt text" in basically all screen readers (a few switch the order; they should all state its a link, unless you're explicitly navigating via link selection, in which case some drop that)
# [Murray] Also yeah @ZodiacalComet, that's an increasingly common pattern for the old "lightbox" technique of showing images. You can actually push this very far these days using `command` and `commandFor`. It takes like a dozen lines of additional JS to get a fully functional "click this image, open a gallery mode, then browse with keyboard or click events through next/prev images" and everything
# [Murray] Not necessarily the _best_ approach in all scenarios, but this article from Polypane outlines one way to do it: https://polypane.app/blog/building-a-lightbox-with-the-dialog-element/
# thatoddshade I think CSS and JavaScript–only approaches are the best, as adding any markup beyond <code><img></code> will affect semantics
# thatoddshade i for some reason forgot irc doesnt support html
# thatoddshade i meant <img>
# thatoddshade anyways CSS-only implementations aren’t that bad if it’s just :focus
{ /* styling that makes the image BIG */ }# thatoddshade It’s more performant than JS and can make use of classes like .illustration or .picture to not target any image
# [Murray] oh yeah, CSS for style changes is literally what its made for 😄 I more mean things like CSS only lightboxes or carousels. They're technically clever, but they almost inevitably are inaccessible, as they can't actually update the state of the DOM (and even when CSS does impact the DOM, it often isn't exposed to the AOM, like with pseudo-element images
# thatoddshade > on the same page
# thatoddshade my ignorant self has been exclusively been thinking about PICTURE GO BIG and you’re talking AOM and DOM numbers of universes ahead of me…
# thatoddshade more seriously, `<dialog>` and the new `command` and `commandFor` are really, really nice.
# ZodiacalComet [Murray]: Ye, experimented a little with it when trying to do it without JS. Left it because I didn't get the height to behave correctly, it overflowed and made the dialog scrollable. ~~Skill issue~~
# ZodiacalComet And that term will be on the queue for a search later, thanks!
cotsuka joined the channel
# thatoddshade I just wish I was better at finding light polyfills
# ZodiacalComet #HackingTilYouMakeIt
# thatoddshade I assumned it was an existing channel😭
# thatoddshade im new at IRC so I do many stupid things
# ZodiacalComet pats thatoddshade's back
# ZodiacalComet look at the bright side, you are the owner of a new channel in libera /jk
# [capjamesg] thatoddshade++ nice work on getting your wiki page set up!
cotsuka joined the channel