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