Introduction to Podcast and Guest
00:00:00
Speaker
Hi there, my friend and friends, and welcome to my podcast, General Musings. My name is Kevin, and this podcast is a place where I talk about whatever is front of mind for me in any given week, usually in some way that's related to front-end development, and often CSS more specifically.
00:00:15
Speaker
In the last few episodes, I've been mentioning that I'm going to start sprinkling in some interviews here every now and then, and today is the first of those as I recently had the pleasure to sit down and have a great discussion with Yuna Kravitz. Yuna is the Web UI DevRel lead at Google, co-host of the fantastic CSS podcast, and is an all-around wonderful person.
00:00:35
Speaker
Links to everything Yuna is up to and everything we discuss along the way are in the
Yuna's Journey into Web Development
00:00:40
Speaker
show notes. And speaking of the things that we discussed along the way, this discussion starts by talking about how Yuna got into web development. We go into the progression of CSS over the years, how new features go from being an idea to actually being implemented in the browser, and a whole bunch more. So without any further delay, let's jump right into it. First of all, thank you so much for coming and joining me today.
00:01:02
Speaker
Yeah, thank you for having me. I love your show. I love what you do for the web community. So thank you for everything that you do. Well, thank you. It means a lot coming from you. So thank you very much. One of the reasons I wanted to speak with you is because generally I like speaking with people who are passionate about CSS. And clearly you are based on all the teachings and talks and amazing things that you've been putting out there for quite some time.
00:01:27
Speaker
now. But one thing I think, and I could be wrong, so correct me if I'm wrong, but I believe your formal education isn't in front-end development. It was actually more on the design side of things. So I'm curious what brought you into the world of front-end development in the first place.
Passion for Web Development and CSS
00:01:41
Speaker
So funny enough, I actually did a double major, which was the best thing I could have done in computer science and graphic design. And I think the thing that really inspired me to do this was in high school, I took this course called Intermedia Design. It was sort of like a certificate class where I learned Photoshop, Illustrator, and then Flash.
00:02:02
Speaker
And the flash piece was so fun. It was ActionScript 2.0. I loved this mix of being able to create logic and code, but then also visually see things in the screen. So I was always really drawn to that, like that idea of doing some kind of digital design. So I thought that that would be the path that I went down like this, I don't know, digital design animation sort of path.
00:02:29
Speaker
And then my freshman year of college, I had an awesome adjunct professor for my graphic design classes who, this is also when like CSS3 was brand new. So it was like, you know, he didn't have all the answers and he would just say like, go to CSS tricks, there's a site and you know, you could probably get the answers from there. So he really, A, taught us how to learn and like how to teach ourselves, but B, introduced us to the world of meetups. So I was,
00:02:55
Speaker
going to these front-end meetups freshman year of college, and it blew my mind, opened my mind. I never heard of this term front-end development before, and there was the thing that mixed math and art, and it was a way to mix all of my interests, like logic and design.
00:03:18
Speaker
I feel very lucky that early on in my life and career, I've kind of found this path and went down. But yes, I feel like I started more in the design space and I definitely wouldn't call myself a designer anymore. Yeah. And I guess that's also, or I guess I don't know exactly, but I know you're very, everything I know you for is mostly CSS related. But when it comes to front end development, is that sort of where you find yourself in that space most?
00:03:46
Speaker
Yeah. I mean, um, I, before I started working as a dev rel at Google, I was doing front end development, uh, UI engineering was the title that I used. Um, so it was, yeah, it was definitely that like building things and the front end was really where it shined. Like I, I could use graph QL and like hook into it and you know, I could build those applications, but what I love to do is make things feel more polished and make them feel usable. The front end is like.
00:04:15
Speaker
the powerhouse of the application, right? That's like the differentiator. So that really drew me. Nice, yeah. I have a design background too, and I know for me when I started getting more into CSS or web stuff in general, like CSS just felt like the right fit there just because it still had sort of that side, but it was sort of the puzzle of building it. So I totally get what you're saying there. One thing I'd be interested in, and maybe different personalities and different people are a bit different,
00:04:45
Speaker
I know for me, when I get into things really deeply, I'm very good at then finding something else to get distracted by. I'm just curious, obviously you're very passionate about front-end development still, but as you said, it's been quite a while, you've been doing it for now. And I'm just curious why you think that you're still so interested and so passionate in it.
00:05:05
Speaker
Oh my God, that's such a big space. There's so much you can do. This is why I love helping people who don't know what they want to do yet in life, kind of help them realize that programming opens so many doors and it's not just, you know, opening opportunities for jobs. It's anything you're interested in, whether it's fashion or music or art or, I don't know, gardening, like you could build a project using web code that relates to those things. And web development, I feel like JavaScript sort of ate the world, but like web in general,
00:05:35
Speaker
where you could build robots with it, you could build any application with it, not just for mobile or desktop, but anything. So I think for me, I've always found something that's interesting in it. And now in my current role, I do less creating of things day to day. I build prototypes here and there, but now I'm actually working on the web platform itself, which has been my dream.
00:06:00
Speaker
actually being able to influence what our engineers are working on and what we're missing and helping create for the platform. So it feels like a whole different level of creating because it's a way more high level type of thing. But the space is so big and it's so exciting. And it's such a blessing to be able to have this skill set and kind of be able to go so many places
Roles and Evolution in Front-end Development
00:06:22
Speaker
with it. I don't think there are that many fields that are so diverse in what you can do.
00:06:26
Speaker
whenever somebody is, even saying the term front-end development these days, I feel like you need to be more specific. That could mean so many different things. There's like performance engineer. There's now like design engineer. I've been hearing that term a lot more, which is probably where I would have fit myself in the type of work I've been doing. There's like accessibility as a whole specialty in its own. There's also like middle of the front-end or back of the front-end, which is like connecting your database to your front-end and like applications developers. Even if you call yourself full stack, a lot of it is front-end.
00:06:56
Speaker
Yeah. Whenever somebody now is asking me about what do I learn? Once you get past a certain point, it's like trying to find what interests you and it's going to change over time. You're probably going to end up doing something different in six months than what you're expecting. It moves so fast, which is also a reason that I have stayed interested in it because I have ADD. I get bored very easily.
00:07:24
Speaker
There's always something new to try out, especially in the world of Web UI and CSS. It's been evolving so fast. It's been very, very exciting. Yeah, a little bit to what you were saying about before with CSS3. I remember I was in school at the time, too, and that was sort of when I started. I did Web sites from like high school when it was Photoshop slicing up and stuff. Same.
00:07:47
Speaker
Yeah. And then I remember, and it would sort of, I'd sort of randomly come back into it and be like, oh, it's the same thing still. Nothing's really changed. And then CSS3, one time I went and I was reading some blog posts and it's like, oh, I don't have to slice stuff for rounded corners now. It's really exciting. And there's box shadows and all of those things. And
00:08:04
Speaker
I remember it seemed like there was so much that was new. The typography, the animation, it was mind-blowing. The number of changes that landed all at once in CSS. I feel like we're having a similar renaissance now, but learning how to code in a more professional way than I had in high school during the time that CSS3 was landing was so exciting. It was just like, oh!
00:08:29
Speaker
Yeah, yeah, it was exactly. Yeah. But it's kind of funny looking back at it now, though, because it seemed so just revolutionary at the time. But if I look at the last couple of years now, all those old features like it's like, oh, you know, I could do rounded corners, then it's like all these new things that are coming now. You know, it's a bit mind blowing and a bit crazy, all the things that are happening. And you get to be part of that and helping it happen.
00:08:57
Speaker
And that's my dream right now is in 10 years, we could look back at this time and be like, Oh my God, remember when we couldn't, you know, anchor things in CSS? We had to have all of this JavaScript and these JavaScript libraries just to anchor things. Remember when we couldn't style dropdowns? Like remember when we, remember when we had to use media queries for components and it didn't make any sense and we had to have our base style separate from our component styles. When you had the overlap that yeah, we're getting a lot better, I think is a platform. I think so. Yeah.
00:09:27
Speaker
Uh, and it's, yeah, it's, I see that cause even now when I look at like people who are getting into it now, I'm already so jealous cause they're just like flex boxing greater just things. You can make a layout with there's layout tools and we're of the generation that can look back and go, remember when we didn't have layout tools? Image mapping. But it was cool back then. It's still cool. Yeah.
00:09:53
Speaker
There's better ways. Yes, exactly. Because you do have a bit of a behind the scenes on sort of what's going on from working on the Chrome team, I'm just curious if you have any insight on why say the past, I don't know if it's two or three years or whatever it is, but it seems like we went through, we had the CSS3 explosion and then we had this really long lull. And then we had a lot of that seemed to be improving Flexbox to actually make it work properly in all the browsers.
00:10:23
Speaker
And then grid happened and it's like, oh, all the browsers can ship a feature basically at the same time and it works and we can, you know, it's there. But then there was another lull a little bit after that. And now it just seems to be like this nonstop pace. And I'm just curious if you have any insight onto maybe why things are going so quickly now.
CSS Feature Support and Challenges
00:10:40
Speaker
So there's a couple of reasons and a couple of things that happened around the same time. The first one is that there has been a lot of work on browser architecture, like underlying engine architecture. I know the Chrome side of it, I know the other browsers have also done a lot of work around this. The project was called Rendering NG, and it was happening over a series of eight years while we were all using Chrome, sort of under the hood.
00:11:01
Speaker
And it was a lot of changes that happened that enabled some of these features like containment to happen, to exist, to land, which then enabled container queries and these problems that we didn't know how to solve before. So that was one thing. It's just the underlying technology has improved and made things that used to be really slow and challenging performance-wise for browsers to get better and more performant faster and possible.
00:11:28
Speaker
The second thing is at that time, at least on the Chrome side, which is the perspective that I have, they were more focused on these low-level APIs, the Houdini APIs, that sort of came after Grid, where the hypothesis was if we build these low-level primitives, then developers will build these libraries on top of them that can then be consumed and used. So we have the typed object model and the paint
00:11:53
Speaker
API and a bunch of features that were a lot more low level so that you could have somebody build on top of and then use that, like inject it. And that was JavaScript developers designing for CSS.
00:12:10
Speaker
So a big change that happened at Chrome, honestly, was just getting the engineering team to realize and care about UI from a CSS perspective. I saw a huge change, like joining the team, working with the engineering team, Adam Argyle is on the team on our side, creating this sort of organization internally to help
00:12:36
Speaker
break down what's missing, like the gaps in the platform and how those should be resolved in a way that makes sense for the developers who are using them. And that was like a big piece of work, right? So shifting this idea from low-level primitives to higher-level features.
00:12:55
Speaker
Um, at the same time, it wasn't just happening at Chrome, like Apple hired Jen Simmons. So now we have CSS people working at Google, at Apple. Um, Emilio and the Firefox site has done a ton of work in this space, implemented a lot of the features, and it was a sort of shift.
00:13:10
Speaker
in mentality, in what's important, in where the features should live, so making these powerful features that people can create in theory with JavaScript, but making it browser handled, making it easier to implement. There's so many benefits, performance, etc. on that side of things. Seeing that loop
00:13:28
Speaker
Once we started landing these things that developers were excited about them, writing blog posts about how they're using them, that is really important, that feedback cycle, which helped us to continue the program. Then we started to build up.
00:13:44
Speaker
this sort of vision for the web platform. Nicole Sullivan was the product manager at the time, where we were then starting to grow as an effort. So this has never happened before, like at Chrome at least, combining all these teams to focus on web UI. At the same time, I'm saying there's a lot of things happening at the same time, this effort of Interop was springing up.
00:14:10
Speaker
Once this was going, now, Interop was happening, where a lot of the Interop features were all CSS and UI features. And I was able to be involved early on in those conversations to help prioritize some of the Interop work. And so that was really a big part of it, too, where it doesn't matter if Chrome lands something. It doesn't matter if it refers to market. Who cares? What matters is, does it work in the three major browser engines, WebKit, Chromium, and Gecko, so for Firefox?
00:14:37
Speaker
So those things all combined where it was better capabilities from the browser side things. An actual team that cared about CSS working closely with engineers at many of these browser engines. I think specifically it was a big change at Chrome and Apple. And the changes with the Interop program and
00:14:57
Speaker
sort of making it a goal, a shared goal to land these features, those all gave a lot of initiative and sort of push in this area. And then seeing specs actually land is very, very, very exciting. So yeah, lots of things, but I think we're in a good place now to get it done, you know.
00:15:19
Speaker
Actually, that was one of the things I remember I was a little bit worried about when there was the spec of a lot of these things started coming up before they were being implemented. I was a little bit worried because there were all these different things you're hearing chatter about and people putting up proposals for. And I'm just like, I hope it's not this scattering of browsers because I think I got scarred by subgrid landing in Firefox and then nowhere else.
00:15:44
Speaker
And I know like Apple's always sort of, it sort of had its own thing going on with some of the design related or typography things specifically in the color stuff. They were sort of first four and then no one else really followed with that for a while. So I was like. Yeah. That happened with Houdini and Chrome. Yes, exactly. Yeah.
00:16:00
Speaker
It's really important to get consensus. I think that there is a shift in how we work now where we are prioritizing things that are based on consensus much of the time. When we do land things in browsers early, like a prototype, it's to test the feature and see if it's possible. But ultimately, the goal is to show how it can be done and then get other browsers to fast follow and also add that feature set. So that's always the goal. It's never just, oh,
00:16:31
Speaker
We landed it. It's not about that at all. It's about landing in the platform. That's when it really counts. Yeah, and it's good. I mean, it's definitely happening where we're seeing a lot more. You look at the kind of use tables and sort of the difference in when things are shipping. It's always like, oh, that's so cool that all of a sudden this is everywhere. It's fun to see that. There's still definitely differences and priorities with browsers that I see. I think Apple's been first to a lot of color stuff that's been
00:16:58
Speaker
They have their hardware that they really care about. I think we've been really focused on components recently with Open UI and getting components landed. There's different things that are happening. It's good to see all of these browsers working together, but then also taking on points for different areas because it helps things land faster and help that discussion move along. Ashur along.
00:17:24
Speaker
Yeah. I guess one of the issues with so many new things coming up, and I don't know if it's an issue or not, let's see if you think it is or not, but one of the things I've always liked about CSS is how easy it is to get started with, especially I used to teach in the classroom and obviously I teach it online still. If someone's never touched any computer programming or anything like that before, the syntax is really easy and just they can get into it really quickly and start making stuff happen.
00:17:52
Speaker
And one thing I see in my Discord server and talking to beginners is sometimes it seems like there's so much to learn, whereas I think there was always difficulties. But back in the day when it was, say, float-based layouts or whatever, maybe just after Flexbox came out, there was a bit less scope in everything. So I'm just wondering if you think it's actually harder to, say, quote-unquote, be good at CSS these days than maybe it was previously.
00:18:20
Speaker
I think it's a misconception that is harder now. I think it's different now. So for example, you mentioned float. You don't need to learn float until you want to create a layout in which you have text or something next to an image, like a newspaper layout. So you're using float for the thing that you need it for. You have more tools now. So in the past, you'd have to learn more hacks to be able to accomplish the same things. You're still learning stuff. It's just in a more roundabout way, right?
00:18:49
Speaker
And another thing that I tell people, because this is something that I'm also concerned with. I don't want people to get overwhelmed by the amount of features that are landing. You don't have to use everything. If it doesn't make sense for you and your use case, you don't need to use it. I think there's some fundamental things that developers should know about and should use. And then for the rest, look it up. Find a tutorial. See what the solutions are out there. The solutions are now a lot more simple than they were for most
00:19:17
Speaker
things. I think it's just there's more of them. There's more ways to do things. Yeah, I do get sometimes I'll post certain things. I did some some stuff on CSS units a while back and people were using I think I based it was I think after Adam had tweeted about the new units that had been added. So we're up to 54 length units, I think it was.
00:19:42
Speaker
And so I was sort of going through them and there were some comments from people being like, this is how you know CSS is like a bad language or something. And I'm like, no, I think it shows that it's a mature language because we're coming up with more solutions to like these niche problems. And you know, you don't have to learn all of these units, but you're going to be really happy when that unit exists in that one situation where you need it.
Developing and Implementing CSS Features
00:20:02
Speaker
Yeah, I think what is challenging now too is with some of the modern stuff, I always try to make it really clear what the browser availability is because I hate giving a talk and getting people excited and at the end be like, this is only available in one browser. So that's challenging too. I hope that's not going to be such a problem in five years or even less, but that's something to kind of keep in mind with the units.
00:20:30
Speaker
When you phrase it that way, like there's 54 different units. Sure. That sounds complicated, but like they're like centimeters and inches. Like you're not going to need to know that for web development unless you're doing print stuff and you're going to want to know it. So it really just depends on your use cases and needs.
00:20:47
Speaker
Yeah. It's like you said, like with anchor coming now, it's another thing to learn, but we're going to be really happy that we have it. We're going to be so happy that you have it because now if you want to do anchoring, you have to learn a library or if you have to build it by scratch, and that's a lot more work. That's a lot more to learn than just using native anchoring. I've been very deep in anchoring lately, so I'm just like, that's where my head is right now.
00:21:13
Speaker
Yeah, that's one thing I've actually just saying before about browser support. It's one of those things where I've sort of had to hold back on some of the things I want to make videos on just because I'm like, I don't want to put this out and it's like only behind a flag somewhere or whatever. And so I've actually held back on diving. I played with it a little bit, but I haven't done much with it yet.
00:21:33
Speaker
Yeah, that one has actively been shifting in the past few weeks. In the last three weeks, there was three breakout working group meetings just to resolve a couple of spec issues to get V1 wrapped up for anchoring. It's a really exciting API, but I think it'll be more to talk about and finalize when it is actually going to ship in a stable browser, which is soon, hopefully.
00:21:59
Speaker
Speaking of the maturation of CSS, as we've sort of alluded to, you've been a part of it. I know you were talking about anchoring. You've also, I think, been involved with select list as well. It makes me really curious what the process is like working on something that hasn't been implemented in a browser yet. Very slow. So the process is as follows. Identify a problem, right?
00:22:25
Speaker
Then write an explainer on some ideas and how to solve it. Then bring it to a working group or some other standards body to try to figure out a solution. So those become specs or specifications. I know that I've been saying the word spec. It's a specification that has basically how this feature should work in browsers. And if you want to go read the specs, I read the specs. They're a little harder to read than a blog post.
00:22:55
Speaker
The newer ones are better than some of the old ones. Yeah. I mean, there's some awesome spec writers on those teams. Specifically, what's interesting about things like Popover, Anchor, and Select are that there's so much overlap with
00:23:11
Speaker
HTML and CSS that there's a community group, a separate community group called Open UI that's been doing a lot of the incubation of ideas, which then get graduated to the CSS working group for CSS things or the what working group for HTML things. And so, you know, you have a lot of discussion.
00:23:31
Speaker
You write this back, you open issues. For us, on the DevRel team, we do a lot of actually playing with the prototype, so building samples, finding edge cases, identifying bugs, figuring out what else is missing. Does it actually solve user needs? Does it work as intended? And so that often leads to additional open issues and discussion. With Anchor specifically, there's a lot of
00:23:55
Speaker
things that have evolved in the process of that spec maturing. And even now, I feel like there's a bunch of open issues for anchor stuff that's moving into the next version of the spec, because it's like, how do we solve that right now? We don't know. So I guess that's the process. And then when you get the spec resolved on, then it graduates. It's a whole graduation process.
00:24:23
Speaker
Prototyping slash implementing into stable. So if it's before the spec is sort of finalized is usually a prototype. So it's in, you know, in Chrome, it would be Canary or tech preview in Safari or nightly for Firefox, but then
00:24:39
Speaker
Once we feel confident about it, we'll branch it into the whatever branch it's going to for Chromium, whatever. And then it's available to developers. And we hope that other browsers will also implement it and then everyone will kumbaya enjoy.
00:24:59
Speaker
Makes me wonder just because obviously early on things are behind a flag, which from what I understand was learning from the mistake of prefixing things in a way of saying don't use this yet. So it makes it harder to get to a little bit. But with that, obviously when there's the prototyping and everything else going on, you're also seeing does it work the way it's supposed to? Are there other bugs and stuff?
00:25:20
Speaker
If there's features people see coming up behind a flag, do you encourage people to play with it to see? Or do people give feedback? Is that a good thing? Yes, that's a great thing. Please, please use it. I very much encourage it. I think it's hard to get people to do it because people are working.
00:25:39
Speaker
Yeah, I always love people to be exploring the prototypes, making their own demos, because that's the opportune moment to make change to the feature too. That feedback is super, super valuable. Also, if you or someone listening is interested in working on these features, specifically, Open UI is a community group. It's not a working group, so you don't need to be invited by an organization, you could be a community member.
00:26:06
Speaker
It's a little bit easier to join than more like a standards body. And you can join the conversations and sometimes they're kind of boring, but I think that they're interesting. And, you know, discussing real issues and real cases and things I need to resolve to be able to specify it properly and then ship it.
00:26:26
Speaker
I think Open UI I first learned about because of the select list and that I sort of started following some of the conversations just around it. And you start realizing sort of why sometimes things are more complicated than you assume when it's just like, well, just make it styleable. Go. And it's like, oh, there's more to it than that. Yeah. Anchor is particularly extremely complicated. So a select, yeah.
00:26:50
Speaker
And there's so much that's involved in it that you wouldn't even think about. Like, what happens to the anchor when you have it inside of a scroller and it scrolls out of view? Does it stay visible? Does it hide? Like, what is the point at which you hide it? Like, how do you animate the position sets? If you have something like a tether, which is a feature for that little arrow, you know, that's moving into V2. But then how do you animate that when you animate the position sets from left to right?
00:27:18
Speaker
You know, what if you have a border around it? How do you customize that? There's just so many open questions that kind of build on each other. And Anchor specifically overlaps so many things, rendering, layout, like there's also, it's overlap with Popover, because that's a pretty common use case. So, you know, there's interesting interactions there. Anyway, that you can, you can anchor multiple things. There's a lot of neat features and open questions.
00:27:46
Speaker
So obviously, these are all sort of the future of what's coming. And hopefully, we don't have to wait too long. But there is a bit of a ways to go. But as I'd sort of mentioned before, we had Grid that came out. And then since Grid, we've sort of had a lot of other new stuff. We have container queries and has. And I'm never going to name everything because we'd be here all day. I'm curious, since, say, around when Grid came out,
00:28:12
Speaker
But it doesn't have to be like this big game changing feature. It could be something really small, but just like if you have a favorite thing that sort of has popped up in the last year or two, you can't pick one thing. That's cool. But is there any features that you're using all the time that you're just so happy to have? There's a lot. OK, I would say.
00:28:31
Speaker
Container queries is the first one that pops to my mind because it's just been one of the things that developers have been asking for for so long that we didn't know if we could even implement it. I remember when I joined Google, I was talking to like Tab Atkins and Adam Argyle about this, but you know.
00:28:46
Speaker
container queries, and it just was one of those things that's just not possible in the way that the browser engines worked, but then Table was like, but actually there are some changes that are coming. So it's just been so cool to see that whole life cycle and the feature is really useful. The has selector is probably even more useful than container queries because
00:29:07
Speaker
It lets you do so much. It's so flexible. It really was such a big missing feature from the platform. So I'm really excited to see that one land. Those are the two that kind of immediately popped to mind. And Popover, because Popover enables so much built-in interaction in the browser, like the light dismiss capabilities, like the ability to be on the top layer.
00:29:34
Speaker
there's just the declarative nature of creating something like that without having to add additional scripting. And speaking of that, like, scroll-driven animations are really, really cool. And you could do so much. It's not just like full-page scroll-y telling, like inside of components, too. That was four features. That's okay.
00:29:52
Speaker
Yeah, I've been playing around with the scroll driven animation so much because I'm like, this is just wonderful. And I did I've made a few videos. I did like a deep dive into how it works. And then the other day I was on the MDM page because I forgot some stupid thing with the syntax or whatever. And then.
00:30:07
Speaker
I'm like, I completely overlooked that I can link another element to the scrolling of. Yeah, yeah. And I was like, how did I not like I like I've been I researched this for like days making these videos and I completely overlooked that I can make one element that's not in that container linked to the scrolling of that container. I'm like, this is so cool. It goes deep. Like these are the kinds of things that pop up in spec discussions. Like the ability to do that, you know, if that's a use case that's identified so.
00:30:36
Speaker
Another thing that, you know, in a bit of a different way, because those are all still relatively new. And they actually, when you were talking there, it made me think of something because you'd mentioned container queries first. And I'm 90% sure I saw you tweet this where it was a poll asking why people aren't using them. Yeah, that was, yeah. And like, was it like 50% of people were like container what? Yeah, it was almost 40% of people that were like,
00:31:05
Speaker
Which surprised me mainly because it was my Twitter audience. And so I'm thinking the majority of developers who aren't focused on CSS and UI already don't know what they are, which is actually a big part of the
00:31:22
Speaker
The strategy, if you would call it, of what I've been trying to do this year for outreach is trying to speak at conferences that are like React conferences, communities that aren't already following along with the stuff that's happening in the UI space. Because I think that these features help them do their jobs so much better. Even with Popover and Dialog, you don't really need React portals anymore. With all the anchor stuff, you'd be able to just eliminate so much code
00:31:50
Speaker
and dependencies. And with things like container queries, I was speaking at a conference two weeks ago. That was a RAT conference. And somebody came up to me and he was like, I didn't know that was a thing. And I still have to remind myself that people don't follow along with things that are landed, even if it was two and a half years ago. And it is a huge change in the ecosystem. We have to keep talking about this stuff.
00:32:14
Speaker
Yeah, it's like you said, like even someone replied because I think I quoted you on Twitter about how I was surprised by the results and people were just this person said something. Well, you know, not everyone's as entrenched as you are into CSS, which I totally get. But I was like, this is you and his audience like she's following her. They must like CSS. So like that really surprised me on that front and just shows, I guess, how much more education needs to be done about these things, especially with something like container queries that
00:32:40
Speaker
A, people wanted forever and I thought had a lot of hype around it when it came out and it's been around for a while now and browser support's actually pretty good, so. Right.
Adoption of New CSS Features and Education
00:32:49
Speaker
Yeah. Although a lot of the replies were saying that 91% global browser support wasn't good and they needed 98. Was that you that said you wanted 98%?
00:32:57
Speaker
I didn't say 98, but I did say more. Yeah. The problem is the holdback truly is hand-me-down devices, specifically iPads, where those are browser version locked because they're iOS version locked. And it's mostly children on those devices. But if you're BBC, you need to support everything. And that is, I think, a big holdback for the ecosystem. Although I do think a big problem, too,
00:33:25
Speaker
CTO's just aren't revisiting their browser support matrix. I don't think that they have in many years. I got burned a while back when I started using Gap and Flexbox for a site that I did. And I started getting comments about how the layout wasn't working properly or something, whatever, because there was no spacing on stuff. And I was just like, I wasn't looking, I just assumed my audience was sort of on more up to date browsers. And I'm like, oh, there's
00:33:53
Speaker
There's still enough people here that I'm hearing it, so I've sort of been a little bit careful, but I'm also the type that will gladly use something if I can use it as a progressive enhancement. Like I'm just using scroll-based animations everywhere now, because I'm like, oh, I can do it, and it's good enough. Yes. That's sort of like the MO when I talk about these features. I like the progressive enhancement angle. So something like view transitions is really easy to progressively enhance. You know, scroll-driven animations. Container queries are not easy to progressively enhance.
00:34:21
Speaker
Those are not a good example. Even the HD color functions, you can progressively enhance with those. So I definitely encourage that angle of it. With things like the components work, like even Popover, I know GitHub is using it with a polyfill. So there's also that avenue that you can take and reduce a lot of complexity in the meantime.
00:34:46
Speaker
Yeah, when it's possible to progressively enhance is definitely the way to go. But yeah, turning things back a little bit. I was recently, you mentioned Adam before, and I was having a bit of a conversation about him, about how he was surprised in sometimes when he's doing demos and stuff, it'd be about one of these new fancy features.
00:35:07
Speaker
But there'll be something else that is just in the code because it works and he sort of passes over it and people are like, oh, I wish I knew about that, even though it's maybe like four years old or older. And we just take it for granted being people that are so entrenched in CSS.
00:35:22
Speaker
Um, and I definitely get that on my videos too, where I'll just pass through some stuff and like more people are commenting on that than whatever the focus on my video was. So I'm wondering if there's any additions or things that you've seen that have actually been out for a long time that other people just don't seem to know about that you, or you're surprised when you realize more people don't know about them. Oh, there was just one, I guess I was at this event and I was like kind of building something really quickly.
00:35:47
Speaker
I forgot what it was though, but it was something that was so unrelated to like the cool thing. And you're like, wait, what is that? I can't think of anything off top of my head, but that definitely happens where it'll be something as straightforward as like a viewport unit or something. Yeah. I still get it a lot with like object fit. Yeah, that one's been out for a long time, but that's a really good one to know.
00:36:12
Speaker
Yeah, it's just like, yeah, we've had this for a long time now. You can safely use it. Maybe it was backdrop filter, like backdrop filter blur, which is, I remember when that wasn't possible. And so that one feels relatively new to me. New with an object fit.
00:36:29
Speaker
So on your personal website, you have a list of all the talks you've done. And the early ones were over 10 years ago now, which is kind of. Wow, call me out. I'm sorry. That's so old. And I wouldn't mind talking about that a bit more. But before we get to that, one thing I did notice when I was looking at your earlier talks was that a lot of the development-related ones were related or about SaaS.
00:36:55
Speaker
And I'm curious if you still use it at all, if you've completely dropped it, sort of where you're at with SaaS. I love SaaS for the community that it is. And it was a big part of what helped me integrate into the web development space, just like that community. It was one of the first events I went to. Some of the people that I know from the CSS space all came from the SaaS community.
00:37:19
Speaker
but I haven't used it in a long time. I think it's been a couple of years since I've actually used it and I think it's because I mostly get everything I need from like a mix of Post CSS and just native CSS now. A lot of the features that I think people also relied on SaaS for are patterns that are important to have in this language and so they're being
00:37:45
Speaker
added to the language as critical features. But yeah, I think it's good to have if you rely on it. If you're using mixins or functions right now, you can't do that in CSS yet, but it's being worked on.
00:38:03
Speaker
But I haven't needed it for my personal projects. And that being said, I've worked in DevRel for five years. So that's five years I haven't been working on large scale enterprise projects since a different need.
00:38:17
Speaker
Right. Yeah. I'm curious though, because like you said, we have features from SaaS and the preprocessors in general that are making their way into the core language. Nesting is the big one that's recently got their color mix. We've had custom properties for a long time now. And I think most of those, if not all of them, people will sort of see actually before I was going to say most of them, people will see as a net benefit.
00:38:43
Speaker
I'm curious if you've heard of any pushback on nesting, just because I know that for a while there was this, maybe it was a small but vocal camp, but there was always this camp of people that didn't like nesting because they said it wasn't, you know, I guess it's different if it's native because part of the argument was if you were doing like the BEM style where it was harder to find the selector where we don't do that, plus you'd see your selector in the browser is the same as the one.
00:39:09
Speaker
So maybe it's not an issue there. But yeah, I guess the features we've seen so far, I think, are all ones that people can get behind. But I'm wondering if you think that there's sort of, you know, do we need some of the more advanced stuff? Do we need loops? Do we need things like custom functions? I know there's the proposal for mix-ins now. You know, is there a point where it's like, no, that's okay that it lives in a third-party tool? Or do you think it's important to bring these over to the core language?
00:39:37
Speaker
I think it depends, but I am of the opinion that it should, if it's so important, why isn't it a part of the core language? So with nesting, that one is interesting because it highlights the differences between a preprocessor like SAS and what it can do.
00:39:53
Speaker
and what the browser engine itself can do. So with the preprocessor of SAS, when you would have that BEM style nesting where you're concatenating strings, you clearly are having some sort of preprocessing where it becomes the class that you're then using.
00:40:08
Speaker
That's also, if you look at custom properties or variables in SAS versus CSS, they behave very differently, where in SAS, they're static, they're string-based, where you're setting some value to another value, and you're essentially replacing that value.
00:40:24
Speaker
in CSS, they're dynamic. And even now with that property, you can give them a lot more information to do with what you will. So they work very differently. Same thing with nesting, where you can't convert one-to-one the SAS nesting, if you're doing string concatenation, to CSS. But you can also do other things, like you can do
00:40:47
Speaker
What I really like about nesting is doing the at container inside of the nesting. Because previously, due to specificity, you usually at the bottom of your CSS file have all of your media queries or container queries. Now you can nest it, and the browser will separate it for you. So I think that's nice. It's just a little different. So knowing that,
00:41:12
Speaker
Yeah, you can't do that, unfortunately. But you could still use nesting for all your modifiers, for all your variants and things. And what are the other ones? Mixins and functions. I do want the ability to iterate, to have iterators and loops, specifically with animations. I want the ability to have
00:41:33
Speaker
the, like, counter, like, you know, specific, like, which child is this? Like, the sibling count or sibling index. So you could have, like, staggered animations without having to use JavaScript. And that's something I remember really enjoying from SaaS, is I would be able to create, like, loops over, say, a menu of, like, list items and style them with, like, a color mix that would change the color subtly without having to manually do that.
00:42:03
Speaker
In theory, I think, yes, it should be a part of the core platform. I don't think that there's any reason it shouldn't be, other than it's not implemented yet. But it is being worked on, so.
00:42:20
Speaker
Cool, yeah. No, I agree. I think animations, loops in animations go so well together. It's one of those things where if you're not, you know, if I'm doing a demo or something, then I just have like a regular code pen open or something, and then I have to start doing all my end to children manually, I'm like, oh, this is... Yes, so frustrating. And another thing is like with Vue transitions, like all the Vue transition names, although they're shipping Vue transition classes, so you don't have to do that anymore. Thank God.
Yuna's Public Speaking and Community Engagement
00:42:47
Speaker
I get so tired of doing that.
00:42:50
Speaker
Yeah. Cool. Changing gears a little bit more now. One thing I know for me, people know me for teaching CSS online, but I sort of accidentally got into teaching just through I was doing other stuff. A teacher at my old school invited me to or said I should apply. So I did because I needed a more stable job at the time. And I sort of made the transition without planning it all out.
00:43:19
Speaker
Maybe I'm wrong in my own perceptions of how you've got to hear, but it seems to me that just based on how early you started doing public speaking and your talks at conferences, on top of that, you have the CSS podcast with Adam. You've done other stuff. You're designing in the browser on YouTube. You have your blog posts, everything else. It seems like you've been teaching in one form or another for a long time now, so I'm just curious.
00:43:43
Speaker
You mentioned how development is a passion of yours, but it feels like teaching and helping enable others also is, and I'm just curious how you got into doing all of that.
00:43:53
Speaker
Yeah, I mean, definitely. It's awesome to be able to see people get it and then use it. I think for me, I sort of fell into it where I really love the developer community. And being a part of that when I was still in university was, I feel very lucky that it was able to discover that so early on. And I started, I think my first conference talk, I was like 19 actually.
00:44:22
Speaker
I just decided I'm going to speak at this Ruby conference about internationalization.
00:44:28
Speaker
But I started speaking because I started a meetup for SAS, like a SAS meetup group in DC. And we just ran out of speakers one week. And I was like, OK, I'll do a talk about architecture. And I enjoyed it. And then I started doing workshops, like SAS workshops, and teaching people how to code and build things in SAS and do custom theming and stuff. And then I realized that I could get
00:44:55
Speaker
you know, free flights to travel if I did more of that. So I started doing conference talks. The first year I applied to this big conference is like I just didn't expect to get accepted to any. And then I did get accepted to a few. And I was like, whoa, this is so cool. I got flown out to Australia to give a talk about designing in open source. Like it was so cool. And then I spent most of my 20s doing that.
00:45:24
Speaker
on the side. So I would like spend weekends in coffee shops, writing talks and then traveling. It was really fun. So that's sort of how I felt into it. It wasn't like an active decision of I want to teach. I think I've always enjoyed it. Like I also was like a TA for the graphic design class I was in. I would always run review sessions for the computer science like classes I was in. But I never actively made a decision to teach.
00:45:51
Speaker
Well, you're very good at it. You are too, Kevin. I think you're one of the best out there, so thank you.
00:46:00
Speaker
Obviously, you were enjoying the travel and all of that. It was a nice perk that you had. I just did my first conference talk this year, actually. And you're going to be at CSS Day, too. Yeah, I'm going to be at CSS Day. I have a few coming now that I'm looking forward to, but I'm also nervous because it's going to be a big change in scene.
00:46:21
Speaker
It's so funny because I get nervous doing any like virtual events. There's no feedback. There's no audience feedback. I don't know how I'm doing. Whereas for you, you're so used to probably doing that.
00:46:32
Speaker
Yeah, I'm used to just staring down the barrel of my camera and talking to like the virtual world. So it's the idea. I mean, I did, as I said, I did teach in the classroom. So if I have like a small group of 30 people, it's not so bad. But I guess for CSS day, the two things are, first of all, obviously it's a bigger stage. But then it's also like around all the people that I've learned everything from. So it's also like, you know, that's intimidating at the same time.
00:46:58
Speaker
But I'm also very much looking forward to it. I think it's a lot harder to do small groups than large groups because you could see everyone's faces staring at you when it's like a group of like 15 people versus 500, whatever. I can't see anyone in the back.
00:47:12
Speaker
If they're zoning out and there's only 15, you know it. Right, exactly. Yeah. I am curious though, because when I was at the conference, it was called that conference, and talking to people there, the other speakers, a lot of them had talked about how doing conferences help their careers out. Some of them had completely changed careers. Others, it was like a stepping stone and opened some new doors and stuff. I'm just curious for you beyond the travel benefits if it had an impact on your career.
00:47:39
Speaker
Oh, for sure. I think that being involved in the community, not just conferences, was huge for my career. All of the opportunities that I think I've had in my career have come out of the community. The first was an internship where I saw somebody speaking at this meetup.
00:47:56
Speaker
And I was like, wow, they're doing really cool work. I want to work with them. So I went up to them, and I was like, what can I do to intern for you? And essentially, that's how I got that internship. That's how I got a lot of my experience, too, and found mentors early on in my career. And then with the conference speaking, I think it's helped me to learn a ton just from being at the event, from other speakers, from other attendees.
00:48:20
Speaker
I've done a bunch of side projects with people that I've met too at conferences. Like at one time I was really into web VR and did this like a web VR project with someone that I like met from a conference. I think it's not just the speaking, it's not just like the, you know,
00:48:38
Speaker
having done a talk, it's the people that you meet who are doing interesting things who you can connect with. That's what I think has really helped my career. And I don't think we give enough credit to that. But I would definitely recommend doing if you don't want to speak, you know, that's one thing, but like being part of your community, whether it's local or virtual, I know a lot of people who've gotten jobs like from open source, like being involved in open source to highly recommend
00:49:07
Speaker
Yeah, that was the one thing. I mean, it's one of the reasons I wanted to start speaking was just to I'm always speaking to my camera and like getting to know people within the space more and meeting people with that. And when I did the first talk, that was sort of like it wasn't even meeting people within the space necessarily because it was much more of a generic general audience. So a lot of people didn't even know me, which was great. And yeah,
00:49:35
Speaker
But it was just making those connections. And, you know, I made new friends just by being there. And I think like I think a lot of people who don't attend things and it doesn't have to, you know, conferences, I think it's great if you can make it to them. But I know they can be prohibitively expensive for some people if you can't get your job to pay for it. But like local meetups and anything like that, I think just meeting people within the space, I think people who haven't done it don't realize the impact that it can have.
00:50:01
Speaker
Yes. I think we undervalue or underrate the impact of community and networking.
Exploring Creative Hobbies
00:50:11
Speaker
We're all just humans and we're building stuff for other humans with other humans. I don't know, Devin, this AI bot might take over at some point, but we're not there yet.
00:50:23
Speaker
Yeah. And change gears one more time, just because I'm the type of person I sort of alluded to before. I'll pick things up, new things a lot. And so I like having random hobbies. And I've read that last year you got into sewing.
00:50:38
Speaker
And so I'm really curious, you know, why, and not in a negative way, why sewing, but sort of just like, you know, cause I don't, as I said, I have very random hobbies that people would be like, well, how would you want to do that? So I'm just curious how you decided to pick up sewing amongst, you know, anything else that you could have done.
00:50:55
Speaker
Oh, honestly, so many reasons, but the main one is I always wanted to be a fashion designer when I was growing up. I could not afford a sewing machine. My parents could not afford a sewing machine growing up. Now that I work in tech, I can afford a sewing machine. I was like, you know what? I'm in my 30s now. I'm going to buy myself a sewing machine.
00:51:15
Speaker
my birthday I'm gonna learn how to do it and it was so much fun to just like build stuff it's very technical too like there's a variance in the type of fabric that you're using the type of needles thread like the thread weight the thread like distance the types of stitches I feel like there's a lot of corollaries between
00:51:35
Speaker
programming, like creating something using some kind of technical language and sewing, which has a very technical language as well when you're reading patterns and creating patterns. So I've been like really just digging into it and enjoying it. In my office here, I have like my desk with my work stuff and then my sewing desk over there. This is probably a mess. Not the best background, but yeah, it's been really fun.
00:52:00
Speaker
I do have to ask just because I've only sewn one thing in my life. It was in home at class in high school. So I think we had a choice of two different things. And I don't remember what the other one was, but one of them was boxers. And so for me, it was a complete disaster. We cut the pattern and then we had to sew it. And I don't know what I did wrong, but I was on the machine and it got jammed or something. So I just ended up with this giant ball of like a knot in one section.
00:52:24
Speaker
I know exactly what you're talking about. Yeah, okay. And my teacher was like, well, you have to fix your problem. Like we're not getting any more material. Like, so just, you know, here's the tool that you use to undo it. And I think it took me like three classes to actually get the whole thing out. Yeah, I spent many a night unpicking my stitches. So I'm glad that you can relate to my one experience. Yes.
00:52:49
Speaker
That was when I saw that you were doing sewing, that was the only thought that came to my mind was just like spending three days in Homeck trying to pull out a stitch. To be fair, I also did Homeck and I made a tote bag and it was awful. Try it again as an adult, you might be a lot better, you never know. Yeah, I do think that we shouldn't let sometimes our past experiences shape future things when a one-off is a negative. Yeah.
00:53:17
Speaker
I do want to ask what the, you know, if you have a favorite thing that you've made so far? Oh, that's a good question. I think that my favorite thing that I've made, I would say so pants, I've loved making because they're relatively, relatively easy. And they're awesome to wear. Like, I made these lightweight silk, silky pants. They're just flowy. I love them.
00:53:43
Speaker
But I also have a lot of friends who've been having babies in the last year. So I did a ton of baby clothes sewing and I made these adorable overalls for two of my friends. And I think that might be my favorite thing because they're just so cute.
00:53:59
Speaker
That's awesome. It's nice when you have a hobby that you can also share. Share, yeah. Everything I do seems to be very isolated. You share everything you do. What do you mean? You've got a whole YouTube of sharing content. Yeah, that YouTube started as a hobby and then turned into a lot more now. I have so much respect for you because I have tried numerous times to start a YouTube channel and to be consistent, and it's the consistency that is so hard.
00:54:28
Speaker
Yeah, when I started it, it was purely hobby project, nothing else, and it was part of the reason.
00:54:34
Speaker
I finally started was I wanted to show myself that I could be consistent in something because I'm not consistent at anything I do in my life. So I was like, I'm going to do this one video a week. Let's go. And for the most part, I was able to keep it up for quite a while.
Content Creation and Blogging Consistency
00:54:49
Speaker
So yeah, it was cool. But I'm lucky that I did it as a hobby project. And if I hadn't, I wouldn't have continued because it took like a year before anyone watched anything that I did.
00:55:00
Speaker
It takes a long time and it's also really hard to be consistent and to do it when nobody else is watching. That's the hard part. Like when I started blogging, nobody was reading my blog. Nobody was reading my blog and I did it as like a way of doing public notes to remind myself about things. I mean, I started in college as kind of like a way to have a portfolio to show employers.
00:55:23
Speaker
Nobody read my blog for like five years and then people start like picking it up, you know sharing those ideas I think speaking at the conference helped too because I would talk about the stuff I blogged about and they would you know, discover the weird random experiments I was doing I did a bunch of like CSS Photoshop filter effects and Instagram filter effects like just like weird browser effects like when blend modes was new in one browser now we have it But it's it's fun to kind of have a hobby that was my hobby and
00:55:52
Speaker
I used YouTube in a way for the same thing because when I was teaching, it was intro to web classes over and over again. I was like, I want to talk about other stuff and not get too bored with this. It wasn't too early, but when Grid was coming out, it was an excuse for me to learn Grid because then I could talk about it. For stuff like that, I think it's really good. A great way to learn something is to teach about it.
00:56:16
Speaker
Yeah, it's crazy how much you learn by teaching, which sounds weird for people. If anybody's listening and they're like, you are actively in the learning phases, just even writing blog posts, whatever it is, if you can explain what you've learned, you're going to gain a much better understanding of that thing. And it seems really weird, but
00:56:36
Speaker
Yes, and I give this advice to everyone that is learning to code, like doing a bootcamp that I talk to, and it is to have a blog, to start a blog. It is not only a way to showcase to your potential future employers the way that you think and that you've mastered these skills that you're writing about, but it's a way to master them, to learn about them, to realize what you're missing in the context of writing the post and to research it. And then to maybe make another demo that builds on your other demo
00:57:04
Speaker
and grow that skill set. I think it's a really underrated thing to do, to write, to teach, to however you do it, whether it's videos. I think videos are just too hard. There's more skills needed there. But to do something.
00:57:23
Speaker
Yeah, 100% agree. I think it's a really good thing to do. And I'm going to let you go soon. I've already taken a lot of your time, but I know that we were just talking before I think we started recording that you were doing a lot of traveling coming up for conferences. And I know in general, you like to travel. And actually, we were talking about that before too. That was recorded, but you like to travel in general. So I'm just curious before I let you go if you have any big plans for the rest of this year, travel wise, outside of conferences and all of that.
00:57:51
Speaker
Not yet, but I do have this like gap between two events where I have about like a week and a half in
00:58:00
Speaker
the two events are both in Europe. So I'm deciding where I'm going to go in Europe in between there. So if you have ideas, I have a couple ideas. I, you know, but, um, I weirdly don't have any big trips this year. I always in the past have had like some big trip, like going to Thailand or something this year. I don't have anything yet outside of conferences, but I'm hoping to plan something soon. Yeah. Do you have any like bucket list countries that you haven't yet visited?
00:58:25
Speaker
Yes, I have many, but they're a little far, like New Zealand, the top of my bucket list. New Zealand, I want to go to Alaska too. I really want to go back to Japan. I've gone one time to Tokyo for three days and it was a layover and I did not get enough of Japan. So that's like high, high up there on my bucket list. I mean, I could list things all day.
00:58:53
Speaker
I'm looking forward to being able to start traveling, especially now my kids are getting older. Me and my wife did some traveling before we had them. And then the last 10 years, basically, it's been nothing. So it's going to be nice to sort of get back out there. Yeah, that'll be great with your kids. I mean, I think that it's harder a little bit because you have to plan more. But when you plan, you get to do some really fun things. So I hope that you get into it. It's just different phases, you know.
Travel Plans and Closing Remarks
00:59:19
Speaker
Yeah. Right now, I'm trying to take advantage as much as I can.
00:59:22
Speaker
It'd definitely be very different once dragging our kids along and trying to convince them the fun things we can do. Where do they want to go? I should ask them and find out. Because you might be surprised. They might say that they want to go to Japan. They're going to say Houston or something because there's YouTubers they like there and I'm just feeling like I don't want to go to Houston.
00:59:50
Speaker
I don't know. I'll ask them. I'll find out. I'll let you know on Twitter or something if I get something good from them. But yeah, I just want to say thank you very much for your time. This was a great meeting you and great having this conversation with you. I really appreciate it. And you're one of the people, people always ask me if they're going to, how do you keep up with the state of CSS and everything going on? And you're one of
01:00:13
Speaker
the people that I do mention along the way. So definitely give Yuna a follow on Twitter, but I don't know where else, is there anywhere else people can follow you? Because that's usually where I go to.
01:00:25
Speaker
You can follow my RSS on my website if you're into that. Also, I would recommend following Brahmas Van Dam, so it's at Brahmas, B-R-A-M-U-S on Twitter, and Adam Argyle, Argyle Inc, A-R-G-Y-L-E-I-N-K on Twitter. We have a podcast together, so I'm kind of like used to hearing him spell his handle.
01:00:46
Speaker
I think that we try to share the latest and what's new, as do you and many other people that I'm not even listing because if I start, then I have to make a long list. But yes, I think Twitter is a good place. It's una, so at una. RSS is good. For the kind of articles that we write, developer.chrome.com is where the new stuff sort of goes.
01:01:14
Speaker
And then web.dev is for things that are landing in stable browsers. So if you care about the differences, both have great content on modern UI stuff. So check those out. Awesome. Thank you so much. Thank you. It was so nice to meet you.
01:01:34
Speaker
And there we have it. I really hope that you enjoyed listening to our discussion as much as I enjoyed having the discussion with Yuna. And as a quick reminder, there are links to everything that she is up to as well as everything that we discussed along the way in the show notes. A huge thank you to Yuna for joining me. It was a really wonderful discussion. I really enjoyed it. And of course, a very big thank you to you as well for listening. And until next time, don't forget to make your corner of the Internet just a little bit more awesome.