Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the Bricklayer Show. [Laughter] I'm Dave--in the shed--Rupert. With me is Chris--in the office--Coyier. Hey, Chris. How are you doing today?

Chris Coyier: That's right. We come from a long line of people who make rectangles and then put them on top of other rectangles, which used to mean building buildings.

Dave: And also--

Chris: and now means building websites.

Dave: Yeah. Yeah, and we also have this weird [laughter] cult-like apparatus where we do bespoke rituals, wear funny hats, and drive tiny cars.

[Laughter]

Chris: Oh, my God.

Dave: Just kidding. Anyway.

Chris: For the kids out there, you have no idea what Dave is talking about.

Dave: They're like, "What's a Shriner?"

[Laughter]

Chris: Who is Zor?

Dave: [Indiscernible] Yeah. Yeah.

Chris: Okay. Fun. We have Adam on, too. An old friend of the show, Adam Argyle, from the Google. Hey. How are you doing, Adam?

00:01:13

Adam Argyle: I am totally the real Adam. This is not an Adam bot. I'm not automated. This is the real Adam. He's here in person.

Chris: I know. It is expensive to train AI.

Dave: The nice thing about Adam is he puts enough content online. We can just automate his whole entire deal.

Chris: Totally.

Dave: So, it's just great.

[Laughter]

Adam: Deep fake.

Chris: Yeah.

Dave: Yeah.

Chris: You're like, "Build an AI bot of a skater boy who is super chill and knows a bunch about CSS."

[Laughter]

Adam: I did start making a bot where I tried ceding Gemini with all sorts of good CSS because every time I asked Gemini for CSS, which is like the new Bart or whatever -- anyone who doesn't know who Gemini is.

Chris: Yeah.

Adam: I'm like, "Hey, Bart," or Gemini, "make me a cool carrousel." And it's like, "Here. I have confidently given you something that's broken."

And I'm like, "Dang it! It's full of garbage and it's using physical properties." I'm like, 'Hey, can you refactor that? Use logic."

Anyway, I've been trying to make a CSS bot that's kind of good and it's really hard. It's not working, the Adam bot.

Chris: Does that mean you have to--? What's the thing where you train it a little more? Fine-tuning or something? You take a model, and then you give it a bunch of more crap that's along the lines of what you want?

Adam: Yeah, we're preceding it. So, I had three years of GUI challenges, which was pretty modern CSS throughout the whole thing. You know?

Chris: Yeah. Yeah.

Adam: You use nesting. You use logical properties. So, we just gave it three years of content. And then I'm like, "Okay. Every time I ask you a CSS question, reference all of this material and use it to inform your CSS output decisioning."

Chris: No dice? Or what? Work better?

Adam: I mean...

Chris: Meh? Not great?

Adam: It's slightly better, but I mean, yeah, it needs--

Chris: Don't you get the super good Gemini model, too? Isn't there four levels of it - or something? You'd think you'd get the--

Adam: Yeah, Gemini Pro, one million tokens. Yay!

Dave: Hmm...

Adam: [Laughter] Dr. Evil shows up.

Chris: Right, so even your four years of content is still under that limit? Or is fine-tuning different than token use?

Adam: It was over the limit when we first did it. But now it's under the limit once they raised it to a million.

Dave: Hmm...

Adam: I feel like you have to say million and roll the L - or whatever.

Chris: That's a lot of tokens.

Dave: A million tokens.

Chris: Yeah.

Adam: That's a lot of tokens.

Chris: Well, that's too bad. I assume it will get there, though. Doesn't that seem like the general vibe of AI right now is, like--?

Dave: No. No. No.

Chris: "It's pretty cool, but just wait."

Dave: No.

Chris: No?

[Laughter]

Chris: You're just done with the "Just wait"?

Dave: I'm doing scroll snap points right this minute, and there's no fricken' way it's going to figure this out.

[Laughter]

Chris: Yeah. I believe that.

Dave: Yeah.

00:03:20

Chris: I also think I just use Gemini because it's the one that has the longest cookie length. The chances of me hitting that website and still being logged in is high. Every time I go to ChatGPT-4, I'm logged out. I'm like, "Well, too bad then."

Adam: [Laughter]

Dave: Yeah.

Chris: Set your cookie longer. Maybe I'll use you.

Adam: That's funny.

00:03:36

Chris: But we're here to talk about Grid Layout - or kind of. We're talking about Web Layout. It happens to be a little bit of a spicy time. Jen Simmons (on behalf of Apple) wrote a blog post on the WebKit.org blog, which is kind of like the Safari blog, I guess, which said, like, "Help us invent Masonry Layouts for CSS Grid level 3."

Everybody needs to, who is going to listen to this show. We're probably going to talk about mostly this the entire show long because it's interesting. It has drama. It involves huge companies. There's a little bit of head-butting, even though you have to read behind the lines to even see that.

It's interesting, and it has to do with the spec. People need to visually understand what we're talking about, too. It's often referred to as the Pinterest-style layout (to this day). And for a decade, at least, of Pinterest's existence, they used this style. So, there are columns with straight column lines, but there are no row lines. The things that fall into the content just are as tall as they are, so there are no horizontal lines that you can see.

Some people use the word Masonry to describe that. That's thanks to David DeSandro. He made a JavaScript library. He called it Masonry, and it required JavaScript to pull off that layout.

I would credit him entirely for the name of it because people needed a name. He put a name to it. Made this great JavaScript library to pull it off. End of story.

It was weird even then, and I'm intentionally going to attempt (and probably fail) to not say the word "masonry" too many times in this because it may not be how it is finally in the spec. And it's kind of funny because Masonry, as Dave's joke went, is like we're talking about it kind of looks like a brick wall, how the bricks are offset from each other.

But it doesn't really. It looks like a brick wall turned 90 degrees, which is not really Masonry anymore. Masons don't lay bricks like that. That's not what masonry is. So, that's just my little thing.

Why would you codify into language something that's wrong? You know? You're like...

Dave: Hmm...

Chris: I'm not into it. But, hey. You know if it ends up that way, it's not like I'm going to cry about it. I just do think it's like, "Since we're here, maybe we talk about it."

Adam: [Laughter]

00:06:00

Chris: This is what happened is that years and years and years ago, Mozilla just threw it in. They're like, "That's cool. We're just going to throw it behind a feature flag, and we're going to make it part of the grid spec," which nobody agreed to at the time, but it seemed to make some kind of sense to somebody. And the way that you do it is you set up grid template columns, right? Then for grid template rows, you put a keyword there and the keyword was masonry.

What it did, effectively, is it just turned off rows. If you think about a grid, there are vertical lines that are straight. And there are horizontal lines that are straight. They both exist and they're both straight.

