Advanced CSS 101 with Josh Comeau

[INTRO]

[00:00:10] T: Hey, everybody. Welcome to Enjoy the Vue. I'm Tessa. Today on our panel, we have Alex.

[00:00:17] AR: Hello.

[00:00:19] T: Ari.

[00:00:20] AC: Hello.

[00:00:21] T: Oscar.

[00:00:23] O: Hello.

[00:00:24] T: Is that a question?

[00:00:25] O: It's not a question.

[00:00:29] T: Special guest panelist, Janelle Pizarro.

[00:00:33] JP: Hi.

[00:00:34] T: Finally, our guest for today is Josh Comeau.

[00:00:38] JC: Hi there. My name is Josh. I've been a software developer for a handful of years now. I've worked at places like Khan Academy and DigitalOcean and Gatsby, and I've been pursuing the track of the independent educator for the past year and a half.

[00:00:51] T: Awesome. Josh is here to talk about CSS. He said that we should talk about whether CSS is tricky, and I feel like that's an easy solution. We just asked Chris Coyier to shut down his blog. Other than that – What do you all think about CSS?

[00:01:12] O: Okay, I'm going to go first. I freaking love CSS. I'm not in the group of people who are CSS haters. I consider CSS to be a fundamental part of my frontend and development. There's nothing that feels better than literally flexing on the haters. I don't even write flex grow, okay. I just write flex one, because it's just, I love that. It's so good. I'm in the pro-CSS camp.

[00:01:39] T: Wow, using all three of your flex jokes in one minute.

[00:01:42] O: Oh, they're coming. They are coming.

[00:01:47] T: You can tell, he was he was waiting for this opportunity for decades.

[00:01:51] JP: He was born for this really.

[00:01:55] AR: I tend to float back and forth on my opinion.

[00:01:57] AC: Wow. Another layout joke. Boo.

[00:02:03] JP: Oh, goodness.

[00:02:04] T: It's going to be a long episode.

[00:02:07] AR: Very long episode.

[00:02:09] O: I mean, we can get political. Do you float left, or you float right?

[00:02:12] JP: Oh, my gosh. Oh, my gosh.

[00:02:18] T: Ding, ding. How about you, Ari?

[00:02:23] AC: I wish I had a better mastery of CSS. Those things were like, I know that it's super powerful, but it often seems opaque to me. See what I did there. Another style joke. It was things like, over time, I'm definitely improving, but there's always so many things to learn as a frontend developer, now that I'm also full stack. I only have so much bandwidth. I'm not great at CSS, but I get by, with a little help from flex.

[00:03:01] O: Let’s go.

[00:03:04] T: And you, Janelle?

[00:03:05] JP: This feels very much like a play. I have no idea why. I'm sure it'll come to me. I love CSS. It makes my soul smile. I love CSS and HTML. Together, they make me very happy. Yeah. I would prefer to use CSS over JavaScript any day of the week. Yeah. Love me some CSS. No flex jokes.

[00:03:30] T: I think, we have a sad day [inaudible 00:03:31].

[00:03:31] JP: Oscar. I don’t know.

[00:03:36] O: I've enjoyed being on the show, everyone.

[00:03:39] JP: Yeah. This is officially a no flex zone.

[00:03:42] O: Oh, no.

[00:03:44] JP: I did it.

[00:03:48] T: It's like that Twitter meme, where like, what's the one bug that you would apply to a job, get in, open a PR for that bug and then quit. Oscar just wanted to join the show to make his flex jokes, and now he's going home.

Yeah. I mean, I think I've talked on the show before about how I used to play with HTML and CSS for a while as a hobby. I wouldn't say, I'm necessarily good at CSS either. Janelle, I definitely find working with CSS more, I guess, hooking or something, than JavaScript. If I'm debugging something in CSS, and I'm debugging something in JavaScript, they could be equally annoying. For some reason, this CSS is annoying in an invigorating way, where it's giving me stamina to figure out what's happening, and equal turns excitement, where with JavaScript, a lot of times, it can be like, there's 5 million files. Go try to find the right file that it's in. Josh, what are your thoughts on CSS, if you have any?

[00:04:46] JC: Yeah. It's interesting, because I started doing web development in 2006-2007-ish. I started with HTML CSS, and I've been writing HTML CSS much longer than I've been writing JavaScript, but I never felt fully comfortable with it. I was able to get things done and get things built. Every now and then, it's like, the thing doesn't do – the box is in the wrong place, the element isn't doing what I want. It's just like, “Oh, well. I guess, this is the layout I'm stuck with now.” I felt there was a bunch of stuff happening behind the curtain. Without being able to see what's going on back there, every now and then you fall in a pit and just throw StackOverflow CSS snippets at it until maybe you get what you want.

I spent a few years really with JavaScript and JavaScript too, can definitely lead to similar feelings. At least, you get an error message. It may not be the most helpful one, but it's something. Maybe five years ago, four or five years ago, I decided that I was sick of how uncomfortable I felt with CSS. That looming sense, like the sword hanging over your head that at any moment, could fall down and send you into a day or week-long CSS spiral. I started trying to really understand CSS. I really, really enjoy the language now. It's become probably my favorite part of doing web development. Yeah, I'm a big CSS fan.

[00:06:08] O: I love all the CSS fans in the room.

[00:06:10] JP: That makes my soul smile so much. That was the most heartwarming thing I've ever heard about CSS.

[00:06:18] O: It's a wonderful language. It is sad when you go on Twitter, and you just see so much CSS hate. At the same time, I can understand it, just because I was there myself. Maybe not as vocal, but certainly feeling that frustration of not knowing why it wasn't doing what I want and not feeling like I had any recourse to try and get it to do what I want.

[00:06:39] AC: I feel like, there are so many people who hate on CSS, but they hate on it in a way that they're like, “Oh, it's not that hard. Blah, blah, blah, blah, blah.” I mean, if you don't think CSS is at least challenging, I don't think you know CSS personally.

[00:06:58] T: I feel like, it's always a combo of it's not that hard. Plus, it sucks. Sounds like it's hard.

[00:07:07] O: I feel like TypeScript is the same way. Your day one with TypeScript is like, “Oh, I have a function, and it takes a number, so I'm going to add colon number and it returns a string, so I add colon string.” Everything is so nice and in place. If you spend a day with TypeScript, you might come away, thinking TypeScript is easy. Then you try using it in a real project with real world data, and it becomes – you get these error messages that have scroll bars in them. It just becomes completely impossible.

I think, CSS is the same thing, where color red, background color yellow. It's like, “Oh, this is nice and simple.” Now try building a fully responsive, robust, accessible website, it's a bit of a different story. I feel like, a lot of the people that say that it's easy, have just not really gone deep enough with it to understand what makes it so tricky.

[00:07:49] T: Yeah. I mean, the difference is TypeScript doesn't mistake, but no, I'm just kidding.

[00:07:54] JP: Oh, no.

[00:07:55] T: The surprise level is high.

[00:07:58] JP: Does not pepper today. I think for sure, it's also weird to feel, especially as people who use CSS on the day-to-day and all the time, how you can sometimes look at yourself and be like, well, this CSS is the first thing that people dive into when they're learning front end, they're like, “Oh, I'm going to change the text to orange, because it can.” You are like, well, this is day one stuff for people and usually at boot camps, or learn on your own pace thing. People stop growing past day three of CSS, and they're like, “All right, done. I learned all the color changing things I could possibly do.”

You're like, “Well, I work with that on a day-to-day basis and have been doing so for 5, 10, however many years.” You're like, “Okay. Am I okay? Is everyone else okay? Do you all need hugs? What's going?”

