– In this video we’re gonna be looking at using transforms and specifically transform origin to do really cool and fun stuff like this I think, maybe it’s just me, but I think that’s pretty cool (light music) Hi there, my name is Kevin and welcome to my channel where we learn how to make the web and how to make it look good with weekly tips, tricks, and tutorials If you’re new here I just love CSS I love having fun with CSS I love pushing and doing cool stuff with CSS And I really want to instill this love of CSS in everybody Like I want people to realize that it doesn’t have to be frustrating And in this video I do a lot of things where we can see that there’s problems you can run into that are really easily solvable, if you really understand how it’s working, ’cause we’re using transforms and transform origin, but we’re also gonna get into the deeper things with a little bit of stacking context and just how suit elements work I sort of gloss over those a little bit But I mentioned throughout that I have other videos that do deep dives into them, so but you’ll see a little bit of how they’re working as we’re going through it all Because those were the types of things that can really solve your problems and make CSS fun ’cause you understand how it’s working And just help you level up your CSS, and I think it’s gonna be a really good video, and we’re gonna do some cool stuff with it Before we get to that cool stuff, though, I just wanna say a really big thank you to Skillshare for once again sponsoring one of my videos If you don’t know about Skillshare, how do you not know about Skillshare Skillshare is, I’m sure you’ve heard of them before, whether it’s on my channel or another one or just through your friends telling you that Skillshare is awesome because it’s a really cool platform to learn on You’re watching this video because you wanna learn something, so that means that they’re the right place for you as well, don’t leave here I still want you to watch my videos, but they have a lot of really awesome content over there as well They have stuff on CSS I’ve talked about Rachel Andrews’ grid series that’s on there But also, a lot of people here always want me to do more JavaScript They have lots of courses on JavaScript, whether it’s specific for beginners, they have some advanced stuff, they have all sorts of JavaScript goodness It’s a massive huge learning platform It’s not just about coding It’s about a whole bunch of other stuff I’ve done a whole bunch of Photoshop classes, like I mentioned last time There’s Illustrator stuff, there’s how to run a business stuff There’s just lots and lots of things that you can take advantage of Not only are they being generous by sponsoring this video, they’re also being generous by giving you a two-month free trial to check it out and see what type of awesome stuff is in there That’s how much they trust their product So you just have to use the link down in the description below and be one of the first 500 people to do so and you get those first two months for free So finish watching this video Don’t run off right away, but when we get to the end I’m gonna give you a reminder, click that link, and get your two free months So thank you very much to Skillshare Now it’s time to start talking once again about transitions and transforms Now if you’re not already familiar with transforms and transitions, I’d encourage you to check out an article that I wrote a little while ago It was a few weeks ago, maybe a month ago now where I took a look at just the basics of it, and there’s actually a video embedded in that using a cool platform called Scrimba, ’cause it just worked out really well for looking at the basics of transform So if you’re not familiar with transforms, check out that article that’s linked in the description below It’s going to go through the basics of how transforms work And again, there is a video that’s in there if you’re not a reading person, you’re more of a video person, just scroll down a bit and you will run into that video But that’s just gonna sorta get your feet wet But if you already know how transforms work but you’re just like, well how did he do that stuff in the intro? I want that Well, that’s, you’re in the right place, ’cause we’re going there right now All right, so I already do have some styling here as you might notice What I’ve done, though, is I have included a link in the description below that has the exact starting place I am here So if you wanna follow along you can I just did this to help speed things up so we can really focus on those transition effects that we wanna be doing So the very first one I wanna take a look at is these little links here, ’cause that’s really gonna lead into everything else I ended up doing on here I’m actually, I’m gonna do a little zoom in on this We can make this a little bit bigger for what we’re doing just to make it a little bit easier to see So I’ve created these fancy looks here, fancy looks, fancy-links If we come to my code you can just see I just have a class fancy-link, is all I’ve done for that So what we can do on these fancy-links is I wanna add a pseudo-element to them Now if you don’t know about pseudo-elements, I’m gonna be using them a lot in this video I do have another video, or I have a three-part series, actually, that does take a look at pseudo-elements in a lot more detail and there should be a card popping up for that now So I’d encourage you to check that out first and then maybe come back to this But I think you could follow along either way So what we want to start with is our fan, I gotta spell it right, fancy-link And I want the after pseudo-element on there, and I’m gonna be using a display of absolute on here So that means I am gonna come up on the original and do a display of relative just to make sure that the positioning of this is relative It’s gonna get positioned within reference

