Experimenting for my Laracon 2020 Talk

okay everyone um hopefully i am visible and listenable and uh yeah we're gonna do some work here so i'm working on my laircon 2020 talk and i had some ideas that i wanted to experiment with and i thought why not just pair me with them on stream you know i don't know so this is what i want to work on uh i'm going to grab this example and i'm going to paste it into our view app here we're going to do a little bit of setup i'm using veet and view 3 um so this is what we're going to do we're going to take this template we're going gonna paste this in uh we're gonna see it formatted nicely so that's that's always good um with any luck this will like be mostly uh visible now we'll get rid of this account stuff this prop stuff um actually you know what let's um let's move this out into the app view and i'm going to delete this hello world component we'll get rid of it here we need to set up our styles so i'm just gonna tell and inet text is pixelated um hopefully that's not for everyone uh and maybe it's just a bandwidth thing for one person i'll try and see if it's the issue for me but if i'm watching my own stream if i'm watching it looks okay on my own stream i think maybe i can like bump the font size up a little bit or something i don't want to go too big because i want to be able to see okay so we're using feet uh i'm going to set up talent i'm going to say future all actually no not future all but experimental all to opt into some wild and outrageous new features and i think we'll just take this index.html file and there's a couple ways we can set this up but this is the fastest way i know that's going to work 100 for sure and we'll import that there we'll create a post css config file file new file relative to project root css config.js exports equals plugins require tell ncss auto prefixer and i we'll restart the dev server okay so got some stuff going on there there we go all right so looking pretty good we got some uh some stuff that normally was like rendering in loops that we can't kind of see because uh we don't have any loops so why don't we just like for purposes what we're gonna do here i'm just gonna like maybe create a few of these you know and because this part isn't really what i want to focus on anyways so i just want to get it to like kind of look like something you know that's good enough for our purposes and uh let's just delete these like drop down things so just look for the drop down panels and i'll just delete this one oops come on select all this is all stuff that we'll cover in a little bit more detail in the actual talk but there's like kind of one one sort of like specific thing i wanted to try an idea that i had that i thought we could explore in this stream okay so here's like something right okay so let's um open up the old dev tools here so we can easily do some responsive stuff this is kind of what i want to work on so if you look here we've got this sort of like sidebar section but if you look on like smaller screens that's kind of like the header for the whole page right so if you were to think about this component in isolation you wouldn't really say that like the super wide desktop version of that component is this narrow thing you would expect that like it would continue to be wide right like this looks like sort of the desktop version of that component but um because of the layout that we're putting it in it sort of has to fit in a much smaller space which is why it has to go narrow so designing this whole page together you kind of would use all these break points and do some weird stuff to make that work but if you're trying to think about this just as a component you would never really think that like yeah the soup the widest version of this component is this tiny thing so this is one of those situations where it's like oh i wish we had element queries or container queries because i uh i don't want my components to be responsive relative to the viewport size i want them to be responsive relative to the area that's available to them on the screen and we don't have that and i don't want to go down the path of trying to find like one of those fancy polyfills that exist although there are like some cool things out there and you can do some pretty interesting stuff with um uh what's the resize observer um apis there's lots of cool stuff you can do now but i wanted to try sort of a different idea so my thinking is what happens if we take this component we kind of conceptually think of it as like a dashboard header component and we try to give it an api as a component from a props perspective that lets us sort of control what layout it should use at different breakpoints in sort of a declarative way so i'm gonna try it and we're gonna see if it's cool or if it's terrible trash um so let's just find that component and extract it to start and hope that we've built it in a way that's sensible so i kind of think it's like this bit oh there's some action buttons there too let's see maybe we'll use uh the inspector to sort of find the boundaries of this component yeah so i would say it's um it's probably it might be this one but i think i would argue that it's actually probably this one the one with no padding around the edges so let's find that and grab it so it's flex item center justified between looks like it's probably this one so let's cut that out and we'll put like dashboard header in here and we'll pretend that component exists import dashboard header from dot slash component slash dashboard header dashboard header okay all right things are pretty slow but what can you do so let's dashboard header so there she is right so let's go and create a component dashboard header.view and you know what we have to make sure that we import it as dot view in veet you do have to make sure that you use your file extensions for things view so there's that um okay so i mean let's see did we break it seems like it's working if we went over to the old app view here and uh found the dashboard header [Music] let's remember 157 everyone okay disappears all right let's um see what we can do so this is my thinking okay so if you look at this right now there's going to be like a bunch of hard-coded stuff in here about like break points so you can see like on small screens it does some stuff on extra large screens it does some stuff and i don't know how often let's see something here how many xls appear in here eight so that's like pretty promising actually that there's only eight times where we change something based on that break point is there any for md is there any for lg is there any for sm okay so there's 10 for sm let's see what those things are so it looks like at 640 here's something i'm wondering is the xl view the same let's see something for a second here if we go to the stacked view here and we go to this view do those look like identical those are identical or they could be if they're not already the spacing is the same so i feel pretty confident saying that there are only two layouts for this component so the the thing that i'm about to attempt here actually like might make this like better because right now this is hard coded for like three layouts there's like on mobile then there's like on tablet then there's like on desktop but the thing is mobile and desktop are the same layout so we've we've sort of built in this concept of there being three layouts but in reality there's only two there's like a stacked layout and then there's like a uh what would you call the horizontal layout if you're using the word stacked because horizontal and vertical are sort of related words but like stacked and i don't know stacked and expanded stacked in wide let's just call it stacked and horizontal i don't care that it's not symmetrical so this is what i'm thinking from a from a a consumption perspective say we could do something like um default stacked sm horizontal xl stacked this is like my imaginary dream api for this and then internally this will just kind of like magically work that's my hope i want to see if we can build this in a way that like feels useful or interesting so that internally this thing is not thinking about the size of the viewport at all it's only thinking about like the parent saying hey um i know the context that you're existing in i know like what the layout looks like that we're putting you inside of so really as the layout i'm the one who knows whether you should be stacked or horizontal i don't think the dashboard header should be like oh well i know everything and i'm super coupled to the viewport and blah blah blah right so let's see if we can extract this in like a sensible way my expectation is that it's going to be a bit of a brain melter but we'll figure it out so maybe let's have this accept a layout prop first props layout so let's think about it so this is the horizontal stuff and this is the stacked stuff right so um let's just create like a comment for ourselves for a second so we can like work on this i guess you can't put comments inside of an element so we've got like stacked it's going to be space it's going to be block space y8 horizontal is going to be flex space or flex justify between item center space y zero uh and i think that's it right so a few challenges here one is just getting this to even work and another one is like doing it in a purge css friendly way so i think we'll start by maybe just getting it to work so i have a couple thoughts one is we could think about like what is this piece and we could kind of query the view data to get all of the classes for this um then we'd have to name it which kind of feels annoying to me like what is that piece that's this so this is kind of like the [Music] the profile and action button row um i kind of hate that we'd have to name it so i kind of want to think about a way to not have to name it one way is to just have like a method that we could pass an object into like say that we could do this stacked this sucks because it's going to be purge unfriendly for sure but let's see if we can just make it work okay so let's add a layout classes method here methods layout classes and this is going to be like layout classes i don't know and i guess we could just destructure this into like stacked and horizontal pieces okay so this is where my mind starts to hurt because we have like this data structure coming in so we have default sm xl so i think what we need to do is actually like map this into a new thing so let's do object dot entries this dot layout dot map and that's going to be screen layout console.log screen layouts and let's just like return poop for a second okay so default stacked sm horizontal excel stack that's kind of what we wanted right uh bill your suggestion i wish would work but it's not as simple as that because we have to like add the screen prefixes to each class correctly um so basically we're going to map this and then join it with spaces i think so here we're going to return all these stacked classes so stacked dot split on space dot map um screen triple equals default if so then we're just going to return c otherwise we're going to return uh screen colon see why is that a syntax error hmm thanks percy i guess we can look at the problems pane and see if that helps property assignment expected default is a reserved keyword all right uh and i guess like it's not a string that's the real trick um all right so we're gonna return that dot join and then we're going to say const classes equals that and then let's just console the log classes i don't know maybe we've like succeeded here like maybe this is the bulk of it okay so that's actually pretty good right we've got block space y eight sm block sm space y8 excel block xl space y8 okay so that's not quite what we wanted so i think we have to like hmm for some reason we're not looking at the actual horizontal classes so i have to think like why we're not looking at the horizontal classes so we're mapping the layout then we're returning oh stacked dot split so this has to be conditional basically right it has to be um layout triple equals stacked stacked otherwise horizontal i don't know something like that there we go all right so check that out uh so that's pretty incredible right so now it's like responsive automatically um it doesn't have to know about the actual stuff so basically our goal here is to like remove all um at least layout related screen prefixes from this file so we've got six of these one two three four five six in excel i mean the nice thing is now like um now that we have this api this like layout classes thing this can be reused for all these so here we can just say okay so stacked for this is going to be flex flex call space y three and we're gonna have to say space x zero because we have to make sure that we undo other stuff and then horizontal is going to be space y 0 space x 3 flex row and that's it so that should be a little bit more made responsive so that's still good and then where's the last bit so this one this one's going to be flex flex call space y6 space x zero whoopsie doodle flex row space y zero space x eight okay so yeah now that's done so now this file has no instances of xl no instances of sm it's just like it's totally controlled from the layout so say like we wanted to change the layout say we wanted this to just be like stacked forever we could just like get rid of that and now we're just like yeah it's always stacked at all screen sizes or say we only wanted it to be say we wanted to be horizontal forever after the sm breakpoint we could get here and obviously it looks terrible but like it's it's correct it's making it horizontal i know that purge.jss won't recognize them if we add them programmatically because i wrote the tailwind documentation on why that doesn't work uh i'm not incompetent um all right so i mean this works right which is kind of interesting this kind of concept the challenge is making it purgable which is difficult admittedly because this is bad news basically hmm it's kind of interesting um that this works though so if we wanted to make it purgeable the challenging thing is we'd basically have to like hard code in um [Music] every version of all of these classes because we can't anticipate how they're going to get used um so it's like i don't know there might not be like a good way to do that it's just an experiment anyways um but i'm gonna think about it for a couple more minutes on stream i have till 4 pm eastern time because my wife has to leave and i have to take care of the toddler but i thought i would just uh do a live stream while i figured this out because i uh it's just an idea that i had and i want to see if it would work so how could we do this in a way that captured like every single thing because basically what we need here is we need to like in this template we need to include all these strings which is not like ideal i don't think um we don't want to have to type all these obviously we probably want to so here's the thing we don't have time to do this because we only have one minute or two minutes um but one way that you could do this which kind of makes me a little uncomfortable because it's like you're getting into the weeds a little bit is you could have like a default extractor in purge where we take content which content is going to be this whole file and we basically do a regular expression to find this and extract anything that appears in here um so like say we had like this right and we went to like regex pal or one of these things and we put this here say we wanted to capture everything that was in like layout classes um and then we wanted to grab like you know anything uh then we want to go to like multiline or whatever uh where's that flags like multi-line that didn't do it oh we have to do white space insensitive or whatever uh single line yeah so we basically would have to like capture dot plus followed by a thing followed by a space and um done like a quote you know like basically we'd have to grab everything like in these quotes extract them split them prefix them with every [Music] screen which we could do here and like return that in addition to the originally extracted stuff so you'd have to build this as like a fairly tightly coupled thing but i don't know it's kind of interesting um kind of interesting anyways i gotta run i am at my time limit here hopefully this was still a fun little experiment in a little fun little like sort of thought experiment in how to control responsive layout of a component from the parent by creating an api for specifying the layout at different break points i do think it's an interesting idea i'm not sure that it's going to be practical but it is interesting and thanks for checking out the stream and hope to catch you at another one soon or maybe at my lair contact on wednesday all right everybody see you later

Channel: Adam Wathan

Views: 6,116

Rating: 5 out of 5

Keywords:

Id: hnpTL38kr6w

Length: 29min 51sec (1791 seconds)

Published: Fri Aug 21 2020