Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
14 CSS talks covered in 1 hour — CSS Day recap
714 Plays3 months ago
Apologies for the audio only upload. There were issues with getting the video feed published but check out YouTube for the video.
CSS Day put on 14 different talks about some pretty interesting topics in CSS. It ended up being almost 12 hours of amazing CSS content and we’re going to give you an overview of each talk in just an hour. We’re going to talk about how design tools are falling behind with CSS, which I’m starting to really believe more and more every day. We’ll cover How Tailwind CSS isn’t at all like inline styles and this talk was brave. Then there’s incredible font features in CSS, like seriously these ones are unreal. And also the magic of Anchor Positioning... to be honest I still barely know this one is. And so many other great topics so, let us be your guide.
Links
- CSS Day - https://cssday.nl/2024
- CSS Day Playlist - https://www.youtube.com/playlist?list=PLjnstNlepBvO0-I7iwqpkOY_fwAop6Pl-
- Bad at CSS - https://x.com/badatcss
- Adam Twitter - https://x.com/argyleink
- David Twitter - https://x.com/_davideast
Recommended
Transcript
Overview of CSS Day
00:00:00
Speaker
CSS Day had 14 talks about some pretty interesting topics in CSS. All together it was a little over 12 hours of amazing CSS content and Adam and I, mostly Adam, are going to give you an overview of each talk in just an
Design Tools vs. CSS Advancements
00:00:18
Speaker
hour. We're going to talk about how design tools are falling behind with CSS and this is something that I've been thinking a lot about lately because Adam's been talking to me a lot about lately but it's I think it's true.
Tailwind CSS: A Brave New Approach
00:00:30
Speaker
We're going to cover how Tailwind CSS isn't at all like inline styles. And I'm not going to lie to you, you should watch this talk because it's pretty brave. Then there was this incredible font features talk in CSS where I love fonts and I had no idea you could do all of these things. So that one was amazing.
Anchor Positioning in CSS
00:00:49
Speaker
And then also, we're gonna go over the magic of anchor positioning. And what's great about anchor positioning is, okay, yeah, I don't really understand that one just yet, but maybe maybe by the end of this podcast, you will. And there were so many other great topics, so let us be your guide.
CSS Day 10-Year Anniversary Reflections
00:01:13
Speaker
David, I was bad at something new. i got ah we had ah We have fans. we I was at CSS Day, glorious 10-year anniversary of CSS Day, stellar event, ah best CSS conference of the year, probably the only one. That's ridiculous. I can't believe it. Anyway, someone came up to me. They're they're really bad at CSS. And I was like, what? We have have fans? And I was like, dang it, where's David? This would be so fun. Anyway, they wanted me to take their picture with them, and i don't I'm not good at that.
00:01:44
Speaker
I'm not good at getting my picture taken with people. Anyway, uh, I think I looked at the camera, but I just wanted to share. I was bad at a different kind of CSSing, which was representing the CSS podcast. We need stickers. That's because if you don't know what to do or say, you're just like, I have a sticker and then, you know, so we we should just get stickers that that's the the bad at CSS. And that's a good point. You made a cool logo with the grungy, uh, the grungy thing that would make a great sticker.
00:02:12
Speaker
I don't know how I came up with that. It's one of those things where like it exists and I forget I did that. and I'm always like, oh yeah, I did that. I'm like, that looks good. and so so out of i'm i'm super I did not get to go to CSS day in Amsterdam, um which sounds like just an amazing place. It's usually in Amsterdam every year, right? It is, yeah. In Amsterdam rules, that's a great place. you Yeah. So I, um, I didn't get to go, uh, because I didn't plan on going or anything. So I make it sound like I didn't get to go because I'm like, they don't allow me back there. Not after year five. Who's David? Does he write CSS? I thought he just wrote bases of fire.
00:02:54
Speaker
ah i And so, tell me um tell me what happened
Highlights from CSS Day Talks
00:03:00
Speaker
at CSS Day. what What do we need to know? You went to a lot of talks, you learned a lot of things, talked to a lot of people. um Give us the details about all the stuff that's that's exciting in CSS Land.
00:03:10
Speaker
All right, here is the rundown. So this is the high level notes that I took while I was there and hopefully, ah so they're gonna publish these. So anyone listening, you can be like, this is just your sample platter. You know, it's just like taking a cruise around the Mediterranean. You just make a short stop into some little country, but later you're gonna do a deep dive, right? Everybody write listeners, you're gonna go listen to the full ones of CSS day. I thought so, excellent answer ah to myself. I feel like Ace Ventura when I'm like, oh, alrighty then answering my own little things.
00:03:40
Speaker
All right, so the first person ah who spoke was Matthias Ott, who I've been following their blog for a long time. I walked to the speaker boat with them and they were like, I love the CSS podcast. And I was like, hi, who are you? And they were like, I'm Matthias Ott. And I was like, dude, you're awesome. I would have loved to have hung out with this person more because their talk was so damn good, dude.
00:04:03
Speaker
So like one of their opening, so you can even tell, I think this was like their first talk or something. Also, I want to have him on as a guest. This is one of the people from the, the I was like, dude, you've got to come on this. Your talk was awesome. You're awesome. It all works out. um But he opened up with like, design tools are falling behind. um And he's been teaching for so long. And so he's just entrenched in design and teaching and all this stuff. and really great, ah but he starts going into um all the things that CSS can do. So this was a great intro to the event, which was a two-day event. The opening talk is just like, look at CSS, look at all the cool stuff we
Web Typography and Design Innovations
00:04:40
Speaker
can do. So um he talks about the screen sizes. We have over a thousand different screen sizes that we have to build our designs for. And if you try to micromanage each of those, ah like screen sizes, you're going to be at a world of pain. So he's like, you got to work with the grain of the web. So he brought up that classic ah concept of working with the grain of the web, which I really like, um which also, by the way, side story, I've been realizing there's a lot of overlap with security and CSS.
00:05:10
Speaker
So this is like a podcast episode for another day where I'm like, the ways that security wants to find all the loopholes and find and mitigate um error cases and and things that, and test code paths that they didn't know could be tested and make sure that there's no vulnerabilities in it.
Over-engineering CSS with Custom Properties
00:05:26
Speaker
That's exactly like layout. You sit there, you resize your browser, you're looking for vulnerabilities, you're patching them up, you're finding undiscovered layouts that you didn't know existed and you're making, anyway, so dude, there's totally a whole episode there. That was a sidetrack.
00:05:40
Speaker
ah But Matias keeps going on and he's like, um CSS is a request, which is what I like to think about too. You you just requesting you don't actually have control. a A user can just go control plus plus plus and destroy the font size that you use so meticulously specified. ah You could just you provide bounds with CSS. So what you're trying to do is just not let all the sheep escape their pen. ah You're not necessarily trying to put each sheep somewhere specific. That again is a world of hurt.
00:06:07
Speaker
So he goes into fluid type. He builds a fluid type system with um trigonometry, which ah I've done a couple of things like, but he did one really cool. He was like using sine curves and shit. He also um showed that you can use tan and a tan to to like get values out of things you otherwise couldn't get values from.
00:06:28
Speaker
um He was talking about typography on the web is way ahead of design tools, which is also something that came up again later. um And another talk by rule and we'll go into that one here in a second color on the web as a head of design tools. We have better interpolation on the web.
00:06:44
Speaker
He introduces a site called atmos dot.style, which I've never seen before. He creates a color palette using the sign curve so that the edges don't have a lot of chroma, but the chroma peaks in the middle. It was awesome. I literally that morning had told myself, I'm going to build that demo. And he showed it on screen. He showed something with subgrade. He showed things with container queries. He introduced early um he introduces CSS early in the process. He wants CSS there.
00:07:10
Speaker
ah earlier. And that's like why these design tools being so far behind is so frustrating. He wants decisions to be made in the browser because that's where they should be made. And he wants designers to write CSS. It's a very inspiring, very CSS power centric talk. And that was the opening to CSS day.
00:07:29
Speaker
That's quite the opener.
The Art of Typography in Web Design
00:07:31
Speaker
And that's a super interesting aspect to consider with design tools because you have I do so much work in Figma and I do it because it's like visual first and it feels good. But then what sigma what it looks like in Figma and what it ends up looking like in CSS never like quite looks the same. And also one of the things that you taught me to do was I used to really spend all this time in Figma trying to make sure that things were like lined up and good and everything. And then you were like, nah, CSS will fix that later. Like, yeah, it's a few pixels off here and there. Now CSS was, you know, that's fine.
00:08:10
Speaker
and And that's true. And then um even I'm preparing an episode that's going to be sweet on subgrid. And one of the things I realized was design tools are better at subgrid than in layouts with subgrid than subgrid. That is true. Those global lines are really easy to snap to. That is totally true.
00:08:31
Speaker
But that's actually what I do the episode on is how we get those global lines in CSS. And so, my god so ah but that's true. But one of the things that I realized was is that I start to emulate what I want to do in CSS now in Figma. Yeah. And then if I'm doing that, like even the way I'm using my Oh my gosh, what are those called? They're those like auto layout groups, the frames where you can kind of say like, Oh, this goes yeah with them. Yeah, I'll organize those the way I see like a part, a piece of sub grid would be or something like that. And so then that way everything gets like proper spacing and gapped out.
00:09:08
Speaker
And I realized I am just recreating CSS without getting any of the CSS. And that's and that that's a really amazing point that he made with saying like, hey,
00:09:23
Speaker
that is i design tools are falling behind because if you do an export of the CSS, it's not grid. it's not It's not what you want. Sometimes it's pretty, some of the values you can get are pretty good, but it is definitely, you're not getting like a straight export out or you're not even getting modern syntax.
00:09:39
Speaker
Yeah, I call those synthetic um layouts because they're they're just like wannabes. It's a wannabe flexbox layout. You know, you can emulate grid, but again, these things are like all synthetic and they can. Yeah, the CSS that they give you ah can be a Kickstarter, kind of like AI can be a Kickstarter. You know, it's like, hey, I solved your layout at one of the 1000 screen resolutions that you need to support.
00:10:01
Speaker
And you're like, okay. And usually those ah the code that it gives you is over specified. But anyway, David, by the way, I just got to say, I've been watching your ah your videos on the AI work that you're doing and the Firebase work and the IDX work that you're doing. And then you're kicking ass in CSS and you're using auto layout in Figma, bro.
00:10:22
Speaker
You are a unicorn wonder of your own. I seriously, I don't even use Figma auto layout. I get in there and I get all frustrated. I'm like, Hey, fuck this. I'm tired of this. I'm just going to go build the real thing. I'll just like, I use Figma very much for expression. Like I'm in there. I want to be in la la land. Nothing's real. It's just boxes. I push around, you know, like I want to be in that space when I'm there. And I'm like, as soon as I get into like variables and auto layout, I'm like,
00:10:46
Speaker
just gonna go to the real thing but you're in there putting the time in man and every single your typescript is tight your back end work is tight your front end chops are tight and your desired chops are tight you're just an animal I appreciate that. I feel like that one of those unicorn, you know, unicorn is, you know, uh, someone who could do everything or a company that reaches, you know, like a billion dollars or whatever. I feel like a unicorn that is mediocre at everything, uh, but a lot of things. And so I don't, I may have like a billion dollars worth of value, but it's like, uh, not competitive in several industries or something like that. Like, you know, it's just, it adds up.
00:11:25
Speaker
Uh, but you know, it looks great, but then when you go like look at the sheets underneath, you're like, you know, so you gotta bring it all together. That's, that's what, uh, that's what makes it work. Oh man. I love the humbleness. This show is so good at being humble about stuff. It's the baddest CSS podcast. The baddest CSS podcast where we talk about the most advanced things in CSS you've ever heard of. So funny.
00:11:51
Speaker
Well, I'm going to continue ah recapping CSS day. Yeah. OK.
Tailwind CSS: Utility and Misconceptions
00:11:55
Speaker
So we were actually where we went from Mattias and then and then he designed tools are falling behind and take us into the next. Yeah. Everyone's inspired. We're all looking at all this new CSS for CSS5. I'm going to start using that term on here. ah That also got some new advancements over ah the event. Anyway. OK, so next up was Rachel Andrew talking about reading order.
00:12:18
Speaker
you know You make a layout with grid or flex box, and then you say order reverse. right Now the last item is first. And so now the screen reader is still going to get item number one while your sighted users get to see item number eight first. What do we do? And so she talks about this issue, um talks about new CSS properties that are coming out that are going to apply to flex and grid.
00:12:43
Speaker
reading order items and you're going to have this ability to say flex visual or flex flow or ah grid order or grid rows, grid columns. You can basically kind of describe through once you reorder something or once you've changed the visual order, align the screen reader with it through the CSS properties. And so that talk was very cool. um Of course, she had to had to drop her favorite line about layout, which is we never know how tall anything is.
00:13:10
Speaker
Yeah, we just don't know. Everyone's like, why can't I animate to height auto? Because we're like, I don't know. It's a whole lot of, I don't know, having to do with heights. So the next talk was a bold talk about Tailwind.
00:13:26
Speaker
So um I was like, this is ah a crowd that very much knows what Tailwind is, doesn't use it at all. And someone's going to go on stage and pitch why it's great.
00:13:40
Speaker
because like I was like, that's why I'm saying ah this is bold. Like, this is a you're really this is like me showing up at a TypeScript conference telling everyone to use vanilla, you know. um yeah Anyway, it was overall, it was a great talk. They sort of were like demystifying things. And this is ah Sarah Dion was the one that was ah giving the talk. They're from Algolia. They're also on the cover of the Tailwind website. They're there. They're the the image at the top of the adapting card.
00:14:09
Speaker
And they make some points like, hey, atomic style sheets and atomic utilities, they're not inline styles. and They're not stuck to that local scope. they um You know, like ah inline styles are stuck local. They can't do animations. They can't do pseudo elements and stuff like that. Classes can. So that's not a fair comparison. ah She so shows how you can um do hover effects with Tailwind, shows how you can do group effects, how sort of parent and child relationships can be in line with it. She shows peer invalid, again, with like the group effects.
00:14:38
Speaker
touch effects. So they start pitching like how these open up doors for patterns and design systems. they so They say that the clear fix ah class was the first utility class.
00:14:51
Speaker
um and During this talk, I had two thought-provoking things that came um to my mind while I was watching. One of them was a JavaScript thing. and it was um it's it's funny to me i just like This is kind of like linguistically funny, is that higher-level functions are somehow awesome, but low-level code is awesomer I'm like which one is it if I go I need to pick a direction everybody am I gonna go higher level to be a badass or am I gonna go lower level to be a badass because you kind of are telling me they both make me badass but the only high level one that doesn't make you badass CSS
00:15:26
Speaker
Like this is so annoying. ah You can make a higher order function and be super cool, but if you make a class and encapsulate all your work into a pure functional class, it's not the same. Anyway, now it's just a random thought. And the other one was, um she says, well-crafted systems liberate you. And I'm like, that is a great sentence, but I don't think they do. I think a well-crafted system just paves paths.
00:15:50
Speaker
And it makes some choices easier but the thing about any system, even no matter how well it's crafted, you're going to run into scenarios where it's not working with you and you have to go off road. And so I just feel like there's this continuous We want to believe this in design systems, that a design system will liberate you. But for some reason, it notoriously becomes shackles in many different ways at some point. And and then the weight of the entire system starts to be on top of you. And that's the opposite of being liberated. So I also just like living in these grays. I like thinking about the positives of things, the negative things, higher order function, lower level programming, ah right design systems, and and the shackles that may or may not occur from them.
00:16:35
Speaker
It was a thought-provoking talk. Sarah, you did a great job. I think it was ah better received than maybe anticipated when it started. So so one thing that I so i started out with Terriwen back when it was like in Alpha. i very They've always nailed the design from like day one. But one of the things that I really loved about it was is that it is true that if you are, especially if you are not ah very well versed in CSS, it allows you to move very quickly. And you it does give you a lot of like what ah Sarah was saying in the sense that you are writing in that sort of beginner way of like, why can't I write ah everything with just inline styles? And you can do that, but without a lot of the fallback or all of the consequences of doing that as well, because it is like a whole system. Like I very much buy into a lot of the things that Tailwind
00:17:26
Speaker
ah provides So I'm not like an anti-tailwind person. I've been big on tailwind from the beginning. The one thing that always grinds into my gears is nothing really to do with tailwind and more to be the perspective of tailwind is that a lot of people will discover tailwind and they're like, great. Now I don't have to use CSS. And I'm like, guys.
00:17:45
Speaker
It's not how that works. you It's still CSS. And we were like, well, you know, it fixes CSS. I'm like, it is a way to use CSS. It's still CSS. ah You might put some powder in your water to make it a sports drink.
00:18:02
Speaker
Still water in there like you're not eating the powder like that that part's not good. It's not good The water is water is good the powder not good together good This is a really bad analogy, um but I don't know Kelly um But that's I've always found that people who just kind of write off CSS from Tailwind, I'm like, no, you're missing the good part. like Especially if you're not great at CSS to begin with, and you should be listening to this podcast if that's the case. And if you are writing cs a writing Tailwind, that should make you more curious about what you can do with CSS. Like, oh, I wonder what class. You go to the computed section of that element after you apply that long list of classes and see what it looks like.
00:18:46
Speaker
And to me, that's always what I found so great about Tailwind. And Tailwind also has some and incredibly intricate classes and and intricate systems. And to see what that does to the actual like rendered element and what its computed styles are, that is one of the greatest uses I've found with Tailwind.
00:19:06
Speaker
and Tailwind has taught me a ton about actually what CSS can
Tailwind 4: Anticipated Improvements
00:19:10
Speaker
do and so it's a great system and it just should be looked at as like you know it's a great system that really promotes CSS rather than saying like covers up CSS like no no it's it's the other way around. Totally agree there's so many good things about ah Tailwind. I'm not a Tailwind hater either Um, I think that that it's got plenty of superpowers, which we could talk about on a different episode. Um, and then only, there's only like a couple of things I don't like about it. And honestly, a lot of them are going away until one four. So I'm kind of excited for the things until one four. Cause to me, was there was a little bit of config hell that I was getting into with tail one three. Um, the whole so anyway, as that drifts away and becomes a little bit less in my face, I'm going to be more excited to to get into that. But yeah, I think tailwind is great. There's nothing wrong with it.
00:19:57
Speaker
Yeah. Yeah. no And the config problem is like literally almost any system like, or any dependency issue. Yes. Yes. The, all the configs we must config the thing that helps us so much. Okay. Well, I'm gonna burn
Creative CSS: 3D Models and Animations
00:20:12
Speaker
on into the next talk.
00:20:14
Speaker
ah which was Julia Miocin called Character Modeling in CSS and they basically go on screen and build up from scratch like a little box fox until they have a running character in the very end that looks straight up out of Virtua Fighter. Did you play Virtua Fighter?
00:20:33
Speaker
Um, I didn't play it, but it sounds like something from my childhood. So like, really remember think that exactly I thinking, im I'm remembering like walking through as military Brett. So I remember like walking through like the, the PX and like, and the bowl, exactly the bowling alley. And I remember seeing like that, like machine, a virtual a fighter. Yeah. And I think, i'm a fighter yeah yeah. Okay. Now that this, this rings about, this is You can see all the polies, like it's so low. Yeah, all the faces are like super visible, but somehow you're like, it still looks almost like an early PlayStation, like Cloud from Final Fantasy 7. You're like, it was so high res. And then you go look back now, you're like, dude, that's like seven faces of like a polygon. Okay, whatever. Anyway, they build it up from scratch. And not only do they do it with us,
00:21:22
Speaker
um and show us all the sequence. They show us how to do skeletons, joints, shaping, light sources, and then they animate the whole thing into a realistic character. And they're basically a a patient person in Nirvana sitting in their room, making a flat face, twisting it, rotating it, positioning it, placing it.
00:21:42
Speaker
grouping it and just piece by piece building a masterpiece. It's very inspiring. Okay, so I have to take a stab at like how this... So this is all in CSS. yeah All in CSS, yeah. yeah ah So is this one of those ones where you use like a ah ah templating language like Hamill to loop through and create a ton of divs?
00:22:07
Speaker
No, okay. Hand down dips like arm and inside of arm was like upper arm, lower arm, ah elbow, you know, and so then they jointed off that middle one so that the rotations were all and they didn't even like they even with an extra mile where like rotations were a little beyond your things so that they rotated naturally. It was like a lot of attention to details. So each polygon has to be some sort of, you know, we'll just say div for this case. so It has to be some sort of div that gets yeah put into some preserve 3D, 3D translate ah yeah layer. And that gets moved. I assume like most of this is going to be in like a larger, like absolute ah positioned thing. So it can kind of get just transformed in 3D space.
00:22:55
Speaker
um I imagine that getting the perspective values for that is probably very important. Whereas not like me where I'm just like 1000 on perspective. 1000 pixels. Yeah, I always do that too. I'm like, I'm just going to pick one now. Yeah, I'm sure they're they're definitely deliberately picking one in the beginning. And they have a couple... You can tell they have a... ah Well, they also start with just a basic box at the beginning.
00:23:16
Speaker
And that's what helps kind of set the stage for, Hey, we're about to make a lot of boxes on top of each other and then they're going to animate. I, yeah, I've been wanting to do an episode on that. Actually where you, we, we talk about 3d and CSS. So I very much wanted to catch this talk because I went and created a ah box ah where you have four divs that, you know, everything positioned. Absolutely. Then all transformed together in 3d space.
00:23:39
Speaker
And then from there, you can do some pretty incredible things with like rotations and whatnot. And it feels very 3d, but it's just four divs sort of, I mean, I guess it is 3d, uh, but it yeah it's one of those like pseudo 3d kind of the way that you're doing it. Um,
00:23:55
Speaker
It's yeah, CSS is a 3d modeling system is something that's kind of bizarre. Cause at first you think it's going to be very difficult, but then when you put a box together, you're like, Oh, that was, that was actually pretty easy. And then when it comes to like using, uh, CSS properties, uh, for like changing values, you're like, Oh, that that was also pretty easy. I assume just like any 3d modeling system gets, it gets way more complex. The more complex the figure gets, but just doing simple 3d shapes and CSS isn't really all that bad.
00:24:25
Speaker
Yep. Totally agreed. Hey, side note, by the way, my first language I ever wrote was VRML. Vermal. Vermal virtual reality modeling language in like 1998, and you would draw a 3d shape and place it in space. Just so I was just totally taken back while you're talking. There's like, yeah, that's totally what I did in VRML, except they were actually 3d shapes and got to very similar to HTML and CSS, but in a 3d environment.
00:24:55
Speaker
All right. Well, moving on. What ah what happened? So we, we had it our minds blown. We talked about some tailwind. We did 3d. What, what do we got next?
Advanced Typographic Techniques in CSS
00:25:06
Speaker
Yeah. Reading order. And now we have a typography one, um, by rule, these skins called problems solved by open type. And this was a very fun talk. The guy is super punk rock, um, very dry and cool. And I was like all about it. Uh,
00:25:22
Speaker
And so then they go into showing us all these cool things. So first off, the first part of the talk is about ligatures. And they do a couple of like really beautiful examples. And then they do a silly one, like a silly one as they start typing, like, I put my files in the cloud. And when they type cloud, it turns it into a ligature that says ah shit or no bullshit. And then they're like,
00:25:43
Speaker
And then it gets gamification. And they were like, and then that one said fucking bullshit. And so it's like he's turning words using ligatures into ah just good stuff. ah He taught everyone about swashes. I don't think people enough people know about swashes. These are like the extra, extra flourishing elements that can be applied to capital letters and certain funds. You get like the letter G, you're like, oh, that's a cool gene. You're like, watch it when I flourish it and turn on swashes. And then it's like, oh, it looks like a mermaid is coming off it or whatever.
00:26:12
Speaker
ah They go into variable fonts. ah They were very inspiring and they're talking about ah light and dark. When you have a dark mode and a light mode, your font weights should be slightly different because of the way that I see contrast. I already have a demo about that. I opened up my demo, compared to it about the advice he's giving, same advice. And then I also started adding some of the other font variation settings that it goes into. So it goes into this cool thing where he's like, let's take this very generic looking typography layout.
00:26:37
Speaker
And we're going to employ a series of ah font variation settings and just perfect these little moments in here. So he does even like the at symbol in a line is hanging down and he goes, Oh yeah, that's just a font variation setting. You do this and it aligns it into the middle. He takes all of the abbreviations that are like, um, small caps. It makes the small caps fit the most mind blowing one he did for me that I was like, so happy. Okay, David, have you ever made the code element on a website? You know, it's like you're writing a blog. Yeah, got the code element, which means a monospace font is going to be in there. And you want to make it look like a pill, right? Yep. But your function is lowercase, you know, so like say the word const is in it, and you put it in the code element. And there's like a little bit of padding on the bottom, and then like way too much on the top. And so you start trying to do some line height tricks to get this thing actually centered.
00:27:30
Speaker
And it never works out. It's always this weird magical number thing. We're like, the top has 0.35 M and when the bottom is 0.05 M and just some stupid crap you have to do. And he goes, oh yeah, we can use a cent override. So he goes and goes to the at font face.
00:27:47
Speaker
declaration, loads in the font, specifies a sent override, which basically trims off some of the letterbox and it's perfectly centered in like one line of beautiful CSS. And I was like, my God, rule, that's beautiful. um And again,
00:28:05
Speaker
design tools can't do this shit, man. Every single nudge and nit that he did, I was like, the only tool I've seen do it is Photoshop and people don't use it anymore. And even those were like magical incantations inside of Photoshop that you had to know that the weird dinky little icon with the weird floristy looking tee would give you a florist tee. But he's in there codifying it all.
00:28:25
Speaker
is awesome. And anyway, him and I are set to meet up in a week or two to figure out how to take all of these font variation settings, give them a custom property name and put them in open props so that someone can just grab this grab bag of, of healthy, easy to use font variation settings. Cause right now they're so magical. You got quote VRTM,
00:28:45
Speaker
you know And then a value of like five. And you're like, what the hell does that mean? um So we're going to give these things good names, make it easy to use, and empower people for font variation settings into the future. Rule, that was
Typography and Layout: Core Web Design Elements
00:28:57
Speaker
a great talk. So anyway.
00:28:59
Speaker
I love anything with fonts. Like, uh, if you want to make anything look really good on the web, you just really hone in on the font of it. You can just be like white background, fancy, well-aligned font. And everyone's like, wow, what a great designer. And it's really all it takes. So, you know, these tricks, they really do. They take you super far.
00:29:17
Speaker
So that's that's Stephen Hay, who closed out the second day of CSS Conference, one of my favorite quotes from him. And he put it up on screen and showed a good example. And you don't even need, you just said it also, he said, good design is mostly typography and layout.
00:29:31
Speaker
Oh, see, it's i that's literally. Yes, I totally agree. It's like 80 or 90 percent. He's like 80 80 percent of good design is typography and layout. And I sat there and I was like, I'm pretty sure I've heard that before, but it's never punched me in my face like it just did. And and I just I loved it. um I just made a demo today that was like a calendar.
00:29:52
Speaker
And the whole beauty of the entire thing is just the layout and the typography. umve I've built something for a Google IO workshop coming up. It's beautiful because it's layout and typography. um Man, it's just really good. And then you can sprinkle in some color you know and add some other kind of beauties. but ah Yeah, dude, you're nailing it there. We're designed good. It's just look at the bad at CSS website. That's just mostly typography and layout. There's like like, is there I got to look at it real quick? I don't think I put much color on it outside of the it's black and white logos. Yeah, the logos are color because you have to use those specific logos for spotify and things. Yeah.
00:30:32
Speaker
Um, and, uh, yeah, I was pretty deliberate about that because it's black and white and, uh, which is cool. But then as soon as you want to add any color to that, it starts to be a bit of a statement. You're, if you were adding blue, it usually means you're playing it safe and you're trying to appeal to everyone and it's kind of, it's cool. It's calming. It's fun. It's whatever. Uh, but it's not offensive, you know, it's not if it's red. Oh, okay. Now, all right. What are you, what are you trying to tell me?
00:30:59
Speaker
Okay, all right there. right Or it's like YouTube where it's like, youre it's this is exciting. you know this is This is live. it's true yeah if You look at even like a lot of news networks like CNN. CNN is red and everything with that is... Recording always.
00:31:15
Speaker
Exactly. Yeah, exactly. So there's all the little things that color do very well i to fit into the theme and font as well. ah that all these All these little design nudges you have to do, they have to be used sparingly because they send a message. And as soon as you start introducing a color or a font because it looks cool, and I'm super guilty of using fonts because they look cool,
00:31:37
Speaker
But as soon as you start doing that, you are sending a message that maybe you don't even know you're sending. And a lot of times that results in you being like, ah, this looks cool, but I don't quite like it. And it's cause you're, you're sending a message that maybe you don't quite understand. And that's why I picked the grungy thing. I'm now coming full circle remembering now why I did the bad at CSS one.
00:31:57
Speaker
because I wanted the spray paint because it's not quite perfect. um it's it's a little like We're bad. It's a little grungy. and I felt as if we did a really kind of like really bad design where it was like the original thing we did with DevTools. It was accurate, but it wasn't really appealing. It's true. Especially the colors that you get when you hover over on DevTools. Man, mauvey, weird, orangy. It gets super grungy and weird. It looks like, uh, it looks like the bottom of like, uh, at the end of a paint set where you all the, you're, you're like, uh, you're like, Oh, what color is that? Yeah. is So I realized like it, it fit, it sent the right message.
00:32:40
Speaker
But it just wasn't visible visibly appealing or it wasn't aesthetic enough. So that I was like, what's aesthetic, but also kind of still says we suck and spray paint is that spray paint is very like it's cool. It's grungy. There's this really kind of cool appeal to the drip of it.
00:32:56
Speaker
Uh, artistic, but not perfect. And actually, and, and also not, uh, you don't, unless someone's like super high class, uh, doing like big street murals, most of the time when you see people with like the spray paint in mind, you're thinking, you know, Oh, they're not, you know, they they're just like some person on the street doing it. It looks cool, but they're not like.
00:33:16
Speaker
a real like painter or anything like that. I want to say artist because it is art. But yeah, well, you get to see the craft. This is like something I'm loving more and more as AI does stuff is I want to see the craft. I want to see the flaws of the hand that did the work. Yeah. And spray paint grunge is included in that. That's the the fleck of air that caught a little particle that flung it somewhere that was undesired. And I'm like, no, that's super desired. It looks sick.
Precise Text Alignment in CSS
00:33:41
Speaker
Um, rusted metal that you, that the sand down and you get this texture and this color that's impossible to recreate. Anyway, bro, we're sidestepping it and I'd love it. We are so nice that big.
00:33:51
Speaker
I want to tell a secret. I'm going to release a secret here on our show that ah is I teased I teased a couple of weeks ago on Twitter and I said new centering techniques are coming to CSS. Be prepared to blow your minds. I don't know something like that. And I had like an evil Dark Lord Kermit the Frog because sometimes I sound like Kermit. So it'd be like Kermit the Frog says CSS has a new centering strategy anyway.
00:34:17
Speaker
Bro, I showed it to Rule after his talk. I was like, Rule, you Rule. i need to show you ah I need to show you some demos because this is just in Canary for the past few days. Bro, check this out. Text box trim and text box edge.
00:34:34
Speaker
and it is absolutely glorious. I'm talking about like buttons that you that you are perfectly centered, that you don't have to do bullshit on the top and bottom or the left and the right. I'm talking about, dude, you have a sidebar that's got a background of red, and then you have body text that's in the main thing on the right, and the top of the sidebar perfectly lines up where the text starts in the main content area, because you can trim the start off of the letterboxes there. There are so many examples Not only just alignment, but centering that this is one of the most exciting typography features I've used in the web in a long time. I cannot wait to release my demos. I did tease a demo on my website. You'll see I said a super rad design. This was a thing that was like super went down, rad was sideways and design was down. So the letters connected in this kind of cool like little shape. I redid that one with text box trim. Absolutely perfect capital letter alignments, even doing vertical text.
00:35:33
Speaker
it is so sick anyway so rule he knew what was happening loved it and i was like you're my you're my my peeps man let's let's talk more typography let's talk about variant font settings and let's geek out about trimming things off of letterboxes and he's like yes that's a That's another thing that CSS is speeding ahead of design tools on, like ah more control over letterboxes. That's a big pain in the butt in design. And honestly, a lot of design tools have to recreate the web's one because that's such the dominant player in its concept of half-letting. Anyway, we won't go into half-letting.
00:36:11
Speaker
ah Look it up, anyone. If anyone wants to know like why text box ads and text box trim are solving a problem, Google half-letting and CSS, and you'll be like, okay. um All right, so let's talk about Kevin Powell giving his first talk in person. Yeah, Kevin Powell. He gets to go on stage for the first time ever and say, hello, my front-end friends. And ah very cool to see him do that. Also got to hang out with him a couple of times. Super rad guy.
00:36:36
Speaker
And he talked about over-engineering your CSS and why you want to do it, why you should over-engineer your CSS. And I'll do my best to summarize what he's talking about. But first, a couple of my notes, which one is ah even he took a long time to get into using Grid. He was resistant to learning Grid, especially named Gridlines.
00:36:57
Speaker
Oh, yeah. Which you were a little hesitant on as well. And now I know you're on the bandwagon because that yeah shit is amazing. um And he's he's on the bandwagon, too. So basically, he's up there like I was pulling I was dragging my feet, but now it rocks and loved that he went up there telling everyone that he dropped a bomb on everybody, that one person in the crowd, only one person in the entire CSA crowd knew that you could do this, that you can use calc in a media query. Oh, yeah, yeah.
00:37:26
Speaker
You knew that? you No, no, no. Yeah. I remember you, you you know, you know, I didn't do that. No, you, you got so hyped over this that this is like, you know, the behind the scenes on the podcast. Adam was literally, he was messaging me a lot of stuff, but he messaged me that like immediately. He was like, did you know you could do this? And I, I did not know at all.
00:37:48
Speaker
Crazy. I loved it. I was like, wow, that's that's really me. And he shows a really cool use case. He basically sets a media query. He's got template column sizes, and he multiplies them in the media queries. Like if I want three columns, I'm going to say it's the media query three times the size of my columns or less, then boom, I'm going to do. Anyway, it's like this really harmonious ah use case that was very cool. And so he kind of goes into over-engineering your CSS. He goes to this example. He put out this video that he shortened to snippet down. ah and everyone was confused and mad at him. um And he ended up redoing it again, but this time even more over-engineering it to kind of try to be silly and then realize something when he did it.
Using Custom Properties for Flexibility
00:38:26
Speaker
So what he did is he he refactored his code to lean heavily into custom properties that are surfaced at the top of the selector that basically give people a bunch of levers and they're named. So you take all of the magic units that are otherwise sprinkled throughout your class or this layout that you're doing and you give them a meaningful name at the top.
00:38:45
Speaker
And now, whenever you adapt one in a media query, whenever you change one, or even you're just revisiting the code, you get to know why these are there. So you get to have your cake and eat it too if you do this. You get to build a very robust system in your CSS, but you also get to expose the meaningful parts to people ah through the custom properties there. Over-engineering your CSS is good, and he shows a lot of really good examples, one of ah which was mostly about layout.
00:39:13
Speaker
a phenomenally powerful layout system broken down into a series of custom properties that you get to just pull levers on at the top and get what you need. Really cool talk. um Not really what I expected out of ah telling everyone to overengineer your CSS. I'm very much someone that doesn't like overengineering. It drives me nuts. and But in this case, I was like, that's not overengineering. This was ah it was a catchy, tired, all blah, blah, blah. He didn't overengineer. He engineered it um very well.
00:39:40
Speaker
it was It's just a good solution. and Actually, he exposed things to people in a really healthy way. It's like leaning in the power of CSS. is Yes, it was leaning into the power of CSS. Yeah. Yeah. And expose it and make it easy for others. Yeah.
00:39:55
Speaker
Well, I feel like you have to call that out with CSS because with any other language, it's not over engineering. It's dry. There's some architectural thing. That's just the boilerplate the system needs. That's just how it works here. But with CSS, if you see too much of it, people are like, burn it with fire. I don't understand why that's happening. This scares me.
00:40:21
Speaker
ah and I feel like there has to be a message to say, no, like CSS does amazing things. You need to lean into it and you need to really flex the muscles and not be afraid of all the things. Like whenever, whenever a lot of languages get complex, people get really like, look at this, this looks really great. But when CS gets really complex, all of a sudden there's a problem. Yeah. Actually that's not totally true. I will give TypeScript something on this one. Uh, is that when you see.
00:40:50
Speaker
those type, like, uh, like those really the letter t with yeah reflections and all that stuff. And it gets, and then they're override. Oh my gosh. Let's see if I can pull one up on screen for this. There's some ones that are pretty gnarly. They do amazing things, but they're pretty gnarly looking. I look at, they just look like algebra. It looks like something in math class I should have paid attention to. I, no one likes looking at that.
00:41:14
Speaker
like, uh, very few TypeScript aficionados do like, so I will give that with TypeScript. You look at that one and you're like, not one needs to be burned with fire as well. Yeah. I mean, yeah, there's always slippery slopes. And he, he, his example originally too was like, there was somebody did something with like min width, max width, um, something, something else. And he turned it all into just a clamp.
00:41:35
Speaker
And that was what caused the uproar is everyone's like, Hey, I actually have to think harder, even though it's now two lines instead of five lines, I have to think harder about what's happening. You over engineered it. And he goes, well, I'm an over engineer now. But by the time he was done and exposed all the custom properties, it's like actually shit's dope.
00:41:53
Speaker
i I did that the other day. I can't remember what I did, but I used a with, with the min function. I was like, what am I doing? But it worked. And so I was like, uh, there's definitely something I should be doing with min with here and like, but you know what, this is working and it, and so I i went on and I liked it. So I'll have to see if I can remember what I did, but I remember being like, this is definitely going to bite me later, but it didn't, as I kept going on, I had a responsive with and all I did was set it right there. I was like, I like this.
00:42:24
Speaker
Oh, that's awesome. ah Now I just want to see code bite people back, you know, just like they walk away from the day, all right, I'm mail all done on a Friday and code comes out, bites their ass. And it's like a mad dog at a mailman or something. um Anyway, okay. Let's talk about Sarah Sweet Ann's talk.
00:42:40
Speaker
yeah which was awesome. The biggest message for me here, and this is something that's been important
Web Accessibility: The Importance of Screen Readers
00:42:45
Speaker
for me. I used to um try a different screen reader every couple of weeks to get good at them, but she goes up there and she's like, everyone learn how to use a screen reader. um And she shows ah herself using a screen reader multiple times. And it's just just a reminder, anyone listening to this, if you have never used a screen reader, if anything, just use the one on your phone right now.
00:43:06
Speaker
There's really cool use cases for this. You don't have to have an in-app voice read a document to you or a website. You could use the screen reader built on your phone. It's like a couple of gestures away and it can start to read to you. You're in your car. You don't have any more podcasts left. You got some articles in your backlog.
00:43:25
Speaker
Boom, use your screen reader. I'm telling you, knowing how to use a screen reader is not just for QA. It is a superpower for you. and Anyway, so they go on to talk about how to use a screen reader, or at least imploring people to use them. Look at the accessibility tree. So in DevTools, you can open up the accessibility tree. It's the representation of the DOM tree. but what a screen reader will see. And this is a great gut check for you to see what kind of information is my HTML, CSS and JavaScript telling a screen reader ah so that when they read it anyway, they said be aware of has has it's very cool, but it doesn't give shit to a screen reader. So be aware of what you're doing there and try to inform a screen reader to because it might not just be visual.
00:44:08
Speaker
And there was a kind of interesting dilemma around popovers that popped up. Oh, I guess that's funny. and Not really. Anyway, they need to be closed when focusedly. So if you have like a side nav that flies out as a pop over, like a hamburger menu, if you tab out of it, it should auto close. Or should it, should it be a trap? Should it not? Should it have been a dialogue that had nerded the page? I don't know. There was this whole conversation about it. You can find the thread on Twitter. Sarah Sweet and did such a good job though. The thing, the only bummer was.
00:44:36
Speaker
It was she is so incredibly intelligent about this stuff and that the edge cases are harder than a responsive browser and it's harder than trying to target the three major browsers trying to target all these screen readers and all these different contexts is an enormous task. It is a very specialized task and it's a very important task. And ah my backpack, like and in a metaphor here, I left that talk and my backpack was just full of rocks. I felt so heavy. um I wanted to climb up the mountain.
00:45:10
Speaker
But I felt like the amount of things that I still need to learn and things I still need to do were just incredibly heavy. um And so I'm just going to work on a rock at a time. And that's what I mean. I'm going to learn a screen reader and just because I want to test on device. so Anyway, also learn your ah Mac OS screen reader. It's a hot QA. And it's also very nice. You can see your headings. there's It's pretty cool. So anyway, Sarah Sweet and dropping accessibility bombs on us or just putting rocks in your backpack, I guess. and But still, it was it was a joy. Everyone there, it was education we need more of. So I was really happy that i was there. It's true because you use a screen reader just to get through a homepage or something, and you're going to be very frustrated, depending on how it's built. And even small things that sites don't do like skip to content, like style, ah ah accessibility. I can't remember the name of it now, but basically when you're tapping through, they can say like, Hey, hit enter here to skip to content on the page.
00:46:04
Speaker
Otherwise, every time someone visits their your page, they have to tap through every single thing yeah before it's the core part of the content, so any header or anything like that. And there's just little things you realize. Also, when things get to like lists, like ULI,
00:46:20
Speaker
Uh, you, you will tab over a lot of times things in those lists. Whereas what you really want to do is turn that into an arrow key. So you tap to that and then you can arrow key through it because it could be like 50 things in that list. And so the user can choose to arrow key with it. Or if they don't want to go through that whole list, they don't want to like nest into it. They just tab away. And so all these little things that you don't realize are really frustrating to do until you try to use a screen reader or you try to do keyboard only navigation. You're like.
00:46:47
Speaker
Okay. Yep. All right. Let's, let's fix that.
Frontend Development Challenges
00:46:51
Speaker
Yep. I always say screen readers are the, so if you've ever played Megaman, have you played Megaman David? are you make man Very long time ago. Okay. So Megaman has this s thing where, um, not only are the levels incredibly punishing, the bosses are super difficult. And then when you think you've beat the game,
00:47:10
Speaker
You have to beat all the bosses all over again, and they're even harder. It's like they just throw the whole game at you. um and it's But anyway, that's that's a big man thing. And why I'm bringing that up is like when when you're building a website, not only is it difficult to just build the website for one browser, you then have to satiate three different browsers.
00:47:30
Speaker
Then you have to satiate all of the different screen sizes and mobile factors and devices. Then you have to satiate keyboard, mouse, touch, and screen reader. And then the screen reader one is another set of a final boss of five bosses. So you thought it was just, oh, I have to have screen reader support. No, it turns out that set of bosses is harder than the entire game that you've even gotten until you're where you're at now.
00:47:53
Speaker
and Because they're also different. There's no interop 2024 for screen readers. We have that for browsers, but we don't have that for screen readers. So it's just all over the place. It's a very difficult problem.
00:48:06
Speaker
um I'd like to see it get better one day, but it's really tough. So anyway, building on the web is hard because of form factors, people, browsers, screen readers, all these things coming together. ah Whereas if you write a backend ah in Go or in Node, all you have to do is make one compiler happy, one runtime happy. That's it, just one. And you guess what, David? You get to pick the version. Imagine if I could pick the version of the human I pick the version of the human, I pick the version of their phone, I pick their phone size, I pick the way that they're gonna interact with it, and then I build an app. That's what it's like building on the backend. You choose your environment. You pick the version. You make one thing happy, and then maybe your manager happy. That's it, dude. On the front end, we are making 15 people happy in in this hostile, chaotic environment. Also, I love it. I love it so much.
00:49:03
Speaker
It's so hard, but I love it so much. but one ah One of the great engineers I've worked with in my time, Chris Rayner, a shout out Chris Rayner, he worked a very early Firebase and was one of the core and at many times the only person working on building out Firebase hosting back in the very early days, like 2013. And he, um,
00:49:24
Speaker
built out this whole backend system. And then he had to build out the CLI for it. And he, so I just done all of this gnarly backend work, figuring CDNs, atomic deployments, cash invalidations, like all this stuff. And then goes to build the CLI. And he told me like, this is, this is so difficult because that's client work. And he's like, there's so many different like versions of nodes someone can be using or so many different like, and this is not even like UI screens.
00:49:53
Speaker
And he was like, the client, and he's this amazing backend engineer. And he is like, I actually did a Firebase podcast episode, the very first one I did. And I have him on the podcast saying like, yeah, no client, client side work is much harder because it's so unpredictable.
00:50:09
Speaker
Whereas with server world, it's predictable. I can tell you like this connects to this and this does that and this is on this and like I can, that's my job is to make it predictable. But with the client side, I can't make it predictable. Uh, and I, you know, we have to be resilient in the in the face of unpredictability. in yeah but Yeah. That's awesome. I mean, that's what's that's what CSS was made to do, to be resilient in this and this space of unpredictable. That's kind of why I say it's like security. um I even shared a tweet. I think I shared it to you too, or another podcast. A guy was like, if you can do a layout in CSS Grid, ah you can learn assembly language. He's like, assembly language is so much easier than CSS. I don't know about that. I'm glad to hear it.
00:50:53
Speaker
I know I agree. I'm like a little doubtful, but I do agree that like a human has to use your CSS grid and their browser and there's there's like so many factors that come into just that moment. um and i And I do agree that it's so much more subjective. It's so much harder to fulfill that task um because it's just so much, ah there's so much chaos in it. Okay. Anyway, this episode is getting long and I have multiple speakers that I need to talk about here. okay Let's let's ah let's rat let's let's lightning lightning round
Exploring Anchor Positioning
00:51:23
Speaker
him. All right. So Tab gets in to show he starts talking about anchor positioning and just goes through the spec and each of the different features he taught everyone what a containing block was. um One of my favorite features here is that position absolute can now use the aligned content and justify items syntaxes.
00:51:40
Speaker
Oh, seriously. It's so sick. I have a prototype already. If you have anchor in your browser, you can also use these keywords with position absolute. It's super rad. It's like one of those things we should have had for a long time. Now I'm just everything's position absolute in my layouts. It's over now.
00:51:58
Speaker
But yeah, you can say place content center or place self center in the middle of an absolute layout. It's amazing. um Anchored elements can be aware of each other. Scrolling an anchor is complicated and quite limited, but there are features and capabilities that allow you to do this. Anchor doesn't follow transforms. This might change. So like you transform an element 100 pixels over and then you go anchor that element. It will anchor it from where it was, not where it is.
00:52:23
Speaker
The GPU has moved it somewhere after it's containing blocks. So right now anchoring is about containing blocks, not about transform boxes. It's a kind of clutch and it's probably going to make it unusable for a lot of people, but maybe it'll change. We'll see. ah Try options or space aware, which is cool. Try order is really neat for maximally available visually. So you can try an order like be like try to be visible as much as you can, and you can give it a set of stuff.
00:52:48
Speaker
um Position visibility allows things to hide themselves as anchors aren't visible. So let's say you have something anchored to something else, but that ah thing scrolls out of view, your anchor will automatically hide itself because the thing it's anchored against is no longer visible. Position visibility.
00:53:04
Speaker
And the last thing it was is I've been working a lot on the carousel spec and we were previously using grid areas, named grid areas to put things like the dots and the buttons on there. We're going to switch to anchor because not only will it help with CLS, initial paint is faster, um but now people can just anchor things around. Just anchor them around your carousel. It's freaking super cool with all these rad keywords. So that's going to be a nice enhancement there.
00:53:29
Speaker
Sounds like anchoring is a big deal. It's a huge deal. It's something that is not quite being understood in the larger ecosystem of like, no, this is a really big deal. And I think, okay, we're going to have to do a whole episode on this. I'm gonna have to do a whole episode. I need to do one too. Uno's got a great tool that helps people visualize it, but like one of many features that it knows how wide something is. You can anchor something to something else and span its intrinsic size. Like that shit is not possible in a lot of other scenarios and this can do it with a couple of keywords. It's really cool.
Enhancing UX with Scroll-Driven Animations
00:54:07
Speaker
Cool. Then we had Carmen come on, talk about scroll driven animation, showed us a bunch of cool demos, some audio cans, a lot of sprite sheets that were animated on scroll, looked really cool. Talking about how you can aid in info intake. So if you scrolly tell, you can help people consume the information that you want because you can guide them through the information.
00:54:26
Speaker
um You can also aid in sensory overload, so instead of just giving them everything all at once, you can conditionally preserv prevent or present things. And the browser is your friend, it handles everything but between keyframes. Then Roma came on, who's the one at kaizu.dev, and they talked about impactful experimentation and how they kind of, their thought process around using all these new features and APIs and how they um try to break things and how they try to build things and how they take different people's blog posts and get inspired and build something new and the combination of all those things. They introduce us to space toggles and cyclical space toggles, which by the way, did you see that CSS got the if statement? What?
00:55:07
Speaker
CSS is about to have a proper if bro, if else in CSS, I'm doing the dance, everyone. If you, uh, if you're i'm like, this is victory, how do we say programming language? We waited until like 50 minutes in. Let's talk about anything.
00:55:26
Speaker
Well, I mean, it was part of CSS day. That was just done at the CSS face to face. It happens another episode. I just wanted to bring it up because Roma shows space toggles and cyclical space toggles, which are used dry switching and the initial and an empty state of a variable to simulate if else and conditionals. It's a mess to read. I love that people are able to do these things, but I'm seriously like, do not put that code in my code base. Yeah.
00:55:50
Speaker
It's really hard to follow and debugging is, is a pain in the butt. So what we're going to get is a proper FL statement. It's going to allow you to present a condition. And, um, what happened, it's almost like an inline ternary, except it's a little bit more official than that. Super cool. Um, they, uh, showed us some, so Roma showed us some mixins, uh, tricks, some function tricks, implemented some sort of, uh, scroll driven animations with the anchor API. And the scroll driven animation API is more powerful than people think it is. It can do a lot out in there.
00:56:20
Speaker
you Josh Como gets on to teach us how to teach CSS, really great um fundamentals breakdown. They're like, hey, you put an image in a page and there's like that weird little five pixels at the bottom. What the hell is going on there? That's because it's default vertical alignment is to baseline. And that's the half letting of the text that is next to all sorts of like cool little niche things trying to help people understand the fundamentals. So they're not frustrated when they run into something. It's like people using react and not knowing JavaScript and being frustrated with actually a JavaScript issue, not a react issue, but telling react they hate it.
00:56:51
Speaker
And the reality is that they just didn't understand a fundamental what they did. Stephen Hay closed it out. ah By the way, day two, I wasn't there in person. I had to pay to, I i happily paid 10 bucks to watch these live stream. I got sick on day one. You can still hear it in my voice. And we'll talk a little bit about ah more here in a second. I was super bummed out watching these.
00:57:11
Speaker
ah from I was there. I was there in Amsterdam. I'm like five minutes away and I couldn't be there because I was so gooey. I had green goo. I was like my back ached dude. I got pretty sick. I'm still sick. I got pretty sick there.
A Humorous CSS Day Anecdote
00:57:25
Speaker
So that was another gooey challenge for you. Oh, it's a gooey challenge in real life. Good call, dude. Very nice. ah My wife's going to appreciate that one. I'll tell her later.
00:57:35
Speaker
um Anyway, I was sick. And so Stephen Hay closes out the day. I really like Stephen. We've hung out many times. um But I got to watch his talk. Oh, I think he actually closed out day one. Anyway, whatever. um His talk was all about like ah good design, what what goes into thought processes, how to prototype, design tools, again, not necessarily being the end-all place to do the ideation, et cetera. It was a great talk, very you like design strategy ah conversation.
00:58:03
Speaker
And then Elika gave a talk on standardization stories, and they shared things like, hey, here's a fun thing that happened back in the day with IE6. Hey, here's the thing that happened when Firefox did this first, and then Chrome screwed it up. Hey, ah here's a browser that's a villain. Hey, here's a browser that's a hero. Hey, here's some standards moments that were villainized. Here's some standards moments that were awesome. All in all, the conversation and this talk was about if you tumble a rock enough times, you'll get some pearls. And those pearls are what we call CSS specs.
00:58:31
Speaker
and um That's good. It was a good talk. I got to check that talk out. That sounds really interesting. OK, so we're at the very end. um I already mentioned I got sick, but I want to tell a fart story.
00:58:46
Speaker
He had been promising this before he recorded. so I didn't hear the story either, so I'm kind of interested to see what's going to happen here. All right. So I get to Amsterdam day one, which is like the day before the conference, maybe two days before, um because I always like to get a tattoo. I got a really cool tattoo. I think it's cool. Anyway, it's a fire. I told the artist Firebug and he ended up drawing me a dragonfly in fire.
00:59:09
Speaker
So I have a um a proper firebug tattoo, and but only in the sense that it's nerdy in its name, but it doesn't look like the original one. Okay. So anyway, I'm there. I'm there early. I ended up hanging out with Miriam Suzanne. Mia is super cool.
00:59:23
Speaker
um yeah and ah We're just walking around. We're both super jet lagged trying to stay awake so that we can fall asleep with the darkness of light or the absence of light. night Anyway, ah night right. So we're walking around the city. Totally. I call it Toucan Samming, where we just follow our nose, like, oh, follow your nose and, you know, just whatever we need to do. I had a chore. OK, so we're walking around. Mia's super cool, very laid back person, so laid back, they fart while that while they walk.
00:59:53
Speaker
Okay. At least that's what I thought. And the first one, um, we're just like walking down an alley in Amsterdam and I'm like, ha ha totally heard that, but she doesn't look at me at all. She doesn't acknowledge the fart, uh, as if she didn't fart. And I'm sitting there going,
01:00:13
Speaker
I heard you fart. I'm obviously cool with the fart. I don't know why you're not owning up to the fart. So what the fuck fart? Anyway, I let it go and not a fart. I let the concept go. And ah and we walked down the street again later um and she she farts again.
01:00:34
Speaker
And I'm like, and and I look, i'm I'm like, you know, like, you don't like as soon as someone farts and you like look right at him, you're like, you can't ignore me. I'm like, I'm gonna look you right in your eyes and let you know with my face that I i heard your fart. And again,
01:00:49
Speaker
She doesn't even look at me. She just keeps walking. And I'm like, these are clear farts. I'm like, i've I've never I've never misheard a fart before. Have you ever thought you heard a fart? You're like, I thought I heard a fart. And then later you're like, it wasn't a fart at all. ah No, you're like, I'm very good at knowing the difference between a squeaky door and a fart, you know, like you can't fake me out. Anyway, so I heard, I hear Mia fart twice and I'm like, um'm I'm fart positive. I'm like, cool, fart away. We're outside, you know, it's not like you're suffocating me. ah No fart shaming, nothing. Anyway, but she's she's not even in fart denial. She's like, and she's just she doesn't even know she farted or whatever. I don't know. You know, it's like that South Park where all the old people are walking around and they're farting, but they don't know they're farting.
01:01:35
Speaker
or at least they act like they don't know they're farting but they anyway whatever okay so anyway so dude i heard mia fart twice while we're out hanging out and um i don't say anything about it i you know i did the first one i said something at least i thought i said something so then okay so now it's the first day of the conference hanging out with mia It's at the end of day one. She MC'd, she did a great job. I'm drinking ah ah of one of their tiny Heineken's they had. They had Heineken's. They were tiny. Anyway, it's a tiny, tiny Heineken. Tiny Heine. Oh, it's a tiny Heine. They should have had that on the bottle. Okay, so I'm drinking a tiny Heine. And I'm like, hey, hey Mia, I just want to let you know, it's cool if you want to fart around me. I heard those farts while we were walking. And she's like, ah what? I didn't fart while we were walking. And I'm like, hold on.
01:02:22
Speaker
You did. i did't yeah i heard i heard We were like alone in one of the alleys. You farted. She's like, Adam, I did ah did not fart and and around you. And I was like, i i was dude, I was ah stunned. I'm like, i heard i heard I heard ghost farts? What did I hear, David? David, I still don't know what I heard. I heard,
01:02:52
Speaker
Flappy farts man, and I'm like sitting there like now she's telling me she's totally being honest I believe her Mia. I believe you you did not fart next to me, but now I'm I'm lost in my in myself David. I'm like am I am I going crazy am I just being haunted by farts of past people in Amsterdam you know are these just like So that's my fart story is I thought I heard Mia fart. She apparently didn't fart. I called her out for farting. She said I didn't fart. ah And now I have to reconcile my own existence with, I hear farts, David. Do you know? It's my sixth sense.
01:03:34
Speaker
you're gonna have You're going to start a reputation where people are going to be like, Oh, there's Adam. Watch out. He, that guy, he hears farts and then he blames you for farting. Oh, it's actually me. It's it's actually, a it's a thing. Uh, no one farts, no one farts, but, but he swears by it and, and he will remind you for days that there was farting. Uh, so just get prepared as great as CSS though. Super great guy, but there's this is the thing with farting.
01:04:04
Speaker
He's the fart scapegoat king. He'll fart and blame it on someone else. Dude, that's so funny. That's another South Park episode. Maybe you're just hearing music because that's another South Park episode where one of the kids reaches a certain age and then all of a sudden- Yeah, all the pop music. Sounds like farts. Maybe that's it. Maybe you've gotten to an age where all the music sounds like farts. This music sounds like crap and he turns it on. He's like, yeah, dude, that's a good- Maybe that's your problem. That's a good South Park.
01:04:33
Speaker
maybe I don't know how else to end an episode other other than that. ah So CSS day, I, these are going to go out to YouTube over certain periods of time. I would love to whip together a fun intro for this with those videos or interspersed stuff. So I'm going to keep an eye out for that. But i I know that usually CSS day comes out to YouTube. So we'll try to drop links to those or any type of anticipation for it. I want to watch a ton of those talks. So.
01:05:03
Speaker
definitely check that out. We'll put people's bios and Twitters and websites and blogs in the descriptions because that's some super awesome stuff. and um and If Adam has any other like FART ah stories too, we will link directly to those ah because I have a feeling this is just the first of many times this is going to happen. I'm so happy that this might be my sixth sense.
01:05:27
Speaker
But like, I hear I hear farts. I'm going to go watch that movie The Sixth Sense and just like replace all of his ghost references with far references and just be like that me it me. Oh, my gosh. Well, ah thank you all for.
01:05:43
Speaker
listening to the Bad at CSS podcast and the Good at Farts podcast or Bad at Telling Farts podcast. um and If you made it this far, you definitely got a great fart story. so ah That is all for today and we're going to see you all in the next one.
01:05:58
Speaker
and at csu par