Programmatic CSS. Where is this going?

[00:00:05] Nathan Wrigley: Hello and welcome to the No Script Show. New CSS specifications are coming faster than we can understand them. If we tried to cover them all at one time, we would probably not be able to see the wood for the trees. So instead, we're going to step back and see if we can understand the overall direction.

As always, making this show hang together, doing all the work really is. David, how. I'm good.

[00:00:31] David Waumsley: I'm, the reason for this episode really is that I'm starting to feel a bit overwhelmed by all of this kind of programmatic CSS that we're starting to see all these if statements and that function and all this stuff.

I can't keep up. And I love, I've just got into CSS and I, really love it and I've found a way to make it simple. And now my head is mush again.

[00:00:52] Nathan Wrigley: Can I ask you a question? Yes. how good were you at. Programming, because I always, it always bamboozled me. I could always see that there were people significantly better at retaining the concepts after reading a page in the day when you and I learned everything was in a physical book with pages that you would turn and, and I would remember getting to the end of whole chapters thinking I'd got it, and then restart the chapter.

Think, oh. Actually, I've forgotten more or less everything that happened. I was never good at programming, basically. So I could see why maybe this would cause you, some level of fear.

[00:01:27] David Waumsley: I. Yeah, and it's also, but because I did a little presentation for your thing that you do, this page builder summit where I've been thinking, talking to page builder users like I was and trying to encourage 'em to look at CS s and how wonderful it is and you realize that you've got all this kind of, if you try and pick things up from YouTube videos, now you can really get lost.

'cause everybody's excited about all this new kind of dynamic stuff that's coming into CSS. So you could really. Get lost in all of that, which I'm starting to do. So I need this in a way, partly because if anybody does see that presentation comes here, it might be a bit of a follow on from what was tried to say there.

But also, it's about, me. Try just getting my head straight again, if you like, and recapping on what we've been doing with this show.

[00:02:13] Nathan Wrigley: Yeah. I guess if you were to look at it from a long way off, if you were to have distance and perspective, better to have. Things to learn, then it's stagnating.

Although that's, it's easy to say, but better to have things that are happening, exciting things, difficult maybe, but better that it's, that it's moving on and pushing forwards and getting more complicated and therefore the options available to, developers, the youths, David, the young ones who are gonna come along and.

Just grasp it in a heartbeat. it's, better, it is better for the web in general. okay. that's the message here. do you want me to put the Yes. Just have the notes

[00:02:54] David Waumsley: that'll help me Yeah. To wander through this Yeah. So if we can start on just what's changing at the moment and basically this, because I'm saying programmatic language, and I see other people in groups and stuff saying, oh, so CSS is becoming a programming language now, and I think there's been a long debate.

That was a good CSS Tricks article actually, about that, where I think, was it Chris Coyer? Getting very frustrated when people say, is that a program in language and. I know others do. Hayden Pickering, is quite sharp with people who's, who say that it isn't that CSS isn't a programming language 'cause they say, yes it is, works on a computer.

Okay. So

[00:03:36] Nathan Wrigley: that definition, it is a programming language, but,

[00:03:39] David Waumsley: it is in that way. But if you Google it now, which I did just before the show there, it says, no, not really. It's a presentational language. Okay. so you get into this for ages, but I think the key thing is, we've mentioned this on the show before, but.

there is a big difference I think, in code, and I think this is the thing I've had to get my, there's a sort of. A feeling that all code is difficult, which I think is why people will be attracted to page builders as I was when code when CSS appeared difficult to me. but I think there is a difference between the declarative languages of HTML and CSS, where you only get to hint what the browser does, and the browser has to protect the content for the users.

So you can be bad at coding with. HT ML and CSS and the browser knows to ignore all the rubbish shoes stick in there. And just display everything it can, which is not the case with the traditional imperative languages that because they have to work, someone has to have control what they coding via logic, which is what I'm not very good at.

I'm No, they, that's, that encapsulates it perfectly.

[00:04:47] Nathan Wrigley: Yeah. Yeah. That's me too. Yeah. Yeah.

[00:04:49] David Waumsley: Yeah. And they were, and there was a JavaScript and PHP on those, on that, and I. but what's interesting, I think for me, this is my understanding of it, when we get to the programming language we're talking about, and I think what we're seeing here is the stuff that's been introduced that we'll call a programming language is about still sticking with the declarative stuff.

It's more about giving better hints Yeah. To the browser in the, fact that we now have. Intrinsic web design where we need to tell the, browser to do some mass on our behalf to display things in a way that we want them. No.

[00:05:25] Nathan Wrigley: Yes. Yeah. So, in, yeah.

[00:05:28] David Waumsley: no. That was basically it. I am, my own, trying to get my head around this is that CSS is still this simple declarative language where we say, we'd like this to be read, but okay.

