Hello my friend and friend CSS battles are a whole heck of a lot of fun and this one right here is number 22 Which I haven't done yet and actually it looks pretty good overall With nothing too difficult some nice little tricks. I think we can learn along the way with this I think it's a really good one for that type of stuff except for the first challenge Which I honestly looking at it now have no idea how to do so There's probably something simple that I'm just blanking out on when I look at it But it just means we're going to start with this one. We'll work our way through Again, I try and do these based on speed rather than anything else So I'll time myself as I go through each one of them. I'll give you my final time at the end So if you want to compete against me you can try and challenge yourself and with that we can dive into the first one So we're going to click there. I'm going to get my timer ready. We're going to click start on that I'll move it off screen and we'll get started on this So we want to get that I think we can do that with two dibs. So let's just do div class equals. Oh, no, I'm in the wrong spot already Class is going to be equal to a and we'll have another one. That's a div class b We don't have emit which is always fun when you're trying to go fast on these I don't go for high scores. I go for 100 matches just in case it's the first time you're watching Um, so on here, let's do body is going to be A display of flex. I use flex instead of grid. Um, just because align items Center justify sorry content center. Um, it tends to glitch out. I find the 99.9 scores come up a lot when you're using grid So let's try that one. Of course, we need this background color here. So let's add that fast background will be that perfect So then we have the a and the b. So I think for both of those we can style a lot of it the same Uh, and then just background will be This color let's give it a height Of like 150 pixels and a width of 50 pixels to start with That actually does not look terrible.  So maybe this is like a 170 Uh, you know what? I don't use the diff enough Diff is our friend with these. Um, that looks pretty close to the actual height and then the width I think 50s anyway, okay Um, actually we had display flex there. So they're already next to one another Hmm, I uh, okay. Anyway 75 I am I always mix up which one is mine 80 That looks pretty good. Um, and then I think what we can do is a border radius And I want top left is going to be 50% No, let's do 100 vw. No Uh 100 pixels Wait, uh zero Ah 100 zero I think is right on Um, I'm only looking at the first half So I'm only looking at up to there and then the bottom is going to be like a 50 pixels And then the zero there. So just like that. Perfect. So I can turn that off So the shape of it is bang on. I just want to flip the second one over So then we can do my b and that one has a transform Rotate x 180 No degrees Rotate y I always get the rotations mixed up. There we go hit submit Yeah 100 match in two minutes and 52 seconds ish not too bad. I think that one went really well Nice and not too bad a nice little exploration of border radius is to get it to work and then just two shapes Yeah fun and this type of shape on the bottom is something you see people trying to do sometimes so You know an idea sort of and I guess how we can do stuff like that. Cool Let's go on to 135 here and I might try and zoom in A bit more to make the code bigger. Um, sometimes that causes some issues But we'll we'll try with that one So three two one go timer is on And we're ready to rock and roll. So let's give the body Body, you know, I should have done is copied and pasted Body display everything with centered on these display flex Align align items items center Justify content center and for this I might actually do something a little bit cheeky that I didn't think of before Uh, we're gonna have div We're gonna have four four divs. I guess Maybe do it with two but four divs will do. Um, the background color on the body will be this Background, I won't do any copying and pasting at the beginning because I am I said I would challenge you guys a little bit If you want to match my times Uh, we might want pseudo elements I think we need two things. We need this as a shape and then a triangle coming off the side as a shape That's sort of how I see this happening um So I'm gonna do width 100 pixels No, let's do width 50 pixels and height 50 pixels just for now. Uh, and then here I'm actually gonna do a So we have the display flex Um, let's do a gap of like whoops gap of 25 pixels and see what happens Uh, I'm looking mostly for the space in the middle. Let's put that dip back on the space in the middle actually looks pretty good Maybe it's off by a little bit. Maybe it's 20 Uh, we can fine tune that. No, that looks better already. I don't know if this is the best We're gonna try it. Uh, let's give this a width 100 200 if I do 200 pixels And then a flex wrap Wrap wrap wrap Um, so let's just make this like 150 Uh, and then the align content whoops Align content of center And then that's the rare aligned content that you need when you use flex wrap And then let's do a margin of auto to center it Uh, I wasn't sure if that would work, but Those are sort of in the right place. So the heights are definitely way too big. So let's try a height of 70 Uh 50 We have a center center height Oh my goodness, I have a width and a height twice Uh 30, ah, that's like why are things not updating 30? So that's probably 40 Perfect and then this 40 30 wait I'm so confused now. Oh because it's wrapping, uh width 100 Okay, there we go. Oh boom exact. I think that's exactly what I wanted.  Is it because That's not right though 40 Hmm, that's annoying. I'm only looking at the ones on the left because the other ones as we saw I can rotate it Oh wait So if I made I think instead of doing this if my width is 30 I think these then I can actually do is like 40 pixels 40 pixels, but I'm not sure Ha I can there we go. Okay. So that worked and then we're going to do a div after Which is content is nothing. This is not the best way to get a high score Probably not the best way to go the fastest either, but whatever Uh content is going to be that background is going to be oh, no, we're not going to use backgrounds. Um We can use a border so position absolute I might have mucked things. Anyway position relative Um, I always the only time I ever do triangle borders is when I'm working on this right here These challenges. So I always forget how to do them. So it's like border Let's just do 40 pixels solid And then Up zero left zero make this 20 Solid and then let's see what we have right now one second Uh, oh actually left would be 100% the right would be 100% Right 100% Right Yep, okay, and then it's Order color Transparent Black Transparent Trans Parent not the shape I wanted um, so we want Black should go on the top, but that's not gonna work Oh, yeah, okay, it will uh the top was Is it the first one? Okay, we can do that but then Height is 200% Oh, wait, maybe if I just do the border at 40, aha No, it's still not gonna work. Oh, no Oh, wait, we can keep it. No Oh Because it does the triangle like that. It's not making the right shape of triangle. Um, is there a way With maybe maybe maybe with 100% That does that though Which isn't what we want That's not good Uh-oh, uh-oh. I'm stuck It doesn't help that I'm doing Okay, one second, um Class is equal to a just so I can only have one for now. Uh dot a Okay, that's what we have Maybe wait, maybe I mucked up there take the width off. No, I didn't because my Even if I did like a transform scale to I move it down and over then it's going to be sticking out that side What I could do is do that as a parent Okay, what if I'm going to delete these three for now we're going to do one div class Equals a I don't really need then here we're going to do a uh Div class equals Uh, a b c d It's just Uh, whatever t is fine for now close div Um, so this will go on my dot t And then Oh, no Yeah T and then this would be my t after top Zero Okay, take the transform off Borders 40 Right is 50 Left is 50 and then on t I do Overflow hidden Oh, no, not t. Whoops on this one on a dot a Dot a Overflow hidden Ah, but still it's sticking up the top there. Ah, I was hoping I could do that with one and now I'm just trying to think can okay What we're going to do instead of that Is let's turn this one off for a second. I'm going to still going to use that same triangle but The width is going to be 100 50 It's in the wrong spot. So it's not helping me Let's just try this. I'm going to do that And then we're going to use this I think this is the right idea Comment that back in this um 40 pixels 50 30 20 No, no, no, I have the wrong one now.  No. Oh, yeah. Uh, so Top will be negative 40 pixels. Uh-huh. Uh-huh Transparent black We can do that and then oh look, I have the right shape now. I could have done maybe I could have rotated around But whatever we got this There we go. Now. I just need to move that over more And then we'll have to tweak that a little bit. Okay. That's that's one idea now Now that I got that shape, maybe I could have actually pulled it off in a different way So we have t Okay, a There there there The width here can go to 200 300 oh, they're covering each other immediately z indexes and stuff uh a B a c ad just to make them easy to select Let's go with D and D Transform Rotate y negative 180 degrees Sorry, my dog's barking in the background. Um No c and d is the wrong ones. I want the uh, uh-huh. Okay, and then dot d Transform. Oh, I might have to do these separate rotate Let's just do a rotate of 180 degrees 180 degrees Can I do that? No rotate whatever x 180 and Rotate y 180 I'm not winning any time challenges with so there we go. Um Difference So the big difference with them really is the width maybe now goes up to 80 70 That looks pretty good Cool, and then I just need that's a b b d dot c as a transform Rotate x of 180 degrees Not what not my original plan of action And usually there were 99.9. I always count as a win 13 minutes and seven seconds So I usually try and do them in under 10 minutes We're averaging that because I still did pretty good on that first one um All right alien. I is next right? This is 135. It is so we're on to alien. I we're gonna try and keep the pace going fast on this one reset and let's hit start and get started on it. So here We have a body That keeps changing my cursor at the beginning background is going to be that I think this is just Class is equal to a inside there. We can have a div class is equal to b Close div Uh inside that one. I guess we'll have a c and then a d Yeah, I guess so You know what we're gonna do it this way div class is equal to c I guess copying and pasting would be a little faster here Uh faced and a d there we go So the background that so let's grab our first one, which is we have a and c actually both have the same style so we're gonna say Um, I'm gonna it looks centered again. So display Lex align Items center Uh justify content center We don't need the height just because it's the way it works in css battles. Um So then my a is going to be a background of This and then a height of 200 pixels and an aspect aspect Ratio of one and a border radius of 100 bw. It doesn't really matter. Uh, it's too big So 180 Right 180 is 180 is good Turn off diff No, what whoa, uh, there we go. But that was the right size. Okay. Perfect. I'm also going to do a position of relative Because I'm gonna use absolute positioning for all the other ones. So b C and d we'll get a position Of absolute Uh, and now we'll see one of remember I mentioned we're gonna have a fun trick So let's do would be is this background color Background is going to be that Um height will be 100 pixels. Let's just say Uh aspect, you know what we could do is the aspect ratio is on all of them because they're all circles So let's just put that on this And the border radius is the same. They're all circles. So they get that perfect. Um, it's probably a little bit bigger And I think that's just do a margin of auto An inset of zero Uh, we'll get it right in the middle And the nice thing with that. So this maybe is like 150. No is So the inset is zero top So on this side, let's just say auto The bottom will be zero and then on the other side we can just do like 30 pixels Right 40 pixels Not a bad trick, right? It's a little bit too small mine small or bigger So maybe 150 was good and then I have to change this now So actually I'm just sort of like measuring the distance from the side Mines too big now 140 Uh 20 pixels Oh, no, I'm not. Um, I sort of zero I should do I should do Instead of auto on this side, which basically puts it at zero I should do it the other way around I should say auto here because it's going to make it easier auto auto And then I just measure this distance this way. So like 30 pixels. No, let's do 40 pixels over What? Oh, that's the right side. Okay. Yes. This is the right side. That would be the left side I'm so backwards This does make more sense. I had it right the first time. Okay 30 My circle There we go. Boom. Okay, perfect. So now let's do Let's see now that my brain I'm still not perfect for this but background is that we can do a height of Uh, the other one let's try 100 this time The inset inset of zero and a margin of auto Which might boom. It's perfect. And then that last color is back to this one, which is my d Which is my background The height can be like 50 pixels inset of zero margin margin of auto the easiest way to do centering with position absolute Is what I'm doing now 60 And then so we said margin auto Zero on the left auto on the top. So it's centered that way. And then how far do we want it that way? 60 let's just do 100 Bx I'm on that side 80 70 Looks good hit cement Come on. Give me a score Give me a score. That was five minutes 27 in case it never it seems to be hang. Oh, oh 100% Okay, the 530 let's say but we got there awesome Um, but yeah, I really like centering stuff using inset of zero giving it the size you need with positioning This only works if you have positioning or if you're in grid or flex, maybe Um, and then auto will center it but then you just muck around with sort of the positioning after that Uh, not lots of really good use cases for that but for CSS battles, it works well elbow, let us go Uh, we'll bring this over reset start and we're going and I know people tell me I talk fast already in my tutorial So I do apologize because this one i'm probably talking A little faster than normal because i'm in a rush You can always slow the video down if you need to but this is for fun, right? Um So div We're just gonna Redips I'm gonna do div div class like a I'm giving them classes because i'm used to we could go a bit faster but div Class is equal to b and actually let's do a a And then this one will be a b and this will whoops my keyboard c Oh my goodness, there we go All right, so we have that and then this one. Let's just give it class is equal main box whatever So the body will get that we already have that this one my dot box will be Position we'll just use absolute here Um, let's give it a width Oh, you know what my background will actually be this I was thinking of something else But let's give it the background of this color Width will be 80 percent. Whoops width 80 percent height 80 percent In pop Uh 100 pixels. I don't know. Why do I not see anything? Do I need the position absolute on there dot box I call that box Background width height margin. Oh, I put the wrong color um margin left of auto works at least and then this could be like Uh 50 Oh there My dog's barking again. I apologize. Uh the width will be 90 88 the problem with I'm so used to using There we go. Um, I'm so used to using percentages and stuff and not like fixed values border radius will be 100 pixels 000 um Is that right diff? Did I get the border radius? Okay. Look at that. Nice. Um, so then we're just going to use my a Dot a has a background Oh, no, wait, wait, wait. This is going to be Sorry, just to make my life easier border Is going to be this Okay, wait, this my background has the same background color But the border will be this and let's just say it's 50 pixels solid that color Um, which box sizing order box There we go. Um, perfect. So then my background on this one Is the other two boxes that I did so they're going to get that And they'll get a position of absolute And for now just so we can see them actually let's just make this pink Then we had be Absolute then we had my be which is going to get I like how Grammarly works in here. Um width of 100 pixels it doesn't matter too much height of 50 pixels It needs a dot in front of it to work. It's all the way down there. So let's just do top Is negative 100 pixels. Oh, no bottom Bottom negative 100 pixels 100 pixels 50 pixels 20 pixels zero zero Oh, no, my border thing is going to muck it up. Okay. So here my box sizing border box.  Oh, you know what I can do calc Is this going to work minus 50 pixels? E 9 No, why is that now working? Oh wait space space. Ha ha I did sort of work Oh, but now we're back to where we started Well, my height I can make bigger though. No Let's just make the height The height doesn't matter. Okay. We're good. We're good Then b gets a width of a thousand Now we give it okay, we'll leave it like that for a moment Then we'll do c and then we'll change the background c It's a width of 50 pixels height of a thousand pixels And a right of zero just for now Isn't it c c A gets that position width height. Oh, whoops right zero pop zero Ha width 70 60 55 Oh man here the width needs to be a little bigger, uh 90 100 Oh, but it's going the wrong way now. Oh no, uh undo undo that side's okay. Ah I need that much more because I think my yeah, it needs to be a bit longer Margin left Well, we'll just give it an actual margin left 100 pixels Uh 40 pixels 30 40 Okay, whatever this can now just be like a thousand then This gets the 50 again, and now I just have to fix my width width Uh, not my width my margin left It's like 38 40 45 something's off Is my think why is my the lines aren't the same? Are they different that's Oh, there we go 42. Okay. I was so worried there. Okay. Um This one There we go cement that took longer than it should have that should have been really easy Seven minutes though not too bad Little interruption here because my files got corrupted during the recording. Luckily I got interrupted by the phones It was only like a little four minute section of the next challenge and this next challenge is a complete disaster anyway I realized like one or two challenges later that there was actually a really easy solution to this but on this one You don't want to see what I started with for the first four minutes or whatever it was because it was a complete mess But we're starting off from here where I've done a bit of stuff that was all in the wrong direction So you didn't miss much there and anyway, you'll see it's not pretty But yeah, I hope you're enjoying this and let's let's see How bad I did at this one. Sorry about that. You know, it's important when it breaks through my do not disturb So, yeah, we're gonna hit start and as I was on the phone. I actually thought of something so a little bit of cheating there Uh, that if this doesn't work, which I'm starting to think it won't Um, I think there's a way to choose rotate x or y, but I forget what it is I'm just gonna do my transform of uh rotate x 180 degrees I wanted y that's fine There we go. Um, because that's not gonna give me a point Well, let's try this anyway. Uh, we're gonna If it doesn't work, I have sort of another idea, which is fine Uh, c d actually that okay, whatever. Uh, did I copy that? Oh, I copied the whole thing D so d will get a transform x um And then anyone who knows how to make this shape is either going he has You're either shaking your head or we're gonna get there one or the other Uh, why that gives me a circle now the issue is these are 75 75 so if I make these like 35 what happens And this has to be updated Uh 70 So I'm still not getting Point which is a little bit what I was worried about I feel like I need to overflow actually now that I'm thinking about it. I feel like I almost need to do That What if I Something like that let's just make I mean there's no point If I have that type of shape 40 and then I do an overflow Hit it 50 The border radius is I need the height to be more to height is going to be like 150 And then this would have a height of like two pixels Uh 100 Right. Oh, this would be like See I don't think I need to deal with two halves Okay, but I have the flex if I did an align items center I thought that would fix it within my overflowed area um Because I sort of feel like that's what I need to do But if I'm doing that I don't need a whole bunch of dibs to do it Um Is there okay, so let's just see if this works. Let's turn off Don't need the flex don't need this don't need that And for now, I'll turn this off Border radius can just be I just need a circle We just make it big 250 by 250 let's say It might even have to be bigger I'm just think like I do that But then and then I have like a really small div And I'm doing half of that shape That's the only thing I can think of right now So let's get this centered. Um, so let's just see if I do position absolute inset zero And margin zero does that auto does that work here? It sort of does because that's based on this width and height. Um height Let's just keep this I'm not gonna get this one this one line Solid lime I'm coming up with a really bad class names now, but that's great div Class equals outer. We have out and outer those closed div Oh my goodness. This is a mess Okay, so that's going to be outer and this is going to be outer then Because we're gonna I'm going to put the both in that it's going to be a bit easier. I think so the width I think whatever width 100 Something like that, right and then the height like that display flex bear with me for this out we'll get a flex basis probably 50 percent Uh outline two pixels solid red just so I can see if this is doing what I think it would do It's not at all outer out Overflow hidden. Oh my red. Okay. Let's turn off the lime for now Yes, okay that's Sort of the red idea now This isn't gonna work either. Is it we'll see um position absolute Oh that pulls. Oh, what if I Position relative Position absolute. Okay. Good. And then top 50 percent transform translate x uh y negative 50 percent Does this make sense what I'm doing? So I had a bit of an interruption and I had to stop and my lighting is a little different now because It's now evening time instead of daytime, but I can see I still have my timer here ready to go So, um, it's taking me a while to do this one I sort of forgot where I'm at But we're gonna hit start and see where we can get to uh with this one because I want to get it done. Um I think there's probably a better way to do this, but um if I remember I'm sort of dealing with that overflow.  Yes No, what's my white one? Oh, it is I thought that was commented out. Okay, so I'm gonna take this off I'm going to put an aspect ratio of One just because that's gonna make my life a bit easier as I play with this number. Ah, see where we're sort of Oh my goodness. That's not bad. So I still think there's probably a better way to do this to be honest But that looks decent So that's this So I don't need to be on there. So if I do a And then look at that. I took a long break and we come back and it's just Hours later and things just start flowing. Um So this is gonna be a comma b because we want both of them like that but Just like oh, this should be a dot here, right? Um But just like before the dot b will get a rotate. I think I can just do 180 degrees on this one Oh, no, no, no, that's not gonna work because you have the overflow hidden. We can delete that completely Am I on the right track? Grammarly doesn't like my rotate. Um rotate Okay, wait undo undo a b where's my overflow hidden? On out So this is gonna be yeah, we'll take that off then out Uh x And then we'll just make another one of those And this one will be y I guess the first one doesn't actually need anything and then this can be my y Ha ha it so it's not perfect because if we look at the top, um, there's like They don't come to a point Those might overflow height Now it looks too small I think it's a little it's slightly slightly slightly off. Uh Did that even change anything? That's making it worse I think 200 Let's see. Okay. Let's just try and finish it and I think we're just gonna Consider this one what it is Um, so that's that Okay, so let's just take this we'll do That's my odor. This is gonna be my odor Uh, let's just go Here q That one doesn't really need to have a class on it. Then we're gonna have This one and that one So i'm just doing q w. Whoops. That's a two w and e because i'm using qwerty Uh I'm so annoyed with this one. Um Oh, do I have too many now q. Oh no q w and e so w star And get this background color. Let's just say background Is that which might muck everything up because I don't want everything actually I want all the A's that are inside of there And then let's also rotate 20 degrees the whole thing Oh, no, just the w can get rotated, right? Such a mess, uh rotate 20 degrees Ah, there we go, uh Rotate rotate transform origin, which I'm pretty sure works the rotate property will be center bottom And is it like 45? Yep, um, so we can just copy that The next one was my e and then this one has a negative 45 Uh and W here we can do a comma and say e a Oh, look at that. They're not even really touching There's like the little separation in between because of the rotations. Um, and then The easy Yeah on q at this point. Well, look at that. That was cool, right? You um z index of 10 I don't know what this is going to give me I didn't even submit. There we go 99.8 We're going to take it. Uh, is there a I'd love to know if you know a better way to do this than what I did Um, if you leave a comment down below and let me know I feel like there's a better way to do this But I'm not sure what it is overflows work with the two circles I don't I thought there'd be a much better way to do it. Maybe I'm wrong. Um, it's not coming to me anymore So let's just move on. That was the lotus the lamp The lamp, okay, the lamp looks super easy I said that the last one Right, so delete body is going to be background That It's going to have we have the shade. So we have a div. Um, so let's just do Shade I have to give class equals shade And close that one and then we'll have a div class equals full I don't know what the right word is for that right now So let's do the dot shade position Absolute because it's just going to be easier. Let's say inset of zero, uh, zero again margin auto for now we'll change that um Background Will be that is the easiest thing to do. Let's just say width 100 pixels Right 100 pixels. So we see something Okay, so is the easiest thing here to do to no Here we Clip path ab absolute The easiest thing I think is going to be um I think the easiest thing is going to be To do a clip path So that looks pretty good. Um, there's probably another way to do this, but I'm going to say clip path Let's see if I can remember how to do one. Is it clip half like this? Poly gone 10 pixels 10 pixels 10 pixels I don't remember how to do the path circle Circle works isn't it polygon? And then you just say like 10 pixels zero 10 pixels Zero 10 pixels. Why is that not working? Am I going to have to look up how to do I am? Uh clip path css Um, I'm not going to do the shape. I just get reminded on It is I don't have to do the path polygon. Why is it not working? At least I'm not crazy Okay, just for fun What did I do differently? Oh, you have to give two two coordinates. Ah, okay So the first one we want to do is it zero 10 pixels and let's just do zero 10 pixels Zero 10 pixels 10 pixels 10 pixels It's gone. Oh, yeah, that would that make sense. Um See this would be faster. Remember I want to go over stay at the top to go over So I think it's gonna be a zero and let's just do 25 pixels The next one will be 075 pixels and then let's just do Down all the way a hundred percent 100 percent and then a 100 zero Sort of So this one should actually be 25 And then the next one here should be a zero that looks better So that's there the next one here I shouldn't need What's happening with my second one the third one is at the bottom there, which is fine and then Why I thought it was there there there there, but I have a feeling something's not working right here And it should go in that order Am I going down instead? so 100 percent 100 percent over No, I'm trying to think we want to go that way I'm so confused Okay, let's just move this one. I want to see that's going across that way. Yeah, so that's This is this way and then up and down. So the second point should be I'm just gonna do 100 zero Exactly. So then the 100 instead of 100 I should be able to do like 200 pixels Oh my goodness Really? This is such a disaster You're gone. You're gone It won't be perfect It's using percentages Basically the right shape with 256 We'll go with that I don't know whatever I'm tired now Well, I'm not looking forward to that last challenge anymore with position absolute with 10 pixels height 200 pixels top 50 percent Left Well, just do calc 50 percent minus 10 pixels Position absolute and it should be this color background of that It's off by a little bit. Um Oh, this should be minus five. Maybe there we go and then we can just set index that down set index negative one and submit 100% match in six minutes 30 seconds Uh around that something like that. There we go Uh, I just want to know why so if I did this I had that at 25 pixels originally and then I had Was I doing it backwards here 75 pixels? So yeah, I thought I had I thought I had basically that I think this one I mucked up though And I was just so confused but maybe I was putting these backwards and I just wasn't seeing it for some reason Because I think if those were backwards And I put the zero here It might have been something like that I clearly did something wrong because it's working now. Uh, so Yeah, two points. I thought I knew how to do clip paths, but obviously I don't Okay Eclipse This one too should actually this one. I'm pretty confident in so let's hit reset. Let's hit start Let's give the this is our this triangle at the bottom, but I think this triangle at the bottom is easier. So, uh, we'll start with the body Background which I'm actually remembering to type Then let's do so this will be my class equals hill So dot hill Is going to get a border of 80 percent can I do that 80 percent? solid Red No But 10 pixels solid red. Okay, that's there Um, oh right. No. Yeah, okay. Let's just do that and then border Or this this is the easy way. I did it the hard way before Transparent transparent you do the all the sides transparent and then you say like border left. All right. This should be border bottom color This would be instead of using the shorthand like I used before this would have been an easier way to do it um, so the border Like can you not do percentages for your border 50 percent? Uh 300 pixels 200 pixels Something's going on. Um think 100 pixels okay I don't Not quite sure but sure uh transparent And then can I do this? um position absolute bottom zero Cool, uh, so bottom will be 20 pixels negative And then we just put my diff on. Oh, we're a little bit off for some reason. That's okay. We can do that negative 30 negative 40 45 Maybe 40 was okay. Uh, and then let's just say left of zero 39 38 ha ha there we go nailed that one. So that's actually perfect and then we want my moon. So let's do dot moon Without emit a div class equals moon Lowes div Okay, so that's gonna be there and then I'll just put yeah Yeah, that should be fine. So moon is gonna be that Moon okay, so my idea for this one at least work Back give a bit of confidence before we get to the the actual challenging one Uh width will be like 100 pixels probably a bit bigger 150 aspect Ratio with this you don't actually have to write how many pixels it's going to be. I said bigger it's smaller Um, so you can actually do like 75 and it still works. That's just for css battles border radius 50 Um position absolute this inset zero thing on here and not having inset zero And margin auto is so great auto Uh, because then now I can just do zero Um margin can be auto on the left and the right and then the top will be 200 pixels and Auto Though the shape's a little bit wrong, but that's okay. The top's actually bang on So the aspect ratio is not Not actually one. So let's give this the width is 75. Actually that means the width should be like 85 No 75 80 which one's mine? I don't know if mine's too Oh, there we go. Hang on. It was the right size. Okay. So that's good. Now. We just need to bring that in and Again, we're not after a high score. So we can use a pseudo element uh after And then this is going to have the content we need so content can be that background color can be that Width will be let's just say inherit for now Um high uh aspect ratio might be a little different, but we'll find out content and position position absolute and this time we're just going to say top is like 70 percent border radius Herit Um, so 50 percent 50 percent is perfect and that just means here we can z index that back one and hit submit 100 match 524 awesome. That's about on par. I think with the first one. So That's great. That one. I'm happy with that one. Well, just as planned Nothing tricky on that one. That's basically why and that leaves us with this one Which is difficult I think I'm honestly Um a bit trepidatious to start this one, but there goes the timer And we'll start with the easy one which is my body because I know what to do on there where I'm going to say the background is this color um Now I'm losing my voice. Oh my goodness. We're going to pause for a second. I don't have any water with me All right. All right. I'm okay. I survived that one. Um, here we go I usually have water when I record and I don't bring any with me now. Um, so how can we do this? Here I need a circle 100 so let's start with that and let's just call that dot So div class equals dot Close div. I think that's the only way to do these types of things where it's like the rounded caps Um and because uh dot that's sort of the start of our whole thing. We'll just start with that so the width on that's like 20 pixels 10 pixels. I don't I'm zoomed into I think that makes it harder Um to dodge the widths on things. Maybe that's why I'll say that's what it is Um background that aspect ratio would be one Uh, so it was probably 20 because yeah, that looks better border radius 100 And we'll just position that absolute position absolute In set zero Is it right in the middle margin auto? No, of course not Uh, mine's there. We need to move it to the left. So auto top and bottom might be okay But you know what let's just do this the old fashion way top of 200 pixels Too much 125 pixels. It won't be enough. Let's say 150 Right, uh left 150 pixels. So we're getting close. This is sort of the the classic way to do it, right? We're just sort of magic numbering it And top 140 there we go. So that gives me the beginning and it looks bang on Um, now I need something that can come off of that So the only way I can think of doing something like this is if there's a border on it, right? Because we need it to turn Um, now what I don't know Is how we connected How do we connect it when we're doing okay, wait, I'm gonna try um, so let's do div class is equal to spiral a Close div so before on that one that I completely failed at that had the white Things that is the white middle of the dark. I said that would be easy um, but we sort of had to make or I tried making half circles And it didn't work, but what if we so spiral so let's do spy spot spiral Um it's got so Okay, let's just say width is like 100 pixels aspect ratio of one This is a bit much because it's the wrong spiral wall. I don't want this on all of them, but anyway Aspect ratio of one and then we're gonna have a border What was the size I used 20 pixels so it'd be 20 pixels solid this color I don't know. I have that so why do I not see anything yet spiral So I didn't spell it right spiral Spiral, huh, there we go. Um, and then that has a border Radius And so we did 50 and then I did zero Is that the shape I needed last time and I could have just done that? Oh my god Okay That would have worked I think and then just play with the width I'm so bad. Okay. How is this gonna help me? I'm not sure There That doesn't help me though. It doesn't it's way too big So I do 70 it looks huge Okay, let's just How does that help me? It's giving me half a circle, but we have that So let's do spiral Uh Can I do this? Okay. I was what I was going to do is put like a circle Like a circle here and that wouldn't work because then this would stick out too long But what if I just cover that part of it, right? So if we do, um This might make it easier in the long run spiral after Content, I'm going to take this background color background Width will be a hundred percent height will be 20 pixels Position will be absolute And my spiral itself will also have a position of absolute. So I'll put that now I'm so mad that shape. I could have done it so much easier. I could have been done that in like three minutes Um, I don't see this coming up anywhere. Let's just try red width height position Left Of 10 pixels. Where is this? Content is okay background red width height Position absolute. I want position. Yes That's okay spiral Gotta spell things right Kevin Um, that's actually I don't want with that. I want to do we'll do calc of width width of 20 px times 20 px times 2 plus 100 percent Um, of course, you could just change your box sizing left will be negative 20 pixels and then the bottom will be zero negative 20 pixels And then the color will be that Does that work? Does that work? Does that work? Uh, left 100 px, uh, wait, what was the left I did on this one 160 160 px top 100 px 80 then Z index negative one Uh, so top 100 might have been uh 100 Uh 110 105 Does that work? It's like skewed a little bit, right? Can I okay rotate 10 degrees 20 degrees Sure, I guess I hate these artifacts that come up to rotate if I do a transform. It's probably the same right transform rotate Yeah, those artifact things are still there I don't well actually okay, we could fix that uh 22 And then this would be a left of negative 21 The bottom so the height would be 22 And the bottom would be We'll see if that can work. Um, just to hide those artifacts. We just made the whole thing like one pixel bigger um 20 degrees so then my top This is gonna be so annoying. Does that work? I'm still off though I find like there's this isn't right at all Is this really the right solution? You know what my shape You know what let's take this off What i'm thinking maybe Let's get this was it 110 And 160 was it there no it does drop I'm just gonna do a width and a height This is gonna be easier So the height is too much now. So let's do 20 this is gonna be so annoying Instead of a top I should be using a bottom Because then if i'm changing the height If i'm changing the height of it like here if I make the height 40 It's growing up or if I make the height 10 it's like so it's always sort of like Starting from the same place. So I don't have to like change the height then move it back down. That's it Okay, I'm glad I didn't keep rotating it. That it's so funny that that's actually lining up Okay, awesome So the spiral after is going to be a lifesaver because or you know what? Width So this is my width and height are going to change for each section That the rest of these things are the border. No everything out of the top. Look, okay So we're gonna have a spiral then we're gonna have my dot spiral dot a right and then the b the c to the d So the width that we can take off Because they're gonna go on this one. We're gonna go this slower on this. This is gonna come on here But yeah, we're gonna take that and those can come on here specifically because that's specific to that one Then we're gonna change this to Or I know what we're gonna do here. We're gonna say The width is bar w and the height is bar h Because this is gonna make my life so much easier than this is going to be width And this is going to be height And i'm wondering if I should do the same. I don't think I need to do the same to the top and the bottom The reason i'm going to do that Is here this is going to be my bar w And I don't know if I need it, but we're gonna do it anyway bar w and we'll do it Plus two No, wasn't this 22 pixels Oh, that was my h. Huh, okay h Look at that. We needed the pixel the unit had to come in there. Okay Super so the reason I wanted to do that is because now if I do my spiral b And we'll do b I guess I don't need spiral every time But whatever spiral So the spiral is important and the letter will be important because now we have a b and then the b Is going to have let's do a rotate of 180 degrees because it needs to be upside down Then we can have a width and this time we'll try 80 And we'll do a height of 40 I'm assuming it's going to sort of follow that pattern um, then we can say the left is 80 We have it and then the bottom this so we'll do like one Let's try 90 now. It's covering the other one so z index minus two So i'm not lined up at all but left 50 no 120 30 125 And then the bottom 80 Uh, we have to go bigger. Uh, this is problematic. My after is not going to work. Well Oh wait, uh bar w H no, no, I don't want that at all Do I No, yeah, that one's like really badly positioned I thought I'd be able to come up with a system where I wouldn't have to muck around with those But it looks like I might have to change it But um, there will be that like that. Let's just do spiral spiral be after Bottom is The problem is it's flipped right now. So I'm having let's just turn that off for a second The bottom That's my height It's 80.  So what? Okay, so if we did this is var a calc Var oh var H times two times negative two Maybe that will work And I turned that one off. Oh, no H Times I have 80 or divided by two divided by two Maybe that will work. Uh, it mucked up my other one Okay, never mind. We're not we're not I thought I could get clever with this but the cleverness is not working Uh, so let's put the rotate back on um So I actually need it to be In front of that one now If I go behind How do I do that then? The only other thing I can do is what I had before with the overflows that I don't I just thought of something that could potentially work too That might be easier than this Okay, right. So we have that I need to have Because I I need to have that cut off And because I did it with a border Because I did it with a border That's the only way I can do that. I think I have to do it with borders though I can't Think of a way to do that with concentric circles That would work because then it wouldn't be covering the right parts of it So the um Again, I feel like there's a I'm missing something obvious here the other option is What did I put on spiral position absolute? If I can get okay, so let's try this instead spiral I'm gonna leave Be used like that Um, no, that's my dot. Anyway spiral Let's just put one second outline One pixel solid green line. Let's do that so I can see that I'm gonna take the border radius off of here Let's do that. Let's take all of this off Outline position width height so now For now actually the width and the height Let's just put my a there so I have it width 40 pixels height for 20 pixels Okay, we're gonna do that. Let's just take this off Bring this back up to here So that's there. So the size is wrong So I'm gonna do a width of 100 You know wait I had 40 50 60 I think I want and then this would be 40 because I'm just adding the border size that I originally had Okay, so there's what we're gonna do and then inside of spiral So Inside do I have that pseudo element still? Inside of here Let's do a box sizing border box Just to make my life a little easier border solid 20 pixels width 100 percent height 200 percent Uh position absolute So those work Maybe and this is position relative Whoops not that one This has position absolute on it already Thank you off This is why Width 100 percent height 200 percent and because I wanted to overflow border radius 100 percent 50 percent Oh, but then it's not a circle Oh, wait, wait, wait. That's okay. Uh, is it Is it okay? This we can delete because we're not using it Let's just try. Let's see if we can do this over over low hidden Right because then we get to that and then the bottom we can move it up Uh 150 the width can drop So are we there? Yes Awesome, so that is good and because that is good. I think now What we could actually do that was my first spiral now. We're going to do the spiral B Cool, and I think what we can do because it's a spiral B So let's just come here and do dot B. We don't need both. Uh, let's just try first rotate One 180 degrees scale you Oh, but the border. Oh, no That doesn't work Uh width Um, what was the original width 100?  So we had 80 40. So let's try 160 and 80 it doesn't look right, but then we can just do Um bottom Is now Not oh we need a semicolon there um, let's Let's go from our right if I do my right that's gonna work. No we have to do from left um The size is way off, but you're just gonna muck me up That looks okay the bottom There we go, but the width is wait Yeah, you were going all the way up to the wrong one Um, so my width maybe the height could maybe be 60 uh width 120 And then this 60 is the height always half Because if it is that's going to make life easier. Um, and then this apps to get Bigger and then this does that look better? I think it's still too big Well, maybe yeah, I think it's still too big width will be like 100 And then the height will be 50 if they're always two to one. I'll use an aspect ratio um There and then 100 This is so annoying Minus 20 that goes that way The width actually looks pretty good and then so if width is that so this goes to 60 Which would make this go to 80 90 Is that lining up? It is lining up sweet. So if they're always like that, um If I take this off, just just try and replace this with ass aspect Ratio, so then I don't have to muck around with those at least is two over one One over two It was two over two over one Width is 80 Oh, yeah, and then this one the width. Oh, I deleted it 120 There we go. Was it 120? Yeah. Okay. So then I only have to worry about that Cool. So then we need another one. Oh my god. I'm we got it. We cracked the code It's just a little bit tedious now.  It's taken me a long time to do this one. I apologize, but we cracked the code Oh, for anyone who stuck around with me, thank you Width, I guess would be like a 160 now 160 pixels and then left is going to be 80 pixels 100 pixels 120 Ah, look at that We only have one piece left two pieces left Amazing that came together all of a sudden That was a bit of a disaster, but it came together better than some of the other ones Width, uh 200 Rotate 180 degrees I can do 0.5 turn as well, uh bottom And you know a lot more than that 60 pixels I think that might be okay for the bottom, uh, and then the left is 100 pixels 80 pixels The height is off. No, not the height. The bottom 40 50 There's probably some math in there as well. Awesome. So we have a dot. So now we're gonna have a dot two Dot, uh dot said So z We can put what the other don't want we'll do dot z. So it's clear Um is basically another dot. The only difference is my top and my left will be different Right, so this would be Probably the same top. It's just the left actually would go to like 180 submit submit submit come on under half an hour Did I really take half an hour for that or did I forget to restart the clock when I started it? Oh my goodness We got there. That's awesome. Um, yeah, that took forever and I hope you enjoyed this. Uh, if you did enjoy it There is another video where I've done css battles or the playlist of the other css battles I've done including one where I battled against kyle and you can watch that right here That was a lot of fun to do with him and with that I'd really like to thank my enablers awesome Michael simon tim and johnny as well as all my other patrons for their monthly support And of course until next time don't forget to make your corner the internet just a little bit more awesome


