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. This 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, yes, for today.

We have two $50 Amazon gift cards that we'll 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, 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 form. 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 should not 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 this kind of thing, I'm always surprised. So the worst that can happen is that you don't win a gift card, the best that could happen is that you do, right? 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 together so you can put like 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 demo application that was built by Jon 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 Jon Papa built and he's actually got I don't know like ten odd different flavors now with Vue and React and other things. But yes, use the chat, let me know. So an 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 gonna give me a good idea of kind of where we should start and how deep. Fernando said, not familiar with it. Okay, 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 is forked, you see here from the OG creator John Papa himself. So Dev Agrawala said, built it before. Lucia said, I read a little about it before signing up for this workshop. Okay, very cool. So this is where I originally forked it from and my master branch is identical to John Papa's, that's what we're gonna 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 gonna be doing 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 gonna happen if you click on that. So it opens up, it's actually like pulling in this repo here. And it's gonna give you this error if 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 gonna run the application over here on the right-hand side. So, Dabash 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 dropdown 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... Oh, thank you, stack blitz. 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 you 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-paced high level overview, more of a speedrun 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, well, 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 Veliat? Because, like, he's, if it's Ravi Veliat, 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, 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. Like a 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. Also, 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. 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. 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... I love workshops. I love seeing all your beautiful faces.

So exciting. Okay. And one day we'll be in person again and it'll be even better. It'll be even better. Okay. So we're going to grab the code. I'm just going to copy this link off of the GitHub's and 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.

Okay. So here is... Come back, please. Come back. Okay. So I'm going to go ahead and walk through. Boop. I obviously already have the code pull 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 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 like 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 gonna cd into the folder that I just created and I'm actually going to bump up my font so you can read it. Wouldn't that be nice of me? Okay, 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. Okay, so now if I list it out, you'll see that we are in the folder that we created and we have 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 us 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 StackBlitz route and you wanna 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.

Okay, so our NPM install is like, it's going. Please stay hydrated. If you're watching it's a three-hour workshop. If you're here for the long haul, make sure you are drinking the fluids. The waters. So now if nothing blows up, we should be able to use the CLI to run IngieServe. So let's try it. Excellent. This is good sign. So it's asking us 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 Nickel. 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 gonna say no right now. Because... Any time 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 gonna 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 gonna go over here while it's building. My computer fans are starting. You can do it. Okay, so this repo right here has multiple branches. None of them are relevant to us yet. But I'm gonna make a branch. Maybe we'll call it... JSNation. We'll call it JSNation. And so if at any point you get lost today, that branch is what I'm gonna 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 is she talking about? I got you. Don't worry. Look, it's served. Okay, so let's walk through those steps again just in case, verbally.

So we cleaned up our data. 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 got to go in. Now it's saying that we are actually able to go to localhost 4200. Yay! 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. Ooh. Okay. I'm trying to think of the fastest way to help you. Okay. It's weird. Can you tell me what the error message says? Because it's weird that... because your system doesn't... Your system's version of Angular shouldn't matter. 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. Once 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 that's like... This is like your restart, right? Like turn it on and off again, and then on again. And then, like, 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. If you're in the Discord server, 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. I want to send it to everyone. No, sorry. It 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 clone command and then we did the npm install command and then we did ng serve. If you're if it is like an npm issue, which I had, I had to go ahead and update my system's 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 use npm node version manager to manage my node versions. And 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 any who, 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 StackBlitz 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 known modules etc. 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 moved 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 stands for any who. 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 the code, go ahead and open it up and open up the the clone down version, and I'm going to actually 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 run start and something else. Ooh look at Maxim, is it Maxim? Maxim, try to run NPM install dash G at Angular CLI. Yes! I didn't even think about that! I'm sending you a prize. This is my handy dandy marker. Anytime someone is just amazing, they need an extra prize. So Maxim, make sure you fill out the Google form so that I can get you an extra something something. Maxim prize because that is such a good idea. Check out the chat. Run NPM install dash G, which means global. I suppose I could type it while we're... Okay. So NPM install dash G and then at angular slash 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 just refresh to prove. Awesome, I love it. You guys are awesome. Making me so happy. Okay, to prove that we have it running. So now we're going to go ahead and open up the app. And 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 small. We will see. Okay. 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... Well, I mean, on refresh, they'll come back. But delete heroes from here. But delete them. You can add a new hero. So we're going to give... Hopefully, I'm saying this right. Maxim. 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 details 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's asking questions or giving excellent comments. So we have our... Our index HTML page, which our title's blank right now. Let's go ahead and rename this to... 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 gonna do. We are going to get checkout 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 and I'm going to call it JavaScript Nation. Oh, it already exists. Oh, 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 anytime 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, we can go back to that. 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 to ng serve on that branch? I just stopped the ng serve. I pressed control. See 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 name 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. The index.html change is the JavaScript Nation workshop title. So what we're going to do is we're going to say get add dash 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, 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, I'm going to add a get message of starting the workshop. And it's get, why am I forgetting this. Does it just get, get add, and then get 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 Cela, Celal, you're gonna have to correct me on pronunciation, but you're getting something special for that. Like how do you forget the word commit, like that's, who knows, start the workshop and get push. Um, sometimes, like I know things. And then they just disappear from my brain. So thank you for that. Um, so it says that it created the new branch. Now you should be able to see JS nation, um, which it's not very exciting yet. It's going to get exciting. Uh, right now it just has this change in title, but we'll, we'll deal with it. Okay.

