 Hey It's been a minute. It's been a minute. Oh shoot. It's been a minute. It's been a minute. We forgot how to do all this stuff You know, hey, hey forgive you. It's been a minute relearn all of it Yeah, if you're hanging out, let me know how things, you know sound look whatever Probably not a ton that I can do. I think I can fix the sound a little bit, but you know, that's it. We'll start The actual work in a couple minutes Yeah, try some out Did you hear it coming back through? Is it is it good? Okay. Good now. Cool. Perfect Arthur good to see you. How's it going? How's it going? It's been a minute. So making videos I've been Real bad at it lately and I want to get better. It's so much fun But it's also just like demoralizing work. Just you know seeing yourself reviewing yourself having to put something out there that I Don't know didn't quite go the way that you wanted to or you learned something new along the way And now you feel stupid for not knowing it when you started. It's like it's pretty rough pretty rough Yeah, yeah about a year ago. Yes, I Yeah, I haven't been I haven't been been too good at it Maybe we can keep each other accountable on this thing Yeah, because I'd love to see more your videos your videos are great, too I say great too as if as if I know for a fact that mine are good Yeah, that's true. Where are you working these days by the way, um, yeah, I totally agree with that sentiment I just started it. I started at Chromatic in September and It's been an interesting journey trying to figure out like kind of like Where my lane is the Just like I Don't know There's a lot of roles that you have to do and it's like kind of tricky to find out You know like I think for me in particular like this It's really tricky to find out how much of each piece. I'm supposed to invest myself into And I get I get totally like kind of focused on one thing that isn't really bringing the most value. So Definitely understand that Jim buddy YouTube buddies. Yeah, let's do it Whoo nice well beat Canada doing some software for senior retirement homes, etc. COVID happened So we had a bit more jobs today. Yeah. Oh, man It's wild like how much that impacts all of your work For so many companies actually my whole family right now Has COVID I think I think we have a couple positive antigen tests and waiting for PCR tests, but Yeah, kind of a bummer. I'm like I locked myself in this room But I feel like it's probably inevitable. It's just a matter of time before I start seeing those symptoms All right, 12 seconds, and then we're gonna do some viewport stuff. All right Hey, hey, hey, welcome to a stream with me. It's been a minute. I haven't done one of these in a really long time I love doing them But I've just been kind of like learning how to do my job for the most part over the last couple months Enjoying summer summer's been absolutely incredible did a whitewater rafting trip for the first time in my life That was awesome And then yeah road tripping with the fam good stuff overall But I hope you're doing well and Yeah, today my goal is so I'm making these YouTube videos Actually, I'll just pull that up pull it up Storybook So on the storybook channel. I've been working on making some videos. I did like a little bit of an interview series I'm working on some, you know, kind of videos for how to use storybook, etc, etc, and Yeah, so kind of I Really enjoy learning while streaming and the next video that we're gonna do is all on viewports So I figured why not just stream what I'm learning while I'm learning it on viewports I Think I don't know that I've ever actually I think I set this up once and that was like three years ago I set up all the viewports for an application that we were you know building and Yeah, so this is kind of new like three years is a long enough time that I don't remember anything about it So super cool. Hey, Ben. Good to see you. Thanks for stopping by. I appreciate you. I Yeah, I'm trying this new thing, but you might be interested in this been I Got so tired of kind of like fighting OBS that I'm trying Ecamp live out So, I don't know. Maybe it was nice to set up Just because I'm I'm so daft when it comes to the whole like OBS streaming thing But anyway, that's out. All right. All right. All right. All right So let's dive into this thing. So I think I have a server running for I Start storybook Okay, so I have a little a tiny little react app I had generated for the previous video that I did and it is using the beat builder and React so that's kind of the it's there's literally nothing that I've done to it It's all just boilerplate So nothing exciting that you don't know about I if you run npx storybook in it You'll get the same thing Let's see what we got here. So let's find a good demo for viewports. So these pages are actually really helpful These are components, but they're like full page components. I think I can pull one of these up. So if I look for Page stories tsx We should see We'll zoom that in a bit This is our stories file. So title example page. So we're getting in this directory Page and then we have two stories the logged out in the logged in story Uh, I don't think it really matters which one we look at today. Um So let's look at logged in And for viewport What do we have? So this is our viewport button Zoom that in a little bit This is our viewport button. We hit viewport and we can select a viewport when we hit v We can kind of toggle through those viewports And i'm going to turn that sidebar off just because I'd like the space Um, so v we can toggle through these and then we can swap the values so we can see the you know Horizontal or vertical, you know being that length and then we can overlay some of our other tools So super cool there Now what I want to do is figure out Where these values are coming from so we have a small large tablet that's not I mean, it's nice for a demonstration But obviously it's not going to get us super far when we're working in an actual application. Um, so First and foremost, I want to know where these are configured Um, and then secondly, let's see so we can reset viewport Uh, secondly, how do we add others? How do we add more? Um Are there standard ones All right, let's see So is there standard library viewports and then how do we add custom ones? Okay, so those are at this point. Those are my questions. Uh going into this So we have this document. It's uh, storybook.js.org docs react essentials viewport I just googled storybook viewports So, uh, that's the best way to get there probably, uh, so, okay So, uh, the viewport toolbar item allows you to adjust the dimensions of the iframe Um, your story is rendered in it makes it easy to develop responsive uis Okay, so this is actually a really important thing. I actually cover this in my most recent video. Um one of the cool things about having this tool built in is If I were to Kind of open up dev tools on my storybook and then go into one of these mobile modes um I have this additional storybook chrome that i'm working with which is You know more pronounced if I have that sidebar open um, and so one of the nice things about Having these tools available inside of storybook is is that problem, uh, effectively goes away. I can see My component at that viewport super nice. Um, the other thing is now that this is shared So whereas all of my configuration for viewports inside of dev tools Is really just localized to my machine and the browser that I set them up in now. I can Share this any component anyone can look at just by clicking this button. They don't have to have dev tools and all of our All of our breakpoints can be set up in it if I set them up correctly So, uh, let's dive in so configuration So out of the box the viewport add-on offers you a standard set of viewports that you can use If you want to change the default set of viewports You can set the global parameters dot viewport parameter in storybook preview js. Okay, so we're going to go into storybook preview Interesting. So this is a cjs file Inside of our v set up interesting to know cool cool cool Uh, let's see. Okay, so we have Okay, so viewports So it looks like nothing set up in viewport at the moment Okay, so we can add this viewport field Save that new viewport would be a viewport map. See below for examples. Okay So pasted that in that's not going to do anything Because we haven't defined this map of viewports So let's figure that out Okay, the viewport global can take an object with the following keys. So we have default viewport Okay We have viewports, which so default viewport is a string set default Responsive default value is responsive. Okay, so I can take this out because the default value Okay We'll see what that is in a second Actually, if I take this I assume responsive is the the view where I don't have it activated The reset viewport one, but we'll see about that Uh, let's see disable boolean disables the viewport Okay, so if I say disable Okay, cool. So that makes it go away. Okay, cool. So this Okay, so that just turns the whole thing off. Um, okay, so Disabled true. We don't actually want that but it's good to know that it's there Okay, so now it's back perfect And then viewports is an object the configuration object for the viewport Okay, so I know that said that there was an example somewhere The viewports object needs the following keys Viewports object needs the following keys. Okay, so if I was gonna build up so viewports This is just an object as far as I can tell and then I think inside of it viewport objects the configuration object of viewports. Let's see if there's an example. Okay. Yes, so So we're gonna have a It's gonna have a key so whatever one And it needs a name And then this is kind of like the full text name. I guess that's gonna show up whatever one styles Okay, so this is an object Sets inline styles to be applied to the story. So width and height. So let's make a square one width is 640 by height 640 And then are these just pixel values? Let's see Okay, so I need to put At least according to this demonstration, these need to be strings And I need to put the Can you remember what that that's called the type the What is that unit unit of measurement? Okay. Okay, so we have the styles And then I guess that's it right because this other one's optional type string Type of the device desktop mobile or tab. Oh, okay. So and then the example value desktop Okay, so let's add that type Interesting Let's find an example with type in it. Whoops Okay, so there isn't an example with type and I can't tell if this is some kind of Uh like key Like is this Ice oh wait a string. Okay string. So I think this can be whatever type fridge. Yeah, let's do it Oh like that I wonder. Okay, so I'm gonna try something real quick. Not sorry kind Okay, look So cool. I can put your thing on there type fridge. I like it All right, cool Just amusing myself Okay, so type fridge, okay, so we're gonna say this okay, so Uh, I'm gonna say what I think that I'm gonna see Okay, I broke this though because I put uh viewports inside of viewports. I think No viewport is the feature Yeah, viewport is the feature And I'm putting a viewports object Inside so I'm configuring my viewports for the viewport feature. Okay, and then I have One of my viewports. So it's this keyed object And uh, I just kind of name it whatever I want I had give it the dimensions that I want and then give it a type which we think Can be whatever and so we have this as fridge Because you know all devices trying to support all devices here Uh, probably mapping to an icon of something most likely just uh has desktop phone tablet though. Ah, yeah Yeah, that makes sense Okay, so we're gonna save this see what happens. Maybe it broke dreadfully. Maybe it works and I kind of assume That now that I'm defining this it's just gonna show this one and not the sample ones that I had before I don't know for sure, but that's what I would guess Yes, okay, cool doing doing pretty good so far Okay, so whatever moves to 640 by 640. I I assume. Yeah 640 by 640 I'm gonna swap that doesn't matter because it's uh, whatever. Um I don't see anything To do with fridge So I don't know Maybe we'll we'll figure that part out in a second Man, I swear knowing that my family has this thing Now I'm every every little tickle in my throat makes me feel like maybe I'm sick Okay, when it's probably just dust Okay, uh, what do we got next? Okay, so the viewport object needs the following keys So name string. Okay, so we we already did that. Um, so the default is responsive, which I do believe Is okay. Actually, let's play with the default real quick. So if I wanted to now I could say the default viewport is whatever One and I'll use that key and then this should Uh, it's hard to tell because I reset the viewport. Um, this yes. Okay, cool. So now it Because I set the default to this it's it's automatically jumping into the that that viewport makes sense Cool. Everything is extremely sensible so far extremely sensible. Um Usually detailed set of devices by default store book uses a minimal Set of viewports to get you started, but you're not restricted to these Uh, the add-on offers a more granular listed devices that you can use so change your store book preview.js To the following. Okay, so we can import cool Okay, so we can import all of the the add-on viewports And we can import them as I guess we can take them as whatever we want, but Actually I have to do as right Okay, so just in case I wanted to rename that or whatever. So we have a map of those viewports Viewports, um, let's see. So, uh, start a store book and we'll see the new devices that you can use. So here Is the complete list Okay, cool. So we have iPhone five six six p six or you know, eight p. Was there no seven? Weird I had an iPhone seven. We're seven Maybe they're the same dimensions or something. Uh, okay, so iPhone x x max. Okay, cool. Uh, 10 Max my bad. Um, okay. Cool. So there's a lot of devices here We have okay. So these are the ones I think that we were seeing before um small mobile large mobile tablet Minimal viewports default. Okay, cool. Cool. Cool. Cool. Cool. So We should be able to I guess spread this object out Uh, how do I do that? store book viewports Been a while since I've actually written code I've done a lot of writing not a lot of code writing. Um And then if that's the case, I should be able to set the default then so having all of these In here now, I should be able to set the Default to iphone 10 s max Uh, using that string I got from here and it should be 896 by 414 All right, uh, let's save that and see what we did Yes, oh, I didn't even need a refresh it ought to refresh for me. Okay, so we have the iphone, uh 10 s max Uh, obviously we can swap these. Um, that looks about right to me Um, and then cool. We have the entire list of all of the other devices, which is really neat Kind of curious how that How this maps To the default devices that you have here Now I this is just a a basic installation of chrome. I haven't done anything special here So I don't know how these devices got on here, but we have a iphone se iphone xr 12 pixel. Okay, so Fewer devices But actually I think that there's more if I go into You edit Yeah, okay. This is a ton here. Um It's just that those are the the ones set up Oh, yeah, so six seven and eight plus are the same dimensions. I guess Um, okay, cool Nice to know All right. All right. All right. So at this point, what do we know? We know how to kind of add this viewport field What some of the required keys are if we want to Add things how to use the view Uh, the default view how to add our own views. This should still be in there. I think I didn't check Okay, cool. Yep. Whatever's still in there. Uh, how to import these and spread all of them out I think we could also just spread out Uh, how would this look? Yeah, we could do Specific ones if we wanted to I don't know if I'm going to go into that right now Okay, so what were my original questions? So Uh, where's this configuration for the standard viewports? So obviously there's some kind of Magic where if it doesn't detect a viewport field in here it just um Uses, uh, I think This object of minimal viewports right here. That's the default. Um, So I'm actually gonna link capture this link for myself Okay, so how do we add more? We got that that was right in Uh, this whole section configuration Okay, is there a standard library viewports? Yes, there are so this is this that's this file Okay, so and then how do we add custom viewports and we did that? Okay, cool Let's see. So we got all of my incoming questions done. Um, which is great Not too bad. It's not even hasn't even been a half hour yet um Are there are you using this um for are you using uh viewports and the storybook and all that kind of stuff? I'm kind of curious if there are any features that you wanted to check out. Um In this Okay, so um, yeah, just hit me up and we will um, yeah, if you're still here We'll figure that out. Okay. So the viewport object needs to follow the keys. We did that. Okay. Use detailed set of devices Okay, we did that Um add new devices We kind of jumped ahead and added those for ourself make the following changes to use them in your storybook Viewport custom viewports. Okay, we did that Okay, cool. So they just I I did it in line, but they're just showing you how to do it in a variable Make the following changes. Yep. Once you start storybook You'll see your new viewports and devices if you need you can also add these two to another list of viewports for instance Okay, cool. So that's just showing what we did which is the minimal viewports and the custom viewports um Actually, that's a good point. So if we wanted to have the minimal viewports that we had before plus Plus just our one so the small large tablet or whatever um, we could do that Except I screwed it up Okay, maybe I let's see because this is an object. It should be an object just like This one Oh, no, because I'm doing uh, yeah, so Let me change that alias up here. So this will be minimal So now it should show whatever plus the small large tablet. Okay, cool. Go cool. Good. Good. Good Let's see See So, uh, oh, I should fix this formatting here. I'll do it next time Uh, so, uh, really starting to formalize our components now And we've been playing catch up with needs from the users the last two years And now we're jumping into the design system hype train. Nice. Yeah I'm a big fan of like just doing it progressively. Um, you know, like as you like I was actually I did an interview with jen chan the other day and we talked about kind of like component library versus design system and how design system is Often thought of as this very like top down kind of process where you're building this design system in isolation and then Applying it to your application Whereas I really like That starting with a component library understanding your packaging your distribution and whatnot for components that already exist Sharing those and then kind of infusing design Thinking into those components and then growing it over time. So I feel like that's where most application. That's the place that most applications actually live. Um, You know, unless you're a big company Okay Yes, I am on the train. I am I'm helping to conduct that train Uh, let's see. So, um, both viewports kindle fire 2 and kindle fire hd will remain in the list Um of devices by merging them with the minimal viewports. Okay, cool. Perfect. This is so great. Um Great documentation team good work. This is very very accessible okay Configuring per component or story. Oh, that's uh, great. That's a great call out. So Um, okay, so I'm gonna link this granular configuration. So we can do this So far we've been doing this kind of site-wide Trying to think of like, what's the case where you would want granular configuration? Obviously, there's gonna be I don't know if this would make a ton of sense, but just thinking through it right now Maybe you have a subset of views Maybe you have a desktop app and a mobile app and you want to split those out and have those configurations Like four different sets of stories. That might be a reason. Um So like so Server desktop and mobile Uh components, um, I think another thing might be Like right now we're looking at whole pages and so we're gonna have those those viewports This this is kind of a little bit of a hack, but like let's say that you had components Isolated components and they would never be viewed inside of a Full viewport, but you might have them have their own level of responsiveness Not using container queries. Um, I don't know that might be another uh, reason so like non full Viewports partial viewports I don't know. Um, I'll have to ask around. Uh, that's what we've been doing. Let's see Uh, but now we want to uh formalize And rationalize our usage removing a mental load and devs when we experiment with the solutions. Yeah, totally Totally totally. It's kind of fun. I really like that progressive honestly, I like the progressive uh way of working because you I think one of the hardest things about building design systems and having them implemented is that trust factor And I think top-down design systems can be really tricky because people it's like that not invented here thing rises up and uh when you figure out the Working together part the collaborative piece first then people can trust your intentions as you do more and more of the top-down type of work and introduce new components So I think it's a good way to go. Um, let's see a configuration per component. Okay, so let's do this I want to add a viewport specifically to this view Or this component. Yeah, specifically for this component Um, so in case where it's not practical for you to use specific visual viewports on a global scale And you need to adjust it on a visual individual story Now the way this thing's composed. I assume that it's an individual story in addition to a story file I think we should be able to I think we can configure this for this whole page Um, so update your story through parameters to include your viewport at the component level for a specific story. Okay, so This is taking me to this file specifically And so we're looking at the logged in story. Yep logged in story So, uh Component so export default Okay, so it's showing two things here I'm gonna play with both of them. So first I want to just go fully All the way to the most extreme so we go from global and I want to go to component specific um So we're logged in I'm gonna do logged in dot parameters Pass in the optional objects viewports So, uh, let's see. So I don't have This even we're gonna call that we're gonna use the whatever one Now what are we using here? I think it's the key That would make the most sense um, and then we are passing it as a string because We don't it would be very variable otherwise um It was a nonsensical thing to say, uh, so Default viewport whatever one so now logged in should now When oh the stories opened default to our whatever one square 640 by 640 It does cool Now if I open up a sidebar again, and I go to logged out that goes to the default responsive one And then this one is the logged in one Hmm I don't know I got a weird Thing it looks like maybe I'm not broadcasting right now If you're still watching and you can hear me Okay, so I'm I'm gonna continue anyway Okay, cool. Perfect. Thanks. Thanks. Thank you. Thank you. Um, yeah, so I don't know my my youtube's just being weird Um, okay, so what do we got here? What do we got? Uh, okay, so Um, yeah, so now we now want to go between logged out and logged in We see uh that it you know at the component level that's doing this which is really cool Now I can also take this configuration and uh in parameters uh Viewport so we're gonna kind of cascade some different options in so we'll say the default viewport is Uh, what are some options that we have here? tablet Okay string Like that Cool Okay, and then if we add another story just logged Okay, so we're gonna add another story into this it's gonna be like the logged out story and because we're not Kind of overriding this default at a component level. Uh, it should get the same treatment as Those yeah, perfect Now this is interesting When I changed that configuration It looked like this was going back to responsive, but it looks like it's sorted out now Okay, cool. Perfect. Um, awesome Okay, so I guess that's all to say that we can Changed uh all the way down. Oh shoot. I lost my indenting because Clearly that doesn't work in comments. Um So We can do this globally At a story level and at a component level Which is cool neat I think that's honestly It this is like pretty simple. Okay, so let's see. So what else do we have? So we have uh shift v V alt v I don't think these work Okay, so what's the order here? So whatever small large tablet? Okay, so if I hit v regular We go large tablet Whatever and if I go shift v it should go backwards Okay, this does seem to work alt v though. I'm not getting anything. I don't know if that's my configuration or what but um That does not reset Uh, the viewport as is stated. So I don't know Is where it is Okay, I think I think that's it. I think we're good. Um I guess I have a little bit of time. So I think um, You know, if anyone's still here and has any questions, then I'll tackle those But I'm probably gonna go I'm gonna go into just like kind of like What the narrative for like since we have this time, uh, what the narrative for a video will probably be like So let's just try this um So we have a handful of features that we want to demonstrate I think that it makes sense the way that this documentation is oriented to Show the global changes first. I think that makes a lot of sense um Global down to because I think that's the way that most people are going to use it, right? They're going to set up their viewports. Um, kind of in a global way Not really worry about specific, you know edge cases and then you know kind of use that across our application So when you start global down to component now, I don't know exactly how important that is in the grand scheme of thing We definitely want to like show setup first um and I think In my last video, I demonstrated the features. So I probably want to just like dive right into the configuration now How we actually show the specifics of the configuration is interesting I feel like having showing the standard library is A higher priority because it gets you a lot further faster So like if I want to know what my site looks like on iphone 10 I can just pull that from the standard library Without having to know what those dimensions are. So let's start with And pick a specific device um And then after that so we have a specific device um Actually, maybe we start with Adding the full extended library. I don't know. I could go either way on that I feel like maybe this this way is a little bit Easier to understand um So adding full library and then extending With a specific device A custom device um And then I don't know it might be kind of fun to have this be something silly. Um, I really do like that fringe idea arthur So maybe we'll maybe we'll do something like that. Maybe I don't make an appearance. Um Okay, so that's kind of a So it's like the how and then we'll probably go into the where which is kind of like top down Uh, so global story component Uh, I think that makes sense Uh, and I think the fridge sideways Yeah That's actually a good question. Um Yeah, so that's a good follow-up question actually can I turn can I turn the swap feature off? Uh when I know possible orientation That is a really interesting question. Thank you for Uh, it's Flushing that out for me. Um Yeah, that is interesting because you can turn viewports off. Oh and actually, uh This is interesting. Uh, something interesting that we didn't try is Can I turn let's see so on the page level Can I turn this off? I shoot I forgot the Value for disable Yeah, disable true. Okay, so can I turn this off on a page by page basis? So Yes Okay, cool Okay, cool. So I'm gonna say I think we're also gonna have like a win section Um, we'll talk about disabling for Isolated components Non pages, um because I feel like that's kind of an interesting Interesting thing like right like if you have a like a button component It's not particularly interesting to have all the viewports applied there. Um, and it might just add some confusion So being able to disable it at every level. Um, is a really interesting idea Sleep sleeping on a fridge is actually an interesting idea. Yeah, you're kind of like Set up a bed. I mean it'd be a very economical use of space, right? Like you know set up your bed on top of it And then you kind of like open it up and have all your you know fridge stuff But stack like the opposite direction. I mean if you got a tiny space, that's not a bad idea I like it tiny home style Um, okay, so when there may be some other wins that we need to flesh out but I think that that's um an interesting start and it it kind of answers that question of um Of like pages versus components Okay, so we have that logged out low enough. Okay, cool. Cool. Um, let's see anything else we need to cover I think honestly, this is looking good. We kind of have like three sections uh logical sections where we you know how Where when? um I don't necessarily think we need to tackle a why I think that's kind of assumed um, so I think this is probably good And uh, I think that we have some pretty You know pretty pretty easy stuff here. So I think that's it. I think we did it Arthur, I want to thank you for your help today and helping me suss this out. I'm gonna have to uh I'm gonna you know, I I don't even know how to do it, but I'll Mention you in the notes or whatever on the video. Um When it goes live so you can so you can see it But yeah, it's good to see you again. Also, uh, it's kind of fun I always whenever I step away from something and then like step back into it. It's like you It's like walking back through a neighborhood of people that you uh, you know, so anyway, thanks for being here. I really appreciate you Um, yeah, I think that's it. I'm not gonna belabor the thing. We finished earlier than I expected everything Uh was really straightforward. So, um, I think we're good. Uh And yes, thank you. Thank you. And yeah, thanks I would like to escape covet. That would be very nice. Um, yeah So, uh, again, this is just a live stream preparing for um a video I don't know if I'm gonna leave the streams public, but if I do I'll you know I don't know maybe up here somewhere. Uh add a link to the video that this resulted in and uh Yeah, cool. Uh, this has been fun. Are there good to see you again? Uh, anyone else who's here but quietly Thank you also for being here. I appreciate you helping me sort this out. I'll see you next time. Peace Now, how do I end this? How to end?