What Masonry did is basically just turned off the horizontal lines. There are no rows anymore. They're literally not numbered. There's nothing. You can't pick which row you want something to be on. They're just irrelevant now. And instead, it just placed everything.

Dave: No lines. No gods. No lines; no gods.

Chris: [Laughter] No gods. And then people used it. And I used it, and I put it in a conference. I was like, "Look at this! My card layout that just makes this grid of cards. It's arbitrary content inside. The images are of different aspect ratios. The length of the paragraphs are different. Yet, they fall into this Pinterest-style layout that's pretty cool." All I did was golf clap and say, "That's neat and fun," and I had no particular feedback on it.

But now, the rubber has hit the road. Now it's about to hit the specs and stuff, and people are really actually looking at it. What Mozilla did is largely irrelevant now. It was just an experiment to see. Nobody was mega-mega into it, I feel like. I don't know.

Dave: It was behind a flag.

Chris: Yeah.

Dave: There were also ideas kicked around. I think Addy Osmani did, right? Who had kind of proposed, like, "Maybe we try this in Houdini," and stuff like that.

Chris: Yeah.

Dave: And so there were--

Chris: There was a working Houdini implementation of it, too.

Dave: Yeah.

Chris: But now Houdini is--

Adam: There was. Yeah, the layout worklet.

Dave: Layout worklet, which is a blast from the past.

[Laughter]

Chris: I hate to use the word "dead," but it's dead, right? There's no layout worklet.

Dave: Yeah. I don't know what Houdini's situation is. Maybe Adam has intel. But it's... Yeah.

00:08:07

Chris: But now it's time to get this thing into the spec, right? Apple was first to swing here. There's a post on the WebKit blog by Jen Simmons who writes this long article about, "Give us feedback on this," and Jen pretty strongly argues... I mean agues is a weird word because it's kind of like an argument is one side of a two-sided thing; I feel like it should be this way and not this other way.

But basically, it says this masonry-type thing (or we'll call it waterfall or grid rows off - or something - because, again, don't love the word, but) should be in Grid Layout, like it kind of already was in Mozilla. She's like, "There are so many reasons for this."

One of the reasons is, "Well, you can have columns of different sizes. How cool is that?" Then there are some beautiful demos showing off that.

The thing is just loaded with demos. I mean it's tempting. I wish everybody listening to this would just read the entire post, word-for-word, because I feel like it has an effect on you. I read the whole thing, and at the bottom was like, "Please, please, please give us feedback," which I happily did, and wrote a blog post with my feedback on the thing.

But I feel like she knocked it out of the park with demos. I'm like, "I want all this stuff. I want every one of these demos to be possible," particularly the ones that feel really weird, like, "Imagine this one." On the very left-most column is really narrow. Then the next column over is a little bigger. The next column over is a little bigger.

You're like, "I've never seen that on the Web. That's such a cool, unique look that I've never thought to pull off." Now that I've seen it, I love it and I want to do it.

The way that that panned out is that was, I guess, on April 19th, and it's May 2nd, as we write this. My feedback was like, "Hell yeah." Again, golf clap. Love it. Want to see it. Let's go. You know?

But like I said, it didn't really argue against anything else. There wasn't another way to do this. It was just nodded at that that maybe another way would be display: something else that's not grid. And the word, again, is masonry. But it was like, "What if there's a display masonry instead?"

But it didn't go into what that would be like then. So, it was kind of just like, you know, at least my emotion at the time was, "Yeah. Rock-n-roll, Jen. Let's do it. Grid. Sounds good. Sounds like you've thought a lot about this," or whatever.

But then I didn't dig into whatever the potentially years of conversations on GitHub or whatever that probably had more information about what that other thing was. So, we didn't really know what... At least I didn't know what the other side was saying. What does Display Masonry actually like? Is there a really kind of fleshed-out idea that is not putting this thing in grid?

Rachel Andrew, on behalf of Google, says, "Yes, there is another way. Yes, you're right. It is Display Masonry," and it's a totally different layout type. And it can do every single thing that's in Apple's post: the demos that Jen put together.

It can do all of that stuff. It is not incapable of doing that stuff. And that there are advantages to doing it there. I feel like I shouldn't dig into every single detail because we have lots of different stuff to talk about, but that's where we're at and that's what feels like drama because it's like these are two of the biggest companies in the entire world.

And they're not competing on phones this time. We're talking about rectangles on a website. But it feels like fun head-clashing. And nobody is being rude or anything, but you can just read between the lines here with two posts back-to-back like this with strongly differed opinions. That's about as spicy as it gets... I'd say.

Adam: [Laughter] Nerd spice.

Chris: And I'm here for it. I'm here for it. I don't even know where to start. Why don't you give first thoughts, the first stuff that pops to mind, Adam? Where are you at on this stuff?

00:12:03

Adam: Yeah, dude. I wrote, in 2020, my thoughts on it. I was like, "Hey, I love Masonry. I've implemented this type of design many times for various clients, for friends on their tattoo websites and whatever." I was like, "Masonry is a super cool layout."

I loved that it's intrinsically sized images where the rag is on the bottom.

Chris: Okay. Let's pause for one minute then. Is everybody largely in agreement that we want this on the Web? There was some nod to, like, "Does anybody--? Do we even really need this?"

Dave: Um...

Chris: I mean I guess we're--

Dave: I think you do.

Chris: Yeah?

Dave: I mean Pinterest is basically [laughter] just a David DeSandro Masonry demo. But--

Chris: Yeah.

Adam: [Laughter]

Chris: But I hope there's no debate over it. Okay, let's just move forward with, "Yeah, we need this." But yeah, go ahead.

Dave: The performance of Pinterest with a bunch of pins on it is brutal. It's sluggish. It's hard to resize at a certain point if you get enough pins in there. I think they were having to offload a bunch of stuff, kind of like scroll container - or whatever - where they fire things on and off. What's that called?

Adam: Yeah, contain intrinsic size and content visibility.

Dave: Yeah. Yeah. They just kind of pop things on and off - and all this stuff - and resizing is bad. So, I think we need a native thing on the platform. Jen's demos, for me, are super compelling. Gosh, it's been a while since I've seen a website like that (for good reason because it's just a lot of JavaScript to pull off).

Chris: Mm-hmm.

Adam: Yep. I loved the intrinsic typography where there were no ellipses anywhere because if you've ever researched the hashtag #ellipseisnotacontentstrategy it's really funny because you see all these cutoff phrases that turn into vulgar--

Chris: Truncation is not... yeah.

Adam: Yeah, truncation is... Yeah, truncation is not a content strategy. It's a good one. Yeah, no one at Chrome is saying, "We don't want Masonry." That's definitely not the case.

