All right, so I'm really excited for this video where I am here to challenge somebody to a multiple CSS challenges. And it's someone who normally doesn't dive so much into the world of front end development. So maybe more comfortable with the backend, JavaScript and all of that. So we'll see how they can do it. And this is where that's it right here.  Sure, thanks Kevin. Happy to be here. A really big fan of your channel, first of all. Kudos to the awesome CSS videos that you have. So my name is Rajat. I'm from India and I'm a software developer. I'm a full stack software developer. I had been working with Microsoft in the past and now right now I am in a high frequency trading firm. I have been running a YouTube channel of about like data structures, algorithms, coding, interviews, you know, because I had been doing these problem solving kind of things for almost, you can say eight years. So yeah, I have, I really love this and I have a lot of stuff related to that. So yeah. And we actually have a video on my channel where in Kevin kind of build or, you know, learn those problem solving skills for me. And the link to the channel is just down below. So make sure you go and check it out. If you want any content pretty much other than CSS. So it's a great channel. Definitely recommend you go and check it out. And yeah, I'm really excited for this. I think it'd be a lot of fun. So let's go and jump in and see those challenges. So let's see. So we have centered the smiley face below both vertically and horizontally. Okay, I can see that we have this smiley face over here and we have to do select. I think this is the CSS 101 question, right? If you want to test if someone knows CSS, this is the first thing that you will ask. Yeah. I, I hopefully like, hopefully I know the answer to this and I don't think we need this JavaScript. So I'm, I'll basically just close this down. So I think we have a bunch of things I don't have to write over here. That is like, you have added for probably you define the screen, but this is where the main stuff goes, I think. Yeah, exactly. Yeah. So can I, can I use DevTools over here? Yeah, you can. It is a bit weird sometimes in CodePen when you open the DevTools is cause it's an iframe, but you can get into and find what you need. Yeah. Okay. Yeah. I basically just wanted to know how it's looking. So, okay. So we can see that Dev is taking the full width over here and the class name is center me. That makes sense. And so the thing is the width is already taking 100% because that's how they work. They fill in the full parent. If you explicitly do not mention the width. So yeah, that's fine, but the text over here, it's starting from the left hand side and because that is the default behavior. So one thing that we can do is in the content, we can say text align center, right? And hopefully what it would be, yeah, exactly. So this takes care that the text inside the Dev is at the center. Now we have done the problem 50%. The next 50% is the height, right? Now I feel that the proper way to do that would be, so let's see where is, it's okay. So here is the content Dev class and here is the center me, right? So one thing that we can do is basically, you know, make this content as a Flexbox container. So if I do that, I'll quickly explain why I'm doing that. But once I make that a Flex container, okay, so we lose this thing, which was working initially, now it's not working. And the reason for that is probably, you know, because now this is a Flex item, now it's taking the complete height, but now the width is limited to whatever the content is because Flex item, that's how they work. They start on, you know, because the default direction is 0, so they kind of stack in the horizontal direction as a rule. So this can be fixed. I think we can do something like, let's see, we can say, Flex, okay. So I think I need to write dot center me, that's where the next code should go. What I can do is basically say that the Flex basis is 100%, right? And now that is working. Now I'm saying that you have to take extra space if it's available. And that is working. Now to fix the alignment, probably what I can do is, so I think we have, so in the main axis, we have justify content in the other axis, we have something like align items or aligned content. I'm always confused between that. So I'll use one and if it doesn't work, I will quickly change. So I think the align content is not working because the height is like really stressed because of that it's not working. That, let me see what we can do. I think the other way is to actually say that the justify content is also, we can get rid of the text line. We can say justify content as center. So that even if we have one thing, it goes to the center and let me just say what's happening right now. So one nice thing with the DevTools is we do have some Flex inspectors and stuff now, but so there, yeah, that's working now. Yeah, yeah, because I was saying that, you have to grow 100% so that's why it was not working. So align content is not working. Let me see if it's align items. Yeah, there you go. So I always get confused between align items and align content, but I think the good thing is, if you want to center anything, these two lines always make it work. Like this is basically saying that whatever items you have, you have to place them center in your main axis since it was flex row, it's basically horizontally putting the smiley face into the center. And this is like in the cross diagonal axis, like what do you, where do you want to align your items in that axis? So yeah. I'm writing, I write CSS all day long every day and I still mix up align items and align content. So don't feel bad. Yeah, this happens. Yeah, it's also been made more, because align content with flex you don't use very often. It's only if you have a flex wrap and there's other stuff happening. Yeah, you have multiple rows kind of thing. Yeah. Then exactly, yeah. Then use it, but then we also have grid now and with grid, you'll probably use align content a lot. So it just makes it even more confusing a little bit there, but yeah. Awesome. Yeah, I think I read about the grid, like I think one year back, but at that point of time probably, I didn't use it much because I think when I, you can I use.com at that point of time, it was not widely adapted probably, but I think now it's like really, it makes life easy and it's like the next thing. Challenge two. All right, so we have to create three equal columns inside the dot content class and I think the dot content is the parent. Yeah, so basically it's holding. Okay, what does it have? It has a div. Can I make this a bit bigger and this a bit? Yeah, probably this is better. All right, so I have to create three columns inside the content class. And as we can see over here, we have like this is one div. It's having a heading and a paragraph and we have three such divs and what we want is kind of like a newspaper or magazine kind of thing wherein we have three equal columns on the screen. So of course, the first intuition is to use flex, flex column actually, so that, you know, no, actually flex row makes sense. Yeah, so if I make it a flex, all the divs will go side by side and there we go, we have something but I think they're not of equal width. As you can see the middle div, you have I think put a larger text as compared to the other two. So this is taking extra space. Another thing over here is, yeah, so flex how it works I believe is it has one row and then it has flex items and it is placing those items in the row. If the items are not taking a lot of space and you have extra space left after the rendering, you can control the extra space distribution using justify content and all those things. You can also use flex spaces on your flex items to control that, you know, or you can use flex grow, right? Which basically decides how much you have to grow. In this case, for example, if I have div and let me just use SCSS to make life a bit easier. So what I mean to say is inside the content, if I, for each div inside this, if I try to make the flex grow as one. Just take off the star there, it's actually gonna cause some problems. Just the... Oh, yeah, sorry. Yeah, there you go. I didn't, I don't know why I did that. I was kind of saying that every div. So kind of... Everything, yeah. Yeah, I wanted to say every div inside content and yeah, this is the way to do that. Yeah, so right now it's not going to work out because you know, this works if we had extra space and we wanted to control how much is that space? Like how do we want to control the distribution? Saying flex grow one means, hey man, each flex item is going to get the extra space equally. So because of that, we used to have like the equal width kind of thing. But over here, I understand why you gave this talents and we are having this longer div. So we don't have actually extra space. So this is like not doing anything, right? I think one easy way to fix this is probably give this a width of 32% or 33 if you want, right? So now we have kind of like, we have made sure that the divs are having equal width and they are having three columns. Yep. So this works perfectly. And to me, that's a solution to the problem. So that's perfect. Just to dive in a little bit deeper and we were talking about flex grow. So another property that's actually by default is flex shrink, which is what's working right now. That's the reason that, because you did display flex and they all just sort of fit in. But the middle one, as you said, was a lot bigger and it's because there's more content. So flex is doing its algorithm stuff. It's trying to see how big it wants everything. And then they're all really big and then it's shrinking them down. But as soon as we declare a width on it, now we're saying like be this size. But what's really interesting here is you could actually say width 100% and it's still gonna work. Really? Or it could be 200, any size you want. And the reason it's working is because now we're saying be 100% so it's gonna try and be the size of the parent. But then because there's a flex shrink on they're all shrinking and they're all shrinking by the same amount. So they all have the flex shrink of one. So they all have the same default size and then they're all shrinking by the same amount. So they all become equal columns. The reason I like this approach is if you had two columns, you would still have two columns. If you had six columns, you'd still have six equal columns. So yeah, this is one way that I like to approach it. Yeah, it's actually very good, right? But one thing which I found is like, I think there was a certain realignment when I changed from 33 to 100%. And I think that makes sense because initially we were also leaving 1% extra space. So yeah, probably this is more accurate, I believe. And then if you wanted to, there's another, we can also do a gap, not on the div itself, but on your, like right after display flex. You mean gap? There's a gap property that is new to Flexbox. It's been, we've had it for grids. So you can put whatever number you want, say 20 pixels or... Okay, let's put five. It's not visible, yeah, 20. Yeah, so a bigger number. So that's gonna create, you know, it's the spacing between the columns now, yeah. This is, it's been around for a little while with Flexbox, but Safari just got support for it. So it's pretty exciting. It makes life really easy. So the key is to play with the width property and make sure that it's 100%. And then let now Flexbox, like leverage the flex frame properties now. Exactly, exactly. And you could, I mean, I know some people, I've shown, I usually do it with width because it's the simplest way to understand it. Some people prefer using Flexbasis just because it's a flex property. At the end of the day, they come out to the same solution. So it's whichever one you prefer. This was beautiful. I really love that it's not dependent on how many columns you have. For example, in my approach, it was like 100 divided by three. If you have four, it would be 100 by four. Yeah, awesome, thanks. So now this is saying prevent the content from overflowing that small screen sizes, yeah. Now, if you shrink down the, yeah, one point, there we go. Yeah. It's coming up. So this is one of the big problems with using Flexbox is this. Yeah, yeah, yeah. Everything is coming in one row. And like at this point, you would say, oh man, this is awesome, right? But then as you reach this point, it's lovely. So I think I have to use media queries now because, you know, like as soon as this is not making sense, probably I think it's not making sense already. And so right now the width is close to 930, right? 930 pixels and it's not looking good. So at this point of time, probably we want a three-column layout. And then as we go down, probably three columns is also not going to look good. But let's actually fix it for 930 pixels. So how the syntax works for media query and I think I remember this is at the rate media, we have screen and we have the max width property over here that I'll write. So if the max width is let's say 930 pixels, right? So now I can write a bunch of CSS over here, which will only be applied to my DOM, only if max width is up to 930, right? Yeah. So just to make sure this works fine, I'll just, sorry, I'll just make sure that the body background turns green. Okay. So now as the width is bigger than that, it's white. And as soon as it crosses 930 mark, it's turning green. So now at this point of time, I actually want to, you know, start doing that decomposition thing, like breaking this five column layout into three. So I think let me see. So we have content and then again, the same thing, right? We have five devs and each dev is having a heading H2 and a paragraph B. Exactly. Okay. So content is already flexed because of their coming into a row, but now I want to do something over here. Okay. So let's see how to do that. Probably we can say dot content. And again, I think I have to use CSS. So what do we want to do dot content? And then I think we want to talk about the devs. And over here, if we can say that, you know, now you are going to take 33%. Okay. Okay. So this is, I think we also need to probably add flex wrap. Probably that's why it's trying. Basically it's saying that I can't take more than one rose. So how to do that? Well, we can do something like for dot content, we can say flex wrap. I think it's a wrap. Yeah, there you go. So over here, we have five. And then as soon as the break point triggers, we have like three columns over here. Now it's looking better than before, I think. And then I think at 700 pixels, it's a good time to actually break it further into two. So how that's going to work is similar to this one. We can just copy paste this and say that when the width is, and I think I forgot the, it was seven 700, I think. So if the max max width is 700 pixels, what we want is we again want the wrapping property, but now the width should be 50%. So yeah. It's looking much better. Probably like we have something like this, then three columns and two columns and so on. Like if you want to do it further, we can probably do it. But yeah, that's the overall idea. Awesome. Yeah. So the main thing I wanted with that challenge is just to bring in that flex wrap, which is a bit of a weird property, but it's a really important one and it is off by default. So normally it's no wrap and the idea is, because if not, you wouldn't get columns. It wouldn't, you know, you'd have to do a lot more work, but then you run into these situations where things can overflow. So definitely using the flex wrap is a great way to do it. And I do like that for your media queries, you're thinking about it, like how do we make it look as good as possible at the different sizes. So that's always a good thing. Cause I think a lot of people just go like, oh, I need it to, you know, do this one thing. And so like, I sort of like how you broke it down and when is it, when are the columns getting too narrow? It's the right way to be thinking about it. Yeah. Yeah. So I mean, there are ways with using combining a flex grow with it as well. And or you could, I mean, you could use one media query that changes the flex direction and then you would just go from columns and then they would just go to rows. So that is one option. Another one is to it. It's a little bit like what you've done actually, but just by adding flex grower in it, we're setting like min and max widths. You can sort of play around with it a little bit too. All right. So I think I have passed this one as well. And we can move to the next one. Challenge four. All right. So we are almost halfway. So this one's a little trickier. I'll just let you know, there's a trick to this one. I mean, when it's when it's coming to animations like I already, I think we'll get zero numbers. I'm not that good with animations. So we have to animate the gradient on over. Okay. And what do we have? We have a diff class content. And then it's having margin border height and background. Okay. So here's the background and we want to animate it on hover. Right. So let me first use SCSS. Okay. So what I think the syntax for doing something on hover is first of all, we have something like an hover, something like this. Now, whatever I wrote right over here, that CSS applied whenever we have, whenever we are hovering the diff. So just to make sure it's working, let's add a cursor pointer. Right. Okay. So there you go. Now when I am hovering, I can see that, you know, and let me just make this a bit bigger. So now you can see that this is functioning fine, but how do I animate it? I'm not that good, but I think there is a good property like transition in CSS. And if you don't know, like, I really love this all kind of thing. Like if you want to change the width, you can do something like width one second and, you know, some other property two seconds, and you can control the timings of the animations. But like when you really don't know what property, like I love this thing, like all one seconds. So this kind of, you know, saves me when I try to do the animation. So now what I'm trying to do is my ideas, I will change the degrees over here, 45 degrees probably. And now like when I do the hover, you know, yeah, exactly. So this is, okay. So this is happening like the background is changing, so I was expecting. You're expecting it to transition. I can see this evil smile.  So this is a common thing that people want to do in animating gradients. And from, you can animate or transition almost anything with CSS. You do want to be careful just really quickly that there's a lot of things that you can, but it doesn't mean you should just because there are performance issues that can come up. But with backgrounds, you can do a background color. So if you just had red into green, no problem, but linear gradients and gradients in CSS, they're actually part of the background image syntax. So we're using the shorthand background, but they're actually background images. Okay. And because it doesn't know it's a gradient versus just like an actual picture. So say you had an image, you couldn't like CSS wouldn't be able to animate a picture. So it can't animate. It just, they just said background image can't be animated. So linear gradient itself can't be animated. So I was mean with this one. This one is a mean one on my part. All right. So basically the question is to animate the gradient. And then Kevin is saying, hopefully CSS does not know how to animate gradients. Right. So there is a way in the future that's not, we can't use it yet, but it's coming where we'll be able to animate the colors within a gradient, but right now we still can't do it. But what we can do at the moment, because we can't do the gradient itself, sorry, we can't animate the background image property, but we can animate other parts of the background property. So the first thing I want you to do is after in, not in the hover, but in go up to like the regular content. Yeah. And we're going to do, so just after all that, put in background size and put in like 200%. Okay. So guys, this is like we are doing cheating a little bit. The interviewer themselves are helping us. So, okay. Okay. I got it. I got it. I think now we can play around with this property. We couldn't play around with this. So basically I think what you're saying is kind of, you know, do that, that drag or something like that. It looks like it's kind of moving. Exactly. Okay. So I think we can do something like background size, 100%. Yeah. So now it looks really cool. Yeah. So there's pretty much any background property can be animated. So you can do background position. You can slide things around. You can do the background size and get it to change too. So there's, if it's below 40, 100% it gets funky. Yeah. This is given like, do you want to explain what just happened? Yeah. So because the background size is less than 100%, it's doing the gradient. So when you hover. Yeah. The gradient is going, it's going from there to now 90%. So, and then it's going to start the gradient over again because by default background, backgrounds also repeat. So it's doing it 40% and then it's repeating the background over and over again or now 90%. So then it starts it over again. But don't, don't we have something like background cover stretch or something? It's background size cover. Oh, okay. Oh, damn. I can't do it. No. So yeah, you wouldn't want to drop below 100% with the background size. It's covered background size cover. I don't know if that works with gradient. I've never done it with a gradient. I don't know how that works. Let's see. I can't animate it. Yeah. Yeah. Because you're changing the value from 200% to something else. So it should be the same thing. Okay. I think we can change probably this to center or something. So you leave the background size at 200%. And then in the, in the hover, don't do background size. Do background position. Okay. No, leave that one. Nope. Sorry. Sorry. Leave that one. Yeah. That one changed that one to background position and just put it to like center or left, right. Maybe try center and let's see what happens. It should work. Okay. There we go. So what it's doing now is by default, the back, the default background position is your top left. So we're seeing the top left of the gradient or the left side of the gradient. And then it's animating it to the middle of the gradient now. So the gradient, we have the big gradient that's sort of off to the side and then it's sliding. Yeah, exactly. Yeah. And this looks cool as well. All right. So yeah, I knew that I didn't know that much about animations. First of all, and thanks to Kevin for making this more hard. So this one was a little bit mean though. This one, this one's one of those ones. We either don't know it or you know it. So it's. Yeah. Cool. Let's move to challenge fire. But I really love this man. I'm learning quite a lot of things. All right, guys. Give the box below multiple borders. Okay. So we have content and yeah. Yeah. This is another one of the ones that is maybe a little bit mean either you're going to know it and you're going to get this one in like three seconds or I will have to walk you through. I think it's like a chemistry question. Yeah. Yeah. Yeah, exactly. Yeah. Let me try some funky things. Oh, I'm a magician. So yeah, that's all I could have tried. Possibly. Like you have to help me over here. No problem. So there's there are two options. So the first one, if we could use the outline property as well. So outlines are just like borders. Okay. So if you go in the big different, a border is part of the box model. So it will take up space whereas an outline isn't. So it's visual only. It doesn't actually take up space on your, on your design. Now it's actually make it like 10 pixels or something. I can see it. There we go. So outlines are cool. There is another cool thing actually. That I didn't think about until now, but if you go on the next line and do outline. Offset. So this is what with borders and with outlines, the one issue is we can't. We can only put in one. So this is where we, this is where we, this is a bit of a, we'll call it a hack. And I'll see. I'll let you try it out. I'm just going to say that you need to use a box shadow. Box shadow. Okay. I won't let you know how to do it, but I'm assuming you know how to like so.  Exactly. I forward the syntax. I think it's something like black and you have to define the thickness of. Exactly. The blur. How. So that should, there we go. Yeah. So if we do that now. The advantage with box shadow on like borders or outlines is you can have multiple. So you are saying exactly. Something like this. Okay. Yeah. This is cool. I'll give you what's happening now is they're all overlapping each other. So it's just getting muddy. So there is one, when we do this zero, zero, it's those, those first two numbers are the offset. So one's horizontal offset. Yeah. Okay. Okay. I'll give you what's happening now is they're all overlapping each other. So it's just getting muddy. So there is one, when we do this zero, zero, one is horizontal offset and the second one is vertical offset. Then we have the blur. So the 10 pixels is your, is your blur. Just make sure you put PX on those. Oh yeah. Yeah. Like for zero, you don't need anything, right? Yeah, exactly. So that should, we should see that one's going to be. Okay. Getting pulled down. There is a fourth value that you can put, but it's an optional one. And that's why it's working, even though we're not setting anything. But after your, after your blur, you can give them, it's called the spread. So if you go in there and you put say 10 pixels or whatever you want. You'll see what it does. Oh, okay. So it's kind of like, like the width of the shadow, something like that. Yeah. So it's saying go that many pixels, then start the blur. Okay. So it's, it's a way of pulling the shadow. Okay. So I think we can remove this probably. And so we have 10 pixels, 10 pixels black, then we have 20 pixels, 10 pixels. So this is like how much blurry we want, right? So we can keep this also as 10. And okay. So I think we don't want blurriness. We can probably remove that. And probably as we have more borders, you can increase the spread. Right. We can make this. There we go. Yeah. Perfect. That's awesome. Okay. So what did this happen? So this, this was the offset and we are keeping that as zero, zero.  So this is why it's like acting like exactly how border works. Right. Yeah. Exactly. Because there's no blur on it. It just becomes a solid block pretty much. Why do you know this? Like who tries to do such things, man? How did you learn this thing? I don't know. It's one of those things that like you sort of find out. Actually, there's a website called CSS battles. CSS battle.dev or CSS battles.dev. And there's so many things to use box shadows for. You just need like, it's the easiest way to get so much stuff done is with using multiple box shadows. Wow. Amazing. I know that such kind of CSS will never go to production, but amazing. This was awesome. Thanks. So this is the six talents and I'm already having a bad feeling. So it's saying that recreate the image below without changing the HTML. Okay. So. So yeah, just like we want to make our box at the top look like that thing at the bottom. We want to add the purple purple right. Yeah. Exactly. Okay. So. Okay. Without changing the HTML.  I think like credits to your videos. I think I have watched one in which like we have pseudo elements, right? The before and after. So the syntax for that is like, let me just use CSS. I think that's the way to go. I'm not sure. Like I haven't like I never actually use this so far. So I just know that we have something like that. And like what I'm planning to do is something like and after and I think this is the same text for pseudo elements. Let me just see if it's working first. So it's. Let's say a hundred pixels. Hi. Let's say 20 pixels and let's give it a background. So that we can see it. So 100% pseudo elements to the right way to go. And normally this would work, but there is two things that are missing to actually get it to render. Okay. So the first one is it's a little bit strange, but on pseudo elements, they're not, because it's literally going to inject the element into the DOM. And with anything CSS, they're not going to. Like the DOM's already there. And if everything already, if CSS won't inject it, we have to sort of give it the properties so then it can come into existence. Because if not, everything would have a pseudo element by default and the DOM would just be a mess. Okay. I think I heard what you're saying. I think it was something like display block. So we need that. And there's one more thing. And this is the weird one where it's the content property. So it's going to be content. Okay. Okay. Content. Okay. I thought you were saying that add some text kind of thing. Okay. Oh, no, yeah. Just content. And then it for that, we just want an empty string. Okay. Empty string. Or I mean, well, if you put EF, we actually see that show up semi. The reason, so now we can see it. And the reason we want an empty string is we just have to say that this by, by putting content and then an empty string there, it's just saying that this has content and the content is nothing, but we have, it has content. So then it becomes, it's actually, that's what's forcing it to be injected into the DOM. I mean, this is, this is like comparing none in JavaScript with, you know, empty strings, right? Yeah, exactly. So, I mean, you can use the content property for other stuff, but it won't inject it into the DOM until it actually has content to print in there. Oh, so basically this is, so, but. Okay. So this is not making sense to me. Why? Because if, so are you saying that whenever people use, you know, elements like after they, so this always has to come, right? Otherwise it's not going to make any sense. So exactly. So can it like, if it always has to be there, probably. I think even if you do not have it, it should automatically have that, you know, empty. Yeah. And it's just because again, like the, if, if you didn't declare it yourself, like every, every single element has default, like brought the user agent styles. And if we didn't declare the content to populate it, it means that that would have to be a default on all, every element pseudo element. So if that was the default value, then every element on our page would automatically have the pseudo elements being injected. And that would cause like, if you opened your DOM, then everything went in there and it would be a nice. Yeah. So yeah. That's one of the joys, one of the joys of CSS. And this is one of those things that's definitely different from other languages in that sense. Yeah. All right. So probably I didn't watch your complete video. All right. So I think the positioning is still left and. Well, I'm, I'm, I'm planning to use something like relative positioning. What, what I'm planning to say is, like, it give it a top margin, like now since it's relative, like right now we can see it over here. And now I can play around with its positioning.  I'm not sure. Let me just take actually, I think it should be top. So if I make it 10 pixels. Yeah, exactly. So since it's relative now, whatever I put over here, it's moving relative to its original position. Now what I want to do is I can give it a top of probably 100% something like, because I want exactly, I want to move it to the parent side and probably a bit more something like 105%. Exactly. And similarly for the left, I can give something like now the 50% will take it all the way. But I wanted not 50% but something like 40%. So that it kind of goes in the center and it also has a width. It's not 100 pixels for probably I can give it 80%. Okay. So of course when it's 80% you know, this should be 10 because we want the 10% space here and then exactly. And the color is not red, but it's purple and we have solved this, right? Perfect. All right, awesome man. This isn't something that would be useful in production either from what we've looked at. But pseudo elements are really useful and I think they're underused because what they, what they do is like, what I see people doing is putting in like empty spans and then styling the span up to try and get like decorative elements or something. Yeah. Yeah. But the advantage with it being a pseudo element is like, say you have a block quote and you have like a design that comes with your block quote, you don't want to have to put in your block quote and then put an empty span every time. It's a little bit like we were talking about before with like reproducing the code. You just want to put a block quote there and everything comes with your block quote. So pseudo elements or whatever, if there's a decorative thing coming with it, you don't need to play with two, you're not doing the HTML and the CSS. You can just put in your content and everything is styled. Yeah. Yeah. It's easy to maintain also. I believe like. Exactly. I think it makes life a lot easier. Yeah. Yeah. Wow. How many do we have more like? Last one. Last one. All right. The last one guys. And he made the red box and I mean the problem statement is growing. Right. Yes. I couldn't do this one too short. So that it goes to the right side of its parent. And then back to the left, the animation should keep looping and never end. Just like how this interview feels to me. So keyframes. I'm probably like not sure the syntax or you can help me, but let me try something on my own. So let's see. Add the rate keyframes. What do I remember? I think we have something like animation and we can pass in the name of our keyframe. We can say something like. Let's call it magic. Because only magic can save us now. And probably give it one second of time or probably three seconds. And then keyframe something magic. And I want to basically say that this is 0%. Then something happens at 50%. And then what happens at 100% something like that. So now you have to tell me the syntax. All right. Yeah. So you got the right idea. So we're going to pull the keyframe out of the box selector. Keyframes go on their own because they're reasonable. Okay. And we only need one at keyframe. So you can. Okay. So this can go inside. Exactly. Yeah. This makes sense. And then it closed. And then it's keyframes with an S just so we don't. Okay. Since I noticed it. So it's 0%. You can open up some curly braces and. I see. Okay. Yeah. Exactly. All right. Now I can look. I don't need this. I can just work with the CSS. So. So how we are going to play on this. Okay. I need to see the estimate for that. So just one thing. I'll say one thing, just so we don't go down too much of a rabbit hole, but in the keyframes, there's no selectors. You're only using properties. Okay. Cool. Yeah. Yeah. I was not going to use that. I just wanted to make sure. Yeah. Okay. Let's see. So. Okay. I think we can. Okay. So. Okay. I think we can. Okay. So you already have a position relative on the content. And I think. I can also make this. Relative. Probably. I'm not sure. Just give me a minute. So I'm planning that it starts with. It sticks to the left side. Initially. Then. Do I need 50% I don't know. Let's see if I can make it work with 100%. And then I can say the right is zero. So hopefully, you know. Yeah. How do I. Now for. So. Three seconds. We do have to give it one more. I think just. Three seconds. Yeah. Exactly. And let's see. That way. Oh, okay. So what, what's actually. Try. Where it says right zero. Cause maybe I'm going to get it wrong now. Change the right zero to left 100%. I just want to see what happens. Okay. I want to see if that even works. There we go. Okay. So there's a really weird thing with the top, bottom left, right properties. If we didn't have a width declared on the box, it probably, I mean, there could have been other issues with it. But because we have a width of 75, when you're saying right zero, it's, it's still had like, it still has the left of zero, like the left of zero didn't go away and it knows it's 75 pixels. So you run into this weird situation with the left and the right side sort of fighting with each other. Okay. Oh, but what if I do something like right zero and left. Okay. That doesn't make sense. Yeah. I mean, doing something like this. I was thinking something like 50% or something like what happens now. So yeah, it's still, it's basing it pretty much just on that left. Left. Yeah. Yeah. Okay. CSS. Okay. Okay. Okay. 100% is actually sending it out. Right. So I think we can use the Cal property and probably I will get some, some marks just because I know this things. And the syntax also for Cal is amazing and I just quickly show that. So this works like this, but the thing is if you do not have spaces over here, it will not work. Oh my God. I just don't know what's happening. For some reason it does that. But yeah. Is it working? I think we can also do it like reverse something like, I'm just, okay. So something happened. Let's wait and see first it's happening or not. Okay. So it's just happening in reverse. Is there something to went through? So yeah, it's, it's alternate. Exactly. And probably this is infinite. You still want the three seconds, but you do want infinite too. Okay. Okay. Yeah. Basically this controls, this controls the duration of the, this controls the duration of the animation. Awesome man. This is awesome. And probably we can do some more funky stuff like, let's, like let's also grow the width to 150. Okay. So it's working. It's working. It's working. Yup. Amazing. And change the background. Yeah. I know that because I make that, the amount of times I've set a color on something and been going, like why isn't it working? And I couldn't figure it out. And it's like, Oh, it was a background color that I wanted. Yup. Amazing. So a really big thank you to Russia for coming onto my channel and trying these challenges out. I think you did really, really good. It was a lot of fun. And if you'd like to see me take on some algorithm challenges and see how I do with those, you can check out the video where I did that over on his channel, the link to that one and his channel is down below. And with that, a really big thank you to both Zach and Randy, my supporters of awesome over on Patreon, as well as all my other patrons for their support each and every month. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.


