Build CSS APIs with Attribute Selectors

hey ben how's it going let me know if you can hear me um i still got the thing up but let me know if you can hear me good good good you can hear me awesome i'm gonna start in just a second i'm just gonna do one more thing just sign off of slack for a second awesome awesome [Laughter] look at that what what a handsome chat overlay right there okay let's turn this off out to lunch yeah pretty great and then let's let's see how it's going let's get one more up there oh yeah look at that i'm excited to see how it works with like a a couple of them so i'm curious i'm curious your thoughts um like before we get going here the i was kind of thinking about maybe bringing it uh let's see if i can move my cursor over there bringing it over a little bit like maybe a little bit more over me maybe make them a little bit bigger and um kind of pull them away from the side i think i think is what i'm thinking curious uh if that kind of matches your sensibilities hey steph how's it going welcome do you see our fun new chat overlay up above ben and i worked on that last week is that when wednesday did we do that yeah man time flies um yes oh awesome awesome i'm glad that you watched it thank you so much for for checking that out time really does fly i know ben you're you're getting close you're a week in on uh on your fun frivolity and festivities i'm really uh excited to see see where we go i'm also excited every week whoa every week this stuff kind of gets slightly better i'm actually really excited um to just how every week it's it's kind of improved a little bit like every time it gets better so one thing that's kind of funny is i broke my monitor so this is the last story i'll tell them okay actually here let's turn that off okay um so i broke my display i have this i have this light right here actually i'll show you what it does um i'm gonna find the controller i got a light right here it does pretty much everything um and i but it's on i have this the i have like the the crappiest possible light stand you could possibly imagine is very bad it should not be holding a big light with a gigantic light modifier on it it's like it's it's metal but it's like should be straight but it's kind of like just hanging like this and pretty much every time i move anything it falls over anyway recently it it fell over and took my monitor with it and so just like crashed and just like all over the place um i posted some pictures on twitter and it's just it was just bad unsalvageable um totally broke everything and um so today i'm kind of in this weird situation where like what like what do i do so i have my laptop here and then i'm bringing it in via hdmi to my computer with uh like one of these little like kind of video capture card type things and then i have it's in obs and then it's come that's where it gets the overlay and all that stuff and then it's going to my my uh a-10 mini where it come goes out into the the internet twitch um so yeah so fun times fun times kind of i mean i guess it works it doesn't look too terrible coming in as a as a video feed so there it goes um yeah so yeah anyway uh awesome chat overlay we did there should still be the bot up i think if anyone wants to make a show my.chat overlay super cool um let's see incremental progress yes is real yeah you know if you if you if you can do one thing a week i feel like that's pretty good progress pretty good progress um i am this is kind of funny because my work laptop is set up different than my personal laptop it doesn't have or my personal computer so it doesn't have a lot of the same um things so we'll be uh you know kind of exploring in a really fun way let's select some css yes let's my favorite thing to do with css is select what's up michael travis good to see you what's up awesome happy c happy to see you folks you always make my life better i appreciate you um okay cool so today this is what we're this is what we're going through i have this um let's see i'm gonna pull up a link so uh lerman jason is a really cool uh you know i don't know probably one of the ogs of this kind of like developer like you know streaming type thing um and so i am doing uh something with um uh with with jason uh coming up it's in like 10 days and we're gonna talk about css uh attribute selectors now we're gonna be going i think it's gonna be i was talking with with ben about this and i would appreciate your feedback on the whole thing like where you think we should take this but like basically the idea is we're gonna talk about attribute selectors in general kind of how you would use them um for style and so sorry i'll back up a little bit this little pr repository is where i have um a handful of my notes up to this point we've done this kind of stream before we just kind of i present to you what i'm thinking and then we kind of work through um like how it could be better and you know usually it um it is um when it's not just me trying to think about it so one of the things that ben had recommended early on was to go to like really back up and so um yeah so why attributes not class names yeah so i think that's kind of i don't know we'll see so um that'll be kind of like a middle middle point in this so what i have for these first demos is showing it as kind of like a like almost like a well first showing you like okay if i wanted to style disabled right because as soon as you start putting like class styles on here well then you have um oh i'm getting an error hopefully no one else is getting an error but whatever um so if you have these class uh attributes right here um and i start styling this thing well it's gonna start it's it's not gonna honor the um just my brain okay cool um it's not gonna honor this like default disabled um anymore and so kind of you you're overriding all those styles and so we can opt back into that by kind of using attribute selectors you know to do that one question i had for any friends who are really good with arya is that what is the use case of arya disabled over just the disabled um thing here uh attribute disabled attribute here um would love to know your no know your thoughts or any articles that you want to send me i'd love to love to read so we have um so that's kind of like the in is like okay what are these kind of used for just in the the selectors and but then how can we use kind of step number two is what is the the full scope of the api look like and so my favorite way to demonstrate that is with urls so we go up here and i just kind of put in a handful of um different urls show that we can kind of do like a little bit of debugging like if we wanted to kind of highlight all of our https um and note them as being insecure etc so and then i have styles for that again i'm just kind of like recapping like you know what we've already gone through i do a little bit more debugging or we haven't gone through but what i've set up before today um we show the different styles of attribute selector and then um kind of show like different ways you could use it for debugging like if you have an image without an alt et cetera um okay to the aria disabled point ben says doesn't make a field unfocusable it just makes it so when you navigate to the field with a screen reader the screen reader says something like dimmed okay cool cool this is nice because folks tend to expect buttons to be focusable so if they're navigating a form and can't focus on a button there might not even be aware that the button is even there okay i see so is the case for this which i've always found kind of like an odd case but is the case for this where there's a button presented in the ui or let's use the case of buttons so like there's something presented in the ui but it is disabled it makes it so you can still focus it but then it will tell you that you're not allowed to click it i guess um here's a css tricks article okay cool i would like to open that up okay yeah exactly cool cool now i've always felt as a like kind of like you i ux type of person um that that is a very weird design decision to ever show someone buttons that they can't click um but you know people do that so that seems to be like the differentiator there um i can't open that link because i'm on two different machines right now that's a disadvantage unfortunately of my setup today but um thank you for the link i appreciate it um i will have to check that out and i remember i think ben you did a stream on um on this now that i'm remembering about uh inclusive buttons um like that too if you if you got it yes with cinderina um that's right that's right it's all coming back to me it's all coming back to me now that i have a hook for uh why i need that information um okay my thing's a little weird today everything's falling apart okay uh yeah tides are turning against disabled because disabled doesn't give you the feedback as to why it's disabled and what you can do to undisable it yeah that makes sense um steph um it's really popular to disable buttons to tease users into up oh that makes sense um into upgrading when they can't access feature i'm not saying this is correct yeah okay that makes i can see from a business perspective uh why that type of um kind of unclickable or disabled button uh would make sense um und on i'm assuming undismissable um over enable um anyway i don't know maybe i just misread that on dis undisable okay tell me more tell me more um okay cool so that's what we're so that's where that's kind of the um structure part of it talking about like just like what um i'm undisabled oh cause you can't diss me um uh so yeah so that's the structure portion so the first part of it is just i don't even know what undiscipline is um okay okay so that's the structure part of it where we cover kind of like you know how that would fit into this um obviously i'll probably improve my example uh with ra disabled now that i understand the difference and maybe built up a use case around that um and then kind of the now these um i start with you'll notice that that we're like clearly missing the like tilde equals um you know variant of this so that's kind of like what i see is like the next section like where we would use that to um build up like custom apis for styling i am curious if you all have examples where you have used the tilde equals combinator is that what they're called the tilde equals combinator i'm gonna i'm gonna go with it because it sounds cool even though i'm not sure that's the right word um the selector um if you've used that in a way that isn't for kind of like custom styling apis because i was having a hard time thinking of an example where it made sense or like where i would have kind of a space delimited string where it wasn't something that i was making so curious if you're using that places gohan sushi welcome always a pleasure to see you i like you you're awesome what year is this yeah that's a good question i like to take it way back everything that's old is new again i have to believe that as i get older and older that i can be new again um okay so kind of step two this is and i was working on this yesterday morning so you know would love areas of improvement be one mine uh loving you showing off some adder selectors so powerful yeah no they're my favorite thing so i started um uh i started on this framework that i used kind of privately at my last job i think maybe like two and a half years ago and i i remember just like i was like oh my gosh i think we should use attribute selectors and we should use um data and like custom property and like this would solve a lot of needs for us because i worked at the shop that was it was like you know a lot of rails stuff you know so we had you know apps that were primarily written rails but then we had apps that were also written and react and something that drove me just bonkers is that we had to duplicate all of our documentation for literally everything because um you know you couldn't copy and paste our class stuff into like if we had a big block of documentation for like this thing that you wanted to do you couldn't copy and paste that into react you could only do it into rails and so then we would have to have like kind of this toggle for like oh okay well if you're in react you would you know copy and paste this chunk that uses class name et cetera and so i was like oh my gosh we should just opt out of that whole thing because you know react and literally everything just kind of like just leaves data alone um and so like wouldn't it be cool if we had a css api like around that and kind of like through a lot of that like found a lot of benefits i think um so yeah so this next section um and that i plan on going through is talking about um let's see what do we do oh yeah so i take that debugging thing so i kind of introduced the concept of debugging um a little um early on with images not having alt attributes or like insecure links with http http um and no s and so i kind of take that further and ask the question of like okay so what if i what if i wanted to debug stuff but i wanted to do like just debug the images or just just debug the links take that a little bit further and kind of raise that as the question of like okay this is why i might want to have a like comma delimited list so i could not debug everything all at once but just like kind of focus on like certain pieces i don't necessarily think this is the strongest example but i do think that it's an example that kind of like comes from like what we've been working on before um which i think there's a nice kind of like cognitive next step to it um but also curious if you have thoughts on that being a good a good path um but anyway this is the section where we kind of like dive right into kind of locking these down into this like you know tilde equals which is the space delimited and um being able to kind of like create cool uh like apis with this um and in at the same time describing how like this selector basically just allows you to make anything any attribute class names or a class which is sweet um so yeah so that's what we have so far i feel like i've missed some things i'm going to come back um oh yeah i yes i'm in light mode look at this what a nightmare what do we what what am i doing with my i didn't even notice i was talking with ben um uh theme is that how we do this color theme we go like that and then we go to dark plus i think that's the one that i like yeah that looks a little bit more and you know that makes the the chat bubbles look better and everything yes thank you um i have a weird setup today i broke my monitor so i'm using i'm doing everything from my laptop over here uh okay cool i think i think i'm good js is inevitable interesting elaborate on js being inevitable i'm super curious i think i missed the thread um also welcome glad you're here um rest in peace what year is it what am i doing with my life i i know you know honestly i cannot answer that question most days i literally i was signing legal documents for something i literally wrote down 2011 first 2011 that was a decade ago i haven't what is time [Laughter] yeah it's so sad it's so sad time is definitely not i say this a lot time is not a binding construct in my mind i have no idea what day it is what day of the week what day of the month what year even most times i have to look it up every time um [Laughter] okay so um this is where we get into that's what so this is what brings us to today and um and kind of where i think it would be like where i'd love to start building up some examples so for those not familiar i have a post where i kind of uh blog is a mess add it to the list of things that's just a that are just a mess about me so i have a post and i um link to a stream where i talk about all of these things and kind of my favorite way to use data attribute selectors this is kind of like the end goal like so so this is the end of where we want to like end up with this material where we're talking about kind of using these for like specific apis and um and whatnot for an avatar i like avatars because at least with you know kind of modern markup and css capabilities um we can limit it just to a single selector so it's not super complex but also um it's also visual so that's number two and then number three alex welcome good to see you happy you're here um time is a flat circle what is that from i hear it all the time and it's one of my favorite things and i have no idea what it's from uh it is great uh so what we're talking about yeah so it's it's one element it's also a visual which is great and i think people have a natural understanding for um the like wide array of cases in which you would see an avatar um so we can build up an example pretty quickly um which would be cool so so something that i'm thinking about is like let's say you have a profile page that shows both you and your friends typically it's gonna show you really big and then there might be some type of um like avatar group i guess um and so there's this natural case of like you're gonna see two of these things separated from each other and like what does it look like to have an api that kind of supports both of those things yeah there we go um welcome welcome welcome so many everyone's so happy to see alex i love it uh yeah definitely love avatars as a visceral visual example cool um by the way uh mccarter oh my car awesome glad to see uh glad to see who you are on twitch um thanks for shouting that out i know i wish i wish man i really wish there was a way to get universal uh display names but you know i feel like we're past that time just everyone's different on every platform okay cool so let's dive into this i have a hard stop at like 10 55 today so just fyi um if even if we're just like in it and we're just doing the best work ever i still have to leave uh so i appreciate you being here um cool it's the monday party spot yeah i i don't know everyone's doing the you know tuesday thursday thing it's like i'll just you know pick up what people don't want to do i don't know what is that by the way do people not like uh too many meetings on mondays okay so um let's so the goal here is to try to get to this where we're like doing the kind of the full the full api with this stuff and i have a handful of examples kind of in the end of here how you compose this all this kind of stuff so i think that this is probably kind of like that end state that we'd like to get to at the end of um the stream that we build um i'm using an api that i haven't used ever before called uiavatars.com which is actually kind of fun because i can just put put mine and others names in here as we build this up and have that in place so um i love i love seeing friends seeing each other here makes me so happy um okay okay okay okay focus okay so um i guess we can probably just build up the example and now i'm really curious kind of one of the things that kind of makes this really special to me is the connection to like custom properties and so i'd like to know is that in your opinion taking it too far if we kind of like dive into the relationship between this and custom properties like should we just keep it to the avatar and building up the selector apis like i'm really curious um really curious what you think like if if if the my brain is so broken um if going into custom properties feels like maybe a bridge too far like you can kind of draw that line yourself and this is really more about the select selectors jonathan catrell hey good to see you thanks for being here um got you in the background of my serious work meeting and i can't hear you but i'm watching i'm sorry i wish i could have done something better with my hair oh shoot actually i forgot see i didn't notice this with the the white theme hold on give me a second got my other light that points up at the ceiling that helps with the helps with the hair which has not been maintained hype custom properties okay steph if you're saying hype custom properties i i trust you oh but then michael focus focus i i too many smart people telling me too many smart things um i feel like css vars are conceptually simple enough okay cool so maybe we could just maybe i just don't really talk about it i just kind of like just do it and you know like kind of you know go with it do both okay cool let's do that then okay so in this so right off the bat we have this case so i have um i have set up a very simple app right now um so we have only the this is our style tag this is our body and our image is um just an image with the uh data avatar and i will this might bother some of you but i'm gonna interchange data and data like without apology that's the way i do it um okay so we put that on there and then all it does is give us the size okay so i'd set this to a six rim i think that doesn't seem right maybe i but maybe it is again weird environment stuff let's just change it and then see see what happens okay cool so in this case where i tend to use custom property on this is is that i would have something like uh avatar size and we can go into kind of like my personal naming for some of these variables at another time but um is going to be 12 rem so we'd share that like that and then we would do for okay cool so that's the same now so we just have that in there but then also we can change it by just putting styles right in here um forgive me if i miss chat i'll catch up in just a second um so now we can do a custom oh shoot i'm not in i'm not in javascript i do that all the time uh this is gonna be just uh avatar size and then we can change this back to six rims here okay cool so that worked so um i mean this is like the coolest thing i think probably about you know the custom properties and the data attributes is you know we have this this the cool thing here so i'm going to change this back to a i said absolutely nothing in that sentence and yes you're right and calling me out for saying a lot of things that weren't anything um so one of the coolest things is that we can just so like let's say that this is our profile image right right here without having to add a bunch of stuff we have now this uh kind of we've made this one a lot bigger let's make it even even bigger because why not always bigger i want to see myself bigger i'm sure that you all want to see yourself bigger as well um in biggin as my friend ben meyers likes to say and big in it um okay cool let's see if i missed anything um what jason's questions guide further discussion if okay cool okay if we need to kind of like go into that okay cool i guess mostly my question is like if it makes like if it feels like too much of a non-sequitur to um go into this i do think that we could probably like an example like this is so simple like it's just one custom property and we can see the immediate value of not having to set both of these um you know because i again i really like avatar because there are all of these things that we kind of naturally feel are the right decision um even though um they're not i don't know they're standard i guess you know like so like avatar like they're pretty commonly either square or circle or some type of squirkle um and so like it kind of makes sense to be like oh yeah like i'm gonna use the same value for both both of these i should use a custom property um so yeah so then we'll get into the smaller ones right after that um 1000 percent yeah just go for it jason's audience is js heavy so anything to show them how powerful css is i'm going to say go for it yes i like it see team css oh all these things are popping up behind i should oh because i i had to fix chat and so okay sorry sorry sorry sorry uh pinholes or b holmes dev i'm trying to get better about saying the the twitch name when i know who it is uh behold steph thanks for following and then uh dimitra maximoff galad i didn't say that right but thank you also for following as well uh i really appreciate that you're here um okay juice okay so like in big in it okay that's okay the in beginning make it big yeah we can make it even bigger like i mean i need some room for other avatars but not much so i think that that's probably that's probably good um some squirkles so [Laughter] it makes me think of like uh some kind of um like a like tequila brand or something sir queer so thank you so much for uh for the sub i appreciate it uh thanks for being here i appreciate your support um for those who aren't following stuff stuff do you want um i mean obviously they can find your channel because they like see your link but if you have um a you know a domain or anything like that where you're posting um your your events could you throw that in there perfect thank you so much um twitch gave points for my contribution thanks oh nice oh cool cool i don't know i don't know how twitch works yet i'm learning this every time uh every day we get we do we improve one thing around here um or every week we improve one thing okay so back to the back to it um okay so the cool thing is is that we're able to or i see a handful of cool things about this right so we have we provide a default we've been able to kind of abstract over these two values which are going to be the same but then also we um what is it uh we're able to change this without having to introduce new apis this is one of my favorite things about kind of utilizing these custom properties is is that i can just go in here i don't have to have a special like utility class made for this i don't have to like do whatever like whatever the layout um demands i can just put it in there and be like this is the only one time place that we have a 30 you know ram avatar like why do i need to make a new api or you know class for that i don't i don't that's the that's the truth so um so what do we do with the rest of these so we notice that if we just put data avatar here we have um you know whatever uh the the kind of same size one but we actually want this to be um we want these to be even smaller maybe so maybe we want these to be like i don't know two and a half ram like 20 pixels is kind of like the smallest avatar that i see so why don't we um go that route um actually let's just let's just you know because it's not something special about rim that's that's so dang small i can't i can't i can't my my old eyes won't allow it um let's see yeah twitter yeah like that too steph throw it in there i'm all about people people finding each other um yeah if you don't follow stuff do it um a potential issue people might have is with inline styles yeah and we can and we will get to we'll get to that and i appreciate that because i think that one of my uh goals if we can get there is to talk about how you might want to include this in a layout or like kind of have some composable selectors for your layout how you would maybe do the same data attribute style for layouts etc etc um something people have been trained to hate without context yeah that's true that is true okay so we have this 32 pixel one and um this is going to be kind of i mean i guess if we have some kind of you know we're using some type of javascript or whatever um we're going to map over these and so it's probably not going to be a huge deal that let's put these inside of a div actually i guess this wouldn't be a div let's let's mark this up right um this would probably be some kind of unordered list and each of these would have a list item wrapped around it we're gonna do it let's do it um obviously we're gonna get some default styles there but that's fine we can ignore those or write some css around them um actually yeah that might that might actually be a good seg a better segue into like why we would want the layout i'm all about creating some problem that you naturally you're investing in the solution towards um instead of just telling people uh how something works um okay ben this is in the react-y weeds but could be worth calling out inline styles for css bars is usually better than css and js props if you want to map those to js variables interesting could you elaborate on that a little bit that's what made me accept the inline styles as good okay okay usually people don't know why they rage against him yeah it's so funny i gave this presentation it was a conference talk i think who was it with i can't remember but we were just building something fun on twitch and um we were building a card game i think we were building poker um and so i built out a whole table and sit with a css grid and we were kind of you know i had cards and they would flip and it was like it was it was pretty cute um all css but in react so i was kind of showing how these things go to react and everyone was like so perturbed by the fact that i was using inline styles and it's like we're just like mocking this thing out we're just like doing it really fast like why on earth would i set up a whole project just to like make this thing on stream like switch files all the time irritating irritating cool cool all right so so we have this now and i want to show you something really cool um and this is another thing that i really love about um properties you know for good or for bad we're gonna have this uh cascade in now i know that like we've been like hey like cascades are bad um but i think this is pretty cool and like i'm gonna tell you why so like so we're not cascading any like specific styles this is a very like decoupled kind of thing like we we're we're cascading a custom property into uh into like this i don't know this bit of css i'm so bad with the terms this uh this style um we're just cascading this custom property and we're not like actually saying like a specific style that's gonna like go in so it's really cool that here we have a way of controlling all of these through the custom property but kind of indifferent to like specific um you know like like parent-child relationships um parent-child ancestor like you know whatever makes sense uh let's see okay cool yeah i'll have to check that out again i can't click these links unfortunately they won't show up over here sadly um css variable section absolute bangers of a post cool um rule set oh okay there we go rule set yes yes yes there we go um okay so what do we got here um this is actually coming along pretty nicely and i think that we are kind of demonstrating the things that we want so let me um start taking notes on our like kind of progression so what we did was we created the data avatar um we made a we let's see added a custom property to to eliminate duplication and style with one property or one value i guess um and then what did we do okay and then we used that custom property to make a profile size without introducing api uh and then after that what did we do we um we made some um like relatives i guess or like like a social connection section the social connection section my new podcast um welcome to the social connection section um and then we styled it with uh ancestor inline style okay cool so we have we have all of that okay so the next question is now that we have it in now that we have it working how do we want to make this um how would we go about making this reusable now something that i tend to rail it against is that there's this is the like t-shirt sizes thing like it seems like everyone really defaults to t-shirt sizes instead of thinking about things how like in terms of their layout um or in terms of like kind of how they are composed now i don't know if maybe this makes sense to kind of like build that out because like this is effectively like what it looks like if we wanted to do t-shirt sizes it would look something like this um that avatar um and i would do something i would use that tilde selector and we would do something like size um small i guess and then we would pick some arbitrary size and we would style that custom property um let's call it three rims um one thing that's kind of yeah one thing that's kind of interesting about this is i don't love this actually to be honest i don't think it's great um but we could put this here and it would still work i think did it not work or are these three already um let's make a much smaller no okay it didn't work interesting okay let's see if i missed anything uh welcome to the social connection section i'm your host chantastic crunchy crunchy intro music the update to have your default in the custom property be the fallback oh yeah um sorry um oh to have a to have a fallback um like shoot i need to do that in var right um am i doing this right is this what we're talking about oh if i said it in the main style it can't inherit oh that's right that's right uh okay this is something okay this is something that always trips me up about custom properties okay so is this kind of what we're talking about like this or uh i haven't done this in so long this is so bad uh thank you so much for posting the code stuff i appreciate it uh var okay there we go gotcha with the default okay i just did it backwards um oh that's right and then i could do something like um i don't know can i are these valid underscores like that i don't know trying to remember how i do this chantastic i have such a bad memory for like patterns um and so my memory for patterns is just uh looking at github for what i've done in the past um let me see what we did here so open up this project this is very very very small um view code interesting yeah no i didn't do anything uh particularly exciting here except to put object fit cover which is very important okay cool um i literally read articles create projects to give myself a place to copy paste from yeah totally uh i can definitely see the use case for matching on uh tailwind uh uh tailwind classes yeah yeah yeah yeah um okay so this is actually i i kind of got i kind of got derailed by something that i don't even want to support so the um but yeah so the idea is like if we were going to introduce t-shirt t-shirt sizes um that we would have to change um all of these right and so like this is kind of the part where i'm not totally sure i'm not totally sure where to go next right because this syntax is like not not obvious right like i'm using this kind of like object style to like describe the t-shirt size which is a little bit of a stretch i think if you're coming from you know a more like kind of like class based thing we would have something like maybe avatar [Music] whoops doing it wrong [Music] size small i think is the way that it's usually done um let's see yeah did i not put a oh this is the wrong post i have another post where i compare everything to um bem so avatar yeah so something similar like that so the question is like this feels like maybe a step too far um because it kind of goes into this like object thing another example that i've done in the past to eliminate that is to use a mention i think um so what i've done in the past is i've used this mention which is effectively like a boolean should be like mentioned true and the mention kind of makes it a specific size and adds some inline styles uh to it um or not inline styles styles that make it look right in line in the way that you would expect to see an avatar present in line um so i'm curious does that feel like if we're going to this if we're building up this example that inline case isn't super obvious because that's more of kind of like a content type of thing that we'd be doing um yeah not so sure um sorry just catching up on chat uh very open secret nice jacob welcome good to see you thanks for being here okay i'm sue i'm still super torn on this so let's um let's see we have about i don't know like 10 10 minutes so let's go i think maybe the natural direction that i'm thinking is that let's maybe not go this route for now we had this inline style here that was working for us i think we felt pretty um pretty alright with that and it feels like kind of the natural pro let's see let's make that smaller so we can actually see it take effect okay cool the natural progression that we were kind of the natural place that we were feeling like the next pain um was kind of this style so what would it look like if we wanted to encapsulate some of these into a layout and so maybe we should go about thinking about the layout of this thing first um i'm not opposed to that actually let's call this main and then if we do this as main can we start introducing some layout so let's call this something like data page uh profile i don't know terrible name i'm starting with it and we can kind of figure out that's what this whole thing is for just kind of planning it out um so data page profile um yeah if we're going to do the t-shirt sizes for avatar they'd probably make it its own data attribute that avatar size small um risk overloading the um attributes yeah that's definitely an option um an option as well so that does get to kind of like how i kind of see composition of these things and so like that might be worth exploring too um let's go with the layout because i think that's going to be most important to like kind of that feeling of productivity i'm like getting a result um in this case let's just make everything war uh make sure everything works so um background color is let's call this goldenrod or gold gold's my favorite color it's so good um and then i guess we need to take i can never remember if it's the html or the body that has that margin on it but we're gonna take that off and then in here we're gonna put some padding of uh let's do like three ram or something like that okay cool um oh man as much as i love the gold it's really it's really bad uh for this particular this these avatars we're seeing um also don't love this in safari the the header change not a fan not a fan at all like i can barely even read what these letters are i don't like it um html body margin zero yeah yeah baby up it's like i don't know which one it is maybe both maybe both okay so we have our page profile um i'm gonna do something kind of uh similar here where we're gonna start building out use our data attribute selectors to build out um kind of like sub pieces so we'll call this um like uh let's see what we call this like social connections social connections section so social connections and then this is where we'll style our um you know our thing um i'm really curious actually how people feel about so when you have something like this that's designed to be like kind of like general purpose um love to get your feedback on this if it if it were just divs there's a couple purchases that we could take right like if it were just divs um we wouldn't need to kind of like eradicate these dots and whatnot um so it's only in the case where it actually gets marked up properly properly with the ul that we actually need to use that do you tend to do the whole like like set the defaults here so like if i wanted to uh like if i do padding [Music] uh let's add some measure of padding in here just so we can see a change uh obviously i have to add that selector so this will be data page profiles social connection uh i like social connections so we save that um uh let's see does that work oh yeah because it's taking it out effectively um so we have that the padding is universal between elements but then um just in the ul uh do we have the let's see list style type is none um do we do that because then there's also the there's also an additional complication of like if i make this display flex then i think that stuff goes off anyway oh no never mind it does not um yes yes i don't know okay so we'll gap those up take the padding off actually wait we need to see like this then i would do padding one ram actually no we'd probably want to handle that in the the layout of this thing okay sorry i know that i i ignored chat for a second um let's see gotta hop off always good to see you thanks for being here um always always a pleasure shoot i'm getting into these last minutes um okay so then we would have a let's see data profile oops i don't like the way this selector is shaping up right now um i don't know user header [Laughter] i spend it's funny because i spend most of my time just deliberating about names and um it's because like my first ones are just always objectively terrible um so let's see so this is gonna be here and then let's um put like a measure of padding around that as well i think that one thing that might be interesting is if we made so this might be a step too far and as we wrap this up i'd be curious to know your thoughts on this um if we made data page profile like this like if we made a whole page basically um and used a grid to place all this stuff naturally i want to go that direction um but i'm not sure if it takes us too far away from how we actually feels like we're getting kind of far away because we haven't we've gotten to this point and we haven't even used kind of actually put in any values yet so that might i think that's probably my big question for next time is um how do we get to showing off um values and those the that type of selector um i'm wondering if um maybe maybe we start with values values go that traditional route of of creating apis um and then maybe showing that we don't have to that could be an interesting way to go through that um maybe focus on some high um touch practical components versus a layout okay cool yep um i like that um it might be okay to create a layout and just wave your hand um that it works okay yeah that's a good idea too um i think this is a good move um to steph's point and stuff uh time will go super fast yes um and you can provide a repo with more full featured example if you really want to excellent point i appreciate that um yeah because we can kind of you know we could if we get like steps one through five really right then the repository can kind of can you know do steps six through ten or however many it ends up being um layups are just so contextual with their uh content yes 100 um yep yep yep agree agree with steph steph getting steph's getting all the agreement points so yeah so that sounds um like the approach that we'll take is that maybe layout showing how this works in layout is kind of like a nice to have like oh i'm glad you asked at the end and like you pull out like kind of a fully baked thing point to the repo and show like oh this is the example of everything kind of tied together in a nice little bow um this like one layout page but up to that point it would probably be better to not focus on that specifically but focus on like how you actually use like this particular technique to like to get to the attributes the the values faster um so that people understand the full power of these selectors and that kind of brings it back to i tend to get like off focus quite a bit and so the focus of this talk is really talking about the power of attribute selectors i'm kind of not not composing them into layouts which is a nice to have but the um the the real takeaway that people need to walk away with is how we can get to the attributes and i've kind of gone away from that so getting to even though it's not my preference to do the t-shirt sizes i'm showing how that works and how people can use that is is key so i think that this is i think this is good um i really really really really really appreciate all of your feedback y'all are awesome i do have a meeting um i have to jump to um but i am grateful for you thank you so much for your help and um yeah well uh we'll we'll do this again i think i have one more time before i think i have one more monday before i stream with jason so um maybe we can kind of i'll tidy this up and we can kind of you know really tighten it up but i thank you for your help um and yeah i'm gonna take a log of um all you people who helped me and i will include that in whatever repo we have because i really do appreciate your help and guidance on this so um thank you and they're mortalized thanks to show my chat in this video forever so whenever you know if i put this on youtube then you know there you are showing showing me the way um thanks so much for being here you're awesome i hope that you have a killer week this week i hope that it's a just a banner week and uh you just you feel like you got to the end of it and just uh just crushed it um you all are awesome uh bye bye bye bye bye um yeah cool thanks for being here happy monday pieces friends

Channel: lunchdev

Views: 21

Keywords: games, twitch

Id: MWFbo5KDyZY

Length: 62min 19sec (3739 seconds)

Published: Wed Nov 17 2021