to the original link and not of the entire body, which would happen if I did not have that So with that I am going to start with giving it a content because we need to have content on a pseudo-element or it will never appear And I’ll give it a position of absolute, like I just said Next, we want to set it up So let’s just do a left of zero I’m gonna do width 100% I’m gonna give this a height as well Say two pixels so it’s big enough that we can actually see it And I’m gonna give it a background color of current, currentColor like that ’cause then it’s gonna steal the text color Whoa look at that Clearly did something wrong I did display relative here instead of position relative, which is something I do all the bloody time But we can actually see that sort of fix things a little bit So my left of zero is working I’m also gonna say a bottom of zero Not sure why it went so far down But that’s why the position absolute does eventually get us to the right place there So we have these underlines that are coming out underneath Now what we want to do, and we’re not gonna do the entire thing ‘Cause I wanna sort of explain how this is gonna work, but I’m gonna put a scale on here But when they do scale you can see I have scale We actually have 3D scales and X, Y, and Zed axis And for this I’m gonna use the X axis And I’m just gonna put 0.5 for a second so you can see what it’s actually doing So I’m gonna hit save on this And you can see it shrank down to half of the original size like that So that’s really cool We can control the scale on the X or the Y axis So Y we wouldn’t be able to see ’cause it’s really small We’re gonna play around a little bit more with the regular scale, the scale X and the scale Y when we get to our buttons here But you can see it has scaled it down So now what I can do is transform-origin and set this to left So right now it was shrinking the center It shrank on this side and on that side or it scaled down Now if I do a transform-origin on the left side you can see it is switched over to only be on the left instead of, so if I make this a bit of a smaller number, it’s always sticking to the left side Whereas if I don’t have this, it’s always gonna be stuck in the middle So really, really cool And now, what we can do is our fancy Let me just move down a little Fancy-link hover after And what we can do is transform scaleX and put it up to 1 So now when I hover on top you can see it’s going to the full size Now it doesn’t look so good when we do that So I’m gonna come back up to my regular fancy-link here and I’m gonna add in a transition for transform, we’ll say 250 milliseconds and we’ll do an ease-in Now one of the other advantages with this is scaling is a nice performant way to do transitions Let’s just save that Yeah, there we go We can see it’s working So transforms, or scale is one of the more performant options we have for doing transitions So you could get away with doing the same thing here, with playing with your left and right positioning The left could be, or the right could be at 100% and then we could have it grow and shrink But this is actually gonna be a little bit better for performance So we can see it is growing and shrinking But what I did is my original scaleX was actually to 0 So when I do that it looks like there’s nothing, but then when we come on and off we can see it growing and shrinking away So that’s a nice start but, you might have noticed in the finished version we can go look It comes in but then it leaves on the other side, which I think is a lot of fun So we can do that same thing We can have it come and go on different sides But what we wanna do for that is come and change the transform origin on hover origin I want this to start on left So this is when I hover I want it start on the left and move toward the right But then when I take it off of hover I want it to switch So I want it to move toward the right when I move my mouse away from it So let’s go and check that out You can see it moves in but then it’s moving off in the other side So you get this cool little like sneaking type of action I think it looks really fun and really cool The one thing is you will notice that the longer link, it does go a little bit faster, and with a short link it does go a little bit slower There’s nothing you can really do about that ’cause it has to do the entire thing in 250 milliseconds So if it’s really long it’s gonna have to go really fast And then if it’s just one word or really, like the letter A or something, it’s gonna go a lot slower ’cause it has less distance to cover But I still think it looks pretty awesome and I really like that effect So we can use the same principle to worry about our buttons over here And because we can use the same principles here, what I’d encourage you to do is hit pause on this, go to those files that I’ve given you in the link down below, set them up so you’re using my starter CSS and see if you can do it on your own from what we’ve just learned ’cause I think putting it into practice