From the CUBE Studios in Palo Alto in Boston, connecting with thought leaders all around the world, this is a CUBE Conversation. Hi, I'm Stu Miniman, and welcome to another CUBE Conversation. I'm here in our Boston area studio. And of course, the intersection of networking and security has always been a hot topic. Even more, if you look at it in 2020, everybody working from home, there's stresses and strains and a lot more change than usual for what corporate IT has to deal with. Happy to welcome to the program Tom Bienkowski. He is the director of product marketing with NetScout. We're gonna get into some of those topics more. Tom, thanks so much for joining us. You're welcome Stu, glad to be here. All right, so you came to NetScout by way of the Arbor Networks acquisition a few years ago. Why don't you give our audience just a little bit about your background, what your team works on, and we're gonna be talking about the edge defense solution set. Sure, yes, I've been with Arbor Networks for over 10 years. I've been the director of product marketing for the DDoS line of products during that time. And when we came over to NetScout, I still kind of continued that role. So I'm basically responsible for anything that's to do with the Arbor DDoS solutions. We have solutions for the service priors of the world and our gender prizes of the world. Yeah, maybe Stu would help if you just refresh our audience. So generally out in the marketplace, DDoS, it's attacks on the internet. If I was a big provider of technology, it's like, hey, why can't I get to that website? Oh, they had a DDoS attack that hit them. But when it comes to the enterprise, you talked about service providers also, when is this hitting them? Who are the ones causing this kind of thing? Just kind of give our audience a little bit of a level set, if you would, in 2020.  This isn't anything new, as you know. But the reality is that these attacks have been getting bigger, they're getting more frequent, they're getting more complex. And like I said before, I've been here for over 10 years and I feel like I say that every single year. But it is absolutely true. And the service priors of the world bear the brunt of this problem. They're the ones taking on these large attacks. They're the ones trying to stop it, not only to protect their own infrastructure, but also potentially the target, which could or cannot be one of their customers. There's a lot of collateral damage associated with a DDoS attack, especially from a service priors perspective, because it impacts everything running on their backbone or in their whatever facility that this attack is flowing through. And then obviously you have potentially the target of these attacks, which could be any enterprise, any large government, whatever. It's very indiscriminate. Anyone could be a potential target and they are. All right, and for the enterprises themselves, how are they making sure that they are protecting their perimeter? Where does NetScout fit into helping protect them against the sort of malicious attack? Yeah, so when it comes to protecting their perimeter in particular, let's talk about where we are today in this whole COVID-19 pandemic. As we all know, this caused a massive work slash, learn from home scenarios never seen before. And the quote, new perimeter is everyone who was once inside the organization now home coming back in, right? And the internet, inbound internet circuit, the firewall, the VPN gateway, the load mass are all now coming from an opposite direction that maybe they were utilized in the past is really the new perimeter. And it has become very crucial to maintain business continuity, especially in this time. But as we'll talk about, it also has become very vulnerable to DDoS attacks in particular. And one of the areas that we'll talk about is how one particular piece of that infrastructure, the VPN gateway has actually become not only one of the most critical pieces in that chain of communication, but also one of the most vulnerable pieces too, simply because it was never anticipated that this many users would utilize that VPN gateway. And it was never designed for that. And therefore it's running at high or near capacity or at capacity and it could be toppled over pretty easily with fairly small DDoS attacks. We'll get into that a little bit later. Yeah, absolutely, Tom. So I've had so many conversations over the last few months about the ripple effects of what worked from home or if we think about however things play out in the next few months, it really will be almost work from anywhere is what will happen. And while everyone is working at home, that doesn't mean that some of those bad actors out there have gone away. In fact, every company I talked to that's involved with security has seen, we need to raise our capabilities and often are getting more attacks out there. What have you been seeing out there in the marketplace? How have things been so far in 2020 when it comes to your space? Yeah, now same thing. So I'm gonna put up a chart here and this is a chart which shows DDoS attacks during the first of six months of 2020. And this data comes from what we call our cyber threat horizon. This is a free online portal that anyone could access and see this information if they wish, but it's fueled by the deployment of our products all over the world. So our DDoS protection products are utilized by a majority of the world's internet service fighters. And from that deployment, they send this information about DDoS attack activity like the size of the attack, who's being attacked, where is it coming from, the protocols or vectors being used, et cetera. So we gather this information on a daily basis presented in this portal. So what this represents is the first six months of 2020. And as you can see, there's been over 4.8 million attacks thus far in 2020. That's about 15% higher than last year at the same exact time period. But if you look at the chart a little bit closer, we snapped the line at February, sort of the start of the global pandemic and the lockdown periods, if you will. And what you can see every March, April, May as an uptick in the number of DDoS attacks almost up to 36% in May. So all this is happening during the time of this lockdown. All this is happening where organizations are struggling to maintain a new normal, if you will, or this is continuity, right? So what you said before that organizations are still struggling with cyber attacks, in fact, probably more, is exactly what's happened to in the DDoS realm. And then finally, if you look at June, you see this little drop off there. And here everyone talking about the new normal, the new normal is not the new normal, possibly. It's still too soon to tell, I think. We'll wait for another couple of months here. But the bottom line is that during the midst of all this, as organizations are trying to maintain some level of business continuity, they're also being faced with cyber threats like DDoS attacks too, like they've never seen before. So amazing challenge that folks have faced out there. Yeah, Tom, there's a few spaces in the marketplace that were already very important, really top of mind from the business. I think about automation and security being two of the ones that come up the most often. And when I talked to the participants in the space, they're like, I thought I was busy in 2019 and had a lot planned for 2020. And oh my gosh, I had no idea what 2020 was really going to bring. So that data that you showed, you're talking about millions of attacks and that increase there, putting a focus on it even more here. So a lot of work for people to be done. So bring us inside it a little bit. How are you helping customers? What advice do you have for them? How do we make sure that we can curb the impact of these attacks, which is said in the millions. Sure, so let's go back to that inbound infrastructure now. Everyone worry from home coming into the inbound router, hitting a firewall, and more likely hitting a VPN gateway of some sort. That's what's allowing them to get access into these internal resources. That VPN gateway, as I mentioned before, is been crucial during this time, but it also has been very susceptible to DDoS attacks. That VPN gateway, as well as that firewall, these are what was referred to as stateful devices. They have to track TCP state in order to work properly. Well, there are three types of DDoS attacks, if you will, to make things simple. One is the volumetric attack, which people normally think of as what a DDoS attack. It is designed to saturate that inbound circuit, that internet-facing router interface, right? And then there are application layer attacks. These are very small, stealthy attacks. They're going after specific application servers that try to bleed off resources there. And then there's an attack called state exhaustion attacks. These are specifically designed to go after stateful devices, like firewalls or in today's world, the VPN gateway. And it doesn't take much. It takes a small 100 megabit per second attack, lasting for, you know, five, 10 minutes to potentially fill the state tables in some of these VPN gateways, especially in light of the fact that they weren't prepared or designed to take on all the legitimate users, right? That are coming in as a result of the pandemic. So the key to stopping these sorts of attacks, these stateful attacks and protecting that VPN gateway, is to put something on premise that is stateless, meaning it has the ability to inspect packets using stateless packet processing technology. And we have such products, our product, which we call the Arbor Edge Defense, is designed to stop all types of attacks, but in this particular environment, it excels at stopping state exhaustion attacks. And you deploy it just inside the internet router and in front of the VPN gateway or that firewall. And there it could pick off short-lived state exhaustion attacks and protect the availability of the VPN gateway and the firewall. Now, if you're relying upon, which many organizations do, relying upon a cloud-based DDoS protection service, which we have to, we have something called Arbor Cloud, it may not be able to stop those attacks in time. So you're running a little risk by relying on more traditional cloud-based DDoS protection services. That's why you need this product, Arbor Edge Defense on premise, because it will react instantaneously and protect that VPN gateway from going on and maintain that business continuity for you. Yeah, Tom, when I think about that footprint that you have in a customer's environment, in addition to the DDoS services, it would seem like that's a prime opportunity that there's other services and applications that could be run there. Is that the case with your solution too? Well, if I understand what you mean by the services, well, we have the ability to have our current conductor fully managed service. Is that where you're going with that, Stu? Yeah, I think that, yeah, that's, wanna, right, understand how that service works, yes. So the Arbor Edge Defense is a system that once you have it configured, you design it for protecting sort of the interior services like protecting the VPN gateway, firewalls, any other application you have running internal. In the event of a large attack, as we've been talking that will fill that internet pipe, it has a feature called Cloud Signaling where it will intelligently call for help upstream to either an Arbor Cloud service, this is a fully managed DDoS protection service, we have global scrumming centers, and or call your ISP, who may be getting your DDoS protection service from already. So it has the ability to link the on-premise with the cloud-based protection. And this hybrid approach to protection is absolutely the industry best practice. This is how you protect yourself from the multiple vector DDoS attacks, as we mentioned previously. Now, if you're an organization that maybe doesn't have enough experience, doesn't wanna deal with the on-prem Arbor Edge of the fence, we have you covered there too. We have the ability to manage that scenario or that device for you. We have the ability to manage not only the Arbor Edge of the fence, but the also integration of the Arbor Cloud. So that whole hybrid scenario that we're talking about can be fully managed by our folks who do this every single day 24-7. Yeah, any breakdown as to your customers, as to when they choose that fully managed solution versus on-prem. Recommendation we've had for a long time is you wanna have your IT focused on things that have differentiation in your environment and it seems like a natural thing that your team has the expertise. So what is that decision point as to whether they do it themselves or go with a managed solution? I think it really has to do with the culture and the experience of the company. Really what we're seeing is some of the smaller organizations that you have smaller teams that wear multiple hats, they just cannot stay abreast of the latest threats and DDoS as I mentioned before, these things are getting more and more complex. So I think they're coming to the conclusion that all right, this is something that I can't do by myself anyway, for the large attacks, I need a cloud-based service prior of some sort. I need someone to help me there anyway. So why don't they just handle the whole thing? Why don't they just handle the on-premise component and the cloud-based component of this and make sure that it's running as efficiently as possible? But even when that's said, it's not just the small orgs, we're seeing larger orgs do it too, just to push things off their plates. Let's leave DDoS to the experts again because I can't do it by myself anyway. All right. Tom, I saw a video, I think it was you that did actually talking about how Arbor Edge Defense is the first and last defense when it comes to DDoS. Explain that to a little bit to our audience. Yeah, so our tagline for the product is first and last line of defense. The first line is what we've been talking about all along here is the ability to stop the inbound DDoS attacks. Now, it also acts as a last line defense too. So as we were alluding to before, all you hear during this time of the pandemic is watch out for COVID-19 related ransomware and things like that, right? Because the Arbor Edge Defense sits just inside the router and outside that firewall, it is literally the last component in that cybersecurity chain before the, let's look from the outbound perspective, packets leaving the enterprise and going out to the internet. It is the last piece of product in that security chain, right? Before it leaves the internet. The Arbor Edge Defense has the ability to consume threat intelligence, not only from our own Atlas system, which we spoke about earlier, but third parties too. Via sticks and taxi, it has the ability to consume threat intelligence. And there, sitting on that last piece of, you know, the security pipe, if you will, or chain, it has the ability to intercept indicators of compromise that have come from internal compromised devices that have made it through the entire security chain, go reach outside the firewall. Now it's one last line of defense, if you will, that has the ability to recognize and stop that internal indicator of compromise. And this is going to help stop the proliferation of malware and ultimately avoid that data breach that everyone is fearful of. So it has a dual role. It could protect you from inbound DDoS attacks and it also can have as his last line of defense stopping the proliferation of this malware we're talking about. Great, Tom, that actually refers, I was curious about what other things your device did and there's the intelligence baked into there to have kind of a multi-purpose when you're in that environment. All right, Tom, I want to give you the last word here. Companies today, they often need to react very fast to be able to deal with the changing dynamics of their business, spinning up resources, everybody working from home and the like. So what final advice do you have for them and give us the final word? Yeah, during this time, precedent times, we all unfortunately still have to remain very vigilant when it comes to protecting our organization from cyber attacks. One of the areas that seems to get overlooked is DDoS protection, right? Everyone is focused on malware and things like that but don't overlook DDoS attacks. These things are happening on a daily basis as I showed you over almost five million so far this year. It is an absolute part of maintaining the availability of your organization, it's part of the security triad as we know and it's really there to disrupt your business continuity if you are getting hit. So don't overlook your and don't underestimate your DDoS protection. All right, well, Tom Binkowski, thank you so much for the updates and appreciate everything you shared. You're welcome. All right, be sure to check out thecube.net for lots more coverage from theCUBE. I'm Stu Miniman, thanks for watching.