Hmm. 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 get a CP ad commit push. Ah, and cash. Yes. Get a CP ad commit push. I love it. I love it. Uh, so here you'll see my route, uh, which is, is where are inside the body. Whatever page we're on. Where's my, where is my Chrome tab? Whatever page we're on is getting, I think I can't live with the Chrome tag 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. Um, and we're using Chrome today because, um, the dev tools are better. And, and we can, we can have an argument if you want to tell me like, I don't know, Safari's dev tools, or I don't know, or, you know, Edge's dev tools. I don't know. But, um, I have found in my UI life that the Chrome dev tools are just so much easier to work with. So I'm going to make this a bit plumpier. But here you'll see. Um, the MyRoot, uh, with our Angular version, whoop we're up to date and it's plugging in all of this goodness. And you're, you might be like, Oh, where's that goodness coming from? I'm glad you asked. Um, 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 component.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 OhMyZSH config to run it in one command, Daniel said. Nice! Oh, first I wish I could show you. Maybe I can. I have an. OhMyZSH 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 like works the way it does with shortcuts and with the theme. And yeah, OhMyZSH for the win, right? It's it's whenever I'm like CD-ing and I'm like, hey, I want to go into, actually, I can turn on. I think it's called Kiicaster. Let me know if that's obnoxious. Yes. I'll do your thing Kiicaster. There it is. So in the bottom right of my screen, now you see the keys, which I can always quit Kiicaster, but I can CD and then tab, and then it's going to like list out the possibilities, and then I can say, Oh, I want to go into the CSS playground and it auto completes it. As I tab. And so that's like the main, I know, OhMyZSH 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 the size up a little bit, I might have to bump it down later. Cause like, 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 now 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 like 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 grimmest. So I think we're using bootstrap. We will stop using the bootstraps because I can't I can't do it. I can't do it. Okay, so we are looping through our heroes and you might be saying to yourself because you see let hero of heroes. That's where we're getting this 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 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 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. Is it we've got this in memory data service and do correct me if I'm wrong? But I believe in memory data service like the library that Dan is Dan, that John is using for in 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 MOKS, 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, uh, 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. So go ahead and change these up, um, to heroes that you like or to a dataset that you like, um, and that should populate in quite nicely and literally that's enough to submit and win a price today. So, um, I'm going to read chat, double check what happened. Dab, bub, bub, uh, oh my gosh. I'm so far behind. I'm so sorry, everybody. Uh, plug ins, but, but 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. Okay. That's really cool. Um, dev Agarwala said GCO for checkout. Nice. Forget checkout, uh, bootstraps. Okay. If you don't want to touch CSS. Yeah. They're with you if you wanna 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.