will be a really good thing to do Once you’ve done that you can come back, or if you get stuck along the way you can come and see how I did things at the, how I ended up doing it, whether you managed to do it, if you wanna see I did it differently, or if you just get stuck and you wanna see what I did ’til you get past whatever is blocking you So I’ve already done a little bit of basic styling on my buttons just so they don’t look terrible But now I’m gonna come down and here I’m just adding my margin in between those buttons Those come down and actually start doing it Now for my buttons there’s a couple things that are important is they all have a class of button, but I have my button-one, button-two, and button-three, so we can do things a little separately as well So what I’m gonna start with is my button after And once again we do have to give this a content And position absolute I’m gonna give it a width of 100% ’cause I want it to be the full size A height of 100% ’cause I want it to be the full size Now height is a funny thing ’cause normally it will calculate based on the width of the parent But if it’s positioned absolute it will actually use the height of the parent then Let’s give it a background color I’m gonna do rgba so we can actually see it Now I’m doing rgba and let’s do like a 0.5 or something Because what that’s going to do is you see, it’s gonna keep the color of my box a little bit So I don’t have to come up with a dark orange shade I can just use an rgba value, and it’s gonna darken it by itself Now the problem is they’re gigantic because I forgot on my button, position, I didn’t do display this time, relative And now, there we go, they’re the same size The only problem is they’re not positioned properly So up in here and say top 0 and left 0 So they should be lining up right on top Now the only problem is they’re also on top of the text You might wanna check another video of mine, ’cause what I’m gonna do here is I’m actually gonna give it a z-index of -1 Which is going to push it to the back, but the problem is it was in the back of everything It’s now hiding behind this white box over here Interesting thing, though, is once you’ve given something a position you can give it a z-index So this is position relative I’m gonna give this a z-index of 1 and hit save And then my black border’s where I want it to be And you might be going, what just happened? As soon as I give my button a z-index it’s giving a new stacking context So this -1 is now within this button and not within the page in general anymore So it cannot go behind my button ’cause it’s living in my button stacking context And if that’s really confusing to you, there is a card popping up now or soon, that will pointing to my video on stacking context because it’s an important thing to understand and sometimes once you know how to manipulate it, can make your life a lot easier ‘Cause if this is confusing I would encourage you to figure out how zed, or how stacking context works Now obviously I don’t want the to fill up the entire space like this So what I’m going to do is let’s come on and do my, we’ll start with one of them at a time So do my button-one before, I did after, not before And we can control the after on this one separately So we can do our transform scaleX and we’ll stick this one the same as what we did on the last one I’ll start with a 0.5 just so we can see that it kicks in I can say that my transform-origin, transform-origin is left So it’s growing out the left side And then just like before, we can do my button-one hover after has a transform scaleX of 1 So when I hover on top we can see that it is working Now what I’m gonna do is instead of having to do a transition on my button-one, my button-two, my button-three, I’m just gonna come up here on my button after So this is for all of them And we need to put my transition on here So transition transform, we’ll say 200 milliseconds this time, and an ease-in And now we can see we have my little animation there But just like before I’ll go ahead and search that woops, not a 1, we want that to be a 0 And now we can slide in and out or we can do just like before where this was right, let’s just copy this whole line of code here and paste it and switch that one over to left And now it slides in one side and goes off on the other like that So nice and cool So we can take a lot of the same things here, and I think what we’ll do is actually just copy this whole thing and paste it but switch these two over to a button-two So with the button-two, instead of doing a scaleX I’m gonna do a scaleY So X is on the X axis, so we’re scaling our box