Yeah, we love the idea of it. We'd like to see it in the platform. There are performance benefits, of course, because, yeah, a lot of times people are going to be recreating the Pinterest scenario, which lazy loads content, which means you're constantly injecting stuff into it, which means it constantly is resizing and reflowing.

It's a pretty expensive concept, so when I originally responded to the concept of Masonry, I was just like, "Whoa, whoa, whoa! This feels more like Flexbox. There are no shared rows." I mean the whole concept of a grid is that you've got rows and columns. That's its whole thing.

Then you have Flexbox that doesn't have rows. It only has one of the two. It's just a single-axis thing.

Chris: Oh, I see. So, it feels more like that. Even though you are still setting up columns, you're doing it on the parent. There are some clear differences. But I can see that it kind of ultimately feels more like Flexbox.

00:14:47

Adam: Yeah, and that was, for me, my initial reaction was, like, "It's just not a grid." I love the syntax of grid. There are a lot of really cool ways to describe things in there. That's where I think we're kind of settling now is that if we did make a Display Masonry, it would be some sort of hybrid between Flex and Grid where you have a concept of tracks.

This is something, too, I think we should talk about is tracks and rag. Rag, if no one knows, this is rag right is a typography term for, you write a paragraph (at least in Latin, in English) and, on the right-hand side, it's very ragged, right? There's no... Unless you justify the text.

Chris: Where the line of text is a little arbitrary. Like, if the word is too long at the end, it just wraps down to the next one whereas, on the other side, where the line starts, it's a straight line. Everything is aligned there.

Adam: Yep.

Chris: Yeah.

Adam: Just like how Flexbox works, right? If you do a tag list and you say, "Display Flex," in Flex Wrap, it's going to rag the items on the right. It's going to look at the intrinsic size of each of the items (just like it would a word) and fold them onto the next line if they didn't fit. At the end, you get a ragged line on the right. It's called rag right.

You can do a Masonry Layout with Flexbox and create a ragged bottom scenario because that's what Masonry is. It's like ragged bottom. Pack things into these tracks. I want to define three tracks, which is a very grid-like syntax to do, but I want to rag at the bottom, which means there are no rows, which is more like Flex.

And so, we're in this scenario where we want to borrow strategies from both of them. While Grid has a lot of the syntax, it doesn't really have the fundamental underlying bones that are needed for Masonry where Flexbox does have the bones. And so, it's like that's what I wrote in 2020. I was like, "Hey, I just feel like it fits Flex more," but I do like the syntax that's coming in here.

Chris: Yeah, and you've gone on... You've said more, right? I don't want to put words in your mouth, but it does feel like your general sentiment is, "As soon as there are no rows, it's not a grid. It's just not. Fundamentally, it's not a grid anymore."

00:16:40

Adam: Yeah. That's just a hard thing to tell someone, right? I feel like there are similarities. It's 99% the same so, yeah, we share 99% of the same DNA with monkeys, but there's a pretty big difference.

Chris: [Laughter]

Adam: I feel like there are a lot of comparisons you could say there. Just because it's 99% the same doesn't mean you should treat them the same.

Chris: Well, in this case it's not even 99%, right? You've used this other phrase that I think makes sense (and I enjoy) called "It's a subtractive spec, then." And I think what that has come to mean for me is that, like, because there are no rows anymore -- let's say we went with putting this in Grid -- that there are all these properties in CSS that no longer work at all or work differently. So, there are properties, as part of the Grid spec, that say, "Hey, what row do you want to put this element on?" Well, that just totally stops working. And that's a little weird, so I think that's what subtractive means.

Now that I've set this one thing one way, this other thing is now meaningless - or kind of bifurcates the meaning of a property. It's like it does this thing under this situation and this other thing under this other situation, which could be a difficult thing to teach and understand, which I will award a point for that. A subtractive spec is a bit weird.

Adam: It's like in code. I always like it when code tells me what it wants instead of telling me what it doesn't want. The same thing with my kids. My kids are like, "I don't want that for dinner." I'm like, "I'm not really interested in what you don't want. I'm interested in what you do want."

And so, here we are trying to define a grid, and we have to memorize all of the things that it can't do once I flip it to Masonry.

Chris: Yeah.

Adam: I'd rather thing about Display Masonry, think about what I can do.

Chris: You think of those things as mistakes?

Adam: Yeah, kind of. Yeah.

Chris: I think of, like, you put a transform on something; all of a sudden, position sticky doesn't work. If you have a display inline element and you try to set its width on it, it doesn't work. If you try to absolutely position something, the parent... it needs to have the positioning context that you expect or it may not work at all if it's just position static.

There's just all this stuff in CSS that's like one thing has to be one way for this other thing to work. It just seems kind of like the nature of CSS. Not that I'm necessarily trying to defend it. But to bend over backwards to make sure that that never happens doesn't seem like a goal that we need to have.

Adam: Yeah, I agree. I like your pushback there. It's really healthy to be like, "A lot of properties are side effects, and a lot of things have no effect." Yeah, you've got display inline on something, right? Then your margins don't work in certain directions.

Yeah, we've been memorizing exceptions for a while. But I feel like, in this particular moment, I'm basically advocating for I don't think we should just solve Masonry. I think there's more to solve.

I keep calling it asymmetric bento because we have bento, and we can do bento with Flex and Grid, but they're very symmetrical bento. They're like equal height bento.

Chris: When you said bento, you mean it's kind of like a thing that you put food in but it has different-sized containers that are everywhere?

Adam: [Laughter] Yeah.

Chris: Sometimes people think of Apple keynotes where they're put how much RAM in one random thing that's big but they say how many--

Adam: Florps.

Chris: --photos will fit on the disk in one little thing.

Dave: Yeah.

Chris: It's a little bit of a design trend, right? I don't quite get it because it looks just like a grid but you're spanning arbitrary rows and columns. Why is that a different layout?

Adam: I don't know. You've got promoted tiles. Yeah, it's like back in Windows 8 days. You'd have these tile hubs, and a hub would have one tile was bigger than the other one, which is bigger than another one, and it created some visual intrigue and some hierarchy in the titles. But those were also in a grid.

You'd have a grid. It was like a 4x4 grid, and the first item would span the two rows, and so it'd be really tall.

Chris: Yeah.

Adam: And then next to it would sit side by... And that'd be a symmetrical bento. But there are a lot of asymmetrical bentos, which is one of the things I love about Masonry. I keep saying the intrinsic size of things, and I like rag. I also like intrinsic sizing. And so, an asymmetrical bento would be one where the height of that first item isn't spanning two rows. The height of that would be its own height. Then you'd have two other items that are folding into the right in their own side.

Chris: Oh...