[00:08:58] T: I mean, I feel also, when they're teaching this stuff, a lot of people will be like, “Ah, CSS is really hard and annoying, and just overwrite everything, but also don't use important.” Then, they don't even teach you the tricks that you need to not use important. There are a lot of things in programming that I feel probably aren't really that complicated inherently. People keep on saying it's complicated. Somehow, that colors the way that people learn about it. It's like a perpetuating cycle. I feel like CSS is another one of those things. There are definitely things that are complex about it. Also, the didactic experience can be pretty terrible.

[00:09:35] O: Yeah. I think, another thing that I'd add too, is this plagues CSS, JavaScript, these languages that you're learning as starter programming. It's not because these things are easy, right? It’s because these things are accessible. If I want to start writing some JavaScript, if I want to start writing some CSS, that's something I can do from pretty much any computer ever just by opening a browser. That's why we're starting out with these things. It's not really to do with the complexity. I can guarantee you that CSS is going to be far more complex than a lot of other systems of styling that we could possibly have.

[00:10:15] JC: I think, the other thing too, is that CSS, it suffers the same not problem, problem is too strong of a word. The same situation that we can't really change the language. We can only ever add to the language, because we don't want to break websites from 1995. What we wind up is actually six or seven different languages, CSS is broken into these different layout algorithms, like Flex, and Grid, and Float and all the other different layout algorithms that all build on each other and can be used together.

I feel like, if we were able today to design a new language without any of the constraints and the history, I don't know that we would do it this way. I think that it does add to the complexity that we have all of these different systems that operate independently, but still interact with each other. You have to learn all the different rules for how all the different properties affect all these different systems. It can be a lot.

[00:11:05] O: Not to segue too much, but I'd love to get your take on what would you change about CSS if you could? Then as a follow up to that, how are people dealing with new features being added to CSS? What do you think have been the most successful additions to CSS? What are some of the least successful ones?

[00:11:25] JC: Goodness, I can say so many things in response to that question. I do think that right now is an incredibly exciting time to be a CSS person, because so many amazing things are right on the horizon. We're getting nesting, so we won't have to use SASS for that. We're getting container queries, which is the idea that rather than having your conditions being based on the size of the viewport, it can be based on their parent container, which makes so much sense in a component world, the one we live in now. The rate of change. Things are happening in the language and it's really exciting.

In terms of what I would change, if I had the magic wand, maybe I would consolidate Flex and Grid and Goodness, how am I forgetting the name of the OG layout? Outflow layout. I would maybe put those three things together and find a way to make it work like that. Of course, that's not a realistic – there's no criticism of anything, anyone is doing. It's just, if I had a magic wand and could starting today, we have a brand-new language, I might do things a little bit differently.

People much smarter than I am or working on the language. I might think I know better, but I might actually make something much worse. That's I think, a common thing with CSS is, so many of the things that make it frustrating. You can only understand why they're frustrating when you try to think about how else they could be done. That index and stacking contexts are this really confusing topic that can throw a wrench into your gear. Then you realize, “Wait a minute,” if I didn't have all these constraints, how would any of this work and it wouldn't really. You run into these impossible situations.

Another example, and maybe people have run into this. If you set overflow X hidden, let's say. You're saying anything on the horizontal axis, I don't want to show it. I want to add maybe a scroll bar, or just truncate it. Then you realize, “Shoot, now I've made it so you can't have a standard overflow in the Y axis,” or something goes below the box, it gets cut off. You think, “Well, that's a silly constraint.”

Then when you think like – when you start digging into how scroll containers work, you realize that there's no way for that to work in terms of an element being placed at the threshold. What would happen if you have something in the bottom right corner? Would it offload, be cut in half, so that you see the bottom half of it overflowing? A lot of the things that make it frustrating, and I realized this is maybe not the easiest thing to explain verbally. If I drew this, it would make sense. It's just a matter of it's tricky, but it's the simplest way we can do it, I think.

[00:13:45] JP: Yeah. I think to your point, is when you're saying that there are all these cool new things, and it's exciting right now, it's the most exciting time to be a CSS dev right now, it's really cool to understand where you've come from, to where you are now with CSS. You look back at things and you're like, “Wait, we floated things. Why did we float things? We floated everything.” We had to figure out what clear was and what it did and why and what purpose was it for? That's amazing.” Then you're like, now you use Flexbox and grid and you're like, “This is so much better.” I think, that also helps and could for sure be like, okay, this is why things were written that way, because people had to suffer beforehand. Now, we've eased people suffering. Day by day goes and you're like, less suffering. This is great. I love less suffering.

[00:14:39] T: I think, I usually prefer SASS suffering, or to be specific, SCSS suffering. I mean, Ari –

[00:14:47] AC: Well Tessa, it was really nice having you on the show.

[00:14:51] T: Yeah. I mean, I think if I could be king for a day, or if CSS could introduce aliasing for their built-in keywords, I would like to change justify and align, because who remembers the difference between them? Okay, Ari is raising her hand.

[00:15:09] O: Okay, so Ari, I know you didn't say anything, and I hear you, but when that flex direction changes, and I have to remember that this property is freaking slot, it kills me.

[00:15:25] AR: I mean, honestly, if I was going to change anything about CSS, I would say, it should have had a way to deal with scroll bars from the get go.

[00:15:35] O: Spicy.

[00:15:36] T: I would have thought you would have said something like, it would enforce Comic Sans on everybody's website or something.

[00:15:42] AR: You have to have the contrast of having websites without Comic Sans to websites that do have Comic Sans.

[00:15:50] T: Without darkness, there is no light.

[00:15:54] JC: Yeah. I also think it's helpful context, right? CSS, the web, when CSS was a new thing, was primarily document-based. It wasn't really for applications. We had desktop applications for that. It was really about, what makes sense in terms of formatting text and images? How can we make something that can display a Microsoft Word document? With that, it's like, oh, floating makes sense, because you do that in Word, and it's just as frustrating in Word when you drag the image to the side, and the text gets all thrown all over the place.

Then it's like, people started trying to build applications with this thing and layouts. I think, I heard that CSS was never designed for layouts. Initially, people thought you would use the HTML for layout, and CSS would be the purely cosmetic, colors and backgrounds and stuff like that, with maybe a little bit of layout, or position tweaking. I think that given that that's how it started and we couldn't change it, we had to build something on top of it, it is like, to Janelle’s point, it's so nice that we have these modern layout algorithms that are designed for applications and that serve the purpose really well.

[00:16:51] T: Yeah. I think, I heard from Marian Suzanne that at that point in time, Yahoo was trying to compile a list of every page on the internet. I guess, the idea was, you could go to yahoo.com. just see every page in existence, theoretically.

[00:17:08] JP: That is wild.

[00:17:11] AR: Well, I think also, I feel like around that point, too, there was, if you saw like, there was somebody who manually maintained the list of domain names, or something like that, there was somebody who manually had a thing, that they would update a list somewhere. That may have been earlier though.

[00:17:29] JP: I want to talk to that person in real life. How was that? What did you use to organize it? Pen? Paper? Was it notepad? How did that work? What was your process?

[00:17:43] AR: I started doing light web development in the early 2000s. I was doing HTML and CSS in the early 2000s. It's interesting for me, because I remember a lot of the weird, hacky things you had to do to make things look nice.

[00:17:58] T: Now you do dark web development.

[00:18:00] AR: Now, I do hacky things to make them look bad. Rounded corners and stuff, where it's like, “Oh, we want rounded corners.” It used to be that you would do like, okay, you set up before and you set an after, and each one of those has a background image of a rounded corner, and then you have a div and then you have a div, then you have a div, and another one that has bottom-rounded corners. Then you have your border that goes across the middle of it. It was a whole thing. We don't have to do that anymore and it's great. 

[00:18:25] T: I would argue that really nothing about your approach changed, because the things that you do to make your sites look “bad now” are the same things that you did to make your site look “good then.”

[00:18:38] JC: Yeah. Maybe it's just a change in perspective.