Browser, if they use us, says they, want a forced color on it. You, don't give 'em our red, that's fine. I can live with that. It's still that sort of simple thing which we can deal with as communicators. I think intrinsic design. Requires because of the programmatic side. What Jen Sim said in the very first like episode we said about this, we're now programming a flexibility model for the wear.

But I think that the demands of all the different devices we have to serve now means that we need that kind of stuff to be in our CSS.

[00:06:11] Nathan Wrigley: Yeah, I think it, what's been really nice about CSS is it has been really forgiving. If you do something that basically doesn't work, it still works, nothing will collapse and you're not going to be, at the end of the road if you do something wrong.

Let's say for example with, PHP in the CMS that I use WordPress, then there's a total catastrophe. Everything just breaks. And so it's been very forgiving, but also it's limiting. And so throwing in components of. Programmability. it's not really programming, but it's got little aspects, little hints of programming.

Nothing presumably is really going to break. It just won't look the way you want it. So it's still presentational, but I think this is the way it needs to go. the shame though is that I'm now elderly. learning all these new things will probably be something that I will do from afar. It'll only be at the point where I actually need to use it.

It will be interesting though, because. You were mentioning about page builders and things like that, it will be interesting to see if it is possible to force this into a UI of a page builder at some point. I'm struggling to see how that would be possible given how things work at the moment, because you've got this really limited palette of things that you can do in CSS, and so page builders can pretty much do all of those.

But now that we're moving to a much more kind of ephemeral. You don't quite know how anything's gonna look given any screen size. You, have some intuition, but it's not quite gonna be there. It'll be interesting to see. How that works. 'cause view ports and widths of view ports and all of that is going, out the window.

Exactly.

[00:07:54] David Waumsley: Yeah. So I think that's, I mean I think it's, the problem with the CSS is never one thing and I think even more so it's, now two things. So I imagine now if I'm not good at. logical programming and, the mentality you need to have that it probably doesn't matter because there are other CSS experts who make generators that I can use.

okay. As long as I understand how they work and what values need to be changed, that's probably all I need to know because at the end of most of the hard work is done by the browser these days, isn't it? Yeah. We're just telling it how to do. it is hints again to the browser. So it does all the work.

[00:08:29] Nathan Wrigley: Have you become an aficionado of, these generators then? Have you got a nice long list of generators to achieve particular things? is it a case of you have to go and Google to find the generators or are they all housed in one place? Is there one authority that seems to be really good at creating those kind of generators?

[00:08:51] David Waumsley: Yeah, I think this,

[00:08:53] Nathan Wrigley: I think if

[00:08:53] David Waumsley: we, otherwise we end up, there's a danger of going back to the bad old days of learning CSS where you go to stack overflow and Right. Pay somebody's solution into your sheets. So I think I am very, there are things like, utopia as a. Fluid typography, generator is the thing that I start off with that again, that may have to change.

There's sort of things that impact on that. We get trigonometry coming to CSS as well, which means that you could, rather than have this. Absolute linear, straight line, linear change from your font sizes, you could tail that off or whatever with this. So there, there might be changes that happen with that.

okay. mi and Suzanne talked about fluid typography. One of the big bugs that she's got at the moment is that she likes big font sizes. on websites. But if she sets her own screen to a big font size, these will relatively grow. Yeah. So some, of the sites that she likes who are big font sizes, she makes them look a bit too big.

Okay. If she gives, that's her preference. Anyway, sorry. Yeah. No, It's

[00:09:55] Nathan Wrigley: okay. She's an expert.

[00:09:58] David Waumsley: I know. But yes, up to now that's the best thing and that's what she uses as well. Yeah. Utopia. And reason I like that is because the people behind it Clear Left is the company behind it. We've got Jeremy Keefe behind it.

He's somebody who's, at least has to go through the process that he wrote. The more definitive guide on HTML five, so somebody who, you can trust to yeah. Know what's going on in the wc. So I'd be very cautious about any generator there. But I think, we'll actually, I'll move through some, I'm jumping so far ahead on this.

I'll, yeah, it's okay.

[00:10:32] Nathan Wrigley: let's reign it back in. And should we go back to our document on the screen? yes. So if you're listening to this, then it's on the screen.

[00:10:41] David Waumsley: Yeah. yeah, so we'll just talk a little bit. Yeah. one of the things I was doing that presentation for your event there, and I suddenly thought, am I sounding like the W three C has got a plan or something in mind with the direction we're going?

Because I don't think they do because I think when we are looking at CSS direction, we always, it's always unknown because it's always done by consensus with the stakeholders that have been involved.

[00:11:06] Nathan Wrigley: Now that's the case with anything like this though, isn't it? You see a direction because it's had a trajectory.

