#dev 2026-06-30

2026-06-30 UTC
grufwub, [pcarrier], cotsuka, ax5623, dabeglavins5, claudinec, Maxpm, fluffy and [Murray] joined the channel
#
WinnerWind using dev tools,is it possible to see which child in the HTML tree is responsible for expanding its parent? im having a difficult time making a CSS marquee play to the rules and not expand the .window container it is in
#
tdrayson do you have a link winnerwind[d] ?
#
WinnerWind a link to the site? unfortunately no ^_^`
#
[Murray] Just double-checking: are you using a `<details>/<summary>` element combo or doing this via some kind of JavaScript event? (Or secret third option I'm currently forgetting 😄)
#
[Murray] In Firefox DevTools, typically the elements in the DOM that are having some form of repaint (attribute addition/removal, class changes, etc.) will flash yellow when they update, which may help. Certainly if its doing something like adding/removing ARIA or `open` attributes
#
WinnerWind [Murray]: im not doing this via <details> or a <summary>. This is a div inside of a bunch of divs, and its not done at runtime
#
WinnerWind that's a useful tip! im using that to debug my clickable callouts
#
doesnm saying untranslable wordplay
saptaks, ax562 and dabeglavins5 joined the channel
#
[Murray] @WinnerWind: thanks, yeah that's what I was trying to understand 😄 Can't really visualise what you're trying to do tbh, but hope it helps in some way.
#
tdrayson usually you need a max width on a container <div>, otherwise all elements will expand to the space available.
#
tdrayson [edit] winnerwind[d] usually you need a max width on a container <div>, otherwise all elements will expand to the space available.
dabeglavins5 joined the channel
#
[Murray] oooh you're talking about expansion in terms of fitting the width? Yeah I was well off in my understanding 😄 In that case, the short answer is no, though I personally like just deleting nodes in the DOM via Dev Tools until the parent snaps back to the expected size; typically gives you a solid idea of what's causing it
#
[Murray] but as @tdrayson says, likely a sizing issue. Note that if the container is no longer block-level (e.g. its now Grid, Flex, etc.) that can override literal inline sizing constrains like `max-width` or `max-inline-size`
barnaby, ZodiacalComet, ax562, ax5623, saqwyi and BretHudson joined the channel
#
WinnerWind tdrayson: i didnt know max-width was a thing!
#
WinnerWind that fixed the issue
#
WinnerWind i just set a max width and the container started overflowing (as i asked it to)
#
WinnerWind so yeah, this is solved! going to be using these max-x properties a bit more now
#
WinnerWind [Murray]: got it! frankly i still don't know how exactly the different display types work so im sticking to the default and trying to work around it (using divs and alignment)
#
WinnerWind my layout isnt terribly complicated
#
WinnerWind also that tip of deleting elements until the container snaps to the required width is also pretty smart. used that to diagnose and figure out which container was causing the massive jump in width
barnaby, [snarfed] and [mikemai2awesom] joined the channel
#
[mikemai2awesom] TIL: typed arithmetic has support in modern Chrome an Safari, no Firefox yet.
#
[mikemai2awesom] ```line-height: calc(8.5rem / 8rem * 1em);
#
[mikemai2awesom] letter-spacing: calc(-0.0625rem / 8rem * 1em);```
#
[mikemai2awesom] mixing units in your calc division will work in the near future.
[mikemai2awesom], chr0m4, barnaby, Saige_Leah and doesnm_ joined the channel
#
chr0m4 this may be one of the coolest things I've coded, ever: https://raccoonisland.social/@chroma/116840658756185559
#
chr0m4
#
chr0m4 repo: https://git.chroma.cafe/marceline.git/
#
chr0m4 listens for private mentions from me and my wife containing a YouTube URL. It grabs the link, downloads the audio as an .opus file, tags it using the MusicBrainz API, uploads it to my VPS, and then tells Navidrome to rescan the library.
[Joschi_Kuphal], [KevinMarks], ax562, sp1ff and [rose] joined the channel
#
[rose] Random thing I realised recently... It's probably obvious to everyone else, but just in case:
#
[rose] You know when you localise a website but use the same CSS file for each page, yet there are sometimes small differences required?
#
[rose] You can use the html language to override default values.
#
[rose] ```:root{
#
[rose] So in my own example, the first column just HAS to be a bit larger to accommodate German. So I did this. Root being the default, for English, and the other defines it for German. I'll also be able to use similar methods to make other necessary adjustments for other languages. Previously I would have defaulted to adding a class to root or something. But this is what happens when you're self-taught: gaps!
#
[rose] --label-col: clamp(96px, 11vw, 180px);
#
[rose] }
#
[rose] html[lang="de"] {
#
[rose] --label-col: clamp(130px, 13vw, 220px);
#
[rose] }```
#
[rose] anyone wondering why label-col is defined up there, btw... it's because it's for a client who may later adjust it, and at the very least will want me to be able to show variations live.. I've put anything more significant at the top as variables so it's easy to get to.
[rose] joined the channel
#
[rose] @chr0m4 wow that is really cool!
#
[rose] May get into trouble with the copyright stuff though. Dunno.... But yeah, it's cool. 🙂
Saige_Leah and sp1ff joined the channel
#
gRegor Nice, [Rose]! I'm still getting used to attribute selectors like that, pretty cool!
ZodiacalComet joined the channel
#
[rose] Me too apparently... 😄 (on the getting used to it)