1 00:00:01,080 --> 00:00:04,799 How'd you like to listen to dot net rocks with no ads? Easy? 2 00:00:05,360 --> 00:00:09,480 Become a patron for just five dollars a month. You get access to a 3 00:00:09,480 --> 00:00:14,240 private RSS feed where all the shows have no ads. Twenty dollars a month. 4 00:00:14,279 --> 00:00:18,440 We'll get you that and a special dot net rocks patron mug. Sign 5 00:00:18,519 --> 00:00:35,479 up now at Patreon dot dot NetRocks dot com. Hey guess what, it's 6 00:00:35,520 --> 00:00:39,359 dot net rocks. I'm Carl Franklin and Amagard Campbell. We've been at this 7 00:00:39,520 --> 00:00:44,719 for many, many min min min years. Eighteen eighty five, right, 8 00:00:45,000 --> 00:00:49,159 that's post Louis, that's post Civil War. Man, You're almost a real 9 00:00:49,200 --> 00:00:53,920 country at this point. Yeah, every every every once in a while, 10 00:00:53,960 --> 00:00:58,119 it just hits me like, holy cramp, we're old. Well, in 11 00:00:58,159 --> 00:01:02,079 two thousands is not that far away? Right, that's two years, two 12 00:01:02,159 --> 00:01:04,280 more years, and will be there. I just wait till somebody says, 13 00:01:04,359 --> 00:01:08,920 back in the two thousands, Oh god. I mean, if you want 14 00:01:08,959 --> 00:01:12,079 to make it sound even worse, you can go back in the late nineteen 15 00:01:12,159 --> 00:01:18,239 hundreds. Yes, yeah, the late nineteen hundreds, the turn of the 16 00:01:18,239 --> 00:01:23,159 century. So it used to mean something different when I was in middle school. 17 00:01:23,319 --> 00:01:26,760 Yeah, that's true. Anyway, we've got a good show for you 18 00:01:26,879 --> 00:01:30,120 coming up. Martine Dowden is here and we're gonna be talking to her in 19 00:01:30,120 --> 00:01:42,519 a bit, but first let's take care of better no framework awesome? Alright, 20 00:01:42,519 --> 00:01:45,439 man, what do you got? You're gonna like this, buddy, 21 00:01:45,799 --> 00:01:49,079 I always do. This is a review on end Gadget for the n Video 22 00:01:49,280 --> 00:01:57,359 RTX forty seventy super nice. It's a fourteen forty P powerhouse and it's only 23 00:01:57,519 --> 00:02:02,000 five ninety nine. When was the last time you heard of a really powerful 24 00:02:04,120 --> 00:02:07,840 GPU video card for six hundred bucks? Yeah, and that's you're right. 25 00:02:08,439 --> 00:02:13,960 This really says to me, Oh, we've gone back to sanity on video 26 00:02:14,080 --> 00:02:16,240 cards, right, because it got insane for a while there. Yeah. 27 00:02:16,319 --> 00:02:20,639 Although that, yeah, that fourteen forty thing is just like this thing will 28 00:02:20,719 --> 00:02:23,599 do at twenty five six to do by fourteen forty, like sixty frames a 29 00:02:23,599 --> 00:02:28,759 second on most games, which is faster than your screen will refresh. So 30 00:02:28,960 --> 00:02:31,120 you're good. And then gadget says, and it's a far better four K 31 00:02:31,199 --> 00:02:35,840 gaming card than the forty seventy, right, So this is the forty seventy 32 00:02:35,960 --> 00:02:38,759 super right apparently, Yeah, yeah, a few more cores, you know. 33 00:02:39,759 --> 00:02:42,800 I didn't even look at this for playing video games anymore. You know 34 00:02:42,840 --> 00:02:46,000 what I look at this for running your own large language model locally, yeah, 35 00:02:46,120 --> 00:02:50,319 right, or video you know, editing videos is what I usen't for. 36 00:02:50,599 --> 00:02:53,479 Yeah. I bet edit video will be pretty good too, But for 37 00:02:53,599 --> 00:02:55,280 a you know, you hit a key point here for me, Carl, 38 00:02:55,280 --> 00:02:59,360 which is, for a long time, for the past few years, you've 39 00:02:59,400 --> 00:03:01,360 been thinking that thousand dollars plus for a video card. Oh yeah, and 40 00:03:01,719 --> 00:03:05,280 maybe you don't have to do anymore, thank god. You know, I 41 00:03:05,360 --> 00:03:07,159 think it was the crypto craze. Yeah, it was part of part of 42 00:03:07,199 --> 00:03:12,719 it, you know. And of course now the large language model craze isn't 43 00:03:12,759 --> 00:03:16,280 helping either, but well, but most people aren't running those on their own 44 00:03:16,520 --> 00:03:20,719 machines. You would hope, yeah, God, I would hope. You 45 00:03:20,800 --> 00:03:23,080 would hope. I know that you want to do that. Yeah, they 46 00:03:23,240 --> 00:03:27,560 have aspirations. I also think it needs to be smaller anyway, right, 47 00:03:27,639 --> 00:03:30,919 Like I don't like any technology which is still on the curve. If we 48 00:03:30,960 --> 00:03:35,159 only make it bigger, it'll be better. That seems to be tapering off 49 00:03:35,199 --> 00:03:38,719 for chat, GPT and the like now now that it seems more tuning, 50 00:03:38,479 --> 00:03:42,319 you know, getting a little smarter of what they're doing, not just checking 51 00:03:42,319 --> 00:03:46,080 more eight chan into the data pile. You know that's not good. Yeah, 52 00:03:46,280 --> 00:03:49,319 anyway, I appreciate it. That's that's a great find and a great 53 00:03:49,360 --> 00:03:52,759 reminder that you know, we are we maybe software people, but we are 54 00:03:52,840 --> 00:03:55,240 behold to the hardware. Mm hmm, well that's what I got. Richard, 55 00:03:55,280 --> 00:03:59,560 who's talking to us today, grabbed a common Top of Show sixteen twenty 56 00:03:59,599 --> 00:04:02,360 four back a bit in the twenty nineteen when we were talking to Amy Kaepernick 57 00:04:02,400 --> 00:04:05,120 about CSS grid, because I know we're going to talk a lot of CSS 58 00:04:05,159 --> 00:04:11,400 today, and I pulled this comment from Andre Carlucci because it made me laugh. 59 00:04:12,039 --> 00:04:14,479 He said, Hi, guys, great show. As always. I 60 00:04:14,479 --> 00:04:18,519 believe that centering things in CSS is the new quote how to exit Vim. 61 00:04:19,040 --> 00:04:24,920 Anyway, someone wrote this awesome website to solve this problem, and it is 62 00:04:25,199 --> 00:04:29,519 how to center in CSS dot com. Oh god, there really is a 63 00:04:29,560 --> 00:04:32,199 cycle how to center in CSS dot com. Oh that's so great. So 64 00:04:32,800 --> 00:04:35,560 you know, just go there. It's a website. Yeah, they will 65 00:04:35,600 --> 00:04:38,839 help you. It's one of those things. Sorry, you can get Martin's 66 00:04:38,839 --> 00:04:41,000 book one or the other. It's one of those things you have to look 67 00:04:41,079 --> 00:04:44,839 up every single time, every time, every single time. But yeah, 68 00:04:44,839 --> 00:04:47,959 how does defend us in CSS dot com? It works, wonders. Exiting 69 00:04:48,040 --> 00:04:54,879 VIM still a mystery here. The new exit word perfect for dos. Remember 70 00:04:54,920 --> 00:04:59,680 that you press escape and they would say search what would you like to find? 71 00:05:00,000 --> 00:05:01,959 No? Get me out of here? Yeah, now, just there 72 00:05:01,959 --> 00:05:04,800 as a reminder. If you need to exit VIM, if it's been stuck 73 00:05:04,839 --> 00:05:12,560 there for a while, you press escape, then colon q L enter obviously, 74 00:05:12,920 --> 00:05:18,480 obviously, Andre, thanks for the giggle man, And a copy of 75 00:05:18,519 --> 00:05:20,319 music go By is on its way to you. And if you'd like a 76 00:05:20,360 --> 00:05:24,399 copy of music go Buy, write a comment on the website at dot at 77 00:05:24,439 --> 00:05:27,279 rocks dot com or on the facebooks. We publish every show there and if 78 00:05:27,279 --> 00:05:29,839 you comment there and we read on the show, we'll send you copy of 79 00:05:29,879 --> 00:05:31,800 music to go buy. You know about them. My mother in law would 80 00:05:31,839 --> 00:05:39,600 say that programmer needs shooting. Isn't that a defense? In Texas? You're 81 00:05:39,680 --> 00:05:46,879 honor he needed he needed suiting. Well, anyway, you could send us 82 00:05:46,920 --> 00:05:49,199 a tweet or an X or whatever the hell are they calling these days. 83 00:05:49,399 --> 00:05:53,680 I'm at Carl Franklin and he's at Rich Campbell. But the cool kids are 84 00:05:53,720 --> 00:05:57,319 hanging out. I'm ast it on, I'm at Carl Franklin at tech Hub 85 00:05:57,399 --> 00:06:00,519 dot Social, and Amrich Campbell at masadon. Send us a two, We'll 86 00:06:00,519 --> 00:06:03,920 read it. I swear to God, yep, proverably not with shooting. 87 00:06:03,959 --> 00:06:09,120 You may not respond. No shooting require no shooting involved. All right, 88 00:06:09,480 --> 00:06:15,600 Let's bring on Martin. An award winning CTO UXUI designer and developer, international 89 00:06:15,639 --> 00:06:21,120 speaker and author, Martin Dowdin focuses on web interfaces that are beautiful, functional, 90 00:06:21,279 --> 00:06:27,639 accessible, and usable. She approaches user experience from both art and science, 91 00:06:27,800 --> 00:06:31,040 drawing from her degrees in psychology and visual communications. She's worked as a 92 00:06:31,040 --> 00:06:35,519 developer, artist, educator, and consultant since two thousand and five. In 93 00:06:35,560 --> 00:06:43,519 twenty fifteen, she published children's book Programming Languages ABC plus plus That's Great title. 94 00:06:44,279 --> 00:06:48,560 She then went on to write Approachable Accessibility Planning for Success, which was 95 00:06:48,560 --> 00:06:55,480 released in June twenty nineteen, and Architecting CSS, The Programmer's Guide to Effective 96 00:06:55,519 --> 00:07:00,759 Style Sheets in twenty twenty. Currently, she's the CTO at Andromeda Galactic Solutions, 97 00:07:00,600 --> 00:07:04,360 where she continues to learn, work on, and share her passion for 98 00:07:04,439 --> 00:07:09,199 front end development. Welcome back to the show. Martine, thanks for having 99 00:07:09,199 --> 00:07:13,240 me back. It's pleasure. Yeah, it's our pleasure. Yeah, good 100 00:07:13,240 --> 00:07:15,879 to be back. Actually, and I just felt like we haven't we haven't 101 00:07:15,879 --> 00:07:21,720 cried about CSS much lately, so I should call Martine. Hopefully I won't 102 00:07:21,720 --> 00:07:28,959 make you cry. You are the Kleenex to our CSS tears. There you 103 00:07:29,120 --> 00:07:32,439 go, that's sweet. I need I need a jar, just like the 104 00:07:32,480 --> 00:07:38,240 teachers that have like jars of of misby, like tears of misbehaving students, 105 00:07:38,279 --> 00:07:44,160 I have tears of developers trying to do CSS crushed by CSS. Yeah. 106 00:07:45,439 --> 00:07:48,199 I just wanted to center ve man, how hard to be? You should 107 00:07:48,199 --> 00:07:58,120 create a card game CSS against humanity? And all of the answers are just 108 00:07:58,199 --> 00:08:01,000 the weird expressions of yess you never want to know about. Yeah, there 109 00:08:01,120 --> 00:08:07,160 little diagrams of boxes outside of boxes explain this. Yeah, you need to 110 00:08:07,160 --> 00:08:13,560 build a response query. Do you a funny funny funny? Oh man? 111 00:08:13,839 --> 00:08:18,079 Where the actually we start? What have you been working on lately? Well? 112 00:08:18,079 --> 00:08:20,519 I actually got a new book. Uh, it just came out. 113 00:08:20,639 --> 00:08:26,600 It's called Tiny CSS Projects. Uh it is so unlike the previous books. 114 00:08:26,639 --> 00:08:28,680 Well, the first one, the Kid's book, is a whole different ball 115 00:08:28,759 --> 00:08:33,720 game. But The other two were more a lot more theory and explaining and 116 00:08:33,720 --> 00:08:37,159 more the high level. This one was nitty gritty, like here's a project 117 00:08:37,360 --> 00:08:41,759 and here's how you would do it. So instead of going at it from 118 00:08:41,759 --> 00:08:45,240 a theory perspective, it was very much an application and it's and you can 119 00:08:45,279 --> 00:08:48,320 totally like code along with it, and there's a repo with it with the 120 00:08:48,360 --> 00:08:52,480 starting HTML. So it's very much a here's the thing you might want to 121 00:08:52,519 --> 00:08:56,159 do. And so picking the picking the projects in there, I was trying 122 00:08:56,200 --> 00:09:00,200 to figure out, like, what what are things that I really regularly in 123 00:09:00,240 --> 00:09:03,039 my career? Like what are the things I'm regularly asked to do? And 124 00:09:03,080 --> 00:09:05,080 then what are some concepts that are really important for people to know? And 125 00:09:05,120 --> 00:09:09,240 you married the two and you get twelve projects and so the So it's very 126 00:09:09,320 --> 00:09:13,559 much things. Where as much as the chapters get more and more difficult as 127 00:09:13,559 --> 00:09:16,519 you progress through the book, it's very much a hey, I don't remember 128 00:09:16,559 --> 00:09:20,200 how to do that thing, let me go look up how it was done, 129 00:09:20,240 --> 00:09:22,120 and you could totally use it that way as well, So not just 130 00:09:22,159 --> 00:09:26,799 to read through book, but a jump to to remind yourself of books right 131 00:09:26,960 --> 00:09:31,840 exactly exactly what's up with the bustle on the cover. I was given three 132 00:09:31,960 --> 00:09:37,519 choices in terms of the cover picture by Manning, and I picked the one 133 00:09:37,600 --> 00:09:41,279 that looked. It's funny how they wouldn't let the designer design her own design 134 00:09:41,360 --> 00:09:46,200 book by design, you know, but it is, I mean, it 135 00:09:46,279 --> 00:09:50,240 is part of an imprint, the tiny imprint. So they have an aesthetic, 136 00:09:50,440 --> 00:09:54,559 right, Yeah, it's like they're in they have. It's the most 137 00:09:54,600 --> 00:10:01,000 of their books have that same. It's from a series of of and they're 138 00:10:01,039 --> 00:10:05,159 all like drawings from costume and so of different places around the world and eras, 139 00:10:05,440 --> 00:10:07,399 and so it's a series and so they're picking off of those plates, 140 00:10:07,480 --> 00:10:13,080 right. So it's so funny. I mean, I like naming stuff in 141 00:10:13,200 --> 00:10:16,720 software. Making a book cover that hasn't already been made before not not a 142 00:10:16,799 --> 00:10:22,440 sile problem, like very challenging, but I like this. It makes the 143 00:10:22,440 --> 00:10:26,320 book approachable. To call it tiny, I think, you know, it's 144 00:10:26,360 --> 00:10:28,480 just like, oh, they're just little projects. It's gonna be fine. 145 00:10:28,480 --> 00:10:35,080 You're gonna be fine. So let's start off with a gripe from this old 146 00:10:35,080 --> 00:10:39,720 guy here me. You know, in programming, one of the things I 147 00:10:39,759 --> 00:10:45,480 love about writing code is reusability, Like all the things that I do over 148 00:10:45,519 --> 00:10:48,320 and over again. I can put in a library and I can just include 149 00:10:48,360 --> 00:10:50,559 that library, and I got all my extension methods, and I got all 150 00:10:50,600 --> 00:10:56,559 that stuff. And CSS is really kind of a global thing unless you do 151 00:10:56,720 --> 00:11:01,320 some tricks to scope it, you know, like Blazer and other frameworks do 152 00:11:01,399 --> 00:11:07,440 this. But is there any such thing in the CSS world? Is as 153 00:11:07,480 --> 00:11:11,639 we have in the development world. These are CSS things that I use all 154 00:11:11,679 --> 00:11:16,639 the time, and I want them in some easily easy to customize into my 155 00:11:16,879 --> 00:11:22,279 app thing without busting over everything else that's in there. Isolated, scoped, 156 00:11:24,320 --> 00:11:28,759 reusable. Yeah, so there's a call. There's there's several ways to approach 157 00:11:28,799 --> 00:11:33,600 it. Like like everything in development, it depends I just put that one 158 00:11:33,679 --> 00:11:39,639 right there. But so there's the I would say the most straightforward, easiest 159 00:11:39,799 --> 00:11:45,279 way to do that would be by class name. Right. So if you 160 00:11:45,480 --> 00:11:48,559 have let's say I have a company brand, so I have you know, 161 00:11:48,639 --> 00:11:52,679 certain colors. I need all of my buttons to look like I have a 162 00:11:52,720 --> 00:11:56,360 certain theme. All of my tables need to have you know, like things 163 00:11:56,360 --> 00:12:01,759 that are not generally like individual page specific, but are going to be like 164 00:12:01,840 --> 00:12:05,279 all headers need to look like X. All paragraphs need to look like why. 165 00:12:05,360 --> 00:12:07,559 Right, at that point, you could make you can make a global 166 00:12:07,639 --> 00:12:13,600 style sheets that has all of those all of those styles that you could apply 167 00:12:13,679 --> 00:12:18,399 to every project within or every website or every web page within that institution. 168 00:12:18,799 --> 00:12:22,480 Right, So that could be kind of step one. And I guess with 169 00:12:22,600 --> 00:12:26,720 class names, you could you know, always prefix them with some unique value 170 00:12:26,960 --> 00:12:31,240 that such as your name or your company or whatever, right, so they 171 00:12:31,879 --> 00:12:35,240 clash with everything else exactly. So for for and usually what you're going to 172 00:12:35,320 --> 00:12:37,679 do at that point is at a company level, you're going to come up 173 00:12:37,679 --> 00:12:41,159 with a convention for that. Right. So for for us at Andromeda, 174 00:12:41,200 --> 00:12:46,480 it's because it's in drama. Galactic solutions are prefixed for most everything are gonna 175 00:12:46,480 --> 00:12:52,000 be ags dash something, right because and then then we know the other option 176 00:12:52,159 --> 00:12:58,240 is uh. And this is new, so it's not yet very widely supported. 177 00:12:58,799 --> 00:13:01,600 But CSS is coming out with the ability to have an AT scope, 178 00:13:01,639 --> 00:13:05,080 so the same thing, the same way you have an AT media quarrier or 179 00:13:05,120 --> 00:13:09,759 something like that. It's starting to have the concept. It's going to have 180 00:13:09,840 --> 00:13:13,440 the concept of AT scope, which will allow us to go ahead and say 181 00:13:13,639 --> 00:13:18,639 this is only for this particular thing, and so we won't have to muddy 182 00:13:18,679 --> 00:13:24,679 up our class names with prefixes and stuff like that. So those there's kind 183 00:13:24,679 --> 00:13:26,919 of the two sides of like how deep does it need to go? Does 184 00:13:26,919 --> 00:13:33,919 this need to be something that is brand specific? Where there's colors in bolvar? 185 00:13:33,039 --> 00:13:39,600 Is this something I want to be able to manipulate for various different creat 186 00:13:39,000 --> 00:13:43,559 various different brands or whatever. Because the other option is also CSS with CSS 187 00:13:43,559 --> 00:13:50,480 custom properties, it's really easy to set yourself a baseline style sheet where all 188 00:13:50,480 --> 00:13:52,840 of the things you might want to manipulate, your colors, how much padding, 189 00:13:52,879 --> 00:13:56,960 maybe your font, which font you're using, all of those you put 190 00:13:56,960 --> 00:14:00,840 in as CSS properties, and then in your project you're going to say right 191 00:14:00,960 --> 00:14:03,159 variable, you know, variable equals blah blah blah, be equals, see 192 00:14:03,159 --> 00:14:07,879 equals, and then you can go ahead and just plug in. So that 193 00:14:07,919 --> 00:14:09,759 would be kind of the way if I were to have to write one like 194 00:14:09,879 --> 00:14:13,360 this afternoon for a project. Yeah, I was thinking of like this. 195 00:14:13,519 --> 00:14:20,440 The centering example is perfect, right center grid. Show a grid with X 196 00:14:20,480 --> 00:14:24,039 many things and you know, rose and columns or whatever formatted this way. 197 00:14:26,559 --> 00:14:30,200 Those kinds of things that I that I do over and over again for each 198 00:14:30,559 --> 00:14:33,600 project. But it would be really great to just say, oh, I 199 00:14:33,639 --> 00:14:35,799 have a class for that already, you know, let me pull out my 200 00:14:37,480 --> 00:14:41,039 global CSS file that has all my things in it. And so those would 201 00:14:41,080 --> 00:14:46,799 be more like utility classes, and I personally have a beef with those simply 202 00:14:46,879 --> 00:14:52,159 because what ends up happening is all being Let's say you have a class that 203 00:14:52,559 --> 00:14:56,840 takes texts and makes it centerline whatever. Right, sure, you're going to 204 00:14:56,879 --> 00:15:01,240 put that class in your HTM off for that paragraph. Right now, you've 205 00:15:01,360 --> 00:15:07,120 mixed the concept of I'm styling this particular paragraph with what the content is in 206 00:15:07,159 --> 00:15:09,480 your HTML itself. So if I want to change the style of that paragraph, 207 00:15:09,600 --> 00:15:13,080 I have to go mess with the HTML rather than the CSS, which 208 00:15:13,120 --> 00:15:18,559 is what I should be messing with. So the semantics of the utility classes 209 00:15:18,039 --> 00:15:22,679 can't, depending on how they're implemented and used, can make it. So 210 00:15:22,799 --> 00:15:28,960 now you're mixing your content and your styles, which and it also means that 211 00:15:28,000 --> 00:15:33,480 those classes are getting put into your HTML absolutely everywhere. So let's say you're 212 00:15:33,519 --> 00:15:37,360 wanting to rebrand or rethme something, and now everything that was centered you want 213 00:15:37,399 --> 00:15:43,039 to the left or something like that, or whatever was orange now becomes blue. 214 00:15:43,279 --> 00:15:46,399 You're having to go change all of that HTML instead of the one place 215 00:15:46,399 --> 00:15:50,200 in CSS. I guess you could do what bootstrap does, right, Yeah, 216 00:15:50,399 --> 00:15:52,200 you could do what Bootstrap does, which is just sort of make class 217 00:15:52,279 --> 00:15:56,799 names and then swap them out with different implementations. So if you're doing if 218 00:15:56,840 --> 00:16:00,080 you're working in SaaS or less or silas or something like that, what you 219 00:16:00,080 --> 00:16:06,600 can do is make your utility classes as things that you can extend inside of 220 00:16:06,639 --> 00:16:10,840 your CSS class for that piece. And that decreases that problem a lot, 221 00:16:10,919 --> 00:16:15,480 because then you have your code snippet and you're essentially saying in my class and 222 00:16:15,559 --> 00:16:18,639 my CSS class at that point for whatever the piece, I can say import, 223 00:16:18,919 --> 00:16:22,440 I want to use my snippet A, my snippet, be my snippet 224 00:16:22,440 --> 00:16:26,080 bee by just doing you know, extend a extend be extend see and that 225 00:16:26,159 --> 00:16:30,200 works pretty well and that kind of allows for a happy medium between the two. 226 00:16:32,080 --> 00:16:37,960 But I personally don't like putting utility classes names directly in my HTML because 227 00:16:38,000 --> 00:16:41,200 of the maintainability aspect. Long term, that makes a lot of sense. 228 00:16:41,519 --> 00:16:45,799 Of course, I went and looked up scope in the Mozilla docs just to 229 00:16:45,840 --> 00:16:49,120 see, you know, I added it to the show notes because it's officially 230 00:16:49,159 --> 00:16:55,039 considered experimental, but Chromium's already fully implemented it, so it's Chrome Edge, 231 00:16:55,600 --> 00:17:00,600 Chrome and Android they're already running it. So yep, yeah, interesting to 232 00:17:00,600 --> 00:17:04,519 see. You know, doesn't work in Safari Shker actually know the preview version 233 00:17:04,519 --> 00:17:10,319 of Safari had supports it. What's funny with Safari's is I have a love 234 00:17:10,440 --> 00:17:15,039 hate relationship with it because they're on some things they've actually been ahead of the 235 00:17:15,119 --> 00:17:19,160 curve, and then in something and some CSS properties they've actually been ahead of 236 00:17:19,680 --> 00:17:23,920 Chrome, and then on some things they're lacking behind. So you know, 237 00:17:25,000 --> 00:17:27,920 depending on what I'm doing that day and be like, yeah, that's very 238 00:17:27,960 --> 00:17:32,240 interesting. It's not that they don't lag everything, like I don't know what 239 00:17:32,319 --> 00:17:37,119 the priority list looks like. Well, and recently, i'd say within the 240 00:17:37,240 --> 00:17:44,200 last started sometime during the pandemic, they started really catching up on stuff, 241 00:17:44,240 --> 00:17:47,079 at least on the CSS side, because they were kind of a blocker on 242 00:17:47,119 --> 00:17:51,319 the WA side too for a while there. And they's still from anything and 243 00:17:51,359 --> 00:17:56,920 that's more of a it's an Apple issue entirely on anything JavaScript, PWAE, 244 00:17:56,359 --> 00:17:59,440 yeah, that sort of stuff. They're still a pain in them, but 245 00:18:00,039 --> 00:18:02,319 they don't like they always get a sense, it's like anything that looks like 246 00:18:02,359 --> 00:18:04,319 you wouldn't use the store. They're unhappy. Yeah, they're going to drag 247 00:18:04,359 --> 00:18:07,960 on it. But CSS they've been they've been holding their own pretty well. 248 00:18:08,039 --> 00:18:15,079 I've been from a CSS standpoint, They're find Firefox depending on the use case, 249 00:18:15,119 --> 00:18:18,279 has kind of been interesting. And it took like it depends on the 250 00:18:18,319 --> 00:18:22,720 property, like Subgrid Chrome was the last one to get it, and then 251 00:18:22,960 --> 00:18:25,960 you know, like it really just depends on what it is, like it's 252 00:18:26,079 --> 00:18:30,960 property specific. I'd say right now, Firefox Chrome in Safari' probably on par 253 00:18:32,519 --> 00:18:36,599 depending on which of the latest of what you're looking at, only only until 254 00:18:36,599 --> 00:18:40,480 you dig into the very nooks and crannies. And if you're digging there, 255 00:18:40,519 --> 00:18:45,039 you're looking for your own trouble anyway, probably probably, Or you're playing my 256 00:18:45,160 --> 00:18:48,599 game, which is like, ooh, this just came out. Which of 257 00:18:48,720 --> 00:18:52,680 the night Least Canary like completely on staple version has it so I can play 258 00:18:52,720 --> 00:18:56,279 with it that game? Right, Which of the on fire versions can render 259 00:18:56,319 --> 00:19:03,759 this twice before the crashes my machine exactly exactly, not that I would know. 260 00:19:03,279 --> 00:19:11,200 I know that well, I'm usually pressing against language features like that, 261 00:19:11,279 --> 00:19:12,640 So oh, that's interesting. Let's see how that works. Oh, that 262 00:19:12,720 --> 00:19:18,359 doesn't work at all. Okay. I think the hardest part, and thankfully 263 00:19:18,480 --> 00:19:26,440 I think the browser world learned their lesson with GRID is that I E had 264 00:19:26,640 --> 00:19:32,880 implemented a non standard version of GRID. Yeah, while it was still experimented, 265 00:19:33,079 --> 00:19:36,559 I had implement one time or another, every version of IE implemented a 266 00:19:36,559 --> 00:19:37,839 non standard version of everything. Right, yea, right, I mean that 267 00:19:38,279 --> 00:19:45,319 the real actually actually six I E five for Mac. It was five or 268 00:19:45,319 --> 00:19:48,799 four, maybe it was five. One of the two was the very first 269 00:19:48,839 --> 00:19:55,400 browser to fully implement. Like, let's start with I for Mac. Like, 270 00:19:55,519 --> 00:19:59,559 that's the big funny one about that for for was it from no? 271 00:19:59,599 --> 00:20:02,160 It was? Yeah, it was I for Mac, which was already weird. 272 00:20:02,480 --> 00:20:04,240 Yeah, it was the very first to fully implement the CSS spec. 273 00:20:04,400 --> 00:20:07,799 Right, But I E six implemented a version of the spec that wasn't ratified, 274 00:20:07,839 --> 00:20:11,680 so it was a unique version of CSS. Which is kind of funny 275 00:20:11,680 --> 00:20:15,240 because they went from being the very first to fully implement the spec at the 276 00:20:15,279 --> 00:20:22,200 time to whatever it became, which you know is the source of all memes. 277 00:20:22,240 --> 00:20:30,359 Now, yeah, there's the old article from two thousand. I E 278 00:20:30,519 --> 00:20:36,039 five for Mac is a quantum leap for browsers. There you go. Yep, 279 00:20:37,799 --> 00:20:41,279 oh so much pain. I remember when I was excited about I E. 280 00:20:41,400 --> 00:20:45,079 Nine. That was like the job version, right, yeah, the 281 00:20:45,160 --> 00:20:52,319 JavaScript engine rounded corners, Yeah, done done. Yes, the CSS person's 282 00:20:52,359 --> 00:20:55,359 in the room, so that's what she's going to refer to. Oh, 283 00:20:55,440 --> 00:21:00,759 yes, rounded corners up the CSS three rounded corner. But now the but 284 00:21:00,839 --> 00:21:04,359 now, I think I'd rather wait a little bit longer for a future to 285 00:21:04,359 --> 00:21:07,960 come out and not have to deal with the chaos that a non stand respect 286 00:21:08,039 --> 00:21:15,000 at some point being implemented. It became then getting it faster just to have 287 00:21:15,119 --> 00:21:17,640 to because you know, once it's out there, people are going to use 288 00:21:17,640 --> 00:21:19,880 it in PROD. Like you can say, don't use it in prod all 289 00:21:19,920 --> 00:21:25,119 you want, it's not going to happen. And it's not like we don't 290 00:21:25,119 --> 00:21:29,039 have a good feature shot right now, like it's back in the shim days 291 00:21:29,160 --> 00:21:33,720 remember those, you know, like because we have very uneven browsers, Like 292 00:21:33,799 --> 00:21:37,480 it was just that was the transition from HBL four to HML five and now 293 00:21:37,640 --> 00:21:41,359 we're kind of over that, and it's like, yeah, you know what 294 00:21:41,400 --> 00:21:45,279 I'm really looking for in a browser stability Yep, you know, just to 295 00:21:45,400 --> 00:21:48,480 do the thing. I won't press too hard against the edge of the language 296 00:21:48,480 --> 00:21:51,319 if you don't break it for me. How about that I still have an 297 00:21:51,359 --> 00:21:55,839 old version of Firefox that I that the if I update it, all the 298 00:21:55,880 --> 00:22:02,279 features that I love will break. I have to put up with the constant 299 00:22:02,759 --> 00:22:06,839 Jack Russell terrier in the top right corner, going should updated? Now, 300 00:22:07,000 --> 00:22:08,799 update? Now? How about now? How about now? How about now? 301 00:22:14,759 --> 00:22:18,039 I had an I had an app the other day that massively like, 302 00:22:18,319 --> 00:22:22,079 we started getting errors in the log like we've never seen before. So of 303 00:22:22,079 --> 00:22:26,279 course, you know that's that's cause for concern. And we're looking at it 304 00:22:26,319 --> 00:22:30,799 and we're like, what is generating all of this garbage? And we look 305 00:22:30,880 --> 00:22:36,319 and it's this ancient Windows phone and I'm like, yeah, no, we're 306 00:22:36,319 --> 00:22:41,279 not supporting that. I don't care. Nope, nope, nope, nope, 307 00:22:41,440 --> 00:22:45,839 nope. At Lee Hunter will never be able to use your websites. 308 00:22:47,440 --> 00:22:51,799 He's the only one using a Windows phone as far as I know. Yeah, 309 00:22:52,000 --> 00:22:53,759 I don't know. I didn't know if he is anymore. Like the 310 00:22:53,799 --> 00:22:56,519 battery's got to be done on those phones. It's been quite a few years. 311 00:22:56,599 --> 00:23:00,599 At some point. It's a security risk because they're not updating it anymore. 312 00:23:00,799 --> 00:23:03,599 You know, if you can't get on the internet, you're really not 313 00:23:03,640 --> 00:23:08,640 at a risk. Right, Yeah, that's true. You got to point 314 00:23:08,640 --> 00:23:18,440 the mister cammell. I missed my phone. I didn't rebuild my phone shrine 315 00:23:18,839 --> 00:23:22,359 in the new office, so I should go dig it out. It's in 316 00:23:22,400 --> 00:23:26,119 a box somewhere. But yeah, I have nine point fifty you know, 317 00:23:26,480 --> 00:23:30,839 it's one thousand dollars calculator. Yeah, except for the fact that it won't 318 00:23:30,880 --> 00:23:33,960 hold a charge anymore. For sure, none of my old Windows phones hold 319 00:23:33,960 --> 00:23:37,680 a charge. They're in the drawer of broken dreams, for sure. It's 320 00:23:37,720 --> 00:23:41,799 a different kind of broken dream. But definitely the one I missed, emotion 321 00:23:41,920 --> 00:23:45,480 is my HTC with a slide out keyboard. That's the phone I missed. 322 00:23:45,960 --> 00:23:49,240 Back when phones were cool. That's the real sin of the iPhone. Right 323 00:23:49,279 --> 00:23:53,359 before the iPhone, phones had fun stuff, right BlackBerry, that was you 324 00:23:53,359 --> 00:23:56,799 remember having the GPS receiver we could plug into the top of the phone to 325 00:23:56,960 --> 00:24:00,680 stick on the side of the RV so you could track as if we drove 326 00:24:00,720 --> 00:24:04,640 across. Yes, you know, life was gear was way more interesting these 327 00:24:04,680 --> 00:24:07,480 days. We really got to talk to the young kids. Now, this 328 00:24:07,559 --> 00:24:11,920 is they're they're turning, they're tuning out right now as we geek out. 329 00:24:12,200 --> 00:24:17,880 I don't know if that's bad all days anyway, I just hand them an 330 00:24:17,960 --> 00:24:21,319 old back a light rotary phone and have them dial a number and see how 331 00:24:21,359 --> 00:24:25,000 long it takes. It'll be. We don't like people with zero's in our 332 00:24:25,039 --> 00:24:32,920 phone numbers back in my day. All right, we gotta stop. We 333 00:24:33,000 --> 00:24:36,160 got to stop that. So all right, so let's talk about your book. 334 00:24:36,200 --> 00:24:40,960 What are some of the new discoveries that went into your book this time? 335 00:24:41,880 --> 00:24:45,119 Most of the as much as there are some things where we tried to 336 00:24:45,559 --> 00:24:51,680 kind of really butt up to how to to the new the new stuff, 337 00:24:51,759 --> 00:24:55,920 right, We do present grid, we do persent flex. We tried to 338 00:24:55,960 --> 00:25:00,000 stay within the bounds of at least, you know, when it was published 339 00:25:00,039 --> 00:25:03,160 earlier this year, of what was going to be fairly well supported, right, 340 00:25:03,200 --> 00:25:07,440 because the whole point is to for it to be practical, like ninety 341 00:25:07,519 --> 00:25:11,720 nine percent of development, especially in CSS. Yeah, there's cool stuff coming 342 00:25:11,759 --> 00:25:18,680 out and it's very very useful. However, it's not useful if you can't 343 00:25:18,759 --> 00:25:21,920 use it in PROD. And most people that I've run into when they're struggling 344 00:25:21,920 --> 00:25:26,119 with CSS, they're either CSS is their jam and they're going to go play 345 00:25:26,119 --> 00:25:29,440 with the cutting edge because that's their jam, or they're struggling with it and 346 00:25:29,480 --> 00:25:32,839 they just want the bloody answer and they don't care how fancy it is, 347 00:25:32,880 --> 00:25:34,880 and they don't care about the bills and whistle. They just wanted to work, 348 00:25:36,160 --> 00:25:38,839 right. There's very few people in between, so we tried to stay 349 00:25:40,000 --> 00:25:42,799 on the These are things that are widely implemented and are going to just work. 350 00:25:44,960 --> 00:25:48,240 However, I am in the process of finishing a course that's a four 351 00:25:48,279 --> 00:25:55,279 part module like what they call their life but life projects for Manning, which 352 00:25:55,400 --> 00:25:59,720 is actually in dealing with the cutting edge, where I specifically want to find 353 00:25:59,839 --> 00:26:04,200 the latest and greatest that the new properties like has and wear, things like 354 00:26:04,240 --> 00:26:08,960 scroll animations, those kind of things that are the extreme that are definitely not 355 00:26:10,000 --> 00:26:12,240 implementing everywhere where. At the beginning of each module, I'm like, okay, 356 00:26:12,279 --> 00:26:17,400 you need this browser this version or up this browser this version of UP. 357 00:26:17,480 --> 00:26:19,960 Here's how you turn on flags so that you can look at these new 358 00:26:21,039 --> 00:26:23,119 versions. But for the book, we try to stay standard. But I 359 00:26:23,119 --> 00:26:26,720 don't know, you want to print that on paper, right, Well, 360 00:26:26,759 --> 00:26:30,720 that's the thing that's why the live version the live book, because that's a 361 00:26:30,119 --> 00:26:34,799 that's a web thing and doesn't Yeah, that's not on paper because it's gonna 362 00:26:34,920 --> 00:26:38,519 you know, half of what I did for that, even though it's coming 363 00:26:38,559 --> 00:26:42,319 out you know later, a little bit later, a month or so, 364 00:26:42,480 --> 00:26:48,680 probably roughly, it's already like, okay, now there's two more browsers that 365 00:26:48,720 --> 00:26:53,119 already support it. Right, So it's it's ever what is cutting edges ever 366 00:26:53,160 --> 00:26:56,400 shifting anyway, But the book tried to stay within the realm of what will 367 00:26:56,480 --> 00:27:02,319 work nicely everywhere. I'm also mind of like, if the person reading this 368 00:27:02,359 --> 00:27:06,960 book need the edge of CSS or still working through the fundamentals right, like 369 00:27:07,160 --> 00:27:11,799 where are they? Yeah that's hard. Yeah, that's hard. I mean 370 00:27:12,039 --> 00:27:18,200 I get good CSS for like an hour, then it passes right and then 371 00:27:18,400 --> 00:27:19,480 and then you got to start over again. The next time it's like I 372 00:27:19,519 --> 00:27:23,720 have to style what uh no? Then you get back into it again. 373 00:27:23,759 --> 00:27:27,200 So I kind of feel like, yeah, this is the book for me, 374 00:27:27,319 --> 00:27:30,599 just because it can go back and read that piece again and say, 375 00:27:30,599 --> 00:27:33,400 oh maybe I can do this what I what I feel is interesting. If 376 00:27:33,440 --> 00:27:38,400 you don't do CSS, there's there's kind of two things that are are hard 377 00:27:38,480 --> 00:27:42,160 with CSS. It's really easy to get into a situation where if the code 378 00:27:42,240 --> 00:27:47,200 was hacked together to begin with with somebody that was unsure and you know, 379 00:27:47,279 --> 00:27:51,519 struggling with how do I get this done, and not necessarily thinking about the 380 00:27:51,559 --> 00:27:56,480 overall architecture and maintainability of it, right, because there's it's very hard to 381 00:27:56,519 --> 00:28:00,839 worry about good architecture and maintainability when you're struggling with can I just make the 382 00:28:00,880 --> 00:28:08,960 thing work? The bigger So the code that has been written that way is 383 00:28:10,000 --> 00:28:12,680 going to be harder to maintain. And so it's kind of a self kind 384 00:28:12,720 --> 00:28:18,400 of feeding loop of the code that was written was written by somebody who was 385 00:28:18,480 --> 00:28:22,759 unsure of themselves, didn't maybe go about it the most efficient way or the 386 00:28:22,759 --> 00:28:27,799 most clear cut way or most polite description of the spaghetti that CSS that people 387 00:28:27,839 --> 00:28:30,880 may it's it's not just that you finally got it to work. Is that 388 00:28:30,920 --> 00:28:33,559 you didn't clean up all the stuff that you all your failed attempts either, 389 00:28:33,720 --> 00:28:37,319 right ye are? You just do know finantial things about how stuff goes together 390 00:28:37,400 --> 00:28:41,799 and how it doesn't. So, just like anything, spaghetti code is hard. 391 00:28:41,920 --> 00:28:44,960 CSS is hard to write, but CSS is way harder to read. 392 00:28:45,599 --> 00:28:48,960 Right, I'm looking at the style and going like, what does this do? 393 00:28:49,680 --> 00:28:53,160 This is hard and it depends on what the parents do and what the 394 00:28:53,240 --> 00:28:59,680 parents of those do and like, because there's the inheritance aspect and the and 395 00:28:59,720 --> 00:29:02,599 all that as well. Right, So you can't even look at a specific 396 00:29:02,640 --> 00:29:07,920 class and say this is what's happening, right, yeah, right, until 397 00:29:07,920 --> 00:29:11,599 you see how it's implemented. Although the eleven tools today are pretty good about 398 00:29:11,599 --> 00:29:17,680 showing you what styles are applying to a given auditory. Yes, yes, 399 00:29:18,119 --> 00:29:22,000 and you can look. What's nice too is you can look at the If 400 00:29:22,039 --> 00:29:26,079 you look at the computed, it will show you everything that's applied to a 401 00:29:26,119 --> 00:29:29,839 particular element and then allow you to drill down like most browsers allow you to 402 00:29:29,839 --> 00:29:32,440 do that, which is really nice when you're like, why in the ever 403 00:29:32,559 --> 00:29:37,000 loving anything is this thing doing this right all of the expletives. Well, 404 00:29:37,440 --> 00:29:41,559 yes, I'm trying to keep it clean for your show, but yeah, 405 00:29:42,000 --> 00:29:47,240 you're very kind the other way. Yeah, the next part is like, 406 00:29:47,559 --> 00:29:49,920 so why is that style applying? I can see that it is, I 407 00:29:51,160 --> 00:29:53,920 just don't know why and where is it coming from? Yeah, that's the 408 00:29:53,960 --> 00:29:57,519 other big piece, right, and we're going to follow up on that thought. 409 00:29:57,640 --> 00:30:06,119 Right after these very important messages, we'll be right back and you're listening 410 00:30:06,200 --> 00:30:08,880 to dot net Rocks. I'm Carl Franklin. That's my buddy, Richard Campbell 411 00:30:10,039 --> 00:30:12,559 Hey, and Marten Dowden is here. We're talking CSS. Before we get 412 00:30:12,559 --> 00:30:15,359 back into it, I just want to remind you that, yes, sometimes 413 00:30:15,400 --> 00:30:19,839 you don't hear ads, and that's great because speaker puts them in. But 414 00:30:19,920 --> 00:30:26,559 if you never want to hear ads, you could join our Patreon group Patreon 415 00:30:26,839 --> 00:30:32,039 dot dot netroocks dot com and you will get a custom feed that has zero 416 00:30:32,319 --> 00:30:37,279 inserted ads, only the ones that we speak ourselves. All right, So 417 00:30:37,440 --> 00:30:40,799 enough of that, Martin. I don't know if you're the right person to 418 00:30:40,880 --> 00:30:45,319 ask about this, but I gotta know. Is chat GPT any good at 419 00:30:45,359 --> 00:30:48,640 figuring out CSS like it is at figuring out code. I have not had 420 00:30:48,680 --> 00:30:56,759 a good track record with it. I don't I have gotten to where more 421 00:30:56,799 --> 00:31:02,359 often than not chat GPG trist you one. I found it too noisy because 422 00:31:02,359 --> 00:31:04,920 I can write it fat. I can write the CSS faster than like if 423 00:31:06,160 --> 00:31:11,200 you can cope pilot or whatever, I can write it significantly faster than anything 424 00:31:11,240 --> 00:31:18,519 it can feed me copilot does good with CSS. No, she quietly saying, 425 00:31:18,640 --> 00:31:22,559 no, I am quietly. I am quietly saying that the issue is 426 00:31:22,599 --> 00:31:26,640 in an issue of context. What I find may be a much better use 427 00:31:26,799 --> 00:31:33,400 of AI, if you're not sure, would be things like the chat asking 428 00:31:33,440 --> 00:31:37,839 it what is this code doing or what does or what is the property for 429 00:31:38,000 --> 00:31:45,359 X? Like essentially using it like a glorified stack overflow. The downside to 430 00:31:45,400 --> 00:31:48,559 it, though, is that stack overflow you have comments and arrow ups and 431 00:31:48,640 --> 00:31:52,240 downs to tell you, like to give you some inkling of how good this 432 00:31:52,359 --> 00:31:56,839 answer is. Right, Chat GPT doesn't have that, or any of the 433 00:31:56,880 --> 00:32:00,720 other aas don't have kind of that context. So you're using a little bit 434 00:32:00,759 --> 00:32:06,039 of information by doing it that way. But that's about the extent that I 435 00:32:06,079 --> 00:32:15,440 personally have have like relegated AI two in my CSS. I just I don't 436 00:32:15,440 --> 00:32:21,119 think it's quite there, Like maybe if there was a model's built specifically for 437 00:32:21,160 --> 00:32:27,640 it. Maybe if it was maybe, Like I just don't think it's I 438 00:32:27,720 --> 00:32:30,119 just don't think you're going to get the quality out of it. If that 439 00:32:30,160 --> 00:32:32,720 makes it Yeah, and that's been my experience too. Can you get it 440 00:32:32,759 --> 00:32:37,079 to hack something together? Sure? Probably? Will it be a good quality 441 00:32:37,119 --> 00:32:40,720 solution. I doubt it, Like that's that's kind of where I'm at out 442 00:32:40,720 --> 00:32:45,079 it. Yeah, and it never is. So is there a better? 443 00:32:45,319 --> 00:32:47,559 I mean, Visual Studio and visual Studio code are great because they let you 444 00:32:47,599 --> 00:32:52,240 do whatever you want. But it seems like, you know, with tools 445 00:32:52,319 --> 00:32:55,559 like you know, get ub Copilot and things, if people want a little 446 00:32:55,559 --> 00:33:00,640 more guidance in U when they're developing anyway, and you know, CSS being 447 00:33:01,119 --> 00:33:07,400 global and cascading, you know, and multiple layers and levels. We said 448 00:33:07,400 --> 00:33:09,960 it before, when you're looking at a class, you don't really know the 449 00:33:09,960 --> 00:33:16,480 context of it, and especially when you're utilizing it in multiple divs or p's 450 00:33:16,640 --> 00:33:22,680 or whatever your elements are. Is there anything that can help you visualize that, 451 00:33:22,519 --> 00:33:28,759 or any tooling that is better at saying let's say that you want to 452 00:33:29,279 --> 00:33:34,519 you're trying to put flex stuff on something that's inside a grid or the other 453 00:33:34,559 --> 00:33:37,559 way around, and you know that's going to cause bizarre results. Is there 454 00:33:37,559 --> 00:33:40,359 anything that says, hey, WHOA, you probably want to do it this 455 00:33:40,400 --> 00:33:45,920 way instead. I don't know of anything that's that does that at the moment, 456 00:33:46,680 --> 00:33:50,799 off the top of my head. I'm also a terrible person to ask 457 00:33:50,920 --> 00:33:54,119 because like I know, like I know the CSS, right. I don't 458 00:33:54,480 --> 00:33:59,920 go looking for those tools. I go looking for articles or explanations or the 459 00:34:00,119 --> 00:34:02,599 details, or I'll go read the docs on whatever the new features are coming 460 00:34:02,599 --> 00:34:06,160 out of. But in terms of the fundamental day in and day out, 461 00:34:06,440 --> 00:34:09,440 I don't use those in any way, shape or form. So I don't 462 00:34:09,559 --> 00:34:14,599 and I don't have a need for those. What I would say is maybe 463 00:34:14,639 --> 00:34:16,880 we'll put that to the listeners. Yeah. What I would say though, 464 00:34:17,039 --> 00:34:22,559 is that CSS is one of those things that you can get up and running 465 00:34:22,599 --> 00:34:27,280 and rune your first line of CSS successfully, very very quickly. Right. 466 00:34:27,519 --> 00:34:30,960 There's very little knowledge that needs to come into being able to say to put 467 00:34:30,960 --> 00:34:37,280 on an HTML element style blah blah blah, or even if you go one 468 00:34:37,320 --> 00:34:40,199 step further and put a style sheet, being able to say font white bold, 469 00:34:40,400 --> 00:34:45,199 Right, there's very little. It takes it very very little to get 470 00:34:45,199 --> 00:34:52,239 started, but it is actually a fairly complex and difficult language to actually learn. 471 00:34:52,719 --> 00:34:57,960 And I think what's happening with CSS is you wouldn't really is that there's 472 00:34:58,000 --> 00:35:01,800 a lot of looking for a match bullet because it looks so easy on the 473 00:35:01,920 --> 00:35:07,000 surface when it really there is a fundamental knowledge where it needs to be. 474 00:35:07,199 --> 00:35:09,480 Just like any other skill, it would be learned. If I went around 475 00:35:09,639 --> 00:35:14,599 asking for a magic bullet for writing dot net tomorrow, I'd get laughed at, 476 00:35:14,760 --> 00:35:17,280 right, they'd be like not cute, right? And I feel like 477 00:35:19,079 --> 00:35:24,159 because he says, has this this ape like it appears simple when it really 478 00:35:24,320 --> 00:35:30,119 isn't that we tend to go looking for these magical things instead of just sitting 479 00:35:30,159 --> 00:35:34,679 down and learning it. Like a skill. Mistrap fixes everything, Martine, 480 00:35:34,719 --> 00:35:37,280 didn't you know? Oh no, it's it's and I'm gonna get hate. 481 00:35:37,559 --> 00:35:40,119 I'm going to get hate for this. It's a tail winds Now, that's 482 00:35:40,159 --> 00:35:45,800 the magic book fixes every hotness. But here's the thing. Like as a 483 00:35:45,840 --> 00:35:52,920 developer, I like in CSS because of the way that you don't really understand 484 00:35:52,199 --> 00:35:57,119 until you see its implementation in the parents and the parents and parents. It'd 485 00:35:57,119 --> 00:36:01,280 be like having a class that has has no inheritance on it, and yet 486 00:36:01,320 --> 00:36:07,400 it inherits from three or four different ancestors, right, And so you wouldn't 487 00:36:07,440 --> 00:36:12,440 have you wouldn't know that by looking at the class the trick. You would 488 00:36:12,480 --> 00:36:15,599 only know it by the implementation. It's like having classes that you just throw 489 00:36:15,679 --> 00:36:20,880 together and there you don't. When you're looking at code, you don't know 490 00:36:20,960 --> 00:36:24,239 what it's actually working on. I think that speaks to Richard's confusion, which 491 00:36:24,280 --> 00:36:29,239 is just like, I have no idea what this means in the context of 492 00:36:29,280 --> 00:36:32,000 my application. The Chrome dev tools do a really good job at showing you 493 00:36:32,079 --> 00:36:37,360 the inheritance. So at this point, if you're looking at you if you're 494 00:36:37,400 --> 00:36:40,159 wanting to see what all is being applied and where are it all is coming 495 00:36:40,199 --> 00:36:44,760 from, and the ability to do like, you know, all what is 496 00:36:44,760 --> 00:36:50,719 all inherited on this particular element. It's very granular to the element, but 497 00:36:50,880 --> 00:36:55,679 you can you can't absolutely get that history and that inheritance and where all everything's 498 00:36:55,679 --> 00:37:00,079 coming from. But you're right, once it's mixed with the implementation, yes, 499 00:37:00,119 --> 00:37:01,760 but yeah, but you're going to see it in the deaf tools. 500 00:37:02,440 --> 00:37:07,239 I don't know of now. There are a handful of plugins and stuff for 501 00:37:07,360 --> 00:37:09,159 vs code where you can see like but it's no I mean, it's no 502 00:37:09,199 --> 00:37:14,320 different than doing control shift find where you can go find every place that uses 503 00:37:14,320 --> 00:37:20,599 a particular class. But that's the deaf tools at that point in the browser 504 00:37:20,679 --> 00:37:22,039 is going to be your best bet. Yeah, you're lost without the dev 505 00:37:22,079 --> 00:37:27,000 tools. If you're doing any CSS whatsoever. Yeah, because you have to 506 00:37:27,039 --> 00:37:30,559 see it in the context of where it's implemented. Well, it's very visual, 507 00:37:30,679 --> 00:37:34,519 like I need to be able to see is this red actually you know? 508 00:37:34,639 --> 00:37:37,800 Is it actually turning red? You know? Or is it actually like 509 00:37:37,960 --> 00:37:42,760 is this button actually got its background or it's border or it's whatever. There's 510 00:37:42,800 --> 00:37:45,320 no you're going to have to go put it to the browser anyway, right, 511 00:37:45,480 --> 00:37:50,760 Yeah, Yeah, what do you think about Sigma. It's a design 512 00:37:50,840 --> 00:37:57,039 tool, it's it's up pre made css D but there's pre made CSS and 513 00:37:57,039 --> 00:38:01,920 there's pre made CSS right the premate'ss it spits out is fine, there's nothing 514 00:38:01,960 --> 00:38:07,119 inheritently wrong with it. The downside is one of the patterns that I do 515 00:38:07,199 --> 00:38:09,320 see, which is something to be careful of, is what happens, especially 516 00:38:09,320 --> 00:38:13,480 when you're using something like Angular or React, which is component based, and 517 00:38:13,519 --> 00:38:16,119 now you have, especially with Angular, you'll have your isolate, your CSS 518 00:38:16,119 --> 00:38:22,840 isolation to the component right there in the thing. So it's you get designer 519 00:38:22,920 --> 00:38:29,199 rights beautiful component and Pigma Figma spits out CSS. Developer takes CSS from Phigma 520 00:38:29,239 --> 00:38:32,199 sticks it into the component. CSS. Great, now we've done that fifty 521 00:38:32,239 --> 00:38:37,360 times for things that should be pretty much like your style, your font family, 522 00:38:37,400 --> 00:38:39,880 your color, your you know, that should have been global styles to 523 00:38:39,920 --> 00:38:45,360 begin with. So there's a little bit of having to if you're being smart 524 00:38:45,400 --> 00:38:49,760 about it and if you're thinking through this should be a global style. This 525 00:38:49,800 --> 00:38:52,639 should be a global style. Let's not copy it everywhere. It's what it 526 00:38:52,679 --> 00:38:58,440 spits out is perfectly fine, and it's really good for things like the designer 527 00:38:58,440 --> 00:39:02,119 put a gradient behind this thing, right, spinning out the actual CSS gradient 528 00:39:02,320 --> 00:39:07,119 is super helpful because I mean, yeah, I can sit there and try 529 00:39:07,119 --> 00:39:09,039 to figure out what all colors you did, but like drop chefs, why 530 00:39:09,199 --> 00:39:13,719 things like that? Why? Right exactly? So for those sorts of things 531 00:39:13,719 --> 00:39:16,760 it's actually quite helpful. But like anything, we need to you know, 532 00:39:16,880 --> 00:39:22,280 use our brands and not be well, you know, this to me just 533 00:39:22,320 --> 00:39:27,920 strikes me as the difference between I set a unit tests and an actual functional 534 00:39:27,960 --> 00:39:34,360 test, Like there's an architecture to good styling. No given page manifests fully 535 00:39:35,039 --> 00:39:37,760 like and I think it's really hard to have a tool think broadly for you 536 00:39:37,880 --> 00:39:43,199 like that, right exactly exactly. I still feel like I just got to 537 00:39:43,239 --> 00:39:45,000 call the expert, Like I don't know that I'm going to have unless I 538 00:39:45,000 --> 00:39:49,559 really want to commit myself too. It's like getting that design right is hard, 539 00:39:49,800 --> 00:39:52,440 well, but that's fine. Like I'm not going to go be writing 540 00:39:52,519 --> 00:39:55,159 massive back ends either. If I need a fancy, funtcy back in a 541 00:39:55,199 --> 00:40:00,119 bunch of fancy like I don't know SQL or something, I'm not going to 542 00:40:00,159 --> 00:40:02,599 be writing. I'm going to be calling an expert. Like that's just not 543 00:40:04,079 --> 00:40:06,880 right. Give it, it's due. Right, there's skills and you can't 544 00:40:07,320 --> 00:40:08,440 you know, you can't do them all, so you bring in your expert 545 00:40:08,480 --> 00:40:12,920 when you need them exactly. And that makes the perfect sense, But it 546 00:40:12,920 --> 00:40:16,760 does feel to me like you end up with nuggets of good styling from Figma 547 00:40:17,159 --> 00:40:22,440 and it takes them, the architect, to pull in these various pieces of 548 00:40:22,519 --> 00:40:24,960 renderings and say, okay, what does the overall template look like? Now? 549 00:40:25,039 --> 00:40:30,159 Yeah, exactly exactly. Okay, that's that's fair, and it you 550 00:40:30,199 --> 00:40:32,760 know, it's no different than you said designing a back end where you take 551 00:40:32,760 --> 00:40:36,519 a set of spikes on some hard pieces to try and figure out how make 552 00:40:36,559 --> 00:40:38,400 this thing work, and then at some point you got to sit back and 553 00:40:38,440 --> 00:40:44,119 say, okay, I see a service stark Christ looks like this right, 554 00:40:44,239 --> 00:40:47,000 the sort of broad view that that Now, when I think about it from 555 00:40:47,000 --> 00:40:51,840 a from a services point of view, it's very much a the whole system 556 00:40:51,840 --> 00:40:57,000 doesn't resonate with change, that when a likely change comes in the smallest footprints 557 00:40:57,000 --> 00:40:59,079 has to be modified. I don't know. I do you consider that in 558 00:40:59,199 --> 00:41:04,599 styling that it's not hard to update the style without having to rip the whole 559 00:41:04,599 --> 00:41:07,840 thing apart. Well, absolutely, because salas now has functions, so that's 560 00:41:07,840 --> 00:41:13,159 a whole different volcame right, like, that's a whole But in pure CSS, 561 00:41:13,400 --> 00:41:17,079 right, when you're doing a style change, there's kind of a it's 562 00:41:17,119 --> 00:41:22,360 a little bit of a different thought process than say updating like a JavaScript service 563 00:41:22,440 --> 00:41:24,800 or something. One of the things you're the first thing you're going to say, 564 00:41:24,920 --> 00:41:30,760 is this a special cookie change, as in, is this particular element 565 00:41:30,920 --> 00:41:36,280 or this particular thing on this page its own special whatever that needs a specific 566 00:41:36,360 --> 00:41:40,000 thing because it's different, or is this a global change? Right? And 567 00:41:40,079 --> 00:41:46,199 so that will dictate how that change happens If that makes sense? Yeah, 568 00:41:46,280 --> 00:41:50,239 no, totally. And now I start thinking in terms of difference between the 569 00:41:50,239 --> 00:41:52,639 class and the style. Where have we done a good set of class definition 570 00:41:52,719 --> 00:41:57,480 so that when we want to restyle it, You're just changing styling again. 571 00:41:57,599 --> 00:42:00,880 The classes aren't changing to the assignments don't need to change, You're just changing 572 00:42:00,920 --> 00:42:04,880 the style. Exactly exactly, because in theory, I should be able to 573 00:42:04,960 --> 00:42:09,199 reskin an entire application without ever touching anything but the CSS. That's the that's 574 00:42:09,239 --> 00:42:14,480 the gold the golden standard, right, Yeah, yeah, exactly, exactly 575 00:42:14,960 --> 00:42:19,159 exactly. My experience with CSS zen Garden, it's many examples of how I'm 576 00:42:19,480 --> 00:42:23,880 inadequate at this. Yeah, don't you know, I'm not this good? 577 00:42:24,760 --> 00:42:31,519 Good, So my team, I'm gonna shift gears here a little bit. 578 00:42:31,519 --> 00:42:37,800 What is your favorite style of music to play on your saxophone? Oh, 579 00:42:37,280 --> 00:42:45,159 oh yeah, that's my new baby for probably jazz. I love jazz. 580 00:42:45,320 --> 00:42:50,840 Oh really cool, like classic jazz, or I'm a Guard or a little 581 00:42:50,880 --> 00:42:54,239 Bird train Little Bird. I mean, if you play saxophone and you don't 582 00:42:54,280 --> 00:43:04,280 like Coltrane, I don't know why. Yeah. I think probably one of 583 00:43:04,320 --> 00:43:08,800 my favorites is brew Beck. Honestly, it's one of my probably. Yeah, 584 00:43:09,199 --> 00:43:14,079 I have a number of Pandora stations that were started with like brew Beck. 585 00:43:14,119 --> 00:43:17,480 As the seed go down, that's how you got there and you stayed. 586 00:43:17,639 --> 00:43:21,679 Yeah, exactly. I went back and I listened to a bunch of 587 00:43:21,719 --> 00:43:23,840 Paul Desmond albums. He's the guy who wrote Take five and he was alto 588 00:43:23,920 --> 00:43:30,559 player in the Brewbeck's quartet, and man, he's just so good, so 589 00:43:31,079 --> 00:43:36,880 amazing. Yeah, there's no there's no day where little Take five doesn't make 590 00:43:36,880 --> 00:43:42,360 it better. You got it fair enough, exactly. So is there such 591 00:43:42,440 --> 00:43:45,880 thing as a jazz style in CSS? Now? I'm just reaching for dumb 592 00:43:45,920 --> 00:43:53,239 questions? Yeah, she actually thought about that for a second. I smelled 593 00:43:53,239 --> 00:44:04,440 the smoke from here. Okay, I mean you can make you can make 594 00:44:04,480 --> 00:44:10,599 a jazz themed layout. Yeah, I want little notes to come out of 595 00:44:10,639 --> 00:44:14,679 my cursor when I move it around the screen and get big and then just 596 00:44:14,719 --> 00:44:19,440 go off o the late nineties called they're wanting there there you lie back, 597 00:44:19,519 --> 00:44:23,960 you know what? The little snow a little flames. Oh yeah. Camsterd 598 00:44:27,400 --> 00:44:34,480 amsterdaance dot com right Space Jam Space Jam's website is still up from like nineteen 599 00:44:34,519 --> 00:44:37,559 ninety five. Oh really yeah, and still looks exactly the same too. 600 00:44:38,760 --> 00:44:45,559 I demonstrated the writing an HTML stealer on the hampsterham site, so I actually 601 00:44:45,599 --> 00:44:49,159 had a local copy of the Hamster dam site for the longest time. I 602 00:44:49,199 --> 00:44:52,000 probably have it on a backup fire. It's all it is is just a 603 00:44:52,039 --> 00:44:57,920 table of animated gifts, gifts and an audio messed up version of a Disney 604 00:44:57,920 --> 00:45:00,360 song that if you actually publish on a page you will get pinged, you'll 605 00:45:00,559 --> 00:45:06,079 get easy made of. Okay, back to reality. So, is there 606 00:45:06,079 --> 00:45:08,800 anything that else that you want to talk about in your book that we haven't 607 00:45:09,000 --> 00:45:14,920 talked about yet? Trying to think of what else? What's the hard project? 608 00:45:15,119 --> 00:45:19,679 What's number twelve? Oh so number twelve is actually not the hard project 609 00:45:19,679 --> 00:45:23,480 for number twelve. What I did is I took I went and got like, 610 00:45:23,639 --> 00:45:28,280 what are some things? That's because everything up to chapter twelve, so 611 00:45:28,480 --> 00:45:34,239 eleven down are all in pure vanilla CSS, like there's no no frameworks, 612 00:45:34,239 --> 00:45:37,599 no nothing. For twelve, what I did is I brought in sas so 613 00:45:37,639 --> 00:45:43,239 that we could I could show like, here's the like, here's some things 614 00:45:43,320 --> 00:45:45,960 or some reasons why you might want to use something like SaaS, And so 615 00:45:46,039 --> 00:45:51,760 I really like, as much as the project isn't particularly difficult, I just 616 00:45:51,840 --> 00:45:55,039 showed some of the things that you could do in terms of looping and functions 617 00:45:55,119 --> 00:46:00,559 and having a pseudo it's they call it a map app. It's kind of 618 00:46:00,559 --> 00:46:06,360 a cross between an array and an object. Really like you're where you can 619 00:46:06,440 --> 00:46:12,559 have if statements, where like you're you're literally putting in logic inside of your 620 00:46:12,840 --> 00:46:15,199 inside of yours, inside of your CSS. At that point, so I 621 00:46:15,239 --> 00:46:20,400 was wanting to not necessarily do a deep dive into SAS, but be like, 622 00:46:20,559 --> 00:46:22,159 here are some of the things that can do and the reasons why you 623 00:46:22,280 --> 00:46:25,159 might want to use it. And here, but now you have a build 624 00:46:25,199 --> 00:46:30,119 process you have to contend with, right, because CSS I can just call 625 00:46:30,199 --> 00:46:34,719 the CSS style sheet. Now there's a build process involved. I appreciate that 626 00:46:34,800 --> 00:46:37,360 because you know, when you have a powerful tool like SAS, the uh, 627 00:46:37,800 --> 00:46:40,480 you know, everything becomes a nail, right, and you want to 628 00:46:40,559 --> 00:46:44,719 use it everywhere. So I appreciate the fact that you're saying, well, 629 00:46:44,719 --> 00:46:49,000 wait a minute, maybe maybe you know there if you commit to SaaS, 630 00:46:49,159 --> 00:46:52,199 then you have some more responsibilities, right, and you know it's powerful. 631 00:46:52,239 --> 00:46:58,840 But you know the advantage though, is that now there's a compiler and or 632 00:46:58,840 --> 00:47:02,239 a transpiler or or what. Everybody can have their little debate on that one 633 00:47:02,320 --> 00:47:07,320 later, but the point is it's either going to compile, it won't so 634 00:47:07,559 --> 00:47:10,159 unlike CSS, where I can ride a broken style sheet and put it on 635 00:47:10,199 --> 00:47:15,199 the web, it's a lot more like that has a built in verification in 636 00:47:15,320 --> 00:47:17,840 terms of does it compile? So you know there's pros and columns on that 637 00:47:17,880 --> 00:47:24,280 build step, but it changes things. Yeah, well, I appreciate that 638 00:47:24,400 --> 00:47:30,760 objectivity, and you know, not the absolutism that a SITH would bring to 639 00:47:30,800 --> 00:47:40,039 the party. For example, only six speaks and absolutes. So what else 640 00:47:40,119 --> 00:47:44,280 is there? What's next for you? What's coming up in your inbox? 641 00:47:45,800 --> 00:47:50,599 Well, I mean, I'm currently figuring out my conference schedule for this year, 642 00:47:50,719 --> 00:47:53,519 so you know, we'll see. I'm not sure exactly where all I'll 643 00:47:53,519 --> 00:47:59,800 be when one what how, but I'm definitely looking at conferences and user groups. 644 00:48:00,400 --> 00:48:02,440 So well, I happen to know somebody who runs a conference. Maybe 645 00:48:02,480 --> 00:48:07,559 we should talk to him about that. Nothing, Well, you're gonna have 646 00:48:07,719 --> 00:48:12,920 the email me and I will gladly take a look. It's Richard Actually, 647 00:48:13,960 --> 00:48:22,320 I know, let's talk about him. Well, he's right here. I 648 00:48:22,440 --> 00:48:25,960 just included a link to take five on YouTube of the show notes because excellent 649 00:48:27,000 --> 00:48:30,280 should go listen to that. Yeah, that's such a great song. If 650 00:48:30,280 --> 00:48:32,800 you've never listened to it. Even if you don't like jazz or don't understand 651 00:48:32,800 --> 00:48:37,079 it, you're gonna love this. It's such a great song. Yeah, 652 00:48:37,320 --> 00:48:40,119 and a great sack song at that. Yeah. All right, well, 653 00:48:40,280 --> 00:48:44,599 but yeah, I think that's that's what's kind of coming up. Since I'm 654 00:48:44,639 --> 00:48:46,480 just finishing up. I just finished up the book and i'm finishing up. 655 00:48:46,480 --> 00:48:51,840 Of course, I think I might go back to blogging for a little bit 656 00:48:51,920 --> 00:48:53,639 to kind of, you know, lower commitment things for a little bit. 657 00:48:53,679 --> 00:48:58,800 We'll see. I mean, he can't turn down opportunities when they come knocking, 658 00:48:58,880 --> 00:49:02,039 so we'll see how long that lasts. But yeah, all right, 659 00:49:02,119 --> 00:49:07,159 well, Martine, thank you very much. It's been eye opening and enlightening 660 00:49:07,280 --> 00:49:09,159 and all that goes with it. So thanks again, thank you for having 661 00:49:09,159 --> 00:49:14,199 me. You're welcome. Come back soon and we'll talk to you next time 662 00:49:14,400 --> 00:49:37,719 on dot net rocks. Dot net Rocks is brought to you by Franklin's Net 663 00:49:37,840 --> 00:49:43,719 and produced by Pop Studios, a full service audio, video and post production 664 00:49:43,840 --> 00:49:47,480 facility located physically in New London, Connecticut, and of course in the cloud 665 00:49:49,079 --> 00:49:53,119 online at pwop dot com. Visit our website at d O t N E 666 00:49:53,199 --> 00:49:59,079 t R O c k S dot com for RSS feeds, downloads, mobile 667 00:49:59,119 --> 00:50:02,559 apps, comment and access to the full archives going back to show number one, 668 00:50:04,119 --> 00:50:07,800 recorded in September two thousand and two. And make sure you check out 669 00:50:07,800 --> 00:50:10,719 our sponsors. They keep us in business. Now go write some code, 670 00:50:12,039 --> 00:50:22,679 See you next time. Got tred middle vans