Styling With Attribute Selectors

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

MICHAEL: It's time to be learning with Jason! � [Beautiful music]

JASON: That's -- waiting with hold on. Are we doing a thing? Yeah. This is my favorite. This is already my favorite episode.

MICHAEL: This is already a mess. We have already lost the thread.

JASON: We can only go downhill from here. [ Laughter ] Okay. All right. So, welcome, everybody, to another episode of Learn with Jason. I am beyond thrilled to welcome Michael Chan, the one and on Chantastic to the show. How are you?

MICHAEL: I have been looking forward to this since I put it on the calendar. You know, it's fun to hang out with friends who are weird.

JASON: Yes. You know, that's the whole thing -- like, I've tried to think about what it is that I really love about this show. And I think you just nailed the core of it. I want to hang out with people who are weird and preferably the same kind of weird as me.

MICHAEL: Yes. Yeah. And that's why I love you.

JASON: Thank you, chat. That's why you're all the best.

MICHAEL: We're all just looking for similar levels of weird.

JASON: Where do we fall on the alignment chart? Chaotic good? That's where I want to be.

MICHAEL: Good place, good place.

JASON: We've got some first time chatters completely confused by what we are doing right now. Welcome, welcome. It's not gonna get better.

MICHAEL: That's your byline. Welcome. It's not getting better.

JASON: So, in all seriousness, you are a -- like a great voice for just creativity and inclusivity and creativity on the web. And for folks who aren't familiar with your work, can you give a little bit of a background on yourself?

MICHAEL: Thank you. I appreciate that. One of my favorite compliments is one time we were on a chat and you were saying, you know, what I like about you is that you're just totally not a douche.

JASON: [Laughs] and I stand by it.

MICHAEL: Should I put that many any Twitter bio? Jason Lengstorf, totally not a douche. Yes. That is probably my goal in life is to be totally not a douche and be supportive where I can, and support creativity where I see and just have fun. A lot of times we get stuck in our head, about our career, capital C career, being profesh and doing all this stuff. And I just like being places and hanging out with people who are open to fast tracking, finding themselves in their career. And so, lately I have been doing that on Discord with a lot of really fantastic people. People who have been on your show recently, actually, and that's great. And that's it. I can never remember the shortcode, I think Discord-gg-lunchdev. Doing streaming there. Having a lot of fun. I have in the past had a show, React Podcast which you have been on and I'm hoping to get that back on in 2022. But we'll see. That is one of my favorite things is being able to talk to people who are on this really fun journey of, you know, making a tech living and kind of discovering what it means to -- like I hate saying like building a brand around yourself. But just like being yourself in public. Right? And --

JASON: Yeah.

MICHAEL: Yeah.

JASON: I feel like you bring up a good point here. Because if somebody asked me what my personal brand is, I get kind of squeamish. I don't have a personal brand. But if somebody's like, you know, how -- how -- like which lunch table would you sit at in the cafeteria and I'm immediately like, I would sit at the weird kid's table. I'm the one over there trying to make a spoon catapult and shoot peas into my friend's mouth. That's 100% me, right?

MICHAEL: Totally. Totally. My table was the existential dread table, but laughing it off.

JASON: To use Cassidy's incredible emoji, just mild panic. Big smile. Bead of sweat. It's gonna be that fine!

MICHAEL: Yep. Yep. That's my favorite mode right there.

JASON: Good. Good, good. But, yeah. So, I mean, we could talk about that all day. But --

MICHAEL: Yes.

JASON: But we should probably stay on topic. Let's talk a little bit about --

MICHAEL: Oh, yes. CSS. Sorry.

JASON: You're right. Yes, we should talk about smashburgers. So, Smashburgers, you and I have had multiple conversations about this. Because --

MICHAEL: Yeah.

JASON: You, like me, believes -- oh, we just got some GIFs. Thank you, Ben, for the GIFs. But you like me believe that the Smashburger is the superior form of the burger. If a burger starts out as a Charmander, when it becomes a Charizard, it's a Smashburger. That's how it goes. Oh, we've got caveats.

MICHAEL: Caveats, yeah. I can appreciate any burger that's done right.

JASON: Yes.

MICHAEL: If you do just a thick boy burger, like, I'm here for it. But I think that that the process of making a thick burger taste really great is not as fun as the process of making a Smashburger. And for me, I like making Smashburgers. So, I got this big --

JASON: Yes.

MICHAEL: I got this big griddle out back and I like to invite people over and just make burgers for hours.

JASON: Do you have the griddle that's legit the size of one in a food truck.

MICHAEL: It's the biggest one I could get. It's like 36 inches or something like that.

JASON: Same. I have the same one.

MICHAEL: It is massive. It is massive. You should have seen me. It was like -- it was my birthday this year, so, May 22nd. I -- the day before --

JASON: Put that in your notebooks, folks.

MICHAEL: I have just kind of like just kind of catastrophically been removed from my job which is a strange story. But anyway. The next day I was like, I -- it was my birthday. I'm buying myself this griddle. And you should have seen me trying to just maneuver -- the people at Walmart are not very helpful in terms of -- like it's not part of their job description to help you put a big-ass griddle in your chart. You should is seen me just trying to just like -- I don't know what lifts are. But maybe back lift this big like 36-ounce -- like 36-inch box on to a cart. But anyway, I got it. And it's my favorite thing in the world. I've gained probably like 20 pounds since the beginning of summer making burgers.

JASON: I swear we're not going to turn this into a 90-minute episode about Smashburgers. But one of the things that made that griddle worth getting is when I originally started doing Smashburgers, I had gotten a griddle plate that I could put on a barbecue.

MICHAEL: Same!

JASON: So that I could make Smashburgers. And I could only make one or two at a time. If I had friends over, it was a weird thing, and I would hand them a burger and be like, eat this before it gets soggy. And they would have to very uncomfortably eat a burger in front of everyone else who was waiting for one.

MICHAEL: Oh, this is so -- it's fine. It's fine.

JASON: When I got the griddle, you could do six at a time.

MICHAEL: Yes.

JASON: You could throw these things out there. And because you're doing so many burgers at once, as you're finishing the burgers, you could take a big bucket of broccoli and onions and whatever and throw it in the burger grease and you get this charred vegetable medley that you could send out after the burgers. And if you didn't tell them that you fried the vegetables in burger fat, you could pretend you created a balanced meal.

MICHAEL: There's still vitamins in there. You didn't cook the vitamins out.

JASON: I assume. If nothing else, there's fiber.

MICHAEL: I wish I wasn't so far away. Now I'm hungry. This should be a cooking show now.

JASON: When it's less terrifying to travel. I have a plan. You shared this list of all the best Smashburger spots in LA. And I want to descend on LA and do a Dev tour of LA's food truck scene.

MICHAEL: When you come down, get a film crew of us eating great burgers.

JASON: We should do a fundraiser, get people to buy tickets and we'll do different cities.

MICHAEL: Let's do it.

JASON: You heard it here first, look for a GoFundMe, I guess. All right. We're going talk about CSS. So, I feel like CSS is one of those things that I feel like everybody on Twitter at least has ultra-strong opinions about CSS. And I've always -- I've always been --

MICHAEL: The opinions they have about other things on Twitter.

JASON: That's true. Everybody on Twitter is so rational and measured about everything except CSS. Isn't that weird?

MICHAEL: It is weird. It is weird that just that one thing they have become incredibly opinionated about.

JASON: Just the one. You can talk about anything on Twitter perspective CSS and people jump down your throat. So, but what I have noticed is that CSS in programming circles is one of the hot button issues. It's one of the things that if you start talking about it, people descend en masse to unload off of their baggage around CSS. Whether it's in support of it, against it, why you should write it in CSS itself, in JavaScript.

MICHAEL: Totally.

JASON: I have felt weird in these conversations because I have such a transactional relationship with CSS. I like CSS. It's fun to write. I can make things look a certain way on the Internet. But like I don't -- it's not like I'm like going to bed like I have a stuffed animal named CSS I give a kiss on the forehead, I love you, CSS. And then I go to sleep. No, I just used it because it was a tool and I needed to make something look nice.

MICHAEL: I needed to make something in color and there was no other way to do it.

