Rebuilding the Vercel Dashboard with Tailwind CSS (Part 2)

okay hopefully this works I started the stream and then it canceled it immediately except I got to put a title and then I started it again very shortly after and I worried that going so fast any messed things up a little bit but seems okay now so for some reason the animal island / live link on YouTube is not working but this link works so I'm just going to go ahead and quickly tweet that out in case anyone wants to see and yeah so on Monday hers was it Monday I think it was Monday did some live streaming where we started building this kind of clone of the versal dashboard this is kind of where we got and we had to kind of stop it's like I want to jump back into it and see how far we can get with kind of the next phase of things so we kind of got the whole header section done so now let's move on to this like two column thing below so if we look at this this looks like it's thousand pixels and if we kind of divide that in half that's like 580 and this is like 418 418 divided by a thousand times 12 so it's like five out of twelve columns in seven to twelve columns I think that's straightforward enough so let's see what we can do here so let's see we've got a div here we've got a div here so I think this is just gonna be kinda like our main area and I think we'll have like make this a grid grid calls 12 maybe and we'll just do like a list of the projects here I guess this could just be like a UL or something let's put it in a do actually all right so we'll do call span seven I need two guys okay and what do we have for headings so far on this page just an h1 so this will have an h2 in it for recent activity the Purcell name is I liked cite you know but I think it's one of those things where nobody likes change I think we all get used to it eventually it's no big deal so we'll do some recent activity here and then we'll try and I yeah how can I get this breakpoint I want to see the whole thing so we'll make this a little bit smaller I notice sometimes Emmett doesn't work super well and react for some reason okay so we've got an L I like a div in that and this will be kind of our card here it's gonna have a top section and a bottom section in the top section I think maybe what we'll do here is we'll put like a h2 for recently recent projects maybe we'll just make this just for screen readers but this way it keeps the sort of heading hierarchy good yep MacBook Pro is working great with the 6k display so far but I could be convinced to buy a Mac Pro - everyone should use toen CSS I use grid and flux box with it all the time all right so we got that then we got a list of projects so let's do like an h3 for the project title suppose she's like the same name I think what we'll do is we'll start by just hard-coding one of these and then maybe we'll create like a little data structure for them so we can like loop over em so we're gonna have a row of stuff here we're gonna have a link here this is actually an external link so it can just be like a link tag and probably will um reuse the same styles as this feedback button maybe so maybe we'll create a component for this at some point Meraki you I never heard of it all right so what what do these represent I wonder this is just like active deployments is it ever more than two it's never more than two so I don't think it really needs to be like a I'll list one thing I've been trying to do a little bit more as um as I've been working on the tail and UI stuff it's forced me to think about accessibility more than maybe I would have normally and there's also interesting situations where you have data like this that you can kind of tell what it is when you're looking at it visually especially when you have like production latest but if you were just having the screen read to you by a screen reader it's not as obvious what that even is and I think like a really underutilized tool for solving those sorts of problems is definition lists so what I've been doing a lot lately is stuff like oh my goodness creating like a definition list with a screen reader only terms so if you do like a DT and you say like latest deployments and then here we do all this stuff and yeah I think it makes it like a little bit nicer for people who have stuff read to them and so this will be like production deployments this will be a latest deployment now there's other ways to do this too I think you could use like Aria label on just a div that kind of explained it let's look at that mdn Aria label used to find a string the levels Green element and these on Aria label on div I don't really work standing up that often but I stand up for livestreams because it's easier to talk yeah I'm just trying to figure out is it good practice to use aria-label for stuff that's not like a button seems like you can just kind of use it for anything so all right so let's maybe let's just do it that way let's keep it a little bit simpler so maybe we'll have a div here I can't Emmet come on but do like Aria label equals production deployment my broccoli rank is still bad I'm like diamond two in twos that's kind of the only thing I play all right so here we're gonna have some sort of like span that's like probably got a what does this mean if you hover over that and so I've got tooltip this deployment is ready this is gonna say like deployment it's not ready you know I mean whatever we can probably just like Aria hidden this and then looks like it looks like the whole thing is actually a link oh no but this part is so alright so we'll do a next link thing here what does have this go nowhere for now we'll put this inside there then maybe we'll do another span for the actual domain shameless comfort com this is one of my favorite domains that I own I bought it with the dream of one day starting like an affiliate blog for products for lazy people so an example of that would be mirror glasses reading I own a pair of these they'll let you they'll let me lie in bed and watch TV without being uncomfortable so I would make a blog that reviewed products like that and used Amazon affiliate links to make money that's the dream of shameless comfort okay so then we're gonna have like a badge that says production and then we're gonna have kind of the deployment date so I guess that'll be like oh my god Emmett doesn't expand time tags so frustrating take time equals I don't know what's let's see does this have any information i bay if we look at this this isn't a time tag no so we don't actually know so it's just kind of he probably could be better 204 days ago October 29th 2019 so we'll say 2019 October 29th and let's say 204 D ok and I guess we'll we won't do the other one yet because we're gonna need to duplicate it but we will do something down here so we already did kind of this thing with the github logo here we're going to probably just copy this and make it a div and we'll just put like the repo I guess this could be probably a link actually it's an external link so we don't need to do that we're not actually gonna build this so it doesn't even matter that I use like the right stuff but I am just trying to like do things a little bit somewhat correctly to just for my own benefit and learning next yeah a bit better okay so we should get like something there all right that's what a little bit styling so we got this main area I think we're gonna need to do if here actually we're gonna have I think we had max with 5xl I think that's what we've been using for our widths looks like it five Excel the px6 on it too okay all right so let's just try and style this card so let's try the ground in lg Fiji white shadow LG overflow:hidden probably and then looks like padding here vertical binding we've got 24 24 here it's like 16 16 24 alright so actually what about to the bottom of this G yeah it's probably still 16 okay so for the top section here we're gonna do p6 for the bottom section we're gonna do px 6 py 4 and yeah now we've got kind of a card looks like we have a border between these so let's do like a divide Y divide gray 200 okay that's looking good ours is a little taller at the bottom mmm let's try pi/3 here looks a little better I think they actually have less bottom padding than top padding maybe I don't know 16 no it is equal well I don't have to be this way get strike last name of text to be Excel font:bold maybe let's see what do we get - big text XL font bold text to XL font bold font semi bold yeah that's pretty good alright and then this visit button I'm gonna try this find this feedback button let's copy it find this visit button let's just see what's a little bit different about it I see a graph nothing and then this is gonna be a flex container flex items Center justify between okay so see it looks like they using folder font here and more horizontal padding so I guess we'll go with like four and I guess we'll do like fonts medium or something what do we do for like to invite team one yeah medium maybe even those FAR's px5 here yeah chrome has been freezing on me lately in weird ways okay we also want a bit of a gap between these and by bit I mean like pretty aggressive gap looks like it's like 80 pixels 20 it's not even a thing yeah it's a thing and how much vertical negative margin do we have here 36 so it's like negative empty nine I think all right so we've kind of pulled that up there shadows poke out the top a little bit and ours don't so let's think if that's going to be an issue if we went to shadow Excel does that make it any better no it makes it worse I'm introduced shadow okay so this is what we're gonna do we'll try like shower some shadow eyes shadow em do you thing it is shadow shadow excess I guess there is no shadow SM or is there oh yeah there is no shadow awesome okay we're gonna use shadow and then we're gonna add an extra shadow so this is the trick that I use a lot what I need to stack shadows I just make two elements that have the same border radius and everything and just stack them on top of each other now in this case that might be too much for shadow hmm we can experiment with other things like sometimes I'll use shadow XS with another shadow just to give it like a little bit of definition and then maybe we need like MD here for a little bit less Excel No so I almost think maybe our best bet was actually just stick with the shadow class it's not gonna be as big of a shadow but it has like closer to the right amount of definition we could do a custom shadow but I'm trying to do everything with like just the defaults here so let's just stick with that all right so let's try and style this next part here so it looks like we've got a gap from the bottom of the button to sort of the top of this badge and we'll call it 24 pixels I bet when you account for line height and stuff like that so here we're gonna do space y 6 and then I'm betting this is going to be a 14 pixel font it's gonna be flex for sure text s I'm letting five and this is probably gonna be text excess sledding for maybe font semi bold mm medium and then 204 that looks like it's gonna be excess I'm letting five text gray 500 probably class name is annoying I know that they're kind of want to change that in react I hope they do but I mean sucks for everyone who's used to doing it the current way all right so this will probably be font medium - yeah that's probably right in this circle looks like it's 12 pixels so let's do class name h3 w3 rounded full text or BG green 300 something like that and I guess we want to do inline block ours looks a tiny bit bigger let's go to point 5 okay that's pretty good so this will be item Center this link I think we'll do is like in line flex I am sinner SpaceX to probably that's interesting that the circle is not vertically centered visually but I guess it is when you look at the line height and stuff so we have to decide if we want to try and nudge it down or just live with it I think we'd have to do like Mt px which is you know kind of dark but maybe does visually look a little bit better and then for this production badge I guess we'll do like inline flex may be rounded full BG gray 100 what do we do for the Hobby badge for the color 50 and then a grade 200 border and then probably we've got like px2 on that or something like that 1.5 maybe yeah so I think that's pretty similar to their badge it's just like pretty tight looks like they maybe have like a py 0.5 and a little tall we could just go letting five with no vertical padding and probably get something closer hmm I don't have to do I think it's still a little tall I guess we could do PYP X you know that's probably the closest we're gonna get all right all right now we've got some gaps here hopefully this is the same on both sides it looks like it's 12 ish this is 12 ish so that makes this part easy we can just do like a space x3 okay and then we can just duplicate this and add like whatever this URL is and this will be latest employment and this is 46 days ago so that's April 4th just say yeah ok so it looks like we got a little bit of a gap between these I think we measure badge badge that'll give us pretty accurate so I'm guessing that's probably gonna be space y3 but it might be too much hope that's not what I wanted the stove nope yes yeah I mean that's pretty close someone just like specify the repo down here cool all right so let's maybe just like extract us into a component so we'll just copy this would fly up to the top here let's do like function project card and we'll just keep it really brain-dead simple I mean we won't even add any of the data to it yet let's just get like the concept working maybe we'll have like four just kind of see what happens right and it looks like we got a gap of quite a bit here 48 so 12 so I guess we'll just do a class name here of space y12 okay that seems alright they've got a border above this grey section and there's this a little bit lighter so let's look at our app j/s maybe oh no I think it's an hour telling does CSS file so we'll go with gray 50 and then let's find the main element order tea yeah I mean that's pretty close that's cool and then after that they've got like this video projects thing and this footer but I think all right we can add the view all projects I think we maybe will avoid the footer I think maybe we'll focus on trying to do more the other interesting parts like building this kind of building this building this making out responsive maybe doing some componentization so I think would let's skip the footer alright so after the UL we're gonna have a div that has a link that has a link that goes to nowhere for now and it's gonna save you all projects I didn't looks like it's gonna be text SM letting five font bold text blue 500 probably some like that yeah that's probably good alright so now we've got 50 I don't think we have 52 maybe we do well we'll go with 12 though we'll just keep it simple I think we could just do a space y12 here would be like enough yeah like that looks sensible to me and for however styles they just do a bottom border so we'll try it on or underline and then what do they have for like after this last link so it's kind of like they've got a padding bottom on this element possibly like on here all right so that's kind of something and wow that do that really just jank up our when did our negative margins stop working was this soon as we added the border when did we screw up our negative margin hmm okay this oh this is the problem because of this alright so we actually want to do this space by 12 on a different element and grab this UL and move it up grab this and move it up because we had to screenreader only title it was messing things up okay so that's fine alright so let's do this stuff guess on the font size here it's probably 14 crazy alright little design tip by the way people tend to when ice make something in h2 it's kind of the gut is to make it big because it's like a heading but here you can see like this heading is actually like the same size as the content because it's more of like a label than like a heading like in a document you know I mean so it just needs to be visible but it's not really supposed to be dominant it's just kind of like a marker for the actual information which is here so you don't always have to make everything huge all right ours is a little high compared to theirs but that's okay we could do like a little pt 2 or something here shove it down a bit PT 1 yeah something like that it's pretty good alright so let's get this Activity Feed thing going so we'll have a ul Li I always do a div and some my allies because I don't think of the Ally as being like I think of like the component is being the child of the list like this div could be used anywhere happens to be used in a list but doesn't need to be but we're putting it in a list so it feels more composable to kind of give everything its own piece alright so I think we have like an avatar component already let's just copy this one I guess because I think it's probably the same size and everything okay so this is gonna be pushed down about 48 probably so I think we'll do a space y12 here almost like a spin here that just says you logged in yeah get him and I guess we'll make this a link I hate this the yesterday when react by the way because the collapse is white space you have to like manually add little space character elements what can you do yes we'll do that do another dip over here that has like this 26 day ago thing I guess in theory we should make this another time tag and we'll just look that up I guess you put 24th all right so the avatar is gonna be fine this is probably a 16 pixel gap yep that's gonna be on here so we're gonna go lastname equals flex item center SpaceX for this is gonna be class name equals flex item center justify between where does this wrap ish this looks like it's going to be 16 - so I think we can also comfortably do a space x4 here this is going to be class name let's do text SM letting 5x SM letting 5 looks like this it's going to be a black link probably hover underline if I had to guess oh it's not even a link I'm making it a link and then the rest of this text is going to be text gray 500-600 and this is gonna be text gray 500 Alex asks about if we're gonna get back to people who apply and are not successful for the tow and job posting that we have up I'd like to get back to everyone I don't think it's realistic to send a personal response to everyone because we've already got hundreds of applications I will definitely probably send personal responses to people who were very close especially you know anyone we interview we will definitely send a personal response to a lot of people just apply and they don't even read the job posting they didn't even submit a proper application so those people I won't be sending anything to but if you apply and send in a real application we'll definitely get back to you I can't promise that I can give like specific feedback because most of the time it's not that your application wasn't good enough it's just that there's a hundred people and we can only pick one so you know ninety-nine out of a hundred people have to not get it no matter how good their applications are so it's kind of tough hiring is uh hard alright so we need borders between this stuff I think I'm going to put padding on both sides of these like you might not think there's padding here right it doesn't really matter but it's simpler to build if there is padding here because then you can actually do things like in a loop so I'm going to do a py 3 on every single one and then I'm gonna subtract 3 from this so that kind of stays in the same place and then here we can do divide Y divided gray 200 and then if we take this we can just make like a Activity Feed item one thing I really do like about react I'm compared to view obviously I love you too but the thing that I didn't expect to like so much about react that I wish I could do in view is just create components and just stick them in the same file it makes it so much there's so much less friction and react for me to just like extract something because I don't feel like I'm creating a whole file for it having to come up with a name like a file feels very permanent it feels like I really have to make a good decision about it whereas just like extracting a little function just feels like it's private to this file I can change it no one else is gonna be using it because I'm not even exporting it so it feels like nice and contained and it's really really a nice workflow thing for sure I wish there was a clever way to do the same thing in view because I find what I do envy you a lot otherwise is I make much bigger components than I wouldn't react but I like for you love you but maybe they can figure out a way to support that it'd be pretty cool I know you kind of can do it if you use JSX with you and that's kind of interesting it's kind of the best of both worlds in some ways but it's a little bit off the beaten path people don't really use JSX the view very often all right so here we go I've got like our activity feed items whatever we'll put like a bunch of them there maybe some more some more and then I guess we'll do a link at the bottom using the same style as this yeah if you use JSX with view I think like view is just like a better version for hacked but it is like uncommon so you notice how there's a bottom border on this list and we just have borders between we can add a bottom border also I think the way that I would do that in this case is just do border be border gray 200 yeah I started programming when I was maybe seven or eight for the first time but I didn't go to school for programming properly until I was like I went to university for a little bit but dropped out and then I kind of didn't program at all for like six years and then I went to college and I was like 25 so I didn't really know how to write software properly until college like I didn't know what my unit test was until college I just knew it was fun to make the computer do stupid things I didn't know anything about like software design until six or seven years ago I guess all right so I mean this looks pretty good I think yeah so what do you want to do next a few different options we could do some of the kind of more reactive stuff in terms of like structuring the file I always do these builds where I just kind of like do this somewhat sloppy build it's just like a big HTML file and we're not like being super deliberate about trying to do Stu plication and stuff like that so that could be like one thing you know just trying to clean up the file another thing would be making it responsive because obviously right now it's not responsive and then another thing would be tackling some of the interactive things like building this drop-down or like some of these dropdowns so those are kind of the three options okay people are saying drop down two votes for drop down we'll give it another 10 15 seconds to see what people say what drop times you want to do do you want to do this drop down I mean they're all going to basically be the same so maybe we'll start with this one drop down drop down drop down okay cool let's do a drop down I've never built a drop down and react so it'll be kind of fun all right so I think we're gonna extract a component for that so let's find where it says Adam well then I hate search and tools like this okay here so this is a link this is our okay so this is what I going to do I cut this I'm going to replace it with a make-believe account switcher okay so now we have an account switcher it looks like this is going to be relative to this okay so we're going to make this relative I use the the community material theme high-contrast it's like a slightly different version of the material theme and I do have a couple customizations so I increase the contrast you'll see if I like comment this out see how light the background gets it's like awful it's it's fine for like just working but for streaming and video creation it's not great because when you record your screen the colors kind of get a little bit more washed out typically so you need to kind of increase the contrast to make up for it usually so I try to keep everything really high contrast all right so come on Amit let's just kind of build this thing so we're gonna have a drop-down thing here it's gonna have kind of two sections there's gonna be a title here so this is tricky because like semantically with this can't be an h2 because there's no h1 before it you know so but it's not really an h1 either I don't know what people normally do for stuff like this I don't think site is gonna have done this in like the most semantically correct way because yeah everything's just a div with no Aria semantics or anything I think nobody builds these things quote-unquote correctly daughters upset about something so we'll just do it like our own way I I don't mind working in large files no doesn't bother me I would probably break this up into different files once there started to be components that were gonna be reused across other pieces of the site but if it was or like a component got sufficiently complicated but if it was all like private extractions to this file then I think it's kind of nicer to just have it all as one file all right so people will do the avatar here and well like come up with a way to make the size configurable and I was span for my name and this is gonna be in a div and this is gonna be additive and then we're gonna have a div that has a gear icon so I think we're going to need to import that what's it called I wonder hug we have a solid cog hmm today's a line cog let's just try cog icon will get the outlined one and just tweak it a bit and see how it actually ends up looking alright so here we're gonna say cog icon this is gonna be in a button to you I think cuz it seems like this probably is like post yeah it's a go okay so it's a link actually I wish Emmet Auto completions could be configured to not add an H ref for a tags within link tags in this first language I got serious with was that depends how you count it I guess like C was the first language that we learned in college and university then C++ and C sharp I didn't really start building like fun projects until getting into laravel actually in the laravel 3 era so I think that's kind of where that's probably the first environment that I think I feel like I got really good at was laravel what have I done here ok alright so like this is obviously bad but we can do something with this okay so okay got some tricks up our sleeves for this but let's just focus on fundamentals first so we'll do like a shadow on this looks like we've got probably 20 and 16 so this diff has like some weird padding on it PT 5 PX 4 PB 4 oops I guess we need to find another instance of the avatar because I forgot to put the source ok and it looks like this personal account text is probably probably text small I don't know texts extra small okay and then for the width here's a trick I like to use for dropdowns I do with screen max width then whatever I want so that's probably too big okay so since like we don't even need to go that big then I'll just go like width 56 yeah it's so that's gonna be like pretty close okay so we've got like a list of our team stuff this is going to be flex I'm Center justify between this is gonna be flex items Center space X for probably will probably do space X for on this too so there's a minimum and let's just see what we get okay so let's do class name equals this is probably 20 by 20 yeah probably 20 by 20 text gray for under maybe so now I want to try like doing like a stroke width that's narrower but doesn't seem to work so I'm kind of curious what the actual SVG looks like so we have stroke width 2 baked in if I just add stroke width 1 I wonder what happens like does it override what's there no so I mean that's fine like our icons just aren't gonna be the same so I think what I'm gonna do is I'm gonna grab the solid cog instead because it's designed for a smaller size and it'll just look a little bit nicer even if it's not quite the same style as the one that we're trying to mimic and maybe if we go like even lighter on and that'll kind of compensate for the oops for the difference in style yeah like that's gonna be fine I think it's a little bit of a different take but that's okay so now this avatar is probably 24 so if we look at our avatar component let's just have it take a size let's have a default 2md and then maybe we'll just say const size classes equals we'll do an object lookup so maybe for SM we'll do like H 6 w 6 and MD with UHA w 8 and we'll just look up the size here and then we'll just like make this a template string I guess we need to wrap this in curly brackets so I shouldn't break anything but it should give us the ability to not specify size for the avatar so you can just say like size equals SM yeah so now we got a small version this is a good way to do these api's for components by the way um a lot of people would have probably just like added the ability to do like classname h6w 6 which i think is not the worst thing ever but it starts to fall apart pretty easily because now like you basically if you want to provide a default size it's hard because you'd have to check the class name see like Oh does it regex match anything that starts with H or W if so exclude those classes from the default and works out a lot better if you just expose a more domain-specific API so that all the class stuff lives inside I think in a perfect world and this is something I plan to experiment with at some point if I was building a react app with tailwind I think most of my pages would almost not even have tailing classes in them they would just be using components I used to tell and under the hood but exposed a more expressive API all right so let's make this text smaller okay and since this is like our selected account looks like we're gonna want to do some padding on these px4 py three probably PG gray 50 I think we need less to here maybe yeah I mean that's closer it looks like they have some vertical padding here that's probably the same as their so I bet you the real reason that we're seeing these weird numbers is because of that but if we did like P Y 2 then we could at least bring this to be PT 3 which is still a little bit weird but is not as weird all right so border-radius looks like it's probably like a 6 pixel border oh yes let's do that rounded MD probably overflow:hidden to be safe and we're gonna need to divider between everything then at the bottom we've got this create team thing looks like this section is gonna have a similar py to and then probably a link with an HR f to nowhere than a tag it says create a team and this will be flex items Center just five between this will be a span then we're gonna have a Add icon it's called plus probably we want the solid one since it's smaller h5w five texts gray 400 I don't know okay and text us I'm letting five text gray 500 they have any sort of like hover styles on this just the whole thing gets darker it looks like they're just using the same color too so I guess we'll just do you like do they go black that's probably black knowing how they tend to do things yeah that's so big that's a little better but yeah they have like these nice one pixel stroke icons what can you do ours are not the same so py three that's like what we had up here okay and then this is a link both those are links that's a link all right so we're gonna make this whole thing this is gonna be a vertex black I don't do the same thing for this I guess what next gray 500 right all right so I mean like there's that part so let's get it working and then I'm gonna go sleep I'm already wearing my Mickey Mouse pajamas here so I'm ready to go all right so let's just make it toggleable I guess Const is open set is open equals you state false you state false button on click equals to do set is open to not is open is open and open bracket copy move fix open closed open closed open closed so they fade out okay so come on get up just for a second hide this on another window god knows what I have in my gists in my private jests all right so I've got this react component that I made for Tim and UI that's kind of nasty but it works well for doing transitions in reacts using talent classes so I think we're going to want to where's this first cell talent yarn and react transition group and let's just create a components folder there's a new file components transition j/s let's paste that in and here we will import transition from dot dot slash components transition finally if all there so let me remember how this works transition and then we just have like all this stuff I mean this will probably do something already it's not scaling in and out so I think we only want leave transitions I'm just gonna actually comment these for now that doesn't work it looks like we're leaving from translate y 0 - maybe like negative translate y - and maybe we'll transition over like a 150 milliseconds so that's more obvious see that that slides up and fades out which is basically exactly what we see here this is a little bit faster let's drop to 100 I'll put this into a library at some point that'll actually be good and we might just rewrite it from scratch might not even depend on react to transition group we have some really exciting plans for just building a lot of view and reacts components in the future and I'm actually hoping that we can do everything in a way that it's super free and open source we're hiring someone soon that enough if you haven't noticed we are hiring a full stack developer and one of the projects that we're going to be working on together is this designing and developing official reactive view libraries using telling your eye components I have some ideas for how we're gonna do this isn't exactly the way it's explained in this job posting kind of like some new developments over the last few days but the gist of it is I'm hoping to build a bunch of headless react and view components for free that we can use in - and UI so whoever we hire I think like their full time job is going to end up being like maintaining open-source UI component libraries so I'd be kind of cool now the size prop on the avatar is the right way to go again if you passed in classes to override the stuff it wouldn't work well you would be having to undo the default size somehow using like a regex to figure out if someone passed in a hider with class kind of grim anyways so there's like a basic drop-down we can maybe do like the Seon like when it's open they have like slightly different colors and stuff on the button some maybe we can do that say I have hover so let's do the old template string here and I think we're going to want to just do it kind of here so we're gonna sit is open border black border gray 200 otherwise border transparent and we do we have like a hover text color on here is there a hover text color yeah so it's when its open its text black this is kind of dark the way that it formatted I'd let's put the conditional stuff at the beginning maybe sure so where's the text color okay so we can do that here I guess now it's stood up here and it's open text black otherwise text gray 400 Chevron sucks do they have a focus style on this yeah here's a funny thing you can't even open this with the keyboard did I'm not saying this to criticize anybody's work because I think this is an incredible piece of software but it is a little crazy to me how how much trouble you can get in on the internet for making any sort of like accessibility mistakes like this like people will jump all over you on Twitter and make you feel like a real fool but the reality is like no sites really do a good job of it which isn't to say that it's okay but I think sometimes it's a little unfair how people are made to feel like they're terrible developers who are don't deserve to be a programmer and that everyone else is doing everything right and they're doing everything wrong when the reality is like nobody is doing things right so we all have a lot of room to improve but it's not that everybody else is doing things good and you're doing things bad everyone's just doing things bad and that guy's a loser alright ok so they don't have any focus on this I think if we were gonna do like our own focus styles I think I would probably just kind of make them similar to the active style Amy let's just try doing something like focus outline:none focus text black I don't know that'll probably be like something and maybe we'll do like focus border grey 200 focus BG gray 50 so it kind of matches like the hover style and active style combined yeah like that's pretty obvious to me then you can tab through this stuff probably you'd want to be able to navigate this stuff with the keyboard like up and down arrow keys but since you have this sort of like compound element here that has two links in it that might not work well either so yeah so anyways I think that's probably good these other dropdowns would end up being like basically the same but that's kind of it like the interesting parts are you know just kind of doing this little basics that stay thing pulling in this transition component to do some of that animation stuff and yeah I think that's a pretty good start so I mean if we were gonna like side by side these it's weird that uh yeah that's kind of like I'm in do I have to make this even wider yeah so the so that's kind of like our rebuild it's pretty close you know like [Music] yeah if you just showed this to me and didn't tell me that it was like a rebuild I would never suspect it I would never think that anything looked off about it at first glance so there you go maybe we'll do some more work on this for fun another day maybe we'll do the responsive stuff and get that going because I think that would be kind of fun but yeah hopefully this was fun anyways I mean kind of bang some stuff out and that's fun playing with some of this technology and learning next and mess with react and stuff so maybe what I'll do is next time we do a stream like maybe I'll do a an hour tomorrow or something to you I will will get kind of the responsive stuff done and maybe we'll do like some more componentization so we can like have all these different projects listed instead of just the same one and same with the activity and stuff and maybe we'll have some fun extracting like some sub button components and stuff like that and then when it's all sort of done I'll probably just throw it up on github so you can clone it down and play with it a little bit if you want to and just have a good example of you know how I might whip something together with ten one myself so anyways I'm going to go watch Curb Your Enthusiasm until I fall asleep and I'll see you tomorrow thanks everyone have a good one you

Channel: Adam Wathan

Views: 7,983

Rating: 5 out of 5

Keywords:

Id: xIuXxB7qG2Y

Length: 79min 38sec (4778 seconds)

Published: Wed May 20 2020