Um, 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 closely as possible match the real product, which was like, uh, it was fun. Um, but I did kill bootstrap. I had to, I had to, I had to nuke it. Um, but yes, this is my project using material design. Nice, Daniel. Um, and then, uh, right. So go into the end memory data service change, change the data, even if just a couple names get, get funny with it. And, uh, let's show you, I think it's in it's not in this one. I was, I was get package Jason and Angular Jason mixed up. I know they're like very, very different things. So you'd think like, I don't know. It, you would think it wouldn't be a thing that to get mixed up. Yes. Yes. Okay. So I think the next thing we're going to do is use some sass just because. Oh, because I love sass and I don't want to go on a rant about it, but I do want you all to know how to do it. Um, but before I do that, I need to show you, um. I'm just going to search for it. I think it's called delay. I always forget it's in the app module. So if everybody goes and opens up your app module, uh, here is where the in-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. Um, but you can go ahead and change this to basically fake a slower C, like a slower network or a slower call. So yes. Um, so we're going to leave it short for now, but this is something We will, we will for sure be utilizing. So let's go back to. Um, used some SAS in the project or in life. Both. I'm pretty sassy. Uh, in both I can't live without SAS. I don't know. I think it's just like in my blood now. Okay. Let's do it. Let's use some SAS. Um, yeah, we're gonna, we're gonna do the SAS and then we're gonna 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, it's so special. I'm like, every time I look at my time, I'm like, oh, I've got to change that background. Okay. Um, so yes, we are, we are using a SAS program. We're 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 S-C-S-S, which is a flavor of SAS. Um, you can use this little dash dash style flag that I just plopped in chat. Um, and it will go ahead and generate your base application configured to use S-C-S-S or SAS or whatever you put in there. Um, yes. So that's great when starting a new project, but hi, we cloned an existing project. So we need the schematic command, um, and hopefully you got the CLI working. But if not, I know how to, you it's literally just like a one liner. Um, 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. Um, instead of, I feel shamed now. So I, I, always, it's just like my habit to like, start and stop the server, but I'm going to try to like, leave it running as much as possible. 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, 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, um, unless most of you want us to stay at the lower level, I will take a vote, we'll take a vote. Okay. So we are in. Oh right. We're going to run this command and you can fig blah, blah, blah, S C S S. And you might be asking yourself. Why Alissa why? Uh, I love SAS variables. I use them all the time in my life, my everyday life and my coding life. Uh, I 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. Um, 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. Um, 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 make our own. Like color variables and like 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 okay. 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. Um, but you can make those changes if you don't have the CLI working and you're still using npm start. So, uh, let's go ahead and, um, I don't, it might be difficult to see on my but I have, how do we add SAS in Stacklet? Woo. Spicy. Okay. We will cover that in a second. Um, there is a way actually I think you'll do exactly what I'm about to show you. So I think using SAS Stacklet you're just going to make the changes manually. I think there is a terminal in Stacklet like where you can do command lines 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, oh, 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 SASS, it is a valid SCSS. It's just when you add 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 mixins. Oh, I love me a good mixin. Okay. Anyways. So yes, make that change. Make sure everything's still running and let's go ahead and we're gonna open up 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 gonna clean up and use the next so many minutes writing styles for. For me personally, these things right here. 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 gonna. 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. Like, and then it would be fine. I also. I look okay. Here we go. Um, as someone else said the hero search can place on the top bar. Yes, I know. Right. That'd be a really good place for that. Okay. Um, so let's do the cards. I call these cards. Oh, did you all see that? That was trippy. It, 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, uh, 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. Um, anything 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. So 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. Uh, we can, we can lead because like my gut instinct is to go, Hey, you, why are you centered? And then it's beautiful. Um, but if we want to go the center route, then let's, let's do it. Let's dive all in. Um, so the first thing I'm going to do, don't hate me. I'm going to, I'm gonna, I'm gonna get rid of bootstrap. I can't handle it. I can't do it. I can't live like this anymore. These, this class call one for Bill. Bye. I can't do it. Okay. Um, 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. That's I mean, I'm not, I'm not hating it. Um, all right. Uh, so let's go ahead. And I like to do things in the inspector a little bit, a little babble, bent and then move over to our actual style sheet. So, Hmm. He's make sure you're hydrating. Okay. Um, so we're going to go ahead and say to the wrapper, I love flex. So we're going to say display flex, um, which were kind of almost backed where we were, um, justify content space, but tween space around space between space around, space between, um, 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, uh, 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 changes the flow of the text. Hey, everybody look at me. I'm a row. Really 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. Um, for the content, it like starts wrapping, uh, we have differing widths and heights though. So for example, if you're, if you're on the, mostly on the receiver, we have very different references for these pages to argue with. Those are the differences that we can try and明白 to look at, um, you know, the pages. Yeah. And of course we can do that if we want to. You know, if I wanted to make a whole lot of pages in here and something that makes it slightly bigger and it looks like an apple on the I really just have to like try something until I'm like, yeah, oops. Key casters going a bit crazy. Okay. Uh, 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. A 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. Um, 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, 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. Ok, so I'm going to give this a class of card wrapper. Shout it out. Maybe hero card wrapper. Shout it out if you have a better class idea. 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. Ok, so let's go ahead and do a quick cleanup. I'm ok. We don't need any of this 12 through 25. We don't need it. We've gridpad everything relating to gridpad. 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. Oh. I'm deleting it. I don't, I don't want it in my life anymore. Okay. So what are we left with also 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. A turtle. What's the quick way of saying border box essentially says include my padding and margin in your calculations. Okay, having padding, not border or margin. So it's saying include my padding in my width or heights. Okay. Cool. I'm going to actually put that here. Sorry. Turtle's here. He's my husband and he is a CE certified CSS genius. A border box. No, he said no certification. Border box is, it literally just says, include my padding in my heights 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 and chat. Don't do it. Thanks Daniel. That's sweet. That's sweet. Even. Okay. Um, Wow. Words.

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, those are obviously the most specific. we called it hero words, hero card card wrapper. No. 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 going to select. 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 grew into one 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 cause 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 then 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, 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 itself, 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, like, nope. No chat for you. There it is. Here we go. Awesome. Yes, 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 lives 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 sake margin of actually margin or 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 longform 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 want you to do this with or want you to this font or whatever it is like just throw it in chat. Otherwise, I'm just gonna keep talkin' 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 okay, 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. Okay, cool. Text align center? Sure? Maybe? This is a little but better. A little. Bit. Better. Okay. So there's something in Flaxbox called Gap. It's also in the CSS Grid. So, let's talk about it. Go to our row and what time is it? 12 and 9. So, we need- in ten 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 direct child selector, everything, and then another descendant selector? Oh, no. A sibling selector, and everything. Margin left 10 pixels. Okay, so yes, we can use margin, which I'm using to do like 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'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 And so now, like no matter what you won't get smaller than that. So it's okay. She's okay. We can also change the card size using flex instead of giving, like, a hardcoated width or height, which ours isn't necessarily hardcoded because they can get chubbier. They just can't get smaller than that. But I'm okay. I'm okay with where we're at. 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. It's what you want to see. That's what you want to see. It means you know you're live. It's because if we go ahead and open up our dashboard component.type script, 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 livestream, but v12 of Angular now does inline SASS. It's exciting. 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 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. I digress, we'd love to hear your opinions on the matter in the chat. Now that we have this SCSS running, oh, I forgot, we made changes... this is like the one downfall. We made changes in our dev tools, but we didn't put them in the actual file. 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... ha! 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 the actual... This margin line, 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, right? 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 this, 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 screen sharing and you can 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. But that's what I get for mocking everything up. And if you will remember my handy dandy little tooltip. Our top hero, H3 is a little bit too close to our cards for my liking and our tooltip was to always use margin bottom. So we are going to go ahead and say margin bottom 20 pixels. Now if you are an astute student and they are on top of your life and you are like, I see where she is going with this. Because margin bottom on my H3, margin bottom on my card and the gap on my cards wrapper is all the same, 20 pixels. 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 are going to want to use that blue in other places. Maybe we are going to want to give the border bottom to the header. Maybe we are going to use this background color on another component. So this is where we could use CSS variables but we are not. We are going to use SAS variables. So $ to start your variable off right. Let's call it spacing or space spacing. I'm just going to call it spacing for now. And if you do not like it, tell me and we will change it. But now we can use this spacing variable everywhere that you see. Boop boop boop twenty. So we're going to go ahead and paste, 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. That's wonderful. That's beautiful.