JASON: That's right. Somebody's like, make it in JavaScript. Okay. If that's how this project works, I guess. Like, it's -- so, anyways, I'm always curious. Like, what emotions rise in you when you start talking about CSS? If any?

MICHAEL: Okay. That's a really great question.

JASON: Question for the chat too. Let us know.

MICHAEL: Well, I love -- I love you. I love you. Sorry. I'm not ashamed to say it. But I love kind of how my feeling about a thing questions in general. You know, this is -- this is really interesting. Because I got my -- like I kind of cut my teeth in like my professional web development career on CSS. And the story was, I -- like I was looking for jobs. I knew they wasn't gonna be like a great PHP developer and like in San Diego it's just like all PHP and ASP.NET. That's not how I get my foot in the door. I realized as I was working on different projects with developers and whatnot, the thing that people hated the most was CSS. And I think... we can talk about why in a second. But I think that was like -- that was what kind of got me into CSS. Is okay, obviously, there's something here that people don't understand. It's like misunderstood for some reason or it's complicated. This is when we had to support like IE like 5 was something we had to support. Things that you wanted to do were still incredibly difficult at the time.

JASON: Right.

MICHAEL: Not saying they're not difficult now. CSS is kind of a strange language to master. But they were like, nutty back then. The number of things you had to do to do anything in CSS was just wild back in the like --

JASON: If you want to go down a really fun historical rabbit hole, see if you can find an article that just pulls together all of the old CSS hacks for like Internet Explorer and Netscape and stuff like that. It was ways -- basically people figured out which browsers had which CSS bugs and they would use them to conditionally apply styles in different browsers. It was the most dystopian nightmare I have ever been a part of. It was almost as bad as the user agent wars.

MICHAEL: But then to my like kind of like existential dread in laughing it off, I kind of enjoyed that space. It was kind of like absolute chaos.

JASON: It was full-blown mad scientist stuff.

MICHAEL: Yes. And it was so fun. I really loved being in a space where it was just like, anything goes, kind of? You know, if you make it work, that's the way to do it. Right? There's no like -- I mean, like, you know, we got some best practices after that. But it was like wild freakin' West for a while. I really enjoyed those places where there's a lot of discovery and when you make a mistake, it's not really a mistake. Right? It's learning. And that's like a really fun thing for me. And so, I've always kind of since that time. I was probably like 13 years ago now. I have like really loved CSS for that reason. I think something that's really odd about CSS is that it's like a perfectly declarative language. And that makes it very hard to write. And I think that if you haven't mastered it, there's a lot of insecurity around it. Especially coming from like, you know, if you're an extremely capable like developer, the fact that there's this whole thing that like you don't have the time to master. But like -- like need to in order to like make it work right. It's very overwhelming. And so, like when you find something that works. You find your favorite whatever style of writing CSS. You find that, it works, you're able to solve the problems that you think are the most important problems. You kind of get stuck in that. You get stuck in that gear. This is the best way. I think that's probably part of the reason that people are dismissive about like other strategies and whatnot. I think for me, it's just -- it's just fun. I'm down for all flavors. I'm very interested in it. And just kind of finding where the boundaries are, where it makes the most sense and whatnot. So, yeah, I think that's kind of the lens we will be talking about it today. I have no problem convincing people how to do something. But I think it's fun to see what we're capable of in CSS. There's a lot there and a lot of times we kind of like don't touch it because we found our lane, it works. I'm not exploring anymore.

JASON: Yeah. And I think you bring up something interesting which is that like there is -- there is the world of like I need to build this project and I don't care how it gets done. I just need to hit this deadline.

MICHAEL: Yep.

JASON: In that world, you start researching for things that are convenient. Let's use Tailwind because it's pre-configured, everything was bootstrap other material design. It was just fast. You had pre-baked solutions, it would let you get stuff done. But then there's this other world which is way more experimental and it's art-driven and up . You have people like Lynn Fisher who build out full art project with a single div, pseudo selectors and backgrounds and all kinds of awesome stuff. Cassie Evans does a lot of GSAP animation, and also a CSS wizard. There's so many people who do that. Make incredible things incorporating CSS or exclusively using CSS as like a constraint that makes the art more interesting. And you can do all sorts -- you can do CSS-only dark mode. You can do -- you can do like variables where, you know, you -- all you have to do is change a CSS variable value and you can change the entire layout of something. Right? There's all this incredible power that doesn't require you to be a JavaScript expert. That doesn't require you to have all this deep knowledge of the rest of the browser. You can be a CSS expert and do a huge amount of things. So, I think, yeah. It's -- it's interesting to kind of think about CSS as not just like this one tool that -- that if you're a web developer you have to like find a way to get through the CSS problem. It's also this whole exploration space in and of itself.

MICHAEL: Yeah. And there's so much to discover and like play with. And I feel like because the language is so -- because the problem is, you know, so constrained, like I like seeing a lot of solutions in CSS because there are a lot of problems. And like the -- I've always believed that the closer you get to the user, the harder those problems are to kind of make general abstractions from. Like you look at Rails. It was like super-successful. But it's like -- it doesn't touch like styling or UI or any that have stuff at all. And honestly, even today, it's kind of like bread and butter. It's like that server, like, client separation.

JASON: Right.

MICHAEL: And we've spent, you know, the last like decade like trying to figure out how to like do all of this stuff in a different way. Like kind of like reorient the pieces. And like we've learned that like it's actually really hard. Like in order to do like just client-side sites, that gathers a lot of benefits. But it's actually really hard to get all of the pieces just right. And I think that, you know, CSS is kind of similar because it's so close to the user. You know, it's really hard to peel out general abstractions that work for everybody. And you see that with like, you know, things like tailwind where we're going make a class for literally everything. And then you can use that. Which is a really interesting technique. And, you know, but it's just one of the many techniques that you could use.

JASON: Right.

MICHAEL: And I think what we're gonna be talking about today is stuff that I consider to be a little bit more in the -- what is it? The thing I like about the things that we're gonna talk about today is that they work really well across frameworks. And so, this might be a theme that we come back to. And yeah. The -- the things that we're talking about is we're gonna be using data attributes selectors. And a lot of this came from like the last four years of my work building design systems that cross that barrier of like we had some properties that were at Rails, we had some that were like strictly React. We had others exploring different technologies. It's so funny how difficult that one change of just like class to class name in React, how much work that can cause for you in building a cross -- like a cross application framework. Right? Because now it's like, you can't just have these templates that like anyone can grab and put into their framework. Now you have to have at least two. You're gonna have like an HTML one and JSX one. And so, that kind of -- that was like a big part of solving, you know, CSS for the work that I was doing before. It was trying to figure out a selector that was going to work so we could literally just grab a piece of template and then move that to another product. But also have it be customizable for that product. So, yeah. So, that's kind of the big theme of like -- or I guess the space in which some of what we'll be talking about today exists and like what it's designed to support.

JASON: Yeah.

MICHAEL: If you have one app, whatever works, use that.

JASON: You bring up a good point. Back in the day when I was at IBM, there was a team we worked with, the carbon design team. It was the design system for IBM, had to support IBM Cloud and Watson and other properties to support. Which meant there were probably 30 plus teams using carbon design. And IBM dark their architectural decision making went to frontend teams should use whatever they're productive with. Which is very good for teams and very bad for unification of frames, right?

MICHAEL: Yeah.

JASON: We had people in Backbone, React, whatever you could think of, somebody had built it in that, right? When carbon went to roll out a unified design system, they were like, wait. We have to make every one of these components in six different frontend languages? That's not gonna work. And that actually led to like IBM changing its tune and it was like you get to choose one of these three approved frameworks for all of your UIs. It was actually kind of funny, you have 6 months to comply. [ Laughter ]

MICHAEL: This message will self-destruct.

JASON: And, you know, obviously that's not how it played out. It was very heavily collaborative. But, oh my god did it create a lot of work.

MICHAEL: Yeah.

JASON: Just so much work to get everybody to the point where we could share components.

MICHAEL: Yeah, this is -- oh, sorry.

JASON: I guess what I'm saying is when you're talking about how do we do in a way that people can actually drag and drop between frameworks, class to class name is a big deal.

MICHAEL: It is, yeah.

JASON: Because, you know, one of these design systems is gonna have a hundred plus components in it, right? It's an exploding level of complexity when you start adding variants.

