Live Stream

okay back again getting more comfortable with this new setup starting to feel pretty good I could rename the videos I was actually looking for that feature yesterday see if it was like a preference and then I noticed there's like a little spot and the bottom for me to do it like right before the stream so I will get in the habit of doing that going forward and maybe I'll make a playlist or some way to sort of categorize all these other live streams so they don't like clutter up everything but anyways we're back so I want to keep working on this navbar we got a bunch of this done yesterday but there's still a bunch to do one thing that we kind of got we kind of skipped anyways was building this little Chevron or this little kind of arrow thing and it was felt like a hard problem and I didn't want to just sit here silently brainstorming on it so we kind of skipped past it but a couple people on Twitter suggested some good ideas that I had sort of considered but I didn't want to get stuck in the weeds on but the fact they were able to kind of prove that it's viable so I think I think it'll be fun to kind of hack on that maybe is the very first thing so to kind of reiterate the general problem basically the issue is you want this like arrow to be like lined up with this arrow at all times no matter what and it's tough because this card is positioned relative to this text and that's basically positioned relative to the left edge we used like some negative margin I think or something to pull it off to the left currently I'd have to go and see where the card is to figure that oh yeah we use like a negative ml6 to pull it to the left but that means that um it's not anchored relative to like this portion right which makes it tough so the solution I think in general is going to be to do this little arrow is a totally separate piece of UI that is relative to this Chevron so that we can anchor it next to that and have the card and the arrow not even be like in the same part of the HTML and but just have them sort of visually appear that way but implementation wise they won't so let's hack on that a little bit so the first thing that we're going to do is we're going to find this Chevron we're gonna wrap that in an element with position:relative so we can actually create this little arrow I'm trying to rely just on this the comments that you can live shows me and I haven't used it enough to feel totally confident that it's always gonna keep synced up with YouTube but hopefully it does so yeah hopefully it doesn't get behind or anything anything weird like that all right so we've got this span here let's stick like a no span here and this'll just be like a visual thing with no other styles let's look at what size Steve used for this mm this is gonna be kind of hard to check I'm guessing it's probably if we did something that was like 24 by 24 and we've rotated at 90 degrees that didn't work 45 I'm so stupid is that pretty close like that that's probably close enough yeah so let's make something that size so H 6 w 6 let's just do like BG read 500 and just like see this thing on screen hopefully we got nothing okay so let's make it display:block position:absolute all right so we've got a red block so let's rotate it so do you transform rotate 45 now interestingly you can see it these are not lined up so let's think about how we could how we could do that if we don't don't rotate this it should still like the off-center right and if we open up the dev tools let's just kind of look at where these are positioned and think of it like the right way to do it so basically I think what we want to do is pull it left by half the width of the other thing above it so I think we actually do have like negative ml 2.5 that didn't quite work the way that I expected mm what was it what what's wrong with my math do we have to pull it left by half the difference between them negative ml 0.5 that's probably right and yeah half the difference not half the thing all right so we pull it back by two pixels because this thing is 4 pixels bigger than the other thing if we did with a translator I don't think it would work like negative translate I think that's gonna go back too far yeah because it's going by half of its self but in this case needs to be half of the other thing now we could we could use a translate X of this value too doesn't really matter really make some difference in this case maybe we will do it that way and yeah so let's bring back our rotation and now we should see that like the the corners line up which is good and I think now we just want to figure out how to position it so that it hits here so let's go back to 0 for a second and think about this mathematically so this this element here has mt7 and I wonder why I'm see how this button is taller than the icon that's a bummer but we can we can figure it out for sure I translate Y minus 50% will not be right so I think what I'm gonna start doing is just like translate y for and we'll just like get it approximately in the right place and then think of it we'll look at like what the value is that put it pretty much in the right place and think about mathematically it doesn't make sense so five is too much four is not enough so this is where I would start doing something like mt4 and translate y 0.5 or something all right so that's bang in the middle so this should be this should look yeah so now you can see those points line up perfectly so that's good just Steve use a sharp corner on it yeah he does let's make this white and we need to add like the shadow to it now there's this border that we're getting here is actually created using a 1 pixel semi-transparent box shadow so I'll show you what happens if we add shadow XS all right so you can see like we got it looking okay right the issue now of course is that this cuts over top of the card and we don't want it to do that so you might be thinking okay well let's take this element the card and maybe we get rid of this like z10 and we just kind of let the card go in front or whatever okay but now you got this other problem where this boarder cuts all the way across so think the solution is going to be to do like a a z-index of like 20 maybe on this element a z-index of I think I'm gonna put the Z indexes at the very beginning so that when you're just scanning you can kind of rock it a little bit better as the index of 10 on this to pull this behind and then I think what we're gonna do is a relative Z 30 on this to pull the card in front that's not working area maybe because of this that needs to be Z Otto probably okay there we go so we might not even have to we might not need this at all we might just need to pull this forward ok it looks like we do need something 10 and 20 maybe probably ok so that's the right solution so now basically what's happening is we've got the white background of the card is sitting in front of the Chevron but the borders of the card is sitting behind is sitting it basically we've like injected this sort of like here we've put it in between those sort of layers visually it's kind of quirky there's probably some things to consider in terms of how it would interact with west of the page there's one annoying thing which you might not be able to see but if you look like right if you look right in this corner you'll see like a tiny little diamond that is a darker so if we went over to like figma here you'll see right there this darker area because you got two shadows meeting each other that's not I it's not my favorite kind of thing in the world right but I think when you zoom out and you just kind of look at this on the whole you can kinda see it but I think I can I think I can live with it because I don't see any other solution to that really and I think I've looked at other implementations like stripe for example has the same problem in their dropdowns so I think I just have to live with that unfortunately unless anyone can think of a really clever way to solve that basically like what we want to do conceptually is somehow put a white layer in between this and that I guess you could come hmm I'm gonna try something that I don't think is going to be the best solution say we just duplicated this and we got rid of the brach shadow and I guess you have to make it 1 pixel bigger that's the challenge yeah that makes it hard you could say like style equal scale scale transform scale let's think if we wanted to if we have something that's twenty four pixels we want to make it twenty six pixels then we're gonna have to scale up at one point zero eight three it's gonna be kind of gross and it still doesn't work surprisingly it's like BG read 500 for a second it's still not growing maybe that's the transform scale X bedroom scale why does this get one pixel bigger yes okay so now if this was white and we got rid of this I think this would look right now yeah so that does solve it but obviously this is a horrifying thing to have to do hmm and some of these classes could probably some be simplified mmm I can't think of a another way to do it with tailwind utilities like another way to do it in theory right is to create a border that's a semi-transparent border place the white thing underneath it the other thing that's not ideal but well actually it is fine in this case because the card is always white if I could think of another way to if we used a border and we just put the border on the inside and just made the arrow a little bit smaller that would be like a really pretty easy solution but the problem is we don't have a border that matches that shadow color the icons are drawn by Steve my business partner so we just I just use these icons that he drew this is a maintained by community member is a deck not sure if that's the best way to pronounce it but these are all in github and you know let's just grab from here yeah so that is one solution I am unsure how I feel abundant obviously the in line style thing with the very hyper specific values it's pretty gross but it is a solution so yeah if we got rid of this how bad does it look again you know especially zoomed out is it really a big deal probably not does look a little bit better though so I'm gonna keep it there I probably won't actually include this and tell when do I itself but looks better on the stream at least so let's let's keep it all right okay so we could try and figure out like an animation for this now one thing I'm thinking that is gonna make the animation tough though is would this arrow being on a totally different element we're not really going to be able to animate it as a group which is going to make it hard to to do like any sort of scale animation so we might just have to do an opacity animation vs code theme this is this one it's called community material theme high contrast and I've got a couple overrides for things to hide annoying UI elements and also to increase the contrast of things even more I think at certain situations like if you get rid of this I think yeah you can see how much lighter that is which is fine for just regular working but I find on stream it's nice to have the higher contrast I think you can find these on my Hughes's page out of mind that me slash uses if you look at vs code there's a gist this is like my settings sync gist so if you kind of just like go through here you can kind of find whatever I know if you search the theme I'm sure it's there right yeah so you can find all this stuff there alright so let's do a little bit of animation so I'm going to let's see is this the div that holds everything yeah so let's put a little bit of State on this because this will be kind of like the component for just this menu item will call this flyout menu open default of false let's let's move these inside of another spin and then maybe we can beat an absolute oops we can simplify some of us or remove some of the duplication anyways we'll do negative translate X let's just grab everything up until here we'll make this Aria hidden so let me know how to do it for the children we're not going to do the animations fancies there's we'll just do a cut probably a fade in these are both going to be absolute in set zero we're gonna do the transform rotate 45 on this one we're gonna do transform will do the scaling garbage and this I think this will be the same yeah okay so that looks the same and it's a little bit simpler so let's throw some transitions on this maybe we'll do like X show equals flyout menu open do the same on this X show flyout menu open and we'll do a click handle on this equals not I am open so we should have at least like some static version of this working now oh that is unusual I guess we'll just have to tweak our outline styles here why does that take so long okay something about it with devtool is it was like feeling really slow it sucks that this is like considered part of the button especially because it means like you can like click this to close it but we could put we could put pointer events none I'm not and now it's like knock not clickable and I wonder if there's a I don't think this would work no I don't think focus outlined none will work either because technically the span isn't focused I wonder if we did this if we did a group focus outline:none made this a group went to our iframe config I'm just out of curiosity added I don't line responsive focus group focus I expect this also to not work but I'm curious because I think that it's not that the outline is being applied to the child it's that the outline is being applied to the parent yeah so that doesn't work so in a lot of ways that's kind of a relief because anyway we want to have to add that code now the outline again it's not on the triangle that line is on the button and it's just like leaking to the triangle so I think what we'd what we'd want to do is probably something like this where we'd say we would make us a group we would do focus outline:none and then we'd probably do something like group focus say we did like this or something I don't know if we even have group focus enabled for that yeah there we go so you can see like now it's like just on that now this element is part of that too so it's kind of unfortunate that it's working that way maybe what we could do to solve that actually is we could um we could probably move this Chevron inside of this span every work the way we do our absolute positioning so that this is just this could almost be relative to the button this is gonna be broken but yeah yeah that's unfortunate basically we need to take a bunch of these styles move them here wrap this in a span again because otherwise the space utility doesn't work okay so now you see like the arrows here right it's like a line - based on that so I think if we did absolutely right zero we're gonna be able to get this closer now let's default this to open so that we can manipulate it a little bit better I've been doing live streams for years so if we get rid of this translate I think that'll help us see like where the defaults positioning is yeah so we actually have to do the reverse translate now so this and now with any luck this should work no matter how long this text is yeah so this is cool right so see how see how the actual card stays in the same spot no matter what but the Chevron always moves to match the position of the icon here so that's kind of the solution that we were trying to figure out before so Joe and I from config dutchess that's very specific to tell and you I the tool and like not even to what you would buy it's just like my code just like all this layer of L code and whatever you know any mean like there's nothing that anyone else has to be concerned about it's just our that's just the name of our config file for the CSS file that the components use it's kind of a stupid name alright so we can toggle this open and close now which is cool this focus state is you know we could do we could say I don't think I actually have an outline classroom they have outline:none I hate the default browser outline like see how bad that looks so we've been trying to figure out like what do we want to do is our default focus styles especially for like links like stuff that doesn't have deep like doesn't have a focus on when you click it but only has a focused on when you Tom to it I hate the way the browser one looks but like in situations like this I can't really bring that back so it almost makes you wonder if we should be like we're placing all the focus tiles with just this like simple shadow outline thing that at least looks less offensive than the browser one anyways let's get this animation working so what's the ex transition enter maybe with you like transition ease out duration 200 or something and for the start maybe we'll just start it out opacity 0 and for the end we'll do a plasti 100 and for the leave maybe able do transition ease in duration 150 so it closes a little bit quicker leave start will start it out of pasty 104 leave and will end at opacity 0 okay so see this weird crap happening where like because oh wait maybe that's just because we haven't done the we got to add the same okay hopefully all we have to do is add the same transition classes to the to this and we won't have any weirdness please still doesn't look good that's unfortunate so even with like our z-index hack when it's trans when it's painting the transitions it's still stacking them and like a not the right order so this is one of those things I think if you really wanted to do it perfectly you'd have to use JavaScript to basically find the position of this measure it use this calculate the offset and then keep this in the right container because I think otherwise it kind of screwed hmm that's a bummer I I'm not sure if I can think of a better way to do that well like one suggestion was to not use the shadow and use a border but then it's gonna be a slightly different color than this border so I'll think about it for now I think we'll just kind of leave it as is and we'll move on to some other interesting stuff so I guess the real question is is there even any other interesting stuff to do there's um this flyout menu and then after that I guess it's just like building like another menu so I mean that's not boring either like maybe we can start hacking on another one data hopefully we can bank together pretty quick this fly problem is gonna distract me but that's okay let's just get this other menu in place and move on from there so I think I'm gonna start by basically just like grabbing this code that we have for solutions and reusing it for menu shouldn't really change anything I'll get some Alpine stuff yeah it's airing because I haven't implemented this copied stuff just to click a one in front of that for a second what's the earring about flyout menu is not defined I mean but who cares if I just change this to this like we shouldn't complain okay let's to make it acts what phoo okay all right yeah the triangles with SVG thing works but then you can't use box shadow because it won't trace the SVG shape as far as I know I might be wrong about that but yeah it's tough really tough okay so we've got our stupid little triangle here that's kind of busted let's do X data equals this can be the same honestly because it's a separate scope that's default it's true while we're working on it and I guess all this was for naught because we can just bring this back now I don't think I'm gonna include it exactly like this and uh in tow and you I well I'm gonna talk to Steve and we might just like design it differently because I want to don't want the code to be super offensively complicated right part of the benefit or part of one of the nice things about own UI is like you can use it to kind of learn from and if the code is I cluttered with too many like we're trying to do some really complicated thing that's not really worth it I think it takes away from that a little bit so better than not if possible so let's just copy this fly a menu and paste it down here actually we have this wrapped up in something okay so we need to do the same thing here actually let's do dot relative throw this in there throw this air move our X data declaration up to the wrapper okay so now we've got like this thing obviously this is not good but that's what we're gonna be working with kind of gives me some ideas about like general flyout placement like maybe you'd be cool to give people the ability to easily control where the flyout was it's like instead of doing like ml6 or whatever right you have like okay so now it's just in its spot you could do something like transform negative translate X 1/2 even that translated way further than I expected it to mmm interesting anyway I'll think of some like patterns for that it's telling you I built only talents he says yes soto and UI has no js' so if you look at toned UI and you go to like a drop-down you see this like a requires j/s thing if you go there we have a bunch of documentation explaining generally how it works so what's going on here I screwed up my diffs tiles somehow I look into that kind of gives you some some suggestions on generally how to implement things with different libraries but when you look at the code you'll just see okay here's an element with a comment above it it says these are the transitions that you should apply to the drop down as it opens and closes basically so you can get the same kind of animation that we designed alright so let's look at this figma design so I'm just going to wipe out the contents of this thing I'll just give us this this and okay so we've got 32 it's probably 32 on all sides yeah so we'll do eight we won't do this as a grid that's not really necessary but we can do like space why whatever eight and then inside of this I guess we'll just have like a bunch of links I'm not sure if these should technically be headings or not when they're inside of a link but I'm just going to do them as P tags and I'll run that by friend of ours who is helping us with the markup semantics and accessibility stuff to make sure that we do everything right all right so this is text-based letting six font medium text gray 900 and then the one below it so I got a gap before so I'll try and remember that text SM letting five text gray 500 and this will be space y1 okay and what Steve's width on this 320 I think this one where did we do our width max content trick cut up here so I'm gonna add that to toe and probably soon what do we say 320 was and rems 20 the max width XS yeah good all right so let's duplicate this I've never done a real production react project but a lot of other people have and they seem to like it like I don't know if you follow Ryan Florence he's a big guy and they react community does lots of interesting stuff he's all on the tail when training these days and enjoying it so definitely works all right security okay so there's that probably like I'd like to Steve but maybe he wants to do like some cool hover stays for the A's or something yeah so let's get this to work by adding a click handler here I wonder why the z-index stuff doesn't work z-index order wrong during transition that's an interesting question what happens in the other browsers so far he basically does everything better with animations than anyone else oh it's still it's a bug in Safari 2 so it might be like a WebKit bug let's see what Firefox does now Firefox has the issue too interesting hmm that's interesting I wonder if that works in our case I wonder if just transform is enough no okay so let's just see if we do an inline style if this fixes the problem transform translate 3d this would be pretty interesting maybe we can make a utility that just like forces something onto its own layer no it still doesn't work doesn't sound it to every single element and see if that makes a difference no now it's got permanently wrong yeah it's definitely tricky like we're doing some weird stuff admittedly right like the fact that we're like trying to set the Z index of an element in a different container to make it sandwich in between these two elements like you can understand why the browser might struggle with that for sure it's too bad though what do they say here oh well all right so that's that's basically this design we've got this this opens you know pretty nice this always seems to fit I don't think anything changes about this I'd like really large sizes yeah this is obviously kind of silly looking but in a reality you would just build it so that you can't open both at the same time okay the top triangle just rewind the stream and you'll see us build it what am i doing okay what one do you wanna build next we've got this one which is like basically the same as this one but just with some stuff slightly moved maybe that one would be fun to just build and just like see how quickly we can implement that modification then this one is kind of like a modification of this one with like different flyout menus and with like a bottom border then we've got like some dark mode ones things get more interesting here we've got these like full width fly outs which I mean it sounds like it's more interesting but it's actually friggin easy compared to the stuff that we've been doing and the rest of this stuff is just kind of variations on the linked locations okay so I think like maybe a good next step would just be to bang out this one really quickly and then we'll do like the version with the alternate flyout menus and maybe that may be what kind of call it a day after that if we even have time for that so let's go this simple link centered do I have something that defaulted to true here yeah let's close that okey doke so I think literally we just need to make these links Center it and then move on so huh actually you know what this is harder than it sounds but still I think it can be done so the hard thing about centering these is you have to sort of you have to Center them relative to the whole viewport right and there's content on this side and content on this side there are different widths so just centering this in between these would put them like here and it'll actually end up being like kind of skewed left because there's more room here so let me think there might be might be a way to do it like one solution I'm thinking of is you could do it using flexbox width by setting this twit zero with zero making both of these flex one and then centering this and having it take up its space but I think the Dom structure makes that harder because what is the book refactoring UI about the fracturing UI's book that teaches you how to make your ideas look awesome without relying on the designer you will learn how to design beautiful interfaces by yourself using specific tactics explained from a developer's point of view it's just a book that Steve and I wrote on UI design if you enter your email you can get some previews you can even just like let's see we're factoring I have previews here's like a URL just memorize this URL and here's like a sample chapter so if you're interested you can read this if this sample chapter seems like it's the right type of content for where you are at and maybe it the book will be a good fit okay so yeah like I was saying we've got this is structure this is a div and then there's like a div that holds both the nav and the buttons but actually maybe we could pull these out for this one okay let's let's try doing this that way I'm gonna collapse some stuff here which I don't normally do but it does make it a little bit easier to see stuff I'm going to comment out this comment out this see what we get and I'm going to take this with you class MDW zero this one will be MDW 0 md flex one md flex 1 this might actually just do it ok not quite alright so let's try md flex grow and then md flex grow here md flex shrinks zero let's undo back to flex one and apply approaches from a different direction problem is like the buttons are wrapping right so what if we just said like white-space:nowrap white-space:nowrap and let's see like what's happening here so we've got this is 129 pixels wide this is 129 pixels wide so that's like correct but I think the real problem is like this menu just doesn't even fit so if we look at Steve's design okay so on Steve's design add 768 he doesn't Center them so that's like our real solution out real solution but real difference here we need to do this on lg screens and then think about what to do for the AMD screen okay so here I think what we want to do is for these buttons where are they we want to do MD ml auto which will push them all the way to the right no that that why is this not going all the way to the right this container is wider oh you know why because of this so these new space utilities until when to unfortunately have a higher specificity than the utilities which is a bummer so I'm glad I ran into a situation that kind of proves that that can be a problem but maybe I can think of a solution I mean one solution is to not use ml auto instead just to item center justify end now this won't work out of the box but it'll be a start and then we could do like MD flex one there okay so now that's moved over we want to hide this stuff on mobile so I guess you're gonna want to do hidden MD flex and this will be hidden MD flex so there and when there's room to Center it we Center it okay so that actually did work the flux one with the width zero is like the secret sauce here so basically what it that does is it tells the browser pretend that this item has a width of zero pixels and that the other item has a width of zero pixels and then when you say flex one you're saying let the item grow as much as possible to fill the remaining space and the remaining space is what's left over after you subtract the space of this thing and actually is this actually centered it is centered but the if we got rid of this margin does that change anything currently huh I'm surprised by that because like you can see this item has like a left margin this is 260 done point 17 to 60 point 17 oh I guess the secret is that the this has a margin on the same side if we took this and we just said like margin left zero important that screws everything up so okay so yeah that makes sense anyways basically what's happening is this element has a width of yeah 381 so that's the only thing that has like a defined with everything else we give a fixed width of 0 from the browser's perspective so now it's trying to divide the remaining space equally between this and this because they're both using flex square 1 which means they're both supposed to grow equally if for whatever reason we said we wanted this one to have like flex grow too it's gonna grow to be double the width of this one now we're not going to do that but we could yeah so that's kind of that I think so now it's centered Mobile is still good this still fine back here we've got this now does this work even like a this is the size I'm kind of concerned about yes this is off-screen so that's like a find the thing change the left margin on lg screens probably to be like negative ml 12 or something you know it's kind of it's kind of arbitrary but this that's just kind of a nature the beast when it comes to complex layouts and we can kind of look at Steve's design in case he did have like a he kind of just has it the same like which won't actually work so even this one doesn't work a mm-hmm that might just be a that might be a problem on the other one too yeah it doesn't fit on medium screens because the whole thing is well right now it does have a max width hmm that's a bummer another solution is to just like not even try to fit it you know just um I don't know but actually you know what what if I just like on medium screens I make that max width smaller so what if we just did like max with Excel what oh yeah do this on like LG or something so just go exactly 768 so we could go wider than that we could probably go to to excel yeah it's a little bit tight but you know it's actually acceptable probably if we wanted to we could pull this back like another couple units and then a little bit bigger on large screens you know maybe that's like a acceptable solution and then for the centered one I guess we'll do the same thing so we'll go with max with two XL to XL fits but maybe we want to go left a little further this is just the material theme I think it's like vs code material theme if you go to the github repo this installs like a couple of different themes I think or I think there's like a community yes code community material theme I don't know what extension did I download it used to be called material and then he changed the colors and a bunch of people didn't like it including me so we went to the switch to this one which is the old one looks like it's this oh goodness it's not copyable vsc community material theme this is the project it's got 17 stars the source is encrypted why okay it seems weird anyways that's the one I use and it seems okay all right so this is okay now let me get bigger maybe we'll just keep it small on this one I don't know max but to exile when does it switch oh I guess like this one it doesn't even open till large oh no does this get wider oh yeah it does get wider when we go here so that seems okay ask Steve but I think this will probably be good hopefully one day I can figure out this shadow thing it's probably not solvable but maybe we can come up with something else okay so I think that's actually done maybe we should double-check this menu she was fine yeah okay I think I'm actually gonna stop for now because I got some other stuff to get going on but yeah hopefully picked up some interesting tricks that's fun hacking on this little triangle thing that was the main thing that I went to hack on a little bit on this stream I'm gonna chat with Steve a little bit offline figure out if we can tweak the design or do something to make it require less hockey stuff and still have it look good but anyways hope this was a fun and maybe I'll do another stream next week Monday or something all right see everyone

Channel: Adam Wathan

Views: 5,424

Rating: 5 out of 5

Keywords:

Id: bsS15ZHc4hc

Length: 66min 44sec (4004 seconds)

Published: Fri Apr 24 2020