When you look over your shoulder, you know it's gone from there to here. So it must have a direction from here to somewhere in the future. And of course, it really doesn't, there isn't that kind of times arrow approach to it. but it, because it's a more of a community based. project, but there must be some threads that we can pull out of, okay, it's very likely to go in this direction.

I would've thought, but no, there's no way of, actually, no. maybe in the very near term we know, but in the, I think in the decade long term, no.

[00:11:47] David Waumsley: Yeah, I think we can, the one thing about reconnecting with the W three C and what's going on there and the debates there, is that you do get some hint about.

You, you do know the future to a certain degree. At least you know what's coming to browsers, right? what's been agreed on. So in line, if statements is something agreed on, but it's not appeared in our browsers, a lot of stuff is appearing very quickly. Yeah.

[00:12:10] Nathan Wrigley: Tsunami is coming, David.

[00:12:12] David Waumsley: Yeah. But also you could see the discussions and I think the big discussion has been as getting right back, as we've been saying on the show for to the beginnings again and this HTML first, and then, it.

The web always has to protect the content, always. So we style around it and now everything has to be fluid. We have to start getting back that way. And it's very difficult if you've been in, what I've been doing is creating visual designs for clients with a page builder to switch, switch that entirely upside down because you've always started with the static design in your head of which you're trying to recreate with the, so you really having to flip that.

Greatly to be able to get. And I think once you do that, you line yourself up with what as the conversations that always come out of the W three C. So you know that we are heading that way and we know that technically we have to head that way because how else will we accommodate all the browsers if all the different sorry devices.

Yeah, I know what you mean. yeah. So I do think we get caught as well. And the direction's difficult. 'cause I think there's, I, put a little note here just saying that W three C. did I write it? Yeah. Oh, it's not in its own point, but the W three C thinks about long-term problems. That's its mainly focus, so it's very cautious where the commercial world thinks more short-term solutions all the time.

So you have this, yeah, I think you have this tortoise and hair situation going on all the time where, you know, In a time where CSS hasn't sorted out problems of being responsiveness, if you like, in the early two thousands and tens. So I think page builders have grown very strongly because they had a much better short term solution for the fact that we needed to, Sort out these designs. We did it. Yeah, Just what I mean. And I think it had its time where it solved the problems, but now I think it's flipping the other way that the tortoise is catching up because they've thought it's taken a long time to get grid out there. It's taken like 10 years of trying to get grid, a proper layout system and it's taken all this time, but I think now it's started things really speeded up again.

So I think the tortoise. The W three C in my mind is overtaking the hair, which has been a lot of our research

[00:14:20] Nathan Wrigley: solutions. Yeah, it's interesting as well, because if you think about it, we are trying to put pixels on a page at the end of the day. That's it. And we've had, what, 20 odd years of trying to get this right in air quotes.

I, I wonder how much innovation there actually is. how many, how long can we keep innovating in putting pixels on pages in interesting ways? And maybe that's just the problem. For the last 20 years, there have been ways to innovate, okay, we want this. Kinda masonry style layout, or we want things to overlap each other.

And then, when we narrow the viewport, we want the text to grow or the text to shrink, or things to just collide with each other or disappear. You get what I'm saying? But the point being, can we continue to innovate the way that we do layouts? And if that's not the case, if there is an end to that road.

Maybe that's where we're at with the WC three. sorry. W three C. Maybe it's because there is a more of an end in sight. There. There is a limitation to how innovative we can be with our layouts and it's taken the commercial things. So push, demonstrate what might be possible and now the standards based approach can kindly finally catch up.

Because there isn't too much runway left, if That's, I don't know if there's anything in that really, but

[00:15:43] David Waumsley: I, I would question though, the first thing you said there about, you we're just trying to put pixels on a page and I think, no, I think this is where a lot of it's gone wrong. I think I.

No, we're trying to use the web to communicate with other people.

[00:15:57] Nathan Wrigley: Oh, interesting. Okay. Yeah, and I think

[00:15:58] David Waumsley: that's the starting point. And in communicating we often, which is generally text-based, we then need to, as any good designer for, UX needs. To do is to make that something where you can quickly, where you can easily and comfortably see that content, and it's easy to understand the hierarchy of that content, what's important in that content.

So the rest of what we're doing is essentially presenting. messaging. Yeah, that, so I like that I start from that point of view. and I think that's the, we, I think if we get back to the origins of the web, which has got lost along the way, is the fact that this is a, an information sharing tool for everybody to be able to use HTML.

Anybody should be able to write and get their website on there, get their message out, and then it's the levels. From there of styling that we do that gets it more professional. So anybody can do a basic styling and make it looks quite presentable, but then you know why we'll always be in need of a job.