[00:18:40] AR: Yeah. I think, it's more, I lean more into the okay, yes, I'm going to just find some random property and lean heavily into that property for what I'm doing, and see how we can abuse it and not care about how it looks. A lot of times, you get really interesting results, like breaking people's browsers, if you rotate things too many times. Don't put a 100 divs inside of each other and just do star with a rotate, transform, because it gets weird.

[00:19:14] JP: That sounds lovely.

[00:19:16] AC: I think for me, one of my struggles is, I mean, I think layouts are hard. Maybe, that's partly because I think a lot of times, the layouts I'm trying to accomplish are truly hard. When you're trying to write CSS for a layout of a number of items that could vary widely, but you still want to look good in every single scenario, that is a difficult problem to solve. Then, I also start to struggle with the fact that there is this massive interdependence on your HTML structure. For me, that's where things start to break down. If my HTML could be just this very one-dimensional structure all the time, that would make life a lot easier. The reality is, is that a lot of frameworks force us into a structure that doesn't necessarily lend itself well to CSS.

[00:20:13] T: I think, this is the point where someone jumps in with BEM is the solution, and then I hiss a little bit. Yeah, I think it's hard to get good at CSS and the lack of error messages is frustrating. I think, it's also tied to, although maybe not inherent to the intention of CSS, at least as Miriam describes it, which is that the whole idea with CSS and HTML is that it's supposed to degrade gracefully, so that if something isn't supported on your browser, or isn't working right, you still have workable content. 

If you contrast that to JavaScript, I mean, I think that all programs should just be one giant switch case, but that's obviously not the situation there. It's supposed to either work or not work. It's a very different paradigm. I would love to hear more about how one does get better at CSS and more comfortable handling the types of dynamic situations that Ari was talking about. Before we do, Oscar has a very special question for everyone in the room.

[00:21:20] O: Yeah. Can we just go around and can everyone just tell me a little bit about their favorite CSS property? Sorry, I had caffeine today. I'll go ahead and go first. My favorite property is current color. I feel like, I learned about current color way too late in my dev career. Yeah. I mean, if you don't know what it is, it's a sick property that can set something to whatever the current color attribute is set to, which is fantastic for fills, on things like that, instead of having to just duplicate the color a bunch of times. It's super dope. It's my favorite one.

[00:21:53] JP: This is very on the spot. Can I just say my favorite CSS thing?

[00:21:57] O: Oh, absolutely.

[00:21:59] JP: Okay, great.

[00:21:59] T: That’s definitely a lot of fun to do.

[00:22:01] JP: Awesome. My favorite CSS thing in general is variables. I love variables, because I don't like to remember things. Because my brain only has enough capacity to know every single Ariana Grande song and that's it. I don't have time to actually memorize what things are supposed to be.

[00:22:18] T: Your brain sees a CSS variable and is like, “Thank you. Next.”

[00:22:23] JP: Yeah, exactly. I don't want. I love variables, because they make my life easier, I think for sure. I love being able to just be like, “Okay, I don't have to remember anything. I just have to know that – I don't have to know what different colors of black we have and what their purposes and whatnot.” I could just be like, I know that these kinds of texts are supposed to be this color black, so I would just say ‘text black’ and it's done. I don't have to deal with it, and it's lovely.

[00:22:51] O: The days of having to memorize random six-digit hexadecimal numbers is over, which is nice.

[00:22:56] JP: Yeah, so beautiful.

[00:22:58] O: I was also going to say CSS variables is my favorite feature. I think a lot of developers who have not yet adopted CSS variables have not yet adopted them, because they use something like SASS that has variables. CSS variables are wildly different and super impressive, because they exist at runtime. With CSS, or with SASS variables, or less, or any other preprocessor, it gets pre-processed. Then you wind up with a hard-coded bit of CSS in your – when it's actually running in the browser.

CSS variables are dynamic and responsive. You can change them with JavaScript, or you can do calculations with them. You can mix them with percentages, with calc, so you can do things like, have this thing be 100% of the size, minus this random CSS variable that can change over time. You can do all kinds of cool things. You can build color palettes that are then user changeable. It's super, super cool. I suppose, I would also say that my favorite CSS property if I wanted to really follow to color within the lines of the question would be transformed, because it's seven different properties in one and you can do all kinds of cool things with it.

[00:23:59] JC: It's really transformative.

[00:24:01] JP: Of course.

[00:24:04] T: My favorite CSS thing is a trick I first learned from Chris Fritz. It is when you need to ovewrite important, one quick – or not overwrite important, because you can't do that. If you need to override something and don't want to use important, one quick way to do that is in your selector, just repeat the class name of the thing you're trying to grab. Then keep on adding another class name until it overrides the style that you need to. I know, Oscar. Isn't it amazing?

[00:24:32] O: I didn't know about this. This is, wow.

[00:24:37] AR: At a former job, we had a mix-in for SaaS that I had made, where it was called more – I called it more specific. You could make a selector and you could be like, “Okay, I need to make a selector and I needed to be five times more specific, so that we could override the vuetify styles.” It was a shorthand. It would just repeat the class name five times, and it would make something more specific. You could just be more specific a 100, and it would do it a 100 times. There we go.

[00:25:04] JC: I feel like this angers the CSS gods. Because it's like, “I thought we made things more specific by writing more specific spot on this.”

[00:25:13] AR: Okay, if you want to start getting into really fun specificity stuff, if you want to make sure that your stuff is all more specific, what you do in SASS is that you just wrap everything and you put everything within a thing that does :root, :root, :root. You will automatically have a root selector three times in front of everything that you do. It will cascade into the rest of everything else, and you will be very specific.

[00:25:43] JC: I'm so glad that CSS engines these days can actually cache that garbage.

[00:25:49] T: Yeah, I am once again asking, how do you kick someone from a recording? I remember the ones I was prepping for a frontend job at a thing place. They were like, “Yeah, the questions are all going to be vanilla JavaScript, and then CSS questions.” I looked up the CSS specificity table. I think, there's also a video on Frontend Masters. I learned how that worked. Then they were like, “Oh, you're the most informed person we've ever interviewed on CSS.” I was like, “Okay.” In reality, when CSS pros are doing this stuff, how active is that knowledge?

[00:26:29] JC: I mean, I would say that one of the great things in my mind about this modern component world we live in, is that we can sidestep a lot of these issues. The way that I structure my applications is I have global styles, but I'm very careful to never – maybe overwriting some weird library that I want to tinker with. That’s still a bit of a mess.

I'll have my global styles that are baselines. Here's what my headings should look like. Here's what my paragraphs. I want to change the box model. I'll put box sizing border box on everything, baselines. Then the only other place that can style a given element is the component that owns that element. If I have a button component, I have button styles associated with that component. Then I only have two places in my entire application that can style a given element.

Because the global styles are so unspecific, it's all tags and stuff. I never have like, “Oh, I have this weird style that I have to override.” It's always, I have baseline button styles. Then for my button component, or my toggle button component, or whatever else, I just write a little chunk of CSS. All of a sudden, this whole category of problems has disappeared, which is pretty cool.

[00:27:32] T: Yeah. I feel like, that's one really nice thing about Vue is that we have our components styles almost built into the paradigm. I have seen a lot of things. I've worked at places where we have to do that and them, where we've had Vue, but then we have our CSS files in a separate folder, and we just opt into the classes and just – but I don't think we heard about Ari and Alex's favorite properties yet.

[00:27:55] AR: I'm going to astonish people with mine. Because it is not font. It is box shadow. Because you can do more terrible things with box shadow than you can with font.

[00:28:08] T: Yeah, I was going to say that seems on brand.

[00:28:12] JC: Like what?

[00:28:13] AR: Oh. Oh, let me tell you.

[00:28:17] T: We all have three days for each episode, Josh.