So Marvel and Netflix have released their teaser trailer for Daredevil. This should be amusing. Yeah, Magna Sights. Let's check this out. So I went to the Marvel YouTube channel to download this and check it out and it says that the full length trailer is going to be released tomorrow. So you know I'm going to be on it. Don't do it at 12 AM, Marvel, because I'm up then. OK, don't do it at midnight because it's tomorrow then. I will be hollering and going crazy at 12 midnight. And all my apartment neighbors will be woken up. So wait till 12 PM. OK, anyway. Let's see what this teaser does. Let's make some Marvel. Make my city a better place. Didn't mean that wasn't a tease. That wasn't a tease. That was less than a tease.  That was a, it was a crumb. It was a tiny, tiny morsel. All right, let me see that again. Let me see what I can gather. Make my city a better place. I do like the look though. It looks like he's got something tied around his head, almost like a bandana-type pirate ninja turtle. Yeah, so hey, we'll see what it is. I really have nothing to say because it wasn't enough of a teaser for me to really gather anything from it. Looks like he's about to save some people. It looks like he is walking through an apartment building and he's trying to make his city safer. And he is using his extra senses, well, his extraordinary, augmented senses to find where the danger is. He opens the door.  And then they cut it. So that is the teaser. Marvel, tomorrow I will have bells on, waiting to react to the new trailer. One million subscribers. Press the like button. Boo.