Even if everybody can make their own simple websites and communicate. That's a good thing.

[00:17:01] Nathan Wrigley: Yeah.

[00:17:02] David Waumsley: There's a profession for us in expanding that, and I think if we start from that perspective rather than pixels on the page, we've already set ourselves that we're creating a visual medium of which in that we are stuffing in our messaging.

[00:17:14] Nathan Wrigley: That is interesting. Yeah, I like that. I like that. Yeah. Also, whilst you were saying all of that, it suddenly occurred to me that everything is driven by the current state of the tech that we have. hold the physical tech. So you know, we start with computers, two dimensional interface, it's quite large, the screen, and then we move to things more rectangular based in our hands, and I have no idea what.

Will come in that sphere. Maybe we'll be looking at the internet through glasses or goggles, or maybe there'll be just some sort of three dimensional presentation layer that will, I don't know, will augmented reality will become something interesting. And so this two dimensional, flat, rectangular thing that we face either in our hand or on a screen, maybe that will be supplanted by something as, and then this whole thing will start again.

Be interesting.

[00:18:01] David Waumsley: Yeah, I'll put it as notes later because it's interesting 'cause E even in the thing that you do on with the WP builds, I was listening into one of the chats there about, a website's important any longer. Then there's another debate going on about how much clients need to be charged to start a website and they so depressed me these conversations because I thought if we get back to the way, I'm now starting to see it as this is all a, good, a global communication tool that anyone can actually use and that we try and make it more beautiful and presentable to the different mediums You. All that kind of stuff doesn't make any sense any longer. Why is it gonna dissipate? What, what's gonna happen to communication? So yes, if you think of it as a way of putting visuals onto the web, then I can see why all these different technologies are very threatening or why it might, if you've got that sort of level, but, and why you might need to charge so much if that's the expectation. But if you start with the fact that, it's, I've shown my information, my life, my business, whatever, I'm there.

To everybody. It. It starts to, that disappears a little bit. Yeah, and I think it's a better way of talking about it, because then we say, okay, it is HT ML first. It is our messaging first, and then actually even as designers, we should take a UX approach where we start with the content and style around it to make it presentable.

That's, yeah.

[00:19:22] Nathan Wrigley: That's always been designed anyway, so yeah, I do like your, I do like the way you think deeply about these things. I'm more on the, it's a 2D surface with pixels on a page and you've got this, you've got a whole philosophy behind it, which is fabulous.

[00:19:35] David Waumsley: But it is not though, is it?

It is just the fact that I, because I've taken myself off into something I'm uncomfortable with, right? I've had to think, how do I get, this is what I'm doing here. I'm talking aloud. It's just my, so the reason why I'm coming out with this stuff is 'cause I'm thinking. Yeah, I can't balance this all out in my own head, but I'm getting Yeah, you're trying to, yeah,

[00:19:53] Nathan Wrigley: you're trying to figure You're still figuring it out.

Okay. Yeah, so we don't know what the CSS direction is. Basically, the long and the short of that whole thing was we can't be sure. We have some vague intuitions based upon what's coming into browsers and things like that, but certainly the long term view. We really are unsure 'cause it's a, yeah, it's an on, it's an ongoing project.

Okay. So CCSS programming, is it a programming language? What's coming, what's here?

[00:20:22] David Waumsley: and this is why I thought, our show should be taking each of these and talking about 'em, but I just thought, I dunno how I would use 'em, which we, were talking about earlier. So we, have. Function functions and mixings come in and I think app function is something that we can already try in Chrome at the moment.

That's come very quickly. that's Miria and Suzanne's who put forward that project. So anybody who knows the kind of pre-process like SaaS will know mixings. You can create these little, if you like, little tokens, which can, but even, I can't remember. I. I started to learn a little bit of SAS before realizing I probably don't need it.

I bet it comes to native CSS and here it's coming. yeah, and it does allow you, again to have a bit of programming in your, in your style sheets somewhere to affect the rest of your style sheets. But how we use it, I don't dunno. So I thought, let's just cover these. there's inline if statements or conditionals that are coming in as well.

no

[00:21:19] Nathan Wrigley: idea. I have no idea how that could be used. We talked before we hit record, that's still a. Yeah,

[00:21:25] David Waumsley: Leah Varu is the person who put that forward about a year ago, and then that might be sometime coming to browsers. But, it's a kind of like an improvement, on query and something. we've got trigonometry, which is I think pretty much already there in the sense that we, we can do more with our calculations.

Now, would that have to be so linear?

[00:21:46] Nathan Wrigley: That word literally triggers trigger geometry, triggers my. Yes. You dunno much about geometry thing. Yeah, exactly. oh really? Do we need that? Okay. Yeah, no, it'd be really useful. genuinely useful if you can apply math to the screen and what's going on.