Actually, you know what, I’m just gonna do, yeah let’s do that The only thing is now we’re working up and down So this one I’m gonna switch to top and this one I’m gonna switch to bottom and hit save And now it comes up and then that way, and actually I think I’d like that if it was the other way around more, bottom and top And there we go We can have it come in on one side and go down on the other side So I think that’s pretty fun that we can do sort of two different effects like that And the last one we’ll do here So that would be, we have it all saved already So this will be my button-three So on my button-three this one I can just do a regular scale like that So I’m actually gonna put this to like a 0.5, take that off for a second So this scale, 0.5, it’s gonna scale on the X and the Y axis And take that off So you could even have it grow out the middle like that if you wanted to So you can see that I’m scaling both ways, not just on the X or the Y, but I’m doing both, whereas if this was scaleX it’s only shrinking it one way And if it was scaleY you can see it’s only shrinking it the other way So if we just do that it’s doing both at the same time So if that was a 0 we can have it grow and shrink right from the middle, ’cause the default transform-origin is center So we can have it growing and shrinking from the center But we could take advantage here, and we could do a, I’m gonna say bottom right ‘Cause this is where it’s leaving from and this is where it’s entering from So this could be a top left and hit save And then we can have it come in and leave on the diagonal like that Not my favorite, I think I like this one the most, but you know, go with the one you think or play around with it You definitely don’t have to leave it at that You can do a whole bunch more with this, I think All right, so that is awesome Now it’s time to get onto the really fun one now that we have our little buttons there done So just really fast, I haven’t done very much in our card here I’ve added a margin bottom there just so I could scroll down But on my class I have my content card I have just a card_title, a card_body, nothing too fancy Just in case you’re asking, this is with the BEM naming convention, which I have done a video on, so it’s why I have a double underscore there, ’cause I usually get questions about that So nothing too fancy apparent, h3, a paragraph, and nothing else going on And what we wanna be doing is making it so we have a little thing like that So I think that’s pretty fun And with this we’re gonna have to explore one other thing If not done just with transforms, well it is done with just transforms actually, but it also has a little bit of extra in there So once again, I’d encourage you to see if you can figure out how to do that or how I did it So pause the video, jump into the starting file that I gave and see what you can do with it And if you can manage to figure it out, but then when you get stuck you can follow along Or if you managed to finish it and you wanna see how I did it differently, you can check that out as well So you can see here I’ve already had my card that has some padding on there Has the background image The background image, I’m just using a random placeholder from Unsplash It I also put a background color with the background blend mode ’cause without that probably won’t be able to read the text There, see you can’t read the text at all So that just takes, I’m blending the background with this dark gray color and multiply keeps the darkest pixels, so you can see it’s darkening it and all there I left the card_title here empty just so I’d remember to, this is where we want to do most of our work at the beginning anyway And at the very beginning, I think, I don’t actually need, we’re gonna come back Actually, no, we do need to do one thing, because once again, we will be using pseudo-elements So position relative It’s almost a masterclass as much in pseudo-elements here as with the transitions So a couple things So let’s come down and do my card_title after, as you probably guessed And once again we need a content on there with no content in it And I’m gonna give it a position of absolute We’ll give it, in this case I want the height to be a little bit more, like I don’t want it to be flush with the text I want it to be a little bit bigger So with the top of like -.25 I’m actually gonna use rem Usually I use m for this but we’ll see why in a minute And I’ll explain my decision to use rem here And actually, yeah, you’ll notice here on my card my padding, I also sit with rem So if you saw last week’s video where I looked at the difference between m and rem So if you’re not sure about those, that could help you out But I do say usually with padding margins I’m using m’s But in this case the rem is going to help us out

as we’ll see in a second We’ll give this a width of 100% to start with And the background is my, that orange color which just happens to be ee6352 So let’s see, do we get anything? Width There it is So top is there Let’s give it a left of 0 just so Now we’re running into that same problem that we ran in before So I can do a z-index of -1 on this to push it backwards, but now it goes behind everything Do you remember how to fix that? Here where I set the position of relative, that means I can also set a z-index on here Index of 1 And the number here doesn’t actually matter, but what matters is I’m creating a new stacking context, which now puts this -1 can’t escape outside of my title It’s just all the way on the back of anything that happens to be in here Now what I wanna do is I actually want this to start all the way flush on the side there And because my padding is set to 2rem I know that what I want my left to actually be is -2rem So that should pull it perfectly flush That’s perfect The other thing, you’ll notice that the width I actually want it to be closer to the total size of my text So instead of a width of 100%, what we can do on here is use a calc And on my calc what we can do is 100% plus, oh actually one thing I’m gonna change here, too, ’cause 100% it’s doing 100% width, which is, it’s a block level element So even though it’s a short text it’s taking up all this space So if we come on to my card_title, we can also give this a display of inline-block So the 100% is based on the content and not based on the size of the parent So then this 100%, and then we can add a little bit to this, so I added 2rem to this side So just to balance it we could do +4rem So now I have 2rem on that side, 2rem on this side right there, and it balances out pretty much perfectly So that is looking pretty good But obviously I don’t want it to be stretching that whole size just like that We want it to be a bit smaller So we can use my transform and, you guessed it, scale, scaleX I’m going to do it at like a 1, see what that looks like It’s probably pretty good We’re stuck in the middle And now my transform-origin would be left There we go So it’s on the left like that And actually that’s pretty good Maybe this could be like half that I don’t know, you could play with the number a little bit to get exactly what you want We’ll go with that one So it’s sort of highlighting my title which is nice, but whenever I hover not only on the title itself, but if I hover on the card I do want that to grow So we can come here and say card hover card_title after And what is it we wanna change We want the transform scaleX 1 Let’s just see that out There we go Boom, and it’s anywhere on the card I hover it’s working We just need to add in our transition note Transition transform 250 milliseconds ease-in Let’s see what that looks like Perfection I think that looks pretty good Now the real fun part comes with this text here So what we want is that grows out Once that stops the white part comes and reveals this text that’s underneath So a few little fun things we can do for that So first that’s my card_body So the first thing is I’m actually gonna choose my color I don’t wanna use black or a dark color, ’cause we can still see it, right? Or even, except we add the 333 on there, but I can still see that It’s really hard to see It’s getting pretty close to disappearing, but we can do one step better and say it’s transparent So it’s literally invisible and we can’t see it So that’s step number one But I think actually before we keep going I’m gonna leave that as transparent for now just because, I’m gonna leave it off, I mean, while we style it, but that’s what we’re going to be doing So we can turn that back on in a second after Content is nada Position once again is absolute, position, I spelled it right, that means my card_body needs a position of relative And then we wanna position it where we need it So let’s just do a top of, I’m just gonna do top 0, bottom 0 left, left of 0 and right of 0 Background is white