Adam: So, it's not going to be a perfect grid. It's going to be an asymmetrical bento, so it still has bento-like properties.

Chris: So, it kind of has rows but the rows can... I think, Dave, you called it like they can collapse - or something.

Dave: Yeah, juju it up.

Adam: Juju, yeah.

Dave: Just tuck up.

00:21:00

Adam: The rows are just there. Yeah. Yeah, I'd like to see us solve more than just the Pinterest layout. I think there's more opportunity.

Chris: Is that an argument for breaking this off then? Is than argument saying, "Well, let's not smash everything into Grid when there are different feelings. Let's have Display Bento, Display Masonry, Display Grid, Display whatever."

Adam: Yeah.

Chris: Yeah?

Adam: We're looking at a hybrid scenario, right? This Masonry Layout, you look at it, and you're like, "It's part Flexbox and part Grid." You're like, "Well, then it kind of needs its own thing." it's going to borrow--

So, what's cool is we can borrow the syntax and the things that have worked really good from those two layouts, and then put them into something new that makes it even more simple, makes the spec simple, makes the implementation simple, and then we memorize this new syntax that's just a combination of these two other things that we know and love. And we get these new sort of layouts with these new features.

Yeah, there's packery, asymmetrical bento, and this Masonry Layout, and there are probably more. I'd love to see these sort of weirder hybrid layout systems.

Chris: Yeah, and this is coming from you. That's not really part of either what Apple and Google are saying kind of officially, right? Nobody is talking about bento just yet. That's just an Adam thing.

Adam: That's correct. Yeah, that's just me.

Chris: [Laughter]

Adam: Yeah. I'm like, "Let's just--" I'm like, "Don't sell it all short." I'm like, "Y'all keep looking further than just these layouts."

Chris: Sure.

Adam: The demos that Jen shared are awesome and I love the Pinterest layout, but the concepts here I think extend further and we can solve it in a little bit more of a feature-proof way if we just don't solve Masonry but if we look at the rest of the layouts that are difficult to accomplish.

Dave: Well, in the WebKit demos, they actually have that newspaper one - kind of. So, it's different-sized blocks, and they have different heights. And they all kind of funnel into the right places at the right times and stuff like that. That's another point, too. It's all kind of responsive, right? All this stuff should kind of just lay out based on its own size. You know?

Adam: Mm-hmm.

Dave: That's pretty cool. It adds a bit of a Wild West, like, "Who knows where that block is going to show up in the final screen on your computer?" [Laughter] You know? But it is this kind of Web nature of, like, "Well, if I basically set importance by size (small things are less important; bigger things are more important) then hopefully, it all shakes out fine.

But they had the syntax on that demo in particular, which I was surprised to see, was grid template rows off, which is basically like just turn off grid template rows.

Chris: Right. I was attracted to that because it meant that we could stop saying the M-word.

Dave: Mm-hmm.

Chris: You don't have to name it at all.

Adam: [Laughter]

Dave: Well, and they do have Masonry as well, but--

Chris: Just grid template rows off. That's it.

Dave: [Laughter] But--

Chris: Oh...

Dave: But that creates the kind of column-er layout, like what I think Adam and Google are calling tracks.

00:24:00

Chris: Well, a couple of things. To circle back to Adam's thing saying that it could be a new display type because then it opens the door for even more other display types. There are a couple of things there. One of them is a strength of that is that they can evolve on their own. And CSS has proven, I think, when split into modules that all evolve independently, I think everybody would consider that a success, right?

Adam: Totally. Yeah.

Chris: So, if that's a success, then isn't it nice to keep things smaller, in their own little boxes that evolve independently? That's cool.

I'm going to throw a wildcard here. There's already Flexbox, and there's already another thing that nobody uses called columns. I wouldn't say nobody, but I feel like it's pretty underused.

Adam: Yeah. Glad you're bringing this up. Yeah.

Chris: Yeah, so that's a thing that makes tracks. But it's kind of famously underpowered, right? You can't have one track be half the width of the other track. It's just like, "They're equal size. Too bad."

Adam: Mm-hmm.

Chris: I'm pretty sure. And even spanning stuff across two of them isn't really a thing, I don't think. Or if it is - I don't know - I didn't know that. [Laughter] I expect it's going to behave poorly.

Anyway, it is a thing, right? And you've been able to do it for absolutely ages. Let's say I had 50 cards. I'm going to put 50 cards in a parent that have columns on them and set up the columns such that it'll spread the cards out amongst those columns.

It's like... uh... done? On any given card, you can say, "Don't break in between a column." There's something to make sure that the cards all go together.

In a way, it's kind of like, "Cool. That's literally Pinterest layout. It's exactly Pinterest layout." We've absolutely done it.

They use equal with columns, for the record. So, it solves their use case. But it has this one failing. The failing is that the way that it's tabbed through goes down a column and them up to column two and then down column two and then over to column three. And as far as I understand it, that is considered some holy sin.

Dave: Well--

Chris: That can never be.

Adam: [Laughter]

Dave: If you have 7,000 items, or let's say 6,000 items and 3 columns, you would have to go down 2,000 items to get to the 2,001 item.

Chris: Two thousand....

Dave: You know? It wouldn't zigzag across the page.

Chris: Yeah.

Dave: You'd have to go down a mile to get to the second column.

Chris: Even that, in that extreme circumstance, I still am like, "But is that--?"

Let's say you're a visual, a sited, visual mouse-using person (like we are). Not a problem. Not that that's an excuse. I'm just laying out the scenarios. Or let's say you're a screen reader user entirely. Both of those situations, it doesn't matter because who cares where the visual...

Dave: It is a big, unordered list. [Laughter] So, you're right there. But more content is going to load in.

Adam: Yeah.

Dave: And so, then you're going to get a big old reflow, right? If we load another 6,000, they don't just tack onto the last column. It would reflow all the columns.

Chris: Oh... Is that a bad situation, too? Okay, so let's say that that's bad. Right? The holy sin is true. It's bad news. An alternative is that it starts to kind of... You go from left to right instead. You visit the first one in each column as you tab through it. Then you go to the second one in each column, and you tab through that. The further you go down, the crazier hockey puckier that's going to get.

Adam: [Laughter]

Dave: For sure. For sure. Yeah.

Chris: Why is that better? That also seems bad. I wish somebody would just tell me, like, "Nope, that's bad. It's a holy sin and we're doing it. We're hockey puckin' it." Hockey puck is better - period.

[Laughter]

Chris: You know? I'm just not convinced that hockey puck is definitely better.

Dave: Hockey puck is better.

Chris: [Laughter] Okay.

00:28:09

Dave: No, I had questions about this, and I pulled up the Safari demo to see what was going on.

Chris: Yeah.