this is where

[00:22:05] David Waumsley: you hope people

[00:22:06] Nathan Wrigley: will do clever stuff. We generate, which there's bound to be a ton of people out there who will just run with this and they just understand maths in a way that I just do not, so I'm sure it'll be wonderful. Yeah.

[00:22:16] David Waumsley: I'm sure it'll come into the, typography, generators at some point, or might.

I was gonna say that

[00:22:22] Nathan Wrigley: that's gonna be a case where the generator will be my best friend. I will not be doing any of that by hand.

[00:22:29] David Waumsley: I'm not sure the same will it will get. I know, because I know there's a. There's been discussions between somebody who's mad on making demos all the time. Adam Arga, who works on the Chrome dev team, is also in the W three C and Matts OTT as well, who talked a lot previously about trigonometry and how it can be used.

So I think they've been, I. Not that they've come up with something, but combining that with relative colors, which is another one on my list there, you might be able to do some really clever dynamic programming of your whole palettes, if you like. Yeah, that'd be interesting. but certainly elements within your palette, like the way I'm using it at the moment, so I, am now, even though it's.

It's only got about 96% support, but I am using relative color just to put that formula as it breaks up the channels into a hover on the button. So whatever my color is at the top of the theme, I don't have to create a new one for the dark. I just let whatever that one is.

[00:23:24] Nathan Wrigley: Yeah, Button.

[00:23:25] David Waumsley: Yeah. So, anyway, but I think clever stuff with that and has, is one that I have managed to get my head around that's already widely usable.

exactly. And already because of the way that it works, because it's. the parents like to things that in your child can change how the parent behaves. You can use it for switches that you would need JavaScript for before, and

[00:23:46] Nathan Wrigley: that kind of just leans really into what we already know, doesn't it?

There's, no great surprises there. You're just leveraging the language of what's already there. So it you might be trying to find a child and then the child affects the parents and, it that, I think that's easy to understand. There's, a lot of the cascade in there.

Yeah. And and I dunno, my head can pause that one much more straightforwardly than the if for example.

[00:24:12] David Waumsley: yes. And I, but even that, you get, I think these things take time first. 'cause there was a lot of tricks that I used that I shown in when we were doing our websites were, one of those was the generator as well, that was creating a grid so you could put your content in kind of.

The example really is in a blog post where you might want your centered text fade type. So it's readable. You can read, it's not too many characters long. but then you want something to break out and normally you would've to create your own diviv for your breakout. And then. Another div again to put things back center where you use this grid and you use the name lines to be able to say, oh, okay, I want you to go from this start name line to this start name line.

Element. So those are calculators that do and the fluid, again, because you are, your calculating the sort of gap it narrows as you get. So in the same way that typography does, it sort of stretches. So a lot of that, and I lost my point. I did have a point where I was going, With this?

oh yes, it was, that was an example of something which I heard of. 'cause Rachel Andrews mentioned it before. Grid was fully supported in 2017, but it took until about 2000 and I think maybe a couple of years ago for somebody like Kevin Powell to make it more widespread because he discovered it for himself independently, that you could do this.

so it's interesting in how I think a lot of the stuff we've got now will take ages for us to work out. Oh, we could. Combine this with that and do this that we make.

[00:25:46] Nathan Wrigley: yeah. 'cause you've got the, they've got two pieces to it really. You've got the learning how it works. Yes. And then off the back of that, once you onto people have learned how it works, then it's those same people figuring out how best to use it in ways that the rest of us can say, oh yeah, actually that, makes a lot of sense.

so it's all very well throwing trigonometry in, but really until somebody shows me that's really useful. That affects a website in a positive way, then it's almost like it's an academic paper. It's, yeah, that's fun to have trigonometry in there, but until I can see I can do that and it makes sense and the client will think that, that's a marvelous innovation.

I'll, I'm gonna be sitting on the fence, I suppose waiting, watching the cleverer people figure it all out.

[00:26:34] David Waumsley: one thing you mentioned to me, 'cause you said we should do something on it, is that the thing that's happening now is all these kind of popular design components that used to rely on JavaScript are slowly finding their way into HTML and CSS.

Yep, yep. And to me that makes perfect sense. It has to, we have to get away from JavaScript that will affect content because JavaScript will break in the browser. JavaScript is an imperative language. That's the beauty of the declarative language. We only get to hint. But the browser can change, the web can change, and our code doesn't break.

So I, it's logical, isn't it, that more of this stuff is gonna come out of JavaScript when it's at the front end and has the potential to break and not be a, and stop the web from evolving. Yeah. Yeah, So I think, but I think we're getting some really good stuff. So obviously the, I'll bring it up.