Okay, good So we can see that it’s there, which is nice Once again we need to (voice muffled) back so z-index is -1 We need a new stacking context so we can come back up to here, z-index is 1 There’s other ways of creating stacking context that’s not just through z-index, but again if you wanna know more about that check out the video on there Actually, let’s just make sure we can see my text, black Okay, so we can se the text So that’s a good sign Now one problem I have is this giant space in between them in general, I think So let’s come on to my card_title itself and set a margin-bottom of 1rem, so I know exactly what that is We still have too much Card_body, let’s just give it a margin of 0 Make it a little bit easier There we go So we know, so my top My top here My top, it’s not going to be 1, ’cause I can probably tell that space, -1, I think it’s gonna be too much because you can see it’s overlapping a little bit It’s overlapping because I have my bottom of -0.25 here So we’re sucking down by 0.25 So we just have to make that 0.75 And I think, there we go It’ll line up perfectly If I’m doing that on the top I want this same thing on my bottom, just to balance everything out that way I think it’s ugly that it’s touching here So on the left we might as well just stick with the same number And this is where having like a custom property could come in handy, but I just made all these changes Eww, I don’t like that they’re the same It won’t matter ’cause this is gonna disappear It’s all good, it’s all good And the right 0 I think is fine Or actually, I think a custom property would go good there Just, we have like here, this space, this space, and this space all being equal I think looks little bit nicer So we’ll stick with all those being the same So once again I can move my z-index and let’s do our transform scale But this time I’m gonna do a scaleY, just like with this button, cause we want it to be going, moving up and down So scaleY will be 0 So it should disappear when I hit save there, super And then when we card hover, the card_body after transform scaleY 1 There we go So now we need a transition on that Transition transform 250 milliseconds ease-in And transform-origin top Ha, look at that, it’s already pretty cool I like what it’s doing, but we want this to grow and then we want that bottom thing to sort of slide out afterwards, ’cause I think that makes it a lot more interesting So the way we can do that is we can use a transition delay So I don’t want this transform to happen until this one on the top has finished So it’s actually really easy to do I’m gonna keep this here with my transition We can add, you can do a transition delay like this with it’s own, so it’d be 250ms, because I’m not worried about this timing It has nothing to do with that It’s going back up to this one here So I’m looking at, when the orange box is growing it’s taking 250 milliseconds So it’s saying when this finishes pretty much we can start that one there So let’s save that and see if it works Here we go Cool, right? Now if you want to, the transition delay can also come in, I think it’s here Yeah, there we go So you can add it all in with the shorthand here instead of having to have a whole bunch of properties So that’s cool Now the only problem, as I said, we can see our text even when we are not, when it’s not there Before it’s supposed to come in we can still see the text, which is a problem So we can come back up and, where is my, so we can come to here and make this transparent again So hit save on that so it disappears And my card, I guess we can do it right here Card_body, no, card, doo doo doo, I’m actually gonna leave that there and we’ll do it right here Card hover card_body color is black I guess we should stick with my, still dark enough Still nice and high contrast We’ll go with that one So right away that’s sort of working But the only problem is now when I start, if you have really good eyes let’s make this red Just so you can, I think it’ll make it a little easier to see As soon as my mouse goes on top the text appears