[00:28:22] AR: Because you could make a box shadow go anywhere. It'll go, but you’d be like “Yeah. No, go 200% over that way.” You'll have a random shadow over there. No reason. No reason at all. Shouldn't be there. Shouldn't be up. Why is it over there? I don't know, but it is. It's great. I love it.

[00:28:41] JC: I know that when you see those CSS art, and it's a single div and it's a Monet painting, that's all box shadow.

[00:28:48] AR: That's a box shadow and background image, where you're doing radio – where you're doing gradients, linear gradients and stuff.

[00:28:52] JC: Yeah, gradients too.

[00:28:55] T: I think, this episode might give Ari a headache, and I don't know who scored more points in contributing to that.

[00:29:00] AC: Oh, no. I was just thinking about a time when I horribly abused box shadow. It felt dirty.

[00:29:07] AR: It feels dirty, but in a good way.

[00:29:09] T: Do you want to share with the class?

[00:29:12] AC: Sure.

[00:29:12] T: Was that a CSS joke?

[00:29:17] AC: Tessa. I wanted to do an outline on a close button, which was just X, but I didn't like that it went around the actual box, as opposed to the X itself. I just horribly abused box shadow to make an outline. There was like, I don't know, 12 different box shadows involved. It was really that.

[00:29:47] JC: The good old days. I will say, that that exact problem has a solution now, which is filter drop shadow. It will automatically contour to whatever the opaque contents of an element is.

[00:29:57] AC: Today I learned.

[00:29:59] AR: Which is very handy, if you want to do a drop shadow type thing on a transparent PNG, it will do that.

[00:30:07] JC: Yup. It will pick the content of the image. It's also great for if you have a tooltip, and you have the little triangle that sticks out at the bottom, it'll just wrap around that triangle.

[00:30:15] T: Those triangles are the bane of everyone's existence, I think.

[00:30:19] AC: Yeah. No. I’m like, I wish I could drop shadow my tooltips, but the triangle?

[00:30:24] T: I mean, I wish we could also just [inaudible 00:30:25] tooltips off the face of the planet. 

[00:30:28] JP: I agree. I agree.

[00:30:31] AC: No, I'm very curious about this. 

[00:30:34] JP: Tooltips are most of the time not super accessible. That's why I don't like tooltips.

[00:30:40] T: Yeah, both that. They're also just a really bad user experience, I feel like, and really easy to abuse for bad design decisions.

[00:30:48] JP: Don't hide content from the user.

[00:30:50] JC: Yeah, that's usually what it's for, right? Here you’re just like, “Yo, I designed this. It’s bad. Let me just add a little tooltip here.” When you just come to my app and they’re like, “Yo, this UI is freaking garbage.” Making puts on this puts a little button and learn all the thing.

[00:31:12] AC: Okay. Let me propose a scenario and you tell me if there's a better way to do it. A table that has data where the methodology behind the data is important. Do I either have a really long column header, or do I have a tooltip on it?

[00:31:27] AR: You have a footnote.

[00:31:29] JC: Why not a table caption?

[00:31:30] JP: Yup, that's exactly what I was thinking. Table captions.

[00:31:33] JC: Even if you don't want to use a real table caption, I think it's even a display property. I think, you can have a div and just be like, display table caption.

[00:31:41] AC: I don’t want a table caption is.

[00:31:43] JC: Yeah. I mean, it's just a caption for your table.

[00:31:48] AR: Yeah, that's where I would implement some form of footnote thing to be like, put a little one next to the thing and be like, here's a link to the information about it. You can read it like, how this information is relevant. That semantically, there's a connection.

[00:32:02] AC: Is that actually a preferable user experience though, forcing them to go to somewhere else?

[00:32:07] T: I think, I would prefer it like, if it was a whole page of all of the different methodologies and it just linked me to the relevant ones, I can start reading about that right away and then scroll through the other ones if I wanted, or something. Because I would probably have additional questions, I think, if it was the amount of info that could fit inside a tooltip.

[00:32:24] AC: We recently had to implement the actual little info icon, because they weren't even reading the tooltips. We had to be like, “Hey, there's a tooltip. You should probably look at it before you start complaining about this. Thanks.”

[00:32:42] JP: I wonder if that's maybe a point where you look at what is actually being served to the user. What is this data? What does the user actually want to see? What do they need to see? Maybe address that?

[00:32:56] AC: Yeah. No, it's absolutely a combination. We did. We did have to look at our methodology and question, is the methodology really leading us to the right results? In some cases, the answer was no. In some cases, it was just like, they needed to actually read and understand that this was not a risk adjusted number. Yay, healthcare.

[00:33:20] O: Yay, healthcare.

[00:33:22] T: I feel like, if it's something that they have to know, then a tooltip is not a good place for it personally, because they often ignore them.

[00:33:32] O: Ari, were you saying that y'all had tooltips for your tooltips?

[00:33:35] T: Oh, that would be amazing.

[00:33:37] AC: No. No.

[00:33:38] AR: I am now going to make a website that just has a little info icon and you hover over it, or you activate it and then it has a box inside of it that has information, but then there's another tooltip within that tooltip and then just have infinitely spawning tooltips inside of tooltips.

[00:33:56] JP: Every screen reader user hates you now.

[00:34:00] AR: Screen readers. But I will make it accessible. Challenge accepted.

[00:34:07] JP: Gross, but make it accessible. Great.

 [00:34:11] T: I think, accessibility experts don't want you to see.

[00:34:13] AR: That is — you clearly have not met me before. That is my entire thing. Gross, but accessible. Everybody gets an unpleasant experience, but it’s an understandable, unpleasant experience.

[00:34:26] O: Alex, just because you put Ari on live polite, doesn't mean it's actually nice, okay?

[00:34:31] AR: Oh, no, no, no. It's not going to be polit. Oh, no. No, no, no. It's going to be the aggressive, assertive one. Yeah. If you hover over a tooltip, “Hey.”

[00:34:48] JP: I'm angrily accessible.

[00:34:49] T: When you hover over a tooltip, instead go, “Oh, baby.”

[00:34:57] O: Ari, I think, that's your screen reader settings.

[00:35:00] T: I want to make a game that's only navigable through tooltips, and nobody will like it.

[00:35:05] JP: The vain of the Internet.

[00:35:06] T: Really, when I make a game, I try to make a game that's antagonistic to the player.

[00:35:13] AR: I don't know why I'm allowed to make websites, honestly, sometimes.

[00:35:19] O: One of the first programming projects I worked on was Pong. It was super antagonistic. Sometimes the ball would just break through your paddle. Sometimes it would split into two, so you couldn't possibly get both of them. Sometimes you get a gravity effect, so it would just always come back to you and would never make it to the other side. It was a lot of fun.

[00:35:37] JP: Games that make you sad for 100, Alex.

[00:35:41] T: Games that are not fun to play, but fun to think about. Ari, what is your favorite CSS thing?

[00:35:49] AC: I don't know, so I'm just going to go with grid, just because it satisfies the extreme laziness inside of me, because I can just do all the things in one property, literally an entire layout, one property.

[00:36:03] O: Is it just me, or does anyone here ever read FRS for real?

[00:36:08] T: All the time.

[00:36:11] JP: Me, every time. I’m like, for real, for real? Okay, great.

[00:36:16] T: Then when there’s for, obviously, it’s for-for real.

[00:36:18] AR: I had never read it that way before.

[00:36:21] AC: Me neither. I mean, I read it as fur. Actually, so that is my favorite thing within the entire grid module is the fractional unit.

[00:36:35] T: I guess, I was like, but if it's fractional unit, why wouldn't be abbreviate it FU? Then I was like, “Oh, that's why.”

[00:36:45] O: Josh, can we use fractional units anywhere besides grid?

[00:36:49] JC: You can't. In a way, the FR unit in grid mimics the behavior of everything, or I guess, flex grow and Flexbox. In my mind, it’s like flexible Flexbox type stuff in grid. I don't think you'd need it in Flexbox. I mean, flex grow serves a similar purpose.