Not that people will be able to see this in the audio, but, we've got the, carousel thing, Adam Margas project they've been doing. It's now available in Chrome everywhere where you've got these, carousels is called, but it's used in so many different ways. Yeah. Once you get the idea.

Yeah. it's not a carousel in terms of the, I forget what the terminology is, but these sort of scroll. score markers that we have and, basically it's another set of terminology, but we can use these to do whole pages carousels. Tabs we've got on there.

[00:27:58] Nathan Wrigley: Yeah,

[00:27:59] David Waumsley: all sorts of, different,

[00:28:01] Nathan Wrigley: yeah.

Some of them just look, they're just so sublimely nice, aren't they? Look at those. Yeah. Much as I hate to, he's called it horizontal cards. I'm calling it a slider. But, yes. it's, I kinda have this whole thing of I don't really like sliders, but honestly there's something beguiling about it all being done with just CSS and, the fact that you can do, look, look at that.

that's just look, finger size buttons that are round, that your finger just really navigate towards. It's beautiful. There's always gonna, I,

[00:28:36] David Waumsley: think they've solved the problem with this set of, it's called carousels. I think that's really misleading because the set of new stuff that we've got in there just allows us to play and it's.

It is still just hide and show stuff. This point points where we need things to be contained in a little box somewhere where we hide it away as secondary content. We'll always need that and effectively. talking about S slider, I think being terrible because we've got this concept of it, but effectively these are all, they're all versions

[00:29:07] Nathan Wrigley: of sli.

Yeah. There's one thing, which is the focus and everything else is somehow receiving some kind of hidden state, I suppose it's less hidden there, but the, they're great. They're really great. So I'll just speak this into the, the URL is Chrome dev slash carousel. yes, if you wanted to go and check out, there's, so there's so many interesting examples.

Some of them are just wild, like wildly cool.

[00:29:30] David Waumsley: And I went to the configurator there, so they've got a little configurator so you can start to work out what your code is. And this is again, another example of a generator where I think all of us will need to. To turn these on to see what the code means so we can use it in our projects.

And, anyway, let me go back. Yep. and there's another one which I've been looking into, which is accordion. So only very, just recently, with Accordions. Now, because you use it on your site, we have the, summary details and summary. Yes. Summary. Yeah. Tags. and with that, I mean they are disclosure, patterns as they're called in W three C where they disclose the information that's in them.

And they are great by default because they are, and I didn't really realize this, I. That they're searchable, oh yeah, Content within it is searchable. Yep. and they're accessible because the browser, again, is opening up and then doing all the stuff people are tabbing or need to,

[00:30:29] Nathan Wrigley: they're literally perfect for like SEO and hiding content.

So I use it for transcripts 'cause it's in, it's right there, but it's invisible. So the search engine sees it. and, but it's, it's, an accordion. It looks like an accordion and it's the

[00:30:45] David Waumsley: same. Yeah, same for this show as well. We've got it in there and it'll stay there. But the interesting thing is we can turn it into an accordion where, what people expect with an accordion is that if you open one, the other one, they're conscious of each other.

And now we can do that. We, if we put a named attribute against the details, now it will automatically open one when they're all the same name. Yeah. They're getting that grouping

[00:31:07] Nathan Wrigley: aspect, aren't they? I think it is called, isn't it called grouping or, I can't remember. But yeah, they've got awareness of one another.

So if you do this to the third one, the second one will collapse and so on.

[00:31:17] David Waumsley: Yeah,

[00:31:17] Nathan Wrigley: exactly. You just put the same name against the name. It's the name attribute. Yeah,

[00:31:21] David Waumsley: yeah. Yes, exactly. Against that. And it does it, but it's really fascinating because I was watching, I'm doing a course Practical Accessibility by Sarah Sara.

I don't, I'm not sure if I'm saying her surname correctly. She's brilliant, but she's just done an update on that one and suddenly you realize we'll do an episode on this. I think, yeah, you realize that suddenly it's not as simple as you think. You realize there's. Accessibility issues with the fact that something closes when something else opens.

and anyway, we'll get into that, but there's also popups as well that we're seeing, which again, is another pattern that we need to display and hide content and have it show up. I think that's it Anyway, we've gone off into another episode. That's okay. That's okay.

[00:32:02] Nathan Wrigley: so

[00:32:02] David Waumsley: what does it mean?

What does it mean? So all this programmable, flexible stuff there. So I think it's impacting, as mentioned before, I think hand coders, so I mentioned that Kevin Powell, he did, he got people really upset and he did a talk on it, last year's. CSS day on over net engineering CSS. And it's one of the things, and I thought it's really fascinating, this whole discussion with him.

He, showed a bit of CSS, which was modern and seemed complex, and people jumped on him saying, this guy's, a newbie doesn't know what he's talking about. This is, it should be readable. Everything should be readable. And he's gone to the other view of this, where he agreed with that. Firstly, it should be readable, but I think.