That'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. Nerdino? Nerdino, 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. Hmm. 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. Oh, grid gap. Where's that coming from? Did I… Wait, what? Wait, what? Hang on. I don't know where that's coming from, but we're gonna find out. Because if I get rid of gap, hang on, I'm gonna hard refresh, and then we're gonna 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. That'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 Flexbox... 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, might be. 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. I'm 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. 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? Yeah, let's check it out. So, this is the gap property for Flexbox, specifically, which is how we're using it. Not in IE, I'm not surprised. In the latest versions, though, of Edge, Firefox, Chrome, Safari, Opera, etc., etc., this really, like, this right here is... ah! 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 yes. Let's see. What time is it? 1223. And then, Elissa, can you show me your dashboard component SCSS? I can. Dashboard component... I'm gonna make it a little bit smaller, so you can see it. And I'm actually gonna push it up right now to that branch also. But... We did not even get... It's almost time. OK, so we're gonna take a 7-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 gonna come back, and I'm gonna wrap up our variable section, and then we're gonna take a vote on if we wanna keep going low-level, or if we wanna 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, gorgeous version of this application. We'll touch on all of that at the end, it's just, I'm gonna make sure and take a vote so that we spend time on what we want to. Also the HTML one, please? Absolutely, where is... Sorry, it's really hard to see... because of Zoom right now. There's my HTML. Something I did want to cover, which we'll 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 gonna push this up right now in case you wanna pull that down. Status, git add dash A, git commit, don't forget the commit part. Clean up hero card. Git push origin. JavaScript Nation. There you go. Check out that branch.