And as soon as my mouse leaves it disappears So it looks a little weird, right So let’s go back to 333, and you can see it even though it’s super subtle But it’s really obvious when this leaves that it’s disappearing So what can we do to fix that? It’s not that complicated What we can do is actually, and this is not as performant as I was thinking With everything else I was sticking with transitions that are performant, which is on the scale You can also do opacity and, is it rotates? But color isn’t necessarily the most performant But hey, we can cheat a little bit here It’s not something I don’t think they would put a big slow down, and if it doesn’t move at a smooth 60 frames per second nobody’s gonna notice anyway And I think on most people’s computers this won’t cause any issues So we will want to actually transition this color So transition color And let’s do it a little bit faster, 150 milliseconds And doesn’t really matter what ease-in, ease-out ’cause we want it to be a little bit hidden So you can see it’s sort of glowing in and glowing out now Like it’s slowly fades out when my mouse leaves, which is really, really cool But I’m also gonna add in I don’t know, should I do a whole 250-millisecond delay? Let’s see what happens That works out pretty good actually What if it was actually longer? Ah, look at that That’s even better The reason that’s working is ’cause, is because the delay, it’s this is running, when I first go on it’s 250 milliseconds for this to grow and then the other one’s starting And that’s, so it’s, we’re starting this one So we’re starting this fast transition after 350 milliseconds So it’s after this has started to come down And then when it starts coming up it is taking, if you have really good eyes I’m sure if that was actually red instead maybe you’d see it a little bit, but the color’s blending in enough that we’re not noticing it If we really needed to, or if your text was standing out, you could set that to 250 and it would disappear just at the perfect time as well But it’s already faded off enough and with the faster transition I think we’re sort of making up for the difference along the way, and there we have it I just, I had fun doing that That was one of those videos where when I was planning everything out and just playing around I got a little frustrated at first ’cause I didn’t know, there’s too many like, let’s just look in, that’s sort of what my article was, looking at the basics of it Oh we can rotate something around That’s cool but how do you use that in real life? And so I think here we’re getting a better idea of how we could use it in real life, and that’s always a good thing That’s what I wanna do here And I hope you learned a little bit along the way and saw what I meant by falling in love with CSS I just think things like this are so cool The type of stuff you can do is so cool and so fun, and when you know how CSS works it’s not hard to do So if you did like it, if you did learn something along the way, please let me know what it was in the description below If you’ve already done a cool project with transitions or transforms ’cause I keep saying transition when I should be saying transform If you’ve done cool stuff with the two of them together or whatever it is, leave a link down there and let me know about it ‘Cause that’d be really cool to know about and learn about On another note, I’m gonna strongly encourage you to also come and check out my newsletter So there is a link to it in the description below I think at the end of the video it’s gonna show up in a little box as well And my newsletter, I’ve transformed it a little bit It’s so you can keep up to date So I’m sure you’re subscribed You’re subscribed here right? You’ve clicked the little subscribe button But even when you’re subscribed you miss videos sometimes And maybe you didn’t know I had articles and you heard me talking about that at the beginning You’re like, oh crap, Kevin’s doing articles and stuff like that, too, cool So if you never wanna miss out on any of that, subscribe to my newsletter The link is in the description below, and then you’ll just every week, once a week, one email only, every Sunday You’ll get a nice little recap of all the stuff that I’ve been up to And if it sounds cool to you just click the link and you get to watch my video or read my article And that’s it Just a nice way to keep up to date with everything I’m doing and I try every now and then to throw little bonus quickies in there that are fun ’cause say thank you for being part of my newsletter And speaking of thank yous, thank you so much for watching this video all the way to the end I really do hope that you liked it Also a big massive, huge thank you to my patrons for helping me support my channel and everything I do here with a bonus shout out to John, Lauren, and Fernando for being my supporters of awesome You guys are amazing Thank you very, very much That is it for today Thank you one last time ’cause I’m all just exploding with thank yous right now And of course I look forward to seeing you next week, but until then, don’t forget to make your corner of the internet just a little bit, just a little, tiny, nothing, little, little bit, more awesome