This is gonna be great. You know what? No matter what guys, Tom is back on Tuesday and and so just you know Point your toes and think of handbags So let's see so now alpha geek radio should be hearing us. I am going to Immediately stop and start the audio record again and it's Darren you feeling ready? Yeah, I'm set. Let's do it. All right. Here we go stopping the record starting the record Out to play some music Oh wait, no, I need the line up in front of me. This is hard. How does Tom do this? It's muscle memory for him that muscle memory. All right, here we go. Tell me if you hear it This is the Daily Tech news show for Friday May 15 2015 Tom Merritt is out of office. So it is producers choice Friday I'm Jenny Josephson and Roger Chang and I are pressing the buttons and reading headlines today But mercifully we are not alone. It's right Jenny Our regular Friday team is also here today to make sure nothing goes horribly horribly off the rails We have Darren kitchen and of course the amazing Len Peralta. Yay That's right. You can blame it on us if everything goes awry. That's the whole point. That's what we're doing We're we're spreading the blame across four people instead of just two I can take a quarter of the blame. That's that's cool. I'm okay with that Excellent. All right. Well yesterday We accidentally made Justin and Andrew main read and react to about 35 headlines, which was hilarious So we're gonna try to make sure we stick to under 10 today But we're gonna start off with oh by the way, no music because I couldn't make it onto my sound board So we're gonna add that in post like we do TechCrunch reports that Google announced it will begin testing autonomous vehicles on public roads in Mountain View this summer The self-piloted vehicles will be limited to a maximum speed of 25 miles per hour And each will include a safety driver who can take over at any point. Hopefully they'll be paying attention Google said its fleet has logged nearly a million miles of cumulative driving within its test facilities Which Google says is equal to a 75 years of human driving experience We're gonna have much more on this to come in the discussion section But I want everybody to kick this off with one word about this Roger. What's your one word? I would like to have a self-driving car Darren swerve All right, well moving from cars to airlines United Airlines announced this week that it's launching a bug bounty program Inviting researchers to report bugs in its websites apps and online portals It's believed to be the first bounty program offered by an airline, but wide reports that United's program Specifically this is very important excludes bugs on on-board Wi-Fi Entertainment systems are avionics and United notes that quote any testing on aircraft or aircraft systems such as in-flight entertainment or in-flight Wi-Fi could result in criminal investigations Researchers who report vulnerabilities in the airline's websites or apps will be rewarded in mileage points So no real cash, but possibly a discounted flight to somewhere The awards range from 50,000 points for cross-site scripting bugs to 1 million For high severity vulnerabilities that could allow an attacker to conduct remote code execution on a united system This is cool And this is most likely in reaction to something that happened a few weeks ago We're united banned a security researcher by the name of press Roberts after he was tweeting about some of the insecurities of their In-flight Wi-Fi system specifically it being connected to their avionics systems, which isn't really cool The it's typical to see like in say a penetration test a scope of engagement where they'll say like This is what you can attack and this is what you can't which is cool that they're saying like hey, please don't hack the Wi-Fi stuff Maybe that's a little bit of them and like admitting it's vulnerable. I don't know but But the thing is like malicious actors bad actors don't see those sort of limitations So I would hope that maybe in a controlled environment. They would allow security researchers to actually hammer on those systems to make it better Now I'm still still amazed that they don't separate or at least firewall off the The passenger section what Wi-Fi from the stuff that actually needs the plane to work There's so many things that the will der me when it comes to aviation and security For example ABS B or T cast these are these surveillance broadcast systems that prevent planes from running into each other Totally unauthenticated unencrypted and the FAA knows it and they say like well, you know So security is hard security is hard But driving is easy according to the Wall Street Journal Activist investor Carl Icahn has invested a hundred million dollars in ride-sharing startup lift the money is an extension of a round of Funding lift announced in March that values the three-year-old company at two point five billion dollars in an interview Mr. Icahn said putting money into San Francisco based lift is a good deal when compared with larger rival Uber technologies Which is valued at forty one billion dollars Jonathan Christodoro one of Icahn's managing directors will be added to lift's board of directors Uber has expanded to more than two hundred and fifty cities internationally But to date lift operates in sixty five cities only in the United States. So Carl Icahn is bargain hunting Yes, and you know if anyone knows anything about Carl Icahn he drives a very hard bargain So I'm wondering at what point will the other investors on lift begin to get tired of him?  They didn't need the funding So could be a rare case where he actually does something positive All right, wait and see all right The next web has a story from the Financial Times Reporting that an executive at a European carrier confirmed that it and several of its peers are planning to start blocking Adverts this year and it will be available as an opt-in service However, they are closely considering applying the technology across their entire mobile networks According to the reports anonymous sources the carriers have installed software from Israeli ad blocking firm shine in their data centers to block Advertising and webpages and apps but not social networks the plan which would be devastating the companies relied on Advertising is not limited to a single European network and apparently It's an aim is to break Google's stranglehold on online advertising So it's it's very the thing is I'm not sure this will actually pass muster with you Regulators just because of the way it works But it does signal kind of the profound threat that Google has on a lot of Different markets and even even the EU which is a very large You know market to be in that you know all these you know existing advertisers or firms feel threatened that they need to band together and break its hold Well, you know, I look at this and I see that this on the technical side I think that the problem here is that we're still relying on really antiquated protocols like HTTP Which can be meddled with in transit. That's what enables this Israeli ad block system to even work Unfortunately, there's no ubiquitous way to actually verify the web page that you downloaded is actually the one that was served up The carriers can just as easily replace and remove ads as they could say replace headlines from CNN comm to make it say that kittens Have taken over the White House So I think what we really need here is actually a system that will ensure that what we're being served is actually what's being sent Which will not only satisfy advertisers because they know that hey If we bake it into the page it will be seen but it'll it'll help security and privacy advocates because it will help with censorship Yeah, it's it's one of those things where you know as we all know businesses take it's kind of like electricity They take the path of lease resistance anything that costs more money that they have to do even if it's in their better interest Generally kind of gets shuffled off to the side report on the back burner as they kind of concentrate on the now Well, the system always finds way and that's why I'm saying you know Just just hack together a better protocol where you can no longer do that and it's not a viable business and then we all win Yeah Is there something going on in the security world we should know about Darren? Yeah, Krebs on security. He's reporting on a cache of data apparently stolen from the spyware service M Spy which is currently stored on a Tor web server The data includes account information from some four million events including photos and calendar data corporate email threads and more M spy if you're not familiar with it M spy promotes itself as a way to monitor family members and boast over a million users Potentially even jealous lovers when surreptitiously installed on iOS or Android it will collect SMS messages Skype WhatsApp snapchat as well as all other keystrokes So it's spyware and they just got owned It's kind of actually ironic that the piece of software that's safe Potentially an overprotective parent would put on their child's phone is in fact the device that is undoing their child's security By allowing them to become doxxed It's it is definitely kind of a yeah canisters you're right But speaking of things that serve other people Oculus has revealed. It's a really bad segue Apologize Oculus is reversed revealed the recommended specification for PC rigs powering the Oculus rip headset according to tech crunch Now these are the specs that they recommend in an NVIDIA GTX 970 video card or AMD 290 equivalent or greater and then till I 545 90 equivalent or greater and 8 gigs of RAM now That's the recommended they also have a required which is essentially the minimum spec You need Windows 7 service pack one or newer to USB through point oh point 3.0 ports and an HDMI 1.3 video output supporting 297 megahertz clock via direct output architecture now on their blog post the Oculus chief Architect atman Benz doc says that GP GPU performance is super important because you're basically running to 2160 by 1200 displays one for each eye and 90 Hertz simultaneously Which takes around three times the GPU power of your average for HD 1080p rendering That you would get in the game or any kind of other Situation drop frames are also fine on traditional desktops But for the most part while missing frames and VR results and cons well missing frames and VR results and discomfort Disorientation and sometimes seasickness Benz also notes that Oculus still wants to develop for Mac and Linux that at this stage They quote don't have a timeline which means maybe two three years It's it's pretty beefy specs, but you know considering the technology. It's not surprising When can I play it and what can I play?  You know I like spin doctors when when they came out when I was in college I like spin doctors now because I'm that old I still just prefer rock band over guitar hero because it's like a more community like it's not a negative reinforcement game It's not one of those where it's just constantly irking at you every time you miss a note. It's yeah, it's good stuff It's fun. It is it's a fun game and I I do prefer guitar hero over rock band But basically because rock band needs you that required and that doesn't require sort of implicitly demands that you have an ensemble with you which It's more fun if you do Polygon reports that blizzards Diablo 3 has been overrun by cows in our third anniversary of the game Battle.net will only say that rumors allege that townships throughout Conduras are being overrun by bipedal Bartish bearing bovine and then and then strenuously denies any knowledge of their existence The event is homage to the secret cow level Diablo 2 and will continue until dust on May 21st Bartish bearing bovine. I wrote that just for you Roger. That is a tongue twister That is a tongue. I will say that I will try I will try to find it. I will try to find it If you are one of the people who felt a burning sensation of injustice when Fox announced it canceled the Mindy project after only three seasons Then listen up and gadget reports that Hulu will pick up the series starting with a 26 episode fourth season That's a lot of episodes for a streaming platform. That's pretty big deal The show which is named for star Mindy Kaling already streams on the TV subscription service as one of several Fox series available there So the news isn't too surprising, but still very welcome to the core community There's no word on a premiere date just yet, but when it arrives, I'll be one of the many Hulu original series It'll be one of the many Hulu original series that you really mean to watch, but just haven't yet canceled broadcast shows are first getting revived online regularly these days as Yahoo nabbed community Which I still haven't watched but totally mean to and Netflix is no stranger to picking up discarded series too So all of this magic is happening and yet there is still no quantum leap Strive to put right what once went wrong Hulu do it for me Me but do we really want Scott Bacchula?  Yes, huh? Hobbit, oh, you want me to jump in? Yeah Dulce Sent us this warning about mobile payments and passwords Starbucks app users are getting their bank accounts drained by password guessing fees according to gizmodo people with Starbucks Rewards can link the coffee payment app to their bank accounts or credit cards or pay-pound accounts Big big flashing warning lights right there Scammers by gift cards and then sell them illegally the consumer journalist Bob Sullivan said that Starbucks mobile payments fraud are a big deal with the company because they Process around two billion dollars of mobile transactions as of last year Now Starbucks has acknowledged that this scam is happening But it hasn't said that it's been hacked that you know We haven't been hacked instead. They're blaming users for using poor passwords and I can kind of believe them I mean, I don't know connecting anything to your bank account. I'm sorry There's a truism in technology the more convenient you make it the more liable is gonna get hacked You have to think about security as a chain and if say you're trying to protect your bank account You have to consider all of the things that are then linked to it and that applies to anything But yes, you're absolutely right convenience is always going to win out in the society and that's why Considering it is their app rather than blame it on their customers bad passwords Maybe update the app so that it doesn't allow you to register with a bad password Although that would make the no that's not gonna go They could just do two two two factor authentication No, they do it once you know what it is They're gonna make it as simple as possible because they need to be able to do it at the register Rogers old guy one word of advice to everyone out there. Don't connect anything to your bank account All right, the only one who has access to it is me and perhaps the bank. That's it. No one else. Yep Another Jay Martin submitted the ours technical article with this amazing headline Humanity weeps as Candy Crush saga comes pre-installed with Windows 10 We almost don't have to say anything more but Microsoft announced that King's addictive game will be the Minesweeper of Windows 10 And if that's not enough we'll include cross-play options for iOS and Android devices No word yet if there's an opt-out for those who want to use the new Windows operating system to actually work The Lewis guy sent us a torrent freak article about angry YouTube man Benjamin Liguri was filed a lawsuit at the US district court for district of Rhode Island Which lists Google Viacom Lionsgate and another youtuber as defendants Liguri bemoans a restrictive YouTube user contract in a system that unfairly handles copyright complaints The Gary says that he has uploaded content to YouTube under the name better stream for purposes including quote Criticism comment news reporting teacher teaching scholar. Wow. He's really loading this down loader a scholarship and and or research But never in breach of copyright Nevertheless, he claims to have fallen foul of YouTube's automated anti piracy systems when he uploaded what he claims as a parody of the girl with A dragon tattoo movie only to have it removed by YouTube after another YouTube user filed the complaint. I Mean, I'm kind of glad he's doing this I don't know it necessarily if he's the strongest case study But somebody's got to crack that system because it really is a pain in the butt And it absolutely prevents you from uploading things to YouTube that you would other was like to do You know, but the thing to understand event, you know Ultimately YouTube is a privately held entity platform and you need to you need to subscribe to its rules It's you know, when they were a little less stringent was awesome, but you know as more vested interests and more money and more people Start taking a closer look at it. You're gonna you invariably run into these things, right? That's a good point It is their playground and if even if it weren't for the DMCA They could just say we can take your video down because we want to we would reserve the right to refuse service to anyone So I guess in that case you could just host it on your own. It's not hard to these days. Yeah, it's it's you know It's a double-edged sword Yeah, I don't have the music so I'm just gonna say Dude alright, so as we mentioned in the headlines Google self-driving cars are coming to public roads this summer the vehicles will be limited to a maximum speed of 25 miles per Hour and each will include a safety driver who can take over at any point be the on-board wheel brake and accelerator gentlemen discuss Yeah, you know, I actually am very much in favor of the whole concept if not necessarily the the first iterations of Autonomous automobile's I mean it's been one of the it's been one of the kind of goals ever since like the 50s To have a car or you could just kind of sit back and let it drive itself So you can work for the man 24-7 and not be disturbed by something like you know driving yourself home from the corporate office But at the same time and there's a number of hurdles. I think they need to overcome You know the number one is like the very litigious nature of People at least in the US when it comes to things like this Yeah, I just I feel like you know Part of it is the American love affair with the automobile and I kind of wish that as much effort is being put towards revamping public transit so that we have more efficient means of getting around But that's never going to take place because we have to be independent with our cars and such and so These baby steps are going to take a long long time 25 miles an hour Sounds pretty good, but I actually have a feeling that that's actually going to cause more incidents because the self-driving is limited at that speed Because at least here in California if you're not also going 10 miles over the limit you're going to get cut off and and Run over run over. Yeah, I mean the larger point to me is that Everybody has to do this all at once or else it's not going to work and nobody's ever going to want to do this all Like not everybody's going to want to do this so that it leads you to the question of like all right So they're going to be a whole separate Like freeway systems for self-driving cars I think yeah We could put we could put them on rails and we could put all the cars on different rails and then they could just yeah We can have trains pull them in fact so You know so you guys bring up a really interesting point and one of my at least philosophical You know things about self-driving cars is if you take it to its logical Kind of end it can serve actually as a private and the private or a hybrid private public transit system Right imagine if you could take one of these cars and you could kind of hitch it into a train You put on an each of v-lane that it's entirely automated So for that entire stretch of your commute say on you know up here on 280 or 101 You know everyone in that chain doesn't have to touch your car It's moving at the optimal speed for like a 10-car train of these cars with another 10 behind it Which would be great, and I honestly think that initially there will be rules that will say that As long as you're in the HIV lane for this section of how you can drive you'll have a little sign This says you know a diamond lane a diamond lane automatically enables you to have Auto automated driving mode it hits the freeway and then when it you know when it's coming off And you're about to turn off the warranty and say you know you better grab the steering wheel And if you don't it's just going to keep keep on going in the giant loop Around the freeway. Yeah The handoff is where a lot of the problem is because if you are figuring like the reason we want self-driving cars Is that we can be like texting our friends and stuff? Instead of having to keep our eyes on the road But when the car does alert us and say hey a situation is occurring that's going to require your you know Human ability to drive the car not my computer ability to drive the car So please take over turns out that the switch over takes somewhere around seven seconds Which is like way too long and unfortunately there's not like a So there's not a patch to the human to make us better at doing that There's a really you're all paying attention or not paying attention There's no kind of sort of paying attention in the car, right? And there's a great article on medium detailing the from the perspective of the self-driving car and how the incidents that the Google and other researchers Testing these have discovered is that you know, we are just terrible terrible drivers I think what was really interesting is that of like 50% of the serious injuries injuries on US roads Happened in intersections and Google pointed out a really good example of like say a bicyclist in a intersection at the same time that the light turns green on the opposing traffic and Almost gets hit and this is totally the case as somebody who has in fact been in us You know serious injury in an intersection that I was actually told by a California police officer that the most dangerous color in California is fresh green and so yeah, you're right. It's either we are all in self-driving cars or Where there's few of them that are going slow and obeying the laws and getting cut off by all the non self-driving cars I think I think I'll be in a will be in a weird hybrid mode Like a system failsafe won't allow you to turn it on until you reach An approved section of road or highway or whatever deemed by the state that you can use it on I mean, it's it's actually quite It's quite seductive if you can think about it if you imagine like you were talking about mass transit Imagine if you had a mass transit system or each of the compartments that you sat in you actually just Kind of leased out it would drop you directly at your door Right instead of owning the actual car and this is great because one of the concerns is like well What if someone doesn't maintain their you know automated car and some of the sensors fail and you know it goes spinning off? Well, if all you do is lease it and then you turn it in after a certain amount of time And they can refer rich make sure everything's up to spec So you're never having to worry about someone driving like a 15 year old You know Google car even though like you know the technology's bypassed it, you know 10 times In that in that same amount of time. I don't know. It's it's I like the idea. I think it's I think it'd be great I think no because I love it too I just feel like you know It's not you have to accept the fact that it's never going to be perfect And that it takes a huge change in the infrastructure when you think about things like autopilot on airplanes Which we've had you know since the 60s With like glide scopes and auto land and things of that nature even still in this day and age We have incidents with those because computers malfunction that even as early as 2009 Turkish Airlines Boeing 737 crashed in Amsterdam When its radio altimeter was malfunctioning reporting it being some eight feet higher than it actually was and by the time that the Crew actually noticed and just similar to a car saying hey human something's not right here take over by the time They figured out they were already in a low-speed stall, and it was already too late I mean you know you but the point you bring up is you know in the analogy to this is that when you do a handoff on the Automated car you're going off on offer going off a highway and off, you know into a surface street Take off and departures to you know a plane is the most dangerous You know part of flying for like 90% of the flight most pilots let the autopilot fly because There's nothing to really do and it measures out the actual arrival time where they need to to end up at the airport You can't arrive too soon. You don't want to arrive too late And so there's always this kind of you know desire to be at a perfect thing You just let the computer handle that portion of it, right? I'm not saying that you will have the car drive you You know down to the safeway automatically, but like if you go on the if you're on like a two-hour commute You know it's a pretty straight run of road Yeah, granted you have to stop and maybe the occasional person jerk might cut you off But you know we have technology that already kind of addresses that and if we can do that portion of it I think it would save a lot of people time bottom line. When are we getting this and then we're gonna I would say cars I think initial cars next year and then possibly by 2020 very rich people will have Access to selected roads to do whatever they want All right Well, thank you guys and if you guys have any thoughts about self-driving cars Do feel free to write us a feedback at daily tech news show calm And we have two picks of the day today I always love it when these things come in in weird batches like we get two of the exact same pick of the day So Roger's gonna take the first one. I'm gonna tell you about the second one And this one's from Christian Cantrell. He writes. Hey guys with all the recent wearable discussion I thought I'd submit one of my favorite devices for a pick of the day the new Garmin Phoenix 3 fitness smart watch With Apple watch Android wear and pebble time getting most of the smart watch attention It's even to overlook the Phoenix But if you're looking for a smart watch that is a watch first fitness tracker second and a smart device last This is it the best features of the Phoenix are always on color display built-in GPS Both activity and hardcore training features extensive outdoor and hiking features iOS Android compatible smart notifications from your phone water-resistant to 100 meters I could go on and on about what why I think for money people the Phoenix 3 is the best smart watch But it basically reduces to this it's a watch first activity fitness device second and the extension of your smartphone last for me It's exactly the right priority So that was Christian and then David Wilkie writes in hello Tom Jenny Roger co-host and he's just south of lovely Cleveland in Columbus A few months ago David lost his pebble watch So he's been holding out on a replacement decision pending the pebble to in the Apple watch and you know He's still weighing his options So he was in the golf store the other day and all the golf GPS widgets and wearables caught his eye I mean the pro shop is a very difficult dangerous place to be And so he wanted to see if there were any wearables that do all fitness stuff plus notifications So they showed him the Garmin Vivo active which they hadn't yet put on display So it's similar to the new pebble it has a color e-ink display But Vivo active is touchscreen just swipe the display to bring up notifications calendar music player weather and the activities Additionally the Vivo active has built-in GPS and specific tracking apps for run bike and walk both stationary treadmill or outside It also has a swimming tracking app as the watch is water resistant to 5 ATMs And of course since it was in the pro shop It has a golf app that you upload your most frequent courses to the watch and you have golf GPS So he says it's very lightweight and has a similar look and feel to original pebble And they're slowly building out their app store so you can download different faces So bottom line David is bummed he lost his pebble But he's pleasantly surprised at how Garmin is becoming competitive in the smart watch space So send your pics if you have them to feedback at daily tech news show comm and you can find Tom's pics on our website On the pics page daily tech news show comm slash pics Alright, so now we have some messages of the day Who oh wait note. That's just mistake. Oh mistake. All right So this is in the discussion on Thursday May 14 2015 I think the comparison of Walmart to Amazon is off base I think Walmart is missing their greatest strength and that is their stores being everywhere What they should you do is use the Best Buy model That is to buy things that are in the local store and just have them ready for pickup I find best buy service in this category to be awesome No looking through the store for items that you're looking for the items are available within the same day if Walmart had had The same ability I would love it. It would save a lot of time that is normally wasted looking for items throughout the store Now Roger's gonna read you one and then I'm gonna tell you who wrote that one because I totally forgot to add it All right So one of the reasons that I love the DTNS audiences because they are so devoted to getting things right Yesterday we had an email about sound sound standards which would end up paired with the new blue rays coming down the road today Josh Garner wrote the original email wrote us again. He writes this time Yesterday my email regarding the audio spec that will be used on blu-ray was read on the show and I incorrectly stated that DTS Had not yet announced their audio spec Dolby has and it'll be called Dolby Atmos as a quick reminder Apparently DTS did announce a spec last week and I missed it It's it will be called DTS X aside from the aforementioned compressed audio and uncompressed audio DTS X will not use discrete channels like double Dolby digital instead I'll use an algorithm to extract plate your particular speaker set up supporting a limitless number of speakers any shape and position The blu-ray spec will support DTS second Dolby digital at most All right, so it was Paul Franz who did that first one So that made me happy and then the last that one was a guy named David. So no that was that was Josh All right getting confused That's David. It was off. Oh No, wait, I'm confused. That's a different thing. I think there was some cutting and pasting situation We made it so far in this show doing reasonably well Things got a little goofy So but the reason why things went so well is really Darren kitchen Who jumped in as usual on Friday our wonderful Friday contributor who never misses a Friday unless? He's in a bunker somewhere So Darren tell us what's going on with you? Oh, man. We've got so much great things happening over at hack five We recently relaunched a threat wire to show all about security privacy and internet freedom It's by myself as well as Patrick Norton and Shannon Morse and we're bringing that three days a week So we've been covering all sorts of good stuff happening between Venom and NSA metadata collection And some of the other stories we've talked about today So go and check it out if you're interested in security and privacy. It's at hack five org or you could just Google threat wire It's all good stuff. Awesome. And then Len Peralta Has given us driverless DTNS Yes, this is the show was was was kind of driving itself and And and I think you guys did a great job So for those of you who cannot see this in the video It's it's a driverless car that is actually saying and I'm assuming it's Tom who's kind of controlling it saying Shouldn't you be paying attention to the oh god the babies? What have you done to the babies? And Jenny is saying she's singing I'm little miss can't be wrong to her the spin doctors Roger Chang is singing him on the top of the world looking down on creation We talked free show about the carpenters and up with Mad Max coming out today Darren at kitchen is saying what a lovely day Spectacular and also I love it because not only is it the spin doctors, but I am technically little miss can't be wrong No, cuz I almost wrote I'm on the on the I'm the queen of the world. I'm like no She's made a little miss can't be wrong says and that is corrected so many ways I have to buy this right now. Where do I buy it? Oh, yeah Go to Len per ultra store com you can pick it up there It is actually on the the site right now as we speak You can also get all the prints that I do if you back me a patreon at the DTNS lover level You'll get every single one of these for free digitally It's great and also one more thing at the at the online store. I've just You know geek a week is available I've just launched a new season of a geek a week Which you can actually now pick up the cards and the training the trading cards and the game which includes Tom Merritt Frank Belmont Justin Robert Young bunch of people Scott Johnson a bunch of folks that are friends of frog pants and And if you look there is a I've added a limited amount of Geek a week black decks Kickstarter exclusive decks that come with a surprise card in it So if you if you were a fan of I can't really tell you what the card is just to say I will say CAH that's all I'll say. All right. I want to add that you guys may or may not know that Len also does Custom drawings for people and he just did one for me this past weekend, which was Spectacular I can't tell you it was for because they haven't received it yet because I'm gonna print it out all special and pretty But I thought that it was a really great process and an incredibly special gift So don't forget that that that also happens Thank you. Yeah. Also. Thanks to Roger Chang who came in here and gave this show some serious legitimacy today I've never heard that phrase used before And and of course thanks to all of our 5054 patrons who have been Making it possible for us to have contributors making it possible for me to pay my rent and most importantly Making it possible for Tom Merritt to broadcast add a free and Independent which is an incredibly rare incredibly valuable thing in today's world So thank you guys for that. I wish I could thank you like every day But really we'll just keep trying to bring you the best show we possibly can Yeah, and our email address is feedback at daily tech new show calm call us 512 59 daily And listen to the show live at tune in at alpha geek radio calm and visit our website at daily tech new show calm Alrighty you guys should be hearing some theme music Monday's guest Veronica Bellamon will fill in for Tom on the last day that Tom is not here And we liked him so much. We brought him back Roger Chang will be her guest So I hope you guys enjoy and we will see you Monday All right Right so that music still playing I guess all I can see it is on the board, but um and I can't oh, you know what I can do And I couldn't get the the diamond club one so I'm gonna recreate it which is diamond club has that wait What did they say? Stop this recording. Oh my goodness. Thank you guys so much. That was incredible It happened I gotta look at this picture again. I'm making this It came together at the very last I was a scared I was scared when I added those when I added those things about spin doctors and Mad Max and Carpenters really came together for me, so Wow, it actually I love it. It actually it has to me it has shades of Charlie's angels where Where Tom is just Charlie and we're like running around doing his bidding. That makes me Bosley. I guess yeah You just need less hair How does that guy sound like this got a real weird voice. Yeah, all right It's a pretty amazing alright so some titles We have breaking news kittens are taking over the White House And I don't what I don't know what archive first one was but it's Oh That's that game where if you tap something, it's very apparent to you what it is, but if the person hearing the tapping can't figure out what the song is, they just did a study about that. We also have bipedal, bardish-bearing bovines, which Nii really is one of the only, but let's see what else. We have candy crushes, Minesweeper, that's good. Maybe is hard, but driving is easy. Oh, this is pretty great. I can have, has lived. That's pretty, that's pretty funny. I will vote for that. That's pretty funny. I like that one a lot. Let's see if there's anything. Doxing your own family. There is no cow level. Quantum Hulu, thank you very much. Who's was that in the mic? Circuit. Take the wheel. Let's see. Circuit. Oh, that's totally what Google needs for the self-driving car is an anthropomorphized virtual assistant that drives kind of like Siri. So it's like, and Google now is just not doing it, it just doesn't have enough personality. We need like some sort of like Kermit the frog type character that's like, I got the wheel, Bob. Now I would just say, just re-didge the voice for Night Rider and just tell everyone you're driving kit. Oh, yes. And then you'll totally believe that the car drives itself. Be awesome.  No, what I like is give it the how voice from 2001 and just be like, you know, how take the Howard Street exit and then have your car be like, I'm sorry, I can't do that, Dave. If it gave you the voice of your mother and so he would drive, but it was also a nag you at the same time. So that would be how I drove your mother. Oh, yeah. What am I seeing here? It looks awesome. Oh, this is a logo I did for Mr. Monster Rockers. Yeah, this is a this is a logo I did for a client. Sorry. I didn't realize I was still on. And this is still on. Put your picture back. This is a cover of I'm working on. That's another project I'm working on. But there you go. That's super awesome. All right. Well, I'm going to probably end this post show because I have so much work to do on publishing this. And then I'm going to Disneyland because that's what you do after you get through a week. Apparently. You have a season pass. We do. That one first 40th birthday I got me one too. So a number of us are going down there and just going to hang out in the rain at Disneyland, which sounds like the best thing. Awesome. Oh, yeah. I'm going to a play this evening, so I have to take off. Oh, bye then. Thank you so much. And thank you for everything. See you later. Bye bye. Enjoy this together. Thanks. Bye bye. Talk to you guys later. All right. I'm still on the broadcast. Todd, wait in. You can stop that EGR.