It's no longer CSS is no longer just this presentational code where we can just read it and understand what it is. Now, I think we have to accept that if we're gonna make the most of it, we're gonna have to put some really complex stuff in. Even when you are using something like grid or something, when you use that RAM technique that talk about repeat.

Autofit and MinMax to do a clever calculation, which no one can really remember the syntex to write that out, or it's a struggle to do that.

[00:33:10] Nathan Wrigley: No, but also this is just, how it evolves, isn't it? Yeah. nobody intended it to be become complicated, but with the expectations of what we want to see.

It has to be. if anybody can figure out how to make it and it not be complicated, you, you will, be everybody's best friend. But it is complicated because, it's complicated. There's no, yeah, there's no way around it.

[00:33:38] David Waumsley: I think if you can compartmentalize it, and that's the biggest trouble with me.

one hand you want to say, oh, 'cause having convinced myself that CSS is fundamentally simple, we had a, we had an episode when we were talking about that very point that, Rachel, Andrew and her talk was saying about, you just need to learn this, you don't need to get carried away.

And you, and, that is still true, but in terms of employing some of this more programmatic, telling the browser to do really clever stuff, then it gets a bit, it has to get a little bit more mathematical.

[00:34:12] Nathan Wrigley: And it'll be interesting if we end up with kind of a stratified. Workforce in the CSS space.

You know the, there are those, it feels like that. Yeah. Do you know what I mean? there are those people who are kind of entry level, for want of a better word, junior, CSS developers. Yeah. I'm not even there, but, but then you get the more senior, more experienced, engineers. Developers, whatever you want to call them, because it is gonna be more difficult and using the simple stuff will still work.

It's not like you're gonna break things, it's just you won't be able to push the boundaries quite in the same way. Yeah. that'll be interesting. See if the job market does a, acknowledge that and accommodate that and whether salaries and things like that will be affected by it.

[00:34:58] David Waumsley: Yeah. I, I'm hoping clever people will keep coming up with recipes for me that I can steal.

[00:35:03] Nathan Wrigley: See, yeah. So you can appear to be clever off the, off on standing on the shoulders of giants. Let's, exactly. Exactly.

[00:35:12] David Waumsley: as well, I We covered that in a way, it just realized, I think page builders will always still be there. My little talk that I do for your thing is really the fact that I think there could be, 'cause page builders do all that stuff that I get 11 to do.

I need all of that managing of the code, dynamically in certain in places. And I think page builders have always been good at presenting templates and recipes to us in our workflow as we need it. I just think they need to change, yeah, yeah. Yeah. so, my last bit on here was just, again, it's me comforting myself here, coping with more how to cope, tell me, lie down on the couch, and tell me about your father, how to cope with more complex CSS.

I think the thing is. I was comforted listening to some real CSS experts. I think on the, YouTube channel, bad at CSS, I think they were talking about this, some people much smarter and been doing it a lot longer than I have. Talking about the fact that they hadn't got their head around.

I. This particular thing in CSS, it's on their list and they're just dealing with it one at a time. they can still do their job, but it's more difficult for me because I feel I have to consume it all. 'cause I'm just getting back into it. Yeah.

[00:36:27] Nathan Wrigley: I think at the minute you've got a really insatiable appetite for this stuff and I think maybe that's a.

Maybe that drives your curiosity, which is brilliant, but also it, it presents you with this just wall of things that you have to learn and, you you, forgive yourself, David, be, accepting that wall doesn't need to be climbed in one go. You've got, days and weeks and months ahead,

[00:36:51] David Waumsley: but it has all come into place for me.

you can blow this apart. please do, but for me now. You'll remember that I was a big fan of a talk that was on your page Builder Summit by Elizabeth, no. Nora Elizabeth. Laura Elizabeth. Yeah. Yes. That's it about UX design. And I realized it was a common thread for a lot of people to begin with the content and, then I.

Use these design rules of proximity spacing. So it's standard color using some of the rules that you can, anybody can be a designer if you start with that content and think, how I'm gonna use space And that to, set out the hierarchy and the, and what's important on it. And I think, now we're being encouraged to intrinsically, or at least think.

How the browser will deal with your stealth, I think this transfers this sa same idea because you start with HTML content first. That's semantic. If you think about the content and how it should be marked up and how it might work, you cut out a whole load of the plugging in the, the accessibility and performance issues that created later by ignoring that in the first place, and then you get your messaging right.

So I think that whole way of. It connects up to UX design as we should be designing with how, I think we need to design a little bit more in the browser. At least in our minds, we need to know how. Content works in the real world, in the browser in different circumstances before we can get to, sketching it out on something static so we can visually see it.

