Create a Chat App UI

[MUSIC] 0:00 Okay, so if you're following along, this is super beginner friendly, 0:08 we will be using SCSS instead of CSS, but we won't do anything complex with it. 0:13 We are just gonna use that for nesting just to make writing the styles 0:18 a little bit faster since we don't have too much time. 0:23 So if you want to follow along, 0:26 the GitHub link is in the chat. 0:31 You can copy that, and cd desktop, git clone, 0:35 paste it in there, and we'll get working. 0:40 If anyone wants to see what this looks like when we're finished, 0:45 this is a finished version of it. 0:48 It's just a simple chat-app UI. 0:50 Nothing really does anything. 0:53 This is very basic, but 0:55 we do have this toggle switch here that will generate a sweet little dark mode. 0:56 It'll be pretty fun. 1:02 So also, if you see an error in my code while I'm working, please let me know. 1:03 I am not perfect. 1:08 So let's grab our git clone, and 1:11 we'll open it up in our text editor. 1:16 To go over what we have so far in here, it's pretty basic. 1:22 We just have a standard HTML file. 1:25 We have a mockups folder, 1:28 which will have our dark theme mock up as well as our light theme. 1:30 We have all of our icons as SVGs. 1:35 We have an app.js, which is empty. 1:38 We will write all of that. 1:40 And we have a styles.css file with, let's see, 1:42 we have a font import for our font, and we're using it here. 1:46 And we're also kind of giving the browser somewhat of a reset. 1:51 And all of our theme colors are already here so that we can save some time. 1:54 So in our body rule, we have these variables set up. 1:59 And if you're unfamiliar with CSS variables, 2:03 we'll kind of go over them together while we're building it. 2:05 So this is our theme, this is what the colors for everything will be. 2:08 And when we give the class of "dark" to our body, 2:12 we'll have all of these colors overriding all of these. 2:15 So we'll do all that together, though, but we do have these colors already here. 2:19 So our light theme is here, and our dark theme is here. 2:24 I will go ahead and 2:27 copy all of this because I'm gonna convert this really quickly to SCSS. 2:28 You can follow along with CSS, if you'd like. 2:33 Or if you're familiar with SCSS, you can do that too. 2:36 We're just gonna use SCSS for nesting. 2:38 So I will do that really quickly. 2:42 So let's do mkdir, we'll do styles, 2:45 we will touch styles.css, 2:50 then make my editor a little bit smaller. 2:54 Can everybody still see the editor, okay? 3:00 Is it still legible? 3:02 >> Yes >> Sweet, okay. 3:04 All right. 3:13 Okay, I see what I did. 3:18 Okay, sass styles.scss -> styles.css. 3:24 I'll drag all of those into here. 3:30 I will create a CSS folder. 3:34 Don't worry if this doesn't make any sense, I'm just setting this up with Sass. 3:37 I probably should just did this pre, but we're doing it now. 3:41 Sweet, and let's start watching for changes. 3:48 And I'm not seeing changes. 3:57 Cd styles, sass --watch. 4:08 There we go. 4:12 All right, so now we have our styles compiling, great. 4:13 Okay, so let's get started. 4:16 I will open up the mockup on the right. 4:19 Actually, let's open this up in the browser. 4:23 Push this to the right and the editor to the left. 4:30 I'll close the terminal, we don't really need that anymore. 4:35 So let's link first off our stylesheet. 4:37 /styles/css/styles.css, and we might as well do our script tag right now as well. 4:42 Sweet, okay, I'm going to open up the mockup in the browser so 4:51 that we can kind of follow along. 4:56 So this is the mockup, and we will begin building out this UI. 4:58 So let's write the markup for this. 5:04 We can do .chat-interface. 5:06 And actually, let's call this .chat-app since this will hold everything. 5:11 And we're only gonna have one item in here, 5:17 which is gonna be the chat-interface at the bottom. 5:20 So we'll call that .chat-interface. 5:24 And there's gonna be three child elements in this .chat-interface. 5:27 We're gonna have this utilities bar up here. 5:31 We're gonna have this input in the center, and 5:34 we're gonna have another utilities bar at the bottom. 5:36 So those will be our three child elements. 5:39 So let's do a div, a class of utilities, we'll double that. 5:41 And in the center, we'll just put an input with the type of text. 5:47 And we can remove these attributes, 5:52 we're not gonna really need them for this. 5:55 Sweet, okay, so let's start building out this first utilities thing. 5:59 So these dark background colors of gray are <ul> elements, 6:04 and inside are <li> elements. 6:09 So let's see, we have bold, italic, and strikethrough. 6:11 So it's three list items. 6:16 So we'll do ul>li*3. 6:17 And this is Emmet, which is standard in VS Code, I'm pretty sure. 6:22 And then next, we're gonna do the UI for the link icon. 6:29 So ul>li, and I'll add in these icons after. 6:34 And then we have these two little list ones, so we'll do ul>li*2. 6:39 And the last one is for code, so we'll do ul>li. 6:45 And if we scroll all the way to the right, there is another one here for 6:50 our toggle switch. 6:54 So let's go ahead and just put that in a list item as well. 6:55 Okay, so we have our UI structure for our top utilities, 7:00 let's go ahead and add in the icons. 7:04 So they are SVG's, and they are in the icons folder. 7:07 So let's look for bold. 7:12 Sweet, we're just gonna hit Ctrl+A, and then Ctrl+C to copy. 7:15 The zoom thing is in the way. 7:26 Let's see, we'll just manually go to index.html. 7:29 Okay, so we pasted in the bold icon. 7:32 Now, let's do the italic icon. 7:37 Copy all, paste. 7:40 And now, the strikethrough icon, 7:43 copy all, And paste. 7:46 And next, yes. 7:52 >> Just a quick question, when, so once you fired up the live server, 7:54 that's going to be updating the page in real time on the right, correct? 7:59 >> Yep, so right now, we're just looking at the mockup just so 8:05 that we can kind of build the structure. 8:08 The actual web page is pretty empty right now because 8:10 we didn't hit Save on anything. 8:12 >> Of course, that makes perfect sense. 8:14 Okay, thank you. 8:16 >> Yep, so once we build the UI out, I'll pop out of the mockup and 8:17 into the browser, where what we're building is actually gonna show. 8:20 So let's see, in the HTML, we have bold, italic, strikethrough. 8:26 So next, we need this link icon. 8:32 So we'll go over here to link, copy all of that. 8:34 We'll paste that in there. 8:39 Next, we have these two list items. 8:41 So we have a link, no, sorry, list-ol and list-ul, 8:43 doesn't really matter which is which. 8:46 So we'll just copy one, and 8:49 we'll paste that in one of the li's, and we have the other one. 8:51 And we'll paste it, underneath. 8:57 And last icon for this row will be our code icon. 9:05 So let's look for that. 9:08 Copy that. 9:11 I wonder how I can get this zoom user interface thing off my screen so 9:12 I can click my index.html. 9:18 >> If you hit the ellipses and then hide floating meeting controls. 9:20 >> Sweet, did you see those too? they were visible for y'all too? 9:28 No. 9:33 >> Well, thanks. 9:35 [LAUGH] And this last list item is not an icon. 9:37 We're gonna build this out with just CSS. 9:41 And that's just gonna be an input with the type of checkbox. 9:43 So in the last list item for our first utilities instance, 9:47 is just gonna be a input with the type of checkbox. 9:52 And we can delete the name attribute, we're not gonna need that. 9:56 And in the id=darkMode. 9:59 Hit Save, and the browser should look pretty bad. 10:03 We need to style all this up. 10:06 But we will do all that after we finish building up the rest of the UI. 10:08 So next, we have our input, which is going to be, 10:12 let's see this little reply right here. 10:16 So we can go ahead and give a placeholder 10:19 attribute and write in "Reply...." 10:24 And now, we can work on this last utilities panel at the bottom. 10:28 So let's open that up right here. 10:34 All right, so the first item is just one. 10:38 So we'll do a <ul>, we'll do this exactly like the top one. 10:40 And this will be for our plus sign. 10:43 So we can just do this, copy the plus, SVG. 10:45 Paste that in. 10:50 And then the next <ul> will have our video camera and the mic, so do li*2. 10:53 And we'll find video, copy. 11:00 We'll paste that in. 11:04 And now we need to find the mic. 11:06 There we go. 11:09 And we'll paste that in. 11:10 So next, we have the section with the emojis, the @ and the fonts. 11:13 So ul>li*3. 11:18 And we'll do emoji, which I think is face-smile.svg. 11:23 And we have the @, which I think is just @, yeah. 11:31 And we have the fonts, font-solid. 11:39 Awesome, and the last item in this will be our send button CTA. 11:47 So we can just create another li for this just like we did with the checkbox. 11:54 In here, I'll put in the paper-plane icon. 12:00 And underneath, I'll just write Send. 12:05 So, I believe that is everything for our markup. 12:08 Yes, that is everything we need for the mockup. 12:13 So we are done with our HTML, and 12:15 we can start working on the styles cuz this looks pretty bad. 12:17 [LAUGH] So let's let's fix this up. 12:20 Okay, in our stylesheet, I'll open up the HTML to 12:25 the right so you can see just a little bit better. 12:31 I'll make this a little bit smaller. 12:35 If this is too small for anyone, just let me know, and 12:37 I'll make the font size a little bit bigger. 12:40 So let's close everything out on the markup and 12:42 take a look at what our UI looks like. 12:45 So we have one child, which is chat-app. 12:48 So let's select that to .chat-app. 12:51 Set the min-height to 100vh. 12:54 And we'll set display: flex, and flex-direction, we'll do column. 12:58 And the reason for this is because the only item in our chat-app is this 13:05 chat-interface, which in the mockup is pushed all the way to the bottom. 13:09 And a really easy way to do that is by giving its parent a display of flex, 13:13 and then giving a margin top of auto. 13:19 So, we'll write chat-interface, 13:21 and margin-top of auto. 13:27 And it works if I spell it right. 13:30 Sweet, you won't notice anything yet because these svg's are pretty big. 13:34 So if we set a rule for svg's and just give them all a width, like 25 pixels, 13:38 which is just temporary, it'll make it a little smaller. 13:44 But you'll see that our chat-iinterface is now pushed to the bottom of the screen, 13:48 which is exactly what we want. 13:53 And if this looks confusing to you, this is SCSS syntax. 13:55 It's basically nesting this chat-interface inside of chat-app because it 14:00 is a child of it. 14:05 I'm not gonna go into too much detail about it, but it's just a lot easier than 14:06 writing it with CSS and having the right chat-app and then chat-interface. 14:10 So inside of chat-interface, we have our three elements, 14:14 which is our utilities, our input, and our second utilities. 14:18 So let's start working on these utilities. 14:23 We have nothing but <ul> items in here. 14:29 And I would like all of them to be on the left side with this last one, 14:33 which is the checkbox to be on the right, and same with the bottom utilities. 14:38 So, Let's give it a display of flex, 14:45 justify-content: flex-start. 14:53 And if we target, let's see, we'll do ul, 15:00 and we'll also give it a display of flex, 15:05 chat-interface, utilities. 15:12 Is it spelled correctly? 15:19 There, okay, so I misspelled it in the markup. 15:27 So let's fix that. 15:31 Spell it correctly back over here. 15:39 Sweet, there we go. 15:45 So this is starting to kinda take shape. 15:47 Let's give our ul a background-color. 15:49 And we will use these CSS variables, so we can do icon-bg. 15:55 So what we'll do is we'll copy this variable declaration, and 16:01 we'll do background-color, we'll use the var keyword. 16:05 And inside the parentheses, we'll paste in that variable declaration. 16:08 And now, you should see kind of a darker gray background-color. 16:12 And if we target the li and then the svg inside, 16:18 we can give it a color, which we'll call it icon-color. 16:23 And svg's are images, but you can actually use this fill property to color them. 16:30 So we'll do fill: var(--icon-color), and hit Save. 16:38 And you might not notice, but 16:42 it is a little bit lighter than just standard black. 16:44 Okay, so these ul items, give it a border-radius of 16:50 25 pixels to give them kind of that pill shape. 16:54 These li's will give them a fixed height and width. 16:58 Let's do maybe 35 pixels with a width of 35 pixels, make them perfect. 17:01 And in here, this svg will do do a height of, 17:08 say maybe 25 pixels. 17:13 And that looks pretty good. 17:16 Also, in the li, we'll do a list-style of none to remove those dots. 17:18 Sweet, this is starting to kind of take shape, which is nice. 17:24 But right now, this looks a little off because these icons, 17:29 these SVG's are actually in the top left corner of our li elements. 17:32 So, an easy way to center them would be to take our li element and 17:36 give it a display of flex. 17:41 We can justify its content, center, and align the items, center. 17:43 Sweet, now, the icons are centered inside of those list items. 17:50 Let's make them a little bit smaller, though. 17:56 That's too small. 17:59 Let's go. 18:00 I think that looks pretty good. 18:01 Let's give our ul a little bit of left and right padding. 18:04 So we can do padding, do top and bottom, 18:07 we'll just do 0 with maybe 0.25rem, left and right. 18:10 Sweet, this is starting to look a lot better. 18:15 And now, let's give a margin-right of our ul elements, 18:18 1rem of margin-right, which I think looks pretty great. 18:23 Let's get this out the way. 18:29 So now we want to move the last items of each of these utilities all 18:31 the way to the right. 18:35 And because its parent uses flex, we can give this li item or 18:37 I should say the ul a margin of left. 18:44 And the way that we can do this is by targeting last-child and 18:48 giving it a margin-left of auto. 18:54 Sweet, it pushed it all the way to the right, which is awesome. 18:57 Flex is amazing. 19:00 Let's remove this margin-right that we have right here. 19:02 So we can also, in this rule, 19:07 give it a margin-right of 0. 19:11 Sweet, it should space it just like we want. 19:15 Let's give a little bit of padding to our chat-app, like 1rem of padding. 19:18 Sweet, now, one thing I forgot is to give a background-color to our chat-app. 19:28 So let's do that now. 19:34 Background-color: and we have a variable for this called --app-bg. 19:36 Copy that, and I'll paste it in there, hit Save. 19:42 And for our chat-interface, 19:48 we also have a variable. 19:53 It'll be background-color: var(--chat-interface-bg). 19:56 Hit Save. 19:59 And now we have our background color but we need a little bit of padding so 20:04 this looks a little bit better, and do 1rem here, too. 20:10 Sweet and I'll give it a little bit of border radius, 20:15 something small like maybe 0.33 rem. 20:19 I think that looks good. 20:22 Let's make this padding a little bit less though. 20:25 Sweet, okay, next let's style this input element. 20:28 So let's close down our utilities nest and let's target the input. 20:32 We can do a border of none and do some padding 1rem, and 20:39 we'll set the outline to none. 20:43 Sweet and that already looks pretty good. 20:47 Awesome, so now let's, I'm also not liking these icons sizes, 20:52 let's make them a little bit smaller. 20:57 Let's do like 18 pixels, sweet, that looks good. 21:00 Okay, so I think this is pretty good for our UI. 21:07 Let's work on the toggle switch. 21:10 So we'll make this with pure CSS. 21:13 So let's go back into the markup and find it. 21:16 Let's give this a <li> a class so we can target it a little bit easier. 21:20 We'll do toggle-switch, hit Save. 21:23 And now let's come back to this li and 21:27 we wanna target the li that has the class toggle-switch. 21:30 Let's give it a display of none just to see if it removes it. 21:36 Sweet, it did, okay so this is the li item. 21:39 Let's reset everything, let's give it a background of transparent. 21:45 Actually, that would be for the ul. 21:54 Let's just target the input inside and 21:56 do -webkit-appearance, set it to "none", sweet. 22:01 Next we will give it a width of, let's do 50 pixels. 22:09 We'll have to override the width for the li item, so we'll do width auto. 22:14 And to get the little thing inside wanting to position that absolute, so 22:22 we'll need to position the input which is the parent of that relative, so 22:27 we'll do position relative And 22:31 we will give it, I think that should work. 22:38 Let's work on the actual switch on the inside. 22:44 So we'll set up an after element. 22:48 We'll give it a position of absolute, 22:53 a top of 50%, a left of 50%. 22:57 We'll transform 23:01 -50% on both the x and y axis. 23:05 We'll give it a content of an empty string. 23:10 Height, let's see. 23:14 We're doing 50 pixels width, let's do. 23:15 Let's do 25 pixels height and width on this. 23:22 You might need to play around with it but we'll see. 23:27 Sweet, and let's give it a background color. 23:32 We also have this setup in a variable that's --toggle-color. 23:38 Yeah, --toggle-color. 23:46 And I see it but we need to adjust something. 23:54 Let's see here. 24:02 this height, this up. 24:10 Let's check 24:18 out the dev 24:25 tools. 24:30 There we go, okay. 24:42 So we have our input, we have our list item, and we have our ul. 24:43 List item toggle-switch. 24:51 Okay, let's give this border radius of 50%. 25:00 And now I need to figure out 25:09 why this is not centered. 25:13 Let's see. 25:18 Anybody know if I misspelled something? 25:29 >> Nothing like a live demo. 25:40 [COUGH] >> Right? 25:42 >> How to share translate, look. 25:44 >> Transform translate, we have negative, there we go. 25:47 I forgot the negative on the X axis. 25:53 >> Nice one, Rob. 25:56 >> That would have taken a long time to figure out because it's so small. 25:58 [LAUGH] Sweet, thanks! 26:01 So we'll set the left to 30, which I think it's pretty good, looks good. 26:05 So now if we target this input when it is checked, 26:10 we can do that with just CSS. 26:15 We can target with the checked pseudo class. 26:19 We can give it a background color. 26:27 And we'll do our accent color which is the kind of the UI color which is this blue. 26:30 So let's hit Save. 26:35 Let's click on our checkbox and it turns it blue which is great. 26:38 But it's turning the input itself blue. 26:43 So let's give this a border-radius of 25 pixels. 26:48 Sweet, I need a little bit, 26:55 let's give the padding for 27:01 our last item 0. 27:07 There we go, looks a little bit better and 27:11 we'll give that padding to the actual toggle-switch 27:14 Still not doing what I want it to do, but that should be fine. 27:25 So I'll update this 30% left to let's say 35, 27:31 looks a lot better, cool. 27:37 So now let's target the after element which is this 27:40 white dot inside the toggle-switch when the input is checked. 27:44 So we can do that by writing the after 27:49 pseudo element on the checked state. 27:54 And we'll give it a left of, let's see, 28:00 we're doing 35, let's do 65%. 28:04 Cool, and it pushes it there but we want a sweet transition, right? 28:08 So let's give a transition. 28:12 Left of 0.3s for our after pseudo element and for 28:19 our, let's see where we're doing the background color at. 28:24 So this will be for the input, so we need to give it a background color. 28:37 Let's see what we have. 28:42 We have --toggle-bg here, so let's use this 28:43 Sweet, that looks a lot better. 28:55 And now we have a toggle-switch. 28:57 Sweet, but let's give it a little bit of transition for that background color. 28:59 We'll do transition background 0.3s 29:06 Sweet, I like that. 29:11 Now, let's work on the Send button and then we can toggle our dark mode. 29:14 So make this over here, so we've got a little bit more room to see. 29:17 So let's close up this toggle-switch for our list item and now let's target the, 29:24 I guess we have to give it a class, make this easy. 29:29 Let's do our Send button, which is this last li. 29:32 Let's do a class of send-cta, let's save. 29:38 And now we'll target that Display 29:46 of none just to see if it's set up right. and it is, cool. 29:51 First thing background-color set to our --accent 29:56 Give the color white, 30:00 svg will also be white. 30:04 And we're not using any variables for 30:08 this because this won't change versus light or dark theme. 30:10 Sweet, let's go over here and set up the width. 30:17 Let's maybe do 125 pixels. 30:22 It's a little big, let's go 100 pixels. 30:26 Then border-radius, 25 pixels for that pill shape. 30:29 Let's give a margin right of 0.25 rem for 30:33 our svg, let's go 0.5. 30:38 Okay, cool, like that. 30:41 So basically our UI for this is complete. 30:43 So now let's add the dark mode for this. 30:47 So let's hop into our JavaScript file, and 30:55 let's open up our index.html on the right. 30:59 Let me close everything out, okay, 31:07 so what we wanna do is whenever this input 31:12 right here, it's just so hard to see. 31:18 Okay, so when this input is in a checked state, 31:23 we want to add the class of dark to our body, which is pretty simple to do. 31:26 So, let's grab this checkbox input. 31:31 We'll call this const, I'll make this a little bit bigger and 31:36 I'll open up this up here. 31:41 Okay, so const darkModeToggle = document.getElementById('darkMode') 31:43 And that's because this checkbox has the ID of darkMode. 31:52 So, let's add an event listener, 31:59 darkModeToggle.addEventListener() 32:02 And since this is a checkbox that changes its state, 32:07 we can use the change event listener. 32:10 Setup function and in here, it's pretty simple. 32:14 We will just write, well, I guess let's put the body in a variable as well. 32:19 I think that should work, document.body. 32:31 So, we'll do body.classList.toggle('dark'), 32:34 I think that's the class we're using, just make sure. 32:39 Yep, okay, so basically, when the body gets the class of dark, 32:50 all of these variables will be overwritten with these variables. 32:54 So, let's see if it worked. 32:59 Sweet, it did but we forgot some stuff. 33:01 So it looks like this input needs a background color. 33:04 So let's go to our input. 33:08 Where is the input? 33:14 Right here, all right. 33:17 Let's set it up with a background color. 33:18 And up here we'll notice, let's see, actually this doesn't need one, 33:22 let's just do transparent for the background color and 33:28 that should work just fine Sweet, it does. 33:33 So the only thing I'd like to do now is maybe transition this a little bit better. 33:39 So everywhere that we're changing our variables, 33:43 let's set up some sort of transition. 33:46 So the chat interface will do you transition from the background of, 33:49 let's do 0.5s 33:55 I'll copy this cuz I'll probably use this again. 33:57 Okay, so that's for the chat interface. 34:00 Let's do it for the chat app as well. 34:03 Let's hit save and notice if, okay, so 34:06 it looks like our icons are taking a little bit so let's see. 34:09 Let's do it for the background color for our ul items in our utilities menu. 34:14 And for our svgs, transition the fill property 0.5 seconds. 34:20 Let's save, sweet, everything looks pretty consistent. 34:28 So, cool. 34:35 We have a chat app that has a dark mode toggle. 34:36 Let's just put an hit, and should all still work, we can update the colors. 34:39 So if you followed along or you want a look at this code when we're finished, 34:45 I'll upload this to the GitHub, and where is, hey Brian, are you still here? 34:52 >> Yep. 35:01 >> Hey, how do I get my toggles back for our zoom? 35:02 [LAUGH] >> Hit escape. 35:06 >> Escape? 35:08 >> Yep. 35:10 >> Sweet. 35:11 You know a lot more about Zoom than I do. 35:11 [LAUGH] Cool okay so actually you know what, I will share my screen one 35:14 more time just so that I can show you guys how I like to push code back up to GitHub. 35:19 Can you guys see my screen still? 35:27 >> Yes. 35:32 >> Sweet, okay, so let's say we're finished with this. 35:33 We're happy, we wanna throw this back onto GitHub. 35:36 You can do this through the terminal, or you can use GitHub desktop. 35:39 But if you're using VS code, it makes it pretty easy. 35:42 So this is a list of all my changes. 35:44 And if I wanna do just one big commit, 35:46 which I will, one big commit final code. 35:50 We can write our commit message and 35:54 then hit these three dots and hit push. 35:57 And now if we go back to TreeHouse GitHub, 36:02 you should see the code here and, yeah, last commit was now, so sweet. 36:05 If you want to take a look at the finished code, it is now in the GitHub repo which 36:11 is linked in the comments section or whatever you call it in zoom. 36:16 Sweet, I am done here. 36:23 >> Thank you very much, Dustin. 36:26 What I really liked about that webinar is absolutely yes we 36:28 had an opportunity to see Dustin's frankly masterful skills when it comes to, css. 36:33 I mean, that by itself was impressive. 36:41 But I also really liked how a VS code played 36:43 a prominent role throughout VS code. 36:47 It's just amazing tool, whether it's the Emmet utility, 36:50 for example, or the ability to push code up to GitHub or 36:55 any of the seemingly endless number of other features that it has to offer. 37:00 It really is no wonder that it's fast becoming the most popular- 37:06 >> Yeah. 37:11 >> IDE out there today. 37:12 Does anybody have any questions about what Dustin demonstrated today? 37:14 >> I've got a question. 37:21 [LAUGH] Does anybody know is Emmet part of VS code by default now? 37:22 I know I used to have to download it, but 37:27 I don't think I download that extension anymore. 37:29 >> [INAUDIBLE] >> And does everybody use VS code? 37:31 Or do we have anybody that uses anything else like atom or 37:35 Sublime or I think brackets? 37:39 I use VS brackets. 37:41 I think a lot of people use VS code now though. 37:43 >> Brian, did I hear you correctly that is now part of VS code? 37:47 >> Yeah, Emmet is integrated >> Wow, I think that's pretty atypical. 37:53 Usually they're pretty big on plugins but 37:58 I mean Emmet is so- >> Right. 38:01 >> Obviously useful as Dustin demonstrated that I guess it is no 38:02 surprise that it is now bundled with the editor. 38:07 >> I guess since VS code so popular too, 38:10 maybe it'd be cool to make some video content on just like Emmet shortcuts. 38:12 I mean, that speeds up workflow like crazy. 38:18 >> Yeah, love that idea. 38:20