Getting Comfortable with Angular and UI

Welcome, everybody. So getting started, this is the repo on GitHub that you can clone down. And then also, we have, if you didn't know about StackBlitz, if you don't know about StackBlitz, the second link will open my GitHub repo that I've prepared. It will open that in StackBlitz. And I'll actually walk through that in a minute. But there are prizes for today. We have two fifty dollar Amazon gift cards that will be emailing you if you are the second or third place prize winner. And then I'm giving away your choice of either a pair of Bose headphones or a Nintendo switch. So, yes, and these are for just submissions to today. So what you've worked on. So whether you have just followed along with me and added a couple of like maybe your own variables or your own colors, or maybe you've gone above and beyond and you added a couple of custom Kendo UI components at the end of the workshop and you want to show that off. So I have a. Form, that was the word, I'm like, you know, it gathers information for I have a Google form that I will pass out in a moment and at any point during the workshop today or really, I'll give like 24 hours after this to collect responses. So if you wanted to wrap something up or I know it's super late for a lot of people. So if you want to get up in the morning and work on it and then submit it, I will accept that as well. And then I'll just go through and I am gathering emails and addresses with that form so that I can send out swag, some stickers and a T-shirt. You can opt out of the swag, but if you want it, I want to definitely get it to you. And then I will only use that email that I'm gathering to announce the winners and send you your prize if you won one. So don't feel like if you're like, I'm super beginner, I know nothing about angular. Please do not feel that you cannot like that you shouldn't submit because you can open that second link on StackBlitz and follow along with me. And that's all you do. And that's worth submitting. You would not believe how few people actually submit to these kind of things. I'm always surprised. So there's the worst that could happen is that you don't win a gift card. The best that could happen is that you do. Right. So so please feel free to submit anything and everything that you work on today. I want to see it. So if you go the GitHub route, the README does have all the instructions you'll need. And I'm going to actually click on that and open that up. So how many people here I'm going to just use the chat to gather so you can put like a a thumbs up or a thumbs down or yes or no. How many people here have heard of the Tour of Heroes? It's a it's a demo application that was built by John Papa originally. And a lot of the angular docs will reference. You'll see like the hero component or the hero detail component. And that's referencing this demo app that John Papa built. And he's actually got, I don't know, like 10 odd different flavors now with vue and react and other things. But yes, use the chat. Let me know. So and cash said heard of it, but don't know much. Right. Yeah, just so I'm just wondering how many people here even know what Tour of Heroes is. And that's going to give me a good idea of kind of where where we should start and how deep Fernando said, not familiar with it. OK, cool. So this here is the first link, the GitHub link. And you can see and I can make this a little bit bigger. You can see that Alyssa Michelle is my name on GitHub. angular Tour of Heroes is the name of the application that we'll be working in today. And it's it is forked. You see here from the OG creator, John Papa himself. So Dev Agrawala, Agrawala said, built it before. Lucia said, I read a little about it before signing up for this workshop. OK, very cool. So, yes. So this is the what I originally forked it from. And my master branch is like identical to John Papa's. That's what we're going to spin up in a minute. But I have updated it to you can go ahead and see the commits that I've done. And I've really just been updating it to the latest version of angular. So it's in V12 right now. But yes, so you can go ahead and clone that down or use stack blitz. Later, I'm going to be doing like the clone down working in my terminal route. So the only like which one should you do? It might be a little bit easier if you're following along, like word for word, to go ahead and clone that down. But honestly, stack blitz is like beautiful. Let's go ahead and click on that link. So the stack blitz link, which I will copy paste again. Here's what's going to happen if you click on that. So it opens up. It's actually like pulling in this repo here. And it's going to give you this error of it can't find some packages. So you just literally click and say, install, install, missing dependencies, install, missing dependencies. And then it's like three, three button clicks. It says installation complete. And then it's going to run the application over here on the right hand side. So the boss said, is this only for beginners? Awesome question. So let me finish this spiel and then I will answer the beginners question. So this is what you're going to see and work in if you choose to go the stack blitz route. And instead of npm or ng adding or npm installing packages, as we go further down the road, you'll just use this dependency drop down here to go ahead and enter the package name that you're looking for and add that dependency. But yes, it runs in the browser. So it's super quick. Just make sure you fork it so that you can save as you make changes. So back to, thank you, stock loads. Thank you. Back to the presenting. Here's what I've decided to do. And if most of you disagree that this is what we should do, I can change on the fly and I'm super flexible. So what I need everyone to do is in the chat, let me know if you are here for the beginner content or here for the, we'll call it advanced content. So what I was planning on doing is the first half of this workshop, doing a beginner deep dive for both angular and for UI. And so we'll literally take our sweet time walking through the tour of heroes, getting comfortable while use the CLI to generate components, to pass in data, we'll use css and SAS to clean up our UI. And so I was planning on using about an hour and a half on that. And then even things like reusable styles and variables. And then at the end, the last hour and a half, having a faster pace, high level overview, more of a speed run and less of a deep dive. And we'll go through using a third party library like Kendo UI, and then walking through using custom components, styling custom components and just really making it beautiful. And so, yes, I'm loving, loving the chat. Thank you so much. So we've got, it looks like a really healthy mixture of both beginner and advanced. Which is why we've got, Ravi, we've got an intermediate. Is that Ravi Velayat? Because like he's, if it's Ravi Velayat, he's like definitely like not. Yes, I'm available. Definitely not intermediate. But no, so I thought that this was going to be the split where it looks very much, we've got both going on. I think it's actually leaning heavier towards beginner. So I don't think we will skip the beginner content. But here is the good news. If you're here for the advanced stuff, if you really only want that content. Right now it is 11, 15 my time. So we're only 15 minutes into the workshop. So an hour and a half after would be, well, we still really an hour and 15 minutes from now. So if you want, if you're advanced and this is going to be too low level for you, feel free to go and use the next hour to do work or have dinner or hang out with your kids or whatever it is you need to do. And then come and check back with us in about an hour and 20 minutes. We're going to take a break near the end of it. I know it's super short break. We're going to take it like a 10 minute break to go grab water and refresh. But in an hour and 15 minutes, we should be ready to go ahead and actually start using our third party component library and getting fancy. So it will not hurt my feelings if you need to go and you're not interested in the beginner content. But that's what we're going to do. I'm so excited. So I love angular, super passionate about it. If we're going too fast, because I really want to make this first hour, hour and a half that we're about to do, I really want to make it what you need it to be. I'm here for you. Right. So if I'm going too fast, if what I just said didn't make any sense, usually slow down in the chat or maybe like a turtle emoji. Right. And so just so I know where we're at as far as level. But yes, let's go ahead and clone this down and do it. So if you go to the link, I'm so excited. I love workshops. I love seeing all your beautiful faces. So exciting. OK. And one day we'll be in person again and it'll be even better. It'll be even better. OK. So we're going to grab the code. I'm just going to copy this link off of the GitHub. So this is the point in the program where I stop screen sharing and I share the desktop and I share it like that. And then I go here and everyone's really patient with me as I pull back the chat. Thank you, everybody. OK. So here is come back, please. Come back. OK. So I'm going to go ahead and walk through. I obviously already have the code pulled down, but we're going to walk through with you if you need to do that step. So here's what we're going to do in your terminal. Let's go ahead and I'm all about I'm all about like the terminal. I know that I've got a lot of people who are like they use applications and GUIs, but this is just what I prefer to do in my life. So I have a development folder. If you have a development folder, let's go ahead and CD into that development folder. And I'm going to make a directory called delete me. You could name this JS Nation or workshop or whatever the heck you want. I'm saying delete me just because I don't want to forget that I made this duplicate of the repo. So I'm going to CD into the folder that I just created. And I'm actually going to bump up my font so that you can read it. Wouldn't that be nice of me? OK, so I'm going to say get clone and then remember that link that we just copied from this gorgeous GitHub page here. And I'm going to say get clone and paste that in. And that was pretty darn quick if I do say so myself. OK, so now if I list it out, you'll see that we are in the folder that we created and we have the angular Tour of Heroes. So we're going to go ahead and CD into the angular Tour of Heroes. And now at this point, we're going to run npm install or npm I. And that's going to take its sweet time. It actually shouldn't be that hefty because it's like beginner of the beginners. But yes, if you don't want to go the Sacklitz route and you want to follow along with me, follow these steps. And I'm going to check out chat just to make sure no one is like throwing turtles at me. I love that expression. I think we're going to use it. So, yes, throw turtles at me if at any point you need me to slow down. I know I talk fast. Yeah, it's because I get really excited. Seriously, workshops are so much fun. Thank you all for being here. OK, so our npm install is like it's going. Please stay hydrated. It's a three hour workshop. If you're here for the long haul, make sure you are drinking the fluids, the waters. OK, so now if nothing blows up, we should be able to use the CLI to run in G-Serve. So let's try it. Excellent. This is good sign. So it's asking us if if we can send them, would you like to share anonymous usage data to the Google team? So I never actually introduced myself, which is hilarious. My name is Alyssa Nykl. Hi. I love angular. I am a Google Developer Expert for angular, which just means I advocate for, I advocate for the framework. And I love the angular team. I'm all about that life. And then my full time day job is at progress for the component library, Kendo UI for angular. But so I always say yes to this question, long story short. But I'm going to say no right now because anytime I'm like using like demos and I'm like pushing up, I don't want that key that it's going to put in our app. I don't want that key to be there. It just seems, I don't know, it seems silly. So I'm just saying no for now, but I really don't mind sharing my usage data. It's not something I have a problem with. So it's going to hopefully serve up our application. Here's hoping. And if you're wondering at any point today, you're like, oh, I got lost. So that this GitHub repo, we're going to go over here while it's building. My computer fans are starting. You can do it. OK. So this repo right here has multiple branches. None of them are relevant to us yet, but I'm going to make a branch. Maybe we'll call it. JS Nation will call it JS Nation. And so if at any point you get lost today, that branch is what I'm going to be pushing up what we're working on. So you can just go ahead and pull down the code, make sure you're up to date and check out that branch, which I will show you how to do if you're like, what are you talking about? I got you. Don't worry. Look, it's served. OK. So let's go through the steps again, just in case verbally. So we cloned it with git clone and then we ran npm install and then we ran ng serve. So it's like three steps. We've got to go on. Now it's saying that we are actually able to go to localhost 4200. Awesome. It's serving. We can see it. Beautiful. I have an angular version 11 on my system and npm is giving me an error message. OK. I'm trying to think of the fastest way to help you. OK. So it's weird. Can you tell me what the error message says? Because it's weird that because your system doesn't like your system's version of angular it shouldn't matter. Maybe like your system's version of npm would matter. But I don't. The version of angular is always particular per your project, not per system. So something that I love trying, it's my favorite. If you ever run into issues and you're like, I have no idea how to start debugging this. Maybe you clone something down or maybe it's an existing project. Deleting this node modules folder and rerunning your npm install. Sometimes your dependencies get in a weird state. And this is like your restart, right? You turn it on and off again and then on again. That's your restart. So just to kind of give you a clean slate and know, yeah, I really do need to go ahead and fix this bug or know it was just something weird that happened with my dependencies on install. I have had it happen. You can share a screenshot of the error on the channel for this talk. Good point. Good point. So, yes, I think the Discord server is up in the chat. I can grab that info for you, darlings. One second. Grabbing it. In case you joined a bit later. Which was the third command mine is still installing? Absolutely. Oh, it says I'm trying to direct message. I don't want to direct message. Did I just send it to everyone? No. Sorry. I did not copy the right thing. Ignore what I just sent you all. Copy. Paste. OK. So there's the Discord server. And if people in the chat want to help debug, that'd be beautiful if you want to send error messages. The three commands I will type in the chat. So we did the get clone command and then we did the npm install command and then we did the ng serve. If it is like an npm issue, which I had, I had to go ahead and update my systems version because when I tried with angular version 12, when I tried doing it, I got this error message. And it was like, I'm going to list out. It was telling me that my node version was wrong. And I used nvm node version manager to manage my node versions. So I just went ahead and checked out whatever version it was telling me I needed to be on to be compatible. But maybe that's not your error. So anywho. Yes. So ng serve. Once you have it cloned down, put a thumbs up in the chat or maybe like a really creepy smiley face if you have it running, whether on stack blitz or in the terminal or command prompt, I suppose. Some of you could be using PC. That could be a thing. A lot of no such file or directory. Make sure you're in the right place. So when you clone it down, let's go ahead and stop this. So make sure you're actually within the first level of the angular Tour of Heroes, which I'm actually going to go ahead and give you a tour of the Tour of Heroes. But you'll see here that I'm in VS code right now. And this is the root directory, the angular Tour of Heroes. And then inside of this is all the goods and along with node modules, et cetera. So make sure that you're whenever you CD that you're not maybe in that folder that we created to clone it in because it sounds like it doesn't know you're in an angular project. So that's always an indicator to get into the right place. For those of you who are new to hopping in the terminal, you can use CD dot dot to go up. So that just move me up. And then you can use CD and then the name of the thing you want to go down into. Change directory, I think is what CD stands for. Anywho, so I'm going to hop over to my version, which is literally the same thing. It's just the the OG that I have on my machine. I'm going to serve it up and we're going to walk through and take a take a tour. So if you open up the source inside of our application. Oh, right. If you don't have VS code, go ahead and open it up and open up the the cloned down version. And I'm going to actually check, check and make sure. Got it. But use npm start. Oh, try npm start. Then if that's I always use NG serve because I'm a CLI girl, but I know that NG serve runs. It's like runs two commands, runs start and something else. Oh, look at Maxim. Is it Maxim? Maxim? To run npm install dash G at angular CLI. Yes, I didn't even think about that. I'm sending you a price. This is my handy dandy marker. Anytime someone just like is amazing, they need an extra price. So Maxim, make sure you fill out make sure you fill out the Google form so that I can get you an extra something something. Maxim price, because that is such a good idea. Check out the chat. Run npm install dash dash G, which means global. I suppose I could type it while we're. OK. So npm install dash G and then at angular CLI. And so and I can again could make my font bigger for you. This might help you with your issues if you're not able to actually run like NG commands or with yarn. Nice, Daniel. If you don't have angular CLI installed globally, you should run npm start so that it runs the local installation. Thank you. Awesome tips. Loving it. Chat is beautiful. So now that we have it running and we can refresh to prove to prove. Awesome. I love it. You guys are awesome. Making me so happy. OK, to prove that we have it running. So now we're going to go ahead and open up the app in this font. I'm going to make this full screen and make it a little bit smaller so that we can see some code. And I don't know why I have a polyfill file open. So let's go ahead and close. This was just me working on it. So if you look at the application, you'll see here that we have. I'm trying to think if I should put it side by side. Yeah, I'll put it side by side. It might be too. Hopefully it's not too. Hopefully it's not too small. We will see. OK, so here we have our dashboard, which has a list of heroes. And then you can go over to the heroes. It's kind of like a directory of heroes where it lists out the heroes. You can actually delete them from here and they will. I mean, on refresh, they'll come back. But delete them. You can add a new hero. So we're going to give. Hopefully I'm saying this right. Maxime, save it as soon as possible. Hopefully I'm saying this right. Maxime, save it as hero. And they're beautiful. And then there's these logs that he has down here. Pretty simple stuff. And then can we search? Yeah, the search is working as well. And then also you can click into a hero and you'll notice up here in the URL that it goes to slash detail slash the number, which is the ID of the hero. And then you have the option to modify the name here. So if we go back over to our application, our code, and I actually need I need this. I need the chat. I'm just going to close all my desktops. Hopefully this isn't a trippy view for you. There we go. Because I really want to see the chat in case anybody is asking questions or giving excellent comments. So we have our our index html page, which our titles blank right now. Let's go ahead and rename this to. Oh, oh, wait, oh, wait, oh, wait, oh, wait. I almost forgot. I'm such a goose. You all almost let me be foolish. And I'm working on a delete me branch. OK, so here's what we're going to do. We are going to get check out master. Yeah, get stash. You can ignore this part. This is me stashing my unsaved changes. And I could also, again, make this a little bit. There we go. Get status says that. So we're going to get check out a new branch. A new branch. And I'm going to call it javascript Nation. Oh, it already exists. Look at me. So we're just going to go ahead and check out that already existing branch that I made for today. I have the memory of a goldfish. OK, so now it should be identical to master. But now we can go ahead and make changes. And as I push those up, check out the javascript Nation branch to see those on your machine. So, yes, if you see here in my VS code down here in the bottom left, you can tell what branch I'm on. So it's already updated itself for on javascript Nation. So let's go ahead and change this title and say javascript Nation Workshop. And we're going to just, it's kind of a proof of like, hey, this is working. If you notice the tab over here with that title updated. Awesome. So we know we're in the right place. We know things are working. Everything's running. I love it. Why do you need ng-serve on a new branch? So I wanted to create a new branch because master for this particular, project, I reserve master only for angular version update changes or typescript update changes. I want to leave this project pristine as John Papa left it so that he can merge it back in. All I want to do is make sure it's up to date. So then I'm checking out any time I want to make changes or I want to do a demo, I just check out a new branch, which I did today, javascript Nation, and that is the branch that you can find. And actually, if we go over to GitHub, that's the branch that you'll be able to go ahead and find and follow along with what we're changing today. Why do I need ng-serve on that branch? I just stopped the ng-serve. I pressed control C to stop the server from running and that way I could check out the right branch. And then I restarted the server. I guess I could have left it running and in a new tab checked out the branch, but I just didn't. I chose to stop the server and restart it. So yes. By the way, there is no branch named javascript Nation on origin. Yes. Good point. That's because we haven't made any changes to it yet. So I haven't pushed it up. So I'll do that right now so that you all can see. So that you can see that it exists and it is a thing. Okay. Get status. We have two changes, one to our angular.json and one to our index.html. Change is the javascript Nation workshop title. So what we're going to do is we're going to say git add-a. I could add one file at a time. I don't really mind. And actually, I don't want to push up, but I also don't want it to bother me. So let me go ahead and show you whenever you say yes or no to the usage data, data usage. If you said yes, I want to send my data to the angular team so they can see it or no, I don't. It changes right here. CLI analytics false. Or it will, if you say yes, it'll put like a little unique key for your project in that spot. I'll just go ahead and push it up because I don't want it every time I like start and stop the server. It's going to ask me that if it doesn't see it in our angular.json. So I added everything. So that's the message of starting the workshop. And oh, it's git. Why am I forgetting this? Is it just git? Git add and then git commit. Thank you. Beautiful person. Hang on. It might just be candy that I send you all, but you're getting something extra. Is it Sala? You're going to have to correct me on the pronunciation, but you're getting something special for that. How do you forget the word commit? Like that's who knows? Start the workshop and git push. Sometimes like I know things and then they just disappear from my brain. So thank you for that. So it says that it created the new branch. Now you should be able to see JS Nation, which it's not very exciting yet. It's going to get exciting. It's going to get exciting. It's going to get exciting. It's going to get exciting. It's going to get exciting right now. It just has this change in title, but we'll deal with it. So for those of you who are like, what is angular? Why is angular? This is the index.html page, the root of the application, if you will. And I always remember it as git acp add commit push and cache. Yes, git acp add commit push. I love it. I love it. So here you'll see my root, which is where are inside the body. Whatever page we're on. Where is my? Where is my Chrome tab? Whatever page we're on is getting. I think I can't live with the Chrome tab being that tiny because we are going to have the oh so gorgeous inspector. Yeah, I want you. I'm expecting everyone's like, yay, we're opening the inspector. Okay. And we're using Chrome today because the dev tools are better. And we can have an argument if you want to tell me like, I don't know, Safari's dev tools are, I don't know, or Edge's dev tools. But I have found in my UI life that the Chrome dev tools are just so much easier to work with. I'm going to make this a bit plumpier. But here you'll see the my root with our angular version. We're up to date. And it's plugging in all of this goodness. And you might be like, oh, where's that goodness coming from? I'm glad you asked. So we have a app routing module here. And we will be using, we'll be customizing that in a little bit later on today. But here we have our different routes that are specified. And this is where angular is going to go ahead and bootstrap that into our body when we say, hey, if the path in our route says dashboard, I want you to load in the dashboard component. And then over here, underneath our app folder, you should be able to go and open up the dashboard .html and see, oh, this is where top heroes is. And this is where the hero names are getting populated with this for loop here. So, yes, let me know. I created an alias in my Oh My ZSH config to run it in one command. Daniel said, nice. Oh, first, I wish I could show you. Maybe I can. I have an Oh My ZSH sticker on my laptop. I'm a huge, huge fan. It's, I don't really know how to describe it. It's how my terminal works the way it does with shortcuts and with the theme. And yeah, Oh My ZSH for the win, right? So whenever I'm like CDing and I'm like, hey, I want to go into, actually, I can turn on, I think it's called Keycaster. E. Let me know if that's obnoxious. Yes. There it is. So in the bottom right of my screen, now you see the keys, which I can always quit Keycaster, but I can CD and then tab and then it's going to list out the possibilities and then I can say, oh, I want to go into the css playground and it autocompletes it as I tab. And so that's like the main, I know Oh My ZSH does so much more than that. I know I get it. That's why I use it like that in this gorgeous pink theme. So anyways, so back to our dashboard. So here we have, if we go to dashboard, you'll see the top heroes. You'll see the heroes being listed out and all of that you can find right here. And if I bump this size up a little bit, I might have to bump it down later because like but just so you can see it right now. And then I think this is using Bootstrap. You can correct me if I'm wrong. I think that's Bootstrap. I once was a lad who I was hired at one point to write very, very, very custom UI for a team, a small startup, and they used Bootstrap and it almost killed me because of how aggressive Bootstrap is. It's super specific with its styles, so it's really hard to override. But then they also have a lot of really generic styles. So it's very far reaching and it's everywhere in everything, touching all the components. And so I found it very difficult to write extremely custom styles alongside Bootstrap. So that's where my little bit of angst is coming from. If you use Bootstrap on the day to day and you love it and it helps you or your team, then awesome. Kendo UI has a Bootstrap theme so that we can integrate well with teams using Bootstrap. So Bootstrap is not bad. It's just in some cases it can be the biggest headache of your life. So anyways, I digress. That was why I grimaced. So I think we're using Bootstrap. We will stop using the Bootstraps because I can't do it. I can't do it. So we are looping through our heroes and you might be saying to yourself because you see that hero of heroes, that's where we're getting these beautiful, I mean, just absolutely gorgeous hero cards. I think they're going to be the first thing we update. But you might be wondering where those are coming from. And so if we go to our hero service, this guy is, he's got, service is a place for any HTTP goods to live, right? You've got your get, you've got your save, your delete. Your crud operations. And so that's where anything hero crud related will belong. And then we also have our hero TS, which is very, very basic. It's just this class that's saying, hey, our hero is going to have an ID and a name. You'll see my fancy version. Yes, there is a fancy version. If you didn't notice, there's like ponies all over everything. That's because your girl here loves my little pony. So I redid this application using my little pony. There's rainbows. It's gorgeous. Even gradients. You'll see it in a little bit. But right now I want all of us together to customize this ourselves. So back to we are using, where is it? We've got this in memory data service. And do correct me if I'm wrong. I believe in memory data service, like the library that Dan is Dan that John is using for end memory data service has been deprecated. And I think there's like an updated one. So that's on my to do list is to go and make sure that we're using the right, the real one that's being updated. But all this does is this mocks a database for us so that it's kind of like a self encapsulated demo. Yes, it would be easy enough to go ahead and plug in and like a database. But then you have things like keys and URLs that might be secret. And that's kind of really hard to share out with a demo. So that's why this was done this way and why I kept it that way. But here you'll see this list of our heroes that are being mocked up. So if you want and I highly encourage it. And this could be literally the only thing you do today. And it might win you a $50 gift card because I don't know why, but people don't like submitting code. I don't I don't I don't get it. Go ahead and change these up to heroes that you like or to a data set that you like. And that should populate in quite nicely. And literally, that's enough to submit and win a price today. So I'm going to read chat, double check what happened. Oh, my gosh, I'm so far behind. I'm so sorry, everybody. You don't have to use CD. Daniel said if you insert the folder name and press enter, it automatically applies the CD. Shut up. OK, that's really cool. Dev Agarwalis said GCO for checkout. Nice. Forget checkout. Bootstrap is OK if you don't want to touch css. Yeah, I'm there with you. If you want to try to do anything custom. Yeah, it's so that was where it came in. Like where you're like, what do you mean you were trying to do custom css? I was working for a fabric print shop and they wanted me to build out custom color pickers like from scratch, from hand, a color picker in html and css and then modify that based on like modify the colors that the user was seeing based on what like monitor they were seeing so that it could as possible match the real product, which was like it was fun, but I did kill bootstrap. I had to I had to I had to nuke it. But yes, this is my project using material design. Nice, Daniel. And then. Right. So go into the end memory data service, change, change the data, even if just a couple names. Get funny with it. And let's show you. I think it's in. It's not in this one. I was I was getting package JSON and angular JSON mixed up. I know they're like very, very different things. So you'd think like, I don't know, you would think it wouldn't be a thing that to get mixed up. Yes, yes. OK, so I think the next thing we're going to do is use some SAS just because. Oh, because I love SAS and I don't want to go on a rant about it. But I do want you all to know how to do it. But before I do that, I need to show you. I'm just going to search for it. I think it's called delay. So if everybody goes and opens up your app module. Here is where the end memory data service is being utilized yet again. So it's not just for mocking out like fake APIs, but you can also add a delay, which is killer, killer. If you're like working on like a loader or a skeleton type component, which we can talk we'll talk about at the end. But you can go ahead and change this to basically fake a slower see like a slower network, a slower call. So, yes, we're going to leave it short for now. But this is something that we will we will for sure be utilizing. So let's go back to use some SAS in the project or in life both. I can't live without SAS. I don't know. I think it's just like in my blood now. OK, let's do it. Let's use some SAS. So I have. Yeah, we're going to we're going to do the SAS and then we're going to talk about color. And then let's check the time. I literally have like a white on white. I don't know if you can see it. I've got a white on white theme going. My desk top. Oh, so special. Every time I look at my time, I'm like, oh, I've got to change that background. OK, so, yes, we are going to I'm going to grab this command real quick. So if you created a brand new project, which we we did not we did not create a brand new project. But I want you all to have this. So I'm throwing it in chat. If you create a brand new project and you want to use something other than css like SCSS, which is a flavor of SAS, you can use this little dash dash style flag that I just plopped in chat and it will go ahead and generate your base application configured to use SCSS or SAS or whatever you put in there. Yes, so that's great when starting a new project. But hi, we cloned an existing project. So we need the schematic command and hopefully you got the CLI working. But if not, I know how to it's literally just like a one liner. So there is the NG config schematics. So we're going to go ahead and run that. So I'm going to head over and this is going I'll show you what it changes instead of I feel shamed now. So I always it's just like my habit to like start and stop the server. I know sometimes we make changes where you have to restart the server. But let's see. Let's see how far we can go. We'll get risky today. Oh, right. I was going to check time. So we're almost an hour in. So in about 40 minutes, no, 30 minutes from now, we will take a 10 minute break to go to the bathroom, to get a drink and to dive into the deeper content. Okay. So unless most of you want us to stay at the lower level, we'll take a vote. We'll take a vote. Okay. Oh, right. We're going to run this command NG config, blah, blah, blah, SCSS. And you might be asking yourself, why, Alyssa? Why? A couple of reasons. I love SAS variables. I use them all the time in my everyday life and my coding life. So SAS variables are a way they're very similar to css variables, but I think they're a little bit cleaner. And there are reasons to use one or the other. We're not going to have time to get into that today. Do wish it was a six hour workshop because we can talk about it all morning or night. But we don't have time to get into the differences between css variables and SAS variables. But needless to say, I use both. I love both. But when I can, I will use a SAS variable because I think it's a little bit cleaner syntax. So, but we're going to talk about that. We're going to use them. We're going to use our own color variables and plug those into our style sheets. And it's going to be amazing. So please don't fear if you're like, this is so over my head. It's not. OK. So we just ran that command. Hopefully it worked for you. If it didn't, I will show you the changes that this command made because all we're doing is we're using a schematic to make changes in our application for us. It's just laziness, really. But you can make those changes if you don't have the CLI working and you're still using So let's go ahead and I don't it might be difficult to see on my monitor, but I have how do we add SAS and stacklets? Spicy. OK. We will cover that in a second. There is a way. Actually, I think you'll do exactly what I'm about to show you. So I think using SAS and stacklets, you're just going to make the changes manually. I think there is a terminal in stacklets. Where you can do command line things. But I don't know if it has the CLI. So I would just do the changes I'm about to show you. So after we ran that schematic, you can go over here and look and see which file is highlighted like orangey red, in my case, to see what changes were made. And so we're just going to scroll all the way to the bottom. It's a one-liner. I know. But depending on what version of angular you're using, sometimes it's more than one line and sometimes it's in a different spot in the angular JSON folder. So don't hate me. But yes, it's just go to line 130 and add a new line and add style colon SCSS. Or maybe it modified it. Yeah, it just modified it. So go to line 131 and add a single S character. It used to be harder. So don't look at me like that. But that is the schematic command. And nothing else has changed. Our app is still running. So you might be like, what the heck? You now have the option to it's going to be fine with dot css files. So this is what I love about like integrating SAS into your like if you want to start that slow process, you don't have to immediately go and say every single css file changed to an SCSS file. You can, though. Because css is valid SAS. It is valid SCSS. It's just when you add that S, that SCSS, it gives you a little bit more. You can add variables. You can start nesting your styles, et cetera, et cetera. You can do mix-ins. I love me a good mix-in. Okay. Anyways. So yes, make that change. Make sure everything's still running. And let's go ahead and we're going to open up our I want to make it fun. You know who's bothering me? You want to know who is bothering me? And I lost my chat for some reason. It's not like I it's not like where is it? There it is. Gorgeous. Beautiful. I see you all. Awesome. Okay. It's I want you to tell me in the chat right now what is bothering you most about this application? Because whatever you guys vote on, that's what we're going to clean up and use the next so many minutes writing styles for. For me personally, these things right here. Oh, I don't know. It just they get me. I don't know if it's the blue or maybe the uneven padding. It might be the padding. Same. Fernando said same. The squares are not centered. Yeah, there's issues. The blue color of the card for me, it's the heroes not being center aligned. Oh, my goodness. I love you all because we're going to. Okay. So it's funny that you all say the heroes not being center aligned bothers you because when I first looked at this, I was like, why is this random H3 centered? It's literally the only thing on the page that's centered. So for me, my brain was like, that needs to be left aligned. And then it would be fine. Here we go. Someone else said the hero search can place on the top bar. I know, right? That'd be a really good place for that. Okay. So let's do the cards. I call these cards. Oh, did you all see that? That was trippy. If you did not see it, it was like the hover effect was painting only where my mouse was for a minute. That was weird. I have to go back and check out the recording and see that again. I've never seen Chrome do that. Okay. So we're going to do the cards. I call them cards because that's what we're going to turn them into. You're welcome. Okay. So we need to find them. Right? And I think we already discovered their location, their secret, not so secret location. I think it's in dashboard. So this is where they are. We are looping through the heroes and we're going to enter that and then we're going to enter, I think it's this one. Yes. Okay. Here we have our grid, grid pad, not really sure, and our top heroes that is driving all of us crazy. Everyone, well, most people said, let's, let's center them. So let's do that. We can, we can leak, because like my gut instinct is to go, hey, you, why are you centered? And then it's beautiful. But if we want to go the center route, then let's, let's do it. Let's dive all in. So the first thing I'm going to do. Don't hate me. I'm going to, I'm going to, I'm going to get rid of bootstrap because I can't handle it. I can't handle it. I can't do it. I can't live like this anymore. These, this class call one for, goodbye, can't do it. Okay. And then let's see, we've got, I'm trying to think if we need that, that wrapper, let's save, go back over and see what happened. I mean, I'm not, I'm not hating it. All right. So let's go ahead and I like to do things in the inspector a little bit, a little babble bit and then move over to our actual style sheet. So please make sure you're hydrating. Okay. So we're going to go ahead and say to the wrapper, I love flex. So we're going to say display flex, which were kind of almost back to where we were justify content space between, space around, space between, space around, space between. Hang on. I'm thinking, I mean, feel free to shout out your favorite. I'm going to go with this just until people tell me what they want. And then the next thing that's driving me crazy is the different sizes, the different sizes. So, oh, by the way, we are using flex box and I said display flex and flex defaults to a flex direction of row, if I can spell. So that's the default. So it just turned that wrapper into a row and it just was like, Hey everybody, look at me. I'm a row. The other cool thing that you can do with the flex box row is you can turn on flex wrap, set it to not warp, but set it to wrap. And then whenever the page gets too small for the content, it like starts wrapping. We have differing widths and heights though on our cards. And that's why we're getting a bit of funk. So let's go ahead and give, for a moment, the strawberries look like angular icons to me. That's awesome. Okay. What was I saying? Right. So let's go ahead and give these a minimum width of, I really just have to like try something until I'm like, yeah, oops, keycasters going a bit crazy. The bombasto is like longer and that's what we have to take into account is like those longer names. So let's go ahead with, I just want to see, so don't hate, don't hate on the process. Minimum, what's the opposite height? 200 pixels. Oh, I love it. I love when something goes wrong. So we can't actually see the inner blue. So this is where we actually check out what is happening. So we've got a minimum width that's being applied to the inner div that is called module hero. Yes, module, module hero right here. Okay. So we are like five lines of css into it. And at this point, we're going to start needing to customize the DOM because we've got this class of module hero. I don't know if I even want it to stick around. We might completely remove it, but once we refresh the page, we're going to lose all of this gorgeous, sexy flex styling. So let's go ahead and give our wrapper a class and give that class these styles that we talked about. Again, flex direction is, this is optional. It's going to default to row. If you were wondering what the other option was, it's column. But we are going to do the default today of row for right now, nothing's set in stone. Okay. So I'm going to give this a class of card wrapper, I don't know, shout it out. Maybe hero card wrapper. Shout it out if you have a better class idea. And we're going to open up our dashboard component dot css. Oh, wow. I guess this wasn't bootstrap question mark. If he's giving this call one for a width, I don't know if he's using bootstrap. I probably need to go and check if it's installed or maybe he is using bootstrap and he's customizing it. Either way, all of this has to go. Okay. So let's go ahead and do a quick cleanup. I'm okay. We don't need any of this 12 through 25. We don't need it. We've grid pad everything relating to grid pad. So at this point, yeah, I'm just going to all of it and then everything related to module. I'm pretty confident. I don't need it. Although that was our color. I'm deleting it. I don't I don't want it in my life anymore. Okay. So what are we left with? So this. I don't want it. Okay. I'm fine with giving everything box sizing border box. We could talk all day about border box turtle. What's the quick way of saying border box essentially says include my padding and margin in your calculations. Padding padding not border or margin. So it's saying include my padding in my width or height. Okay, cool. I'm going to actually put that here. Sorry. Turtles here. He's my husband and he is a certified css genius border box. He said no certification. Border box is it literally just says include my padding in my height and width calculation calculation. Anyways, I'm fine with this. I don't necessarily need it there, but I don't hate it. I don't know why margin is on it. That's weird. Okay. So we're pretty cleaned up. I need to double check that no one's screaming in chat. Don't do it. Thanks, Daniel. Sweet. Sweetie. Okay. Wow. Words. Okay. We created a class of just a bit of like heads up with css. You want to go most generic to most specific. So that's why I'm just plopping this at the bottom because the everything selector is as generic as you can get. The H3 is a little bit more specific and then classes, IDs, things like that, those are obviously the most specific. We called it hero words, hero card, card wrapper. Yeah. Although it should be cards wrapper, right? I don't know. And this is where we're actually going to use those styles. We're going to say display flex and we're leaving it defaulted to flex row. We are going to turn on flex wrap of wrap, but we're not really to that point yet, but it's always, I mean, we're going to want it to wrap, right? And then the other thing was justify content. I think I said space around, but we're going to save that and go back over here. Excellent. You got to love when things break because you ripped out all the styles. So now I don't actually think. Oh, it's because I named it cards wrapper and I did not fix that in the markup. I was like, I don't actually think our row is being applied. And for those of you who are just sorely missing the color blue. Because who would miss it? Let's go ahead and give the thing. Hang on. I need to look at this markup real quick. I need to understand what I want to actually do with this markup. So we've got the row itself, which has our hero cards wrapper class. And then we've got these divs. And then inside of that div, we have another div. And inside of that div, we have an H4. Do you see what I'm getting at? This div is not needed and it should be burned with fire. So let's go back to our html, burn it with fire, AKA, delete it, shift tab that over. And if we need a class on this, which we could call it class of hero card. Now, go back over. Did it populate the class of hero card? Let's see. It did. Okay. So we have our hero cards wrapper. And then inside of that, each individual hero card. And again, for those of you who are like, I cannot live my life without that beautiful color of blue. I will bring it back for you and then we can fix it. Hero card and background color, blue. And this blue is even more aggressive. You're welcome. Yeah. Okay. I know it's not legible. If we're going to use a disgusting color of blue, then we need to at least make it legible. So we're going to change our font color to white. Awesome. Okay. Okay. Now this is where we are. Markup is cleaned up and we can finally give some minimum widths and style these cards. Right. So on the hero card, it's sale. I'm going to go and I'm going to scroll this up. And again, I love working in the. I can't see my chat. Every time I switch desktops, it's like, nope, no chat for you. There it is. There we go. Awesome. If you have any questions, any comments, turtles, throw them at me. Okay. So we are inside of our hero card now. Now that they each have their own class and we don't have these random nestled divs that nobody needs. So let's go ahead and do some minimum width and minimum height stuff. I'm just going to say 200 by 200 for, I don't know, argument's sake. Margin of. Actually. Margin or. Yeah. Sorry. Thinking. Let's do some margin. On the top and bottom. Top right, bottom left, top right, bottom left, top right, bottom left. Yeah. So this, the first number is going to be for the top. So 10 pixels on the top, top right, zero pixels on the right, 10 pixels on the bottom. I mean, I could do it long form for those of you who are like, why are you doing this to me? For top right, bottom left. But since it's duplicated, we can just do it. Once. And so it kind of does its own little loop for you. Those are too chubby. Our text isn't centered. So let's go back. And like, if you're like, hey, I want you to do this color or I want you to do this width or I want you to do this font or whatever it is, like, just throw it in chat. Otherwise, I'm just going to keep talking. 40 maybe. And do we want them to be squares or do we want them to be rectangles? I mean, right now, it's just a name. So a square. But it would be nice if it was like, OK, so here's the deal. We're going to make it a square for the minimum width and height. But then if we add content, it can grow with the content to be a rectangle. OK, cool. We're going with it. Text align center. Sure. Maybe this is a little bit better. It's a little bit better. OK, so there's something in Flexbox called Gap. It's also in the css grid. So let's talk about it. Go to our row. And what time is it? Oh, nice. We need in 10 minutes. We need to take a break, get some water and come back for the more advanced stuff. But when we come back after break, I will be accepting votes for sticking with more beginner. Usually I set Gap margin. Oh, I'm looking at what Daniel's saying in the chat. If anyone's wondering why I'm randomly spouting off things. Usually I set Gap using the, I think that's the direct child selector, everything. And then another descendant selector. Oh, no, a sibling selector and everything. Margin left 10 pixels. OK, so yes, we can use margin, which I'm using to do like the top and the top and bottom gap whenever that gap. But right now, Flexbox is just adding its own spacing between each one of these, depending on the amount of content and how big the screen size is. But if we go and we select our wrapper here, we can say Gap of 20 pixels, I guess. And that's that's going to give it I don't know if you noticed it plumped it out when I I'll just toggle it back and forth so you can see. So this is it auto saying this is how much gap we have to give. But then this is me saying, no, you will always give 20 pixels of gap. And so now, like, no matter what, you won't get smaller than that. So it's OK. She's OK. We can also change the card size using Flex instead of giving like a hard coded width or height, which ours isn't necessarily hard coded because they can get chubbier. They just can't get smaller than that. But I'm OK. I'm OK with where we're at. I do. I want to talk a little bit about. Sorry, I know I'm rushing. I want to talk a little bit about SCSS because you're like, hey, we included that, but we never used it. And I want to talk about colors, variables, those gorgeous things. So let's go into our dashboard and we're going to rename it dot SCSS. And we're going to watch the world explode, literally failed to compile. That's what you want to see. That's what you want to see. You want to see it means, you know, you're alive. It's because if we go ahead and open up our dashboard component dot typescript, it's looking for a css file. So anywhere that you want to start using SCSS, because we made that change in our AngularJSON online 131, we can do so by changing the file name to SCSS and by including making sure you update. The URL to where it's pointing to that style. Also, you're welcome. We are on version 12 of angular, which I don't know if anybody saw the tweet or read the blog or you were there for the live stream. But the 12 of angular now does inline sass. It's exciting. So that's weird. That's weird. I just got a notification that participants can now see my screen. I hope you've been seeing it this whole time because that's a little worrisome. So if we wanted instead of giving a style URL here, we could actually write our css right here inline and we can do the same with with our template with our markup. I personally always separate them out because, well, back in the day, back in my day, highlighting wasn't great. Auto complete wasn't great when your html and your css were inline. Things are getting better every single day and some people are like everything in one file or bust. And if that's you, that's awesome. I have to have my html file. I have to have my css file. That's just how I live. So anyways, I digress. We'd love to hear your opinions on the matter in the chat. Let's go ahead and talk now that we have this css running. Oh, I forgot we made change. This is like the one downfall. We made changes in our dev tools. We didn't put them in the actual file. So we need to go back over here and give that minimum width. I think I said 130 pixels on the width. Minimum height was 170. And I also had a gap on here of 20 pixels. And I gave a margin here of which we can actually instead of doing what I did before, which was like 10 pixels, zero. What we can actually do because I'm counting on those 10 pixels. Let me just save and show you this in the browser really quick so that we're all on the same page. I'm counting. I need to see. I need to see the actual this margin line. I need to see it. It's kind of hard to see. I guess we'll do this view. So I am counting on that margin 10 pixels on both the top and the bottom to stack and be 20 pixels. That's just me being like, yeah, I need you to be 20. So what we could do instead is we could just give it to either the top or the bottom and actually be the number that we want it to be. So we can just say margin bottom 20 pixels. And it will do essentially the same thing. We won't have margin on the top anymore, but we don't need margin on both the top and the bottom. We just need to have the spacing whenever they start stacking themselves. So my suggestion to you is to pick one. Pick margin top. Pick margin bottom. Pick margin right. Pick margin left, right. Whenever you're giving spacing to all your elements, just pick one and be consistent. If you're choosing margin bottom to give spacing between your header, between your nav, between your cards, make sure that you're consistent and that you're always giving margin bottom and that you're not randomly, oh, on these dashboard buttons, we're using margin top. But on these, we're using margin bottom to push things down. Just be consistent so that when people come along, they see what's going on and it's easy for them to follow. Did you change your css from SES? Maybe that's the issue. Oh, I don't have any issues or maybe I do. I don't have issues. Let me know what my issue is. So make sure I'm still like screen sharing and you still hear me. But anyways, I'm going to the last thing that we did not change was text align center on our cards. I mean, why the styles changed so rapidly? It wasn't because we changed our file name. It was because I was prototyping our styles in the dev tools over here and I forgot to put them inside our actual css file. So on refresh, those styles didn't persist and it looked like it broke. But it didn't. I just hadn't written them yet, technically, because that's what I get for mocking everything up. And if you'll remember my handy dandy little tool tip, our top heroes H3 is a little bit too close to our cards for my liking. And our tool tip was to always use margin bottom. So we're going to go ahead and say margin bottom 20 pixels. Now, if you are an astute student and they're on top of your life and you're like, I see where she's going with this. Yeah, that's because margin bottom on my H3 margin bottom on my card and the gap on my cards wrapper is all the same. Twenty pixels, right? I'm reusing this everywhere. You see this all the time in styles. Same thing with the color. As soon as we choose our blue, we're going to want to use that blue in other places. Maybe we're going to want to give the border bottom to the header. Maybe we're going to use this background color on another component. So this is where we could use css variables, but we're not. We're going to use SAS variables. So dollar sign to start your variable off, right? Let's call it spacing or space. Spacing gap. I'm just going to call it spacing for now. And if you do not like it, tell me and we'll change it. But now we can use this spacing variable everywhere that you see. 20. So we're going to go ahead and paste. And so now margin bottom is set to spacing. Our gap is set to spacing and this margin bottom is set to spacing. So if we need to change our spacing, like on a different screen size or maybe we're just changing our UI and we need to go change all our colors, all our spacing, then you can go and find your variables and change those. And that change persists everywhere. So it's wonderful. It's beautiful. Why did the grid gap automatically? Okay, sorry. I'm reading what Martina said or Fernando. Oh, I'm just like missing everybody's comments. Okay. Oh, oh, I feel so dumb. Nerd, nerd, nerd, you know, nerd, you know, said that her comment was to Fernando, it wasn't for me, totally gotcha. Sorry for butting in and not understanding. And then Martina said why grid gap is automatically added to hero card wrapper, even if not specified in the style file. Let's talk about that. So if we go over here to our. I don't like it when this is Yeah, I want it to stack. So we go over here to our row. And we take off grid grid gap. Where is that coming from today? Wait, what? Wait, what? Hang on. I don't know where that's coming from, but we're going to find out. Because if I get rid of gap. Hang on, I'm going to hard refresh. And then we're going to do what any good detective does. And just search for it because I didn't even see that. Where the heck is grid gap coming from? Not grid cap. Nowhere. Wonder if it's actually just being applied by default. That doesn't make any sense. It's really strange. I have no idea where that grid gap is coming from. Hang on, let's see if we go ahead and comment out this. Go back over here, refresh it, select our. I wonder if it's flex box. I don't know what grid gap is. I don't know why it's changing. Let's go back and refresh. So it's almost like the browser is taking gap and making sure grid gap is actually specified, which is strange. I'd have to research the differences. I always say gap and throw that on there, but if anyone knows, please let me know. Maybe it's being added by SAS for compatibility. Maybe. So that's weird. I'm going to go ahead and leave it as gap, but I'm going to leave this here and say I'll find out why this happens just so I can know for the next time because that was a really good question. Awesome. Okay. I was doing things. What time is it? 12, 20. Okay. So it's technically time for our break. Oh, I'm just going to follow up, still having the initial error on my system. Oh, I'm so sorry. Some browsers don't support the gap property. Let's check that out. I love before we... Sorry. I can't actually get to my tab sometimes because Zoom like takes over the top bar. So that's just me grunting in frustration. Can I use just that? Just that? Gap. Let's check it out. So this is the gap property for Flexbox specifically, which is how we're using it. Not an IE. I'm not surprised. In the latest versions though of Edge, Firefox, Chrome, Safari, Opera, et cetera, et cetera, this really like this right here is... These hovers are killing me. These like five right here is really all I ever look at, but that's because I am hashtag blessed and I don't have to look at the others. And it looks like gap property supported for grid layout is the same like support. So... But y'alls. Let's see. What time is it? 1223. And then, Alyssa, can you show me your dashboard component SCSS? I can. Dashboard component. I'm going to make it a little bit smaller so you can see it. And I'm actually going to push it up right now to that branch also. But... We did not get... We did not even get. It's almost time. Okay. So we're going to take a seven minute break right this very minute. Right now. To go get water. To stand up if you're not standing already. And stretch. And then we're going to come back and I'm going to wrap up our variables section. And then we're going to take a vote on if we want to keep going low level or if we want to go faster. We will for sure get to some of the higher level stuff. And the component library and beautifying it and my, of course, like gorgeous version of this application. We'll touch on all of that at the end. It's just... I'm going to make sure and take a vote so that we spend time on what we want to. Also the html one, please. Absolutely. Where is... All right. It's really hard to see because of Zoom right now. There's my html. Something I did want to cover, which we will talk about, is generating a new component. Moving this into its own component. And making it a presentational or a dumb component so that it's just kind of being passed in the info that it needs and it presents our cards. So I would love to tackle that when we get back. But we'll see what the vote does. But yes, go take a break. It's now six minutes. And I will be back to wrap this up. And I'm going to push this up right now in case you want to pull that down. Get status. Get add-a. Get commit. Don't forget the commit part. Clean up hero card. Get push origin. javascript nation. There you go. Check out that branch. I'll be back in five. Welcome back from our break. I'm going to go ahead and check in with you all. I don't know if I actually, yeah, I want to see the big view. I like toggled it to the big view and it showed me like four of you. I was like, okay, yes, I think most people are back from the break. Hopefully. Hopefully. So question in the chat. Let me know. If you were here for the beginning half and you want to see more beginning content, can you say beginning or beginner? And then if you are ready for advanced stuff, say advanced. I'm going to take a vote. And near the end, we will for sure have time to cover using Kendo UI and doing more advanced things. I will make time to do that. But right now for this very minute, maybe for the next 30 minutes, do you want us to continue down this beginner train or are you ready to dive into the deep end? We got some advanced, advanced, advanced. I love it. I love it. Please, if you want to hear deep dive. Awesome. Yeah. Keep rolling in the votes because I am going to tally them up whenever you're all done. So we're going to be jumping over to my version of this application. Said it was going to be a deep dive. It's going to be a deep dive. So it's going to drastically change. But I'm going to show you what I did with the app when I was like, hey, I want to have fun with it. Let's have fun with it. So this is the branch. I'm going to see if I can move this over. Oh, yeah. Alt tab, alt tab, alt tab. No control control. Sorry. I have a what do you call it? I have a Mac. So it's kind of hard sometimes to know what button is alt. Okay. So it's called the Kendo UI Tour of Heroes releases. I have many. I'm just going to throw this in the chat real quick. This is what we're moving to. This is my version. And I love it so much. And we're going to check it out. And it's not actually. Where's my code? I need my code. Okay. So this one we're going to say goodbye to our old angular Tour of Heroes. You can submit. Actually, I'll leave it up for now because I might do an npm install. Yeah. We're going to do an npm install on that one just to show you. You can submit either one modified. I don't have a preference. So yes, let's go ahead and stop the server on angular Tour of Heroes. And we're going to go over to. Sorry. I'm like trying not to cough. I think it's the AC kicking on. It's tickling. Okay. So we're going to hop on over and we're going to check out this project. And then we will practice installing the components and talk about Kendo UI and how you can quickly kind of mock up things and throw in new components and customize them. So. Oh, NG serve. She's taking her time. Okay. While she's taking her time. You'll notice that my VS codes are different colors. That is thanks to Peacock, the extension that also John Papa wrote. I feel kind of stalker ish now for John because like everything I'm talking about today is his work, but I promise I stalk other people. So it's wonderful because you can actually set like the color of your project. So every time you open up that directory, your VS code goes back to those like that color scheme, which is really helpful whenever like if you have multiple projects open, if you've ever like, if you've ever made the mistake of like writing in the wrong project, like then Peacock is for you that extension on VS code. Okay. So yes, this is where you can clone it down from or put it into stack blitz. If you have been following along the stack blitz way, you should be able to do stack blitz and then paste in the GitHub. I mean, of course you've got to get rid of the HTTPS, but you should be able to just say stack blitz.com slash and then literally the URL to whatever repo you want to open in stack blitz. And that will get you there. But I will also copy and paste this. I always have at least three VS code windows open. Peacock is very helpful. Said Agrawal. Agrawal. Agrawal. Agrawal. Agrawal. Hmm. Agrawal. I really want to get it right. And I feel, I feel like I'm failing epically. Yes. But I appreciate you. A lot. Okay. Agrawal. I think Agrawal. Agrawal. Am I doing it? Did I do it? I don't know. Okay. Sorry. That was loud. It's probably late for you. I should remember it's late for you. Okay. So yes, we cloned it down. And if you'll notice, I've got my little, my little cute heart up here with the Tour of Heroes. And welcome, everyone. Welcome to my Tour of Heroes. It's afternoon for me. So you're good. Why do you use light theme in VS Code? Are you not afraid the light theme attracts bugs? Hang on. Hang on. I've got a, I've got a screenshot. That, that's the funniest thing I've heard all week. Two, why do I use light theme? So I have really, really, really bad eyes. I'm actually certifiably blind without contacts or glasses. Like not allowed to drive without them, that kind of thing. And so for me, the contrast on light themes are generally easier for me to read. And it's just that contrast of like, it's, it's harsher on the eyes. Yes. But it's also, I don't know, it's just how my eyes work, I guess. It just, it's always easier. I feel like I'm less strained. I've tried switching to dark theme and I'm like, whoa. But I'm sure there's some really high contrast dark themes out there that I just haven't tried. Unicorns. Yes. So welcome to the My Little Ponies version of Tour of Heroes. It's kind of unusual to see light theme. Sorry. I apologize if it's been hurting your eyes today. I, I also find it, it comes across better on streams. Like I do a lot of things on Twitch, which by the way, check out our Code It Live channel on Twitch. If you want to hang out with me during the week, that's usually where I am. But yes. So this, if you were with me in the beginning and you were like hanging out and watching like us do some css. This sexy piece of work that I've done on the headers because they're copy pasteable. It's real text. It's there is probably my most favorite thing in css ever. So please go check that out in the repo. If you're at all curious how I made that happen, because it's three layers of differentiating, differentiating text. I was wondering if you live stream. You definitely seem like you'd be a good streamer. Oh, thank you so much. Pog. Pogchamp's in the chat. I get this error on stacklets, style.scss, no such file or directory. Do you get that error in stacklets when you tried the stacklets link that I did? Did I break things? Did I break stacklets? Yeah. Tell me what you did to get that error. Was that with the old stacklets thing that we were working on previously or with this new chunky monkey, which I did not want to load in stacklets, but I'm loading it anyways. OK, I'll wait with the new one. Oh, OK. Well, I'll let it load and see if I get the same one. I'm wondering if you can check to see. Sorry, I'm just pondering because I know it's. I don't I don't I think I upgraded this to V12, which it's a little bit different. I'm going to murder this top bar. Can I put it elsewhere? Just like any anywhere in the middle of the screen? Sounds good. Awesome. I get it too. No such file or directory. Special prize to the first person who debugs this because I don't want to spend all day on it. Let's see. Let's see if we can put our head, our noggin together. I'm going to check. Styles. What version? First of all, what version of angular am I on? Oh, this one. Well, CLI is 11 compilers. I'm wondering if. I mean, because I definitely. I'm wondering if you need to do something special with. This being in stacklets. I don't know, Fernando. I really, really don't know. Try cloning it down and running those three commands. So get clone. Let me know if you can get it cloned, if it's still not. All right. Actually, I don't know if that's different. It's a little bit different. So here's the get clone. And then tell me if this doesn't work for you. And then if you can't NG. I don't remember if it was you who had the issues with NG. Then do npm start and tell me if you can get it running. But onward and outward and upward. So here, wow, I'm really like braining with the struggle here. So here I have replaced the cards that we saw earlier with actual card components from Kendo UI. And then I had this little. There's a little animation the ponies do. I love it. I love that. Okay. Let's move the chat over a little bit. And we're going to make this full screen so we have a little bit more width. And then I've got, I was playing around. This is my releases branch. So anytime something new comes, like anytime we release something new, which happens three times a year, I like to throw them in. I started this new thing where I have a sidebar and I throw in our new components into the sidebar. That's not related to the tour of heroes. That's just Alyssa's way of being like, look, it's live right here. But over here in the main section, I like, at one point I like threw in the dragon drop, like with this dropdown panel. And then if we go into our heroes themselves, you'll see a bunch of different. The list view used to be my favorite component. So I kind of went like just like a little bit crazy with the list view here. So we've got this plane version of the list view. If you'll notice, I also beefed up my data, data game. So now instead of just IDs and names for the heroes, I have a lot more information and I can show you where that's at in the app. But I'm pulling in all those bits and then I've got this where it's got like the little icon and the name of the pony. And then you can still delete with the X. And then you should be able to click on any of the ponies and go into their detail page, which again, pulling in a lot more, more information about our heroes where we've got these random images and just information on the hero themselves. And then you can still modify the hero's name. I think that's pretty much the full tour. Word of caution or maybe just maybe just a word. I don't this application. As I said, I love to use it for when we get new components and I want to test them out and I want to throw them in there. So you might be going into this and you're like, holy moly, like, let's go into I did what I what I what I wanted us to do, what I was trying to move us towards. And we went like really slow and I apologize. It was too slow. I'd love to hear your feedback at any point during this. If you thought I should go faster just to pass it on for the next people. But this is what I was hoping to do was to move out our hero cards into their own component. And so this is where I not only used our Kendo card component, but I if you go here and look, it's a dumb component. It's just it's literally just gets passed in the data and then it displays it. It's presentational only. So that's where this input for hero is. And that's then it uses that hero to go ahead and say, get the hero ID, get the hero name, et cetera. And it prints it all out in the hero card. And then if you'll notice, as I said before, when you update your project to SCSS, you don't have to update it everywhere. css is valid. SCSS. So I haven't bothered to update this particular one from to SCSS. But if we go ahead and check out our details, which is if you go and actually click on a pony, if you click on a pony and if you'll notice the load is slow, that's because I've upped the delay time. And that will be for a reason in a minute. We'll talk about it. But this is the details page. And then this is my SCSS for the details component. So if you are here in the very beginning, we created a couple, a variable, I think we created a variable. And what I was trying to move us towards was a variable file. In projects that I've organized and run that are larger, instead of having like a variable file, I would use like a colors file, a fonts file. And this is where like I'm actually defining the fonts that we're going to use. I'm defining the colors that we're going to use. And sometimes I'll have like a miscellaneous variable file for things as well. But yes, this is our color scheme. I've given them all names. And then when I need to use those, if we go over to I think this one, if I need to use them, you'll see that I import them and I use them. So yes, I need to double check chat and make sure. It's running fine locally. I have no idea what StackBlitz's problem is. None. I'm going to add that to my to-do list. OK, so Monday at 10 a.m. I'm going to start the judging and make sure you all get an email. And then there was like two other things. There's two bugs to look into. One bug I put into the comment. And then the second bug is StackBlitz for my release branch. OK, so yes, anywho, back to what we were discussing. So I'm trying to think of the order I want to do this in. Let's go back to our OG code. And what we're going to do is we're going to install because this project doesn't have anything installed, right? It doesn't have any Kendo UI installed. The other project, the purple one, obviously I have a lot of Kendo UI installed. So it's not going to be like a fresh flow. And I want you to have that experience. So we're going to walk through that as briefly as I can make it. And then we're going to go and jump back to the other project and just start using components and talk about what you guys want to talk about. So if we go over to here, I'm going to show you my super secret on my new page, my new whatever you call this new tab in Chrome. I have an extension that displays my bookmarks there. And like this is how I survive because I can't like I've got like bookmarks upon bookmarks. But anyways, this is how we're going to jump over to the docs. And if you don't have a free trial of Kendo UI, you can get one super easy. It's like a 30 day 30 day free trial. And one of the cool things about our free trials is that they come with support. So if you're like working with it, you're like, I'm stuck. Like our support is phenomenal. So anyways, back to what we're doing just to give you an overview of our docs. I love our docs. I really, really do. We've over 100 components now. So it gets a bit hairy as you might imagine. That's why I actually anytime I introduce a new component to I show like this skeleton component, we're actually going to use that one today. I talk about like either the npm command or the NG add command to go ahead and add it into your project. But then I also show like this this little breadcrumbs here. Sometimes it's pretty obvious, right? Like we've got a bottom navigation and it's underneath navigation. But other times like the skeleton component, you're like, I don't know what package to install. Well, that's going to be underneath our indicators package. So our docs are organized the same way that our npm packages are organized. So if you go and you look under let's do the card component because that's the one that we were talking about so much and blah, blah, blah, blah, blah. So if we go under layout and then card and then getting started, and I don't know if this is two and one smaller. If you scroll down, we've got the team built these live demos where you can just view the example living in the browser, view the source, or you can go ahead and export it over to StackBlitz. But one of the things I love about our examples is we have three themes by you can obviously customize anything. But we've got the default one. We've got the bootstrap theme, which is great if your team already uses bootstrap so that our components will match the bootstrap look and feel. And then we also have material. Same thing if your team is already using material. So I like the default or sticking with the default. But if you go and up to the very top of like layout, which is a bit bigger, layout is going to be the package that you install from npm. And it's going to include these components. So if we go ahead and scroll down past basic usage to installation, there's two ways. So if you have the CLI working, I recommend just going and using this copy code. I'm going to paste it in the chat. Try it out right now. Do it. Do it. Okay. So we're going to go do it. I don't need to be aggressive. I don't need to be. Okay. So we're going to add the layout component to our javascript nation, Tour of Heroes. I'm actually going to check. Yeah. Our tree is clean. We have nothing to commit. So we're going to go ahead and run this ng add command. And that's going to, again, give us access to these components. One, two, three, four, eight, nine, to these nine components. And we're just after the card component. But one cool thing, and I always like to talk about this. If you're using a version of angular, that's lower. And so you can't use ng add. If for some reason the CLI is not working on your machine. Or if you have a module set up in your application, like where you have feature modules, and so you've got like a module per feature, you might not want the Kendo angular layout npm package included at the root. You might just want it where the card component is going to be. And so if you have any of those, if you meet any of those exceptions, instead of using this ng add command to add it just generically to your project, you can follow the manual setup, which does the same thing as ng add, but it gives you the option at the end where you're going to import it. So let me show you what I mean. First, you're going to download it with the npm install. And then you're going to go to the module of your choice, which ours is just putting it in our root module. And then you're going to go ahead and add it to the imports layout module, and then make sure you have the import at the top. And so it's pretty basic, but then that's how you get access to these sub-modules, these sub-components. Let's check it out. Do I want to proceed? Why are you asking me this? I've never been asked that before. Will be installed and executed. Oh, that's weird. I don't know if that's a new thing as of this version of the CLI. Yes. I thought you were already installing. How could you do this to me? Let me know in the chat if you install it, if you get it. Like you don't even have to have it working, just like installed. Because apparently it asked me a question and I ignored it. And I'm a dummy. So the next step is we're going to throw in the card component. So now at this point, I would scroll down to the card in the docs, go to getting started, and do what any good developer does, if we're being real, real honest. We're going to go and copy. We're going to copy the markup. And then we will modify it to our glory. Yes. So Jay, that was a weird noise. Jay just asked me a direct question. You can absolutely email me about that. Then we'll talk. But I still want you to run the NG add command right now. You will get like a warning in your console that you aren't using. Like if you haven't plugged in your license to the application, blah, blah, a bunch of extra stuff. It's fine. I just want you to have the experience right now of installing and running. So do it. But yes, email me and we will talk. We will talk, Jay. I suppose you need my email. Oh, actually, you'll get my email. I will email you on Monday. So, yeah, respond to that and we'll talk. It says it's already installed. Oh, my goodness gracious. How could that even be? I don't understand. I really don't know. I'm on the releases. Oh, you're on the releases. Sorry. We right now are on. We are not on the releases. We are on the angular Tour of Heroes, Clone of John Papas, Bare Bones. And this is just to show you the installation process. And then we're going to quickly pivot back over to the releases one. So sorry. Sorry for that confusion. That's on me. OK, so now that we have it installed on our javascript Nation Tour of Heroes, I'm going to go ahead and run ng serve and drink some more of this because I'm supposed to have at least like two of these drink by now. I'm really, really far behind. Would you like to use a different port? Oh, pickles. Yeah, go ahead and use a different port. I'm going to go back to the chat and look at you. Well, I don't have your email, though. Yes, Jay, I will. I will direct message you. Actually, I really don't mind any of you having my email. Hang on. It's the zoom thing getting in the way. I love you all. It's not you. It's zoom. OK, a night goal at progress. It's pretty complicated. OK, I'm not a spammer. Don't worry. I'm not worried. You all can have my email. We can talk all day long. I mean, I it's pretty emails, pretty, pretty boring way to chat. But we can we can. OK, I think it's running. Hang on. Let me go check. It is running. So we have now installed the layout package. Please let me know if you've installed it. If you followed along, you don't have to follow along. This is just me showing you the process so you don't feel lost and confused. When you go to do it on your own. And apparently we're at localhost 6, 3, 2, 5, 8, because that's a thing. So let's do it. Localhost 6, 3, 2, 5, 8. It's a mouthful. Sorry, I don't mean to be obnoxious. I try to drink a gallon of water a day. I know it's crystal light, but I try to drink a gallon of non caffeinated beverage a day. So behind today. OK, here we go. So now we have it running and you're like, I don't see anything. It's OK. It's totally fine because we haven't actually we we installed it within PM, but we haven't actually included it. So we're going to go to our think with your brain. Think with your brain, brain, brain, brain. I think it was in dashboard, right? Yes. OK. So this chunk is what we're going to replace with the card component. So if we go back over to the docs again, like any good developer, I'm going to go and find a really basic because some of our examples under cards are like really fancy. I just want this is us browsing for code to steal action buttons. Sounds pretty simple. I mean, it's got like action button stuff, which we don't know we don't need, but we can strip that out. OK. I'm like immediately regretting this. Look at how much. OK, so we're not. It's too much. It's like just too. It's too much. I just want like a super simple building box custom layout. We don't need all that. We literally just need. Yeah, it's still Sophia Sunny. Find word Sophia. I know you're all like, really? This is how you do it. Yes. This is how everybody does it. And if they tell you differently, they're either a genius or they're lying. OK, so here we're going to steal this kind of card. Where's the beginning of you? There you are. There you are. So we're going to steal this kind of card and we're going to go in below the thing that we want to replace it. And it's still obviously like way more than we really need. We don't need right now. We're just going to make it identical because you saw my card component. I had a pony image. I was animating the pony image. I had a name like we can go all out. But what we're going to do is just I mean, we can leave that gorgeous sunshine in there if we wanted and say that it's our placeholder. But we just need our hero name, which is in an H4, which is really. I guess I guess because we have an H1 and H2 above that. But we could just put like a section tag around this and encapsulate it and start the hierarchy over again. But leaving it alone. OK, so go back down here to this and we're going to make sure we have this kendo card title directive bud on our thing. And we're going to delete any dupes that we see. And we're inside of kendo card header. And then I don't think we need a card body or card actions or this div. Who are you? Who are you? Header. OK, let's see if we need anything else. So we have to do a loopy bit. And then we're adding a click event. And we also have our class for our individual hero cards. So what I'm going to do is I'm going to cut this hero card out and just paste it inside of our wrapper and we will see if we have any problems. So hopefully it did not go too fast and hopefully this doesn't explode. That's always the real problem, right? Like things exploding. This one. And we still have that gorgeous blue. All right. I'm going to do something for you all right now because I love you. We're going to go over to my ridiculous list of bookmarks and we're going to find color and we're going to go to the last one. Someone suggested color hunt. If you have a like better one, then shout it out. I want to hear it. I have a ton bookmarked, but this one's like my new favorite. So we're going to we're going to use it. OK, so you're like in need of a color. You're trying to build a color scheme. You're stuck for a color like head on over to color hunt. You hover over like these color palettes they've put together and the hex is right there and you can just copy it. So I'm like, yeah, that purple. It's my jam. So we're going to go back over to our SCSS and we're going to make a variable. And yes, these variables should be in their own file. No, we're not going to take time to make that file right now. Sorry. OK, so I'm going to call it purple and it will be the purple that we use. But apparently it doesn't copy the Octo Thorpe with it. OK, and then we're going to replace the blue with our purple and then we're going to be happy because we no longer have to ever look at that blue ever, ever again. OK, this one. OK, not that we want that background there because actually now that we are using the Kendo card, we don't. And we're not really in love with the image or the layout. So here's what I'm going to do. Anyways, I mean, you all get the idea. You go in here, you start customizing, you can customize. You can even use like ng-template inside most of our components to go ahead and start customizing like the layout inside that component. But I want to get rid of I don't need that image. It's not actually related to our content anyways. And our hero card itself doesn't need it doesn't need this or that or that. So right now, obviously, we just have we don't we don't have any content. We could give it some content, give it a paragraph about the hero, give it. And again, we go back over to mine. I did just that. Because I this application is a little bit limiting to work with because there's not a lot of data. So the first thing that I did whenever I was like, I need to redo the tour of heroes was like, I just like I needed a lot of data. So here we have the title, which is kind of what we did. And you can see that in our other app. But then also like where they're from added a tool tip for that because sometimes it gets hyphenated. And then these like main characters get it main characters. They got their own specialized avatar. But yes, I'm not seeing any questions. I think we can go ahead and move on. I'm going to go ahead and grab 111. We end in 40 minutes, I think. Yeah, we're doing OK on time. I mean, yeah. Get ad dash a. Oh, oh, no. You can't type. It is known. Get commit dash M. What did I do? Add kind of UI card component. Get push origin javascript nation. Excellent. So now the if you're like, hey, I want to take for the code contest. If you're like, I want to take your version, clean this up a bit, go for it. If you want to go ahead and work with my other one, I'm actually going to close out of this. Don't panic. I'm closing out of this. We're saying goodbye to it. But if you want to take this version and go into if you look at my hero card, you'll see here where I'm actually using the Kendo card component. And then I'm giving like a router link so that we can click on these cards and not this one, not that one. Click on these cards and they route. And so we're using the router link right to change that. And then I also have the H3 and an image of the pony. And then if you you're like, hey, how are you animating that pony on hover? I'm just moving the top by 90 pixels. It's really not that scary or fancy. So, yes. OK, we have so much to cover and so little time. Double checking chat, not seeing any questions. Let me know if you have any or if there's something specific you want to see because we're just going to chug right along. There are two components I'm really excited to talk about. And they actually came out with our last release. And again, while I'm working on this, feel free to clone down either one and customize it. And that can be what you submit or you can write something from scratch. Really don't really don't have a preference, preference. OK, so when you go to a pony page, we're going to go to Pinkie Pie because she's my all time favorite. You will notice that it takes like, well, a long time to load. And if you'll notice, the inner contents take like even doubly long. And this is where I'm sure I know you all have seen it. The skeleton component comes in clutch. So the skeleton component is included under indicators. It is already included in this project. You don't have to go in GE add or MPM install or do any of that. But if you're doing it on another project, this is the MPM install command. And this is actually the skeleton component, like right there. So if you go and look in the sidebar, the sidebar, and you look in the html, you can scroll through here and see the Kendo skeleton. You can see the bottom navigation. You can see the circular gauge. It's all in action living right there in this beautiful sidebar. So these first two are the ones we're going to talk about for the rest of the time, unless there are any specific questions around Kendo UI, css, angular, or perhaps favorite snacks. I'm really up to discuss anything. But right now, we're going to work on the skeleton. So remember how we talked about in-memory data service. And this, again, is where you can go and find my massive list of data. I just ripped out the heroes, and I threw in the ponies, and it was beautiful, and everyone cheered. I mean, maybe they didn't cheer, but in my head they did. So I think it was, I always forget. It's in a module. I think it's an app module. Yes, it is. So an app module on line 48, this is where you can find the delay. And this is really, really, really, really helpful for things like indicators, like loading indicators, like the skeleton. So we're going to, I was going to say crank it up. I'm okay with 2,000 milliseconds. Let's go over to our detail page, though, and let's talk about the skeleton component. So at this point, this is where I'm going to go, and I'm going to show you, oh, right, I meant to mention this. If you're browsing through this app, she's beefy. Like, there's a lot here, and a lot of times, like if you go down here to the very bottom of the detail page, you'll see super simple expansion panel, and then you keep going down, and you'll see expansion panel with custom icons, right? And then it's all commented out. This is because as I build on things, the app was getting just, I mean, she was so thick, and I was like, oh, this is too much. So I try to keep it streamlined, but I don't want to delete valuable template code. So if you're looking for other examples, you can go through and uncomment things or check through my commits to see different versions of the app as it's grown and evolved. So that's why there's so many ridiculous comments in the templates. It's because I had things previously working that I don't have anymore. But if we go up here to the very top, this is what I want to talk to you about today. So I have the skeleton component included. And so what I did was I copied this below section. Let's collapse this real quick. I copied this below section here that says, hey, if ng-if there's a hero, print out those hero details. And then, of course, you can check out the SCSS where I'm styling those hero details, and I'm styling the skeleton, blah, blah, blah. But back to this. I copied this section here. And what I did was I used our skeleton component. And just anywhere there was a piece of data, I replaced that, like this H2, for instance, I replaced that with a skeleton component that was about the same size or the same shape, because that's what the skeleton is. Let's go and look at the docs real quick. And there you can see it loading in. The skeleton component is a component that is there to be like a loading indicator for a certain component or item. And so here we're loading in these detail pages, like these details. We're loading in the name. We're loading in like these sub-details. We're loading in the pictures. And so I wanted to show you a Shadox. Is this Shadox? And it's under indicators. So let's go ahead and go indicators and skeleton. And so here you'll see that we, you can even like strip out a component. So like, let's say you're using our card component or somebody else's card component or your own custom card component. You can strip out everything inside of that card component and make it look like it's loading while it is. And then the data will pop in when it's available. So there are three options. There's a text, a circle, and a rectangle with the skeleton component. And so that's what I utilized here, using the different shapes to make these happen. And let's go ahead and check it out. So here I use the text up at the top to sit next to details. And it's pretty easy once you get going. You literally are just, anywhere there's a variable, strip that out and style a skeleton to fit the appropriate size. But we have two animations. We have a pulse animation and a wave animation. As you can see, I couldn't decide. I was a little bit indecisive. Some of these have the pulse and some of them have the waves. You can see a subtle difference between them. Obviously you'd want to be consistent, but I can't decide. I think I like the pulse. I'm not sure. But you specify the shape, the animation, and you can also specify the width and the height right here in line. Great thing. And remember how I talked about, I was hired on to do a lot of custom UI work a couple years back. I loved that, but it was with Bootstrap and it was a bit painful. Something, the reason I'm here to stand before you today as an advocate for this component library is because I have built custom things alongside Kendo UI or tried to customize Kendo UI with little to no effort on my part. You should see some of the selectors I've written before to override Bootstrap, but also avoid the important tag. It can be a bit hairy, but I love how our developers, they really, really do try to only write the styles that they need to write and to be as specific as possible. That way they're not overwriting your styles as well. So I really loved writing custom things alongside this and enjoyed it. If we go back here and to this section, let's go ahead and add an NGIF. NGIF, no hero. If there's no hero. So while there's no hero, and I actually need to scroll, and we might spend some time customizing this, because there's still a couple of things that pop a little bit as far as the sizing, but I'll refresh again and show you. But yes, it's loading in, and then as soon as the hero details are available, it loads in. I can't decide if I want details to be there or not. I could just put a whole loading indicator here instead of just near the name, because the name size is going to change and vary, and what you're trying to avoid is the pop from details going from here to here. So I haven't decided yet. I don't know. I'd love to hear your thoughts in chat. I'm looking, making sure no one is throwing turtles at me. Okay, awesome. So yes, that is the skeleton component. Freaking love it. And now that I'm aware of it, it's kind of like Comic Sans. When you point it out to somebody, they're like, you're going to see it everywhere. I promise you. Now that we've talked about the skeleton component, you're going to see it in five apps. We should apply skeleton to details, in my opinion. Okay, let's do it. Okay, here we go. So I'm going to get rid of this H2, save it, go back over. Now, this is not long enough to adjust for this, and honestly, the whole thing isn't like tall enough either. So here is how I get rid of the NGIF so that we can see it full time on the page and change the styles. Then we can bring back the NGIF because if you try to do it while it's loading in, it's a fun nightmare. Okay, so let's go ahead and pull over our this, inspect, you. Okay, so the width needs to be like, I don't know, double. Sorry. Apologies for Keycaster. If she becomes obnoxious, we can delete her. So here's the fun part. The names all have different widths, which we won't know until the data is loaded. So really, at this point, you're just kind of, you're trying to give an average of length. Pinkie Pie, I think, is a pretty, there are longer names, but I think it's okay. So 560, I'm happy with, but I'm not happy with the height. So let's go ahead and because our headers are so much chunkier than that. Yeah, yeah, I'm happy. 560, 100. Okay, so we deleted the H2 inside of here and then we can pass it here or like I said, you can in your css, you can pass it. It does not matter. Hip, hip. Sometimes, though, I find, especially with this section that we've created here, I find it easier to, I know, I know. If you're cringing, inline styles are bad, right? They add an extra level of specificity that you don't need. They're often forgotten and then you're like, why is this applying? Inline styles are bad, but this is a component that we're using from a component library and it takes these as parameters. And when you're using 100 of them, like we are below, sometimes it's easier to keep track of those heights and widths inline than it is to do it in the css. So it's really up to you and I'm not trying to push it, but for this demo, I was like, yeah, I'm going to put them right there. Okay, so let's go ahead and put on the hero and the ngif, I mean, equals bang hero. Yes, save. Okay, so now it loads in that whole bar and it pops in. Okay, so next problem is, which actually I don't even know if I want to spend time on, we can. The next problem is, okay, we'll just do it real quick. You talked me into it. Nobody said anything. I'm just talking to myself if you're wondering. The width. So our sidebar like pops in and out and it's like, no, Alyssa. So let's refresh. Let's all view the problem. Yeah. Yeah. So I think it's going to be pretty easy fix, quite honestly. You are 762.92 pixels wide. But I think it's actually doing that because of this content wrapper. Sorry, guys. I have to move this thing again. It doesn't look like I'm doing anything, but I'm just moving the zoom things around. Okay, this, that, there we go. So I think I'm trying to figure out the best way because we don't want the sidebar to be popping back and forth. But the real problem is that the content doesn't know how large to be with our skeletons. So we need to tell it exactly how large to be. This is display flex. So what I think we should do, I think we should give a quick, easy way of fixing this is giving our content, which are you collapsed? No, it's just I was just on the wrong thing. I think we should give our content, whether it's a skeleton or the actual populated content, a minimum, a minimum width so that it's never smaller than a certain size. Let's go ahead and do it and see if it breaks at certain screen sizes, minimum width of 762. So let's say 700 and let's go. I don't know. I really don't know. Let's try it. Okay, let's pop that on and off. So it's just a couple of pixels larger as the minimum. Now, if we go smaller. So when I hit a certain size, I have a media query that is telling this to plump down to the bottom and be scrollable down here. But then we are going to have a problem with this because it has a minimum width. So then content is getting cut off. So what we need to do is if we're going to set a minimum width on our section, we need to make sure we're adjusting it for our mobile slash any smaller sizes. So, yes, I am going to let's just do it. So skeleton section and you. How do you not have a name? Oh, I know. Okay. If this is too verbose for you, tell me what you would do. Because I'm giving both of these a hero details section. And then in here, I'm going to go and right above the skeleton content. I'm going to call it out and give it the minimum width that I'm talking about, which is I think we said 765. We could do percentages. I'm not afraid of pixels. There's like a whole movement where you should use EMS only on everything. And I'm just now you don't need to use EMS because the browser can calculate all of that on its own. And it's really overkill. So we were back to pixels. I'm not afraid of using pixels. I don't like setting hard widths like this. But for the sake of content loading in and then popping, I don't know another way around it. Like, really, I really don't. So because we don't know the width of the content until it's loaded in. Anyways, let me know if you have a more elegant solution. I'm all ears. So next is we need to find where we are. So we've given that that minimum width, which should help with the popping. And actually, we should we should probably refresh and double check, double check, make sure that it does actually. It doesn't. OK, so we got to take off before we go and fix the media query. Let's fix because our solution is not working here. Detail section. Why aren't you working? So what we want to know is why this section does not have a minimum. It does. Wait, what? What? What? Oh, it's because I'm giving it a minimum width already. There it is. There it is. And if you are still unaccustomed to SAS or SCSS, this is the nesting that I was talking about. So let's take a quick second to talk about this for a minute. So we have a skeleton section, right? That's our top loading in indicator section, and it has a minimum width. And then inside of this, any allies or allies that have something inside of them with a class of in line will get these styles. But it has to be they all have to be inside of a skeleton section. So it's kind of a really nice way like encapsulating your styles. I don't usually go deeper than two. What I mean by two is one, two. If I had to go ahead and type something inside of this, I might break it out and then just put the selector on one line. But just personal opinion. Let's comment out this minimum width and see if this fixes the popping issue. We could also give that five hundred. Oh, I'm like waiting for it to disappear. It's been a it's been a morning. OK, only it's going to go. It's going to go away. Now, the contents are there, Alyssa. OK, still having the issue, which I thought we were. I don't know. I don't know. Let's find out why. I love it. I love debugging css. Makes me so happy. It's not sarcasm. I really do love it. Minimum width. So you have that minimum width. I wonder if it's because our outer who hang on. Turn off the AC. It like goes from unbearably hot to unbearably cold. Sorry, we're going to debug. We're going to fix this. So you're both the same width. But when you disappear, it pops down because of flex. Are you listening to your minimum width? OK. I just undid the delete from the dev tools. If you're wondering what happened. Are you listening to your minimum width? Oh, it's being it's larger. OK. Because I insist on using minimum width. It's larger than the minimum width. It's larger than the minimum width. So if we just say width, which I really don't want to do. But it's going to fix it. So let me ponder away around it. That's sexy. Why are you being like this? It's like I will absolutely not be that width. Because now the content is just, oh, my goodness, I'm so dumb. Anybody see it? Does anybody see? Do you know why that avatar image is popping outside of its bounds, this hard-coded bounds that I gave it? Anybody? Anybody? Maybe this will help. I don't want to break point. Does anybody see it? Hmm. OK. It's because I'm giving hard-coded widths to my skeletons. And so they are pushing these skeletons right here. Also, can somebody, anybody emoji in the chat just to let me know that you can still hear me and you're all alive? That would be good. So it's because I'm giving these hard-coded widths right here. These kendo skeleton, long, skinny, occupation skeletons are forcing everything. Oh, I see a thumbs up. Oh, thank you, and a smiley. Beautiful. Thank you, darlings. So we need to figure out how long this is. This is about 545. That's a really nice number. So let's go and change these to be 545 right here. You, you, you, 545. I think it's just three. Whoops. Yeah. OK. So I think it's just three. Yay. Yay. OK. So now we should be able to go back to our SCSS. And we should be able to say minimum instead of a hard-coded width. And now that our skeletons aren't forcing, or maybe it'll still break. Who knows? I can't really tell without my NGIF. If you can tell, then kudos to you, because I need to see it pop. Oh, I guess I could actually just check the width of it. Go back. I want to check the width. The width of that is 765. I think it's working. I think she lives. All right, let's do it. Let's do it again. Refresh. Watch for the sidebar. Watch for the sidebar. It didn't move. And we did it all using minimum width. So technically we're not hard-coding it. We're just hard-coding its minimum size, which as I mentioned is a problem when we get to our media query. So we're going to go and pull that up real quick and fix that. But if we... Yeah, yeah, yeah, yeah, yeah. Looks good. Awesome. But this, this is the problem. This is the problem. This is the problem. I'm trying to think of who... Okay, here's what we're going to do. So the section with the pony details does not actually... Oh, we've got to book it. Okay, I'm going to hurry, because I really wanted to talk about at least one more big component. The section that has the pony details, this one here, you're not... I'm pretty positive, like 100%, that I don't have a media query in this file. I added the media query to our sidebar. Uh-huh, uh-huh. See what I did there? And yes, you will see comments, like to-do comments. I'm like, what is happening, Alyssa? It's because I broke someone's... If you ever see important, this is Alyssa's slapdash way of fixing something because she needs to go and fix it properly. But if we... There is a... Where's my media query? I'm going to throw something. Absolutely unacceptable. Somebody has the media query. Media query. I wonder if I gave it to the container to wrap at a certain media size. Content wrapper. Who are you? You're an app component. I bet you anything it's on there. It is. Sorry, I have to leave. No worries. Make sure you fill out the form to win a prize. This is the prizes, prizes, swag. You're beautiful. Goodbye. Thank you. And there is no hard feelings. We only have 20 minutes left. So if you have to run, if it's late for you, whatever, I totally understand. And I just want you all to know that you have made my day by being here and by being so positive in the chat. Okay. So here you can see I'm saying media query orientation portrait. We can talk about that. And then I'm calling out... This is for the bottom nav, but I think I have another one. No, do I not? Hold. Everyone, hold. Here's what we're going to do. We are going to look for app media because this is not the media query you're looking for. So orientation, this one. Who are you and what are you talking to? Okay. So compose myself. I'm telling the content wrapper who wraps the content. Are you? No. Where are you? There you are. That guy. I'm telling that guy. When the orientation is portrait or landscape, AKA when you're on a mobile device because browsers don't have orientation. So when you're on a mobile device, go ahead and set your flex wrap to wrap. So right now this is a row of content and it's like forcing itself to be in a row, even if it's kind of overflowing that row and getting cut off, as you can see. But whenever we finally hit whatever is considered to be orientation or portrait, it pops down and so we're wrapping it. So what I need to do is go ahead and fix the widths. Essentially take away the minimum width inside that media query. And I heard someone unmute, so if you want to say something, you're always welcome to interrupt me. Anyways, this is where we would do that, but we are rapidly running out of time. So I'm going to go ahead and jump to our next component. Unless anybody has questions or wants me to continue down this rabbit hole, I'm going to take like a two second drink and then we will move on. And I want you all to have this, this link. Make sure you'll get your free t-shirt and stickles and et cetera, et cetera. Okay. Yes. I need to wrap. I need to wrap. Another component that we have is, which I think is so much fun, is our bottom navigation component, which, oh, I forgot. These are actual, some of them, I guess, are links to the docs. I thought I made them all links. Oopsie poopsie. So the bottom navigation, which this one right here is, it's really cool because it links into the actual router, like the angular router and plugs in the routes that you want it to. So I think I did it. You'll have to bear with me while I find it. Actually, we can close this and this and that. I have no idea how this happens, but I always have like 20,000 files open by the end of it. Okay. I'm like, there's no way I touched all those files. I guess I did. I think we're going to start on the dashboard and check it out. So the dashboard here is where I have, oh, no, I think it's actually going to be an app, not dashboard. Dashboard is a further layer down. So inside of our app component is where we have our nav at the very top, and it's where we have like that image of the rainbow and the Tour of Heroes text and all that goodness. So here down at the very bottom, I'm going to go ahead and uncomment out this Kendo bottom navigation, and we can talk about it for a second. I'm passing it items of items, and so if we go ahead and check out our typescript file, here I have created this array that is empty, and I'm looping through our routes. And if the route has an icon specified, I'm pushing it into our items array, and that is then the items that get used. And you might be thinking to yourself, what is the need for all of this hoobly-hop? If we go to our app routing module, I have added, this is a little bit different from the previous app routing module that we looked at because I've added text and icons to the dashboard and the Heroes route. So those are really the only two routes that we want in any type of navigation, whether it's our top nav, our bottom nav, our side nav, whatever. You don't want a random detail ID without the ID route or a blank path route. If I didn't do that and I just pushed all of our routes, if we go back to, where is it? This one? This one. If I just pushed all of our routes into items and then that's what we went ahead and looped through, you'd get two really wonky, not really working links. And so then because I've specified the text and the icons, I'm just pulling those from item path, item icon, and then item text as well to print. And so the last nibbly bit that happens to be important is, again, you don't have to check for orientation. You probably should check for exact screen sizes to do different changes that. This was just my quick and dirty way of getting it to happen at a smaller screen size. So here I'm selecting our Kendo bottom navigation and I'm giving it a display flex versus its default of display none. So here there is no bottom nav, right? We are not at a small enough screen size. So if I get to a small enough screen size, our beautiful pink bottom nav that actually fully functions and has different highlight states and it's customized a bit for me and it's a lot. Obviously, our default isn't pink, but I needed that hot pink. And so I can show you where I plugged that in at. So here I'm selecting our nav that's solid and I want it to be the primary nav as well. I needed both of those. And I'm overriding the background color to be our hot pink that, again, is coming from our variables file, which I think is colors.scss. And then the same thing with the active and hover state because if we go to our zoom always freaks me out. So we are under navigation, bottom nav, getting started. So if you go to our docs, you can check out what the bottom nav looks by default. So there's the material theme. And if we go to the default theme, which is what I'm using, it's the white and the orange. And so I needed to override the hover state and the active state. So that's how I did it. But if you think that these selectors are ridiculous, you should try customizing Bootstrap. There was oftentimes things that I just couldn't do or that were really ugly to do. So this to me is a dream to be able to write stuff this easily and customize it this easily. So I'm going to see. We've got 15 minutes left. I did want to leave a little bit of time for questions, comments, thoughts on what I can do better next time because I'm super open to feedback. Let me show you real quick. Twitch.tv slash code it live. So I mentioned it earlier. Code it live is, and I don't actually know if anyone's, oh, he is. So my cohort in crime, one of my fellow advocates, TJ, he's running an all day react stream today. So the poor guy, I actually right when I sign off this, I'm going to go hop in backstage and give him some relief to make sure that his speakers know what's happening. But we all the time are on code at live doing streams. It's a lot of fun. We so every I'm starting a new show called javascript girl in a dot net world on Tuesdays, Tuesday afternoon, my time central to really late for you guys. I'm so sorry. It's really, really late. And then on Thursdays, I do a VR stream. So I'm going to be getting into dot net and all things in that ecosystem. And then I love I have a VR headset and me and my friend Ed, we actually program in VR. So that's a lot of fun. So check out those or we've got lots of shows. Yeah. Thank you all so much.