I'll be back in five. Mwah! Welcome back from our break. I'm gonna go ahead and check in with you all. I don't know if I actually... I want to see the big view. I toggled it to the big view and it showed me four of you. Okay, yes, I think most people are back from the break, 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 gonna 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? 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. 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. I 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 my code? I need my code. Okay, so this one we're going to say goodbye to our old Angular tour heroes. You can submit. Actually, I'll leave it up for now because I might do an npm install. 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 two of heroes. And we're going to go over to. Sorry, Mike, try not to cough. I think it's an 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 come mock up things and throw in new components and customize them. Oh, and 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 stalkerish now for John, because like everything I'm talking about today is his work, but I promise I stock other people. So it's wonderful because you can actually set, like the, 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 projects like then Peacock is for you that extension on VS code. Okay. Um, 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 stackblitz.com, slash, and then literally the URL to whatever repo you want to open in stackblitz, and that will get you there. But I will also copy and paste this. I always have at least 3BS code Windows open. Peacock is very helpful. said Agrawal, Agrawal, Agrawal, Agrawal, Agwa-, hmm, Agrawal. I really want to get it right, and I feel like I'm failing epically. Yes, but I appreciate you. A lot. Okay. Agrawal, 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. Um, 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! I got it. I've got a screenshot that was the funniest thing I've heard all week. One. 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, I'm not allowed to drive without them. That kind of thing. And so, for me, the contrasts on light themes are generally easier for me to read. It's just that contrast. 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's always easier. I feel like I'm less strained.