[00:37:08] AC: The mental model just doesn't work for me the same way at all. I don't know why. It just doesn't.

[00:37:14] O: If I could flex and be like for real for real at the same time.

[00:37:20] JP: I think, that's an Outkast song, isn't it?

[00:37:25] T: Along similar lines, I feel like, another great one is object fit, for when you need to do something with images. That's perfect. Okay, so you like CSS maybe, or maybe you don't. When you write CSS, it's also a trash fire. How do you get better at it? You Google, ‘make me good at CSS book’ and you buy one. It either covers things that are way too basic, or way too complex. It's all piecemeal stuff and not a mental model, or putting things into a cohesive approach.

[00:38:00] JC: Yeah. One of the problems I have with most of the ways people learn CSS, and Rachel Andrews made this point as well, that we focus on the neat tricks and the one-line snippets and the things you can take and plop into your project. It does a cool thing, but you have no idea why it works the way that it does. The thing that makes CSS so tricky, and I alluded to this earlier in terms of things happening behind the curtain, is that there are entire mechanisms that you can spend a decade writing CSS and just never know exists, because you don't write into them. You're looking at the output of this complex system. Sometimes you can clearly map, okay, this property leads to this output.

Often, things just don't work the way you expect them to. One example of this that I think people – many people will be familiar with, is absolute positioning. You say, position absolute, top zero, left zero. Where does it go? Well, it depends, right? It depends on this concept called containing blocks. You will have never heard of the term containing block, unless you've gone through spelunking in MDN documentation, or the CSS specification. It's this idea that every element has a container and flow layout and Flexbox and grid. It's usually the element’s parent, if that parent is a block level element.

With absolute positioning, specifically, it is the closest ancestor that also uses position layout, which is why if you put position relative on a parent or a grandparent, hey, top zero will now stick that element at the top of that particular element. It's this thing that a lot of developers pick up intuitively over the course of years, but without ever necessarily having this concrete theoretical understanding of like, okay, this is what the layout algorithm is doing and this is what this property does.

We focus so much on the properties when properties are just inputs. They're just parameters to a function. We should be focusing on what the function is doing, because that's how you get this intuitive understanding for understanding what these properties actually do. The conscious choice that I made a few years ago was when I hit one of these situations, you set position absolute, top zero, the box doesn't go where you think it's going to go, try and figure it out and spend some time in it. Settle into it, like it's a warm bath and try to really get comfortable with, I don't know what's going on here, but I sure as heck I'm going to figure it out. It helps so much, rather than the alternative, which is throw random properties at it, until it mostly does what you like, and then never look at this problem again.

[00:40:21] O: Oh, but that’s a stretch.

[00:40:21] JC: If you spend that time. It does work. Honestly legitimately, I spent many, many years doing that to great success. That's what leads to that feeling that CSS is unpredictable and inconsistent. It's not. It's just that if you only have one of the puzzle pieces, of course, it's not going to seem consistent, right? Because there's all these other factors that you aren't aware of, because they only exist behind the curtain, part of it is like, and what do I mean by that? Like spending the time figuring it out.

Some of it is just experimentation. Let's try setting this property to totally different values and see what that does. If I assume I'm going to get a result, see if I get that result. If I don't, try to figure out why. Part of it is just spending time with documentation, right? Whether that's the MDN docs, or the actual specification. I think, a lot of people think that the specifications are way too in the weeds. Honestly, they are.

I think, the primary purpose of these specifications is for browser vendors to be able to implement the language. They're not necessarily – developers aren't the primary audience, but they are an audience. I learned this from Rachel Andrew recently, too, which is that no, you actually are encouraged to read them. If you have moderate comfort with CSS, you may be surprised by how much of them you can understand and how many lightbulb moments you have. Like, “Oh, this is what that thing actually does.” That was my experience, certainly. I went into it expecting it to be level ten difficulty, and it was level six, which again, it's still not easy, right? Especially if you're new to CSS, it probably will be intimidating. It's not as intimidating as I expected, and it helped a whole lot.

[00:41:50] T: Yeah. It's like, you stumbled across somebody's little notebook of all of their weird rules about things that you never thought about.

[00:41:58] AC: A lot of time, CSS to me feels like playing one of those fighting games that has this super specific combos that you can never remember and execute in the right order. Isn’t like, up, down, left, nope, nope, that does the other thing. Oh, God. Because there's yeah, there's so much interdependence within CSS. If you have one property set, but you don't have the other, then the first one doesn't take effect. Because you had to have the other thing. Yeah, it's usually position.

[00:42:28] T: I’m surprised someone hasn't made a fighting game yet.

[00:42:31] AC: Oh, God. That actually might be a decent way to learn.

[00:42:35] JC: I don't want to monopolize the conversation, but I do want to mention this before I forget. Firefox has this – it's not even that new anymore, but it is amazing. For example, let's say that you set Zed index 2 on an element, and it doesn't do anything. It doesn't work. Firefox will now tell you, “Hey, this property has a dependency on this other property. Try setting position relative.” It'll actually tell you when you have an incomplete set of properties now, which is so useful.

[00:42:57] T: Yeah, the Firefox dev tools, they’re so great for debugging CSS. Also, so not great when you work at a company that only develops for Chrome, because then also, none of the styles work. You can use a tool, but you can't really use the tool.

[00:43:13] O: Yeah. Yet another tangent for me. I mean, I love Firefox dev tools. The only reason I don’t use Firefox is because I'm petty from a CSS bug I found a while ago, that I opened an issue on and they told me, “No, that's not a bug.” I'm like, “Oh, but it is a bug though.” They're like, “Yo, go get the working group to change the CSS spec.” I was like, “But every other browser does it the way I expect it, and yours does it.” They were like, “The other browsers did it wrong.” I'm still petty. That’s why I don’t use Firefox. The working group has not looked at my issue, by the way.

[00:43:51] T: Oh, no. 

[00:43:53] AR: See, I have the opposite experience, but with Chrome. Chrome had a really nasty bug in it for years, years and years and years and years. That an animation, any style that you put in an animation could not be overridden. Even with an inline important, you could not override an animation style. I was like, “This is a weird behavior.” I looked it up, because I like terrible things. I was like, “Is this actually how this is supposed to work?” I looked it up in the spec for [inaudible 00:44:30] suggestion. I was like, “Okay, let's go to the spec. Let's go to the spec for how this works.”

I went to the spec. Sure enough, that is not how that is supposed to work. You're supposed to be able to override those styles. I found a bug. They finally fixed it a year and a half ago. It was very exciting. I had a code pen and everything, but I was like, “See? See this? See? Use Chrome. Look at that. See that? Doesn't work right. That's wrong. That's just wrong.”

[00:44:59] JP: I'm pretty partial to Firefox as well, mostly because I like being lazy. Firefox has this really cool thing, where if you are writing your CSS in the browser, you can just copy all of the CSS that you wrote in there and put it into your – Okay, apparently, there's mail today, so you can copy –

[00:45:22] T: Or someone has opinions about Firefox.

[00:45:25] JP: Yeah, of course. Yeah, you can just copy-paste all of your stuff that you wrote in your browser, which is really cool. You can just be like, “All right, cool.”

[00:45:33] T: I love that. To play devil's advocate, or deviel, if we want to spell devil with an IE instead of an I, didn't Internet Explorer do border box right, and all the other browsers got it, “wrong,” and we're stuck with the wrong way, instead of the right way?

[00:45:51] JC: They did. That's true.

[00:45:52] T: Very frustrating.

[00:45:54] AR: What?

[00:45:55] O: In my situation, we commonly use kebab case for CSS identifiers. It was a bug in animation timings. In Firefox, it would parse the first minus sign it saw as like, “Oh, this is, you being minus one second.” Literally, if they would just do the last one, it would parse correctly, even if my identifier has a dash in it. They're like, “No, you cannot use CSS class names with dashes in them, because that is absurd.”