MICHAEL: Yep. Yep, yep. It's something that I find really interesting. Because it seem like something that every growing company goes through, right? Which is that like we -- and -- I want to be careful here. Because I don't necessarily any that it's wrong, right? Like when you are starting up a company, like yeah. Like just do whatever works. Like, however you can get it out the fastest, whoever is responsible for it, like do that.

JASON: Right.

MICHAEL: But there is -- there is a bill that comes due at the end of that when you're trying to stabilize your platform and become, you know, more use shared tooling and all that kind of stuff. And it is hard. It's just hard.

JASON: I think there's something to be said for the fact that like, you know, I've talked about this for individuals. But it's true for companies as well. Where at any given stage in your life, you're optimizing for something. You are, you know, you talk about I'm optimizing for career growth. I want to get to a certain income level so that I can solve this other set of problems and I'm willing to make sacrifices with my free time or my hobbies or whatever. Now, that's not gonna be true forever. You change what you're optimizing for you his milestones. Up to us to continually reassess what to optimize for. Is it old habits or is it working towards a goal that we actually have? I think companies have the same thing. It's much more complicated because not everybody agrees what we should be optimizing for. In an early stage startup, almost everybody agrees you have to get something out there. And then the numbers, you hit the 50 employees, the Dunbar number of 150 employees and things get complicated. And grow further and further beyond that, you have a dozen teams instead of a dozen developers, the conversations have to change. It's okay for that to be true.

MICHAEL: Yes.

JASON: You can say, we're although a stage in our company where tech debt is not the thing we're worried about. But later, you have to have that conference. Hey, we're at the stage in our company where if we don't address this tech debt, we're gonna die.

MICHAEL: Yes.

JASON: It's okay to not solve all the problems right now. But you have to be aware of you are consciously choosing to let a problem exist for the time being.

MICHAEL: Yes. Yes. Yeah. It's really -- okay. Man, I really want to get into code. But like I'm gonna philosophize for a second, not even well. But I'm just gonna do it. So, I went on this trip with my partner this last week. And basically the goal was basically to be locked inside with books and just make fires. Like in the rain. So, that was like kind of the goal. And it was really interesting. It was really fascinating to me, like, in Southern California I don't build a lot of fires. And usually when I did, I have a starter and a blowtorch for the fire and put log on it. Doing it the old school way was a new experience.

JASON: Whether you say old school way, I'm imagining you with a rope and two sticks. Is that what happened?

MICHAEL: I did cheat a little bit. I used matches. A match. I gave myself that.

JASON: One shot.

MICHAEL: We're not having a fire -- no food if we don't want to -- yes. It was really interesting to me because I got better and better each time I made a fire. And I realized each of these... everything has like a role in a fire. And like the first fires that I had. I had a really hard time keeping them lit. I realized I need to keep a really strong bed of charcoals below it. Don't clean it out every time. It's not providing a lot of flame which is maybe the exciting part of the fire. But that's actually what's driving the whole thing and like keeping it, you know, stable and whatnot. But there's those early stages which are like a startup where you're just trying to get one thing on fire and turn that into two things on fire. And then change it to slightly bigger things on fire. And like you have to -- you go through these phases and like once you've like actually got like a piece of wood on fire, like the like babying a little piece of fire, like that's unproductive now, right? It's not going to make any difference to my fire produce -- whatever. My fire isn't getting better because I'm sitting there babying like this little thing. And sometimes we do have a tendency. We pick our lane. You have a fire going, the company's going. No, I'm the guy who just starts fires. Right? I'm just putting these little twigs together and trying to make new fires. It sucks, but as a company, like you were saying, you have to have these phases or these conversations. What phase are we in? And what makes sense? Like we are always taking out some type of -- we're taking out some type of debt against the future, right? By choosing a path. Like what are we okay with? And what does that unlock for us? And like is that the right direction? And how long are we gonna go that direction before re-evaluate something It's... it's hard. But it's fun. I mean, like that part of it is also fun work if you're willing to dive into is. Anyway. That's --

JASON: Yeah. It's --

MICHAEL: I don't know what that was.

JASON: Oh, my goodness. I... I want to... I want to chase this for the rest of our time and I'm not going to. Because as the chat mentioned, we have turned this stream into a podcast.

MICHAEL: Yes. Let's get to code.

JASON: Okay. Here's what we're going to do. You're going to rekindle the React podcast to have conversations like this all the time. You and I right now, we're going to look at CSS so my show is not a lie. We're gonna learn something.

MICHAEL: It's to be learning with Jason! That's my new transition. It started the show and now going to code.

JASON: We're going to code Before starting with the code, a quick shoutout to our captioner, we've got Amanda with us today having to write down all this nonsense that Michael and I are spewing. But that's provided by White Coat Captioning who is here with us every week. And that is made possible through the support of our sponsors, Netlify, Fauna and Auth0 all kicking in to make the show more accessible to more people. Which I very much appreciate. We are talking to Michael today, Chantastic on the Twitter. Head over there and give him a follow.

MICHAEL: Welcome, all.

JASON: Absolutely. Absolutely. Okay. Good. Next. Where should I even start? We're gonna do CSS attribute selectors today is kind of the broader umbrella that we're falling under.

MICHAEL: Yeah.

JASON: Where do I do stuff like this? Spin up a project? Go to CodePen?

MICHAEL: We can go any number of directions with this. I think you can probably be safe with even just a local HTML file and, you know, kind of VSCode Dev server or something like that.

JASON: Yeah, let's do that. Let me get to the right place.

MICHAEL: I think that might be the easiest, honestly.

JASON: We're going to make a directory. We're gonna call this CSS-attribute-selectors. And move into it.

MICHAEL: Perfect.

JASON: We'll set that up as a Git repository. But leave it empty for now. Let's hop on in here.

MICHAEL: And we're gonna need chat at the -- like to provide some -- to provide some timeline stuff. If we get to like 10:40 and we haven't started talking about burgers in CSS and that overlap, we need a little bit of time there.

JASON: That's right.

MICHAEL: Help us out a little bit.

JASON: You all know the ahem command. So, you're ready.

MICHAEL: Okay. Cool. Let's create an HTML file.

JASON: Okay.

MICHAEL: And in it, a generated HTML5, yeah. Perfect. And then here -- nice. Got to put that title in there.

JASON: I really don't like it when all my stuff has like default titles.

MICHAEL: Just the localhost 3000.

JASON: Mainly because I'm going to open this tab and never close it. And if I don't have a title on it, I can't close it. But I don't actually know what it is.

MICHAEL: I love it. I love it. Okay. Let's talk about what attribute selectors are.

JASON: What am I doing? What am I doing? What have I done? What is that all about?

MICHAEL: I wasn't going to correct you on your own stream. But I did think it was a little bit odd. It was like a makeshift iFrame kind of thing that you were doing there. I love it. I love it. We could go that direction.

JASON: Let's not.

MICHAEL: I mean, if people can turn buttons into divs, I mean, divs into buttons, we can turn elements into buttons.

JASON: Oh, god. There's a really good article on this, it's like -- what is it? It's like how to make -- how to make a -- the most -- it's like the most inaccessible site with a 100 Lighthouse score.

MICHAEL: Brilliant.

JASON: Just --

MICHAEL: Really relaxing right there.

JASON: This is full blown chaos engineering. Y'all should go check this out. Because it's like horrifying. Like, it's bad. But it's also a good reminder that the automated accessibility testing isn't enough. We can make bad decisions and the robots won't catch it for us. We need to take care of ourselves.

MICHAEL: That's true. Take care of yourself and the people on your site. Okay. Let's add three buttons.

JASON: Okay. I'm gonna do one button and then we'll just duplicate that.

MICHAEL: Perfect. Now, what we want to do is I want to add -- we're going to create a little bit of a problem for ourself. Let's make one of those disabled. And so, the text doesn't really matter. But we will need some text, I think. Perfect. All the boops. And beeps. [ Laughter ] That would be our podcast.

JASON: Boop, beep, burger! I am in if you're in.

MICHAEL: I don't need another project, but I want one. I swear, a tech cooking show. I'd -- ah. Dang it. Okay. Okay. Back on track. Back on track. Okay. So, let's -- let's open this up in -- you can do like a live server or something like that. I think that's all we need.