I've tried switching to dark theme and I'm like, oh. 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 also find that 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, oh, if you were with me in the beginning and you were like hanging out and watching us do some CSS. This sexy piece of work that I've done on the headers, because they're copy-pastable, 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 text. I was wondering if you livestream, because you definitely seem like you'd be a good streamer. Oh, thank you so much! Pog. Pogjan is 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 try 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 I was working on previously or with this new chunky monkey, which I did not want to load in stacklets, but I'm loading it anyways. I'll wait with the new one. Oh, okay. 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 think I upgraded this to v12, which is a little bit different. I'm going to murder this top bar. Can I put it elsewhere, just anywhere in the middle of the screen? Sounds good to me. 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 if we can put our noggins together. So we can check. Stiles SCSS, what version, first of all, what version of Angular am I on? This one? 11-ish, little CLI is 11, I'm wondering if I mean because I definitely wondering if you need to do something special with this being in stacklets. Hmm. So here's the git clone. I really, really don't know. Try cloning it down and running those three commands. So, git clone. Let me know if it's still not. Yeah, Actually, I don't know if that's different. It's a little bit different. So here's the git clone. And then tell me if this doesn't work for you. stuff. I don't know, do you use with ng? 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. So here I have replaced the cards that we saw earlier with actual card components from kendo UI. And now I'm going to 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 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, at one point I like threw in the drag and drop. Like with this drop down 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 it kind of went like just like a little bit crazy with the list view here. So we've got this plain version of the list view, if you'll notice, I also beefed up my 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 a little icon and the name of the pony, and then you can still delete with 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 tea. The full to the full tour. Word of caution. Or maybe just maybe just a word. 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 Moley, 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 for this too slow. 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 is to move out our hero cards into their own component. And so this is where I not only use Arkendo 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 presentation only. So that's where this input for hero is. And that's that it uses that hero to go ahead and say get the hero ID, get the hero name, etc. 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 SCS. 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. But I'm this is the details page and then this is my SDSS 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. So that uses the same process. 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. If I need to use those, 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. Monday, at 10AM, I'm going to start the judging and make sure you all get an email. There's two other bugs. There are two bugs to look into. One bug I put into the comment, and then the second bug is StackBlitz for my release branch. Anywho, back to what we were discussing. I'm trying to think of the order I want to do this in. Let's go back to our OG code. What we're going to do is we're going to install because this project doesn't have anything installed. It doesn't have any Kendo UI installed. The other project, the purple one, obviously I have a lot of Kendo UI installed. It's not going to be like a fresh flow. I want you to have that experience. We're going to walk through that as briefly as I can make it. And then jump back to the other project and start using components and talk about what you want to talk about. I'm going to show you my super secret on my new page. My new tab in Chrome. I have an extension that displays my bookmarks there and this is how I survive. Because I can't, I've got bookmarks on, pawn bookmarks. Anyways, this is how we're going to jump over to the docs. If you don't have a free trial of Kendo UI, you can get one super easy. It's a 30 day free trial. One of the cool things about our free trials is that they come with support. Our support is phenomenal. Back to what we're doing. Just to give you an overview of our docs, I love our docs. I really, really do. We have 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, I show the skeleton component. We're actually going to use that one today. I talk about either the npm command or the ngadd command to go ahead and add it into your project. Then I also show this little breadcrumbs here. Sometimes it's pretty obvious, right? We've got a bottom navigation and it's underneath navigation, but other times, the skeleton component, you're I don't know what package to install. That's going to be underneath our indicators package. Our doc's are organized the same way that our npm packages are organized. If you go and you look under, let's do the card component. That's the one we were talking about so much. So, if we go under layout and then card and then getting started, I don't know if this is two, one smaller. If you scroll down, we've got the team built these live demos where you can view the example living in the browser, view the source, or you can go ahead and export it over to StackBlitz. One of the things I love about our examples is we have three themes. 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 our components will match the bootstrap look and feel. We also have material. Same thing if your team is already using material. So I like the default. But if you go and up to the very top of like layout, layout is going to be the package you install from npm. It will include these components. You will see the basic usage to installation. So if you have the CLI working, I recommend going and using this copy code. You can 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 mean to be aggressive. I don't mean to be. Okay. We're going to add the layout component to our JavaScript nation, to appear as an option 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. That's going to, again, give us access to these components. 1, 2, 3, 4, 8, 9. To these nine components. We're just after the card component. But one cool thing, I always like to talk about this. If you're using a version of Angular that's lower, so you can't use ng add. If for some reason the COI is not working on your machine. Or if you have a module setup in your application, like, where you have feature modules. You've got a module per feature. You might not want the kendo Angular layout package included at the root. You might just want it where the card component is going to be. If you have any of those. If you meet any of those exceptions, instead of using this ng add command to add it 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, download it with the npm install and 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 make sure you have the import at the top. It's pretty basic. But then that's how you get access to these submodules. These subcomponents. 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. I don't know. It's weird. I don't know if that's a new thing. As of this version of the CLI.

Yeah, 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. Mhmm. And then we will modify it to our glory. Mhmm. Yes, so Jay, that was a weird noise there, Jay just asked me a direct question. You can absolutely email me about that and we'll talk. But I still want you to run the ng-add command you will get a warning in your console that you aren't using, like if you haven't plugged in your license to the application, baba, 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'll 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. It's- I really don't know. I'm on the releases. Oh, you're on the releases. Oh, you're on the releases. All right, we right now are on- we are not on the releases. We are on the Angular Tour of Heroes, clone of John Papa's, Barebones. 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.