Dave: You know what? I'm not seeing the same thing I saw the other day, so now I'm confused.

The way I understand Safari's tab algorithm to work is it basically sorts all elements in Masonry, the grid, by their Y coordinate. Right?

Chris: Mm-hmm. Their vertical placement.

Dave: Like where it appears, yeah, on the block axis, Y coordinate.

Adam: Offset top - or whatever.

Dave: Yeah.

Adam: Yep. Mm-hmm.

Dave: And then if two have the same number there, it goes by X.

Chris: Okay.

Dave: It's like, "Are you to the left or the right?" Basically, based on your reading order or whatever, that becomes... Zero on the X-axis is number one, 1,000 on the X-axis is number two, and 1,500 is number three.

It is hockey pucky. [Laughter] I love that we have this term now. It's a hockey puck, for sure.

[Laughter]

Dave: But I see what they did there. It does create a bit of a confusing thing when you're left-right, or maybe 50 pixels off. I wish there was some tolerance there or something.

I have the Safari demo on my big screen here, 1440p screen, and specifically, this is the newspaper one. I'm specifically talking about the interaction between number 14 and number 13. It's just this weird skip where number 14 is to the left but number 13 comes before it.

Chris: That's the way it is, man. It follows the algorithm, and so be it. Right?

Dave: It follows the algorithm. But hey, I'm not - I don't know. It's not awful, I guess is what I want to say. [Laughter]

00:30:07

Chris: But that's a solution for one situation. But let's go back to a really simple Flexbox scenario. There are four boxes. They don't even wrap. They're on the same row. You could take the fourth box and say, "Order=0" on it or apply zero to the order property of it. It goes to be the first thing in the list.

Adam: Mm-hmm.

Chris: We're also told never do that. Never do it. It's just one of those CSS antipatterns and you don't do it because now the source order and the visual order are wrong, meaning you'll tab through it in this very awkward way that's hockey pucky times two. It's extra bad. It goes to the end of the... You get it. You tab to the last thing in the list and, all of a sudden, the first thing is highlighted. Super-bad, right? I feel like there have been rumors of trying to solve that at a higher level.

Adam: Yep.

Chris: At a level of, like, "Could you set something like tabbing order visual on that parent?" and that way it will tab through one, two, three, four, regardless of what order you set. Which sounds like, "Hey, that's wonderful. High-five. Please solve it at that level." And if that's the case, can we just use that same property then in Masonry or anything else? Just put tabbing order visual on the dang body element and then reorder as your heart pleases.

Adam: Yeah, Rachael Andrew has been pretty key in articulating these, like the problem space, the solutions.

Chris: Nice.

Adam: And they've got great articles on, yeah, what the spec is, what the proposal is, and how to get your visual order to match your reading order. Yeah, it's a big problem to face.

I'm curious, too, with determining the tab order. Does it work also with right to left? If I do a logical directionality or even can I do Masonry top to bottom, right to left, and do a really cool, traditional Chinese Masonry layout? That'd be rad.

Chris: Probably.

Adam: Then does the tab order get fixed appropriately for those also? That'd be super cool.

Dave: I would think it would, right? But yeah.

Chris: You'd want it to, certainly. It would seem like a bug if it didn't. But just to round it out, it's like if you said the CSS column spec then could have different sized columns, you adjusted that spec, and you said tabbing order visual, check, dude. You've done it. You don't need Masonry anymore because you have it with CSS columns and tabbing order visual.

Dave: Mm-hmm.

Chris: You literally could just stop and not do Masonry.

Adam: But you don't get the rag or the intrinsic sizing. You'd have to have some sort of--

Chris: You do get rag. Don't you automatically get rag at the bottom of the columns?

Adam: You do with a Flexbox one, but not a column.

Dave: CSS columns tries to--

Adam: Oh, CSS columns. Oh, yeah. Okay...

Dave: No, but that tries to even out all the columns. You might get a short third column.

Adam: Well, and that one you have to set a height on it, so the condition with Flexbox and CSS columns--

Chris: Right.

Adam: --to get them Masonry-like scenario is you have to clamp the height so that it knows where to start wrapping.

Chris: Otherwise it won't wrap.

Dave: Mm-hmm.

Chris: Yeah, exactly.

Adam: Otherwise it won't wrap. Exactly. So, the problem there is it's not really intrinsic anymore unless somehow you can magically predict, "Given 3 columns of 25 cards, the height is approximately this," and then Flexbox can be like, "Oh, okay. Once I hit the bottom of this height, I'd wrap onto the next."

Chris: It would be nice. It does seem unlikely.

Adam: Yeah, that's what's nice about Masonry. It's just all intrinsic.

00:33:18

Dave: I think it's better than the hacks we've been doing. I do think we need something. I'm looking at the museum demo from WebKit and they actually have the navigation on the right, which is pretty experimental but it's cool because it's like, "Oh, man, that's different." So, that's the number one slot. I don't know how it's placed there, but it is.

You go down through the nav. But then when you're going through items, you focus on the image and then the title to get more details, right? Image, title, image, title. For the first row, it goes along just great. Image, title, image, title, image title. But now we're past the top row of items, and the tabbing is just kind of hockey pucking very bad because the image heights can be different, so the link is basically all based on the card top and not necessarily the link's that I'm looking for top.

Adam: Hmm...

Chris: Oh...

Dave: It's hockey pucking big time. So, we have a good term now to describe this, hockey pucking, and it needs to be very popular.

Chris: [Laughter]

00:34:28

Adam: Wait. Did y'all ever play Peggle?

Dave: Oh, yeah, Peggle!

[Laughter]

Dave: For sure.

Chris: Have you ever been pegged?

Adam: This is like Peggle. You know? You drop a peg in the top. It's like, "Where is my tab going to start? I don't know." Then it just starts bouncing across all these pegs until it gets to the bottom.

Dave: For sure. Yeah, Plinko. Is it like beep-beep-beep-beep?

Chris: This looks kind of fun, actually. How can I download Peggle?

Dave: It's interesting. It's not the... I don't know. This is a tough experience, but maybe the tab order can solve this better than the packing order. Does that make sense? Maybe the packing algorithm and the tabbing algorithm are different jobs, different initiatives.

Adam: Yeah, that's a good... That would be an interesting thing for the spec, so maybe this is like a CSS working group issue. This sounds like a perfect thing for them to discuss. It's like, "Is it Masonry Layout's responsibility to fix tab order?" or is it a CSS property that can be applied generically to anything so that the visual order matches the tab order?

Chris: Hmm...

Adam: That way it's out of Masonry's responsibility in the layout.

Chris: That would be an interesting conversation.

Adam: It can kind of pack as it needed to. Yeah.

