Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
Eric Meyer and Estelle Weyl wrote 1000+ pages of CSS... we had questions
776 Plays3 months ago
CSS: The Definitive Guide is exactly 1126 pages, written by Eric Meyer and Estelle Weyl. As they both said, "We read the CSS spec so you didn't have to." We ask them a ton of CSS questions and they gave us a ton of CSS answers.
Recommended
Transcript
Introduction and New CSS Features
00:00:00
Speaker
Meet CSS, the definitive guide. At 1,126 pages, you can definitely say it's definitive. Imagine how much CSS knowledge it takes to create a book like this. Meet Eric Meyer. I think this is a point that sometimes gets lost. Everything in CSS is a request. And Estelle Weil.
00:00:18
Speaker
And you can actually do that now with the has. If this element has these features, then it's sibling do this with it. We asked both of them a bunch of CSS questions and they definitely gave us some CSS answers. P has plus table has. P colon has plus table. TR and child 14 or something like that. P bracket and then ampersand or no ampersand a nested inside. So that would be one and one.
00:00:47
Speaker
So get ready, because there is a whole lot of CSS knowledge in this episode.
Expert Insights and CSS Versatility
00:00:54
Speaker
we are back and bat at css today with estelle and eric we have estelle a web warrior internationally published css author css explorer spunker founder of confident coding organizer perf matters mdn garden groomer international superstar and overall rad web badass. That's true. But for Eric, CSS Samurai, which is really cool. I love the alliteration there. It's pretty sweet. Internationally published CSS author as well. CSS Explorer, member of the CSS working group and great scribe I might have. Thank you so much for all that scribing. You've been doing your speaker, you have an event apart organizer, international superstar as well, and another Rev.
00:01:33
Speaker
CSS web badass y'all just made the CSS definitive guide fifth edition I can crack that thing and knock out an intruder with it and just wipe them out. That thing is a rad brick um Thank you for inviting me to edit some of those chapters. I felt so ah Privileged to do that and the book has been very it's very inspiring book. Y'all should check it out Anyway, these are our two guests and they are phenomenally ah Incredible CSS authors well known and we like them and we're thankful. Hello I'm just doing curls with a book here. double i love you're looking red how' in shape yeah anyway it it makes It helps the step ladder as well. Yeah, you should.
00:02:15
Speaker
you should tell them Well, I feel like you should just be sitting on a stack of them, Estelle. Like, you've got them for all these other purposes. You might as well make a chair. I actually do use them when I need to get the light at the top of the staircase. you If you have a ladder and it's uneven, you know, because you're on a staircase, because one is on one step. If you put two together, you've got a step. So if you put four together, you've got two steps. So you have to buy these foots and multiples.
00:02:41
Speaker
So it's a multi-tool. So you can learn with it. You can lift with it. You can level things out. at Wow. A lot of things that start with L. That's true. Oh my gosh. Thanks for having us on.
00:02:55
Speaker
Thank you so much for coming on.
CSS Reset and Hotlinking Experiences
00:02:58
Speaker
So Eric, I have a question for you. You you have ah written a book so large about CSS and I could ask you so many things, but the one thing that my brain wants me to ask is your CSS reset is the definitive CSS reset of the web.
00:03:14
Speaker
And if you were to add anything to it, you would actually be increasing the carbon footprint of like, you know, of, of how much it would be downloading, how much is getting stored and all that. And so have you ever thought about the responsibility that you have, or if you introduce an Easter egg or anything like that, like you, if you understand the power that you hold in your hands. Uh, yeah, I actually.
00:03:38
Speaker
I actually ah have thought about adding Easter eggs over the years. there was a This might still be the case. I haven't looked at my server stats in really a really long time, but there at least was a period where a whole lot of sites were we're hot linking to the reset.
00:03:54
Speaker
on meer like the copy that's hosted there for people to copy and use in their own projects, but they weren't, they were just pointing at it. And um some of them were like retail sites, like a large, I think it was a grocery chain, some kind of retail chain in the UK that will go unnamed, was hotlinking to it. And so I ah thought about like, some April 1st, maybe I could, you know,
00:04:20
Speaker
had um background image to paragraphs or the body or something, but I i never did. I would have over keyframes. You should have just, you know, Batman did, Star Wars did. I'm pretty sure this was before animations when I thought about doing this because it's been up there a while. um This was before animation keyframes, or at least before they were widely supported.
00:04:46
Speaker
Now that everything is supported, I think you should go for it. i do
00:04:53
Speaker
you There's so much you can do. that You should put it in a layer and then write important so that it takes, so that it overwrites and you can't do it anything about it. That's the first evil use of cascade layers I've ever heard.
00:05:16
Speaker
The wheels are turning. I like to come up with evil plans with CSS and don't follow through on any of them. and people I have followed through on evil plans with CSS in in the deep past, but maybe not that one.
CSS Accessibility and User Experience
00:05:29
Speaker
Although I could, I would generate a content, I could i could like insert an important
00:05:38
Speaker
High Z index positioned Dr. Evil saying, stop hotlinking or pay me $1 million. dollars
00:05:49
Speaker
But I probably won't because I always seem to default to doing their the real adult responsible thing. wow What can I tell you? e you know i had it ah no yougo still I was going to say, it's not evil. It's just an Easter egg, but um I did the ah learn HTML for web dot.dev. And so the example website is a machine learning workshop, which is the standard desktop school for machines who can't learn good and want to do other stuff good too.
00:06:19
Speaker
yeah And bell reference we are all shown our age because we knew that reference. right But it's full of movie references, but it does have ah two Easter eggs. And one of them is if you click the white switch, it turns the page off.
00:06:35
Speaker
Oh, I love it. So there's this little SVG of a light switch and if you click it, the whole page turns black and the little light switch has a little gray border so you can find it and turn it back on. Nice.
00:06:51
Speaker
You know, with Easter eggs and CSS, I find that I turn my bugs into Easter eggs. So like, I was, you know, I built the Firebase blog and we had these like little, uh, category pills where if you, I cover over them, it gives us like little fill and effect and, and you know, inverts the text color. And I wanted, I did a pill for Veet and I wanted to fill with Veet sort of like gradient blue, purple. But what I realized was I didn't have a relative positioning in the, uh,
00:07:21
Speaker
uh, inside of the pill. So it would go to whatever the nearest, you know, relative thing was. So which was at the background of the whole page. And it kind of looked like this disco lighting across the whole page. And I was like, yeah, I'm going to go with that. but That's getting shipped. yeah I was like, it didn't mean for that to happen, but so it's like you hover over it and it gives you a little V disco lights. And I was like, that not the intention, but that's, that's yeah i'm happy when the bug becomes a feature. I love it. Yeah.
00:07:49
Speaker
There's a ah ah troll I want to do with CSS. Oh, yeah, go ahead. It just sounds like a website when a bug becomes a feature and people just tell their stories. Oh, Adam, we have time for another podcast.
00:08:04
Speaker
I wanted to troll with CSS and ah make a site so you load it and it's and it's white there's or or dark or whatever, and there's nothing. But if you hit tab on your keyboard, you can see the one item that's in focus. And it trolls it trolls a sighted user to um experience a page as if you are an unsighted user that you really can only get access to the things you're focusing on. um And I thought this would be so fun to put people and like force you into the shoes. And then I was like,
00:08:33
Speaker
I don't know. Maybe it wouldn't be effective. Maybe just make people mad. I am 99.9% sure. I just saw somebody share something very similar. I mess it on like within the last 24 hours where somebody basically set it up so that an entire website is white on white. The goal, i don't I don't know if it had the focus thing. The goal was to find out if you if you could navigate a site using a screen reader when you couldn't see any of the text. I actually did a site where I blurred everything, but it was just for like it's it was just like a day's worth of the project and then I unblurred it, but I used the filter effect and blurred.
00:09:17
Speaker
but Everything except for if you had focus.
CSS in Job Market and Skills Importance
00:09:20
Speaker
So basically you couldn't see much. I mean, you could see where you were. It was like low vision, not because most people.
00:09:31
Speaker
We always think about building for people who are using screen readers who are like we think they're completely blind. But um most people are using screen readers actually have some vision. So they know where they are to some extent, but they can't read what you have. So the screen reader helps them i mean because people with dyslexia might use a screen reader so they can read it. But right ah hearing it at the same time as reading it makes them realize that they're reading the right thing.
00:09:57
Speaker
Yeah, I use a screen reader to read me articles in the car. I'm like, I can't ah drive and read this blog post, but I can't have the screen reader read it to me while I drive. I'm like, ah, this is nice to know your tools. Totally true. What voice do you use?
00:10:12
Speaker
Just the default one. I try to get used to the defaults because I assume most folks are using the defaults and I want to associate and learn the tools of most folks. So I do the same thing with like iOS or Android. yeah I don't go install separate stuff. I use whatever's built in. And then I've been turning it up slowly over time. I'm not really i'm still not that fast, but um that it makes me feel cool in like a really nerdy way. I'm like, oh, I listened to it at 2X. And then I'm like, but you go watch a YouTube video and they're like, buddy it up.
00:10:42
Speaker
but we but yeah And I'm like, that what? is There's nothing in that. They're like, oh, no, that was jam packed full of information of paragraphs. yeah You're like, that's amazing. um It's like musicians where they're just like, oh, yeah, I can talk to you while I do this like super eight count, crazy little doodly doodly doodly doo. And they're over there um processing in one speed and listening in another speed. Oh, God, it's cool. People are cool. Yeah.
00:11:07
Speaker
I normally could I never do that. I can't even tolerate that, that voice on TikTok. Oh, I know what you're talking about. Yeah. like it's where you I went on vacation. Yeah. You know, the person I'm talking about that. ah Yes. It's always the same voice and what and more annoying speed. I don't think so. I never thought about that, but that's so true. I never thought about it as like the TikTok voice, but now you say it, I can just hear it in my head.
00:11:37
Speaker
Yeah, I'm not. I'm not on TikTok. I don't even know. i'm I'm like too annoyed by the concept of it. I'm like, it's like commercials there. Every video is like a Super Bowl commercial. And I'm like, I'm not interested in Super Bowls on YouTube and Facebook. It's just TikTok is actually where allegedly the cool kids go. I don't know. I'm not there.
00:11:57
Speaker
i I hear it a lot.
Evolving CSS and Learning Challenges
00:11:58
Speaker
i We have a 12-year-old and they listen to ah like voiced memes. So people will take image memes and then they'll have this TikTok voice reading the text of the meme. Oh, yeah. It's an aesthetic.
00:12:15
Speaker
i think Let's talk about CSS oral ah box model.
00:12:21
Speaker
Don't make me go deep, young man, because I can do this. ah This was a thing. Eric, what you just described is a great form of birth control. Just tell people that your kids listen to the TikTok voice. Okay.
00:12:35
Speaker
All right. There is a new type of torture. It's a 2023 torture style. You know, I just, so unfortunately we had some of this podcast cut out due to technical difficulties, but one of the things that Eric and Estelle were talking about has got my brain thinking of this question. I want to ask you to is that we're talking about document dot layers, talking about all sorts of IE five, IE six. It was really, you know, it's showing the, like the, all the wisdom that's in this room.
00:13:04
Speaker
But the question I have for you, since this is the Bad at CSS podcast, is is that CSS is you know doesn't slow down. you know it's just so It's just going. Obviously, you you you might you might have seen your own book. um And so as time goes on, how do you two who have like you know been using CSS since it was like you know there. And now that it's doing all these things like grid layout, sub grid, cascade layers, view transitions, like ah what we live in the future. How do you go about adopting all these things? What are the things that you find that are hard about it? And like, how do you, how do you get to that book? Like, you know, like that's, that's so much information and so much change of something that you know, but is fundamentally almost like changing underneath your feet.
00:13:55
Speaker
Sorry, I give you a big question. That was good. I mean, very relatable though. Good question. you're you're mut You're muted. what what sorry while you While you're thinking about that Estelle, I'm going to show that I can make good on my threat. This is from the third edition of the book. It says speech rate.
00:14:16
Speaker
Yes. That was a proposed CSS property once upon a time. Speak, speak numeral, speak header, speech rate, volume, voice family. If you remember voice yeah voice family yeah used in the parsing hack known as the box model hack that there was voice family, a pitch, it was a what was a property. These are these all gone.
00:14:36
Speaker
they are't Yeah. they're Although they're ah they're trying to come back. The only Watson is is back on the the spec efforts for oral box. So everyone listening, the oral box model is not your mouth box model. It's your ear. It's the audible oral box model. So it's the ability for you to style the way the page sounds to someone. um it's It's super cool. um I think.
00:15:01
Speaker
I didn't realize that it was not implemented. I just went to MDN to check. So yeah in terms of nerdery for work, I use the Edge browser. for work. So I use Firefox for personal and Edge for um ah for work and Chrome for this podcast because it doesn't work on either other browser. Oh, I didn't know that. But my search engine for Edge is actually MDN, Mozilla Developer Network. Oh, that's a flex. It always returns MDN results. So if I want to see something exist, I just type it into the
00:15:42
Speaker
into the URL bar and then I get the results of the page. So I don't even, Eric knows this book by heart. So he just opens the book to the right page, but I use this MDN search engine. Oh, please. I search MDN all the time.
00:15:59
Speaker
But you're not as nerdy as me. You don't have it as your default search engine. No, I don't have it as my default search engine. ah But i my fingers have the muscle memory of prefixing any search about a web technology with MDN space and then yeah whatever.
00:16:15
Speaker
But anyway, so. That doesn't actually work in in and Edge if you have a default of Bing because that is like the world's worst search engine. Interesting. Nothing personal Bing but or Microsoft, but it's... You'd never find your result. Anyway, I interrupted you. Go ahead. No, no, you... it's a to So David asked us what we find challenging or difficult. I think you should... What do what do you find challenging with all the new CSS coming in? and Learning what's new and what's supported and what's not supported like yesterday. I was looking at generated content as one does turn There's a contents value So contents isn't actually supported so you don't need to learn this or mark it down But you can actually because you can replace an element you can put the contents back in the elements with other stuff because you could actually replace it except for
00:17:12
Speaker
When you replace an element, the only thing you can do is use an image. In some browsers, you can do an alt attribute on that image, but you can't actually replace it with an image and string because the image takes up the whole space. It's a replaced element. So where would that string go? So it's just like understanding, like that was such an esoteric thing that no one's ever going to need to look up, but I need to know this to a level to be able to teach it. And it took me like a week to rock it because I'm like,
00:17:44
Speaker
What is this doing and why? And so Eric and I, when we wrote the book, there's a, I want to subtitle on the, on the front page, we read the specs so you don't have to, and they wouldn't let us, it says web, web lane. Oh, that's good. But on the back, we got it on the back cover. Yeah. So it does say you read the specs so you don't have to, which is really what Eric and I do. We read specs so you don't have to. So the spec is like.
00:18:11
Speaker
three little short paragraphs and you have to interpret it. So when I was writing for MDN, so mike my day job is I work for open web dogs and we're a group of open, so we're an open source collective of four and a half people. So four full-time people and one contractor. So that's why we call her a half person because she's not really full person. I don't know.
00:18:32
Speaker
um So we're four and a half people working on MDN maintained documentation all the time. So we're like the largest paid group of people working full time on MDN content. And so I get to actually be look at all of the CSS modules where it used to be CSS one, and then it was CSS two and then CSS 2.1. And some people call it CSS three, but that's not a thing.
00:18:57
Speaker
There's a CSS4 working group, which I'm a part of, which we should maybe talk about. It's spicy. Yeah. ah Because I didn't know there was a CSS4. But there are like over 100 specifications, well, at least 85 that are actual real specifications. And some you're kind of like, is this ever going to happen? Right.
00:19:15
Speaker
So I'm documenting all of those to my NuSha level and you're kind of like, oh my God, this is so cool. And that's why I don't work on, sp I'm not on a work ah specification working group because these people have the ability to think about things that I never, like every single use case and every single language and every single one person out. So what am I not good at?
00:19:39
Speaker
uh, finding, you know, those total edge cases originally, but people who are writing these specifications really do. And it's kind of amazing what they come up with. So keeping up with all of that is really hard, but i don't you answer which we do it so that the listeners don't have to.
CSS4 Working Group and Future Directions
00:20:00
Speaker
your synthesizers and that doesn't mean that you're a Moog. It just means, right? yeah you You're taking the massive complicated chaos and squeezing out orange juice for us and saying, do you want with pulp or without pulp? And we get to choose. And we're like, this is so easy. So tell us about the CSS4 working group.
00:20:22
Speaker
Yeah. Yeah. Okay. So like the idea of it is the word and phrase CSS3 has been around for like 10 years. It serves a very important purpose. Oh, is it not 10 years? I mean, wait way twenty three yeah it longer than that. Yeah. And so it's like, it's been over 10 years. People are still using it. Like we want to hire CSS3. We teach CSS3 and we're like Damn, that is old. you You're trying to sound new and you don't. You sound like you don't know what you're talking about is basically anybody saying, ah come learn CSS3. And so what our goal is, is we need to we're we're looking at the term and saying this is a marketing term that's clearly um pushing CSS forward.
00:21:02
Speaker
it's ah It's a vessel that people attach themselves to for new educational content. So colleges probably would love a concept of CSS4. Online trainings, hiring. If you want to hire, you can say we need CSS4, but somebody has to define what CSS4 means.
00:21:21
Speaker
And it used to be cut and dry because the levels matched the spec numbers, but now we're all out of whack. So this working group is trying to get together and talk about what are the criteria that separates three from four and four from five and five from six. How can we include the community in this? So it's not just some sort of rained down thing. And yeah, Estelle, I see your hand up.
00:21:41
Speaker
Okay, so you're like, so the, you know, for career or something, they'll ask for CSS3. I don't know if you've looked at any job listings, but CSS isn't even mentioned. Like, all of these engineering roles I look at, it's kind of like, you need to know, because you're developing a UI, you need to know TypeScript and Wasm.
00:22:06
Speaker
And the reason I'm saying those two is because there's a bunch of frameworks listed, and I don't use any of them, so I don't remember their names. But CSS is not mentioned, so you might need to know Tailwind, but you don't need to know CSS. You might need to know React. Well, React is obviously like Next.js, Nuxt.
00:22:27
Speaker
right Like no one else for Yarn or NPM or any of the things like we're actually using every day. But they're... Git. Yeah. Oh yeah. They're used or you don't use.
00:22:39
Speaker
and Yes, I hear that. the The job postings are lacking CSS almost entirely. If they do have it, it's like a tiny footnote. they They toss it on there like, surely you know this easy one. Surely you can show up and and figure it out. right And most people are like, oh yeah, that's the one that's just like a paintbrush. And you walk in the house, you paint a wall. I can paint walls. And you're like,
00:23:02
Speaker
Wow, you have not written very much CSS roles. You would know that you are talking about the 1% of its capability, but whatever. um My favorite job listings are the ones that that say that ah you must have you know experience with React, ah experience with HTML and CSS as a plus.
00:23:23
Speaker
Those are the best. Don't think people realize that everything that is output is still CSS, JavaScript, and HTML. No matter what you're using. I mean, yes, there's there's me multimedia, but everything you're actually putting to the page ends up being a dom node, CSS, or a JavaScript function. Yep.
00:23:47
Speaker
you know though I would say this about CSS skills for a job interview because i i I feel like a lot of my success in my career is this. i From a very young age, I was very interested in CSS because ah like ah you know I was just learning it as a kid. no No hot takes, no opinions. To me, this was just like learning anything. like you know it was like I wasn't in any like dev culture. I just wanted to make websites.
00:24:09
Speaker
And, uh, I'm like, Oh, that sounds really good. Why did I stop doing that? Um, but, uh, I would make the, ah you know, make this and I'd be like, wow, like out of all the things that I'm doing, CSS is the most impactful because it's, it's moving things. It's changing colors. It is, it is manipulating the way in a positive way, the way that someone feels about my page. And I was like, this is a tool that, you know, I should be very good at.
00:24:35
Speaker
And so I was always very compelled to to do it. But I do know when I'd go out of school and I was interviewing at places, they're like, how much C-sharp do you know? How much JavaScript do you know? How much this do you know? And then during interview tests, i would they'd give me this page and they'd be like, okay, you know write the C-sharp function that will return the JSON to do this and that. And then and I would be like, oh, this page is so ugly.
00:24:57
Speaker
And so I just like clean it up. Cause I'm like, I can't, I can't concentrate looking at this. And so I'd be like, drop it in fonts, like, okay, let's get this here. I can then space that out here. And then, you know, and then I do the rest of the assignment and then they come in and they'd be like, well, well, that looks good. No one's ever done that before. And I was like, oh, yeah, let's do some CSS on that. And then you can see them whisper and they're like, it would be really good to have someone who knew how to do CSS
Design and Aesthetic Principles in CSS
00:25:21
Speaker
here. Yeah. We didn't put that in the jet book. Oh, we can ask him all the questions.
00:25:25
Speaker
And they're like, you're hired. So like there, I found that that was a lot of the times you, they'd I'd come in for a C sharp, but then I'd get in through CSS. And, uh, so that's sort of been my career with CSS is just like, I've never taken the full CSS avenue, but I've ah very much used it to impress people. And that's probably why you have a much more lucrative career than Eric or myself, because CSS does not actually pay. Yeah, it turns out.
00:25:52
Speaker
Yeah, that's been a hard one. In secret, you have to you just have to like get in the door for something else. I cannot tell you, literally throughout my whole career, I've been in the door to do something else. And then I've always just sort of raised my hand and been like, this is ugly. Or like that that that's that element is not aligned over there. like this is we this is I was like would you let as like, when you have a party,
00:26:16
Speaker
Do you clean up, right? I was like, you cater. You, you know, we get everything laid out. You're like messing with the way that all the plates are set out. I was like, we're very clear about it. I was like, your, your website is a party that you're inviting everyone to. You can't just have the elements, you know, chilling. They gotta, they gotta be nice and set up. Like, you know, that was always my philosophy about it. And everyone agrees with that, but it's very few people who actually are like, all right.
00:26:40
Speaker
All right, let's do it. Let's, uh, let's, let's pixel mash here. It's nudged and do all that. So, but if you want to, you know, if you should show, I had some, I think if you show up as a react developer and you can stay as a CSS developer though, cause that, cause no one else wants to do it. So you just be the person who does it. and Okay.
00:26:59
Speaker
Yeah. So my advice to anyone who really wants to write CSS is just, just, you just know that everyone hates it. And so you might have both have to learn and react so we can get hired to do CSS. Yes. Yeah, exactly. Yeah. That's, that's basically the moral of this story is we have to learn something that we don't want to use. Don't need to use because we can do everything in CSS. I worked at the, I named names, unlike Eric, I named names. I worked at Visa for a while. Um, very short while, and they had.
00:27:30
Speaker
multiple megs of JavaScript and they had bootstrap and they had like multiple frameworks in this one page website was a single page app, but it was actually just a single page. It was a form. Um, and so I rewrote the whole thing in CSS, HTML, and JavaScript with like maybe 16 lines of JavaScript just changing classes.
00:27:56
Speaker
Um, as, as one should yeah out under a thousand lines total with all those three technologies combined, the thing worked fine. They didn't use it. Cause I don't think they actually knew how to implement it. Um, or they would have lost, like maybe not had their jobs or something. If they, cause you don't need a team of 13 people to maintain 1000 lines of code. You do need a team of 13 people to, to maintain 4.76 megs of code for a one page form.
00:28:25
Speaker
Yep, you bring up a good point, which is our industry has done very good at making our job harder and scale. And we've created all sorts of roles and problems for ourselves. So we got build systems. Now we have DevOps people. They're not back end. They're not front end.
00:28:42
Speaker
they just manage the bills. And you're like, oh, okay, design systems have created tons of jobs. They've created more jobs than they've solved problems. And you're like, hey, that's smart, smart work in there. You get your friends hired. But yeah, I've always had to fight for the HTML CSS role. um It's never been promoted internally. I've led design and development teams and been like, I have a section of folks that don't want to learn JavaScript. And they were like, my managers were like, well, then we can't, there's no promotion path ladder for them. And I go bullshit. There absolutely is. And if you get rid of them, if you convert them to JavaScript, you just got rid of the person that made the calendar beautiful.
00:29:21
Speaker
like You can't just have someone building a functional calendar. like That's like, no one wants your just barely functional car. They don't want your just barely functional anything. I don't want a vacuum that's just barely. I want something that's a combination of elegance and beauty and functionality on the same thing. you can't So they're just, we over index on an industry as like, innovation. But the reality is is that the long tail, the hardest part is the UI, the UX. This is the part that AI won't take out as soon as it can other things. And we're going to find the design. This is my this my spicy take is that design and CSS will be the last things to be replaced by AI and robots because it is the most subjective, most chaotic thing that you have to implement. Therefore, you have to have people. People must be there. You have to test it with people. People have to be considerate and empathetic, gather up all the requirements. Anyway, that's my ah <unk> my spicy. On the subject of designs though, i do something I want to bring up, I don't really have a question for it, is kind of bring it up. This is more of a comment than a question, is that what we're saying? Yeah, this for it's a comment for you, Eric, is so once upon a time, it was a bit ago, ah Jen Simmons, who desperately, Jen, if you're listening, come on the podcast.
00:30:36
Speaker
um I posted about how you, your, she was like scouring the design of your, if your when you had redesigned your site, Eric. And um she was like, the font pairing is amazing. She was like, I must have it. What font is, that's Georgia.
00:30:52
Speaker
And I remember that deeply, I'm a big font person. And I remember looking at it too, and also being astounded that you had, you mean you have like, you have a custom font for like the, you know, all the but headings and everything looks good, but you've blended it in with a system font and not just a system font. Georgia. yeah my My question is how? What website of Eric's are you looking at and saying, Oh, that looks so good. So me neither did I get a lot colder in here all of a sudden.
00:31:22
Speaker
How's your back? Uh, it looks like you might've been, hello we're talking about my, our web.com. Okay. Eric and I compete on who can make a clear example. it's actually You know, in our, in our training and I will say here, I i yield maybe only to Estelle, but in, in training stuff, my stuff looks terrible. Like Estelle and I are on the same page. I'm like, if we really want to.
00:31:52
Speaker
grab the the the student's attention, then like lime green on Fuchsia is what I'm using for the example element or whatever. Anyway. so yeah oh Let me just interject this one sentence. When I do trainings, I actually tell the class to make it as ugly as possible because that way they learn the technology.
00:32:13
Speaker
Yeah. Yeah, for sure. Why is your pixel perfecting? Go ahead, Eric. Sorry about that. So how how did I blend? How did I bring together this harmony of Georgia and this custom font? ah Pure luck, really. um Because yes,
00:32:31
Speaker
yes I have slowly, very slowly, absorbed a few design principles over the 30 years, uh, that I've been doing web. It'll be 30 years this December, actually. Wow. And, uh, well, 30 years this December since I marked up my first HTML document, but anyway, um,
00:32:58
Speaker
but ah you know, I knew I wanted to use Georgia and I went trolling through Google fonts. till I found a ah heading font that felt like it fit with that. And so I'm actually using two custom fonts, the one and the for the masthead and in a very few other places is called I am fell. Yeah, I saw that. Yeah, which I i love. It's so good. It is very nice.
00:33:27
Speaker
Um, so you, so you started with Georgia though. So that's, that's is interesting to me. you So you basically, you made the design decision or just some principle decision that you're like, Georgia, that's where we're going with Georgia. Yep. Wow. Because so, so here's the thing.
00:33:44
Speaker
I don't know how many of you will be familiar with this typeface, but a new century schoolbook well new sorry New Century School School Book, was all the rage in the 90s, in the late 80s and early 90s, when I was at university and you wanted something to look better than times. So New Century School Book.
00:34:05
Speaker
i you know I used it ah we and because I didn't know this at the time. I didn't know how to describe this at the time, but I can say now the metrics of New Century Schoolbook were different enough from times that you had to write less in order to fill out your five pages for your essay. oh yeah Like cut it down by a couple of paragraphs. Anyway, and it also, I mean, it looks nice.
00:34:27
Speaker
Georgia reminds me of New Century School Book. They're not exactly the same. I'm sure type nerds are like, Oh, my God, they're so different. But to me, the one reminds me of the other. And I've always liked it. And I like sorry, it never occurred to me that people wouldn't know what New Century School Book is. It's like oh that's so ubiquitous. Yeah, know I just so oh, wow. Okay. So so where this really started was what you were articulating. I started with, I want the body copy of my website to be a system font, like a common system font, yeah right? So that I could say something like Georgia comma times comma serif, right? And I also wanted it
00:35:11
Speaker
This design, which which I did in 2000, I believe, or sorry, 2000, 2020, Jesus. 2001 I did the previous design. When I did this design in 2020, I wanted to redo my site so that reading it felt more like reading an actual print book. Yeah, it feels that way.
00:35:32
Speaker
Yeah, that's what I was going for a little bit. I mean, that wasn't, I i wasn't like, I just need to look like a book. Like there are things about it that you wouldn't do in a book, but that's okay. And I really wanted to use I am fell for like the the the name of the site and in a you know few places.
00:35:51
Speaker
But I wanted Georgia for the body type because I wanted something that users would be loading locally, that they would not have to download a whole custom font and then force the browser to render every single freaking paragraph in a custom font. They're much better at it than they used to be. I acknowledge this, but you still end up with the the flash of unfaunted text and you know stuff like that. and i was My, where I started from was, I'm going to use a common system font. And I know not every system has Georgia. That's why I have the fallback, but most people have Georgia. And so I figured I'll start with Georgia. And then between that and I am fellow, I was like, I'm going to use a custom font for headings because Georgia doesn't, to me, doesn't work as well when you blow it up.
00:36:40
Speaker
So I went looking, I ended up with, I think it's called, is it XR as car? I can never remember which order the Z and the C are in. Um, but that's what I ended up picking just because I was just going through Google fonts, looking at a bunch of different, you know, at ah at a but bunch of different typefaces. And eventually I was between that one. I can't remember what the other one was that I had it down to two of them. And I think I literally set it up where.
00:37:09
Speaker
When I was developing it locally, I used nth child selectors or nth of type selectors so that every other heading used XR. And you get to preview. If you're leaving ones, use the other one that I was considering. So as I scrolled through, I was like, which one feels better to me? That's a great trick. Oh my gosh. I never thought about that.
00:37:30
Speaker
I can't put another April Fool's thing do with the reset. You could use ah the Unicode range and the as you rage descriptor and make all the vowels like serif, the non-vowels in serif. Oh my god, that made my eyes bleed. oh Actually, I wouldn't do that.
00:37:54
Speaker
I would make all the vowels in a slightly different serif to go with the serif for the consonants so that. Yeah. Cause if they're serif and said serif, you can tell immediately, but if it were serif and difference, like all of the constants are in times, but all of the vowels are in, are in times new Roman or, you know,
Advanced CSS: Selectors and Performance
00:38:16
Speaker
whatever, uh, or, uh, in code.
00:38:21
Speaker
um you know, the use courier and courier new. a comic sands for everything Yeah, see, that one's easy, though. Maybe what a classic windings what's waiting every header. i just I finally figured out why everyone hates comics and so much.
00:38:40
Speaker
I had foster kids for a year and everything they printed at the school was Comic Sans. Oh well because that's contextually appropriate. but I think younger developers grew up with Comic Sans like DNA because it because I'm like yeah it's not the best font in the world but there's nothing actually wrong with it and actually it's easier for people with dyslexia or other right differences to read but if you grew up from like pre-k through 12th grade. Staring at walls of this when you're in the principal's office, you probably don't like it.
00:39:15
Speaker
Yeah, that's probably true. I love fonts, fonts and vocal motions. And, you know, Eric, you did a phenomenal job of being like, I want this to feel like print, like your, your columns feel like print that fonts feel like print. It feels, it feels like when I, I feel like I can feel the paper when I read your website. And that's like a really cool sentiment. And Estelle, I never thought about that for evil though, where you're thinking about, or like how we.
00:39:38
Speaker
We, you're, I think you're a hundred percent right. You look at comic sans and it just invokes, like, it's almost like you're looking at like doctor's office print or something like that. Like whatever's up, like the eyesight, you know, if you made a website with that, people probably also feel a little uncomfortable. So it's true. I, I never thought about it in terms of like, Oh, you want to make someone feel uncomfortable. Here's some fonts to us. Yeah. There's, there's a few of them that I've, I've seen around and, uh, yeah, using the Unicode range descriptor, you could absolutely.
00:40:08
Speaker
or that font from Saw, like I never saw Saw. It doesn't have any impact on me whatsoever, because I'm like, oh, that's kind of a cool font. And my partner's like, oh my god, no. Because she's watched all of them. um Now I know what to use for my blog post headings on Halloween. There you go. That's not gonna happen.
00:40:32
Speaker
Yeah. Uh, I do have, I have ah a question specifically for you Estelle. Like I, I've gone through your, I've gone through a lot of your stuff, but I specifically remember one of the things that it was, uh, enlightening to me is a while back I went through your front end masters. Of course. And, uh, I was like, ah, CSS, but you know, it's good to do refresh. Let me go through this. And then yeah I went through your selector section and then I was like, Oh my God.
00:40:57
Speaker
There were so many select, you're like, okay, so then you can do the carrot and then you can do this, but that matches this and then this does it this and this does that. And then you could pull this and you can do this. And that and I was like. Nevermind, I don't know, I don't know what I'm doing. and But since then, I have, ah I now see selectors differently. When I look at elements on the page, I now look at it, I'm like, how could I get that? Like in the most esoteric, weird way. Do you ever play, does your mind now work that way too? Or you like see elements on a page or you know you wanna grab something by something and it's almost like you're creating your own little SQL query in your, you're like, let's let's really flex the muscles here. Like like what are some of the most,
00:41:36
Speaker
bizarre or like, or succinctly powerful selectors you've used. What I do actually, cause HTML and CSS, once you, you've never know what you can always learn more, but once it's, once it's no longer that much of a challenge to do the basics.
00:41:52
Speaker
you're kind of like, I want to challenge myself otherwise my job would be boring. So I will create the HTML template and my goal is to never touch the HTML page once I start styling it so that I can actually come up with really cool selectors.
00:42:07
Speaker
So I will do my HTML. I will not put a single class in, and then I will target every single element based on the attributes or the position. Zen garden style. Yeah. No, this is like hardcore mode. but like in My own play. I don't use classes. Like I will not put a class name on anything when I'm coding and the developers can, they can go in, they can add, you know, like they're, um, I guess that would be.
00:42:35
Speaker
That way I don't interfere with anyone's tailwind, because that was just like class at the Wazoo. But they can then destroy the site that I created with their tailwind, but it all worked without a single class when I gave them the prototype. That's amazing. And they can't figure out what the hell I just did. but what is like a Give me like a bizarre selector. Like what's something that you think is underutilized, like very powerful?
00:43:01
Speaker
Oh, there's so many new powerful ones, but um if you talk about the old ones, it's enthalast of type. So if you did take the class on front end masters. Uh, I create the American flag. I have a table with like a bunch of rows and columns and I create the original flag. I do is I created it backwards. So I just start from the last corner and I go backwards up. It's much easier to just go forwards down. Actually it isn't because you want to put the blue in last. So you start. Um, so if you put the blue in first, you say like the blue part of the flag ends at some point, right?
00:43:40
Speaker
it's only the top left corner. So you have to actually start from say, start at the end. And once you hit like the ninth table cell to the first table cell paint that blue. So it's that last of types that are never ever used that actually can come in handy. kind Interesting. But first of types, the ones that start from the beginning are actually faster because I mean, and people ask me about the performance of CSS selectors. And I'm like,
00:44:06
Speaker
they wouldn't be in the browser if they weren't super fast. So don't spend your time optimizing CSS selectors because yes, you could, but you're getting microseconds. Just remove um your React that you're not using or or the jQuery that's been in your site for 14 years, but you haven't needed or the Bootstrap. um Hire me to remove Bootstrap. Bootstrap is my favorite um framework because people pay me to get rid of it.
00:44:35
Speaker
But you don't need to pay me to get rid of it anymore. All you have to do is do at layer and then put your bootstrap in a layer and then you can overwrite it. But you're still sending that bandwidth down the pipes. So the coolest stuff has to be the has.
00:44:52
Speaker
yeah actually now oh yeah
CSS Quantity Queries and Nesting Techniques
00:44:55
Speaker
ah I wrote something on Mastodon the other day and I did like, I just wrote a selector and I did like, blah, blah, blah, is, blah, blah, blah, where, blah, blah, blah, blah. And someone said, well, why do you use is and where? And I'm like, because I wanted it to sound like a sentence. But I didn't have to. I mean, the difference is this specificity of it all, the specificity weight, but this was just a pseudo, so you know, it was pseudo code that actually in the end,
00:45:22
Speaker
worked so um you can do like if like this table has 14 rows then you know go above the tables and and create like the paragraph above this table, do something. And you can actually do that now with the has, because the has isn't just, is this the parent of this element, but if this element has these features, then it's sibling to do this with it. Yeah. So that would be P has plus table has TR and child 14 or something like that.
00:46:07
Speaker
That would that would it would be P colon and has plus table. Like if you have a table, it comes immediately after a paragraph that in this paragraph make the A's green. Right. you canno actually do that So any paragraph that has a table that follows, it has links that are green. You can do that now with CSS. Yeah.
00:46:26
Speaker
ah But only if the table has a certain number of rows or a certain minimum number of rows or a certain maximum number of rows or a certain range number of rows. One of my, yeah, one of my favorite things to do with has is something like.
00:46:41
Speaker
you have, ah let's say, a list, like an unordered or or or or an ordered list, you can give it extra margins to push it further away from the text around it if it has, let's say, fewer than five list items. And if it has more than five list items, then you get the normal. Quantity queries, they're so powerful. yeah If someone actually wants to learn something during this show, let me teach something. okay yeah Nesting.
00:47:10
Speaker
I was going to ask you about nesting. Yeah. You can now nest natively in CSS. But because I'm the specificity person, not specificity, but specificity, because there's a little fish, and I have not upgraded the specificity chart since 2014.
00:47:29
Speaker
nesting is similar to is in terms of specificity. So it actually takes, when you have a nested something, it takes the weight of the most specific selector in that. So if you do like an A within a paragraph, so you do P bracket and then ampersand or no ampersand A nested inside, so that would be one and one. But if you did A comma foo, uh,
00:47:57
Speaker
pound sign foo, pound sign foo, pound sign foo, the PA would actually be 301 because it's kind of like an is. So nesting has the same specificity as the because is.
00:48:13
Speaker
net Well, nesting uses is only if it's a selector list. It doesn't wrap everything in is, only if it needs to. So it's like a so like in the PA, it's not going to wrap A in is or P in is. It's only going to do it if you do PA comma B. So if you're targeting that ah A and the B, that A and B would get grouped together with is. And yes, they would adopt the highest specificity of the contents. I fought really hard for a where version of it.
00:48:39
Speaker
I was like, well, that's kind of tricky. Why don't you give me a way to nest a selector list, but use where? That way I don't have to worry about that. But then it was like, had zero yeah they yeah, everything would have zero. Yeah. Yeah. And it was like, that doesn't make sense. Um, yeah. Is was the unlocker of nesting, but you could but aware but it has a, and the you know,
00:49:04
Speaker
Yeah. You all just gave me amazing idea for like, uh, like a VSCode extension. We should, you know how like they have VSCode extensions where like you import JavaScript and it tells you like, Oh, the bundle size of this thing, which is super hard like to fully get. No case in engine to that. Apparently. Sorry.
00:49:22
Speaker
Well, it's very hard to actually fully calculate that too. Cause like, you know, tree shaking, whatever, like, you know, so it's like sort of a guesstimate, um, or like uses some total thing. But what if you had a VSC, maybe this exists that shows you the specificity points of every selector.
00:49:39
Speaker
So as you see the CSS page or like that, Oh, that one's strong. That one's weak. That one's that. And that would be a very great teaching mechanism for like this selector created this much specificity. Like you can see the points on there. Yeah. It's in dev tools, Chrome dev tools, hover over selector. You'll get the specificity score. It's new. Bram is, um, I was like, please don't say this is new. please don't or Please don't say this is old. I was like, I'm about to film real dumb. What's your least favorite new CSS thing coming out?
00:50:09
Speaker
yeah Oh, I want Dan's answer. I'm just like, you got at scope, you know, cascade layers. Some people think they're dumb. Some people think nesting's dumb. Um, there's all sorts of new view transitions. Maybe you think those are dumb. What's something that came out and you're like, we don't need that shit. and Anything. You said that to yourself when you're like.
CSS Color Spaces and Technological Advances
00:50:31
Speaker
i
00:50:36
Speaker
mmm i love it a spice wait but you don't love the tailwind spice you don't like don't put that spice on my burger i don't want your tailwind i don't want i don't want tail wind on my food that's that's for sure do people even know what tailwind means i mean it's literally in shakespeare it is fart Yes, it is. But you can be in the tailwind in a race, right? You can like catch their drift or whatever you're in their tailwind. You're you're able to pass them because they're cutting the air and you're yeah anyway, whatever. There's like a flying version of this, but yeah.
00:51:08
Speaker
Yes. You're stretching. Yeah. I do prefer the fart joke. I mean, I think that's funnier. We really are stretching, ah but that's fine. Is there been anything that came out and we and i said and I said, we don't need that. Oh, all the color spaces. You were like, I was happy with 256. I didn't need even need RGB.
00:51:26
Speaker
256. You kids today with all your colors. When I started out we had 16 colors and we were grateful. And we liked it. And they were so ugly those 16 colors were awful. Yeah but you know they were they were equitably spaced around the color wheel so anyway.
00:51:47
Speaker
um ah i've so I think I've said this before and I always apologize to Miriam when I say this. I was not convinced that cascade layers were that important. And they are. They're fantastic. I'm a big fan. But I hear you where you come from. like yeah I'm like Estelle, where it's in all of my demos now. All of my demos have a very clear spot where I'm like, here's what I want to teach you. The rest is I call it demo support. like This is all just supporting you having this moment in here. It's very cool for that. But how many people ship production demos is really the question that I would ask you. But no, I i get it. And I am not as skeptical as I was. But you know you asked. Sticking bootstrap in there like is what was basically
00:52:33
Speaker
Like that's brilliant. You just, you want to get rid of your old CSS and you don't want to pay your, um, you don't want to hire a CSS developer because then you'd have to put CSS on your job description. Um, yeah this is an earlier conversation where people are just jumping in right now. Um, you can just put that in a layer and then everything else overwrites it. Yeah, no, I know. Um, that, that was one color spaces. I actually, I like, I don't understand them really.
00:53:04
Speaker
No one does this fun. Yeah. Like that's a thing that I'm that i'm kind of bad at, I'll be honest, is is figuring out color spaces. And I have like constructed demos where at the end of it, I've said, I understand less than I did when I started. Like I've seen how these work. Like I've i've figured out how each of them works and I so i understand less now.
00:53:24
Speaker
um because you realize what you don't understand before you didn't realize that you didn't understand it yeah i guess i don't know um yeah we thought we knew color with hex and then you learn the new color spaces and you're like holy crap there's an iceberg of knowledge required to effectively use these new spaces the fuchsias and the purples you can use are just amazing if you have the right monitor right Oh, for sure. The colors really pop. You can really differentiate your so your site from someone. This is why Apple was in on it in 2016, is they were like, we need our app store, which is a web view, to look very beautiful and utilize the retina screens that we've deployed. We better get on this display P3 color space early because then you put an Android next to an iPhone and everyone goes, well, clearly I want the iPhone. It is much more juicy and gorgeous. And it was a so really good play ah by them. But yeah, we can do that on our sites now.
00:54:12
Speaker
I said corollary to this many, many years ago, and I'm talking like 2005 or something maybe, I had a job interview at a place where they did videos and it was high definition videos. So when you like walk into a store that sells televisions, like when you first walked into Costco or Betamax, whatever,
00:54:34
Speaker
I only go to Costco, so I don't know any place else that sells televisions. And that the look of that um show, because it's it's not actual live TV, it was this place that sold these high definition videos to places that sold televisions. So you'd be like, oh my God, that's so amazing.
00:54:52
Speaker
And then you bring the TV home and none of the shows actually use such high resolution. So it didn't look as good at home, but now we can create websites on that TV that you bought in 2007 because it had such beautiful colors and it might support it. Yeah. I think about it like VHS and Blu-ray all the time. Like every site that's using RGB or hex colors is a VHS now compared to the Blu-ray that you can get if you use display P3 or OK LCH, you can tap into that extra juice, get that vibrancy.
00:55:23
Speaker
Yeah. Yeah. I just wear like plain color t-shirts and jeans every day. So like, I don't know anything about colors, but I just wear black. Yeah.
00:55:35
Speaker
Very easy. their Color faces are basically math. And so I'm like, no, OK. I like color when it was color, but no color is math. it's Yeah, it's just there. There's just so much complexity and so much of it has to do with human perception. Like, you know, Adam, you and Estelle were just saying, like,
00:55:58
Speaker
these colors you can get on the right monitor are just so much more amazing now. um I actually just replaced my monitor because the old one was dying. And I like was real careful. I was like, what display P3 coverage does this monitor have? And like, oh, this one looks really good. But display P3 coverage is only like 90%. And this one's 95%. So in the end, I got one that's supposed to have really good display P3 color coverage. I made sure it's in display P3 mode. And I've gone to the test sites and I was like,
00:56:28
Speaker
Yeah, I mean that orange is a little more intense, but... just because But that's human perception, right? like right like yeah Adam and his tail could be looking at the exact same page and be like, that is such a huge difference into them, it is. right so that's I think that's part of why color spaces are so incredibly challenging, because not because I have some sort of color deficiency, just because like you can't there's no sort of like objective way to say, and this will look you know X percent better to everyone, because it won't.
00:56:58
Speaker
Right. It will look X percent better to some people because of their monitors and X percent better to some people because like their red, green color blind or whatever.
CSS Philosophy and Design Approaches
00:57:07
Speaker
And it yeah, it gets super. I had a client who was color deficient and he was very insistent on the colors I used. So it was really weird because he, I don't think he knew he was color deficient, but this site was and purple, green, and brown.
00:57:25
Speaker
yeah And so I had those colors to work with to actually create a good looking website. And I think I did, but it was really weird having someone who was really insistent when they didn't have half the color spectrum.
00:57:38
Speaker
I think color of it as a request on the web. I'm like, you can just, oh you don't get you you you can't definitively get a color, kind of like a font size. Like I feel like font size is a request. Hey, I would like it to be one REM, you know, but like whatever your settings, you know, you should have have a say in this too. but um That's the thing. All CSS is a request. Everything in CSS is a request.
00:58:01
Speaker
Right. but Like this is a, I think this is a point that sometimes gets lost. And it's a point that I know Jeremy Hughes has been making for years. I've been making for years that you are requesting that the browser do X, Y, and Z. And if you think about CSS like that, it actually becomes easier to sort of hit that Dow of web designs and flow state where you say, okay, this is what I'm aiming for, but I'm asking, I'm not demanding. This is not a command. It is a request. and that In some respects, I think color like taking that attitude towards color spaces, if we can get a lot of people to take that same attitude, then we can sort of spread that awareness to everything else. Like you say with with font sizes, even if you say, I want this font to be 17 pixels, it's still a request.
00:58:52
Speaker
It's still a request, can still be changed. I think this is why JavaScript people hate CSS. They are control freaks. This is why they love TypeScript. It makes them feel like they're in more control. And the reality is ah that's a massively contentious concept. like Because in JavaScript, you do tell you are ye telling. You're not asking.
00:59:11
Speaker
But if you make a mistake, the whole thing is like, nope, not doing anything at all you asked for. So Jeremy Heath, Jeremy Heath literally just published a blog post like last night or my time about declarative versus imperative. And, and we'll tie it in a tailwind because he ties it in a tailwind. He said he, he, he was being very diplomatic. I will say in, in that Jeremy Heath way where he said,
00:59:37
Speaker
Tailwind is a very imperative approach to styling. Whereas if you're writing native CSS, like that's a very declarative and declarative is much more of a request and imperative is much more of a command, right? And JavaScript, same kind of deal. JavaScript is absolutely imperative. And if the browser you know chooses not to obey an even one point, then the whole thing falls over because that that's what happens with imperative languages. Like when I used to write Turbo Pascal and you hit F9 to compile, if you had an error, it just wouldn't compile. And it would tell you, no, sorry, compile error. You get no program today um until you fix this compile error, right? ah A lot of languages are like that.
01:00:20
Speaker
CSS and HTML are not like that. They are declarative. They're flexible. They have fault tolerance. CSS is typed, right? It's the most forgiving typed language out there.
01:00:32
Speaker
Yeah, Douglas Crockford said that web development is the most hostile engineering environment on demand. my My take on that is that it's the most hostile environment to engineer assumptions known to man. Because when you go in assuming, oh, I do this, this, and this, and I get this, this, and this, it's like, no, if you do this, this, and this, you might get that, that, and that, or you might get some variant of that because all of this is declarative, all of it is fault tolerant.
01:01:00
Speaker
I bring something back to that which is that's why it's always important to have fallbacks so like like declaring something you're saying like I'd like the background to be this image. But if that image doesn't work.
01:01:11
Speaker
ye And you have like, it was a really dark image and you have white text on it. You want to make sure that that white text is still visible if that image doesn't show up. So I always like, you always want to fool, foolproof, um, your CSS and make sure that everything's legible. So like, if I ever use white font on a dark background, I'll put like a little dark shadow on it.
01:01:37
Speaker
or on the text, which won't show up if it has a dark image of the background. Shelly Tennant. Shelly's on the pod.
01:01:48
Speaker
OK. Hi, Shelly. What was I going to say? I didn't. Sorry, I should have turned that off. White text over black background. Even if I had turned it off, the computer, because it goes into the computer where it's still done and I went to pub apps.
01:02:01
Speaker
um ah So basically you put a background color, but if you have a transparent PNG g or an SPG and you can't do that, but put shadow on your text so that they can can see it. But the interesting thing is I have come up some CSS values that are supported, but not implemented. So like in Safari, if you do generated content, so like all All browsers now do content replacement so that you can put generated content on any element, not just pseudo elements and it will replace the element. So you can do like ah content and put an image on a box and like the text disappears and you have the image.
CSS Guide Challenges and Publishing Future
01:02:44
Speaker
um and uh, when your grade or gradients are supported as a value, but Safari doesn't render the gradients as a value for content replacement. So it just makes the whole thing disappear. So there's no way to do an it like, uh, an at supports because yes, it supports that value.
01:03:05
Speaker
for content, but only on generated content, not on replaced elements. So. Because remember, kids, add support surely means at understands, or understands what you said. That can read it and doesn't choke. Yeah. Right.
01:03:22
Speaker
With color, you have to do two. With color, you got to do two. This app media um dynamic range is high. So are you a capable HDR display and at supports OKLCH or display P3? Can you understand the color that I'm speaking to you? Also, are you even capable of showing it? like ah Or am I wasting my time type of thing? Yeah. Right. Yeah. It's it's all fun.
01:03:50
Speaker
I like it. I like it. It's like herding sheep. I feel like that's, um, CSS is you've got a page, everything's chaotic and you're just sort of like nudging and herding sheep into little pens. You got, here's my cows, here's my sheep, here's my, you know, different content types. And I like thinking about it that way. They can grow or shrink and I don't care. I made a healthy pen that will contain them in many scenarios. And so, so what you're saying is that advanced CSS developers are basically border collies.
01:04:16
Speaker
I'm a herding i'm a hurting dog. Yes. I can get down with that. I'm 100% there. I love Border Collies. They're the best. and They're great dogs. nice yeah know we Before we totally get out, I have one question I have. so Looking at the the size of your book, like here, pull up your book. We saw in the beginning, but let's see it again. Look at that.
01:04:36
Speaker
Like that, that is, that is truly definitive. Like you must look at that and be like, well, we called it correctly. Hey, you're good at naming things. You're obviously in CSS. Um, but, uh, what I would say is, is, or my question to you is, is.
01:04:50
Speaker
That's a lot of stuff. Do you ever, do you ever have any moments where you just kind of woke up in the middle of the night or realized as you're going through like, Oh man, we forgot floats or all we forgot. Ah, like there's like, Oh grid, come on grid. Really? Like, do you have any like, like moments? Cause that's, you know, it's a hard to get everything. So the moments I think that we had the most were Oh God, we don't have X and X is starting to ship. Is it, is it, do we need to get these in before we go to publication? Um, I mean, yes, I'm sure they're like at one point, I think I did a sort of woke up in the middle of the night or suddenly stopped dead in the shower and was like. Conic gradients crap.
01:05:39
Speaker
Conic repeating gradients. Just kind of gradients in general. They're in here, by the way, just to be clear. They did make it in, but ah at one point it was the, yeah, things would go great. Oh, crap. thats All the time. After we went to print, we realized we missed a whole chapter.
01:05:58
Speaker
Yes, but we didn't have space for it. So that's our excuse. We couldn't. Yeah. Like wasnt room we're up against the publisher's page limit with this, i we list the spine limit. You can only literally only print 1200 pages. Yeah. Totally. Like 1200 pieces of paper. Yes. its So it's 600 pieces of paper. So front and back and you have the front cover and the back cover. So that's four pages right there. And then you have like the blank page at the end of the blank page at the beginning, which count. Yep.
01:06:27
Speaker
So we are at 11 26. That's the official page count, but that doesn't count the stuff like the frontispiece and the yeah. Um, so you, you did, you made every page count or every page you could have really, really tried to, um, for me, I think for me, the, the, oh crap, we didn't do it was mostly about the function values.
01:06:53
Speaker
Cause there are literally like a hundred function values now. They're all listed, but we weren't able to cover them. I think they're all listed. I think we snuck the math functions in right at the end. Oh no, there's more functions. There are more functions. There's the three target functions.
01:07:08
Speaker
god anyway um But they're not supported yet, so it doesn't matter. And then there's the content function which may or may not come in. Anchor positioning is not in here, for example. Anchor positioning is super cool, but at the like even as we record this, let alone when we finish this and send it to the printer,
01:07:27
Speaker
It's only supported behind a flag in one browser. right And that's like when maybe if we i could have 2400 page books, we would say, let's have a speculative chapter, but like we can't do that anymore. Yeah, we have already told O'Reilly that if there's a sixth edition,
01:07:48
Speaker
It either has to not be a guide anymore, or it's going to have to be two volumes. It's going to be like the Lord of the Rings, the five pack, you know, you get your old box. Chronicles of Narnia. i I told them with the previous edition that we should publish, every chapter should be its own little thing and it should be a Chronicles of Narnia. that but That actually would be really cool. They didn't go for it. Anyway. It's a lot of new animals they have to preach on the front though. We totally should do that. And then have the box, create a box that can actually grow.
01:08:16
Speaker
so you can put new chapters in. And so we don't have to keep rewriting the chapters. The other thing that I've actually suggested to them, they're not going to do it because it's absolutely, would absolutely break their model, is that they do it the way that legal publishers do it, which is you buy, let's say you buy the Ohio Revised Code, right? From ah ah a law publisher and they say you have three ring binder.
01:08:41
Speaker
that has the Ohio Revise code. And then every year they send you an update that basically says like, replace these pages with these pages, add these pages here. You have to manually be Git.
01:08:53
Speaker
yeah you you manually manually the death Yeah. You manually run your diff, but that's how you basically subscribe to a yearly update to the Ohio revised code or the Minnesota revised code or the whatever. Um, I was like, you should, we should do that. Just like a big three inch or a five inch, three ring bind or something like that. We'll send them this. And then every year or two years or whatever interval makes the most sense. We send them updates.
01:09:23
Speaker
They they so they're subscribed and they're like, yeah, we already have a subscription service online. We'll just update the PDFs. It's fine. You know, doing, doing the diff that way though, that would be a real way to keep, you know, up to date with the, like, what has changed? You're like, well, according to pages seven, 111, 94, like 692. And now there's a new value for this property. The fun thing to do would be each update would have a different.
01:09:49
Speaker
color color one ah and it have to pretty color know that would be very cool that would be very cool but we do like but with this version we basically like the previous versions floating was really important yeah floating is not that important anymore no It's back to its single purpose use that it was for. Yay. It's not abused anymore. Now it doesn't support how we fundamentally do layouts. Yay. And then the tables probably that in the original book was probably huge before floats was huge. Oh yeah. Uh, actually no. Thank you. ah I knew that. I knew what that's why I liked you. Okay.
01:10:28
Speaker
Yeah, it's it's part of the reason why the first edition could be so tiny. I was just like, here's how you can style tables. I'm not going to talk about laying out with tables. We're moving on. Thank you. um There is still a chapter in here about how tables are laid out. Something tells me that in the next edition, that's going to have to get reduced or i actually think i or possibly spawned into like a an an online supplementary thing that like is available for free to everybody. I think tables are actually really, really important. And we might expand it basically on because like you can color, you can use call group to, to color the back of the column. But anything that you put on the front of that column is going to override it because it's actually sitting on top of the call group. But you can
01:11:18
Speaker
probably use the has pseudo class to figure out which table cells you want to color. So you probably want to actually keep all of that. I mean, you can't really teach someone how to do the CSS for a table without teaching them how to do the HTML for a table. Yeah. So you have your 13 table later on CSS. It has this lovely oh of that act diagram. That's HTML and CSS, by the way, all of these figures are basically. like That's awesome. But it's, ah it's got a stack of like what the various, like how a table is composited. basic That's really cool. That compositing is, is a very overlooked. I'm very like it's completely overlooked. If you look this up online, cause all of the figures are available online. If you go to this online, it starts out just looking like a table. And when you hover over it at 3d.
01:12:08
Speaker
animates and expands into this and then it'll go back. We were able to do some fun stuff, but yeah, like of the I don't even know how many figures are in here, but I think all but like a half dozen are just screenshots out of a browser. There are high-rise screenshots out of a browser using Firefox's screenshot command line tool, but that's that's how you node in the in the very few cases where Firefox wouldn't support something Like when' I couldn't get Firefox to show a thing. I would go over to Chrome, like blow it up to 200%, take a screenshot, et cetera. So yeah, there's there's a very few that are not, like I say, like a half dozen or so that had to be done using.
01:12:52
Speaker
Or that we're, it was easier to do using something else, but the vast, vast, vast, vast majority of them are just HTML and CSS files that are online for free. Anyone can check. We say that we do that because you know, we're really cool and we're really good at CSS and HTML, but it's really because we're terrible at Photoshop.
01:13:10
Speaker
Oh, no, it's neither of those things, actually. We say we do it because we're really cool and good at CSS, but we at least the reason that I started doing it and continue to do it is that if I construct a figure and it doesn't show what I thought it was going to show, it means I probably don't understand what I just wrote about, and I need to go back and figure it out. like If I can make the figure do illustrate what I'm writing about, then I understand it. Yeah, I mean, basically, I write for a for Open Web Dogs.
01:13:39
Speaker
You know, I do all these examples on MDN and every single one of them, uh, I open up and do an example on CodePen. If you want to see the most boring CodePen account, you can go to CodePen.io slash Estelle. But if you want to learn about useless trivia, it's all there. There's probably like 1200 pens already on The title is just the property that I'm... Just little tests. Yeah, those are those are fun to do. yeah They're fun. I don't understand people who don't use CodePen. I'm like, how do you... so I used the new MDN page, the new MDN feature. I used that one. I don't use CodePen.
01:14:22
Speaker
I just use B2Edit and transmit to FTP stuff.
CodePen, Jokes, and Expert Reflections
01:14:25
Speaker
so There you go. FTP. oh miss I don't miss that. I'm not going to lie. i I took down a lot of stuff doing that. um What do you think of the new play? Because I try using it and then I just open it up in CodePen and play in CodePen again.
01:14:38
Speaker
I pretty much do the same thing. I open it up in there and I'm like, hey, this looks like it would do the thing I want, but I kind of just want to save it and go back to CodePen. So yeah, I go to CodePen. I've got a lot of templates there where it's like, oh yeah, Chris, you're killing it, CodePen. I want to see what the next version of CodePen is. Apparently they're working on it. I'm i'm intrigued. um As we wrap up, I made two puns during this episode in my mind and I want to share them with you. ah They're probably going to suck, but here we go. The first one is wisdom. Someone said wisdom and I was like, wisdom?
01:15:06
Speaker
Whizdom you get a you should we need a framework called whiz that manipulates the Dom and you call it wisdom Or just wisdom wisdom. I mean because then you're not peeing on the Dom you're not whizzing on the Dom you've got wisdom and whatnot wisdom anyway Dom was in it and I was like, it's totally an HTML joke The other one was um you're mentioning capturing screenshots and you got to capture them all it's polka Dom Yeah. Let's make a game called polka-dom. You got to capture all the elements, visit the web, got to take a screenshot, you know, get your polka decks all filled out with all the HTML of elements. Estelle, polka-dom got to catch them all using complex CSS selectors. I was just thinking that too. Yeah. You should totally, and each, each ah dom node represents a Pokemon and then you write the most complex selector to get all of the Pokemon. But then I would have to learn and actually figure out what Pokemon.
01:15:58
Speaker
The actual Pokemon is that everyone was walking around. there You just get AI to generate the Pokemon for you. And then you just, uh, and then you just write the CSS. All right. Well, this was an amazing conversation with two of the most wisdom and I can't, I can't do it like Adam can with two of the most incredible knowledgeable people in CSS telling us about their journey, about all the things that they have learned through the very thick book.
01:16:25
Speaker
and the struggles, the highlights, the everything and, uh, you know, an Eric's amazing, uh, responsibility to not destroy websites through his, uh,
Book Release and Humorous Uses
01:16:35
Speaker
uh, through the hot linking. So, uh, it was amazing. And if you all, uh, when did you, the book is a book released yet or when does it come out? It's out. It's out. All right. 31st or June 1st, something like that.
01:16:45
Speaker
Okay. Awesome. yeah So we'll put links to it wherever, uh, highly recommend it. Like we said, it has all the uses to it. you You can read it. You can, you know, use it as a step stool. You can use it as a workout tool. like There's no reason not to have it. Let's be real. So it has fish. You gotta, you gotta, yeah, you get, it's the fish book, you know, there's also CSS, but there's fish. Um, so thank you all so much for coming on and, uh, we will make see you all later. Then it's yes-oosh-p-p-p-p-p-p-p-p-p-p