[00:00:00] Nathan Wrigley: Hello there and welcome once again to the WP Builds podcast, you have reached episode number 357 entitled, no script show episode two, the big picture. It was published on Thursday, the 18th of January, 2024.
My name's Nathan Wrigley and a few short bits of housekeeping before we get on with the main podcast.
The first thing is to say that we have a schedule page. If you're into watching anything that we do live head to WP Builds.com forward slash schedule, and there you'll be presented with a calendar, with links to add to your own calendar of all of the shows that we'll be doing over the days, weeks, and months to come. Every single show ends up on the same URL when it's actually going live. That's WP Builds.com forward slash live. So basically if it's in the calendar, you can just bookmark that in your calendar and then had to WP Builds dot com forward slash live at the appointed time and you'll be able to comment and join in those shows. We'd really appreciate it. We've had a lot in the past and we've got a lot coming up.
The other thing to say is if you're interested in supporting the WP Builds podcast, we would very much like to facilitate that. Head to WP Builds.com forward slash advertised to find out about the sponsorship options that we have. We get quite a lot of plays each and every week by a very specific WordPress audience. And so if you have a product or service or company in the WordPress space, and would like to get your message out, we may very well be able to help you with that.
The WP Builds podcast is brought to you today by GoDaddy Pro. GoDaddy Pro the home of managed WordPress hosting that includes free domain, SSL, and 24 7 support. Bundle that with The Hub by GoDaddy Pro to unlock more free benefits to manage multiple sites in one place, invoice clients, and get 30% off new purchases. Find out more by heading to go.me forward slash WP Builds. Once more, go.me forward slash WP Builds. And we do sincerely thank GoDaddy Pro for their ongoing support of the WP Builds podcast.
Okay, what have we got for you this week? if you were paying attention a couple of weeks ago, I said that not only had David Waumsley left the WP Builds podcast as a cohost, but we'd also started another podcast. It's called the no script web show, or no scripture. We haven't quite decided yet. The URL for that is noscript.show.
Because it's all about web development, I decided to give it a bit of a boost, right at the beginning, by putting it directly into the WP Builds feed. It's completely on message. Although it isn't specifically about WordPress. And really this is an endeavor to step away from frameworks, to get back to the basics and to use things like HTML and CSS and learn all of the wonderful things that those technologies can do with modern browsers. That is going to be the endeavor of the podcast going forward.
And in the episode that you're going to be able to hear today, David and I chat through what it is that the podcast is going to be, hopefully, talking about in the weeks to come. Who we are getting our inspiration from. There are some really key players that are pushing CSS and browsers forward. So we discover a little bit about those.
We find out about the direction that web technologies are taking, and just really gain a little bit of perspective about what the bigger picture online is.
It's fascinating. I'd love for you to subscribe in your podcast player of choice. Head to no script.show to find out more.
I hope that you enjoy this episode.
Hello there and welcome to this the second episode of the No Script Show, a brand new podcast, which is gonna be all about modern front end web design, where we look at what we can build today with minimal dependencies and skills. I'm joined as I always will be by David Warms. Hi David. Hello. As I said, this is the second episode.
In the first episode, we just orientated you a little bit about who we are and what our background is. This episode will be a little bit different, but I still feel orientation is the right word because we're gonna spend a moment or two just thinking about what we're gonna be doing in the episodes to come.
That's, like I said, we talked in the first episode about what prompted this show, and really that was all about the overwhelm in. We'll be coming in the web platform in the near future. We've both been users of WordPress, heavily reliant upon WordPress over the last decade, and I think David got the intuition first that, that maybe we'd become a little bit de-skilled.
And there were things going on in the background, innovations happening, especially with browsers and what they're capable of. and we've got left a little bit behind. So this show is an exploration. Of that and trying to relearn or learn for the first time what we may have missed out on over the last decade.
But rather than dive into every single standalone topic, we decided to do an overview in this episode about the next few episodes that are gonna be coming. And the reason for that is we, hope to, in your mind, dear listener, be able to connect all of the different bits and pieces and give you some historical context.
And there is historical context, and so that's important. So we'll be talking a little bit about that. In short, we're trying to see the big picture behind what's coming from the W three C, in recent, what has been coming and what will be coming in the future. mostly to save ourselves from getting overwhelmed and paralyzed by it all.
So yeah, that's the, beginning and I'll pass.
[00:06:11] David Waumsley: It was you really who said, we started to try and list out the topics we'd talk about and there was a kind of a developing story over the last sort of five years about what new stuff is coming on and it leaves on because it's all, as we're focusing mostly on the sort of simple stuff, the has ML and CSS, there's a lot really coming to that, which we haven't seen until recently.
It was me trying to explain why I've put 'em in a certain order. I realized that we were telling the kind of history won't we, of what's, and gives you a sort of. A philosophical, aspect to the whole thing. You can see direction and that if you bring up, actually for those people watching on YouTube, the, website.
We have got our talking points where we will just chat first a little bit before we introduce the next episodes. A little bit about, that problem that I know I have or certainly suffered it recently is knowing. What to learn next. Who from, and the direction of that, getting some kind of perspective, if you like, on, what I'm learning next.
And, so I thought even if, let's, should we start with the, what to learn? So we, have limited our choices for this show, haven't we? We, yeah. just sticking with mostly with HTML and CSS and we are. For that purpose, we are ignoring frameworks and platforms, so in theory, it should be a little bit easier.
Say, if you are in WordPress, you've got a lot of builders possibly choose from and lots of different tools. If you are a JavaScript developer, you've got lots of different frameworks to choose from or going in their own direction. In theory, what we're covering should be easy because HTML and CSS, but.
It isn't always that easy because I think there's lots of places where you can fall down different rabbit holes because the W three C tell you what is available, what can browsers can do, but they don't necessarily tell you how you should do it. And Nathan, you are, when you started learning as we did in those early days, just trying to build with HML and CSS, did you find.
There was lots of, even though you found experts then, that there was a lot of division between certain things that would be, I remember arguments about whether you should be coding everything up to be fixed or whether it should be fluent, Yeah,
[00:08:41] Nathan Wrigley: there was, there were definitely different debates going on at the time, but I feel that it's much more difficult if you are making a start now.
I feel it's, there's more overwhelm, there's more differences of opinion. There's more different directions you could go in. So as an example, when I began, really, nobody was using JavaScript at all for more or less anything. It came along after the fact. So at least that part of the jigsaw was out of the question.
it just simply didn't exist. It was HTML, and then after that CSS came along. And, it, so it was fairly straightforward to, for me at least, to figure out what to do. But then as you say, those, little things crept in, fluid design and responsive design later. All, crept in there.
Were there, there were differences and people started to argue
[00:09:31] David Waumsley: about, which was the
[00:09:32] Nathan Wrigley: air quotes, the correct way to do it. And I think because there was no clear direction. All sorts of things broke out. frameworks came along and ways to do things and what have you, but also just rewinding a little bit back then, I think it was easier to gain knowledge because really all you had to do was buy a book, and that book meant that the person who'd written the book had obviously risen to the top in some area.
there was that editorial control. Whereas now I think especially with the advent of platforms like Facebook and YouTube, anybody can put any content out there and, in some cases they may be entirely, and again, air quotes, right? But also they may be putting out just half the story or telling you things, which really ultimately you don't want to be doing.
So I think the endeavor here is just to, is to reset a little bit. you've found a list of people that you trust and you've got, and you've got intuitions as to why you can trust them. But I do think, yeah, going back to the W three C is, now a really good option and, I, dunno if it's done a really great way of, advertising itself, particularly as the, source of authority because it feels like that's not what its purpose is.
that's what we're making this podcast about. Really. We're putting them the W three C right in the center front and center and all of the different things are being, talked about in this
[00:11:05] David Waumsley: podcast will be
[00:11:06] Nathan Wrigley: related to that. So yeah, it, all got a bit shuttered. I think it's become more shattered.
And your, genius, I think really about putting this podcast together was the idea that, let's just brush aside all those shattered bits and let's just concentrate on the bit in the middle, the W three C, and, we will get into all of the knots and the bolts that the CSS and the H tmm l and a whole range of other subjects.
But today is more about what are we trying to learn? Who are we trying to learn from? And if you're watching the screen, finding a direction and gaining some
[00:11:39] David Waumsley: perspective. Yeah, and I think you know what's really interesting is we just decided that we'll try and stick to people that are closest to the W three C.
The people who are writing or who are in the working groups are writing some of the spec. And those people who, also published the books as well. I think interestingly when we, were doing it, people who were publishing the books still had different ideas. there was well-known books by people who told you how to code with tables.
And then competing with that, there were other, well-known books by people saying, we need web standards and you need to be using floats. And you still were stuck. But I think what's really interesting to me now, because I, came out, a year ago, if you like, trying to relearn CSS, doing it through, as you mentioned, YouTube videos.
And it didn't help me. And what helped me was starting to listen and they're free online, most of 'em, the sort of conference talks that will be given by people in the working groups. People will be mentioning as we go through this. So Jen Simmons, Rachel Andrews, Miriam, Suzanne, All people that look to, and there's people from, way back as well who are still doing things that Jeffrey Zelman, Bruce Lawson.
Yeah. And yeah, Eric Mayo was probably the first person I ever came across as a name in CSS. They're still influenced in today. So all those people who are very invested in the web platform and contribute in some ways, even if it's just through their blog writing, that influences the people in the working groups.
So we're trying to stick with those because. I, found a real difficulty going off the, and one example was that when I started to watch some of the developments, particularly from Rachel Andrews talking about layouts a lot, Jen Simmons two, is that I realized that was my sticking point, for everything, if you couldn't lay things out on the page as I wanted to in the correct way, and I realized when I was getting the YouTube videos, they made sense of what the W three C.
We're attempting to do over the last decade or more to build up this comprehensive, setup for layout, which we now have, which we didn't have before. yeah, so that's, helped me find a direction, and that's really all we wanted to talk about, I think in the first place was the fact that for this show at least, and it's been the direction I've gone in, I've listened to these people who, if you like, reference the spec, the platform.
In some ways it's an inter, you mentioned about there's not any marketing and you just reminded me that there is an interesting thing going on at the moment. It's an aside that, we may be seeing CSS four come out soon. Now no such thing exists in reality because for a long time, since the nineties.
CSS and HTML don't have versions, but the problem is out in the greater world, employers will still look for, what was the last spec for that? CSS three. Yeah. And even though it's a bit of a nonsense, the group in, so much has happened since, I think 1999 was when that came out, that they were probably putting something together for.
Just really for publicity, I think, and to help people who will hire people to do development, to understand what knowledge they may have 'cause your knowledge from 1999. As a CSS person's probably not gonna be too useful to anybody. So yeah, there is the, there is all of that. And I did see a move going on because we've had a decade of, since React from Facebook.
We've had a decade of JavaScript first, and the web platform is a, has ML first with JavaScript coming later. And I see from both sides of that. there's a bit of a shift if you like, in the sense that many of the framework. using web components and things like that to connect with HTML more.
yeah, so I think it's a really exciting time and I, but that's, basically the upshot of what we wanted to talk about here, is that this show will be led by us not trying to give an opinion, but really trying to, as best as we can, represent to ourselves what the people who write the spec are saying about the future of the web.
It just occurs to me
[00:15:59] Nathan Wrigley: that if you've dropped in on this second episode and we're uttering words like W three C, that there may be really no connection in your head as to what that even is because well, what, even is that? do you wanna just get into that for the teeny, tiniest amount of time and just say what the W three C is though?
It's the Worldwide Web Consortium.
[00:16:23] David Waumsley: yeah. That's
[00:16:24] Nathan Wrigley: the, that's the W three C bit. But, yeah. What is it, how is it, how has it got itself at the center and all of that? Yeah, it's,
[00:16:35] David Waumsley: I dunno if I could do it justice for No, it's, okay. It's a popular history. Yeah, no, I think, but I can give you a, I, it, it is the organization we look to for the web and it is still overseen by Tim, who is credited as the inventor of HML, which is center of.
It's had an interesting, because at certain points it could have very much lost what it's there to do. And it has a foundation of the web being for all and on everything. And that's its mission, and in the past the organization has been fairly loose with what is expected, how browsers to implement.
And of course we get no without browsers. There were certain points, particularly in the early days where HTML nearly went off with a, side group of people creating X-H-T-M-L because Tim Burners league thought HTML had been done. He chased his mind because it's always a division. He is a very good leader in that sense because he is able to, reflect on what's needed.
And I think that's the way that this organization has always gone. But I think what's interesting about it today is that. Now that browsers are not working on a loose spec from the W three C on what we'd expect to do, they are not going their own different routes. They've realized, and only over recent years, which we covered last time, is that if they don't work together, to implement stuff that all developers can use because it will work in all of the browsers.
They're only shooting themselves in the foot. So now we have the weight of all the big. Browser vendors who are also, Microsoft and Apple and Google. They're also the people who are creating devices as well. So they bring the very best of the people to that organization to work through this. And I think over recent years we've seen this, thing to not, the, and one example we used before was how we nearly went off a different direction, with Flash, Yeah. It was proprietary code, which could have. Only put in the shell of HTML, and it could have been what we experienced at the web, but the danger with that is that it would've been owned. It basically the web effectively owned by Adobe, where the Worldwide Web Consortium is there to make sure that it brings all the commercial aspects of that together.
But because they've got the opportunity to criticize the other work, it doesn't go through unless everybody agrees in these working groups. So it's a, at the moment it's been working well, hasn't it? to see that the, web is a platform that everybody can build on and be creative on that will work for all and ideally on everything.
That's the idea. The worldwide web wants to make things that well. Suit the browsers of the future, or not even browsers, maybe a Siri type system where the, web is read to us and, the images from a website are thrown up to us. Who knows? Yeah. But that's, I guess what they're charged with doing is thinking ahead a system that's gonna work that developers can work together in the same direction on.
Anyway, that was a long I. I think
[00:19:57] Nathan Wrigley: the history of that is really interesting because if you were to rewind to the beginning of the web, but there was no, real notion as to what it was gonna become. And it probably felt to Tim Burnley at the beginning that maybe a couple of dozen people will hop on this with their giant mainframes in different academic institutions around the world and, may, maybe as many as a thousand people will end up using it.
and then of course it morphed. And it became much more popular and it came down the telephone line and modems and all of that were in use. And then commercial enterprises got involved. And at that point there was this conflict of what should the web become because it, felt like it, like you said, with a Adobe's flash, it felt like it really could go off in that direction.
That technology was so amazing. There really was an inflection point there where it could suddenly do a lot more than it previously could. you could play videos and animations and games and all sorts of things, which was, whoa, h hang on, that can be done. but the idea of wrestling it back and having this, this objective body that can look at things and weigh them up and importantly doesn't really need to be in a rush.
They don't need to do things right now because somebody suggested that we should do it right now. They can pause and be a bit more reflective. And honestly, we're very lucky that the founding fathers of the internet had this intuition that something like this needed to be set up because it could have gone entirely down commercial lines and, maybe something like a OL would've taken over and that would've been the mechanism for us all browsing the web.
And we would have to. To pay to get access to various different parts of the internet. Who knows, it could have gone in all sorts of different directions, but we are where we are now and it feels like over the last few years, all of the competing factions have decided, okay, it's better if we all just combine our efforts on the basics so that everybody's browser can at least do the basics and then we can.
Work on our own stuff. So anyway, sorry that was supposed to be an aside and it ended up being like about a 10 minute aside.
[00:22:08] David Waumsley: Shall we, scroll down on for the YouTube people to our other points so we can actually go on to and just talk about the episodes and why we think these might work. this is just the main topic areas, so I might end up going on for some time here, Nathan, so just Okay.
I'll go and grab a cup of coffee and I'll be back. yeah, the, so the next episode, which is what we said we were gonna do this time, would've been looking at CSS layouts because probably that's, I would think that's probably the reason why we have so many CSS frameworks and W week editors, because there simply wasn't.
A layout system until recently, until we got Flexbox and really properly, until we got grid, we didn't really have a uniform system. Like you were saying with Tim Burn, as Lee's idea was sending these scientific documentation. Yeah. It wasn't a, a layout tool and. it's taken all of this time to get it, but now it's here.
And I think, in order to understand what is coming out or to understand something like grid and layout, we're going to use a talk by, Rachel Andrew, who, it goes back to, I think 2090 refactoring the way we talk about CSS because it's got a bad name. I think amongst people are being difficult, which it is when it comes to layout.
That's what I wanted to skip, and that's why I went for the Wizzywig builders. I could do the rest of the CSS basic styling and still retain that stuff, but that was difficult. And she, and I think why we'll talk about that on that one is because she does a really good job at explaining that there is actually a logical system where we think of CSS, we often think of something complex, difficult to use, and that's simply because.
We didn't have a layout system. We were using hacks all along the way, inappropriate properties to try and get the layouts we want to achieve. So people wrote different books about how you might wanna do it. Now there is actually a logical system. Where everything in the CSS is coming together. And for me, there was a real big breakthrough moment watching her talk.
She didn't really emphasize it so much, but there is a thing called internationalization. an attempt to make the worldwide web, actually worldwide to acknowledge that there are different directions for people writing. If you're Arabic, it is going from right to left rather than left to And once you understand that there's writing modes and there's some spec to sort that.
If you need to make another page that's similar design for another language, it's much easier. You don't have to just reverse everything. You've got a writing mode, which then explains why when we move to something like Grid or Flexbox, why we're always talking about start and end block and inline and stuff, because we've set up a system which is no longer top, left, and bottom.
I think it's really good to go through her talk next time just to get an understanding that actually there's a system there and, her big claim is, and I, can see how true it is, that it's easier sometimes for her to teach somebody who's never seen CSS before than it is for somebody who has a lot of experience and the baggage of that.
I find that
[00:25:26] Nathan Wrigley: absolutely fascinating actually, because the assumption would be that the more you've learned over the last 20 years. The more likely you are to be able to, understand what's coming. But actually maybe it's the other way around. Maybe having no baggage of how things are laid out means that it's, it, is easier.
So I'm interested to see how that goes. Yeah, that's good.
[00:25:48] David Waumsley: Yeah, it's more harmonious, I think, as well now because some of the old debates that we'd have, say pixels versus rems, fixed versus fluid, Adaptive versus responsive? to be honest, we know now that all of these older methods have gone.
No one's gonna argue with 'em now because they were looking backwards to a time of design where we were basically mimicking what we would do in print. Yeah. Now we know we have to have these squishy layouts. So to understand the system that creates these squishy layouts in ways we can understand is that.
That also leads on, and I think we need two episodes and we say intrinsic design. That's basically the, we'll look at the Talk by Jen Simmons, which we talked about. We called, episodes roughly after that, where everything changed in. Web design, we can get another perspective of all the changes, which we've just alluded to, the historical changes of ways that we would do web design with the tools that we got and how she believes that we're in a new period of intrinsic design, the squishy internet, and it, what we'll get from her is that historical side, but also she as a designer more than a developer, she's asking more the question, what does it mean to be a designer?
Today when we are simply because the spec is thinking about that, where we are designing for, browser devices that don't yet exist for browsers. That's, yeah. That might be used in different situations. She uses the browser. That might be on your fridge or the Siri type thing. I was talking that it talks the, so it's being that designer and understanding that, so that was good.
But she does make a, couple of points. In her tilt, they're little asides. And one of those is about how she felt that we maybe have over complicated just some things with everything wrapped in JavaScript and we might be making some of the mistakes of flash. and I know why she doesn't go very far because that has been a whole period of the last 10 years where it's gone that way round.
I think back in 2018 when she was doing that, we didn't have some of the new stuff that we're leading to now because they were there for a reason. She skips over that in her talk. so there was a point, I think you'll agree, where everybody thought, why we styling these scientific documents to look like pages.
Why are we not just saying these are all made up of little blocks of reusable ui, and why are we not component-based designing? And I think that's what's interesting about this. So from her talk onwards, we can now look at component-based design. And I think there's a bit of a debate there about even in CSS, about how people have tackled that in order organizing their CSS because.
What made React so popular in the JavaScript frameworks is that it could do it where CSS couldn't suddenly, yeah. Suddenly you want to have little units which are encapsulated that you can style up independently to build as you are building blocks for your website. You couldn't do that. So we'll move on to that into the next one on component-based design and talk a little bit about that.
there is something which is now quite popular, it started even before React, which was web. Web components, right? Yep, And, you almost can't say that today because when you say components, everybody simply thinks of JavaScript components. But actually well, they still are to a an extent.
But this is something that's been building up in the W three C for some time. we'll talk a little bit about that and we might use it for all of these things. We'll try and add to our third guest, which is the website you're looking at. maybe I'll do a video which will just look at some of the coding, which is borrowing from what, Rachel, Andrew is saying.
And then when we come to, components, maybe we will stick in now embedded video, Nathan using a web component, which is just, yeah, has ML with a little bit of JavaScript in there. Okay. yeah, next episode. And, then I think this is the biggest change, that's happened just really at the end of 2000.
Really when it's supported in all the major browsers, we have a thing called container queries. Yeah. This is big, isn't it? Yeah, it is. And it's mentioned in Jen Simmons' talk that we talked about earlier as one of our other asides, which is, it, she called it the unicorn. We may or may not get it, and we have got it.
And it's one of these things where the browser engines have been refactor to make it possible, so we. The container. Container. So it does allow, and that's why I think we need another chat just with H TM L and CSS, we could be able to start to build up nice little components. So this is something that the WC three have been aware of.
it's lacking with this HTML and CSS start in one document that we could. that would, it hasn't really focused on the needs for people to create these reusable stuff. And I think in our case, mostly what we need is not functionality, but is style. We maybe want a little styled card that we Because style at once and just slot into any design. And we know that because it's contained its size in it, it will respond appropriately to the we. So I'm talking a lot here, Nathan, but no, should I just, should I explain a little bit just about the, I think the example of a container query is the one that's used the most.
Yeah, I
[00:31:30] Nathan Wrigley: think, I think that, I think it might be good to just pause a moment there and just explain how it's different from what we've got now. So your card example is a good one. How, would that work on, I don't know, a range of different
[00:31:41] David Waumsley: devices? Yeah, so you know where before you always had to take the view port as with your media queries as the thing that would controlled the whole layout.
So everything had to be solved. That where you can now take a component. So in your example of a card, let's say you've got a lot of space because in a certain thing this card might need to be the full width of a screen or something. So you might have the big image in that card or something on the left hand side.
Yeah. And the header on the right, and there's some paragraphs under it, and then maybe a button. So you know, a good third of it will be taken up with the image, but then when you want that same component to slot into a sidebar. You may need it. So the image goes up to the top and then the, and all the font sizes changed to that.
So you can with all the sort of responsive calc stuff with your text, you can make the text squishy, but you could start to move around the order of things, so the image, because you've actually queered. The container by size. So in that, if it's, at 600, it behaves this way.
If it's below that, it behaves in a different way. So you can start to make these reusable components. And I think this is gonna be one of the most exciting things, which we won't get very far on because I think I. Combined with some other things that have come out, has is one of those things. Oh, yeah, It's the parent selector where you, can select something that's in the card and have it behave differently and later we should get container, we've got container queries, the size format at the moment, so we can change what's in that container based on its size. What's coming is style.
Hopefully at some point we'll be able to change the style based on that container size, which will be, so it, is definitely moving towards a component based way, which is really not being accessible to people, I don't think. that's really why the JavaScript frameworks have been so popular because they're the only things they've been able to address that approach to building sites.
Yeah. So it's almost
[00:33:48] Nathan Wrigley: like you could have. These little components, these containers, and they're almost like a website in themselves in a way. Because you can style just that unique one and then repeat it. And repeat it and just amend it so that the image goes right on a subset of those.
And essentially it's like the view ports that we've got with the media queries at the moment, but inside each of the little components themselves. And so it opens up this. World of possibility, although I am actually struggling to imagine what will be envisioned by web developers over the next couple of years.
I'm sure it'll go in directions that I, nobody's anticipating, but it opens up the opportunity to really atomize the design and have, each little bit of the design as something separate and unique and repeatable, which will be brilliant.
[00:34:41] David Waumsley: Yeah, it will. And I think, nobody really knows now we know that things are in place and if you get that early foundations of how, if you like, layout's being set up, I think the combination of something, which again is, coming, isn't fully there yet, but Subgrid will be in all the browsers pretty soon.
Subgrid with, has, with container queries at the moment, will give so many options for component base styles and stuff. But I think the interesting thing we'll talk about as we go through these episodes is that there is a bit of a push and pull because, we've all gone container mad and we think, oh, building blocks, but is a, website really the sum of its parts, yeah. and against that, there's an argument about, and it's something that. Connects with me. This idea that we might want to write little css. There's only a few components we need, and it might be so much better as we can do now to use very little code to style our whole pages, our whole sites, right at the top of the document.
So the cascade isn't dead, if you like. Yeah, In CSS. Yeah. anyway, I think we've gone, I've gone on. No, that's great. But
[00:35:51] Nathan Wrigley: like the next four episodes, CSS layout, intrinsic design component-based design and container crews. That's really, that's all about the putting the things on the page and how they move around on the page, depending upon.
The thing that you are viewing it in. But then we're onto something different. So the next set if you like, they're not gonna be quite so much about the layout because the next one you've got is CSS interactivity. So this really does get into the wheelhouse of what is currently the domain of JavaScript,
[00:36:18] David Waumsley: doesn't it?
Yeah. I think for that episode we'll end up breaking it into two. Yeah. Because we've got so many interesting stuff that's, stuff that I think we'll use in our website as well when we bring it in as our third guest, I think we'll. One of the big wow things at the moment only available in Chrome, but it should come to other browsers soon, will be a view transition, which gives you a very app-like ability to move to your next page as a smooth transition.
instead of just, see your next page. And, I think that's really interesting and we'll probably try and do that. I think with our site. We'll try and make our archive page once we've got a few episodes, we'll need that smoothly. Trans into the individual episode pages. Perhaps we'll have a crack at that.
Nice. yeah. But there's so much other stuff. We've got, scroll animation. Which is, fabulous stuff. you won't need the library to do most of the things that people are doing. items as you're scrolling down could be moving from left to right on your screen and other things being affected by animation as you scroll to a certain point.
So that's all the interesting stuff they used to need, framework for coming. So I think we'll need two for that. But then also I think before we can start talking about how we might use this and talking about maybe working with clients, that there's a whole bunch of other stuff, which is new typography changed.
We're getting color fonts, we're getting variable fonts, we're getting so much stuff coming to, just HTML in, terms of, units that will allow you to, Interact with the, font itself in a way that somebody who's into type might do. So I think that'll be a big learning for us, learning how to use, typography better and, and web images.
Again, we've got, so much coming in the way of new formats, which are more optimized, but not just that ways that we can treat again with CSS. The way that images behave. Images have always been a bit of a problem. 'cause they're an inline element. Yeah. You stick in and then you stick it a hundred percent and then, if you set its boundaries, with the width all the heights, you're gonna squid in the wrong way.
we've now got things where you can put a cover on it and you can let the, you can let the available space change. So if you have something in the center of an image, you can be cutting off the sides of that image. As it's moving more squishy. So there's a lot of stuff in the CSS to play around with the images and colors.
Oh wow. I dunno where to start on that one. We've got new colors and some palettes and stuff. yeah. once we just had hex values and, and RGB, but now we've got a whole range of, new stuff and a new way of working with color. And finally, and I think this is where we're going with.
With a lot of this spec that's already out there is based on user preferences. My guess would be, and that's why I think we need to cover it, is that this is the influence of, the, browser vendors. Yeah. In the W three C and the fact that they also produce, devices. I, see a much more of an encouragement of people to choose their own experience of the web.
So we're seeing things coming in. Where we can set up the user preferences for somebody who wants dark mode, I think that's gonna become common practice. So you can choose your light or dark and you can see apple's very much promoting that. I was very surprised with the first site I did that at Dark Mode to see just how many people came in 'cause it's not the default.
and we've got things like motion as well. Yep. so you.
Be experimental with your motion. But if somebody set their device up to say, I don't like motion, please make it stop. You can code things up so you don't offend those people. And it's already actually in our site, if you go to the scroll up button on our site, there's a little thing, I've just put it in there, but it's actually behind a motion control.
So if you set your device to say, I don't like motion, it'll just go straight up to the top. So great for accessibility. Yeah, it's that kind of stuff. And there's a lot of things and the idea of themes that you might create. So a lot of people want high contrast. And another big thing that we forget, again with the, a lot of, I think where the web's gone is to make sure that it really is worldwide.
So people are very conscious about, so you've got now got one where you, if you have a preference for less data. You can as a designer then say, okay, this person doesn't want to use up their data. It costs them much more money on their phone. You could say, okay, I'm not gonna send them this image. I'm not gonna load a font.
And they can have the system font, you can choose those kind of things. So I think we're gonna see a lot more in that direction. And I think. That I think we're viewing the webs very differently, not this sort of image we used to have. It's now this squishy thing that will fit into any device to whatever a user's preference is, if they want it to, not to display so much color, if they want it dark or light.
And I think that's where designers are going, and I think that's where all of the stuff that's coming out from leading us,
[00:41:43] Nathan Wrigley: interesting to see. So this is a complete aside, but it's, it'd be really interesting to see where the devices go.
[00:41:50] David Waumsley: As a result
[00:41:51] Nathan Wrigley: of this. So at the moment we're very used to the paradigm of the home computer with a big CPU in it and the mobile phone, which has a, again, some kind of chip in there to do an awful lot of work.
And a lot of the settings are inside the, thing itself. my dark mode can be governed by, the oss, but also I can alter the font size. In the oss and it'll be interesting to see if in the future it
[00:42:20] David Waumsley: feels like
[00:42:21] Nathan Wrigley: a lot of this is more orientated to giving an app like experience, if you just flip the device around and suddenly it's changed. But it's changed in a way, which is, it's something that's, better. Not something where you lose sight of what's going on and you'll be able to have control and agency over whether things move or not and how much data you are consuming.
All of these kind of things. And, it, I really can't predict where it's gonna go, but I have this intuition that for companies like Google and Apple, this must be an incredibly important moment because they're completely tied up with their, ecosystems, PCs and Android devices and iPhones and all of that.
And the more that this new version of the web, like Jensen said in 2018, how everything's changed. This new changed version of the web really will open up to those device manufacturers a whole set of opportunities, which at the moment were just bound inside a browser and now it feels they can step out of the browser and be a, maybe the browser will be it.
That will be all that you need for all the things. Who knows?
[00:43:32] David Waumsley: I, and I think that's it. The web, the web on everything is the mission behind this, which everybody's behind. And I think one thing I didn't mention, and we had a nice conversation, you, interviewed somebody, for the show on this, and that's web assembly.
That's another thing which I think comes in to this kind of component based design. it. it's really fascinating. It's been used in WordPress, isn't it? I think if I'm, you correct me if I'm wrong, to YouTube, so you can now go and try out WordPress without installing it Yeah. In your browser. And I think that's really gonna be fascinating.
It's, away from what we're doing as web designers, but where needed, it's allowing this opportunities for things like games or other apps that are written in completely non-web languages. To be able to be converted into a language that will then display and could be sorted into your html. I think it's fascinating, Yeah, I think it, kind of
[00:44:31] Nathan Wrigley: almost like the capabilities of Flash brought into HTML Exactly. In some respect, which is gonna be quirky. And so, I guess maybe we've exhausted the, the bits and the pieces for this episode, but really the endeavor here was to just to lay out what's gonna happen over the next.
10, 11, 12 episodes. and hopefully if you view those episodes as a whole, it will, it'll give you a real good primer on what's coming up and what's available right now. And, that's, the endeavor. I think you've laid that out beautifully, David.
[00:45:04] David Waumsley: done. Okay. let's, hopefully it's not a waste of time for people.
So next time, yes, we'll start with the CSS layout. Some we'll be. Really taking what, Rachel Andrew says on this. And I can think of no better person to, to, reference for this.
[00:45:21] Nathan Wrigley: Okay, perfect. in that case, we will knock it on the head, as we say in the UK for episode two of the no script show.
We'll be back with episode three all about CSS. So get your, get your notepads out 'cause there'll be, some notes to take no doubt. And we'll
[00:45:35] David Waumsley: see you next time. Bye. Okay, bye-Bye.
[00:45:38] Nathan Wrigley: Well, I hope that you enjoyed that. The second episode of the no script show or the no script web show, we haven't quite decided yet. If that has piqued your interest head over to this URL, noscript.show I can't in all honesty, say that we've built out the functionality for you to subscribe. Maybe by the next episode, I'll have figured that out and have a link for you so that you can actually subscribe to the podcast.
But certainly, that will be available, but you can follow the episodes over there. Become familiar with that website. And the website really is the third guest. It is going to be developed and maintained and optimized as we talk about the different subjects. So hopefully that will be of interest to you.
If you've got any comments about that head over to WP Builds.com search for the episode number 357, and we would love to receive your comments there.
Don't forget that we've got the schedule page WP Builds.com forward slash schedule, where you can calendarize all of the different things that we've got going on. Typically two or three shows each week. But yes, that's all I've got for you this week, except just to say a big, thank you to GoDaddy Pro.
GoDaddy Pro the home of managed WordPress hosting that includes free domain, SSL, and 24 7 support. Bundle that with The Hub by GoDaddy Pro to unlock more free benefits to manage multiple sites in one place, invoice clients, and get 30% of new purchases. You can find out more at go.me/wpbuilds. And sincere thanks to GoDaddy Pro for their ongoing support of the WP Builds podcast.
Okay, we'll be back next week. We'll have a, this weekend WordPress show, check out the schedule page for the other bits and pieces that we're doing. And we'll have an interview for you as well. I'm going to fade in some very cheesy AI generated music and say, bye-bye for now.