[00:46:32] T: Yeah. Although, I will say, I oftentimes like to use camel case, because I want to just change it in my template and my style at the same time.

[00:46:40] O: I mean, that's fine. I just don't want someone telling me, “Yo, no. Go rewrite your whole app.” Even though the specification says that you can use dashes in your CSS class names.

[00:46:59] AC: It is generally what most people do.

[00:47:01] O: That's specifically why I'm petty about it.

[00:47:03] AC: That’s fair.

[00:47:05] T: To go back to the old way of doing things, and speaking of things we want to ask before we forget, Josh, are you Canadian?

[00:47:14] JC: I am. Yes. I live in Montreal, Quebec. Eastern Canada.

[00:47:17] AC: I think, it's pronounced Quebec. No, I'm kidding. I'm sorry. I'm sorry.

[00:47:23] JC: They always tell that I live – I mean, I think this is common for a lot of places. If you're not from here, you call the place that I live Montreal, Quebec. If you are from here, you call it Montreal, Quebec. If you ever find yourself in this neck of the woods, and you want to blend in, Montreal, Quebec.

[00:47:38] T: See, this is actually useful info. As opposed to when Jason was on and he couldn't tell us how you pronounce Toronto. Is it Toronto, or is it Toronto? He was like, “I don't know.” I was like, “Why do you even come on the show?”

[00:47:50] JC: I lived in Toronto for several years, and I can confirm it is Toronto.

[00:47:54] T: Then if you're in Houston, Texas, everybody knows it's pronounced House-ton and not Houston, except for non-local.

[00:48:01] O: Yep. Good old House-ton, Delas.

[00:48:05] JP: Wait. What?

[00:48:06] JC: That can’t be true.

[00:48:08] T: If you're British, you pronounce it Homeston.

[00:48:12] AR: Okay. Now, so the county I live in, right?

[00:48:15] T: There's a street or something in New York City called Houston, but people who are not from New York think it's Houston. Yeah, but the Texas one was actually –

[00:48:24] AR: Okay. That is the county that I live in. I want you all to attempt to pronounce that.

[00:48:29] AC: Dekolb.

[00:48:31] O: It’s not fair.

[00:48:31] AR: You know it. You don’t count.

[00:48:33] JC: It was in the news around the election. Wasn't the election results from there? That's why I know it. It's Dekolb.

[00:48:39] AR: Dekalb.

[00:48:40] JP: Is it? Ew.

[00:48:41] JC: Oh, is it?

[00:48:42] AR: Dekalb. Yes. It is D-E-K-A-L-B.

[00:48:45] JP: That feels wrong.

[00:48:48] AR: Dekalb. Now, there is also a Dekalb, Illinois.

[00:48:52] T: There is a Dekalb in New York. It’s like, it’s probably the other way.

[00:48:56] AR: Yeah, it is DeKalb. DeKalb County.

[00:48:59] T: I think, Ari wants to [inaudible 00:48:59].

[00:49:04] AC: Mississippi has so many mispronounce. I don't care that that's how all y'all pronounce it. That's not how it's pronounced. For example, there is a place that is called, I'm going to spell it out, D'Iberville. How would you –

[00:49:23] JC: D'Iberville.

[00:49:24] AR: D’ – spell it again.

[00:49:27] AC: D'Iber, then yeah. It doesn’t really matter what the rest is.

[00:49:33] JC: In French, it would be [inaudible 00:49:33].

[00:49:38] AC: Right. They pronounce it D-Iberville.

[00:49:45] AC: Dead serious.

[00:49:47] T: It’s replacing the letter E, so they’re actually correct. They just wanted to shorten it.

[00:49:53] JP: I think, that's illegal. I think, it's actually illegal and everyone there should be arrested.

[00:49:58] AC: Because yeah. The thing about Mississippi is they still somehow have a lot of French named places. Because it's not Louisiana apparently, they feel comfortable completely butchering.

[00:50:09] AR: Oh, yeah. We have that here, too.

[00:50:11] JC: Yeah. My partner is from Wisconsin and they, too, have a lot of French names. He lives in a city which is correctly pronounced Fond du Lac. It’s Fond du Lac. They pronounce it Fondelac, which is fun.

[00:50:21] T: I think, it’s fon.

[00:50:26] AR: There's another there's another county here. I want everybody to pronounce that word for me.

[00:50:31] T: Lafayette?

[00:50:33] AR: Yeah. Good.

[00:50:34] JP: Lafeyette? Is it Lafeyette?

[00:50:38] O: Are you serious?

[00:50:40] AR: Yeah. I actually had a set of friends who were arguing. One was like, “It’s pronounced Lafeyette.” He's like, “No, it's Lafayette.” He’s like, “No, no. It’s Lafeyette.” One of them was like, “Let's call the county courthouse and we will settle this.” They called the county courthouse. County courthouse person picks up and goes, “Hello, the La-fayette County Courthouse.” And he just hung up.

[00:50:58] T: Yeah, but that person could also be wrong, first of all. Second of all, I think it's time to take an official vote on whether Alex should continue on this show.

[00:51:08] JP: Oh, my goodness.

[00:51:11] O: I mean, I think we should just step back and dedicate a whole episode to this. I live in Massachusetts. We can do this all day long.

[00:51:17] AR: Oh, yeah. We got a bunch of them down there.

[00:51:20] JP: I feel like, all of these counties are choosing violence repeatedly, and that's not okay.

[00:51:23] T: I mean, that's how America was founded. Then maybe those two [inaudible 00:51:25] today.

[00:51:28] JP: Love that.

[00:51:33] T: The reason I was asking was because, you were talking about floating. I feel like, another thing that people maybe don't know, I don't know how well people will pick it up intuitively, is that about stacking context, and how the Zed index isn't the only thing.

[00:51:48] AC: Don't even get me started.

[00:51:49] T: That affects whether something is on top or not.

[00:51:53] AC: Bane of my existence.

[00:51:55] JC: This is another one of those hidden mechanisms that I would be – I would guess. I should do a Twitter poll, that most developers who have written CSS for a while don't realize that it works this way, which is if I have an element, and I give it Zed index 2 position absolute, and I have another element, which gives that Zed index 999999, decision absolute –

[00:52:11] AC: Zed index. I'm sorry. I'm sorry.

[00:52:14] JC: I don't have enough information to know which of those two elements is on top. If they're siblings, right next to each other, then okay. If that Zed index 999999 is an element whose parent has a Zed index of one, it works like NPM version numbers. The effective position is 1.9999.

[00:52:31] O: That is such a smaller number than 2.

[00:52:33] JC: That is a fantastic way of describing that.

[00:52:37] AC: I can do semver. I’ve got it.

[00:52:38] JP: That reminds me about Specificity by Estelle, I believe her last name is pronounced Whale. They've got a lovely diagram of how specificity works. So mind-blowing. So mind-blowing. Also, there's one about Z index and how that works, too. I think, that just blew my mind. Every time I hear it, I'm like, “Oh, my gosh. That's right.”

[00:53:04] T: Yeah. I think, I've been using CSS for a majority of my life. I found out that stacking context was a thing in late 2017. I was like –

[00:53:14] JC: CSS is full of these things. Hypothetical size, and Flexbox is another one that is absolutely critical to understanding Flexbox, which is most people have never heard of, and they've been bitten by this problem. It's just, you have to really go out of your way to learn about it.

[00:53:29] AR: It's interesting, too. There's this weird double-edged sword, since we've had CSS for so long. There were so many things that were used, not for their intended purpose. Because we have all these new tools, people are learning things. I had someone actually asked the other day, “I need to make a layout that looks like this.” They showed an image, and then text next to it that just automatically wraps around the image. They were like, “I can't get grid to do this. How do I make this work?” I went, this is literally what floats were invented for. This is why we have floats. We've just abused them for so long, nobody wants to use them anymore. This is actually the use case where you need to use a float, and things like that, where it's like, all of these things that we've abused to make them work the way that we want them to, we are now actually going back to getting to use them for the thing that they were intended for.

