#dev 2026-05-06
2026-05-06 UTC
cotsuka, blacklight, lay, grufwub, gRegorLove_ and dabeglavins joined the channel
rolandas, tanok111, gRegorLove_, ZodiacalComet, grufwub, [social], IWSlackGateway, [daveletorey], dabeglavins, jjuran, [me1850], Saige_Leah, MD87, joshproehl_, wtl, hedy, saccharin, pfych, TwinAdam, rossabaker, sandra, bb010g, paultibbetts, k3can, vidak, Maxpm, dustinm`, simpleauthority, IWDiscord, CrowderSoup, hughrawlinson, slowerloris, jasper[d], smlckz, benji, ben, cinabo[d], aislynweaver, Kaja, jasonquintin[d], stefen, rjomara5853, streety_, moose333, [daveletorey]1, [social]2, [me1850]1, IWSlackGateway1, NaomiAmethyst, barnaby, gRegorLove__ and cotsuka joined the channel
# 
[capjamesg] https://badwebsite.club is cool!
superkuh, duanin2, srazkvt, barnaby, posixlycorrect, grufwub, oodani, MD87, ax562, NegateThis, cotsuka, gRegorLove__ and [artlung] joined the channel; geoffo left the channel
# [capjamesg] While writing my phone post, I realised that my fourth and fifth footnotes were not rendering. I forgot that in DUS I wrote my footnote code to only handle three footnotes, thinking I wouldn’t need more 😂
gRegor, NegateThis, [KevinMarks], cotsuka, barnaby and deathcomestotime joined the channel; NegateThis left the channel
# [capjamesg] https://domm.plix.at/perl/2025_10_braincoded_static_image_gallery.html “brain coding” is a cool term 😄
# 
[Kupietz] A, yes! A retronym! Like "acoustic razor".
cotsuka joined the channel
# [Sophia_wood] I think I've got hex working on links for unique puzzles!
# [Sophia_wood] and the link is so long, I don't want to paste it - lol
cotsuka, Saige_Leah, clebbie[d], blacklight and [mikemai2awesom] joined the channel
# [mikemai2awesom] continuing my goal of writing as little code as possible, here's another tiny css https://codepen.io/mikemai2awesome/pen/NPRgeOy. this simple snippet will help you build lightweight and accessible presentation slides.
# [capjamesg] [mikemai2awesom] ++ cool project!
# [capjamesg] This is a cool use case for CSS scroll snap.
# [mikemai2awesom] thanks! too me a few tries to get it right, with accessibility and all
cotsuka joined the channel
# [capjamesg] What do the layers do?
# [mikemai2awesom] i organize with layers for convenience of writing everything in one file. the first line sets the order. then what follows can be in any order i want. if i am working on the demo UI, i bring the @layer demo all the way up to the top of the file
# [mikemai2awesom] also, the layers will keep my specificity in check. if i have utility classes in my css, the utilities layer would be the last one in the first line
# [capjamesg] Ah, interesting!
# [capjamesg] Thank you for the explanation!
runawaydevil joined the channel
# [morgan] [mikemai2awesom] Looks good, just took a few passes at it with keyboard, inspected the HTML, Id say this has some good effort into access features
# [mikemai2awesom] glad to hear! i did the .js-ready trick, the trade off is when JS is turned off, it becomes a long scroll with no fading, but that beats elements starting at opacity 0 (which is not accessible).
# [mikemai2awesom] there is a current bug i haven't solved, if i furiously resize my browser, the slides might break. 😂
# [morgan] reading a few of your CSS comments, it seems helpful, and it seems you had a lot of fun or interest making this. Its got me inspired a little to work on my own site in a slightly different tabs pattern, but Im going to test it a little more, and Im inspired by your use of scroll snap for my own site
# [mikemai2awesom] my dislike of heavy sliders drove me to this. no need for js until i need intersectionObserver
# [mikemai2awesom] i really love using intersectionObserver
# [mikemai2awesom] tabs can potentially be built with `:target` but need some accessibility maneuver. looking forward to your take!
# [morgan] Ok, this is dev for my own site, Im looking at a starting point here: https://htmx.org/examples/tabs-hateoas/ . I want to test it to see if I can make it pass basic keyboard tests and have semantic markup. Im inspired by your scroll snap to try and make tabs that expend to fill a container, and extend downwards if scrolling down otherwise swaps the tab.
# [morgan] The modern part here is the CSS, Intersection Observer is not super familiar to me but very much a thing people use for interactive things like this
# [mikemai2awesom] i think keeping the tab and tablist roles but not having arrow key support might be confusing to people who are accustomed to tabs
# [mikemai2awesom] the demo on that page doesn't have arrow keys and home/end keys support
# [mikemai2awesom] i am in the camp of "tabs are hard to use" for most assistive tech users, so i rather not use those roles. taking away the skeuomorphic aesthetic of tabs, they are essentially different sections on the page. do i really need those roles?
# [mikemai2awesom] i think of "tabs" in the same vein as "cards", it's not really semantic, it's aesthetic
ax562 and runawaydevil joined the channel
# [morgan] I think your right actually, about it being hard to use. Your example has more HTML up front, would load better.
# [morgan] Im curious about the roles, but basically, I want to use simple `/get` requests with that library to include HTML partials onto the page, I was thinking of using tabs, but now maybe my page will use a different pattern, one that has some control element to it but also works a bit easier
# [mikemai2awesom] i think i am picking up what you are saying. if i add pagination controls to my code, and change the css to look like tabs. then i would have transformed the slider into tabs, with the exact same markup.
cotsuka and rrix joined the channel
# [morgan] Nice! Yeah basically I want to add some interactivity to my site, preferably with the one single library I have right now thats very small. But the tabs example doesnt seem to be very easy to amend without testing Im not proficient in, that you point out a few gaps in its access features.
cotsuka and troojg joined the channel