Chris: Do those conversations say, like, "Well, we agree that a higher level fix would be cool but that seems unlikely to ship as soon as an M-word type layout could ship"?

Adam: Yeah. Yeah ... happen.

Chris: Browser vendors are there, and they're like, "Yeah, love that, but that feels like two years of work," or something. "We'd like to ship this sooner than that."

Adam: It depends on how much pressure the community puts. Rachel was putting out there trying to solve this with reading order matching visual order and was kind of ringing a gong a little bit and didn't get a whole bunch of people jumping on to rally.

Chris: Hmm... I see.

Adam: I think if we rallied, we could. Kind of like this Masonry call. That's what was cool about... One of my favorite things. Hey, WebKit. Y'all, I love that y'all are out here showcasing something fresh, introducing it, and being a part of this advanced pushing of what's possible. Super cool, and I really love that. I just wanted to share that. I appreciate them doing that. It's refreshing.

Chris: Yeah.

00:36:41

Dave: Yeah. My question is feel like the situation we're in -- the situation that we're in -- are we seeking theoretical purity? Do we want the purely pure thing, or should we just take the thing we have and is kind of half-implemented in Firefox too? What time scales are we talking? If we want to do Display Masonry, the Chrome proposal, what's the time scale to do that versus, like, "Well, Safari has already kind of figured it out"?

Chris: Hmm... It's a good question. There's a possibility that the reason WebKit is pushing for Grid is because it might be... I don't know this. I have no idea. But maybe it's because it's easier, right? Maybe some work has already been done and they're like, "Yeah, let's slap it in Grid because we could ship that like next week." You know?

Adam: Well, yeah. It was like a perfect prototype scenario, right? All the syntax is there. All they had to do was ignore rows, ignore grid template columns, ignore grid auto-flow, ignore all the different placement properties that no longer work because there are no rows. You know? [Laughter]

Chris: For any browser, it would be easier to ship (to just leave it in Grid). Yeah.

Adam: I think so. But what I've seen over the past couple of years is, initially, I was frustrated that at scroll timeline got pushed back and got turned into something else. We watched view transitions get pushed back. We've watched Anchor get pushed back. We've watched a lot of specs that we felt pretty good about our first version and different teams would push back. And it's always made a better spec.

And so, even though we have a cool prototype right now--

Chris: Yeah. You're on team "let's go slower" now? [Laughter]

Adam: Well, not necessarily slower but it's like, "Hey, there's no rush." I mean Masonry came out in Firefox like six years ago and it really didn't massively take off. We have a really good JavaScript version that seems to be quite sufficient except for reading order.

Chris: Mm-hmm.

Adam: I'm like, "Let's do it right. Let's conquer more than just the one that's at the tip of our nose. We'll get performance in there. We'll get a nice hybrid spec that's kind of adaptive and uses the best parts from everything," instead of using only some parts.

It just feels like this platform isn't the right spot to be taking a whole chunk of code and then being like, "Uh, let's only use part of it, here," but I could be way off there. It just feels like I'd like to see us solve more than just this and in a really good, reliable way that we can lean on in the future.

Chris: Mm-hmm.

Adam: Yeah. I think we're going to be pushing its performance potential, especially as we have multiple tracks of different sizes with intrinsic items. We're asking for a pretty expensive layout scenario here.

Chris: Yeah.

Dave: I mean certainly it's just saying Display Masonry extends Display Grid, override areas return null. I mean that's all it is. It's a week of work.

Chris: Oh, awesome. It's a class extension? Yeah.

Adam: [Laughter]

Dave: It's just classic object oriented programming. It takes a week.

Adam: Are you telling me, browser, you can't layout a Masonry Layout but you can 60 frame per second let me shoot things in the head for 5 hours?

Dave: I read that on a post. Is it--? [Laughter] That's the... Is that the Dan Luu post?

Adam: That's Eric's "Scrolling at 60 frames per second," or whatever.

Dave: Yeah.

Adam: He's like, "Yeah, the browser is a game engine. But somehow laying out documents is way harder than actually drawing 3D and--

Dave: First person scroller.

Adam: Depth maps. [Laughter] Yeah.

Dave: Well--

Adam: Yeah, first person scroller. Yeah, that's it.

Dave: Dan Luu had that post. I think it's Dan Luu. But about how all these phones can run Fortnite but can't run a webpage with React.

[Laughter]

Adam: It's funny because it's not funny.

Dave: It's funny because I cry when I read a blog post.

Adam: [Laughter]

Dave: I'll try to find it and put it in the show notes. Yeah. Slow device. There it is.

00:40:37

Chris: Unfortunately, because this is a recorded audio program that this is going to evolve rather quickly. So, we're prepared to be embarrassed by news that comes out tomorrow in regard to this. But it seems like now Apple has got to say something to lean into the drama a little bit. I can imagine (I don't think it's likely, but I can imagine) a scenario where Apple sees what Rachel has written on behalf of Google and just says, "Oh, you can do all that stuff that we laid out in that post? Okay. Sounds good." You know? That's a possible response they could have, right?

It seems like a lot of what Jen is saying is, like, "Look at the stuff that I want to do. This is so cool. Please let me do this stuff." It seemed like you couldn't do it with some other display type. Google is saying, "No, you can totally do all that stuff. That'll be fine. That'd be great. We can totally do that."

I even wrote, like, "Oh..." a little follow-up to my feedback where I said, like, "Well, I assume we'd love a few things, right? Maybe we wouldn't have Subgrid because that doesn't seem as quite the same because you're only inheriting in one direction. It seems a little more unusual."

Tab at Google weighed with, like, "Nope. We'll have that, too." So, it's kind of like you lose literally nothing with making it a different display type. So, it's like what do we expect Apple to say to that? Are they still going to say, like, "Well, no, but it's still better in Grid"? They're really pushed against the wall here, so their response is going to be weird.

Adam: Yeah, I'm interested. It's like there's one big function that does this layout and they're pitching to continue adding more code to the function. We're like, "Ah, but we can make a separate function that does all the same stuff," but then we won't have to manage all of the code forks and all of the ignored properties. We can solve just it instead of unsolved it in other ways.

Chris: Yeah.

Adam: Yeah, we'll see.

Chris: But they didn't say the reason we want this is because it's easier to ship or because... They said, "Because we want to use the power of Grid in it." And if the response is, "You can do all that same stuff with this other thing," it just seems like -- I don't know what there is to say about that. Not that Google is 100% right and they're wrong. I don't know.

Heart of hearts, in a way I don't care because I kind of care about being able to create a cool layout and it seems like I can do that either way in whichever way this shakes out. I'm like, "Cool, I'm the winner." [Laughter] So, you know, hash this out, everybody. Good luck. Don't care.