[00:54:31] JC: Table element is another good example of that.

[00:54:33] AR: Where people used to use it as a design layout. Then people were like, “No, we should use divs.” Now everybody uses divs for everything.

[00:54:42] JC: The message was don't use tables. Now, no one feels comfortable using tables, even when it does make sense, because you have tabular data.

[00:54:48] AC: I use tables, because I have tabular data.

[00:54:52] T: Maybe now table captions.

[00:54:54] AC: Tables? What?

[00:54:57] O: Those table captions.

[00:55:00] T: Yeah. I think, it's funny that CSS is inherently a visual thing. That's what it's for. Yet so many of the tools that we use to look at CSS is just text based. You can add extensions to show the color of the thing or whatever in your editor, but it's mostly text based. I remember last year, I was having an issue with a modal or something not showing up at the level it was supposed to. There was a ton of nested components and things going on. It was really hard to identify what the situation was, and it was a bug that couple people had already looked at already.

I was like, I know there's a tool that shows you a 3D view of how all the CSS is stacking up. By the time I was looking at this, the only browser that I could find that supposedly had it was edge. They had this 3D stacking context thing viewer. They had also deprecated it a few versions before. I was like, “Oh, no.” I was still able to use it. I was looking at this old version of edge and trying to see the stacking context and being like, “Why isn't this a thing in all browsers?” Being able to see that 3D view. I guess, it's a huge strain on your computer, but it can also be really helpful.

[00:56:15] JC: Yeah. I miss that tool. I have similarly gone through the trouble of getting edge to run on my Mac, so that I could actually just use that tool. I would like to promote a Chrome extension that unfortunately, doesn't give you the visual tool, but it actually does really make it easy to understand stacking context issues. I've posted it here in the chat. Hopefully, it can be added to show notes.

[00:56:35] AR: I think, actually for, because I was just talking to an edge dev, they've added the 3D view back in to edge. If you get current edge, you use the dev tools. It does have the Z index.

[00:56:54] JC: The edge version of edge?

[00:56:56] AR: Yeah, I just looked it up. I just looked at it in my current open copy of edge.

[00:57:04] JC: The bleeding edge.

[00:57:11] T: Going back to the big question, Josh. How do we get good at CSS?

[00:57:15] JC: Yeah. I mean, I feel like, this is a great moment for me to be self-promotional, and mention that I have a course on the subject. CSS for JavaScript Developers. Essentially, the goal is this, right? It's to try and get people to be comfortable and confident with CSS by explaining it from a mental models first perspective. It is a premium resource. It has a premium price tag.

There are plenty of amazing free resources as well. In fact, the web.dev team at Google recently released a free course called Learn CSS. If you search for learncssweb.dev, you can probably find it. Yeah, I think that this is another one of those areas where finally, people are realizing that this whole dev is not having a solid understanding of CSS thing is a problem. Resources are being created for that.

The only thing I haven't found much in terms of free resources, specifically around how to use CSS in any modern JavaScript context. Although granted, if you have a comfortable grasp of CSS as a language, you can adapt it to fit whatever tools that you're using. I do hope to see more in terms of, specifically for JavaScript developers, how do we solve these sorts of problems? How do we build component libraries and take advantage of modern tooling, so that we don't have to use naming methodologies like them? Vue has this built in with single file components, which, as a React developer I am very jealous of.

[00:58:30] AR: That's the one thing about React that is always confused me, is what do you mean you don't have a blessed way of dealing with, why do you have all of these [inaudible 00:58:38]?

[00:58:38] T: I think, it’s pronounced blessed.

[00:58:41] AR: Why are you fighting about how you're doing styling? I don't understand. Just write CSS.

[00:58:47] T: I think, I remember there were also styling libraries that came out. One with the nail polish emoji that Kent Dodds made. I don't remember the name, but I remember the nail polish.

[00:58:56] JC: Yes. Style components. Honestly, I'm a big fan of it. I use style components myself. I do think, I would miss it if I didn't have it. Actually, controversial and radical idea of style components is you don't write styles. By style, I mean, a selector and the braces and the actual declarations. Every style is connected to a component. If I need a wrapper component, I'll create a little wrapper. Then my styles are intrinsically linked to this component. It's weird to think that every component, every style that I need has to be a component.

It's actually really nice, because it forces you not to structure things in a way where styles can be applied to the same element in multiple places. You have this ironclad guarantee that the only styles that affect this element are written right here other than your global styles.

[00:59:43] AC: I mean, we have that in Vue. All we do is type one word. We just say ‘scoped’ and then we have to write regular CSS.

[00:59:52] JC: It is pretty cool. Yeah, I'm not going to knock that.

[00:59:55] O: I've used style components. I think, it's pretty good. I also scope styles. All of these – the choices you choose for technologies are cascading. It’s all good.

[01:00:09] JC: I do think that these debates that we have over which tools to use are silly, because we have so many good tools. They're all great. If you have something that works for you, that is wonderful and you should celebrate that. Me having something good – We can all have good things, right? It doesn't have to have a single solution for all of us. I think that the –

[01:00:25] AC: Everyone, except Valis.

[01:00:26] JC: We are spoiled for choice.

[01:00:29] JP: They're all good dogs, bront. I love that.

[01:00:33] T: I mean, I remember when I was getting out of React, that was around the time that Kent had announced glamorous. There was a lot of different potential paths on how to pursue CSS and React. Then a couple years ago, I had to do a coding challenge in React. I ended up turning it down, because it was a very – it was the largest coding challenge I've ever seen. I also generally don't like coding challenges. They specified that you had to use styled components. I was surprised that even years later, there's still this additional thing that you have to go learn, and we still haven't decided on a path. Not that there has to be one path. Since React is ostensibly a frontend library, I found it a bit confusing that it wasn't like a – it didn't seem a built-in consideration.

[01:01:20] JC: Yeah. That's the whole React philosophy is that it gives you as little as possible. Then you have to go find a third-party package for router and for animations. There's pros and cons with that. I will say that if you look at the NPM downloads stats, style components is overwhelmingly the thing people use. It's five or six times the similar libraries like emotion. It's way more than tailwind. Most react developers have consolidated around this tool. I do think that it really is something I can see the pros and cons to in both sides.

Vue has built in layout animations. It has built-in flip animations, I think, which is amazing. I really wish that React had something like that. We also have so many amazing React animation libraries, like framer motion, which just make things that would otherwise be so difficult, just completely trivial. It's less beginner friendly. For that, I feel frustrated with it. Once you get comfortable with these tools, acknowledging that it's more work, it's pretty freaking cool.

[01:02:16] T: Yeah, I feel that's the takeaway for today is acknowledge that you're going to have to do some work, but cool results.

[01:02:24] AC: No, I will not.

[01:02:26] T: Well, that makes it more awkward to wrap up. With that, Josh.

[01:02:33] AC: No, I feel that's a really good final thought for me. I'm good with it.

[01:02:37] T: Where can people find you on the Internet?

[01:02:38] JC: Yeah. I'm on Twitter. @JoshWComeau. My last name is spelled C-O-M-E-A-U. I like to tell people that my name ends in three vowels and is pronounced like none of them, which is fun. Another one of those French quirks. Also, I have a blog, joshwcomo.com. I write a lot of stuff about CSS and JavaScript there.

[01:02:56] T: Great. It's time to move on to this week's picks. Oscar, would you like to go first?

[01:03:03] O: Absolutely. My pick for this week are those brand-new MacBook Pros from Apple. I know they're not out yet, but I pre-ordered mine and I'm hyped and I know it's going to be so fire. I will pick it again. Who wants to actually have it?

