[00:00:00] Nathan Wrigley: Hello there. And welcome once again to the WP Builds podcast, you have reached episode number 343. Entitled is browser interoperability a threat to page building? It's a catchy title. It was published on Thursday, the 28th of September, 2023. My name's Nathan Wrigley, and I'll be joined in a few minutes by my good friend, David Wamsley, to have that chat. But first of all, a few bits of housekeeping.
The first piece up is to say a big, thank you to anybody who in any way you connected with the page builder summit that happened last week. It was from my perspective, at least anyway. A great success. So thank you to all the sponsors, all the speakers, all the attendees. And of course, to Achen le Roux and Sunita for helping me put that event on it was a real success. Hopefully page builder summit version seven will be around the corner in 2024.
The other thing to mention that, no sooner have we finished one thing, then we're onto another black Friday is coming. It's a little bit of time away. And that's why I'm mentioning at the moment that if you have a deal. Or product or some service that you want to have on the WP Builds black Friday page. I'm at this point taking submissions. So if you want to for free list, your product or service had to WP Builds.com forward slash in black that's WP Builds. Dot com forward slash black. And you'll see an ad your deal bottom, click that, and it will take you to our form where you can submit your deal. And hopefully at that very busy time of year. Get your product or service in front of a well, to say it modestly a very well attended page.
The other thing to mention is if you in the future have anything to say about WP Builds. Please share it on social media, wherever you like. We don't mind which platform you use, but if you're going to write a comment, we'd love it. If you use the commenting system built into WordPress. So let's say for example, that you've got something to say about this post. Why don't you head over to WP Builds.com search for episode 3, 4, 3, and leave us a comment there. We would really appreciate it.
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, but by GoDaddy Pro to unlock more free benefits to manage multiple sites in one place, invoice clients, and get 30% off new purchases. You can find out more at go.me forward slash WP Builds. Once more go.me forward slash WP Builds. And true sincere thanks to GoDaddy Pro for helping us keep the WP Builds podcast going.
Okay. What have we got for you this week? While at the top of the show, I said it was called is browser interoperability. Threat to page a building. It is indeed a catchy title. David and I chat about this. We talk about the days when it was really difficult to get anything done because no browsers did anything in any way. The same. We talk about the leap in recent years where browsers have got a lot of compatibility. They seem to talk to each other more and we get into the thick of what is coming down the pike. With browsers, all of the new support for the very, very exciting CSS spec. So yeah, loads to say, and I hope that you enjoy it.
[00:03:58] David Waumsley: Hello, this is the 16th episode of our Thinking the Unthinkable series. And I think we've come up with our catchiest title so far, which is a browser interoperability a threat to page building?
[00:04:12] Nathan Wrigley: This is so widely, almost anybody can find this episode accessible. My grandmother, as an example, she would love this.
[00:04:20] David Waumsley: I've
[00:04:21] Nathan Wrigley: you know,
[00:04:23] David Waumsley: never even heard the word interoperability until quite recently, but in this case, it means that the browser manufacturers are operating In conjunction with each other to coordinate the features they release, and it's monumental this.
[00:04:38] Nathan Wrigley: Oh boy. If you're fairly new to the world and you've been using the internet or web development technologies for only the last few years, you are so lucky.
[00:04:51] David Waumsley: Yeah.
[00:04:52] Nathan Wrigley: we went through a period at the beginning where. Oh boy, going back there was Netscape Navigator, there was Internet Explorer, I was using Internet Explorer right back to, I think, version 3 and 2 and things like that, Internet Explorer 5 and 6 were particularly troublesome, and essentially, the way that they just didn't work with one another Each of the browser manufacturers were creating the browser utterly independently with a team that never talked to another team.
So Internet Explorer would never talk to, oh I don't know, let's say Firefox when it came along. And what came out of your HTML, the way it was presented, looked really different. So there were all these things that you had to go to make it look at least vaguely similar. And we had things in the contract like, if you want it to work on IE6.
You're going to need to pay extra money, that kind of thing. Do you remember all that?
[00:05:49] David Waumsley: yeah, the problem is still there to a certain extent. I think what's, since 2019, apparently Google, Firefox, and Safari have come together to solve this. Develop a frustration of not knowing what they can implement when, and if ever. And, someone who I think she works for Google, Rachel Andrew.
I always want to call her Julie Andrews every time, but yeah, she's a wonderful. She's. I think she's from Yorkshire, actually.
[00:06:21] Nathan Wrigley: Oh, all the best people are, David,
[00:06:23] David Waumsley: I know. Yeah. Anyway, she I've seen her talk a few times about the fact that there is this issue. There's a big buzz over a new CSS feature that might get introduced by Google that's getting into Chrome and that get loads of social media attention.
And then nothing can it will take years for that to be implemented, if ever, leaving everybody. All the buzz around a new feature, it's lost and people don't implement it or know when to implement it. Finally they've all got together and thought we need to end this madness and put our heads together and work with the W three C and share what's going to go through to c s working groups and things like that. Yeah. And it's been working now. So the first one, the first year was 2020. I think they agreed on some things to implement, and it's meant now that a lot of new features are coming to C S Ss and we know when they're going to arrive and there's measurements to how the browsers have implemented them.
Yeah. We're moving forward, really,
[00:07:26] Nathan Wrigley: really is amazing, actually. I guess if my children were to look at the internet, they would assume that they would assume more or less correctly, that if they had an Android device, or a desktop device, or a whatever device, an iPhone or whatever, that broadly speaking, The link that they're sharing with all of their friends is going to look identical, but that really genuinely wasn't the case.
IE6, for example, I think it was IE6, didn't support transparency in images. And this, you have to come up with all these JavaScript kludges to make things like that work now. More or less everything that you're going to need, I would say 95 plus percent of anything that you're likely to deploy on a website will be supported without you needing to look it up.
It's only these new edge case things, which we'll probably get into a little bit later that you need to be concerned about whether or not that's supported across the broad across the board. But broadly speaking, it's plain sailing these days. Oh, how lucky we are.
[00:08:27] David Waumsley: It is better. I've been in a If you had those sort of situations because people don't know that their experience is different on different browsers, do they? And clients, I've had this before where the managing director, just as we've released something says it's not working on their browser in the way that.
they expected and, I've had to waste a whole day that's not being paid for to try and correct something because this person is using this old browser and hasn't updated and that, but they're the head of the organization. It's so yeah, so hopefully, a lot of the new stuff that's coming, this is, there's a lot of things that have been going on with this.
Not only do we have. This working together, and I don't understand it, but certainly there's been advances in what the browser can actually do now. So there's an awful lot of stuff that can go on the list that browsers have now able to do, which couldn't do before in terms of manipulating the DOM and how it does that.
[00:09:28] Nathan Wrigley: yeah. You know what? The whole. capabilities of browsers are so amazing now, even just things like an example I gave to you prior to starting the recording was that it's really obvious to me now that a lot of what we would call SAS software that used to, they used to have a Mac version and a Windows version and then they would have the sort of online version.
It's now pretty obvious to me that a lot of them have just ditched their Yeah. The Endeavor's on the Mac and Windows and they're just shipping a PWA, like a web app, which is basically a wrapper for the browser version and everything works, there's almost nothing that you, that's not true, obviously, like core animations in Mac OS are still incredible compared to what you can do in a browser, but the day isn't that far away, I'm sure, where you'll really only need to build it once And I guess, hat tip to the likes of Firefox and Google and Safari for talking to each other.
But my son recently got his hands on a Chromebook and it's a browser. It's a browser with a keyboard basically. And that's all it is. You switch it on and there's a few bits like, you've got wifi settings and things like that, but broadly speaking, it's a browser. And I was amazed by the quantity of stuff that I could simply do.
In the browser, that, I thought, that would be out of bounds, and it really isn't. The, I think the only holdouts for me for the Mac, using a Mac as opposed to just dropping everything and using a Chromebook, are things like video and audio.
[00:11:12] David Waumsley: Yeah.
[00:11:13] Nathan Wrigley: I still don't feel that's been caught up with, but I can't see that it, that won't happen.
There's some fairly good video editing apps. They're not as good, but I imagine the day will come when all of that will be possible.
[00:11:26] David Waumsley: Yeah, absolutely. Shall we talk about, I don't know, what's coming with CSS, because this is what's, it's really my obsession at the moment, I
[00:11:37] Nathan Wrigley: I really isn't it? Yeah. It's amazing that the way that you've rejuvenated your interest in it. Yeah. Let's do that. Go on.
[00:11:44] David Waumsley: Yeah there's so much that, a couple of people who I now follow, and they both actually work again for Google, Adam Argyle, and a guy, a woman called Una Kravets, two people, and they've, I They both, and I agree with them. It does feel like this for Adam Argyle. He says he sees where CSS presently is in a similar position to the boost that JavaScript got when it moved to the ES6 and what you can now do.
All the stuff that people have got excited about with React and things like that. The stuff that you can now do without needing. PHP or something in the browser, but Unicrab, it's also called it the sort of golden age of CSS with all the stuff that's coming in there. So there's a real excitement about what that can do.
But listing all the stuff, shall I just
[00:12:33] Nathan Wrigley: Yeah. Let's pick out a few of the interesting ones that make, honestly, I think a lot of people won't have. Listened or heard about this because it's not the hotness for most people at the moment. So yeah, go nuts
[00:12:45] David Waumsley: Yeah. Some of this is old stuff that's in before all of this agreement grid, obviously I think is, I think that's still people are catching up on that because grid is the replacement for flex, really for whole. Page designs and whole sites you can design with it and sub grid is coming to that soon.
And that means that within these grid layouts that you can set out for all your pages you can then align the sub grids with the parent as well. And that's yet to come. So I think that's going to be a massive shift for me. And we'll talk, maybe talk a bit more about this is because Flexbox has been with us for over 10 years.
It's been the way that most people lay out the pages the most. The way that page builders work, and that's why whether this can be a threat, because I think because they are all flex based, I think grid is, there isn't really anything that grid can't do that flex does already, and it can do more in two dimensions.
Yeah but the new, the really new stuff that's coming, obviously, there's a CSS. Fairfields, but we'll make a big difference. So you can be setting globally or styles and that and referencing them in your document. Nesting is a new thing which has come in, which is well, the ability to, as you would have been able to do with the pre processors like SAS, where you can Actually group your stuff.
Instead of writing this really complex code where you have to reference the title for a card and then the paragraph for a card, you can embed it within the same command. And I think that's really going to tidy up CSS and the way that you write the stuff. So it's going to be less of that. I think a big one for me within that one there's also, I think.
Due to come and I think this is maybe where sass will disappear because nesting was a sass thing mixins, which is where you'll be able to do programmatical things with CSS. So I think that's but that's in the future. Cascade layers. That's probably The most exciting thing, I think for many,
[00:14:49] Nathan Wrigley: this is great, isn't it? Explain this though.
[00:14:51] David Waumsley: Because CSS has always been always cascading style sheets and that cascade has always meant that that the thing that's lowest in the document overrides the stuff above it.
So you always have this real difficulty and different elements have different levels of priority within this. You always got stuck with things not working as expected because you didn't know where they came in the cascade and specificity always was the issue.
[00:15:18] Nathan Wrigley: yep,
[00:15:19] David Waumsley: So trying to problem solve.
What we can, what's now coming is this cascade layer where you can effectively take out, and this will be useful. probably for page builders as they presently are is the fact that you can assign a layer and it has its own specificity, which is kept separate from the rest of your CSS. So it could, it's probably not a threat to page builders as such.
And probably it's something that can implement, make it a lot easier to solve problems. If you're plugging, adding onto an existing framework, you can probably separate out your CSS with it. But yeah, but I think that's really exciting that because it's. And I think maybe because from what I understand with the way that people are building websites more these days is not so much as I grew up where you had your one style sheet, this single place where you would adopt all the styles for every element that were on your site and everything.
There's a much more component based thing where if you've got certain card. Designs, you will keep that CSS and HTML as a very sort of separate unit in itself that will be sorted in. So in some ways, similar to page builders anyway,
in
[00:16:29] Nathan Wrigley: yeah, you've got like a, maybe a row or something and you give the outer wrapper a certain ID and then that becomes the sort of container. But it's still, all of that CSS had to go in, in the whole, usually style. css or something like that. And it was, it's so easy to get lost in all of that.
Whereas if you can contain a piece of CSS, which you know cannot interfere with anything outside of that container, it allows you to code more freely and you can dump that piece of CSS wherever you like, and you can retrieve it and know that, okay, here it begins, here it ends. That's just to do with, I don't know, a good example would be the card that you mentioned.
If you've got the CSS for the, that card and that's the container for it. That, I've always wished it to work that way because, after working on a project for a week, you do inevitably end up with 1, 200 lines of CSS and you can't remember where anything went, but that makes it so that you don't even need to think about it.
It's just, that it's contained. You can't interfere with it. No matter what query, sorry, no matter what piece of CSS you write, you are not going to override it by something else elsewhere. Yeah. It's great.
[00:17:40] David Waumsley: And then within that container queries, I think there's only Firefox yet to fully support that as we're recording this. And and that really changes our whole, the nature of responsive. Cause then we can decide to set our individual elements that we've. In a container to respond according to what is on the page rather than what is in the
[00:18:04] Nathan Wrigley: So this is such a revolution, isn't it? This is the domain of JavaScript totally at the minute, isn't it?
[00:18:10] David Waumsley: yeah, and I, and I think, that's, certainly it's an interesting time because, the page builder, we both use Beaver Builder. It's only just adding in a media query, a fourth one after eight years and you just think. Why? Because this is coming and we're going to have to rethink all of this again.
Because, probably you'll need to go to your media queries as a last thing, really, if you like, it's a sort of fix all things according to the whole of the whole document, you change things according to that, where we'll be actually containing the element themselves and making them responsive.
So I think that's very exciting.
[00:18:51] Nathan Wrigley: Yeah.
[00:18:52] David Waumsley: For me, I think, a few things that I think if you add in layers, grid and the has selector, which is a sort of parent selector, meaning that you could say, if this element, this card doesn't have an image, then make the text this big or whatever, or make it this size or whatever, that kind of high level ability to change a layout goes in with that.
So I, I can imagine re, I can imagine we need to reimagine how we might lay out our c s and everything. So I, that's where I feel the threat to page builders is. But I think there's so much more exciting stuff coming along because of things that are even going into H T M L. It's now becoming a thing where we've got the dialogue tag that allows you to effectively have a popup, and we've got popups coming soon.
That's,
[00:19:46] Nathan Wrigley: Yep.
[00:19:47] David Waumsley: Yeah, so a lot of these things that we've always looked for a JavaScript solution for. Now might be able to be done with just HTML and CSS. And along with that, we've had a whole new bunch of stuff that we can do with our with our fonts, with our colors. There's a whole new color ranges coming in there.
There's LCH, which is lightness, chroma, and hue, which is. What they call in HD colors and color mixes where we can mix two colors together to get the ones that we want, which would probably change the nature of how we might, it's interesting. Actually, I was just looking at a theme that had come out recently.
It was Brian Gardner from Foster Frost. And he was looking at this color scheme thing that you lay out where it's taken from tailwind, where you have different. If you like different gradients of one particular color that you can use. And I just thought, yeah, ColorMix is going to change all of that because you'll start to make your CSS because you can overlay it and change things with that.
So much is changing. Don't know where to,
[00:20:55] Nathan Wrigley: Yeah. And also in, in the show notes I'll probably copy and paste what you've written in our little preamble show notes. There's so much more than that, isn't there as well? All sorts of things about images and drop downs and the ability to, I don't know, things like put it this way.
There's just absolutely loads of new stuff and I'm willing to bet that if you've been using a page builder. For any length of time, you've probably become pretty much disinterested in CSS because you didn't need to know any of it. And yet we're on the cusp of an era where you're going to be able to do so much more with CSS, like you said, almost akin to JavaScript, that it's quite possible that CSS has a.
As a career will become a totally legitimate career again. If you're a CSS expert, goodness knows how you'd truly manage that. Given the weight of CSS there is to learn, but all of these new innovations means that you'll be able to achieve really cool and complicated looking things on a webpage, purely with CSS.
And you, in the past, this would have either been just forget it, or it was JavaScript no longer. Your skills have become going to come in. in high demand. You mentioned earlier that you're you've got this impression and I think, I don't think I agree that at some point grid as opposed to flex is going to become the dominant way of doing things, almost to the point where grid wins the war of how to lay things out.
But why is that incompatible with page builders? What is it about Grid that makes page builders look at it and go no, we can't actually do you, can we?
[00:22:46] David Waumsley: I think, yeah, it's, if a page builder was made with grid these days, and I saw it, when this goes out, this will probably be old news, but I did see that the implementation, I think of Elementor's grid on that meant that you weren't dragging and dropping, which is Flex's design for, isn't it?
So within It's, it's one dimensional, so you can take a row at a time. And if you drag a new column into that row, then everything adjusts and squashes up to allow this new column to come in.
[00:23:15] Nathan Wrigley: A. K. A. Flex. Yeah.
[00:23:17] David Waumsley: Yeah. Where grid is just set, so you have to know. But they've already done that in a way.
Notice someone's complimenting how you added the new content to the grid layout. And I thought that's how a new page builder would be re imagined if Flex never existed. If you think about it, there is no real reason why Flex, there's nothing that Grid can't do that Flex already does.
It's just that this works in two dimension. The only scenario where, is where you need flexibility. doesn't know what needs to be on the page. So the obvious solution that people, when people say when to use flex and when to use grid, almost everybody states the menu bar, where you want to add into your system, a new menu that's going into the navigation on the top there.
You want everything to adjust. So everything budges up to make room for the new thing. But in reality, there's no reason why you need to have that at all, is there? If you just add in another grid.
[00:24:22] Nathan Wrigley: But also, yeah, I was going to say, also, cleverly designed tool that detects that you're dragging something in and therefore says, okay, we'd had seven items. Now we have eight. Can we make the grid eight now, please? So at the moment, when you drag in another row and it's sorry, another column say, and it's a flex layout.
It just, you don't need to worry about that. If there was three and now there's four, it just makes everything. 25 percent or it makes things a quarter. Whereas grid, it'll just be like, no, not having any of that. That fourth one that's going on a new row because the row, there's three columns. The grid is three, but surely somebody with a bright spark somewhere will say they're dragging in something else and they've tried to put it next to it.
We can see that the drop zone of it is next to it, not under it. Okay, let's make the grid four now, and I would imagine some clever bright spark somewhere is working on your ultimate page builder, David, that includes drag and drop grid. Maybe it's not possible, I don't know.
[00:25:25] David Waumsley: Yeah, I'm stating grid as in it's set, but actually it's probably it's most responsive because you can set it to, you can set it to auto, so it will automatically respond and it will respond in, in two dimensions as well. So yeah, so I do imagine that, for the whole, I think.
Page builders will need to be re imagined given that this is designed to be able to do a full site, not row by row, which is where page builders have, they've been brought up in an era where you didn't have that opportunity to do that. And at the moment, all that's been added by request is to add grid within a working flex system.
So I think, know,
[00:26:07] Nathan Wrigley: So before we get shouted down and say, but you can use grid and so
[00:26:11] David Waumsley: Yeah. Yeah.
[00:26:12] Nathan Wrigley: there is that you're using grid as a little bit of a wider row, which in itself is using something like flex. So it's it's grid within flex, which is probably also within, I don't know, bootstrap or something like that.
[00:26:26] David Waumsley: Yeah. So exactly. It's not, I don't know of any system in WordPress at the moment where your basic. Parent grid is laying out your header, your footer, your sidebar and your main content area within that basic grid format, so effectively with grid, you could just, at any point you could just swap it over.
So the head's where the foot is and the foot is where the head is and the sidebar
[00:26:47] Nathan Wrigley: Right,
[00:26:48] David Waumsley: None of them were working like that. And then within that, you would have further grids. All of them are separated, aren't they? Into some flexbox container of the header and the footer and the content in the middle is usually a flex.
And then grid has been added within that.
[00:27:02] Nathan Wrigley: so presumably that is almost like a brick wall in the middle of the road for the current slew of page builders. Their implementation, let's work on the basis that grid in a few years is the dominant way many people wish to do things because of the flexibility it brings. Honestly, it's ridiculous that I'm saying flexibility over grid, just somehow that doesn't work, but never mind.
But these tools, they can't really... It's a total rewrite, isn't it? You can't change Beaver Builder, say, or Elementor to adopt this other system grid in the way it's implemented in the moment. You really are creating a fork of the product and everything prior to that fork will work in that way, and now we're going on to a new way of doing it.
And this is the catchy title is browser. Interoperability, a threat to page building. It's around that, right? It's on the premise that grid will win and therefore the page builders that we've got at the moment simply can't do it. It'll have to be a new page builder if page builders, continue.
[00:28:09] David Waumsley: Yeah, I think it's, I pick out grid all the time because I find, as I'm looking to people to teach me how to do CSS, I look to these people who know so much more than me and I follow them. But it is interesting because I've come in later in a, almost skipping because I was busy with the page builders, the whole grid, the whole flex stuff.
So I come in and I'm going. Why are you not using grid? And that more as I watch people do it, somebody like Kevin Powell, I realized that he's saying, yeah, you might want to use grid for this now, where before he would, he would still want to stick to a sort of flex. And I can see particularly, I was referencing a talk, which is at the time we were recording this, there's just been CSS day where there's this.
All my credits was doing the talk and she's very much talking about with all of the new stuff that we've got in now, the difficulty is there is so much new stuff, but actually a lot of this new stuff will replace it or make simpler what we do. It's just that we haven't worked out how to do it, how we can connect these layers, how we can use the container queries instead of using media queries, how we can, even things I didn't even mention there where.
Text wrap and balance and all of these kinds of things and CH units all about how we lay out our text. And actually we can be setting those up to sort out our layouts as well and work for multi language as well in, where previously we were thinking one language, we maybe put some padding to stop our text.
getting, touching the next unit too closely by putting a bit of padding on the right hand side. We probably won't do that any longer because, we've now got. Direction with our text now. So we'll actually be using different ways of putting the padding. So if someone's reading it in a different language where it's going from right
[00:30:04] Nathan Wrigley: right
[00:30:05] David Waumsley: to left the padding will be on the other side and things like that.
So I think there's an awful lot of re imagining almost every element of CSS at the moment. So I could imagine. It's not all there, but I can imagine that nearly all the page builders would need to rethink their future.
[00:30:22] Nathan Wrigley: Yeah, I think so. So not only have we come up with the least click baity title for an episode, we've also got the content which we're desperately trying to describe. All of this is visual, it's so difficult to describe what's going on. Just harking back to that point that I made a moment ago, where I suggested that there will be more of a career in CSS in a year's time than there ever has been.
What do you make of that? Do you think that in the same way that there's like JavaScript engineers, and if you just know JavaScript, you can have a fully fledged career. Do you think that this added complexity, all these brand new things that are coming into CSS, do you think that, do you think that makes a CSS person, a person that's going to be desirable, there is a career in that?
In other words.
[00:31:13] David Waumsley: Well, Yes, I think so. And I think page builders will be different. I think. We're just seeing the start. It's interesting as CSS has now become the big thing now. And because of the amount of stuff that browsers can do and the working groups that are going on and the history we've had with the web, I think there is so much need now to see HTML and CSS doing most of what we want WordPress to do, most of what I've ever needed to do for nearly all of my projects.
And I think there was a moment. And this is where I disagree with the future, where WordPress went with the, it jumped on the JavaScript wave. And that was when we had React where effectively you could manipulate the DOM by putting it in JavaScript and then your HTML and CSS sat within that.
And I think there's a bit of a movement against that at the moment where JavaScript's going. For most of what people need, they're not building Facebook, they're not building an active membership site where things need to move around. We just need the HTML and CSS. The CSS is going to get better. So I think the JavaScript now is really a skill, which.
Started to become a front end skill, didn't it? When you hire that, there's some articles Chris Coyier mentions one about the fact that there are two types of front end developers. There's the one that might be a React person who's dealing with your HTML via React. And then there is the traditional sort of building it up through HTML and CSS.
And I think that latter one is coming back
[00:32:51] Nathan Wrigley: Yeah. Yeah. That's interesting, because I think a lot of this is significantly more complicated, and new, that if you do immerse yourself in this, then I honestly think there's a career in it. And Chris Coy has a perfect example. He started writing about... CSS at a time where more or less it was just new prior to CSS, everything was done with tables and you, anybody could work out how a table work.
It was infuriating to make it work, but the principle of it was dead straightforward, but then cascade, cascading style sheets came along and there's loads of little nuances and, padding margin, the whole cascade itself and floating and all of that was complicated. You had to figure it all out and now that there's all this new stuff coming around.
Which will really revolutionize what you can put on the page and the sort of interactivity of it. If there's a thing over here, then this thing over here might be slightly different. I think there's a job. I really do. And I think anybody coming into coming into the web industry who really likes the way things look, then now you don't need to worry too much about Java.
That's not true. I think you need to worry less about JavaScript. I think you could just be a CSS person and that would be great.
[00:34:10] David Waumsley: Yeah. And I think for what we do, JavaScript sure is going to be needed when there needs to be some real clever interactive stuff with data being brought forward. But for most of us, we are essentially our sites are static. And the JavaScript we need is often for, again, something else, which is coming to CSS, scroll animation.
[00:34:30] Nathan Wrigley: Yeah.
[00:34:31] David Waumsley: All of these things like pop ups, drop down, scroll animation, all of these things which we've relied on most of us will use JavaScript for, are coming to the HTML because I think that's been a separated thing off. So I think the JavaScript Developers of the future won't be, won't generally be the people working so much with the React and stuff and doing HTML via it to manipulate the DOM.
I don't think there's a need for that. There's a comeback on getting that back to HTML and CSS with CSS doing more of the basic JavaScript stuff. But the JavaScript will be needed for, obviously the clever interactive where it's pulling in data from other sources and all that kind of clever stuff, and that will be way above our heads, but really when it comes to the sort of clients we've ever needed to deal with as WordPress users, we're pretty much covered with the future of, I think, HTML
[00:35:29] Nathan Wrigley: So anybody who's been listening to this podcast more recently will have noticed that your interest in WordPress is waning. If somebody were to come out with a really fully featured, let's call it a page builder but it was utterly based upon something like grid and it had all of the new things that you've gone through and you can read about in the show notes, would that draw you back into WordPress?
Is there any bit of WordPress which you wish? Your non WordPress y sites could have. So obviously, dynamic data and things like that come to mind. The database, anything that you can pull out of there. Would that interest you again? Or is it, are you just, has that ship basically sailed and now your fascination with CSS and making the output HTML as simple as possible?
Does that mean that, WordPress is beginning to appear in the rear view mirror for you?
[00:36:23] David Waumsley: Well, In some ways it is in the direction that it's going, but the interesting thing is, and I I guess I only. Saw a benefit of it in this last week. So I was quite interested in the static site generators. Most of the earlier ones were based around some JavaScript thing, which went out. And now the new one that I was interested in was Astro, which is, it basically just allows you through an editor to put out.
Playing HTML and CSS and adding JavaScript as you need it. But why these are great, if you're a coder, that is, that you can put into components, little sections and stuff and put them through. What I discovered recently, even non Astro, if you use those, it will still output its own IDs into your, or classes into your HTML.
Now with what I'm doing is using the basic WordPress with just short. cuts shortcodes and fields. I don't need to do that. So I'm putting sort of plain HTML within WordPress. So WordPress is still my favorite static site. Generator.
[00:37:27] Nathan Wrigley: Somewhat surprising that, isn't it?
[00:37:29] David Waumsley: I know, and I actually think it works really well, partly because I know it.
And but also, so in some ways I never seem to believing WordPress at all in any way at moment. because,
promises,
[00:37:42] Nathan Wrigley: promises.
[00:37:43] David Waumsley: But I also feel, in a way this was a bit of a mis I think if WordPress hadn't jumped onto the, for me at the moment, the way I'm guessing the world is going, if it hadn't have jumped on the Gutenberg thing, it.
It could have probably kept as a simple PHP unit as I'm using it now, using shortcodes and using the fields to create a new generation of the things that I would like it to be doing at the moment, I'm sure there would be I don't think it can go that route with the way it's gone at the moment, but I'm pretty sure that someone could build from the basic WordPress stuff, a new builder that worked with the new CSS.
So I think it, for me I've used WordPress all the time still, but I'm using it not in the way that anybody's leading it forward at the moment,
[00:38:38] Nathan Wrigley: There's got to be a video series in here, David. Come on, re reinvent the the, where you can't use Beaver Junction anymore, can you? Have to be your David Wormsley channel or something. Tell us, show us on a video what it is that you're doing, because it sounds really fascinating.
Do
[00:38:57] David Waumsley: Well, I did a video that I put up, which was just showing how I'm using WordPress as a static site generator, which was an early thing, but I wish I was a cleverer with this stuff because I can see there will be a new rave, so a new wave of people, I think who will just see it differently, I think.
I think the Guttenberg thing definitely came in with the excitement of, wow, what we can do with JavaScript these days and React and, but these were designed for single page applications, and I think I can see the turn against that already is like yeah it seems like a short lived period actually, and I can see a return to perhaps values that perhaps more reflect the W3C anyway, you know what I mean?
[00:39:42] Nathan Wrigley: do do you think that you're in an echo chamber there? In other words, because you're consuming lots of this content about CSS and, keeping it simple and static sites and all that, you're imagining that everybody else is doing the same thing. Everybody else should do what I do.
What the heck are they all doing? Because I don't... Feel at the minute there's a groundswell going in that direction. I don't wish you any ill will, but I don't see the same interest elsewhere that you've got, despite the fact that what you're doing seems really interesting.
[00:40:17] David Waumsley: no you're right. That's the thing always to be wary of is echo chambers. And definitely there must be a case of that. I'm now consuming different stuff, which is telling me that, but I think ultimately what's going on in CSS working groups affects all of us, and WordPress has to abide by what happens in that.
Doesn't
[00:40:37] Nathan Wrigley: That's true.
[00:40:37] David Waumsley: And And so I'm only looking to people who are above, if you like, the WordPress echo chamber and to see where that future is going. So I think, but obviously my interpretation of the fact that I think, it is the golden era of CSS. And I think there's a bit of reclaiming.
See, one thing that I've realized recently, just having to learn this from beginning and trying to create my own sort of WordPress setup, which is just the outputting these bits. Bits of HTML is that something which I think is getting a bashing at the moment is all of these frameworks. So things like bootstrap and tailwind, people are looking at it and going with the CSS now you can lay out semantic HTML and.
With what you can do with CSS, you don't need to keep adding specific classes to everything can label in it up. You can actually apply it with child elements with pseudo elements and everything and with things like has, you can apply those. You just saw what I mean, that you can now imagine that you think actually the basic thing, the HTML there can be, as it really always should have been separating your styling from your content the HTML, I think more than ever.
Can stand as content, which sits on the page as it's always meant to be, isn't it? It's always been
[00:42:03] Nathan Wrigley: so super simple markup with, without all this div within a div, just so that you could achieve some visual thing. Now you'll be able to do that more by, okay has something that's a child element, has it got an image in it? If it has, then do this to the text size or something like that, as you described earlier, all of that kind of.
The, how to describe, it's almost like a, it's like a programming language more now than it's ever been. The ability to do that means that the HTML can be super slim because you're not styling around. Unnecessary divs, you can style around what's actually on the page, so if it contains this, or it has this, or if it is this you'll be able to decide how it looks, and yeah, I'm in agreement, all of that sounds
[00:42:53] David Waumsley: Well, I think. You'll remember the time really, won't you? Because you came in with HTML and CSS learning that first, and you'll remember when CSS came in and it was, the idea was to separate style from content. Always. And I think because the CSS wasn't able to do enough, you needed to do some hacks and you needed some systems to do that.
And I think this is where we're getting back. It's almost like CSS has caught up to be a proper styling. Tool that does what you need it to do to be able to keep the HTML simple. So I think,
[00:43:25] Nathan Wrigley: yeah, sorry, carry on, on,
[00:43:26] David Waumsley: No, that was it. And I think, so the reason why page builders appeal to me is because, apart from the fact that, we have the tables and then we had the floats and then by the time Flex came in, it was quite complicated and there still wasn't, and he thought, give me a page builder, flipping heck.
I can't be, my clients haven't got the time for that, but now I think. Actually the CSS has got better. So the page builder, what I needed it for mostly was the complexities of layout was the main thing. And I'm thinking actually that's just got a lot easier, maybe a little bit.
[00:44:01] Nathan Wrigley: this is brilliant. So yeah, you're absolutely right. The promise of CSS at the beginning was that you would utterly separate the markup, the HTML from the way it looked. And then it turned out that a lot of fairly basic things that you wanted to achieve, not only were the browsers.
In disagreement about how that should be done. So that caused frustration, but also there literally was no way of doing it. And the design fairly simple things that you wanted to appear on the screen couldn't be done. So you had to wrap things in other wrapped things in other wrapped things and float things here and move things here and style this item and give it a background layer and all of that kind of stuff.
And. And now we're at the point where the CSS has actually caught up to what probably we've always wanted to see, which is basically a magazine. We want to be able to present anything we like, anywhere we like, but we couldn't. And so the whole page builder thing was a stopgap in the narrative that you're presenting here.
The whole page builder thing was a nice stopgap. But if we truly want to unshackle ourselves, there is no page builder at the moment that can do that. Maybe it'll come along. Maybe it's almost near, release. Who knows what brilliant things are being worked on. But we'll be able to put anything anywhere with simple markup and complicated I'm not sure that's any better now that I think about it.
Overly complicated CSS that you can't really understand, but really simple HTML. Yeah, I think that's, yeah, that is better, isn't it? Because CSS, at least you can like lump into different areas. Whereas the HTML has got to appear in the kind of correct order. Interesting stuff. I'm glad that it's going this way though.
There feels, it feels healthy when CSS just raw. CSS that all the browsers can agree upon when all of that complexity is the same everywhere for everyone. And we don't need complicated proprietary layouts that only 10 percent of the people are using. If HTML and CSS combined, maybe with a smattering of JavaScript here and there, if they can present more or less anything on the web that's a win.
[00:46:13] David Waumsley: Yeah, I think that's where we're moving. It is interesting though, because I, as I say, I have to learn from people who know so much more than me, but it's quite interesting where they are on the journey. I heard a debate from some real top people in CSS who've been training for a long time talking about Flex and Grid.
And it was mostly the conclusion they were fairly honest is that they're still mostly reaching for Flexbox, because even though they don't understand. I haven't found a use for flex spaces yet. One of its things, they still understand it better than grid. So I think we're a long way before people start to see what the new CSS, the stuff that's being worked on at the moment, and is committed to coming into browser support soon can do for us.
And I think obviously when that does happen, people will just. View, because I'm starting to do it now, as I'm trying to work out how to lay out pages and style them with my style sheets, I'm realizing, and I'm marking it up, they, I don't, I put out a site live, a very simple one, but I don't think it, I think it maybe has one class selector on it and one div throughout the entire site because it wasn't needed, and it makes you think, yeah, all of these, because they, it was needed.
If you wanted to employ something like Bootstrap, you needed to, I don't know. set out these style classes so you could organize it. I just think that's disappearing, it's
[00:47:36] Nathan Wrigley: it's kind of interesting because in, in the whole. Broad, if you look at the last 30 years of technology in general, and the last 20 years of the web, there's always been the promise of a simple future. Hasn't there, this technology is going to make everything so simple. I would be fairly amazed if everything that you've described turns out to be as simple as
[00:47:56] David Waumsley: Yeah.
[00:47:57] Nathan Wrigley: But. On the HTML side, at least, it's fairly straightforward, but I guess we'll just have to wait and see. I am really curious to know if somebody, because I do love page builders and I would love to know if somebody is coming up with a full on grid version of a page builder, and how on earth that even works.
That would be of great interest to me.
[00:48:20] David Waumsley: Webflow have actually done it, but I think effectively you put it in a flex or a good mode, but it's, I think Webflow is the only one I know of that's a page builder that fully supports a good layout, but. Again, although it gives you some easy ways to align your grids at where you're using them.
I think it's, I make it sound easy grid. There's a lot of, if you like understanding what's behind it, and how you might want to use it in certain circumstances, but they've got a different audience that it's not made, but I really can see particularly if what is very popular at the moment is presenting.
If you like templates, you can adjust to your needs and I can just. Almost see the future of it. I can almost grasp it. Even if I can't put it together myself where you just think, yeah, you'd be able to lay these things out with all of this new technology and turn that into a much easier to understand page builder.
That was very clean code. I think.
[00:49:19] Nathan Wrigley: But we have the elephant in the room here, David, which is Gutenberg. That's what everybody's gonna use, right?
[00:49:28] David Waumsley: Yeah. Oh yeah.
[00:49:30] Nathan Wrigley: And on that bombshell, we should probably wrap it up. Do you think? Have we gone through it?
[00:49:36] David Waumsley: We have, yeah, I think that's all we can say on it,
[00:49:38] Nathan Wrigley: All I would say is that David put a lot of thought into the show notes. He really spent ages and we've, there's dozens of links in there that we haven't managed to cover and actually loads of concepts that we haven't managed to cover. So I will endeavor to get all of that. I don't know if I'll include your images of your markup because, No, please
yeah but it's good.
It's nice and clean. But okay. So have a look at the show notes. There's loads more to be said there, but we'll be back next week. We haven't, no, we won't. We'll be back in two weeks. We haven't decided on the topic. We've got five to pick from, I think, but yeah, we'll be back in a couple of weeks.
That was. Fascinating.
[00:50:18] David Waumsley: I enjoyed
[00:50:18] Nathan Wrigley: live CSS. Vive la CSS.
[00:50:22] David Waumsley: Okay, see you in a couple of weeks.
[00:50:24] Nathan Wrigley: Well, I hope that you enjoyed that. Always a pleasure chatting to my good friend, David Waumsley about these things. He certainly doesn't know a lot about HTML and CSS. His new direction in things certainly seems to be forcing him to gather some new knowledge. So really interesting conversation about what it means for browser compatibility in the future.
As I said, at the top of the show, if you've got any commentary, please head over to wpbuilds.Com and leave us a message in our commenting system search for episode. number 343.
And you'll find it there also a quick reminder about our black Friday deals page. If you've got a product or service that you want listed head to WP belts.com forward slash black, and find the, add your deal button. And go and add your deal.
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. You can find out more by going to go.me forward slash WP Builds. And sincere, thanks to GoDaddy Pro for their continuing support. Of the WP Builds podcast.
Okay, we'll be back next week as it was a chat with David next week, we will have an interview. So hopefully we'll see you for that. We've always got our, this week in WordPress show live every Monday, you can find it at wpbuilds.com forward slash live 2:00 PM. UK time. Every Monday we do that. Hopefully you'll be able to join us and leave some comments there.
If not, we will see you soon. Have a good week. Stay safe. Here comes some cheesy music. Bye-bye for now.
