A workshop for UI and Angular beginners alike. Let's pull down the Tour of Heroes app (written John Papa and found throughout the Angular docs) and give it a UI upgrade! All you will need is a laptop and your favorite data set (mine, of course, will be ponies.)
Getting Comfortable with Angular and UI
AI Generated Video Summary
The Workshop covered various topics such as setting up the development environment, troubleshooting and debugging, using Angular and Kendo UI, customizing styles, and working with SCSS variables. The speaker emphasized the importance of clean code and provided tips for improving application performance. They also discussed the use of the skeleton component for loading indicators and the bottom navigation component for navigation. Overall, the Workshop provided practical insights into software development and engineering.
1. Introduction to Workshop
Welcome, everybody. We have prizes for today's workshop, including Amazon gift cards and a choice between Bose headphones or a Nintendo Switch. You can submit your work through a Google form and have a chance to win. Whether you're a beginner or advanced, feel free to submit your work. We'll start with a beginner deep dive and then move on to advanced topics. You can choose to clone the GitHub repo or use StackBlitz. Let me know in the chat if you're here for the beginner or advanced content. We have a good mixture of both. If you're here for the advanced content, you can take a break and join us later. We'll be using a third-party library like Kendo UI and custom components to enhance our application. Let's get started!
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.
2. Setting up the Development Environment
So exciting. We're going to grab the code from GitHub and walk through the steps together. We'll use the terminal to navigate to the development folder, create a new directory, clone the repository, and install the dependencies. If you prefer not to use StackBlitz, follow along with me. Feel free to ask questions and I'll do my best to help. Stay hydrated during the workshop. We'll use the CLI to run IngieServe and choose not to share anonymous usage data. If you get lost, refer to the JSNation branch in the GitHub repo. Let's go through the steps again verbally.
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.
3. Troubleshooting and Debugging
We cleaned up our data by cloning it with Git Clone, running NPM install, and then NG serve. If you encounter issues, try deleting the node modules folder and rerunning NPM install. If you're in the Discord server, share a screenshot of the error. Make sure you're in the right place when cloning the project. Use CD dot dot to go up and CD to go down. If you're new to the terminal, follow these steps. Open the source inside the application. If you don't have the code, open the clone down version. Try NPM start if NG serve doesn't work. Consider running NPM install -g @angular/CLI.
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.
6. Introduction to Angular and App Structure
This is the index.html page, the root of the application. We're using Chrome today because the dev tools are better. The Chrome dev tools are just so much easier to work with. We have an app routing module with different routes specified. Angular will bootstrap the dashboard component into our body. The dashboard component.html is where top heroes are populated with a for loop.
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.
7. Configuring OhMyZSH and Customizing Heroes
I created an alias in my OhMyZSH config to run it in one command. OhMyZSH for the win! We have a gorgeous pink theme. We're using bootstrap, but it can be challenging to write custom styles alongside it. We're looping through our heroes and getting beautiful hero cards. Our Hero service handles HTTP operations, and Hero TS defines the hero class. We're using an in-memory data service to mock a database. Feel free to customize the heroes and submit your changes to win a prize.
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.
8. Using SAS and Creating Color Variables
We're going to use some SAS in the project and talk about colors. We're using a SAS program and will generate the base application configured to use S-C-S-S or SAS. We're going to run the NG config schematics command and leave the server running as much as possible. In about 30 minutes, we'll take a 10-minute break. I love SAS variables and use them all the time in my life and coding life. We'll use them to create color variables and plug them into our style sheets. Please don't worry if it seems overwhelming. We just ran the command to make changes using a schematic.
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.
9. Adding SAS in Stacklet and Improving Application
To add SAS in Stacklet, make the changes manually. Go to the highlighted file, scroll to the bottom, and add 'style: SCSS'. Then, add a single 'S' character. CSS files are still compatible, but SCSS offers more features like variables and nesting styles. Now, let's address the issues with the application, such as the uneven padding, squares not centered, and heroes not being center-aligned. We'll turn the elements into cards and make necessary adjustments. Let's get started!
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.
10. Centering Top Heroes and Customizing Styles
Let's center our top heroes by getting rid of Bootstrap and applying flexbox styling to the wrapper. We'll use the display flex property and set the justify-content property to space-between. We'll also address the different sizes of the heroes and consider wrapping the content. We'll customize the DOM by giving the wrapper a class and applying the desired styles. Finally, we'll clean up the CSS code and remove unnecessary lines.
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.
11. Understanding Box Sizing and Border Box
I'm fine with giving everything box sizing, border box. What's the quick way of saying border box essentially says include my padding and margin in your calculations. Turtle's here. He's my husband and he is a CE certified CSS genius. A border box is, it literally just says, include my padding in my heights and width calculation. 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. So we're pretty cleaned up. I need to double check that no one's screaming and chat.
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.
12. Styling Hero Cards and Discussing Gap Property
We created a class of hero words, hero card card wrapper. We're going to use those styles to display flex and justify content. We fixed the issue with the row not being applied by correcting the class name. We also added a background color of blue to the hero card and made the font color white for legibility. Finally, we set the minimum width and height for the hero card, making it a square that can grow into a rectangle if needed. We centered the text and improved the overall appearance. After the break, we'll discuss the Gap property in Flexbox and take votes on whether to continue with beginner topics.
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.
13. Using SCSS Variables and Inline Styles
We can set the Gap using margin, but Flexbox adds its own spacing between elements. To set a fixed Gap, we can select the wrapper and specify a gap of 20 pixels. We can also change the card size using flex instead of hardcoding the width or height. We can talk about SCSS and using inline SASS in Angular. By changing the file name to SCSS and updating the URL, we can use SCSS in our components. We can separate HTML and CSS files or use inline styles. We can define variables in SCSS, like the spacing variable, and use them throughout our styles. This allows for easy changes to spacing and colors. By being consistent with margin usage, we can ensure clarity and ease of understanding. We can reuse the spacing variable for margin-bottom, gap, and other spacing needs. This promotes consistency and easy maintenance. We can also use SAS variables for colors and reuse them throughout our styles.
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.
14. Discussion on Grid Gap and Break Time
The speaker discusses the issue of grid gap being automatically added to the hero card wrapper, even if not specified in the style file. They express confusion about where the grid gap is coming from and plan to research the differences. They mention that some browsers don't support the gap property and provide a list of browsers that do. They also mention taking a break and coming back to wrap up the variable section and take a vote on the next topic. The speaker offers to show the dashboard component SCSS and mentions their plan to generate a new component and make it a presentational or dumb component. They encourage the audience to take a break and mention pushing the code to a branch for reference.
15. Continuing with Workshop and Introducing Kendo UI
After the break, we will continue with the workshop, either focusing on beginner content or diving into advanced topics. The speaker shows their version of the application, called the Kendo UI Tour of Heroes releases, and encourages the audience to check it out. They mention stopping the server on Angular Tour of Heroes and transitioning to the new project. The speaker discusses the Peacock extension for VS Code, which allows users to set a color scheme for different projects. They provide instructions for cloning the project or using StackBlitz. The speaker acknowledges the audience member Agrawal and mentions their difficulty in pronouncing the name correctly. They explain their preference for using a light theme in VS Code due to their vision impairment. They assure the audience that it's easier for them to read and less straining on their eyes.
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.
16. My Little Ponies and Kendo UI
Welcome to the My Little Ponies version of Tour of Heroes. We have a light theme, but it's better for streams. Check out our Code it Live channel on Twitch. I've done some CSS work on the headers, which is my favorite thing in CSS. I've also added actual card components from Kendo UI and made some improvements to the list view. The heroes now have more information and you can click on them to view their details. This application is used to test new components. Feedback is appreciated. The hero cards are now in their own component, which is a dumb component that displays the data passed to it. The details page is also available, and the load time has been increased for a reason.
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.
17. Using Kendo UI and Adding Layout Component
We created a variable file for larger projects and organized fonts and colors in separate files. We discussed some bugs and the plan for the workshop. We mentioned the Kendo UI docs and the option to get a free trial. Our docs have over 100 components and we use the skeleton component when introducing new ones. We explained the organization of our docs and how to find the card component. We also mentioned the three themes available and recommended trying out the layout component using the ng add command.
18. Importing the Module
To import the module, download it with npm install, go to the module of your choice, and add it to the imports layout module. This will give you access to the submodules and subcomponents.
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.
19. Installing and Running the Card Component
Let me know in the chat if you install it. The next step is to throw in the card component. Scroll down to the card in the docs, go to getting started, and copy the markup. Modify it to your needs. If you get a warning in the console about not using the license, it's fine. Just install and run it. Email me if you have any questions. It says it's already installed, but I don't understand. We are currently on the Angular Tour of Heroes, not the releases. Sorry for the confusion.
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.
20. Installing and Using the Card Component
Now that we have installed the layout package, let me know if you've installed it. We will replace the code in the dashboard component with the card component. I'll guide you through the process. After running ng serve, you may not see any changes yet because we haven't included the card component. We'll go to the documentation and find a basic example to use. We'll replace the code in the dashboard component with the selected card component. I'll show you the process step by step.
21. Customizing Hero Cards and Adding Purple Color
22. Working with the Skeleton Component
We're going to work on the skeleton component, which is a loading indicator for certain components or items. It's included in this project, so no need to install anything. We'll copy the section where the hero details are printed and replace the data with skeleton components of similar size and shape. The skeleton component has options for text, circle, and rectangle shapes. We'll use the different shapes to create loading indicators for the details page. The skeleton component has two animations: pulse and wave.
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.
23. Customizing UI with Kendo UI
I couldn't decide between the pulse and wave animation for the shape. You can specify the shape, animation, width, and height inline. I used to do custom UI work with Bootstrap, which was painful. But with Kendo UI, I can build custom things with little effort. Our developers write specific styles to avoid overwriting your styles. I enjoyed writing custom things alongside Kendo UI.
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.
24. Customizing Skeleton Component and Sidebar
We discuss implementing the skeleton component and customizing its appearance. The width and height of the component are adjusted to accommodate different name lengths. The inline styles are used for convenience in this case. We also address the issue of the sidebar popping in and out and propose a solution by setting a minimum width for the content. This ensures that the sidebar remains stable and the content adjusts properly. Further adjustments may be needed depending on the screen size.
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.
25. Adjusting Minimum Width and Debugging CSS
We need to adjust the minimum width for our section to ensure it works on mobile and smaller sizes. We can use pixels instead of percentages. If you have a more elegant solution, please let me know. We also need to find where we are in the browser page and fix the solution that is not working. Let's comment out the minimum width and see if it fixes the popping issue. We love debugging CSS. It's not sarcasm. We can try changing the minimum width to width and find a way around it. If you have any ideas, please share. Let's debug and fix this issue.
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.
26. Fixing Skeleton Widths and Media Query
I'm giving hardcoded widths to my skeletons, which is causing them to push other elements. I changed the widths to 545 and used minimum width instead of hardcoding. Now the skeletons are not forcing and the sidebar remains stable. The section with the pony details does not have a media query, and I need to fix the widths inside the media query.
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.
27. Exploring Bottom Navigation Component