#dev 2025-01-27

2025-01-27 UTC
bterry, grufwub, gRegor, gregsarjeant, strugee_ and [aciccarello] joined the channel
#
[aciccarello] vinceaggrippino, I have a block in my 11ty head template that only renders on the homepage. If the auth endpoint is the only thing like that you probably wouldn't need to care but it is possible with an if statement checking the URL.
[morganm], glacier, [pfefferle] and gRegor joined the channel
#
capjamesg[d] [Joe_Crawford] You may appreciate https://flexboxfroggy.com/
Guest6, ttybitnik, cambridgeport90, jbrr, [Murray], nemonical and [tantek] joined the channel
#
[Joe_Crawford] capjamesg[d] we looked at some similar games last FrESH — so yes!
#
[Murray] CSS question: anyone have a piece of magic that will take a row of elements and flip it to a column the moment the row _exceeds_ the available space (viewport is fine; it's basically always full width of the page)? The catch is that I have no idea how large the elements are going to be, so I can't use a set pixel value as the trigger.
#
[Murray] (what I want is a way to use flex-wrap so that if any item wraps, all items take 100% width, but I don't think that's possible)
#
[tantek] ^ that sounds like a useful pattern!
#
aaronpk That sounds like the Flickr layout pattern?
#
aaronpk https://code.flickr.net/2016/04/05/our-justified-layout-goes-open-source/
#
[Murray] I was hopeful that container queries would work, but the container (understandably) loses access to the intrinsic sizing of the contents, so it just doesn't know if the contents are too big or not.
#
[Joe_Crawford] How are the sizes of the child elements set? And is it a matter of knowing there are more than x elements?
[snarfed] joined the channel
#
[Murray] There is no set width on the child elements, that's the issue. They're "just" text, but ultimately could be translated into any length, and should not text wrap internally
#
[Murray] I know I can calculate the total width using JS, but I'm trying to avoid that (a "magic number" is probably better in this specific instance)
#
[Murray] it just _feels_ like this is a common request and something in the new bag of tricks should allow it 😅
#
[Murray] y'know, something like if an element in a Flex container has wrapped, it picks up an attribute of `:wrapped` and then you could do `:has(:wrapped)` and set all child elements to `flex-grow: 1` and `width: 100%` or something
#
[Murray] hmm actually, can I use container _height_ I wonder. I know what the rough height should be without a wrap
#
[Joe_Crawford] Failure of my imagination i'm having trouble imagining arbitrary text hunks as the basis for a layout like that. But also, there's flex-direction: row vs flex-direction: column which could do the switch rather than grow. still need something to set the widths of child elements to 100%;
#
[Joe_Crawford] you don't indicate how the height of the child elements is defined or controlled
#
[Murray] to be clear: this is a sequence of tab controls, which should be vertically stacked if they cannot be horizontally aligned fully (maybe that helps with mental model)
#
[Joe_Crawford] ah. I was imagining arbitrary paragraphs with maybe user supplied text
#
[Murray] no, but different parts of the site use different phrases, some quite short and some quite long, for the tab controls. And we may need to support other languages like German, where the length is going to balloon
#
[Joe_Crawford] I feel like if the tab text strings are known one could add up how many there are and infer a max width in ch units (the text widths + gaps between + margins) -- create a media query based on that that triggers the. change. It's what I can think of short of JavaScript.
#
[Murray] Yeah, as I say, their values are dynamic so that won't work 🙂
#
[Joe_Crawford] If the layout is `nav > label` I'd be looking at things like `nav:has(label + label + label + label + label)` which is dopey but I've been playing with using it to set layouts based on scale. Could also do nth-child or nth-of-type in that context. But the short answer to your wish is "no."
#
[Joe_Crawford] And when I say scale I mean "count of child elements"
#
[Joe_Crawford] here's an post about your precise wish. https://ishadeed.com/article/flex-wrap-detect/
[ilovecomputers] joined the channel
#
jeremycherfas !tell [Murray] Is that what Every Layout calls The Switcher? See https://every-layout.dev/layouts/switcher/ I'm not sure how I can give you access to see it for yourself, but the idea is a row of horizontal divs that becomes a stacked column below a certain width.
#
Loqi Ok, I'll tell them that when I see them next
#
aaronpk ok video post-processing workflow progress... I can now upload a video of arbitrary length and it gets uploaded in chunks, when it's done uploading it will start post-processing to create 3 thumbnails from various parts of the video, a scaled down 360p version, a transcoded h264 at full resolution, and an HLS segmented version
#
aaronpk now i need to figure out how to hook it up to the UI
[schmarty] joined the channel
#
[schmarty] niiiceee
#
[schmarty] does this all work through a browser??
#
[schmarty] (the uploading bit, i mean. i assume the transcoding and segmenting is all server-side)
#
aaronpk Yeah there a nice resumable large file upload library https://tus.io/demo
#
aaronpk it has a go backend that supports extending with event hooks. There's also other backends if you want to integrate it more closely but I think I'm going to stick with the go version
#
[schmarty] ah yeah that's why i was seeing that floating around.
#
[schmarty] very exciting!!
#
[Murray] [jeremycherfas] thanks, I actually own Every Layout, so no need to worry about that 🙂 Unfortunately, this falls into the same trap: it relies on a manually defined, constant breakpoint (honestly, I've never been entirely clear on how the Switcher is _better_ than a media query and flex direction for that reason)
#
jeremycherfas I use the switcher and set a width that makes sense in the context of my layout. I think the reason they think itis better is only that it doesn't require a media query, but I am a complete Cargo Culter at this kind of thing.
#
[Murray] sure, but it's reinventing a media query (or, I guess specifically, a container query which, to be fair to Heydon, did not exist when Every Layout was written, so that probably answers my own question 😄)
ttybitnik joined the channel
#
[Murray] there's also this slightly mind melting technique from Kevin Powell which I've been exploring, but it also suffers from setting pre-defined widths in some way: https://www.youtube.com/watch?v=LEkFckg7sfw
fusil, jak2k and gRegor joined the channel
#
doesnm carrvo[d]: can it be installed on shared hosting? (I don't have access to apache.conf). htaccess are enabled
#
carrvo[d] Yes, .htaccess can do everything the static config can (with the proper overrides). I designed it specifically for the recommended static config for a few reasons so there may be a few adjustments.
#
carrvo[d] I would love if bugs are found so they can be fixed!
#
carrvo[d] For example, I decided to use `Alias` instead of `DocumentRoot` for everything, but you may not find that matches your flow.
btrem and jak2k joined the channel
#
btrem To submit to IndieNews, I'm apparently supposed to include an <a.u-syndication> link in the h-entry. Does that mean a <link> in the page's <head> does not work?
#
btrem I ask because my current setup uses <link> for syndication. So I'll have to adjust my plumbing to add an <a> instead (or in addition to).
jbrr joined the channel
#
aaronpk the html tag shouldn't matter, but it will need to be in the parsed microformats h-entry
#
btrem Ah nuts. Pretty sure my h-entry class is on the body element. :(
#
btrem goes to check
#
btrem Yep, that's where it is.
#
btrem Ah nuts.
#
[Joe_Crawford] _I then wonder if parsers accept `h-entry` on the `<html>` element_
sebbu2 joined the channel
#
btrem [Joe_Crawford]: I'm pretty sure they do, but still I need to change my plumbing. Which isn't something I want to do atm.
bret joined the channel
#
btrem I'm templating in nunjucks, and looking for a way to process a variable that might be string, might be an array, might be an object. Anyone know of an article that shows an efficient way to do that? My if is string elif etc. is a bit unwieldy, but maybe it's the only way.
#
[aciccarello] This looks like it has some answers https://stackoverflow.com/q/29844865/4252741
ttybitnik joined the channel
#
[aciccarello] Apparently there are some undocumented conditional checks though I've never tried them like {% if foo is string %}
#
btrem I have successfully used if foo is string, but I also tried if foo is sequence and got an error. I suspect because nunjucks is (to simplify things a bit) a javascript port of jinja, which was AIUI designed for Python. Python has sequences, js does not, hence the error.
#
btrem And as the SO post explains, the tests are undocumented in nunjucks. So I'm not sure what I can and can't do. I'm going to try if foo is array and see what happens....
#
btrem ...alas same error.
#
btrem But if foo is iterable /does/ work. I guess I can use that, but the code is still unwieldy. When something is either a string or an array, I use a filter to conditionally turn it into an array. Wonder if I can do that if it's an object, turn it into an array of objects. Off to check.
#
btrem sighs
#
btrem foo is iterable does not throw an error, but it doesn't seem to recognize that a variable is an array. Or maybe I'm doing something wrong. Getting frustrated with the lack of docs in this regard. Maybe I should try to document it in a PR.
#
carrvo[d] Unfortunately I don't know Nunjucks to suggest anything 😦
#
btrem It's /mostly/ like jinja. But the built-in tests are undocumented within nunjucks. They /are/ documented on in jinja. It appears that some of those tests were not ported to njk, which as I said makes sense. (Python has sequences, javascript does not. I just wish I knew which other tests were ported. Without testing, that is. ;-)
#
carrvo[d] I've only used Django, but might remember whenever I might use templates again...