00:43:10

Adam: You know I like that mentality. I'm a little impartial, too. I'm kind of ... about, "There are no rows."

Chris: Yeah.

Adam: That's just because that's the way I've always thought about how to teach it. You know? It's just like if you need rows and things to fit in it and columns, Grid is just phenomenal at that. If you don't need that... Anyway.., but I love that there is this hybrid. I think that there are tons of syntax crossover.

One of the other reasons that people are... By the way, the CSS working group is leaning towards it being a separate display value, so WebKit is going to have to also manage the working group is kind of leaning that way. That could also change at any time, so who knows.

Chris: They were hoping for a little public sentiment in which to sway that probably. Yeah.

Adam: But some people have been, like, "What about if I have it as its responsive and I want it to be two columns on mobile and then, on tablet, it starts turning into a Masonry layout?" It'd be nice if it was Display Grid the whole time and I didn't have to toggle a display property and some columns and some other stuff. They want to have some shared attributes amongst the responsive application of Masonry.

Chris: Hmm...

Adam: My initial gut reaction was, like, "Well, wait. Custom properties. You can just stash."

If the repeats and the track definitions can be shared amongst Display Masonry and Display Grid, I'm like, then you just kind of tuck these things into custom properties and then you're just flipping a few values.

Chris: That's a cool use case for it. I always thought a good strength of those was that they can represent a part of a value instead of the whole value. That's pretty neat.

My little purist thing, like your purist thing is turning off rows makes it not a grid - or whatever yours was. Mine is like, "Can we stop adding stuff to display?" which might not be a write thing but it always annoyed me that display none is part of the display spec, which is a very different concern. It means don't show it anymore. I don't like that. It bites me all the time that I have to--

I was playing with popups. A brand new thing. Everybody shipped it. Getting lots of claps, right? Let's say you want your popup to be Display Flex. What do you write on, your popup? Display Flex, right? Guess what makes all your popups show up on your stupid page because they're not display-none anymore? So, it's obnoxious.

Adam: You're toggling display.

Chris: Why is that--?

Adam: I know. It's really annoying. I agree.

Chris: It's overloaded as a property. It should be like layout waterfall. Waterfall is a better word. Let's use waterfall.

Adam: Ooh, nice. Okay, Chris. I'll write this down for you and I, a secret syntax we're writing--

Chris: Yeah, that's right.

Adam: --for the new advanced version of CSS to type simpler and it's the good parts. CSS, the good parts.

Dave: CSS New. Why not hidden true and just match fricken' HTML? [Laughter] Sorry.

Chris: Hidden?

Dave: Sorry. Revolutionary concept here.

[Laughter]

Adam: Ooh, nice.

Dave: Fricken' jeeps. I'm going to nitpick Chrome's here. Okay? Display Masonry--

Adam: Yeah.

00:46:01

Dave: Masonry-template-tracks, what the F am I looking at? Why are we inventing a new keyword? I've heard you say tracks a few times, but why not just columns? You know what I mean?

Adam: Well, Grid has tracks also. It has grid lines.

Dave: But when I set my columns in Grid, I don't say "grid template tracks," I say "grid template columns." [Laughter]

Adam: Yeah, the spec is annoying because I think the spec calls them tracks even though the syntax we write calls them columns.

Dave: Okay. Everyone is fired.

[Laughter]

Adam: Well, tracks are nice because they're not access-dependent. A column is very specifically a vertical track. But a track can be a row track. It's generic. It's a more abstract way to talk about lanes.

Chris: But that was on purpose, right? A grid doesn't turn with the reading layout. They stay columns even when you go change the reading mode, don't they?

Dave: Oh, there you go.

Adam: But it's just nice to talk about the concept of rows and columns as tracks being--

Chris: Yeah, but Masonry would turn with the reading modes, probably, because it's one-dimensional. That's probably why it is a different word. Although, I do like Dave firing everybody. Let's start from scratch there.

Adam: Oh, yeah. I'd hope so. Yeah, to change its direction.

Chris: My nitpick on it is, like, don't say the performance word.

Adam: [Laughter]

Chris: We have been told so many times that you can't do this thing in CSS because of performance, and then they shipped :has(). And then we were told you can't have it because of performance. And then we got container queries.

Adam: Then container queries, yeah.

Chris: You're like, just don't even say it. Somebody is going to go to sleep and wake up some morning and be like, "Oh, I know how we solve it," and then they'll solve it and then we can have it.

Adam: [Laughter]

Chris: It's like the wolf who cried performance doesn't land with me anymore.

Adam: Oh, I agree. Yeah, that was the biggest thing on Twitter, people going against the argument. They're like, "Chromium, you even saying that there's a performance implication makes me just want to choose grid because we're so tired of having to worry about that."

Chris: [Laughter]

Adam: That's not valid to most people. Yeah, they're just like you. They're like, "We don't care. You've already told us that enough times and then rescinded, so we don't trust you."

Chris: Well, it's a thing. But yeah, you do hear it once in a while.

Adam: Yeah, very fair. Masonry with template tracks, I like it, though--

Chris: Okay. All right.

Adam: --because it fits my mental model, but I hear you.

00:48:13

Dave: I can support your proposal if you change it to masonry template columns, and then I'm in. [Laughter] But that's the one... this whole thing where every time we invent something new, we invent new verbs or nouns, I guess. But it drives me wild. Anyway--

Chris: I like that min-max will come along for the ride. Doesn't that only work in Grid at the moment? We don't have... You can't use min-max the same way you can use clamp and stuff, right? There's no... You have min and max and clamp, but min-max is not one you can use.

Adam: I like that adoption. I think the syntax from Grid (while very confusing to beginners) it has turned off a lot of people. They're like, "This is complex. Look at the nested functions."

You've got repeat, auto fit, min-max. You're just like, "Jeez, Louise!" But it is super powerful and it's a great algorithm. It's great for defining something that's responsive, so I'm glad we stuck with that.

I don't like that it's Display Masonry. That to me means we're only going to solve the one use case. And I'm like, "No, there's packery."

Chris: Yeah.

Adam: There are these asymmetric bentos where I want intrinsic box-like layouts that are sort of lopsided.

Chris: What I like about the bento thing is... I think you're a fan of rag, right? I'm not anti-rag, but I do want to not rag sometimes (in a way). Even in a way that I would cede control to the layout engine to make choices to not rag. It just has come up with me recently where I just think of a left column and a right column where on the left is big blog posts and on the right is small blog posts. To display five of both, the chance of those ending anywhere near each other is so low.

Dave: You're going to have one huge dingleberry at the bottom.

Chris: There's going to be a huge dingleberry.

[Laughter]