Okay. So now that we have it installed on our JavaScript nation to our 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. Anichol at progress. It's pretty complicated. Okay. 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, yeah, I it's pretty email's pretty, pretty boring way to chat. But we can we can. Okay. 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. And apparently we're at local host 63258 because that's a thing. So let's do it. Local host 63258. 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 crystallite, but I try to drink a gallon of non-caffeinated beverage a day. I'm so behind Okay. Um, here we go. So now we have it running and you're like I don't see anything. It's okay. It's totally fine, because we haven't actually we installed it with npm. 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 just the code that was in dashboard, right? Yes. Okay. So this chunk is what we're going to replace with the card component. So if we go back 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 always strip that out. Okay. Like immediately regretting this look at how much. Okay, so we're not I it's too much. It's like just to it's too much. I just want like a super simple building blocks custom layout. I like we don't need all that. We literally just need Yeah, let's still Sofia Sonny. Fine. Word. Sofia. I know. You're all like, really? This is how you do. Yes. This is how everybody does it. And if they tell you differently, they're either a genius or they're lying. Okay, so here we're gonna steal this kendo card. Where's the beginning of you? There you are. So we're gonna 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. Okay. So go back down here to this.

So go back down here to this. And we're gonna make sure we have this Kendo card title directive BUD on our thing. And we're gonna 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? Okay. 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 gonna go over to my ridiculous list of bookmarks. And we're gonna find color. And we're gonna go to the last one. Someone suggested Color Hunt. If you have a better one than shout it out. I wanna hear it. I have a ton bookmarked, but this one's my new favorite. So, we're gonna use it, okay? So, you're in need of a color. You're trying to build a color scheme. You're stuck for a color. Head on over to Color Hunt. You hover over these color palettes they've put together. And the HEX is right there. And you can just copy it. Yeah, that purple. It's my jam. So, we're gonna go back over to our SCSS. And we're gonna make a variable. And yes, these variables should be in their own file. No, we're not gonna make that file right now. Sorry. Okay. So, I'm gonna call it purple. And it will be the purple that we use. But apparently, it doesn't copy the Octothorp with it. Okay. And then we're gonna replace the blue with our purple. And then, we're gonna be happy. Because we no longer have to ever look at that blue ever, ever again. Okay. This one. Okay. 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 gonna 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 wanna 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 this or that or that. So, right now, obviously, we just have... 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. And 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, what time is it? 111. We end in 40 minutes, I think. Yeah. We're doing okay on time. I mean... yeah. Git add dash A. Oh. Oh, no. You can't type! Get commit dash m. What did I do? Add Kendo UI card component? Git 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, so don't panic. I'm closing out of this, we're saying goodbye to it. If you want to take this version and go into... if you look at my Hero card, you'll see where I'm actually using the Kendo card component and I'm giving a router link so we can click on these cards and not this one, not that one, click on these cards, and they route, 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're like, hey, how are you animating that pony? On Hover, I'm just moving the top by 90 pixels. It's not that scary or fancy. So, yes. Okay. 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. I really don't have a preference. Okay. So, when you go to a pony page, we're going to go to Pinkie Pie, she's my all-time favorite, you'll notice it takes 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. So, you don't have to go and NGE 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. In my head, they did. So, I think it was... I always forget. It's in a module. I think it's in app module. Yes it is. So, in 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 gonna say crank it up. I'm okay with 2000 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 gonna go and I'm gonna show you... Oh, right. I meant to mention this. If you're browsing through this app, she's beefy. There's a lot here, and a lot of times... 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, this is too much. So, I try to keep it streamlined. But I don't want to delete like valuable template code. So if you're like 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 about 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 Xadoch. This is Xadoch 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, right? 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, um, 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, it's pretty easy once you get going, you literally are just anywhere there's a variable, uh, strip that out and style a skeleton to fit the appropriate size. Um, 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. um, so 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 like the width and the height, um, right here in line. Um, great thing, and remember how I talked about, um, I was hired on to do a lot of custom UI work a couple years back. And I love 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 like little to no like effort like 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 Add an ng if... No hero. If there's no hero. So while there's no hero and I actually need to scroll, and we might we might spend some time customizing this. But 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 like 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. Like I could just put like 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 that pop, like 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. Making sure no one is throwing turtles at me. Okay, awesome. So yes, that is the skeleton component. Freaking love it. And now that like 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 like five apps. We should apply skeleton to details. We're going to do just their name. We're going to do the name. We should apply skeleton to details, in my opinion. Okay, let's do it. Yay. 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 I get rid of the ngif for it. 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, and then it's just 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. Hmm. Yeah, yeah, I'm happy. 560 100. OK, 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 sometimes, though. I find especially with this section that we've created here, I find it easier. To know, I know if you're 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 a hundred of them like we are below, sometimes it's easier to keep track of those heights and widths in line than it is to do it in a 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 gonna put them right there. Okay, so let's go ahead and put on the hero and the ng-if I mean. Equals bang hero. Yes, save. Okay, so now it loads in that whole bar and it 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. 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 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 a pretty easy fix. Quite honestly, you are 762.92 pixels wide. Um, 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. Um, okay, this, that, there we go, um, 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, uh, 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. So we're calculating let's go ahead and do it and see if it breaks a certain screen size. It's minimum width of 6762. 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 pixels larger as the minimum. Now if we go smaller.

