How'd you like to listen to dot net rocks with no ads? Easy? Become a patron for just five dollars a month. You get access to a private RSS feed where all the shows have no ads. Twenty dollars a month. We'll get you that and a special dot net rocks patron mug. Sign up now at Patreon dot dot NetRocks dot com. Hey guess what, it's dot net rocks. I'm Carl Franklin and Amagard Campbell. We've been at this for many, many min min min years. Eighteen eighty five, right,
that's post Louis, that's post Civil War. Man, You're almost a real country at this point. Yeah, every every every once in a while, it just hits me like, holy cramp, we're old. Well, in two thousands is not that far away? Right, that's two years, two more years, and will be there. I just wait till somebody says, back in the two thousands, Oh god. I mean, if you want to make it sound even worse, you can go back in the late nineteen hundreds. Yes, yeah, the late nineteen hundreds, the turn of the
century. So it used to mean something different when I was in middle school. Yeah, that's true. Anyway, we've got a good show for you coming up. Martine Dowden is here and we're gonna be talking to her in a bit, but first let's take care of better no framework awesome? Alright, man, what do you got? You're gonna like this, buddy, I always do. This is a review on end Gadget for the n Video RTX forty seventy super nice. It's a fourteen forty P powerhouse and it's only
five ninety nine. When was the last time you heard of a really powerful GPU video card for six hundred bucks? Yeah, and that's you're right. This really says to me, Oh, we've gone back to sanity on video cards, right, because it got insane for a while there. Yeah. Although that, yeah, that fourteen forty thing is just like this thing will do at twenty five six to do by fourteen forty, like sixty frames a second on most games, which is faster than your screen will refresh. So
you're good. And then gadget says, and it's a far better four K gaming card than the forty seventy, right, So this is the forty seventy super right apparently, Yeah, yeah, a few more cores, you know. I didn't even look at this for playing video games anymore. You know what I look at this for running your own large language model locally, yeah, right, or video you know, editing videos is what I usen't for.
Yeah. I bet edit video will be pretty good too, But for a you know, you hit a key point here for me, Carl, which is, for a long time, for the past few years, you've been thinking that thousand dollars plus for a video card. Oh yeah, and maybe you don't have to do anymore, thank god. You know, I think it was the crypto craze. Yeah, it was part of part of it, you know. And of course now the large language model craze isn't helping either, but well, but most people aren't running those on their own
machines. You would hope, yeah, God, I would hope. You would hope. I know that you want to do that. Yeah, they have aspirations. I also think it needs to be smaller anyway, right, Like I don't like any technology which is still on the curve. If we only make it bigger, it'll be better. That seems to be tapering off for chat, GPT and the like now now that it seems more tuning, you know, getting a little smarter of what they're doing, not just checking
more eight chan into the data pile. You know that's not good. Yeah, anyway, I appreciate it. That's that's a great find and a great reminder that you know, we are we maybe software people, but we are
behold to the hardware. Mm hmm, well that's what I got. Richard, who's talking to us today, grabbed a common Top of Show sixteen twenty four back a bit in the twenty nineteen when we were talking to Amy Kaepernick about CSS grid, because I know we're going to talk a lot of CSS today, and I pulled this comment from Andre Carlucci because it made me laugh. He said, Hi, guys, great show. As always. I believe that centering things in CSS is the new quote how to exit Vim.
Anyway, someone wrote this awesome website to solve this problem, and it is how to center in CSS dot com. Oh god, there really is a cycle how to center in CSS dot com. Oh that's so great. So you know, just go there. It's a website. Yeah, they will help you. It's one of those things. Sorry, you can get Martin's book one or the other. It's one of those things you have to look up every single time, every time, every single time. But yeah,
how does defend us in CSS dot com? It works, wonders. Exiting VIM still a mystery here. The new exit word perfect for dos. Remember that you press escape and they would say search what would you like to find? No? Get me out of here? Yeah, now, just there as a reminder. If you need to exit VIM, if it's been stuck there for a while, you press escape, then colon q L enter obviously, obviously, Andre, thanks for the giggle man, And a copy of
music go By is on its way to you. And if you'd like a copy of music go Buy, write a comment on the website at dot at rocks dot com or on the facebooks. We publish every show there and if you comment there and we read on the show, we'll send you copy of music to go buy. You know about them. My mother in law would say that programmer needs shooting. Isn't that a defense? In Texas? You're
honor he needed he needed suiting. Well, anyway, you could send us a tweet or an X or whatever the hell are they calling these days. I'm at Carl Franklin and he's at Rich Campbell. But the cool kids are hanging out. I'm ast it on, I'm at Carl Franklin at tech Hub dot Social, and Amrich Campbell at masadon. Send us a two, We'll read it. I swear to God, yep, proverably not with shooting. You may not respond. No shooting require no shooting involved. All right,
Let's bring on Martin. An award winning CTO UXUI designer and developer, international speaker and author, Martin Dowdin focuses on web interfaces that are beautiful, functional, accessible, and usable. She approaches user experience from both art and science, drawing from her degrees in psychology and visual communications. She's worked as a
developer, artist, educator, and consultant since two thousand and five. In twenty fifteen, she published children's book Programming Languages ABC plus plus That's Great title. She then went on to write Approachable Accessibility Planning for Success, which was released in June twenty nineteen, and Architecting CSS, The Programmer's Guide to Effective
Style Sheets in twenty twenty. Currently, she's the CTO at Andromeda Galactic Solutions, where she continues to learn, work on, and share her passion for front end development. Welcome back to the show. Martine, thanks for having me back. It's pleasure. Yeah, it's our pleasure. Yeah, good to be back. Actually, and I just felt like we haven't we haven't cried about CSS much lately, so I should call Martine. Hopefully I won't make you cry. You are the Kleenex to our CSS tears. There you
go, that's sweet. I need I need a jar, just like the teachers that have like jars of of misby, like tears of misbehaving students, I have tears of developers trying to do CSS crushed by CSS. Yeah. I just wanted to center ve man, how hard to be? You should create a card game CSS against humanity? And all of the answers are just the weird expressions of yess you never want to know about. Yeah, there little diagrams of boxes outside of boxes explain this. Yeah, you need to
build a response query. Do you a funny funny funny? Oh man? Where the actually we start? What have you been working on lately? Well? I actually got a new book. Uh, it just came out. It's called Tiny CSS Projects. Uh it is so unlike the previous books. Well, the first one, the Kid's book, is a whole different ball game. But The other two were more a lot more theory and explaining and more the high level. This one was nitty gritty, like here's a project
and here's how you would do it. So instead of going at it from a theory perspective, it was very much an application and it's and you can totally like code along with it, and there's a repo with it with the starting HTML. So it's very much a here's the thing you might want to do. And so picking the picking the projects in there, I was trying to figure out, like, what what are things that I really regularly in my career? Like what are the things I'm regularly asked to do? And
then what are some concepts that are really important for people to know? And you married the two and you get twelve projects and so the So it's very much things. Where as much as the chapters get more and more difficult as you progress through the book, it's very much a hey, I don't remember how to do that thing, let me go look up how it was done, and you could totally use it that way as well, So not just to read through book, but a jump to to remind yourself of books right
exactly exactly what's up with the bustle on the cover. I was given three choices in terms of the cover picture by Manning, and I picked the one that looked. It's funny how they wouldn't let the designer design her own design book by design, you know, but it is, I mean, it is part of an imprint, the tiny imprint. So they have an aesthetic, right, Yeah, it's like they're in they have. It's the most
of their books have that same. It's from a series of of and they're all like drawings from costume and so of different places around the world and eras, and so it's a series and so they're picking off of those plates, right. So it's so funny. I mean, I like naming stuff in software. Making a book cover that hasn't already been made before not not a sile problem, like very challenging, but I like this. It makes the book approachable. To call it tiny, I think, you know, it's
just like, oh, they're just little projects. It's gonna be fine. You're gonna be fine. So let's start off with a gripe from this old guy here me. You know, in programming, one of the things I love about writing code is reusability, Like all the things that I do over and over again. I can put in a library and I can just include that library, and I got all my extension methods, and I got all
that stuff. And CSS is really kind of a global thing unless you do some tricks to scope it, you know, like Blazer and other frameworks do this. But is there any such thing in the CSS world? Is as we have in the development world. These are CSS things that I use all the time, and I want them in some easily easy to customize into my app thing without busting over everything else that's in there. Isolated, scoped, reusable. Yeah, so there's a call. There's there's several ways to approach
it. Like like everything in development, it depends I just put that one right there. But so there's the I would say the most straightforward, easiest way to do that would be by class name. Right. So if you have let's say I have a company brand, so I have you know, certain colors. I need all of my buttons to look like I have a
certain theme. All of my tables need to have you know, like things that are not generally like individual page specific, but are going to be like all headers need to look like X. All paragraphs need to look like why. Right, at that point, you could make you can make a global style sheets that has all of those all of those styles that you could apply to every project within or every website or every web page within that institution.
Right, So that could be kind of step one. And I guess with class names, you could you know, always prefix them with some unique value that such as your name or your company or whatever, right, so they clash with everything else exactly. So for for and usually what you're going to do at that point is at a company level, you're going to come up with a convention for that. Right. So for for us at Andromeda,
it's because it's in drama. Galactic solutions are prefixed for most everything are gonna be ags dash something, right because and then then we know the other option is uh. And this is new, so it's not yet very widely supported. But CSS is coming out with the ability to have an AT scope, so the same thing, the same way you have an AT media quarrier or
something like that. It's starting to have the concept. It's going to have the concept of AT scope, which will allow us to go ahead and say this is only for this particular thing, and so we won't have to muddy up our class names with prefixes and stuff like that. So those there's kind of the two sides of like how deep does it need to go? Does this need to be something that is brand specific? Where there's colors in bolvar?
Is this something I want to be able to manipulate for various different creat
various different brands or whatever. Because the other option is also CSS with CSS custom properties, it's really easy to set yourself a baseline style sheet where all of the things you might want to manipulate, your colors, how much padding, maybe your font, which font you're using, all of those you put in as CSS properties, and then in your project you're going to say right variable, you know, variable equals blah blah blah, be equals, see
equals, and then you can go ahead and just plug in. So that would be kind of the way if I were to have to write one like this afternoon for a project. Yeah, I was thinking of like this. The centering example is perfect, right center grid. Show a grid with X many things and you know, rose and columns or whatever formatted this way. Those kinds of things that I that I do over and over again for each
project. But it would be really great to just say, oh, I have a class for that already, you know, let me pull out my global CSS file that has all my things in it. And so those would be more like utility classes, and I personally have a beef with those simply because what ends up happening is all being Let's say you have a class that takes texts and makes it centerline whatever. Right, sure, you're going to
put that class in your HTM off for that paragraph. Right now, you've mixed the concept of I'm styling this particular paragraph with what the content is in your HTML itself. So if I want to change the style of that paragraph, I have to go mess with the HTML rather than the CSS, which is what I should be messing with. So the semantics of the utility classes
can't, depending on how they're implemented and used, can make it. So now you're mixing your content and your styles, which and it also means that those classes are getting put into your HTML absolutely everywhere. So let's say you're wanting to rebrand or rethme something, and now everything that was centered you want to the left or something like that, or whatever was orange now becomes blue. You're having to go change all of that HTML instead of the one place
in CSS. I guess you could do what bootstrap does, right, Yeah, you could do what Bootstrap does, which is just sort of make class names and then swap them out with different implementations. So if you're doing if you're working in SaaS or less or silas or something like that, what you can do is make your utility classes as things that you can extend inside of
your CSS class for that piece. And that decreases that problem a lot, because then you have your code snippet and you're essentially saying in my class and my CSS class at that point for whatever the piece, I can say import, I want to use my snippet A, my snippet, be my snippet bee by just doing you know, extend a extend be extend see and that works pretty well and that kind of allows for a happy medium between the two.
But I personally don't like putting utility classes names directly in my HTML because of the maintainability aspect. Long term, that makes a lot of sense. Of course, I went and looked up scope in the Mozilla docs just to see, you know, I added it to the show notes because it's officially considered experimental, but Chromium's already fully implemented it, so it's Chrome Edge, Chrome and Android they're already running it. So yep, yeah, interesting to
see. You know, doesn't work in Safari Shker actually know the preview version of Safari had supports it. What's funny with Safari's is I have a love hate relationship with it because they're on some things they've actually been ahead of the curve, and then in something and some CSS properties they've actually been ahead of Chrome, and then on some things they're lacking behind. So you know, depending on what I'm doing that day and be like, yeah, that's very
interesting. It's not that they don't lag everything, like I don't know what the priority list looks like. Well, and recently, i'd say within the last started sometime during the pandemic, they started really catching up on stuff, at least on the CSS side, because they were kind of a blocker on the WA side too for a while there. And they's still from anything and that's more of a it's an Apple issue entirely on anything JavaScript, PWAE,
yeah, that sort of stuff. They're still a pain in them, but they don't like they always get a sense, it's like anything that looks like you wouldn't use the store. They're unhappy. Yeah, they're going to drag on it. But CSS they've been they've been holding their own pretty well. I've been from a CSS standpoint, They're find Firefox depending on the use case,
has kind of been interesting. And it took like it depends on the property, like Subgrid Chrome was the last one to get it, and then you know, like it really just depends on what it is, like it's property specific. I'd say right now, Firefox Chrome in Safari' probably on par depending on which of the latest of what you're looking at, only only until
you dig into the very nooks and crannies. And if you're digging there, you're looking for your own trouble anyway, probably probably, Or you're playing my game, which is like, ooh, this just came out. Which of the night Least Canary like completely on staple version has it so I can play with it that game? Right, Which of the on fire versions can render this twice before the crashes my machine exactly exactly, not that I would know.
I know that well, I'm usually pressing against language features like that, So oh, that's interesting. Let's see how that works. Oh, that doesn't work at all. Okay. I think the hardest part, and thankfully I think the browser world learned their lesson with GRID is that I E had implemented a non standard version of GRID. Yeah, while it was still experimented, I had implement one time or another, every version of IE implemented a non standard version of everything. Right, yea, right, I mean that
the real actually actually six I E five for Mac. It was five or four, maybe it was five. One of the two was the very first browser to fully implement. Like, let's start with I for Mac. Like, that's the big funny one about that for for was it from no? It was? Yeah, it was I for Mac, which was already weird. Yeah, it was the very first to fully implement the CSS spec. Right, But I E six implemented a version of the spec that wasn't ratified,
so it was a unique version of CSS. Which is kind of funny because they went from being the very first to fully implement the spec at the time to whatever it became, which you know is the source of all memes. Now, yeah, there's the old article from two thousand. I E five for Mac is a quantum leap for browsers. There you go. Yep, oh so much pain. I remember when I was excited about I E. Nine. That was like the job version, right, yeah, the
JavaScript engine rounded corners, Yeah, done done. Yes, the CSS person's in the room, so that's what she's going to refer to. Oh, yes, rounded corners up the CSS three rounded corner. But now the but now, I think I'd rather wait a little bit longer for a future to come out and not have to deal with the chaos that a non stand respect at some point being implemented. It became then getting it faster just to have to because you know, once it's out there, people are going to use
it in PROD. Like you can say, don't use it in prod all you want, it's not going to happen. And it's not like we don't have a good feature shot right now, like it's back in the shim days remember those, you know, like because we have very uneven browsers, Like it was just that was the transition from HBL four to HML five and now we're kind of over that, and it's like, yeah, you know what I'm really looking for in a browser stability Yep, you know, just to
do the thing. I won't press too hard against the edge of the language if you don't break it for me. How about that I still have an old version of Firefox that I that the if I update it, all the features that I love will break. I have to put up with the constant Jack Russell terrier in the top right corner, going should updated? Now, update? Now? How about now? How about now? How about now? I had an I had an app the other day that massively like,
we started getting errors in the log like we've never seen before. So of course, you know that's that's cause for concern. And we're looking at it and we're like, what is generating all of this garbage? And we look and it's this ancient Windows phone and I'm like, yeah, no, we're not supporting that. I don't care. Nope, nope, nope, nope, nope. At Lee Hunter will never be able to use your websites. He's the only one using a Windows phone as far as I know. Yeah,
I don't know. I didn't know if he is anymore. Like the battery's got to be done on those phones. It's been quite a few years. At some point. It's a security risk because they're not updating it anymore. You know, if you can't get on the internet, you're really not at a risk. Right, Yeah, that's true. You got to point the mister cammell. I missed my phone. I didn't rebuild my phone shrine in the new office, so I should go dig it out. It's in
a box somewhere. But yeah, I have nine point fifty you know, it's one thousand dollars calculator. Yeah, except for the fact that it won't hold a charge anymore. For sure, none of my old Windows phones hold a charge. They're in the drawer of broken dreams, for sure. It's a different kind of broken dream. But definitely the one I missed, emotion is my HTC with a slide out keyboard. That's the phone I missed.
Back when phones were cool. That's the real sin of the iPhone. Right before the iPhone, phones had fun stuff, right BlackBerry, that was you remember having the GPS receiver we could plug into the top of the phone to stick on the side of the RV so you could track as if we drove across. Yes, you know, life was gear was way more interesting these days. We really got to talk to the young kids. Now, this is they're they're turning, they're tuning out right now as we geek out.
I don't know if that's bad all days anyway, I just hand them an old back a light rotary phone and have them dial a number and see how long it takes. It'll be. We don't like people with zero's in our phone numbers back in my day. All right, we gotta stop. We got to stop that. So all right, so let's talk about your book. What are some of the new discoveries that went into your book this time?
Most of the as much as there are some things where we tried to kind of really butt up to how to to the new the new stuff, right, We do present grid, we do persent flex. We tried to stay within the bounds of at least, you know, when it was published earlier this year, of what was going to be fairly well supported, right, because the whole point is to for it to be practical, like ninety nine percent of development, especially in CSS. Yeah, there's cool stuff coming
out and it's very very useful. However, it's not useful if you can't use it in PROD. And most people that I've run into when they're struggling with CSS, they're either CSS is their jam and they're going to go play with the cutting edge because that's their jam, or they're struggling with it and they just want the bloody answer and they don't care how fancy it is, and they don't care about the bills and whistle. They just wanted to work,
right. There's very few people in between, so we tried to stay on the These are things that are widely implemented and are going to just work.
However, I am in the process of finishing a course that's a four part module like what they call their life but life projects for Manning, which is actually in dealing with the cutting edge, where I specifically want to find the latest and greatest that the new properties like has and wear, things like scroll animations, those kind of things that are the extreme that are definitely not
implementing everywhere where. At the beginning of each module, I'm like, okay, you need this browser this version or up this browser this version of UP. Here's how you turn on flags so that you can look at these new
versions. But for the book, we try to stay standard. But I don't know, you want to print that on paper, right, Well, that's the thing that's why the live version the live book, because that's a that's a web thing and doesn't Yeah, that's not on paper because it's gonna you know, half of what I did for that, even though it's coming out you know later, a little bit later, a month or so, probably roughly, it's already like, okay, now there's two more browsers that
already support it. Right, So it's it's ever what is cutting edges ever shifting anyway, But the book tried to stay within the realm of what will work nicely everywhere. I'm also mind of like, if the person reading this book need the edge of CSS or still working through the fundamentals right, like where are they? Yeah that's hard. Yeah, that's hard. I mean I get good CSS for like an hour, then it passes right and then and then you got to start over again. The next time it's like I
have to style what uh no? Then you get back into it again. So I kind of feel like, yeah, this is the book for me, just because it can go back and read that piece again and say, oh maybe I can do this what I what I feel is interesting. If you don't do CSS, there's there's kind of two things that are are hard
with CSS. It's really easy to get into a situation where if the code was hacked together to begin with with somebody that was unsure and you know, struggling with how do I get this done, and not necessarily thinking about the overall architecture and maintainability of it, right, because there's it's very hard to worry about good architecture and maintainability when you're struggling with can I just make the thing work? The bigger So the code that has been written that way is
going to be harder to maintain. And so it's kind of a self kind of feeding loop of the code that was written was written by somebody who was unsure of themselves, didn't maybe go about it the most efficient way or the most clear cut way or most polite description of the spaghetti that CSS that people may it's it's not just that you finally got it to work. Is that you didn't clean up all the stuff that you all your failed attempts either,
right ye are? You just do know finantial things about how stuff goes together and how it doesn't. So, just like anything, spaghetti code is hard. CSS is hard to write, but CSS is way harder to read. Right, I'm looking at the style and going like, what does this do? This is hard and it depends on what the parents do and what the parents of those do and like, because there's the inheritance aspect and the and
all that as well. Right, So you can't even look at a specific class and say this is what's happening, right, yeah, right, until you see how it's implemented. Although the eleven tools today are pretty good about showing you what styles are applying to a given auditory. Yes, yes,
and you can look. What's nice too is you can look at the If you look at the computed, it will show you everything that's applied to a particular element and then allow you to drill down like most browsers allow you to do that, which is really nice when you're like, why in the ever loving anything is this thing doing this right all of the expletives. Well, yes, I'm trying to keep it clean for your show, but yeah, you're very kind the other way. Yeah, the next part is like,
so why is that style applying? I can see that it is, I just don't know why and where is it coming from? Yeah, that's the other big piece, right, and we're going to follow up on that thought. Right after these very important messages, we'll be right back and you're listening to dot net Rocks. I'm Carl Franklin. That's my buddy, Richard Campbell Hey, and Marten Dowden is here. We're talking CSS. Before we get back into it, I just want to remind you that, yes, sometimes
you don't hear ads, and that's great because speaker puts them in. But if you never want to hear ads, you could join our Patreon group Patreon dot dot netroocks dot com and you will get a custom feed that has zero inserted ads, only the ones that we speak ourselves. All right, So enough of that, Martin. I don't know if you're the right person to ask about this, but I gotta know. Is chat GPT any good at
figuring out CSS like it is at figuring out code. I have not had a good track record with it. I don't I have gotten to where more often than not chat GPG trist you one. I found it too noisy because I can write it fat. I can write the CSS faster than like if you can cope pilot or whatever, I can write it significantly faster than anything it can feed me copilot does good with CSS. No, she quietly saying, no, I am quietly. I am quietly saying that the issue is
in an issue of context. What I find may be a much better use of AI, if you're not sure, would be things like the chat asking it what is this code doing or what does or what is the property for X? Like essentially using it like a glorified stack overflow. The downside to it, though, is that stack overflow you have comments and arrow ups and downs to tell you, like to give you some inkling of how good this answer is. Right, Chat GPT doesn't have that, or any of the
other aas don't have kind of that context. So you're using a little bit of information by doing it that way. But that's about the extent that I personally have have like relegated AI two in my CSS. I just I don't think it's quite there, Like maybe if there was a model's built specifically for it. Maybe if it was maybe, Like I just don't think it's I just don't think you're going to get the quality out of it. If that makes it Yeah, and that's been my experience too. Can you get it
to hack something together? Sure? Probably? Will it be a good quality solution. I doubt it, Like that's that's kind of where I'm at out it. Yeah, and it never is. So is there a better? I mean, Visual Studio and visual Studio code are great because they let you do whatever you want. But it seems like, you know, with tools like you know, get ub Copilot and things, if people want a little more guidance in U when they're developing anyway, and you know, CSS being
global and cascading, you know, and multiple layers and levels. We said it before, when you're looking at a class, you don't really know the context of it, and especially when you're utilizing it in multiple divs or p's or whatever your elements are. Is there anything that can help you visualize that, or any tooling that is better at saying let's say that you want to you're trying to put flex stuff on something that's inside a grid or the other
way around, and you know that's going to cause bizarre results. Is there anything that says, hey, WHOA, you probably want to do it this way instead. I don't know of anything that's that does that at the moment, off the top of my head. I'm also a terrible person to ask because like I know, like I know the CSS, right. I don't go looking for those tools. I go looking for articles or explanations or the details, or I'll go read the docs on whatever the new features are coming
out of. But in terms of the fundamental day in and day out, I don't use those in any way, shape or form. So I don't and I don't have a need for those. What I would say is maybe we'll put that to the listeners. Yeah. What I would say though, is that CSS is one of those things that you can get up and running and rune your first line of CSS successfully, very very quickly. Right.
There's very little knowledge that needs to come into being able to say to put on an HTML element style blah blah blah, or even if you go one step further and put a style sheet, being able to say font white bold, Right, there's very little. It takes it very very little to get started, but it is actually a fairly complex and difficult language to actually learn.
And I think what's happening with CSS is you wouldn't really is that there's a lot of looking for a match bullet because it looks so easy on the surface when it really there is a fundamental knowledge where it needs to be. Just like any other skill, it would be learned. If I went around asking for a magic bullet for writing dot net tomorrow, I'd get laughed at,
right, they'd be like not cute, right? And I feel like because he says, has this this ape like it appears simple when it really isn't that we tend to go looking for these magical things instead of just sitting down and learning it. Like a skill. Mistrap fixes everything, Martine, didn't you know? Oh no, it's it's and I'm gonna get hate. I'm going to get hate for this. It's a tail winds Now, that's
the magic book fixes every hotness. But here's the thing. Like as a developer, I like in CSS because of the way that you don't really understand until you see its implementation in the parents and the parents and parents. It'd be like having a class that has has no inheritance on it, and yet it inherits from three or four different ancestors, right, And so you wouldn't have you wouldn't know that by looking at the class the trick. You would
only know it by the implementation. It's like having classes that you just throw together and there you don't. When you're looking at code, you don't know what it's actually working on. I think that speaks to Richard's confusion, which is just like, I have no idea what this means in the context of my application. The Chrome dev tools do a really good job at showing you
the inheritance. So at this point, if you're looking at you if you're wanting to see what all is being applied and where are it all is coming from, and the ability to do like, you know, all what is all inherited on this particular element. It's very granular to the element, but you can you can't absolutely get that history and that inheritance and where all everything's
coming from. But you're right, once it's mixed with the implementation, yes, but yeah, but you're going to see it in the deaf tools. I don't know of now. There are a handful of plugins and stuff for vs code where you can see like but it's no I mean, it's no different than doing control shift find where you can go find every place that uses a particular class. But that's the deaf tools at that point in the browser is going to be your best bet. Yeah, you're lost without the dev
tools. If you're doing any CSS whatsoever. Yeah, because you have to see it in the context of where it's implemented. Well, it's very visual, like I need to be able to see is this red actually you know? Is it actually turning red? You know? Or is it actually like is this button actually got its background or it's border or it's whatever. There's no you're going to have to go put it to the browser anyway, right,
Yeah, Yeah, what do you think about Sigma. It's a design tool, it's it's up pre made css D but there's pre made CSS and there's pre made CSS right the premate'ss it spits out is fine, there's nothing inheritently wrong with it. The downside is one of the patterns that I do see, which is something to be careful of, is what happens, especially when you're using something like Angular or React, which is component based, and now you have, especially with Angular, you'll have your isolate, your CSS
isolation to the component right there in the thing. So it's you get designer rights beautiful component and Pigma Figma spits out CSS. Developer takes CSS from Phigma sticks it into the component. CSS. Great, now we've done that fifty times for things that should be pretty much like your style, your font family, your color, your you know, that should have been global styles to begin with. So there's a little bit of having to if you're being smart
about it and if you're thinking through this should be a global style. This should be a global style. Let's not copy it everywhere. It's what it spits out is perfectly fine, and it's really good for things like the designer put a gradient behind this thing, right, spinning out the actual CSS gradient is super helpful because I mean, yeah, I can sit there and try to figure out what all colors you did, but like drop chefs, why things like that? Why? Right exactly? So for those sorts of things
it's actually quite helpful. But like anything, we need to you know, use our brands and not be well, you know, this to me just strikes me as the difference between I set a unit tests and an actual functional test, Like there's an architecture to good styling. No given page manifests fully like and I think it's really hard to have a tool think broadly for you like that, right exactly exactly. I still feel like I just got to call the expert, Like I don't know that I'm going to have unless I
really want to commit myself too. It's like getting that design right is hard, well, but that's fine. Like I'm not going to go be writing massive back ends either. If I need a fancy, funtcy back in a bunch of fancy like I don't know SQL or something, I'm not going to be writing. I'm going to be calling an expert. Like that's just not right. Give it, it's due. Right, there's skills and you can't you know, you can't do them all, so you bring in your expert
when you need them exactly. And that makes the perfect sense, But it does feel to me like you end up with nuggets of good styling from Figma and it takes them, the architect, to pull in these various pieces of renderings and say, okay, what does the overall template look like? Now?
Yeah, exactly exactly. Okay, that's that's fair, and it you know, it's no different than you said designing a back end where you take a set of spikes on some hard pieces to try and figure out how make this thing work, and then at some point you got to sit back and say, okay, I see a service stark Christ looks like this right, the sort of broad view that that Now, when I think about it from a from a services point of view, it's very much a the whole system
doesn't resonate with change, that when a likely change comes in the smallest footprints has to be modified. I don't know. I do you consider that in styling that it's not hard to update the style without having to rip the whole
thing apart. Well, absolutely, because salas now has functions, so that's a whole different volcame right, like, that's a whole But in pure CSS, right, when you're doing a style change, there's kind of a it's a little bit of a different thought process than say updating like a JavaScript service
or something. One of the things you're the first thing you're going to say, is this a special cookie change, as in, is this particular element or this particular thing on this page its own special whatever that needs a specific thing because it's different, or is this a global change? Right? And so that will dictate how that change happens If that makes sense? Yeah, no, totally. And now I start thinking in terms of difference between the
class and the style. Where have we done a good set of class definition so that when we want to restyle it, You're just changing styling again. The classes aren't changing to the assignments don't need to change, You're just changing the style. Exactly exactly, because in theory, I should be able to reskin an entire application without ever touching anything but the CSS. That's the that's the gold the golden standard, right, Yeah, yeah, exactly, exactly
exactly. My experience with CSS zen Garden, it's many examples of how I'm inadequate at this. Yeah, don't you know, I'm not this good? Good, So my team, I'm gonna shift gears here a little bit. What is your favorite style of music to play on your saxophone? Oh, oh yeah, that's my new baby for probably jazz. I love jazz. Oh really cool, like classic jazz, or I'm a Guard or a little Bird train Little Bird. I mean, if you play saxophone and you don't
like Coltrane, I don't know why. Yeah. I think probably one of my favorites is brew Beck. Honestly, it's one of my probably. Yeah, I have a number of Pandora stations that were started with like brew Beck. As the seed go down, that's how you got there and you stayed. Yeah, exactly. I went back and I listened to a bunch of Paul Desmond albums. He's the guy who wrote Take five and he was alto player in the Brewbeck's quartet, and man, he's just so good, so
amazing. Yeah, there's no there's no day where little Take five doesn't make it better. You got it fair enough, exactly. So is there such thing as a jazz style in CSS? Now? I'm just reaching for dumb questions? Yeah, she actually thought about that for a second. I smelled the smoke from here. Okay, I mean you can make you can make
a jazz themed layout. Yeah, I want little notes to come out of my cursor when I move it around the screen and get big and then just go off o the late nineties called they're wanting there there you lie back, you know what? The little snow a little flames. Oh yeah. Camsterd amsterdaance dot com right Space Jam Space Jam's website is still up from like nineteen ninety five. Oh really yeah, and still looks exactly the same too.
I demonstrated the writing an HTML stealer on the hampsterham site, so I actually had a local copy of the Hamster dam site for the longest time. I probably have it on a backup fire. It's all it is is just a table of animated gifts, gifts and an audio messed up version of a Disney song that if you actually publish on a page you will get pinged, you'll get easy made of. Okay, back to reality. So, is there anything that else that you want to talk about in your book that we haven't
talked about yet? Trying to think of what else? What's the hard project? What's number twelve? Oh so number twelve is actually not the hard project for number twelve. What I did is I took I went and got like, what are some things? That's because everything up to chapter twelve, so eleven down are all in pure vanilla CSS, like there's no no frameworks,
no nothing. For twelve, what I did is I brought in sas so that we could I could show like, here's the like, here's some things or some reasons why you might want to use something like SaaS, And so I really like, as much as the project isn't particularly difficult, I just showed some of the things that you could do in terms of looping and functions and having a pseudo it's they call it a map app. It's kind of
a cross between an array and an object. Really like you're where you can have if statements, where like you're you're literally putting in logic inside of your inside of yours, inside of your CSS. At that point, so I was wanting to not necessarily do a deep dive into SAS, but be like, here are some of the things that can do and the reasons why you might want to use it. And here, but now you have a build process you have to contend with, right, because CSS I can just call
the CSS style sheet. Now there's a build process involved. I appreciate that because you know, when you have a powerful tool like SAS, the uh, you know, everything becomes a nail, right, and you want to use it everywhere. So I appreciate the fact that you're saying, well, wait a minute, maybe maybe you know there if you commit to SaaS, then you have some more responsibilities, right, and you know it's powerful. But you know the advantage though, is that now there's a compiler and or
a transpiler or or what. Everybody can have their little debate on that one later, but the point is it's either going to compile, it won't so unlike CSS, where I can ride a broken style sheet and put it on the web, it's a lot more like that has a built in verification in terms of does it compile? So you know there's pros and columns on that build step, but it changes things. Yeah, well, I appreciate that objectivity, and you know, not the absolutism that a SITH would bring to
the party. For example, only six speaks and absolutes. So what else is there? What's next for you? What's coming up in your inbox? Well, I mean, I'm currently figuring out my conference schedule for this year, so you know, we'll see. I'm not sure exactly where all I'll be when one what how, but I'm definitely looking at conferences and user groups. So well, I happen to know somebody who runs a conference. Maybe we should talk to him about that. Nothing, Well, you're gonna have
the email me and I will gladly take a look. It's Richard Actually, I know, let's talk about him. Well, he's right here. I just included a link to take five on YouTube of the show notes because excellent should go listen to that. Yeah, that's such a great song. If you've never listened to it. Even if you don't like jazz or don't understand it, you're gonna love this. It's such a great song. Yeah, and a great sack song at that. Yeah. All right, well,
but yeah, I think that's that's what's kind of coming up. Since I'm just finishing up. I just finished up the book and i'm finishing up. Of course, I think I might go back to blogging for a little bit to kind of, you know, lower commitment things for a little bit. We'll see. I mean, he can't turn down opportunities when they come knocking, so we'll see how long that lasts. But yeah, all right,
well, Martine, thank you very much. It's been eye opening and enlightening and all that goes with it. So thanks again, thank you for having me. You're welcome. Come back soon and we'll talk to you next time on dot net rocks. Dot net Rocks is brought to you by Franklin's Net and produced by Pop Studios, a full service audio, video and post production facility located physically in New London, Connecticut, and of course in the cloud
online at pwop dot com. Visit our website at d O t N E t R O c k S dot com for RSS feeds, downloads, mobile apps, comment and access to the full archives going back to show number one, recorded in September two thousand and two. And make sure you check out our sponsors. They keep us in business. Now go write some code, See you next time. Got tred middle vans