Chris: It's like, "Can you fix it somehow? Just notch up the font size or something?"

Adam: They're no longer called typographic orphans.

Dave: Yeah. Yeah.

Adam: They're called typographic dingleberries. Thank you very much. I'm going to go ahead and take that and run.

Dave: A dangler. That's the PG version, a dangler.

Adam: But yeah, what you're describing is why Display Flex stretches them by default, which is--

Chris: Right. It doesn't--

Adam: Yeah.

Chris: Yeah. It's easy to fight the right rag in Flexbox, but it's never easy to fight the bottom rag because height is just fundamentally different in CSS.

Adam: Yep.

Chris: Height is just--

Adam: Yeah, it's like we want the rag and we want the....

Chris: You don't mess with height, but you do mess with height if it only gets bigger. You know? Like how a line content stretch - or whatever. It's happy to make everything bigger.

Adam: Yeah, min block size is good.

Chris: Yeah.

Adam: Yeah.

Chris: Min block size could work. Yeah. I don't know. Fix bottom rag for me. But just saying the word bento feels like, well, bento boxes aren't rag ever. They're always... All four sides are nicely shaped.

Adam: Yes, they always fit into a box. Yeah.

00:51:11

Dave: I wonder if background image... [Laughter] Remember that guy?

Chris: Yeah.

Dave: Background image, does that help? Maybe you just have a little filler pattern in the bottom there.

Adam: Repeat masonry, yeah.

Dave: That just kind of adds some vibes or something.

Chris: Yeah.

Dave: Empty squares or circles or something.

Chris: I think it's time for the yearly tweet about background-repeat round. I feel like nobody--

Dave: Oh, yeah!

Chris: Everybody forgets that and then is surprised once a year to learn that you can.

Adam: Yep.

Chris: Yeah.

Adam: Clutch in a border image property.

Chris: Fun.

Adam: Yep.

Chris: All right. So, we've picked on... Did we pick on everybody equally?

Dave: I think so.

Chris: I don't know. I know we didn't have Apple on, and we didn't have either Jen or Rachel on, despite them having been on the show before. But this came from just, like, we were discording it up, and we were like 80 messages deep when we were like, "We should probably do the podcast."

Dave: The Safari demos are incredibly compelling. They're very cool to see. I saw that newspaper one specifically, and I was like, "That is fresh. I haven't seen that in a long time and I would just love to see the New York Times looking like that," or something like that. You know?

Even just the idea, I can just paratroop a block that is ultra big and it just fits. And everyone else says, "Oh, I'll adjust to that guy, the big boy in the town," that is cool to me. I would like that.

I'm kind of on team whatever gets this done. [Laughter] You know? But I think I agree with Chrome. Let's at least take a breath and make sure we do it right before we yeet it out into cyberspace.

Chris: Yeah. I mean that's what people are saying, too. We'll see what reality is. It's one thing to say, "Oh, this can do everything that Grid can do." Then if you say that and then it gets public sentiment going that way, and then we're a year into it and they're like, "Well, except for these three things," we're going to be like, "But you said it could do everything Grid could do! Goddam it!" You know? [Laughter]

Adam: Yep. The rug pull. No one likes--

Chris: Yeah. [Laughter]

Adam: Yeah, the over-promise, under-deliver. Yeah, that's the no-no. Yeah, I don't want to do that.

I do love that Safari, though, put the fire under this again. That was cool. Yeah, bring these things to the surface. Let's discuss them and get them in the platform.

Chris: Yeah, we'll see.

Adam: Yeah, it's really cool.

Chris: Should we do the ShopTalk thing where I put--? The day we're recording this is May 2nd. It should go out May 6th, which is pretty fast for a lot of podcasts, I feel like, and just a little slow for hot news. [Laughter] You know?

Adam: [Laughter]

Chris: I'm always surprised, though.

Dave: Yeah.

Chris: The YouTubers who can get out just great videos on the day. You're like, "God, what were you doing? You woke up and you didn't even know that was a news thing and now there's a thing.

Dave: I think it's you have a video editor in Poland who--

Chris: Just crushes it. Yeah.

Dave: --works on the other time zones.

Chris: But I'll put May 2nd, 2025, on the old calendar, and we'll just--

Dave: Ooh... All right.

Chris: We'll check in. We'll check in and see how is Grid Layout doing or how is the M-word. I have to write Masonry. Otherwise, I'll forget.

Dave: I do think we have a claim chowder coming up. I was looking through my... Oh, let's see.

Chris: Oh, come on. What is it? I have to know.

Dave: Oh, on May 17th of 2024, Andy Bell (I'm assuming because it just says Andy) says client-side frameworks will be completely redundant by May 17th of 2024. It's coming up.

Chris: Wow!

Dave: So, let Andy know.

Chris: Client-side frameworks of any kind? Maybe he was really hot on Web components. I wonder what the--

Dave: Maybe. Yeah. When did we create this? I don't know that answer either. [Laughter] I don't have that data. But anyway.

Chris: Yeah, I guess we should probably put a little metadata on our claim chowders.

Dave: But no, this is interesting. I think this is a cool direction for the Web. It would be nice to have some fresh demos.

Chris: I want people to overuse it. I want to be sick of this layout. [Laughter]

Dave: Well, I was wondering. Maybe we need help from the CodePen army to make some demos of cool shit you can do and then just see, like, push the limits. Let's try to find a limit before we ship it in a browser.

Chris: Hmm...

Dave: That would be cool.

Chris: Can help. Can do - somehow.

Dave: Even if the syntax... If the syntax changes, that changes. But let's just have a play.

Adam: Yeah. Go wreck it. Go demo it. Go have some fun. Break things.

Dave: Yeah.

Chris: All right.

Dave: Well, Adam. Thank you so much for coming on the show. For people who aren't following you and giving you money, how can they do that?

Adam: They can give money to a local charity that they enjoy, whether it's helping out goats or people learning to code or whatever it is. Put your money there. I don't need it.

I'm on social networks, but mostly just go to my website nerdy.dev. You'll find links to other social networks, and that's where I kind of centralize my juiciest posts. You'll get nonsense on Bluesky.

Dave: Yeah, well, and it's worth a follow. Your blog always has... It's stuff you tweet, but if you're not on that day, you miss it. But you have some really awesome, cool Web tech that's coming up and a lot of Bramas demos and stuff like that, too. Anyway, it's all very good, so thank you very much for posting that stuff.

Adam: Yeah. Thanks for reading.

Dave: And thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. That's how people find out about the show.

Follow us on Mastodon. That's where we hang out. And then join us over in the D-d-d-d-discord where we actually hang out. That's patreon.com/shoptalkshow. Chris, do you got anything else you'd like to say?

Chris: ShopTalkShow.com.