So when I hit a certain size, I have a 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 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 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 Ms only on everything. And I'm just now you don't need to use Ms because the browser can calculate all of that on its own. It's really overkill. So we're 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. Really don't. So. Because we don't know the width of the content until it's loaded in. Anyway, let me know if you have a more elegant solution. I'm all ears. So next is we need to find where we are in the browser page. So we've given that minimum width which should help with the popping. And actually we should probably refresh and double check. Double check? Make sure it does actually help. It doesn't! Okay so we've got to take off. Before we go and fix the media query, let's fix because our solution is not working. Why aren't you working? So what we want to do 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 SASS 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 LIs or LIs that have something inside of them with a class of nline will get these styles. But it has to be they all have to be inside of a skeleton section. 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 1, 2. If I had to go ahead and type something inside of this, I might break it out, put the selector on one line. Personal opinion, let's comment out this minimum width and see if this fixes the popping issue. We could also give that 500 oh, I'm like waiting for it to disappear. Woo. It's been a morning. Okay. I'm like it's going to go. It's going to go away. No, the content's already there, Alyssa. Okay. Still having the issue, which I thought we were. I don't know. I don't know. Let's find out why. I love debugging CSS. It 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 our outer. Hang on. Turn off the AC. It goes from unbearably hot to unbearably cold. 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? Okay. 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. Okay. It's because I insist on using minimum width. So 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. Uh, so let me ponder a way around it. That's sexy. Why are you being like this? It's like, I will absolutely not be that with cause 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.

Does anybody see it? Hmm. It's because I'm giving hardcoded widths to my skeletons. And so they are pushing these skeletons right here. Also can somebody, anybody emoji in the chat. Just 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 forcing everything. 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. Here you, you, you. 545. I think it's just three. Whoops, yeah. Okay. So I think it's just three. Yay. Yay! Okay. 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 will 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 a 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 again. Refresh. 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, looks good. Awesome. But this, 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 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. 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. If you ever see Important, this is Alyssa's slap fixing something. I had a slapdash way. I wonder if I gave it to the container to wrap at a certain media size? Content wrapper, you're an app component. I bet you anything gets on there. It is. Sorry I have to leave. No worries. Make sure you fill out the form to win a prize. This is a 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. I just want you all to know that you have made 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 are looking for. Who are you? And what are you talking to? Okay. Compose myself. I'm telling the content wrapper who wraps the content, where are you? No. Where are you? There you are. That guy. I'm telling that guy. When the orientation is portrait or landscape, a.k.a. 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. 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. 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 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 stipples and et cetera et cetera. Okay. Yes. I need to wrap. I need to wrap. And another component that we have is which I think is so much fun. I'm gonna go bigger. 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. 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 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 think we're gonna start on the dashboard and check it out. So the dashboard here is where I have. Oh no I think it's actually gonna 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 that image of the rainbow and the tour of heroes texts and all that goodness. So here down at the very bottom I'm gonna go ahead and uncomment out this kendo bottom navigation and we can talk about it for a second. I'm passing it item 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 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 navs, 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 just pushed all of our routes if we go back to where is it this one and 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 in 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 from me and it's a lot like obviously like 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 we if we go to our... sorry 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 like 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 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... you should try customizing Bootstrap there was oftentimes things that I just couldn't do or that were really ugly to do. So this this is 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 CodeItLive. So I mentioned it earlier CodeItLive is and I don't actually know if anyone's oh he is so my cohort in crime one of my fellow advocates T.J. 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 CodeItLive doing streams it's a lot of fun. We so every I'm starting a new show called JavaScript Girl and a.NET world on Tuesdays Tuesday afternoon my time central to really late for you guys I'm so sorry it's really late and then on Thursdays I do a VR stream so I'm going to be getting into.NET and all things in that ecosystem and then I love I have a VR headset and me and my friend Ed.