JASON: Yeah. Just run one of these.

MICHAEL: Nice. NTL.dev. What's NTL?

JASON: That's the Netlify CLI. It lets me -- it is intelligent enough to do framework detection. So, if you go with an empty index HTML, it sets up a plain old server. If you have Gatsby, it will start the right command to run Gatsby or next in Dev mode. It runs serverless functions in the background so you can test that. It's super-handy.

MICHAEL: Look at you and your developer experience team. Look at what you're doing here.

JASON: It's odd. It's almost like you think that I work for Netlify or something.

MICHAEL: [Bing! Okay. So... man, this is a mess. What a mess.

JASON: This is exactly -- this is everything I could have hoped for.

MICHAEL: Oh, I'm happy to hear that. So, we have a -- a button. I guess we really just need two. We have a but then and disabled button.

JASON: I refuse. Keep them all.

MICHAEL: That's fine. So, let's add in our head a style tag where we'll start putting some CSS.

JASON: Whoa. There we go.

MICHAEL: Style!

JASON: Style!

MICHAEL: Okay. Now let's just go really classic. We'll do like a .btn class that we're going to use to style this thing.

JASON: Okay.

MICHAEL: And let's just do like, you know, background color and border color. I don't know. Gold. Or something like that.

JASON: Oh, yeah, gold.

MICHAEL: I love gold. Best color.

JASON: Go with a board of let's do something that's not brutal here. Maybe a brown.

MICHAEL: Okay. And then we'll probably need to change the color as well to --

JASON: I need to add the class.

MICHAEL: Because white on yellow -- we'll be black.

JASON: It should be black. I think we'll get contrast.

MICHAEL: We'll be good.

JASON: I need to actually give it a border. Whoa. I got a new keyboard. I -- the DOS keyboard team hooked me up. And I'm still getting used to it. I have a lot of mis-clicks here, mis-types.

MICHAEL: For the sake of this example, in a real thing, we would apply the color as well. Let's put the color on there just for the sake of the example here.

JASON: Yes. Let's go with --

MICHAEL: We can do the brown.

JASON: Keep the brown. Is that gonna be -- is there a dark brown? What are my color options? What's a dark brown color? What's sienna? That's a dark brown.

MICHAEL: Firebrick. I know that's Prince's favorite color.

JASON: All right. That's a good one. All right. We're using firebrick.

MICHAEL: Change it to current color. You only have to change it in one place. Yeah, there we go.

JASON: I love those.

MICHAEL: Look at that. Look at that. It's hard for me to see exactly because I'm on a very, very small screen with my teleprompter right here. Because we've applied a style here, we totally lost all of the default disabled styles, right? And so, we have a little bit of a problem because now we have disabled buttons that just look like regular buttons. So, we need to --

JASON: Right.

MICHAEL: Handle that, right?

JASON: All of these look clickable. This one is not clickable. We done busted it.

MICHAEL: We done busted it. This is something that we when we're building out our designs for our buttons we have to consider a lot. What you see a lot is just kind of adding my classes. So, I think that, you know, an approach that someone might take is to have kind of like if we were doing this, kind of like a BEM style. We would have a .button, you know, dash, dash disable odd something like that. Make it bigger.

JASON: I'm making them a bit bigger so we can see what's going on.

MICHAEL: Honestly, I feel like if we had a beep, boop burger podcast, that firebrick, it's kind of good.

JASON: It's kind of fire.

MICHAEL: Kind of fire.

JASON: Kind of fire. It's honestly how people describe -- it's not fire. It's kind of fire.

MICHAEL: It's not fire. It's fire adjacent.

JASON: I mean, I don't hate it.

MICHAEL: There was -- there was a fire somewhere in the vicinity and there's embers over here.

JASON: Yeah. Like if nothing else is on, right? I'll watch that. Like... [ Laughter ] Okay.

MICHAEL: If I'm high enough. Okay.

JASON: So, we've got giant burgers -- giant buttons. One of which is a liar.

MICHAEL: Exactly. We could start compounding this and add more classes. This is something we do. We see this in a lot of places. However --

JASON: It could be like button disabled and then we do this whole thing. Yeah, it gets messy.

MICHAEL: Totally. We have an API. Our job is, you know, providing these styles. We just like create more and more and more and more API for people to consume, right? Now, one of the things that really got me on to attribute selectors was as I started doing more accessibility work in our design systems, and I started realizing there's like all of these great like ARIA labels and just like attributes that we should be using, right? And that our design system was an opportunity to actually point people in the right direction to make sure that this stuff was being -- that they had the right attributes in place. So, if we're gonna document it anyway, we might as well have an API that utilizes the attributes in ARIA labels that actually make the site work better.

JASON: Okay. All right. I see where you're going.

MICHAEL: So, here we can, as part of our button API, actually hook into the disabled attribute. And so, that just actually has a slightly different style. So, you can do if you want again, you can prefix it with .button, or btn, I guess. And then for attribute selection, we do brackets. So, kind of like an array syntax.

JASON: Square boys.

MICHAEL: Square boys. I like that. Square boys and then we just kind of put the name of the attribute that we want to select. So, disabled right there. Now what we can do is change this to opacity .5 or something like to. I mean, the -- what we do here won't matter specifically except for the fact that we want to -- oh, did I not do it right. It worked.

JASON: I had the wrong window and refreshed it.

MICHAEL: So, yeah. So, now what we've done is we've actually tied into an attribute that helps keep things -- or rewards good accessibility practices. And, you know, kind of aligns our design to actually like match the markup that we have.

JASON: Nice. Yeah. And there's a question from Nicky in the chat there is also a disabled pseudo class. And what's the difference between those two? Or is it just preference?

MICHAEL: So, disabled pseudo class. I don't know.

JASON: I think if we did... right? If we did it like this we would get the same result? We would.

MICHAEL: Oh, interesting. Cool.

JASON: So, both things work. I think the major difference is that pseudo classes only apply to certain attributes. But like any attribute in here could be targeted as long as it's on the HTML, right?

MICHAEL: Yes.

JASON: Would it even work if we put in a nonsense one, if I put in one that was like, I don't know --

MICHAEL: Yeah. Go for it.

JASON: Btn butts, and I do button butts, you don't need a specific pseudo class, you target any attribute on one of these. That's the main difference, I think. You have -- it's a little more free form.

MICHAEL: Yes.

JASON: Which depending on your risk tolerance is a great or a terrible thing.

MICHAEL: That's a great callout. I had never done it with the disabled pseudo selector.

JASON: Hold on. We have a good question that I've never tried. Will this create a pseudo selector? I don't think it will. Let's try it. It does not. So -- so, these are special cases that CSS will detect. This is nonsense that CSS doesn't care about.

MICHAEL: Yeah. I do think that these are protected. So, yeah. Beep, boop, burgers, butts. The name just keeps getting better!

JASON: Getting worse.

MICHAEL: That's us. We're the butts in this scenario. [ Laughter ] Okay. So, we got beep, boop, burgers, butts. And boop is disabled, which is great. And so, we have that. And we're using the -- the what is it? pseudo selector right now.

JASON: Oh, right. Instead of the this one.

MICHAEL: Yeah. Now, the cool thing is that this works with all kinds of things too. So, there's also an ARIA disabled which is a slightly different queue. But if you wanted to change, let's change burger to ARIA disabled. We could specifically -- we could tie into the same style or we could provide specific styles for this as well. So, like maybe we want to make this one, you know, visually hidden or something like that. I'm not sure. Again, this is not about specifically the accessibility solutions. But just that this is a way that we can tie into those.

JASON: And so, an important thing to keep in mind here is that these might look like they do the same thing, but they do different things.

MICHAEL: Yes.

JASON: Because if we ARIA disabled, you can still click it, but somebody who was using keyboards wouldn't be able to.

MICHAEL: Right. Yeah. Yeah.

JASON: So, this would actually be a very bad thing to do without adding this one as well. And if you add this one, screen readers will automatically apply this one, right? So, typically speaking, we wouldn't want to add this unless we had an extenuating circumstance, right?

MICHAEL: Correct, yeah. I know Ben Myers is in chat. And I think that they could provide --

JASON: Oh, he says, keyboard support is still supported for ARIA disabled. So, it would change the screen reader announcement. Okay. That makes sense.

MICHAEL: Yep. Yep, yep, yep. Yeah. I guess the benefit here is that we have some additional tie-ins. So, if you wanted to write selectors that targeted when both were there or just one was there or one without the other, you can still write the selectors to kind of like match each of these attributes individually. And then as you create -- as you demonstrated there, you can actually use these selectors to target specific values.

JASON: Yes.

MICHAEL: So, like true and false. If this changed to false, you know, you could have like a true and false case specifically for those. And then ensure it's not just that attribute. But then also specific values. This comes in really handy with a lot of -- there's a lot of like really cool, you know, attribute -- attributes for HTML elements that people don't know about for like, you know, I just learned about a bunch. Ben Myers just showed me a bunch for time. Item prop or something like that talks about -- that says when the date -- when the article was published, right? So, you could style something based on the publish of the thing, based on the attribute. And then get that kind of like whatever SEO juice you get out of that by using that instead of like, you know, date published class, right? So, there's a lot of things that you can, you know, kind of build a system around that's actually going to help you with your, you know, accessible, your SEO, all kinds of things with this approach.

JASON: Yeah. Yeah, yeah. well, cool. So, this is -- and what I think is cool about this too is like this opens up a door to something that -- like if we just write semantic HTML, then we can start to have design systems that just rely on that, right? So, instead of like class soup or having to get into something really rigid like BEM. There are advantages in both directions.

MICHAEL: Yes.

JASON: BEM is interesting. It doesn't care what your markup is. It cares about the specific structure of things. So, you're building a component that's a collection of parent and child elements that form an article or a button collection and something like that.

MICHAEL: Yeah.

JASON: And it will style based on the presence of those hierarchies and like child elements.

MICHAEL: Yep.

JASON: Semantic HTML would be like, you have an input and it has to have the type of text to get this style. You're saying, like, hey, do it the right way and it will just work.

MICHAEL: It will just work. Yeah, yeah. I do want to be careful here. Because, again, I want to put another caveat on this. I had said one of my goals here was to support kind of like products, you know, kind of like cross-framework. But you bring up an interesting point. We're only supporting products in the cross-web framework domain, right? So, one of the things that's really interesting about React and is that you can basically build a React app and distribute to many platforms. And I think that, you know, so like thinking about how those components tie to web and also native elements, you're working at an abstraction that is like -- that uses the DOM as like a target, right? And so, like I do want to be like very honest that like this is very much a like web-first way of thinking about these things. Where it's like I'm going to be using the web, using the web elements. Like utilizing fully like the attributes and power of the web browser that are like given to me. And so, if that's your goal, this is great because it's really doubling down on the web. But it doesn't solve the other problem of I want to write a one and done everywhere.

JASON: Absolutely. This is a good time, you know, to just add on to your caveat. To remind everybody that to quote Sunil, there are no silver bullets, and silver bullets only work on werewolf-shaped problems. And so, you always need to fit -- you have to look at the problem you're trying to solve and choose the tool that solves that problem. You can't take a solution and say, great, I've solved all problems forever and forever, amen.

MICHAEL: Yes.

JASON: What's the right tool to solve this problem? And our goal as web Devs is to expand our understanding and get to know more tools so we're very quick to know which tool to reach for. The old adage, somebody calls a plumber. Hey, my water heater doesn't work and the plumber pounds on the water heater in one spot and it turns back on. That's $500. You want $500 to hit the water heater? No, you paid me for the 10 years of experience to know where to hit it. It's not I will solve all problems with my framework and it's the best and turn your problem into a nail so I can apply a hammer to it. That's experience, that's value. Knowing how to weigh the tradeoffs and choose the right tool.

MICHAEL: That's so incredibly well-put. I appreciate the analogy there. It's very apt. werewolf problems.

JASON: Make sure that's credited to Sunil because that was funny as well. Let me find this now so I with link to it because it's a good one.

MICHAEL: I want this as like a Taylor Swift song. Something like -- you feel like, you know, I feel like Taylor would do a really good job of turning silver bullets and werewolf problems into a just killer melody.

JASON: How do you -- I'm so bad at Twitter search.

MICHAEL: 99 problems and a werewolf ain't one.

JASON: Here's the Tweet. All right. So, yeah, go -- everybody go quote Tweet that one. Let's confuse the hell out of Sunil Pai on to where this one is picking up steam several days later. Back to the buttons.

MICHAEL: Yes.

JASON: We know this is not a catch all and not going to solve all problems. But it's a way to add tons and tons of classes. What else do you want to show off here?

MICHAEL: That's kind of like section one. I wanted to show what the value of attribute selectors are, what they're originally designed for. In the next sections, we're going to abuse them for our advantage. And that is something that I find very fun about the web. [ Laughter ]

JASON: Yes.

MICHAEL: Okay.

JASON: Excellent!

MICHAEL: So, next, you can keep us on the same page or not. But let's do three images now.

JASON: Okay. We will go... let's do this. We'll do like sections.

MICHAEL: Yeah, perfect.

JASON: And then we can make each section its own thing so that we can kind of do -- do fun stuff, but also keep everything a little bit separate here. So, let's go with one of these. How does it work? I can go... source. Does that work?

MICHAEL: Nice.

JASON: And then --

MICHAEL: You can use my avatar. I made a new fancy URL making it with the Netlify redirect.

JASON: Okay. Where is it?

MICHAEL: Yeah. It's https: //chan.dev/avatars/latest.

JASON: That is -- that's cool. And then we'll -- we'll make that self-closing because the old school xHTML developer in my can't not do that. GitHub.com will let you do one of these, I think?

MICHAEL: Okay. Nice.

JASON: Does that work.

MICHAEL: I don't know. I've never done that before.

JASON: It's something like that. We'll try it and see how to goes. See if that works before we go any further. Nope. PNG?

MICHAEL: What? That's amazing.

JASON: Who else?

MICHAEL: Who is someone we trust to pass a link in.

JASON: There you are.

MICHAEL: Look at these handsome fellows.

JASON: Now what we can do is let's make these -- are we about to style these to make them line up, or should I do a quick lineup on them.

MICHAEL: We are not. But we could. Let's add a image class or something like that if you want. Or, yeah, just do however you want.

JASON: So, yeah. So, what I was gonna do is I was literally gonna hit it with a hammer and just say, section, and we go display flex. And then we go flex direction. We don't even need that part. We would just go with like a gap of one REM. And then we could go section --

MICHAEL: How great is --

JASON: Image and we could go like width. Let's go with 150. And that should just do -- yeah. There we go. Just does the thing.

MICHAEL: Look at you. Look at this fast coding. You have been learning for so long, it just coming naturally. Okay. So, what we're gonna do now is I want to show you kind of the power of attribute selectors for debugging. So, what we're gonna do is kind of continue that theme of, you know, kind of good accessibility practices and markup and whatnot. And so, what we're gonna do -- you were very diligent to take off -- or put on the alt attributes. But I want you to take them off of at least one. Actually, let's do this.

JASON: Let's do this. This one's incorrect anyways.

MICHAEL: Take that off. And for the other one, leave it empty. There is a case that you want to provide -- it is legal to provide a empty alt attribute if you're kind of using the image only as decoration. Like if you have your name, Jason Lengstorf and an avatar, you can leave that because you don't need Jason Lengstorf, Jason Lengstorf.

JASON: Right. Sure.

MICHAEL: What we're going to do here is use attribute selectors to provide ourselves a little bit of a debugging experience.

JASON: Okay.

MICHAEL: Let's look at -- let's see. Let's grab... so, we'll do image. Just raw image. And then we'll open up an attribute selector. And we'll say, actually, no, sorry, let's do this. Image and then we're gonna do colon and we'll do not. So, we'll kind of like negate this. So, not -- if it doesn't have an alt attribute.

JASON: Oh, like that?

MICHAEL: Exactly. We're gonna use Prince's favorite color again. And then let's put a 3 pixel-Dashed firebrick border.

JASON: I'm going to do something I learned that makes me really happy. If you use an outline, it doesn't change the layout.

MICHAEL: Perfect. Yeah.

JASON: Dashed firebrick. You cannot not say that with your tough guy voice.

MICHAEL: Yeah, it's tough guy voice territory for sure.

JASON: Okay. So, we've got -- ta-da!

MICHAEL: Okay. Cool. This is really neat because we've now credited a -- we've created a selection where we can just kind of use this for debugging now. If we want to turn this on and find I means that aren't properly attributed, we can do that. And the cool thing about this is that it's looking for like an alt with a truthy value. Right? So, we have an empty alt and that one still works. You do still have to be human. This is not going to pick up all the things and you have to look at it critically. But this does help you out a lot. It's kind of the cool thing. Let's take this a little bit further as well. And let's get some links on the page.

JASON: Okay.

MICHAEL: Maybe we could have some. And these could just be raw links. You know, they don't have to have like fancy text. Maybe we could do your site, my site, and I don't know. Something else.

JASON: Okay. So, we've got... Chan.dev. And then let's do one more for -- we were talking about the Netlify CLI. Let's do that. Fyi/cli.

MICHAEL: Perfect. Oh, yeah, this is -- this is great. I could not have asked for three better links to do this demo. You're a step ahead of me. Okay. So, what we're gonna do with this is I want to take this as an opportunity to demonstrate all of the options that we have in attribute selection. Because it's not just the raw attributes as we saw earlier. You were able to kind of like select on the value as well. So, we're gonna kind of like tie into like -- we're gonna look at the different types of selections that we can make via links. Links are a really great way to do this. So, let's do this. You're like making it nice now.

JASON: Who? Nothing? Me? What? This is -- we -- so, the chat -- anybody who has been watching this show for a while knows that if I start touching CSS I like can't -- I can't stop. It just gets -- it gets so bad. Let's go with -- we add that.

MICHAEL: You're very good at it.

JASON: And then we'll go, and we'll just do one of these and then auto and a zero at the bottom. And spell "Auto" right. And we should get a nice looking.

MICHAEL: There it goes.

JASON: One second. Chat! Why did you let me write CSS? Okay. There we go. That's a little...

MICHAEL: It still looks great.

JASON: It's still not good.

MICHAEL: I think it looks magnificent. It's glorious.

JASON: I'm just gonna make it 90. What have I done? Everybody, everybody, please, help me. Send -- send help. Send an adult. Okay. Here we go. There we go. That's fine.

MICHAEL: I think it looks glorious. So, I think, yeah. I think we're good. Let's go with it. Okay. Oh! Links. That's what we were on. Links, links, links. So, we're gonna use links to kind of talk about all of the different types of selections that you could make. Could you do me one favor though on the links?

JASON: Yes.

MICHAEL: Could you make the one to the Netlify CLI, could you make that not HTTPS?

JASON: Yes.

MICHAEL: Okay. Perfect. Okay. Cool. So, we need attribute selectors to do a similar type of debugging thing. This is pro right now. This is -- this is great. Is this -- this is actually quickly becoming, I think, our like podcast site. Like the home page for our podcast. [ Laughter ]

JASON: Yes.

MICHAEL: Okay. So, we're gonna do -- let's see... I think we can do... let's do an A selector. And then an href attribute selection. I don't know if we actually need the A. But let's just put it on there for fun.

JASON: I think we could but then if somebody were to try to apply an href to like a button, it would also target that.

MICHAEL: Right. Let's leave it specified like this. So, what we've done is like if we had -- so, for values, we can make full selections of values. Do with do -- what is it? You did Jason.af, right? So, if you want, you can make a selection just on yours like specifically. And do -- so, like href equals and then put the full domain in there.

JASON: Okay. So, we'll go with...

MICHAEL: Yeah. Perfect.

JASON: Okay. So, we've got just the one.

MICHAEL: Yeah. So, this -- this is only going to match on that value. Right? So, if the href is exactly this value, it's gonna match for that. Now, we can do some other types of selections. So, we can do a starts with. So, why don't do this for min -- actually, let's kind of go into debugging. Let's make yours like a different color or something like that. Maybe your favorite color. Let's save outline, though. I think we are gonna need it in a second.

JASON: Let's go with the homage to John, go with tomato. Not enough --

MICHAEL: Not enough juice.

JASON: I don't think it meets contrast, which always kinds of bugs me.

MICHAEL: I know. It's such a beautiful color.

JASON: We'll go with the dark red which is almost undistinguishable from firebrick.

MICHAEL: It is close. But it doesn't have the same firebrick name.

JASON: Yeah, it doesn't make me want to pick up a battle hammer. Firebrick!

MICHAEL: We got crimson American 2050.

JASON: Crimson. Let's see what crimson looks like. That seems okay.

MICHAEL: Got some juice. You can always make it bigger if you want.

JASON: Oh, yeah, we could do that. We can -- we can go...

MICHAEL: That always helps with the, you know, perception.

JASON: Yeah. Look at that.

MICHAEL: Cool.

JASON: Now everybody has to see it. I'm gonna pull that out.

MICHAEL: Save firebrick, though. We're gonna use another selector for that.

JASON: Got it. That autoformat? What is that nonsense. Get it out of here.

MICHAEL: Burn all autoformatters after that. So, what if we just want to kind of do that same type of debugging technique we did with image, but for insecure URLs? So, what do you think that would look like?

JASON: Like we would want something like this. Right? So, we just want to match the beginning. And then we would put this outline in.

MICHAEL: Yep.

JASON: And it does nothing.

MICHAEL: It does nothing, yeah. So, unfortunately, this, because it's only matching this equals is only going to match on exact matches. But we have an option for looking at the beginning. We use that caret right before it. It will be caret equals. You really do get like sucked into CSS, don't you?

JASON: Chat did it. It's not my fault.

MICHAEL: Yeah, I missed it. Yeah, Comic Sans is great. We have --

JASON: You said caret.

MICHAEL: It's going to look at just the beginning.

JASON: Hey! Anything like that. And we make it more generic. Now it matches all of them. Which completely defeats the purpose. We do it this way instead. There we go.

MICHAEL: Nice. The caret match is going to be at the beginning or starts with. And there's also a star equals. Let's say we wanted to style anything to my URL whether it's secure or not.

JASON: Okay. So, you said star equals does that. I'm gonna go star equals and then I would want to do --

MICHAEL: Chan.dev.

JASON: Just the Chan.dev, right?

MICHAEL: Yep. Cool, cool.

JASON: And then we can say for this one --

MICHAEL: And let's make big. Because I want my link to be bigger than yours. Obviously.

JASON: Obviously. Wait. Did I not -- is that not bigger? Let's go way bigger.

MICHAEL: It's got to be like 2 or bust, at least, right?

JASON: Noticeable, right?

MICHAEL: I like how the links don't align with the characters above.

JASON: Yeah. Kind of feeling like that's -- is that because I did this?

MICHAEL: No, no, just the order of the links. The --

JASON: This is so much worse.

MICHAEL: I mean, that just your URL is under my face and mine is under your face. It just -- it feels like the level of confusion that we're going for, I think.

JASON: It's the right kind of chaos, right?

MICHAEL: Right. That's the star equals. The star equals is gonna match any part of the selection. So, that's super Cool.

JASON: Yeah. That's super-handy. This is one of the things that I feel like the part of this stuff that's really interesting is when you start getting into like I am attempting to find all of the links to this domain. Sometimes prefixed with www. Sometimes it's not. Sometimes it's docs.domain.com or app.domain.com. But I want to find them all because we want to link to them like one or two times, not 150 times. Right? There's a lot of power in just being able to quickly highlight this stuff in a page. Or, you know, if you're trying to get a report together to show the marketing team that you did in fact link to the app, you can find it really quickly. There's stuff like that you can do that it's just -- it's very handy to know these tricks even if it's only for debugging.

MICHAEL: Totally. Yep.

JASON: One thing I really like for this, if you want to match the file extension. Hey, this is a PDF, let's add an ICON at the end, is there a way to do that one?

MICHAEL: Gosh. I don't even know.

JASON: I do!

MICHAEL: Oh, do it. Do it.

JASON: I do. Let's do this.

MICHAEL: Just flex, man. You don't have to ask permission to flex on your own show. Gee. Come on.

JASON: Here's what I'm gonna do. We've got -- we've got a couple PNGs here. So, what I'm gonna do is let's do a selector for anything that ends in PNG. And that is a dollar sign at the end, I think. Now I'm gonna -- now I'm gonna embarrass myself. And these ones will override with an outline of -- we'll go with three px solid crimson. What we should see is these two should now get a solid outline. And it didn't, which means I screwed it up.

MICHAEL: You want to do image. You're on href. Or H.

JASON: Oh, god, right. Image. And then we got to do source.

MICHAEL: There grow.

JASON: I got the part that I wanted to get right right, it's just the rest they screwed up.

MICHAEL: Right. You know, that's not a bad place to be. That's what friends are for. That's why we pair program instead of doing it on our own, and that's why we do this.

JASON: At some point someone from the chat is going to guide me gently away from the style sheet. It's okay.

MICHAEL: Another way to solve this problem is with a rubber corgi.

JASON: Hold on, hold on. Here we go. Look at this little friend. They can be yours. Free shipping! Wait. Dev/store, and you can get yourself a little rubber corgi. Look at them. Look at this friend.

MICHAEL: So cute, so cute. The debugging partner you need.

JASON: It's 100% true. Hey, why did none of my CSS work? Well, friend, you did it wrong. Okay.

MICHAEL: All right. We --

JASON: Oh! It's burger time.

MICHAEL: It's 10:40. We didn't get as far as -- okay. So, there's one more thing and I think we'll kind of -- there's one more thing. And so, this is kind of like the key ingredient to like building like systems with this stuff. And it is the Tilde equals selector there.

JASON: Okay. All right. And what does that one do?

MICHAEL: Which also, while you're writing that, I just want to say, I'm glad you called out the dollar sign equals. I have never come up with a good example to demonstrate the end. The URL, you never know what's going to be on the end of a URL. You can't demonstrate it with URLs. With that, it's great. The image source is a perfect example of that. I dig it. Okay. So, the tilde equals is kind of interesting. And this is where it gets into like framework territory.

JASON: Okay.

MICHAEL: So, what it does is it will match exactly like class does. So, it's a space delimited list of strings. So --

JASON: Interesting.

MICHAEL: What this does, and I swear this is going to pushes into kind like burger time very shortly. So, this is where we can start kind of building up like our own APIs. So, for this --

JASON: Okay.

MICHAEL: Let's do something like... let's make a class right now for avatar. You can keep that. Let's make a new thing. We'll just do a .avatar.

JASON: Okay. So, I've got avatar.

MICHAEL: We are gonna use this -- how are we gonna do this? Let's do a data -- let's like pass in some like APIs. So, we'll do like data- no, crash this. Instead of a class, do data avatar. We're going to go full bore into this.

JASON: We can skip out the class name.

MICHAEL: Yep. Take that off. Perfect. And so, now here we can start doing stuff that's really cool. We can start adding some varies properties. We can do -- let's just do small. Let's just go simple.

JASON: Okay.

MICHAEL: And let's do another one that's like, bigger.

JASON: So, let's see. We have like 40 pixels and maybe we can do one that's round?

MICHAEL: Yeah, sure. Let's do a round one.

JASON: And we'll do border-radius: 50%. Perfect. I think that will work. So, then I can just apply these to --

MICHAEL: Yep. Now you can apply these. So, data-avatar = round. You can do another one that's small. And then to demonstrate why this is valuable that we use the tilde, let's put both of those on the same one. Small and round. You know, that's actually --

JASON: Wow!

MICHAEL: That's actually a pretty apt description of me. Small and round. [ Laughter ]

JASON: Ah, the burn.

MICHAEL: That's how my kids describe me all the time, at least.

JASON: This feels too self-aggrandizing. I'm going to switch this up.

MICHAEL: You can make me bigger. I'm not worried about it. There we go.

JASON: You're now in charge.

MICHAEL: Big and round. That's the value of these attribute selectors. That's kind of cool. Now we can start building our own API. And unlike class class which can get polluted between the third party library, the stuff you're doing and the utility selectors we're creating these just kind of like -- what is it? We're creating these little like pockets of API, right? So, like small and round is now like associated with this kind of like, I don't know, I think of it kind of like a function, right? Or like a component even. You know, and so we have this -- this flag that we're -- we're attaching. But specifically to this. And when you think of like BEM, you have to do like, you know, class, avatar, you know, dash, dash. You have to go through all this dance to not just have like avatar.small. Because small could be coming from anywhere, right? Or applied to a bunch of different stuff.

JASON: Right.

MICHAEL: Or isolated. It's a very fun way to like apply styles.

JASON: Yeah. Also, chat, I need everybody to take bets on who Michael was just consulting when he looked off to his right there when he was trying to think of something. Because he was like, what am I trying to think of here. And then he came back with an answer. He's got somebody over there with cue cards. I want to know who it is.

MICHAEL: Oh, man, if I could hire a producer for my life to just sit right here oh, that's leveling.

JASON: Was it this guy?

MICHAEL: The corgi producer. I need it. Okay. Cool. So, we are going to run out of time. And so, we need to -- we need to hustle. Because we have some burger stuff to do and I think that we can probably jam it in. Now, before we get into that, I have a kind of like guide that -- or I have been playing with this stuff for like a handful of years. I just threw up a site that the styling is all whack. I did something and it's all jacked. But if you go to avocss.dev, there's some additional information on kind of the way that I think about how we can use attributes and whatnot. See, this should be dark and those colors would make sense.

JASON: I see, I see.

MICHAEL: It doesn't make sense at all. This is kind of the idea -- these are some of the ideas I have around how we can use these to make really cool design systems. Or how I have been using them just in private, non-public repos. So, let's go to npm real quick. We're gonna move on. What we're talking about kind of embodies the principles and videos that I share on that site, though. That's what I wanted to share. Okay.

JASON: What am I doing here?

MICHAEL: Look for burger.CSS.

JASON: Oh, you like did a thing.

MICHAEL: Yeah. I just pushed this up right before our call.

JASON: This is smart phone better. So much better than what I thought we were gonna do.

MICHAEL: Okay. So, we're gonna need to import that. We'll probably use like a link in your head or something like that.

JASON: Oh, yeah, we can unpackage this or something.

MICHAEL: Yeah.

JASON: How does one do that?

MICHAEL: Let's go to unpackaged.com.

JASON: And you just do one of these and it works? It does! Oh, man. So cool.

MICHAEL: Also, for those distributing CSS, there's a style property that you can put in your package JSON. That will redirect it. It will make the source file. It will make it -- instead of index.js, it will make it this. When you go to burger.CSS, it will get the source file.

JASON: I got something wrong. Fine I can do a crossorigin. crossorigin anonymous. I don't have that.

MICHAEL: If it doesn't work, we can copy and paste the CSS.

JASON: I think it's going to work, I think the VSCode is telling me I'm being unsafe. We all knew that was true.

MICHAEL: Okay. Let's make a new section and make a burger.

JASON: Okay.

MICHAEL: This might actually because styles were hastily written. This may affect other styles on the page.

JASON: How dare you.

MICHAEL: We can comment those out -- yeah, it definitely abused your page.

JASON: It's all good, it's all good. I'll clean this up a bit once we get done.

MICHAEL: Awesome., let's do -- let's start. We can use divs for this or use an LI if we want to. Or a list -- let's do that. Unordered list.

JASON: Okay.

MICHAEL: Yeah.

JASON: How many do we need?

MICHAEL: Let's start with two. Beautiful. Okay. So, we're gonna use a data attribute selector. And so, we're gonna apply the data bun, or data-bun and then equals crown. It's gonna get us the top bun.

JASON: Ah.

MICHAEL: And then -- yep. And then heel is for the bottom.

JASON: Love it.

MICHAEL: Okay. Cool. So, let's see what we got there. Oh no! I think our styles are -- oh, wait, no, they are load, though. Okay. Let me -- let me consult -- oh, man. I'm gonna be so sad if this doesn't work.

JASON: Is it data -- there's data-bun. Data-bun... why aren't you working?

MICHAEL: Shoot. Oh, maybe I need to -- so, put it in the UL, do like data burger.

JASON: Be really confuse for that... oh you know why that worked? Because you -- because this is where the -- all the display stuff --

MICHAEL: The display flex set.

JASON: We needed to reset the LI.

MICHAEL: This is not a production-ready CSS.

JASON: This is a production-ready burger, my friend. We're gonna get off this screen, produce this burger and it's gonna ship to my stomach.

MICHAEL: Okay. So, we've got the crown and we have the heel. You could screw it up by putting a new crown. I do not handle that well at all.

JASON: I'm not going to do that. I'm ready for whatever comes next. Somebody is already ahead of us. Where's the beef? Where's the beef.

MICHAEL: Okay. Let's do a data-patty right there.

JASON: Data-patty.

MICHAEL: Yes.

JASON: Any attributes?

MICHAEL: Just leave it like that.

JASON: Ship it. Oh, my god. This is a 10-pound burger.

MICHAEL: Yeah. That's the Sarah Drasner burger.

JASON: Is Sarah here to defend herself today? She is not! Pile on, everybody! What's missing from this one is the bucket of water that Sarah's burger floats in.

MICHAEL: I am very much looking forward to that burger-off. I will be calling it at home. Excited to have both of them. It will be amazing.

JASON: We have talked about making it into a charity event where we let people basically show up and we're going to set up opposing food trucks and just harass each other across a parking lot.

MICHAEL: I am there for it 100%. So, we can actually make this a more reasonable patty size. So, we can do with the attribute value, we can do something that I really like. Do equals. And we're gonna do weight, colon, and use 70 grams. That's what I really like for my double Smashburgers. We're going put it all together. No space there.

JASON: Gotcha.

MICHAEL: What's interesting about this, it has -- this is a personal preference. But one thing that I got into with utility classes is adding special characters to differentiate things. So, like for a media query, I might put an at in there. The thing that's unfortunate with classes, though, you have to escape those special characters. In this case --

JASON: Okay.

MICHAEL: They're just strings. We can put any special character that we want in there and it's still kind of grabbable in the source.

JASON: Weight. We just get to drop that right in there.

MICHAEL: Yeah.

JASON: That's really nice.

MICHAEL: Yeah. 70, 80, 90 grams. This is all style, and not practice. This is not really enforceable. Something cool about this style, it does start to feel a lot like working with components. I have a patty component, I have a prop of weight and a value of, you know, 70 grams.

JASON: Yes. Now, I don't want to rush you. But we have like 4 minutes to finish this burger.

MICHAEL: Oh, that's right. Let's add some cheese. So, we'll put some cheese. Let's do it above because I think it will break below. I don't know if you have strong preferences on that. But do data-cheese. Cool. And then --

JASON: Love that.

MICHAEL: I can't -- you have to have a toasted bun, right? So, I wanted to show you a little bit of composition. We could, if we wanted to, add, you know, bun -- like bun toasting to the buns. So, I think it's -- if you go data-bun, you can do toasted.

JASON: Like so?

MICHAEL: Yeah.

JASON: Yes.

MICHAEL: But that's just the top, I want both. I want to compose this in. Let's take that off of both. And let's do -- we'll do this. I'm gonna compose stuff in. And so, we'll go up to burger. And we'll say, data-burger--bun. So, this is kind of like -- what is it?

JASON: BEM?

MICHAEL: Kind of BEMish.

JASON: This is very BEMy.

MICHAEL: Do things below. I'm going to use two dashes for that to target those. And then I'm gonna say equals toasted on there.

JASON: Oh, interesting. Okay.

MICHAEL: Now it's gonna toast both of them. Yeah. We kind of like cascade a little bit in there. Now we have -- I know we only have like a minute left. But we can add, we have pickles, we have mustard which is one of my favorites.

JASON: The pickles go on the bottom, right?

MICHAEL: Cool. Yep, yep. We need some pickles down there.

JASON: Yep. Okay.

MICHAEL: And then we can do some -- I like mustard right on that -- I just pile up the mustard like right below the -- or right on that bottom patty right there.

JASON: On the bottom patty.

MICHAEL: No, sorry, on the heel.

JASON: Gotcha, gotcha.

MICHAEL: Let's make this a double. I think doubles are great. Especially if they're that small.

JASON: This was a nice touch, I like it.

MICHAEL: It only works for the doubles. If you try to cascade that even more, it's not gonna work. So, we can do, and one last thing, let's do data-burger, oh, shoot. Toasted. Okay. Let's do data-burger--patty. And we'll do equals -- what do we want to do this? Shoot. Is that the weight -- oh, yeah, cook. So, we'll do colon cook and make that medium-rare. And that should -- yeah.

JASON: Oh, that was subtle. But it was there.

MICHAEL: The gradient shifts just a little bit so it's a little bit more.

JASON: You see? Everybody? The thicker gradient there. No, wait, put it back in. Now it's nice and -- oh, that's thin. Look at that. This is great. Okay. So, I -- I could tweak this all day long. And if you want, giving Sarah a chance to defend herself. We did build a website together where Sarah did an explanation of her burger. So, this is mine. It's got some details on how it's put together and then Sarah did such a better illustration.

MICHAEL: Oh, my gosh.

JASON: Than I would. I don't know why I brought animation. I legitimately brought a wet noodle to a gunfight with Sarah, let's do a website with animations. But this is us both doing a write up of how we make our different burgers. That's a way to go a little bit deeper. Where should people go for more information. We've got Avo CSS. Anywhere else you want people to go?

MICHAEL: It if you do down -- I think if you go down just a little bit, there's a couple links to two blog posts I wrote about this style. One is a description of the style itself. And the other one is comparing it specifically to how you would author things in BEM. And then kind of like, you know, how it extends a little bit.

JASON: Gotcha.

MICHAEL: But yeah. This is something I have been having a lot of fun with. I think it solved a lot of problems for me. I think it communicates a lot better. The composition is really neat as you see with the burger and being able to kind of make selections and kind of like lift those APIs up and whatnot. So, yeah. This is just been a lot of fun. I hope that this demo kind of clarified some of the things that we aren't able to cover in the -- in the talk. But it's just kind of some of the really fun ways that you can use and abuse attribute selectors to do some really fun stuff in CSS in my opinion.

JASON: Yeah.

MICHAEL: Yeah.

JASON: So, let's see. I tried to share this link. It didn't -- I'm just gonna put it in here. This is a link to the Discord. Which is --

MICHAEL: Yeah.

JASON: Discord/gg/lunch Dev. And that will take you to the Discord. I'm going to close that here. But, yeah. Actually I need to keep that up so I don't lose the link. With that being said, everybody go and make sure you head over to Twitter. Give Chantastic a follow. And as always, this show has been live captioned. We have had -- let me make this bigger so we can see what's going on. We've had Amanda with us all day from White Coat Captioning writing things down so follows who need it have access. That's always on the side, through our sponsors, Netlify, Fauna, Auth0. And you the subscribers. Every time you kick in, hims me pay the bills. I appreciate it. I saw subs from Don, Ben, people subbing on their own. That really helps out. With that being said, headed over to the website, check out the schedule. We have some incredible stuff coming up. Tomorrow, it's a special episode. We don't usually do Fridays. But I'm doing one tomorrow. I'm bringing on Taylor Barnett, talking about serverless databases. We're going to build a project uses PlanetScale and next SS. Come check that out. Next Tuesday, Alexandra Spalato, and headless WordPress with Gatsby. And then a Thanksgiving break. But coming back strong. Scan through this, there's even more episodes coming up. Hit that ag -- whoa. Hit that add on Google Calendar button so you get notified of new episodes, notified on Twitch, all of those things we've got -- normally we would go and raid somebody. But today is Prisma's serverless conference and I'm actually gonna be speaking at it in like 20 minutes. So -- so, go -- go head over there today. That's where we're gonna go. It's actually on YouTube. And I think this is a direct link to it. Let me -- is this... is this the actual event? Yes. This is the actual event. It's happening live right now. You can head over to it. I will be speaking there shortly. Michael, any parting words for anyone?

MICHAEL: That's it. Thanks so much for being here. And this was a lot of fun. I want to honor the 11 -- or the hour -- 90-minute timeline. Thanks so much. This was a hell of a time. Thank you.

JASON: This was an absolute blast, an absolute pleasure to have you on. Thanks so much for hanging out. Chat, as always, thanks so much for spending some time with us today. We will see you next time.