[Music] you welcome to code creative I'm Travis Tolson so today we're picking up where we left off last time we're going to jump into skeleton loading and so to kick off here I'm gonna go ahead and pull up where we left off last time assuming I can remember actually you know what we created anis coke tap so I'm just gonna pop that open womp womp alright we'll go through studio for creative widgets and I'm gonna open up that skill that simplest skeleton load and okay so now that I've got that open I think we were just doing it in preview if I remember correctly so actually let me go ahead and pull that back up there we go okay so this is where we left off last time we've still got some template text in here and I want to work on getting that out of there but first David Arbor I've got to give a shout out to him after the last one he reached out to me and let me know what was going on with the CDOT server update seed server get here in the client script so basically the issue here first of all seed server dot update does in fact pass seed data back to the server the same way that we were discussing last time and it does automatically set the seed data to our response so I'm actually going to switch that back to update and now we no longer need this dummy placeholder here and we can also remove the seed data now the part that I was missing though is that the the C dot data and our data over here actually has to have something available in the initial load and I'm guessing if I had to hazard a guess here I'm thinking that if I go if empty objects I think if I log this out I think we're gonna get nothing nope it did log it so even still that's not I'm not entirely sure why it's happening but for some reason we have to have something on the data object outside of our if input here so I'm gonna go ahead and I'm actually going to move is loading over to the server side and this goal this should actually take care of the issue for us so initially is loading will be true and on the inputs I will set it back to false make sure we use the assignment operator not subtracting false and in theory I should be able to strip out the entire then statement and our is loading and consolidate everything down and I'm gonna watch this preview over here and I couldn't quite tell hmm let's do this I can't quite tell if it's oh I know what the issue is see dot theta dot is loading and seed data dot is loading because we've changed from C dot is loading to the data is loading which if you remember from last time the data object becomes C dot data in our client script so when I save this there we go if you watch the preview you'll see it flinch real quick it starts with that template that template garbage that we're going to change today and then quickly loads up the actual data for the simplest so in this way we were able to really simplify our client side script to just a simple C dot server dot update on the initial load and we pretty much moved everything to the server side and really it all came down to we had to have something on the data object for the initial load in order for that to actually take effect and for the C dot server dot update to be able to pass an object back to the server that was recognized as input so that little change was able to solve our issue if you're catching up on that one it may be worthwhile for you to go back and watch the first video and you'll get to see the headache I ran into and trying to figure that one out so once again thank you today David Arbor reached out last time and helped put me on the right track all right so next up I want to start tackling the actual skeleton load itself now in order to get this right we need to mirror our our existing text here we need to mirror that in our skeleton loader so I'm gonna get rid of all of these little allies here and so first off I'm gonna do just a single ally and eventually we'll repeat this a couple times and hoping that's going to give us what we're looking for so again we want to mirror the same HTML structure that we had before or that we have down here so we've got one two three divs that contain content we're not populating that last one yet so I'm gonna leave that one off and next I'm going to say I need to add a class to these and I'll call it skeleton text and I will add the same class copy and paste it to this div all right so now what I want to do is add some styles to this class so I'm gonna pull up our little SCSS CSS here and I'm gonna stick more or less to hard coding at least for now we'll take this up a notch once we get the basics working so background color let's go we'll do something really obnoxious to start with just to make sure we can see it in-house designer is chastising me in the background over here because she's not happy with my obnoxious color choice let's see okay so I do need to specify a height so let's give it a 1 a.m. and for those who aren't as familiar with CSS e/m is the it's the actual e/m height it's it's the it's functionally your line height it's helped me out designer what's the what's the m hi okay she says it's the width of an m in the font in my mind it's essentially the it's roughly equivalent to one line height of your body so there you go if the and then if i do the one actually let's do one rent let's do REM REM is actually going back to your root am so if your default font size on your body is 12 pixels 14 pixels whatever it happens to be one REM is equivalent to that particular font size J's Benson hey how's it going man glad you could join just saw him pop up in the chat over there all right so let's keep on going here maybe Jason knows some CSS he can he can throw out at me and keep me down the right path alright so let's go ahead and save this real quick watching the preview and nothing let's try that again watching the preview there we go okay so you J said he's terrible at making things look pretty well that's okay that's that's what I've got my in-house designer back here for she's here to make things look better she makes all of my work look better whether I want her to or not [Laughter] alright so if we watch that preview again we get that quick blip of red and I'm not feeling real good about that though cuz I'm only seeing one pop-up let me add some padding to this just to see where we're sitting save it now still not looking good I'm gonna go ahead and toggle this so I can get a better look at it so I'm gonna switch the ng if dave Spangler in-house designers always make things better that is a fact I would be lost without mine alright yeah it comes up for a moment and that's that's the thing with the skeleton loading is that unless you are really quick at seeing what's happening it helps to go ahead and just toggle it on all the time so now we can see that red and I've got a little dot oh I'm missing my list Group item class on these on this Li I was missing so that should help sarah has now joined alright so let's see I still only got the one line there and that's bothering me a little bit let's do an inspect element and see what I've actually got coming up here in the final render alright so we can see that both divs are populating and now silly silly me padding is included on the inside so background color is included in the padding which is why I can't see them individually so we're gonna add a margin and I think well not to point to EMS of it that's for sure it's a lot of margin and I put it in the wrong spot so I'm gonna flip my zero so specifying your margin in this way lets you specify the vertical margin so top and bottom margin and your left and right margins the same so it's a quick shorthand there we go now we've got two in there so Jase is asking what we're doing here so basically the end goal is to set up the skeleton loading I guess I should have covered this to recap from last time before I got kicked off but basically what we're going for is a skeleton loading something along these lines where it displays the placeholder as it loads up so you know you see this a lot in Facebook you see it in LinkedIn where it starts with the placeholder images and then once the data has loaded then it displays the data YouTube looks more official when I'm sitting in the office that is something that I'm not sure about that in the home office everything looks unofficial all the time I'll have to share a picture of my new set up last time I was sitting at my coffee table and I pulled a monitor out and stuck it on the coffee table today I've scaled up a little bit and I'm sitting on a work table from my garage that I could thrown a beat-up vinyl tablecloth over just went to where the people were all right so kick him kick him back over to the editor so yeah we're going for that that skeleton loading look and you know one of the things I mentioned last time was that skeleton loading is real good for the side content but we really I don't usually recommend it for the main content and there's a lot of debate back and forth in the UX community as to whether it's better or worse than just loading on a blank screen so you'll see it both ways my recommendation at least from what I've seen and it's it's not like I've been able to do some extensive user experience studies the way I'd like to on this maybe one day but my recommendation is usually to keep the skeleton loading on the side content compete up your waste table outstanding point Jase outstanding points we've actually had the same table for gosh at least 13 years now I was your parents table so that yeah our tables been due for an upgrade for a long time all right let's see so padding my line height still feels a little short there let's go - eh - Ram actually let's drop it back to the ends see if that makes a difference a lot of times with CSS especially in service portal we're just kind of playing around a little bit to see what looks best I'm thinking 1.25 is what I'm gonna settle on okay I like the 1.25 I like the way that one looks now I do need to come up with a good light gray color and to do that I'm going to jump over to the what's it called bootstrap 3s CSS variables I'm actually gonna choose for Sarah says F - f - f - normally I would take your word for it but I in this case I am going to look at the bootstrap variables to try and bring it in line with whatever the theme is so I'm gonna look up the border colors table border color is one option there's some button borders input borders you know let's just do border - color legend border color drop-down background drop-down border and now not the navbar border nothing that tabs somewhere and here's got to be a good one [Music] what is the it's a panel let's try let's drop down to the panels panel border color noting panel background petal tell thudding pal final final final final panel panel panel default border here we go let's go with the panel default border so skipping back over search for f2 f2 f2 alright so I'm gonna give it the panel default border that might work alright and then the last thing that I want to do here is I do want to shrink this top one up so we are going to go and add a title class to this one dot title and we'll give a width let's say 4 a.m. let's see how that one does actually now let's not do EMS on this one since our panel could vary in width let's go with 33.33% and we'll go percentage based on our width and I know ServiceNow has the old style guide that is in service pro specific but I wonder if they have one does anyone know I'm not sure Jase I don't know if they've if they've still got a style guide out on that one or not I've I've heard of two different style guides that they've got for UI UX personally I usually stick to the bootstrap CSS V CSS theme variables and the main reason for that is that if I jump back and look at the service portals most of the variables that you see in in these CSS variable fields maybe it's in the theme yeah so you can see the great base great dark darker brand primary body background a lot of these variables are overriding food strap variables so that's usually what I stick to at least from a service portal perspective you know so like if I look at the brand primary and jump over here dollar sign Wow my copy/paste skills are apparently terrible ya see so you've got the brand primary brand success so I usually go off of the the bootstrap sass variables at least for the service portal just because it's used extensively in the out of box theme let's see where is my there we go all right so I'm gonna go ahead and add one more line of text and so now what we've got here is we've got our top title and then we've got two lines of body text in there so next up what I want to do is I want to repeat this a couple times and I am going to use and I can't remember if there's an angular syntax for this or not item in ah let's look this one up because I want to say that there may have been a syntax or maybe it was just a some sort of plugin I was using before but angularjs repeat set number of times trek by index okay so yeah that's not quite what I was thinking but close enough alright so basically what we're gonna do here say ng-repeat for each item in and we're just going to generate an array of five items and the track by index is basically to prevent angularjs digest loop from going nuts so instead of tracking it by the angularjs hash code that's created for each item it's going to track it by the index number otherwise what we would end up with is we would end up with an infinite digest loop where it keeps checking and keep seeing new hash codes and so it keeps sending it back into the digest loop again so then we're gonna save and now we've got one two three four five and you know five is ours is currently our hard-coded set limit so at this point we've got our skeleton ready to go I'm gonna take the knot off of the ng-if to show it only when we're loading and so now you can see that it really quickly jumps in the data loads and then it gets replaced now the next cool thing that we can add to that is we can add a CSS transition or some CSS animations and I'm gonna look this one up because once again I don't remember how to do this off the top of my head I believe we're gonna be using some CSS keyframes but basically what we want to do is here's a code pen there we go so this look you see this little animation here where the chrome kind of shimmers across and that's what what I tend to see and a lot in a lot of the other ones is linked into it I don't quite remember LinkedIn doesn't do it anymore okay so LinkedIn is going back to the scrolling loader and I think Facebook only does it on the mobile app now I don't even yeah okay nevermind I haven't really messed with Facebook in a while so I don't even know well we'll go ahead and go with this so if I take a look at their CSS let's just kind of deconstruct this a bit they got their demo background image they're using a linear gradient and there we go there's the keyframes so basically they're using background position all right so demo empty so I should be able to actually take most of this it looks like I should be able to leverage a lot of this here background image background size I'm actually feeling pretty good about most of that probably want to change the light gray we'll work that once we get it in place and then I'll have to add the key frames as well so key frames is a is an animation concept and gonna be easier to sketch this one out so let's see if I can get this food alright so let's go to its number two there we go alright so in keyframes you know if you think back to and I can't be the only one that's done this but think back to the days where you make little flip books you know and you would turn around and you would have you know you you have a guy drawn and yes I definitely not an artist and you know he's got his little balloon and then you know you would draw a sequence of frames where he would be progressively higher on the page and you would just keep drawing and just keep drawing and just keep drawing until he was off the page so basically what keyframes does is keyframes allows you to say that this is a keyframe this is a keyframe and then it tells the it basically tells your animation engine to figure the rest out in between so instead of having to draw every single frame in between you can have it figure out what the in-between frames need to be so that's essentially what the keyframe is is the keyframe would be your starting frame and your ending frame over the course of a single transition yes steve Spangler helped helped his daughter make her first flipbook last week awesome I am glad glad there are people on board with this so let's see where was I right okay so CSS so the CSS I copied we need to drop down into our skeleton text and then to add the shine we have to go back to the skeleton screen with CSS and I need to copy this particular keyframe and so what you see here is this keyframe is being leveraged right here on this animation line so it's saying animation shine one-second infinite and what that means is that and you can see that in the two we are animating to the a background position so here is our starting background position is defined in the initial class and then the animation is declared and that animation specifies a keyframe which specifies what we're moving to so our first background position is going to be and let me see if I can extend this down a bit so we can see all of it at once so we're starting at looks like this is the major difference right here is that our highlight is moving from 0 to 100% so we're starting at the 0 position and we're moving to the hundred percent over the course of one second and we are looping that infinitely and so that is what's defining the overall animation and you know keyframes are really really cool because you can specify additional keyframes throughout you know we could turn around and we could change some of the animation the curve the acceleration of it throughout there's a lot that you can do we can mess with these different keyframes I usually try to find somebody who has already done some basic framework like this and then I'll try to enhance and extend upon it no sense we reinventing the wheel when much smarter folks than me have they done the hard work so we'll come in here and we'll define our keyframe and and save and I'm gonna have to go back to showing the skeleton all the time and we've got something interesting going on there let's eliminate our background color and instead we'll move our color down to the light gray will replace light gray with our color there and remove the background color let's see if that improves it at all not quite not quite so radial gradient mm-hmm see if I can figure out what I'm missing here empty margin Auto it's gonna shrink this down there we go it's gonna bring these so I can manage flipping back and forth a little more easily um width 500 let's get rid of my HTML template client script and server script for now since we're not messing with those plate margin I think what we're gonna try doing is eliminate I'm not sure what this is gonna do but here we are and I broke stood it all right so that didn't go as planned [Music] hmm lost the whole bang thing where's my preview just do it alright let's see if I got an error oh wait Derek oh okay well some loads take longer than others I guess alright so let me do some inspect element let's see if we can parse out what some of these elements are maybe that'll give me a hint so this is another way that we can kind of play with CSS is I can start hitting check boxes and see what happens no background repeats fun background position sure what the issue is margin auto could possibly be making a difference site could possibly be making a difference you know what else could be making a difference is the fact that he's got the little profile circle over there that's just fun I don't even quite know what I did there but that is fun um alright so background sighs background repeats I did I broke everything we're getting closer maybe yeah that's a fun animation that I I don't know exactly what I would use that for but I'm just I'm really enjoying some of the weird motions and movements I'm getting out of this I some of this stuff I've never actually seen before so this is just entertaining at this point ah there we go okay so what I need to do is I need to eliminate the circle from each of our CSS specification so it's specified as a radial gradient and background image it's specified on the background size here it is specified on the background position here and it is specified in our final shine keyframe if I get rid of all of those and save it our position is jilted but we actually have a more sensible animation going on so that's a positive movement let's inspect and let's see here we're gonna dip up there that's hidden way to dip here we're gonna dip here background sighs let's see so because we've got our linear gradient specified there I wonder if this has to do with our background sizing 50 pixels let's just see if they change it to 5 let's see what that impacts alright so you notice that as I change that when it changed our shine control Z to change that one back and okay so our background size is controlling the shine our background image this compare is controlling the actual gray background and we are set to 50% see having trouble remembering what each of these specifications are all right so let's take a look we've got in the background image let's close a couple of these up again I'm starting to run out of time again 100 degrees we've got all right so degrees the degrees on the linear gradient is the direction that the gradients going in the RGB a is the color 255 255 255 didn't it yeah so so let's try changing let's just try changing all of these first ones or actually no cuz that one should be the [Music] what's that line 23 needs to be zero zero on the background position let's give it a shot that's even better because the circle was left more right okay so we are getting closer now one problem that we've got here is that it helps designer strikes again yeah we're a lot closer so the first of all previously I was controlling the title by the width of the div but now now that our background color or our background size background image is controlling the width of the box that's what's impacting the difference in the speeds of these two shines I think if I get rid of that one okay so now they're all at the same speed but what we need to do is we need to increase the width of the of the overall text to extend to a hundred percent background size let's see let's try this I think we established that the zoom enhance look all I can say is at least we're not making this GUI and visual basic all right so let's see if we all right so the background size impacts both our shine and our overall width [Music] drag and drop the hook so let's go with [Music] let's see background size highlights background position wondering which of these is gonna make the difference CSS background positioning and background images clearly is not my forte highlights let's not do that one let's try this one first see what some of these impact it'll break it there we go all right so now we're back hahahaha let's see then your gradient over 20 pixel 20 pixel background sighs so that one's supposed to be the highlights thank you mister TV we're slowly getting there we're slowly getting there little by little piece by piece looks like it ah now I kind of want to make a TransAm out of CSS with that with that kit animation there I can't do it without you oh gosh well unfortunately it's about time for me to go make dinner so what I'm gonna do is leave yeah we'll leave that one at naught and I am going to have to throw in the towel for today we're a little bit closer next time we're gonna try and get the title shortened the two body texts lengthened out and we'll try and get the whole thing set up exactly how we want it visually and then hopefully we'll move on we'll be able to move on to improving the instance options and just overall expanding the capabilities of the widget as a whole coding while cooking I don't know if I can do that I take my cooking pretty seriously a push to fork next time you need to also check twitch chat does that not come through on the on the restream Andrew help me out you're the only one help me obi-wan Kenobi you're my only hope yeah I see a se crack I see crash in there kevin kevin eldridge okay how's it going Kevin just watching a channel advocating for only streaming to one screen um no I don't think I did did I miss Andrew yeah I didn't even see it come through Andrew I'm sorry yeah I got twitch twitches in here as well but it doesn't look like Andrews came through /r ugh exactly Jace exactly well if we're gonna start having more conversations during this stuff I I might have to look into adding the little chat stream widget OBS I read something about that that way you guys can see what's coming through two three through you a raid and twitch - Andrew I don't even know what that means I'm gonna have to talk to you about that one offline all right well thanks a lot guys appreciate everybody joining and hopefully I'll see you guys next time have a good night guys