So I think we're going between the two, but that gives me a sort of system. If I concentrate on those, then I realize that, yeah. Yeah. Stuff that Rachel Andrew was saying about, you really only need to understand well with CSS. You first need to understand how the cascade works and, your elements and how you can style those with the basic rules.

That's simple stuff. Then you just need to learn that these display modes change flow in a different way. Once you've grasped that, you've got how you can change your layout from the standard normal flow, then you just how you align that and how you size it. Then you've got a sort of layout model of which.

Then I think on top of it, and that's where I, think, I can't keep up with somebody like Adam Argyle who will spend all of the time working out how to set up these demos and many other people like him. Bra bras, van dams, another person like that who will experiment with absolutely everything. Same as in the accessibility side, the people who sit there and go through all of that saying, How does this read out on Jaws? How does this read out on NVDA? How does this read out on narrator and stuff? They do all of that work and then they come up with formulas for you. So I actually think there will be these high level CSS people, but I think for most of the projects we do. We can, as you say, stand on the shoulders of giants for that, as long as we get the basics in place.

[00:39:38] Nathan Wrigley: Right, and, it does, it feels like the cake analogy comes in. the cake will be tasty because it's a nicely made cake. But if you want it to look nice and have all the, the, icing as it were, that's where I'm going with this, the icing on the cake and make it look pretty, then there will be these complicated things that you can leverage.

But I, would imagine, I could be completely wrong about this, I would imagine most of the clients that you are dealing with. Probably won't have the, desire to use a lot of those things and nor will you be able to crowbar it unless you become really a adapted it and can do it in a heartbeat. It may not be economically viable.

Yeah. economically viable, Like the time, the cost benefit analysis for you. Okay, can I force these things in? Is it worth forcing in? Is it gonna take me another six hours? Will the budget meet that extra six hours? I think a lot of this stuff is fascinating at the moment and it'll be interesting to see whether it becomes, widely deployed.

It feels at the minute as if it's still a long way off. It's still in many cases, real edge case. It's difficult. It's hard to understand 'cause it's not, I. not the basic stuff that we're used to, but it's very exciting. and I would imagine we'll see the enterprise, the enterprise agencies adopting this and pushing the boundaries and the people who you constantly reference will be using it, creating tutorials, making examples, making component driven, generators and all of those kind of things, which will be fascinating.

But I, suppose if you look through the history of something like CSS tricks. You'll see an awful lot in there. thousands of articles, most of which probably never got used because by you or me, because they weren't necessary. They were interesting. and they were pushing the boundaries.

But wait, let's wait and see.

[00:41:29] David Waumsley: Just feel a little bit though. I noticed, but obviously we did these three demos and we'll do probably more of these in the future. They, were quite easy to do because I was using, a bunch of these generators, basically three sites with the same code.

Yeah. Effectively. Yeah. With these, this generated content that I've found, which at least I understand. Stud moved around. That's basically what those three sites are. So it's easy to create them and I, but I do think I have to remind myself about this, and I think with all the pressing debates that you get in about, technology's moving so fast.

Actually. I think if we step back and just go, what we're trying to do here, we're just trying to communicate.

[00:42:04] Nathan Wrigley: Ml exactly. that was where I was going. I was trying to encapsulate that in my sentence, will it assist your communication? Maybe?

[00:42:13] David Waumsley: Yeah. And I think you build from there, don't you?

Yeah. And that's why you can do cheap sites for clients, or you can teach somebody to do their own stuff if they wanna improve on it, we just keep doing it and then we borrow from somebody else. And then when you get to a really high level, then you'll be doing the. Build CSS programming, which I'll never reach those dizzy heights because my brain doesn't wear like that.

But yeah, I thought for our content that I wanted to do this episode. 'cause I thought what we could try and do a little bit of, 'cause we tried to build some sites and then we rushed over explaining. Now that we're stuck together, I thought what might be nice is to break it up into. a whole series of where

[00:42:51] Nathan Wrigley: we'll look at the different components, I think, yeah, I think that's a brilliant idea.

Do one component at a time. Yeah. with a clearly labeled title so that it's obvious, okay, we're only doing this thing. that would be great. I think. I think people will enjoy that content a lot. I think that's a great idea.

[00:43:07] David Waumsley: Okay. I think that's the direction. First we'll do it, we'll do an episode where we'll work out, which.

Which, which, components we actually do need and, and don't. Okay.

[00:43:15] Nathan Wrigley: Yeah. Okay. So are we done for this one? I think. I think so. Okay. Enjoyed that. Yeah, that was fabulous. In which case we're all rectangular again, in which case I will, bid you farewell and we will. We'll see you next time.

Thank you, David. Appreciate it. Yeah, thank you. Yeah. Bye bye.