[01:03:21] T: Pro, or anti-notch?

[01:03:25] O: I don't have enough time to get into how I feel about it. I would say generally, I'm pro notch.

[01:03:30] T: Great. How about Alex?

s

[01:03:33] AR: This week's topic is a bit weird. I've been going to physical therapy lately and I have some wrist issues –

[01:03:43] T: Just choose.

[01:03:45] AR: Because I sit at a desk all day like many of us. My physical therapist has been like, hey, get a lacrosse ball and use that to massage your muscles. We got a six-pack of them. They are amazing. They're very dense rubber balls, and they are just lovely and perfect for deep digging into a muscle and getting out whatever knots you have in there. There you go. That is my pick this week is across a lacrosse ball.

[01:04:16] T: Great. Janelle, do you have picks?

[01:04:19] JP: I do. I have one pick. It is a Remarkable tablet. I love it so much. Essentially, I can write everything. I can journal. I could write Slack messages. I could write notes to myself. I could live journal, I guess, whatever that might be, or plan and send it to myself via Slack, or send it to others via Slack, or email it to myself, or just keep it in there forever. Hopefully, no one steals it and take it away from me, because it's the love of my life now. Yeah.

[01:04:51] AC: It really is as good as it looks.

[01:04:53] JP: It's so fantastic. It's like writing on paper, but you don't have to waste paper or buy more notebooks, which is the best.

[01:05:01] T: But then you can’t find more notebooks.

[01:05:03] JP: It comes with these little nubbins and you write with the nubbins. They're really cute and I love them.

[01:05:09] AC: Oh, it was the Facebook ads. I'm like, “That looks awesome. There's no way it's that awesome.”

[01:05:14] JP: Yeah, it's great. I don't have Facebook. I didn't even get marketed to. I bought it.

[01:05:21] T: Yeah, I was looking at earlier this year, because they had to pick hackathon prizes. I was like, “Oh, this looks so cool.” Charging separately for the stylus is such an Apple move.

[01:05:32] JP: Oh, so for the Remarkable, you don't have to charge it.

[01:05:36] T: No, no. Like, I give you money.

[01:05:38] JP: Oh, yeah. That's fair. Look at how beautiful that is.

[01:05:43] T: That’s pretty.

[01:05:46] JP: It’s just there and cute and beautiful. I love her.

[01:05:51] T: All right, Ari. What are your picks for the week?

[01:05:54] AC: I have one pick. It is simply the Golden Girls Quotes API. Yeah. You're welcome. I expect to see some projects built with it. You can send those too @gloomylumi. For once, please do.

[01:06:12] T: Josh, do you have any picks for us today?

[01:06:15] JC: I do. Before I share my pick, I want to – Oscar was too diplomatic to share his thoughts on the notch, but I'm going to share mine on the new MacBooks. A question came up, which is what happens to the cursor if you try to go near the notch? It turns out, it goes behind it, which offers a really nifty hiding place if you want to do screen recordings and want to hide the cursor. That sold me on I'm team notch now.

My pick is A Long Way to a Small Angry Planet by Becky Chambers. It's a science fiction novel. It is absolutely delightful, in terms of it's meant to be a slice of life, slow-moving fiction set in space. It's absolutely charming. You get really attached to the characters. There's a trilogy and every book is better than the last one. Or, maybe there's four of them. There's enough that you will have a good amount of reading and it is probably one of the best series I've read in many, many years.

[01:07:05] T: Nice. Yeah, I haven't read it. I think, I have a pin badge collection of her books. All the title is really cute, and the pins are really nice. About the notch, when you're recording, are you seeing it literally hide the cursor, or it's just hidden behind the notch? Because then, wouldn't it still show up on the recording where the notch was?

[01:07:25] JC: Oh. I don't know. That's a good point.

[01:07:29] O: Oh, no. Oh, no. No, I would say, just recording full screen mode, because then there's no – But that doesn't solve the cursor problem. Yeah.

[01:07:42] T: All right, so it's time for my picks. The first one is of course, Josh's class, CSS for JavaScript Developers. I've linked it, so go check it out. Also, a pick since we were talking about fonts is Comic Parchment. It is the baby of Comic Sans and Papyrus. Hopefully, they'll come up with a monospace version.

[01:08:03] JC: Oh, god.

[01:08:06] T: Play It As It Lays is a book by Joan Didion that I haven't read, but I really want to read. Specifically, I want to read the audiobook, but I can't, because it's an Audible exclusive, so it's just there as a aspirational thing. Finally, I've been watching Sweet Home, which is a horror, action Korean drama. I don't know the rules and stuff are not consistent. The story could be better, but I like it, because it's somewhat unpredictable, but not unlike a, hey, that plot change, or development came out of nowhere way. That's been fun.

Before we close, the most important question of the day, the most exclamation point important question of the day. What are Josh's and Janelle’s headphones/earphones?

[01:08:55] JC: I’m going to let Janelle go first, because I can't compete with that.

[01:08:59] JP: I am wearing Logitech G-733 headphones in Lilac. I have a yellow star microphone cover on them. They are lovely and they make me very happy. They have really cool gradients that move, or you can program them to do other cool stuff. When you are coding and in the zone, it'll mimic what you see on the screen. It'll be the same colors, which is really cool. It has a bunch of different awesome settings. These are the first pair of really cutesy headphones I've ever had. They're very adorable.

[01:09:40] T: They are super adorable. How comfortable are they?

[01:09:43] JP: They are so comfortable. Also, yeah, they're just, I don't know. They make me feel like, do you know the Cassidoo and Sailor HG keycaps? These specific keycaps?

[01:09:54] JP: The stroller ones.

[01:09:57] JP: Yes. They make me feel like the actual incarnation of these keycaps, which makes me very happy. Yeah, they're amazing.

[01:10:06] JC: That's super cool. I use bog standard Apple earbuds that came with my iPhone for many years ago, when they still came with an 8-inch standard jack. That's the least climactic way to end that question. I did recently buy Air Pods Max’s for the bewildering price that they cost. I'm probably going to return them, because while they are good headphones, I feel I could get better headphones for half the price.

[01:10:32] T: That's interesting. That's been a popular – That's actually what started this whole headphone thing was we had multiple guests with the Max.

[01:10:38] JC: I mean, they're good. They're certainly good. With the tax, they were almost 900 Canadian dollars, which is a lot more.

[01:10:44] O: That's a lot of Canadian dollars.

[01:10:46] JC: I think it turns into 600 USD, because the exchange rate is not favorable right now. Still, it's yeah, way more than anyone should spend on headphones.

[01:10:54] T: At least, lossy headphones.

[01:10:56] JP: That's a lot of dollars.

[01:10:58] T: Yeah, I use the standard, except they don't come with the mic Apple earphones when I'm streaming to. They work. They're reliable. It's nice.

[01:11:07] AC: I wish I could use them consistently, but they fall out of my ears if I move [inaudible 01:11:12], just out.

[01:11:14] T: I like them basically, because they don't fit super snug. Again, I don't feel stuffy.

[01:11:19] AC: Then, I literally, I just get the noise of them moving around in my ear and then I can't hear. Yeah.

[01:11:28] T: All right, that's all for this week's episode. If you aren't following us on Twitter, go to @enjoythevuecast and hit follow. Also, go to @enjoythevuecats and hit follow. Be sure to subscribe to the show if you haven't already. If you have good things to say, leave a review. If you have bad things to say, also leave a review and then don't hit submit.

[01:11:54] AC: Or just send it to @gloomylumi.

[01:11:56] T: That too. Be sure to tell at least one friend what you learned, or enjoyed about today's episode. If you like the show, please consider supporting us on Ko-fi, at ko-fi.com/enjoythevue. Thanks for listening. Until next time, enjoyed the Vue.

[END]